/* ==========================================================================
   Retro Arcade Hub — Game stage, HUD, overlays and touch controls
   Loaded only on /games/<slug>/ pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Game hero (above the canvas)
   -------------------------------------------------------------------------- */
.game-hero { padding-block: var(--sp-4) var(--sp-5); }
.game-hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.game-hero h1 { margin-bottom: var(--sp-3); }
.game-hero__lede { color: var(--c-text-soft); max-width: 70ch; margin: 0; }

/* --------------------------------------------------------------------------
   2. Stage shell — arcade cabinet framing around the canvas
   -------------------------------------------------------------------------- */
.game-stage {
  --stage-accent: var(--c-cyan);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--c-surface), #0c0e1f);
  padding: var(--sp-3);
  box-shadow: var(--shadow-lg);
}

/* HUD strip */
.game-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: #05060f;
  font-family: var(--font-pixel);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
}
.hud-stat { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.hud-stat__label { font-size: var(--fs-xs); text-transform: uppercase; color: var(--c-text-mute); letter-spacing: .12em; }
.hud-stat__value { color: var(--stage-accent); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; }
.hud-stat--best .hud-stat__value { color: var(--c-amber); }
.hud-stat--lives .hud-stat__value { color: var(--c-red); }
.game-hud__spacer { flex: 1 1 auto; }
.game-hud__buttons { display: flex; gap: var(--sp-2); }
.game-hud__buttons .icon-btn { width: 36px; height: 36px; }
.game-hud__buttons .icon-btn svg { width: 17px; height: 17px; }

/* Canvas frame.
   The engine overrides both aspect-ratio (from the game's own logical
   resolution) and max-width (computed from the available viewport height) so
   the whole playfield fits on screen rather than running off the bottom. The
   4/3 below is only what applies for the moment before that runs. */
.game-frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #04050d;
  border: 1px solid var(--c-line-soft);
  touch-action: none;               /* stop page scroll/zoom during play */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.game-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Optional scanline veneer — very low opacity, disabled for reduced motion
   and switchable off by the user via the effects toggle. */
.game-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .16) 0px,
    rgba(0, 0, 0, .16) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: .5;
}
.game-frame.no-fx::after { display: none; }

/* Fullscreen behaviour */
.game-frame:fullscreen { aspect-ratio: auto; width: 100vw; height: 100dvh; border-radius: 0; }
.game-frame:fullscreen canvas { object-fit: contain; }
.game-frame:-webkit-full-screen { width: 100vw; height: 100vh; }

/* --------------------------------------------------------------------------
   3. Overlays — ready / paused / game over / victory
   -------------------------------------------------------------------------- */
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Not `center`: when the content is taller than the frame, centring would
     push the title out of reach above the scroll origin. The auto-margin
     pseudo-elements below centre it when there is room and collapse when
     there is not, so nothing is ever unreachable. */
  justify-content: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: center;
  background: rgba(5, 6, 15, .9);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.game-overlay::before,
.game-overlay::after { content: ""; flex: 0 0 0; height: 0; }
.game-overlay::before { margin-top: auto; }
.game-overlay::after { margin-bottom: auto; }
.game-overlay[hidden] { display: none; }

.game-overlay__title {
  font-family: var(--font-pixel);
  font-size: clamp(1.3rem, .8rem + 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stage-accent);
  margin: 0;
  text-shadow: 0 0 22px currentColor;
}
.game-overlay--over .game-overlay__title { color: var(--c-red); }
.game-overlay--win .game-overlay__title { color: var(--c-green); }

.game-overlay__text { max-width: 46ch; margin: 0; color: var(--c-text-soft); font-size: var(--fs-sm); }
.game-overlay__scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  font-family: var(--font-pixel);
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-overlay__scores li { margin: 0; }
.game-overlay__scores b { display: block; font-size: var(--fs-xl); color: var(--c-text); line-height: 1.1; }
.game-overlay__scores span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-mute); }
.game-overlay__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.game-overlay__hint {
  font-family: var(--font-pixel);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}
.game-overlay__newbest {
  font-family: var(--font-pixel);
  font-size: var(--fs-sm);
  color: var(--c-amber);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}
.game-overlay__newbest[hidden] { display: none; }

