/* ============================================================
   Basketball spacebar game — Step 12
   Figma ref: "Final" game screen frame (172:4632, 1440x1024).
   Coordinates in docs/game-elements.json, same %-based approach
   as the keyboard hotspots so the frame stays correct at any width.

   Fonts: Figma specifies "Minecraft" (HUD digits) and "Arcade
   Interlaced" (labels/instruction) — neither is available in this
   project or on Google Fonts, so both are substituted with
   "Press Start 2P" (confirmed with Saumya) as the closest free
   pixel-font equivalent.
   ============================================================ */

#playground {
  /* Just enough to clear the fixed nav (~70px) plus a small buffer —
     not #hero's 140px, since this page has no title/subline above the
     frame the way the hero does. */
  padding: 90px var(--space-xl) var(--space-xl);
  max-width: calc(1100px + 2 * var(--space-xl));
  margin: 0 auto;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.playground-inner {
  width: 100%;
  max-width: 1100px;
}

.game-frame {
  --game-accent: #ff5b3e;      /* HUD/instruction text — Figma node 172:4650 */
  --font-pixel: 'Press Start 2P', var(--font-body);

  position: relative;
  /* Departs from the Figma frame's native 1440:1024 aspect ratio on
     purpose — that ratio reserved ~47% of the frame's height for the
     HUD + hoop composition above the keyboard, nearly as tall as the
     keyboard graphic itself. Traded keyboard size for game-area
     breathing room here: frame capped at 1100px (down from matching
     the hero's 1284px exactly) with a ~360px header zone for the
     hoop/HUD/ball, so the actual game has more room to read. HUD and
     hoop stay pixel-fixed near the top; only the keyboard (and
     everything anchored to its ground line — ball, shadow, charge
     meter, key hints) shifts down, opening up the gap between them.
     See docs/game-elements.json for the original Figma coordinates
     every element's % position below was derived from. */
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 1100 / 779.72;
  background: var(--color-bg);
  overflow: hidden;
  user-select: none;
}

/* ── HUD — Figma spec (172:4650): bare floating digits, no card chrome.
   Moved up near the frame's top edge (was 13.96%) now that the header
   zone above the keyboard is much more compact. ── */
.game-hud {
  position: absolute;
  left: 8.82%;
  top: 4.16%;
  width: 20.56%;
  display: flex;
  gap: var(--space-lg);
  z-index: 4;
}

.hud-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hud-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--game-accent);
}

.hud-value {
  font-family: var(--font-pixel);
  font-size: clamp(18px, 3vw, 40px);
  letter-spacing: -0.5px;
  color: var(--game-accent);
}

/* ── Hoop ── Scaled from the Figma spec (25.35% × 35.64%) to fit the
   header zone — bottom edge flush on the keyboard's top edge (46.17%),
   same as the pole/net art implies (the pole's base rests on the
   keyboard), so it moves down with the keyboard rather than staying
   pinned near the top. */
.game-hoop {
  position: absolute;
  left: 67.56%;
  top: 15.38%;
  width: 21.82%;
  height: 30.79%;
  z-index: 2;
}

.game-hoop__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 6px rgba(12, 10, 9, 0.18));
}

/* ── Ball — pixel size unchanged from the Figma spec (just scaled to
   the frame's own height so it doesn't look off), still resting with
   its bottom edge on the keyboard's top edge (46.17%). ── */
.game-ball {
  position: absolute;
  left: 16.81%;
  top: 37.75%;
  width: 5.97%;
  height: 8.42%;
  will-change: transform;
  z-index: 3;
}

.game-ball__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.game-ball.is-charging {
  animation: ball-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes ball-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.18); }
}

/* ── Ball shadow — cast on the ground plane, not on the ball itself.
   The ground line is the keyboard's top edge (46.17%), which is also
   exactly where the resting ball's bottom edge sits. A true circle
   (aspect-ratio: 1, sized in real px via width%) flattened with a fixed
   scaleY reads as a sharp ellipse regardless of frame scaling; JS only
   ever adjusts --shot-x (tracks the ball horizontally) and --shot-scale
   (shrinks the shadow as the ball gets higher in its arc). ── */
