/* ── Platformer — style.css ── */

#game-hud {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  z-index: 10;
  box-sizing: border-box;
}

#game-container {
  position: fixed;
  top: 76px; /* 44px header + 32px hud */
  left: 0;
  right: 0;
  bottom: 180px; /* above pinned controls-bar */
  overflow: hidden;
  background: #1a1a2e;
}

/* Pin the shared .controls-bar to the bottom of the viewport so it stops
   colliding with #game-container (which is position:fixed and fills the
   space above). Shared joystick.css positions it via normal flow + margin,
   which assumes the parent is a flowing <main class="app"> — this game
   is fixed-layout so we override here. */
.controls-bar {
  position: fixed;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 30;
}

@media (pointer: fine) {
  #game-container {
    bottom: 0;
  }
  .controls-bar {
    display: none;
  }
}

#game-container .game {
  position: relative;
  overflow: scroll;
  width: 100%;
  height: 100%;
}

/* ── Game grid / background ── */
.background {
  table-layout: fixed;
  border-spacing: 0;
}

.background td {
  padding: 0;
}

/* Sprite assets — Kenney "Pixel Platformer" (CC0) cropped tiles.
   image-rendering: pixelated keeps the pixel art crisp at the small
   15px tile scale. */
.wall,
.lava,
.Lava,
.coin,
.player {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
}

.wall {
  background-image: url("images/tile_top.png");
  background-size: 100% 100%;
  box-sizing: border-box;
}

/* ── Per-level themes ──
   body class is set to .level-N by game.js. Cycle 4 visual moods so
   levels 1-2 = grass (default, no filter), 3-4 = desert (warm sepia),
   5-6 = snow (cool blue, brighter), 7-8 = stone castle (cool, desaturated).
   Filter is applied to the wall + lava + background — keeps the level
   feeling cohesive without needing 3 extra tile sets. */
body.level-3 .wall, body.level-4 .wall {
  filter: hue-rotate(-15deg) saturate(1.35) brightness(1.05) sepia(0.25);
}
body.level-3 #game-container, body.level-4 #game-container { background: #3a2a18; }

body.level-5 .wall, body.level-6 .wall {
  filter: hue-rotate(180deg) saturate(0.55) brightness(1.45);
}
body.level-5 #game-container, body.level-6 #game-container { background: #1a2b3a; }

body.level-7 .wall, body.level-8 .wall {
  filter: hue-rotate(-180deg) saturate(0.3) brightness(0.82);
}
body.level-7 #game-container, body.level-8 #game-container { background: #15151c; }

/* Sky tint per theme — softer hue on the empty background cells */
body.level-3 .background td, body.level-4 .background td { background-color: rgba(255, 200, 130, 0.04); }
body.level-5 .background td, body.level-6 .background td { background-color: rgba(150, 210, 255, 0.05); }
body.level-7 .background td, body.level-8 .background td { background-color: rgba(60, 50, 80, 0.06); }

/* Static lava (background <td> at "!" cells) — orange→deep-red molten
   liquid with a subtle pulse. Pure CSS so no extra sprite needed. */
.lava {
  background: linear-gradient(180deg,
    #ffb347 0%,
    #ff7a18 35%,
    #d63300 65%,
    #7a1f00 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 220, 130, 0.7);
  animation: lava-pulse 1.3s ease-in-out infinite;
}
@keyframes lava-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18) saturate(1.1); }
}

/* Dynamic lava actor (moving "=" / "|" / "v") — keep the saw sprite as a
   distinct visual signal that this hazard MOVES, separate from the static
   lava floor. */
.Lava {
  background-image: url("images/hazard.png");
  background-size: 100% 100%;
  background-color: transparent;
}

/* Spring — coiled gradient drawn in pure CSS. Bottom-heavy coil suggests
   compression that's about to launch. */
.spring {
  background:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 30%,
      #d12626 30%,
      #d12626 45%,
      #ffd357 45%,
      #ffd357 55%,
      #d12626 55%,
      #d12626 70%,
      #ffd357 70%,
      #ffd357 80%,
      #444 80%,
      #444 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.25);
}

/* Ladder — brown vertical rails with horizontal rungs */
.ladder {
  background:
    /* Two vertical rails */
    linear-gradient(to right,
      transparent 0%, transparent 18%,
      #6a3a1a 18%, #6a3a1a 32%,
      transparent 32%, transparent 68%,
      #6a3a1a 68%, #6a3a1a 82%,
      transparent 82%, transparent 100%),
    /* Repeating horizontal rungs */
    repeating-linear-gradient(to bottom,
      #6a3a1a 0px, #6a3a1a 3px,
      transparent 3px, transparent 8px);
}

/* ── Actors ── */
.actor {
  position: absolute;
}

.coin {
  background: url("images/coin.png") center/100% 100% no-repeat;
  animation: coin-spin 1.4s ease-in-out infinite;
}
/* Horizontal-scale wobble fakes a 3D spin without needing extra frames:
   the gem squishes flat (≈ edge-on view) twice per cycle and flips between. */
@keyframes coin-spin {
  0%,  100% { transform: scaleX( 1); }
  25%       { transform: scaleX( 0.25); }
  50%       { transform: scaleX(-1); }
  75%       { transform: scaleX(-0.25); }
}

/* Player size is 0.5 × 1 tiles (7.5 × 15 px). Use background-size: auto 100%
   so the 18×18 sprite renders at its natural aspect ratio (square) and
   overflows the narrow div symmetrically — character looks correct width. */
.player {
  background: url("images/player.png") center/auto 100% no-repeat;
  overflow: visible;
}

/* In the air (jumping or falling) — different pose with arms up */
.player.airborne {
  background-image: url("images/player_jump.png");
}

/* Horizontal flip when moving left. Last facing is kept while idle so the
   player doesn't snap back to right-facing the moment they release a key. */
.player.facing-left {
  transform: scaleX(-1);
}

/* Lost — red tint via filter (no extra sprite). Win — green glow. */
.lost .player {
  filter: hue-rotate(-50deg) brightness(0.85) saturate(1.3);
}

.won .player {
  filter: hue-rotate(70deg) brightness(1.15) drop-shadow(0 0 4px rgba(120,255,140,0.6));
}

/* ── D-pad ── */
.dpad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20;
}

@media (pointer: fine) {
  .dpad {
    display: none;
  }
}

.dpad-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 18px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.dpad-btn:active {
  background: rgba(255, 255, 255, 0.35);
}

/* ── End screen overlay ── */
.end-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.end-screen[hidden] {
  display: none;
}

.end-content {
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 240px;
}

.end-icon {
  font-size: 3rem;
  line-height: 1;
}

.end-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 8px 0;
}

.end-coins {
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--text-muted);
}