/* Loading spinner */
.game-loader {
  width: 34px; height: 34px;
  border: 3px solid var(--c-line);
  border-top-color: var(--c-cyan);
  border-radius: 50%;
  animation: ra-spin .8s linear infinite;
}
@keyframes ra-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   4. Touch controls — rendered only on touch-capable devices
   -------------------------------------------------------------------------- */
.touch-controls {
  display: none;
  margin-top: var(--sp-3);
  gap: var(--sp-3);
  align-items: flex-end;
  justify-content: space-between;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.touch-controls.is-active { display: flex; }

.tc-btn {
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 58px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tc-btn.is-down { background: var(--c-cyan); color: var(--c-primary-ink); border-color: var(--c-cyan); }
.tc-btn svg { width: 24px; height: 24px; fill: currentColor; }
.tc-btn--wide { min-width: 96px; }
.tc-btn--round { border-radius: 50%; min-width: 66px; min-height: 66px; }

.tc-cluster { display: grid; gap: var(--sp-2); }
.tc-cluster--dpad {
  grid-template-columns: repeat(3, 58px);
  grid-template-areas: ".  up ." "left . right" ". down .";
}
.tc-cluster--dpad .tc-up { grid-area: up; }
.tc-cluster--dpad .tc-down { grid-area: down; }
.tc-cluster--dpad .tc-left { grid-area: left; }
.tc-cluster--dpad .tc-right { grid-area: right; }
.tc-cluster--lr { grid-template-columns: repeat(2, 66px); }
.tc-cluster--actions { grid-auto-flow: column; }

/* Virtual joystick */
.tc-stick {
  position: relative;
  width: 118px; height: 118px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-surface-2), var(--c-surface));
  touch-action: none;
}
.tc-stick__knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: var(--glow-cyan);
  pointer-events: none;
  will-change: transform;
}

/* Full-frame tap target for one-button games */
.tc-hint {
  width: 100%;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* --------------------------------------------------------------------------
   5. Below-canvas support content
   -------------------------------------------------------------------------- */
.game-support { padding-block: var(--sp-6); }
.game-support__cols {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
}
@media (max-width: 980px) { .game-support__cols { grid-template-columns: 1fr; } }

.controls-table td:first-child { width: 42%; white-space: nowrap; }
.controls-table kbd + kbd { margin-left: 4px; }

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  margin: 0;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-list__key { color: var(--c-text-mute); }
.spec-list__val { color: var(--c-text); text-align: right; font-weight: 600; }

.score-card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  padding: var(--sp-5);
  text-align: center;
}
.score-card h3 { font-family: var(--font-pixel); font-size: var(--fs-sm); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: var(--sp-3); }
.score-card__value {
  font-family: var(--font-pixel);
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: 700;
  color: var(--c-amber);
  line-height: 1;
  text-shadow: 0 0 24px rgba(255, 200, 87, .3);
  font-variant-numeric: tabular-nums;
}
.score-card__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-mute); }
.score-card__extra { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line-soft); }

.share-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Related games strip */
.related-strip { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Compact overlay for small frames, so the actions always stay on screen.
   On a phone the frame can be only ~200px tall, which is not enough for the
   full result screen — so the terminal overlays drop the prose sentence and the
   keyboard hint, keeping the title, the numbers and the buttons. The ready
   overlay keeps its text, because there it *is* the instructions. */
@media (max-width: 620px) {
  .game-overlay { gap: var(--sp-2); padding: var(--sp-3); }
  .game-overlay__title { font-size: 1.15rem; }
  .game-overlay__text { font-size: var(--fs-xs); max-width: 34ch; }
  .game-overlay__scores { gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
  .game-overlay__scores b { font-size: var(--fs-base); }
  .game-overlay__scores span { font-size: 0.6rem; letter-spacing: .06em; }
  .game-overlay__newbest { font-size: var(--fs-xs); }
  .game-overlay__actions .btn { padding: var(--sp-2) var(--sp-4); min-height: 40px; }
  .game-overlay__hint { font-size: 0.66rem; }

  .game-overlay--over .game-overlay__text,
  .game-overlay--win .game-overlay__text,
  .game-overlay--over .game-overlay__hint,
  .game-overlay--win .game-overlay__hint,
  .game-overlay--paused .game-overlay__hint { display: none; }
}

/* --------------------------------------------------------------------------
   6. Reduced motion / effects off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .game-frame::after { display: none; }
  .game-loader { animation: none; border-top-color: var(--c-line); }
  .game-overlay__title { text-shadow: none; }
}