.game-ball-shadow {
  --shot-x: 0px;
  --shot-scale: 1;

  position: absolute;
  left: 16.81%;
  top: 46.17%;
  width: 5.97%;
  aspect-ratio: 1;
  background: rgba(12, 10, 9, 0.38);
  border-radius: 50%;
  transform: translate(var(--shot-x), -50%) scaleX(var(--shot-scale)) scaleY(calc(0.32 * var(--shot-scale)));
  z-index: 2;
  pointer-events: none;
}

/* ── Charge meter — sits 12px below the ball's resting bottom edge,
   which is the keyboard's top edge (46.17%). ── */
.charge-meter {
  position: absolute;
  left: 16.81%;
  top: calc(46.17% + 12px);
  width: 5.97%;
  height: 8px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 3;
}

.charge-meter.is-visible {
  opacity: 1;
}

.charge-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
}

/* ── Keyboard background — still 92.5% of the frame's own width (which
   is itself smaller now, so the keyboard graphic is smaller too). ── */
.game-keyboard-bg {
  position: absolute;
  left: 4.46%;
  top: 46.17%;
  width: 92.5%;
  height: 47.42%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* ── Key hints ── */
.game-keys {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.game-key {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  cursor: pointer;
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
}

.game-key--space {
  left: 23.96%;
  top: 85.16%;
  width: 28.82%;
  height: 5.88%;
  background: #ffd84d;
  border: 2.14px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-pixel);
  font-size: clamp(7px, 0.85vw, 12px);
  letter-spacing: -0.2px;
  color: var(--color-text);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(12, 10, 9, 0.35);
  transition: background-color 100ms ease, transform 80ms ease, box-shadow 80ms ease;
}

.game-key__ball-icon {
  width: 11%;
  height: auto;
  flex-shrink: 0;
}

.game-key--escape {
  left: 6.39%;
  top: 51.75%;
  width: 4.41%;
  height: 6.17%;
  border-radius: 8px;
}

.game-key__escape-icon {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.game-key--space.is-pressed {
  background-color: var(--color-accent);
}

/* ── Result flash ── */
.result-flash {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) scale(0.8);
  font-family: var(--font-pixel);
  font-size: clamp(16px, 3vw, 36px);
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 200ms ease, transform 200ms ease;
}

.result-flash.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.result-flash.is-make { color: var(--color-key-green); }
.result-flash.is-miss { color: var(--color-accent); }

/* ── Streak celebration ── */
.streak-pulse {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%) scale(0.7);
  font-family: var(--font-pixel);
  font-size: clamp(12px, 1.6vw, 22px);
  color: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 250ms ease, transform 250ms ease;
}

.streak-pulse.is-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Modals (exit confirm + game over) ── */
.game-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.game-modal[hidden] {
  display: none;
}

.game-modal__box {
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
  border: var(--border-base) solid var(--color-border);
  padding: var(--space-xl);
  border-radius: var(--radius-card-sm);
  text-align: center;
  max-width: 380px;
}

/* Close [x] — same pill/border language as .game-modal__btn, just round */
.game-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-thin) solid var(--color-border);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Score leads the hierarchy — styled like a project card title (same
   heading font/weight/size as .project-card--secondary's title, same
   accent color as the rest of the game's HUD) — the quip underneath
   is regular muted body copy, same as project card descriptions. */
.game-over__score {
  font-family: var(--font-heading);
  font-size: var(--text-proj-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-proj-lg);
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.game-over__score-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-muted);
}

.game-over__title {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.game-modal__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* Game-over actions: "See My Work" stacked above "Play again" —
   align-items: stretch (rather than center) makes both buttons match
   the width of the wider one ("See My Work →"), so text-align: center
   is needed on the buttons themselves to keep their labels centered. */
.game-modal__actions--stacked {
  flex-direction: column;
  align-items: stretch;
}

.game-modal__actions--stacked .game-modal__btn {
  text-align: center;
}

.game-modal__btn {
  padding: var(--space-sm) var(--space-lg);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-tag);
  background: var(--color-bg);
  font-size: var(--text-sm);
  cursor: pointer;
}

.game-modal__btn--confirm {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  #playground {
    padding: var(--space-lg);
  }

  .game-frame {
    border-radius: var(--radius-card-sm);
  }
}