/* =========================================================================
 * SCOTLAND '98 — styles
 *
 * Design rule: 90% retro 1998 arcade, 10% Scotland WC '26.
 *
 * WC '26 palette (used as accents only — NOT as the dominant look):
 *   --wc-deep-blue   #000045   (used for menu fills, kept dark/atmospheric)
 *   --wc-lucent-blue #000094
 *   --wc-yellow      #deff73   (electric yellow — high-energy accent)
 *   --wc-salmon      #ff705e   (vibrant salmon — danger / red flashes)
 *   --wc-purple      #874fff   (lively purple — sparingly)
 *   --wc-grey        #e3edeb   (platinum grey)
 *
 * The 1998 arcade base is black/charcoal with chunky white type and
 * neon highlights pulled from the WC26 palette. The brand Roa font is
 * loaded but used ONLY for the title — everything else stays monospace
 * for that lost-1998-arcade-game feeling.
 * ========================================================================= */

/* ---- Brand fonts (loaded once, used everywhere) ---- */
@font-face {
  font-family: "Roa";
  src: url("Assets/Fonts/Roa-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roc Grotesk";
  src: url("Assets/Fonts/roc-grotesk-wide-medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("Assets/Fonts/Inter_Tight/InterTight-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("Assets/Fonts/Inter_Tight/InterTight-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  --wc-deep-blue:   #000045;
  --wc-lucent-blue: #000094;
  --wc-yellow:      #deff73;
  --wc-salmon:      #ff705e;
  --wc-purple:      #874fff;
  --wc-grey:        #e3edeb;

  /* 1998 arcade palette */
  --arc-bg:    #0a0a0e;
  --arc-ink:   #ffffff;
  --arc-shade: #1a1a22;
  --arc-line:  #2c2c38;

  /* Fonts (brand toolkit) */
  --font-title:   "Roa", "Times New Roman", serif;          /* display titles */
  --font-display: "Roc Grotesk", "Arial Black", sans-serif; /* HUD + numbers */
  --font-body:    "Inter Tight", "Inter", "Helvetica", sans-serif; /* UI body */
  --font-arcade:  "Roc Grotesk", "Courier New", monospace;  /* legacy alias */
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: #000;
  color: var(--arc-ink);
  font-family: var(--font-arcade);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Lock the page inside a webview / mobile browser:
   *  - overscroll-behavior: none stops pull-to-refresh + rubber-band
   *    bounce when a touch hit-tests the page background between
   *    the touch controls.
   *  - touch-action: manipulation kills the 300ms tap delay on iOS
   *    and disables double-tap-to-zoom site-wide.
   *  - overflow: hidden (already set) prevents accidental scroll. */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  touch-action: manipulation;
}

/* ---------- Cabinet shell (CRT bezel) ---------- */
#cabinet {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, #15090f 0%, #000 80%);
}

/* ---------- Mobile-only full-screen attract background ----------
 * On desktop the canvas is letterboxed inside a 16:9 cabinet; on a tall
 * portrait phone that means black bars top + bottom during attract. This
 * pair of layers fills the FULL viewport with the attract artwork so the
 * opening story feels poster-like on mobile. Hidden entirely on desktop. */
#mobile-attract-stack {
  display: none;     /* desktop default — re-enabled in the mobile @media block */
  position: absolute;
  inset: 0;
  z-index: 0;        /* behind the canvas + HUD */
  pointer-events: none;
  overflow: hidden;
}
.mobile-attract-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%, cover;     /* gradient stretches full screen, photo cover-fits */
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mobile-attract-bg.visible { opacity: 1; }
/* Each bg layer carries its OWN dark-wash gradient stacked on top of the
 * photo. Gradients are now flatter (closer to uniform) so the darkening
 * reads as a consistent full-screen treatment rather than a heavier
 * vignette at the edges — the old shape made it look like the wash was
 * still trapped in the 16:9 canvas region.
 * Photo assets are dedicated portrait-cropped variants so the framing
 * works at phone aspect (the desktop landscape versions clipped awkwardly
 * when cover-fitted onto 9:16). */
.mobile-attract-burley {
  background-image:
    linear-gradient(180deg, rgba(0,0,15,0.62) 0%, rgba(0,0,15,0.58) 50%, rgba(0,0,15,0.68) 100%),
    url("Assets/fight%20background/opening/mobile%20ChatGPT%20Image%20Jun%2022%2C%202026%2C%2007_22_45%20PM.png");
}
.mobile-attract-lion-returns {
  background-image:
    linear-gradient(180deg, rgba(0,0,15,0.45) 0%, rgba(0,0,15,0.40) 50%, rgba(0,0,15,0.52) 100%),
    url("Assets/fight%20background/the%20lion%20returns/new%20ChatGPT%20Image%20Jun%2022%2C%202026%2C%2008_12_35%20PM.png");
}

/* ---------- Stage backdrop (DOM image layer) ----------
 * Painted background lives here, just behind the canvas. The browser does
 * the upscale with normal smoothing — keeps the painting looking painterly
 * while the canvas above keeps image-rendering:pixelated for sprites.
 */
#stage-bg {
  position: absolute;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  background-color: #1a1030;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 1;
  /* Hidden by default — only shown during fight-related scenes (see below).
     A short fade keeps overlay transitions clean. */
  opacity: 0;
  transition: opacity 0.4s ease;
  /* The cabinet bezel lives here now (was on #stage) */
  box-shadow:
    0 0 0 4px #000,
    0 0 0 8px #1a1a1a,
    0 0 0 10px #333,
    0 0 40px rgba(135, 79, 255, 0.18),
    0 0 80px rgba(255, 112, 94, 0.10);
}
/* Only reveal the painted stadium during fight-related scenes (including
 * the VS-screen intermission — we want the upcoming round's stadium
 * visible behind the SCOTLAND VS X title and portraits, building anticipation
 * until the user hits PRESS SPACE TO FIGHT). */
body[data-scene="countdown"] #stage-bg,
body[data-scene="play"]      #stage-bg,
body[data-scene="pause"]     #stage-bg,
body[data-scene="end"]       #stage-bg,
body[data-scene="vs"]        #stage-bg {
  opacity: 1;
}

/* ---------- Canvas (640x360 internal, transparent for sprites + FX) ---------- */
#stage {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: transparent;
  position: relative;
  z-index: 2;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: block;
}

/* FX overlay canvas — sits ABOVE the overlay backdrops so we can render
 * confetti on the YOU WIN screen. Pointer-events disabled so buttons stay
 * clickable. Hidden by default; game.js shows it during win + champions. */
#fx-overlay {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  position: absolute;
  z-index: 32;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  pointer-events: none;
  display: block;
}

/* CRT scanlines + barrel vignette */
#scanlines {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.22) 0px,
      rgba(0,0,0,0.22) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: multiply;
}
#scanlines.off { display: none; }

#vignette {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
}

/* ---------- HUD (Neo-Geo-ish, on a dark blurred panel) ----------
 * The painted Hampden background is busy, so the HUD sits on a
 * semi-transparent dark panel with a backdrop blur — anchored to the very
 * top of the canvas with a yellow accent stripe underneath.
 */
#hud {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, calc(100vh * 16 / 9));
  padding: 14px 18px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
  z-index: 7;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
#hud.hidden { display: none; }

.hud-side {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.hud-side.right { justify-content: flex-end; }

/* ----- Portraits — bigger, slanted parallelogram with animated stroke ----- */
.portrait-frame {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  background: var(--wc-salmon);
  border: 4px solid #000;
  box-shadow:
    4px 4px 0 #000,
    inset 0 0 0 2px #fff;
  overflow: hidden;
  /* Slant + retro stroke pulse — colour cycles around the frame edge. */
  animation: hudFrameStroke 1.8s linear infinite;
}
.portrait-frame.left  { animation-name: hudFrameStrokeL; }
.portrait-frame.right { animation-name: hudFrameStrokeR; }
@keyframes hudFrameStrokeL {
  0%   { transform: skewX(-10deg); box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-yellow);  }
  33%  { transform: skewX(-10deg); box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-salmon); }
  66%  { transform: skewX(-10deg); box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-purple); }
  100% { transform: skewX(-10deg); box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-yellow);  }
}
@keyframes hudFrameStrokeR {
  0%   { transform: skewX(10deg);  box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-yellow);  }
  33%  { transform: skewX(10deg);  box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-purple); }
  66%  { transform: skewX(10deg);  box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-salmon); }
  100% { transform: skewX(10deg);  box-shadow: 4px 4px 0 #000, inset 0 0 0 2px var(--wc-yellow);  }
}
.portrait-frame.right { transform: skewX(10deg); }

/* Inner canvas un-skewed so the pixel art stays straight; up-scaled
   to fill the bigger frame while keeping crisp pixels. */
.portrait {
  width: 88px;
  height: 88px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(10deg);
  image-rendering: pixelated;
}
/* Mirror the in-fight HUD opponent portrait so it faces the player. */
.portrait-frame.right .portrait { transform: translate(-50%, -50%) skewX(-10deg) scaleX(-1); }

.hud-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hud-stack.right { text-align: right; align-items: flex-end; }

/* ----- "1P" / "2P" label ABOVE the bar ----- */
.player-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--arc-ink);
  line-height: 1;
  text-shadow:
    2px 2px 0 var(--wc-salmon),
    4px 4px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000;
}

/* ----- Character name BELOW the bar in salmon italic ----- */
.hud-stack .name {
  font-family: var(--font-body);
  font-weight: 800;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--wc-salmon);
  line-height: 1;
  margin-top: 4px;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
    0 0 10px rgba(255, 112, 94, 0.55);
}

/* ----- Health bar — even chunkier channel ----- */
.bar {
  position: relative;
  width: 100%;
  height: 40px;
  /* Recessed dark-red channel — the depth comes from inset shadows */
  background: linear-gradient(180deg, #2a0606 0%, #4a0e0e 100%);
  border: 4px solid #000;
  box-shadow:
    inset 0 3px 0 rgba(0,0,0,0.6),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    inset 0 0 0 1px #ff7060,
    4px 4px 0 #000;
  overflow: hidden;
}
.bar::before {
  /* Faint section ticks every 10% — drawn ABOVE the green */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(10% - 1px),
      rgba(0,0,0,0.35) calc(10% - 1px),
      rgba(0,0,0,0.35) 10%
    );
  pointer-events: none;
  z-index: 3;
}
.bar::after {
  /* Highlight band that sits over the green for that 3D pill look */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 2;
}
.fill {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1;
  /* Bright KOF-style green pill with darker bottom edge */
  background: linear-gradient(
    180deg,
    #c8ff5a 0%,
    #7be81e 30%,
    #3eba14 70%,
    #1f7a0c 100%
  );
  transition: width 100ms linear, background 100ms linear;
  transform-origin: left center;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.35);
}
.fill.right { transform-origin: right center; }
.fill.low {
  background: linear-gradient(180deg, #ffb3a8 0%, var(--wc-salmon) 35%, #d93b27 100%);
}

/* ----- Big chunky timer (yellow w/ red shadow, KOF style) ----- */
#timer {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 500;
  color: var(--wc-yellow);
  line-height: 1;
  letter-spacing: -2px;
  flex: 0 0 auto;
  text-align: center;
  min-width: 110px;
  /* hard red drop-shadow + chunky black outline */
  text-shadow:
    4px 4px 0 var(--wc-salmon),
    7px 7px 0 #000,
    -3px -3px 0 #000,
     3px -3px 0 #000,
    -3px  3px 0 #000,
    0 0 18px rgba(222, 255, 115, 0.5);
}
#timer.low {
  color: var(--wc-salmon);
  text-shadow:
    3px 3px 0 #000,
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
    0 0 16px rgba(255, 112, 94, 0.7);
  animation: timerPulse 0.5s steps(2) infinite;
}
@keyframes timerPulse { 50% { opacity: 0.5; } }

/* ---------- Toolbar (bottom-left, on its own dark panel) ---------- */
#toolbar {
  position: absolute;
  bottom: 2vh;
  left: 2vh;
  z-index: 8;
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 30, 0.30);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  border: 3px solid var(--wc-yellow);
  box-shadow: 4px 4px 0 #000;
}
#toolbar.hidden { display: none; }
.icon-btn {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 12px;
  padding: 8px 12px;
  min-width: 56px;
  border: 2px solid var(--wc-yellow);
  background: rgba(0, 0, 0, 0.65);
  color: var(--wc-yellow);
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}
.icon-btn:hover { background: var(--wc-yellow); color: #000; }

/* ---------- Fullscreen toggle (top-right; always visible) -------------- */
.fs-toggle {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 10px);
  right: max(env(safe-area-inset-right, 0px), 10px);
  z-index: 9999;
}
.fs-toggle.hidden { display: none; }
/* Hide on touch devices — iOS browsers refuse the Fullscreen API entirely,
 * and the mobile-app webview controls its own bars. Button is desktop-only. */
@media (hover: none), (pointer: coarse) {
  .fs-toggle { display: none; }
}

/* ---------- Rotate-device prompt (portrait + fullscreen only) ---------- */
.rotate-prompt {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  color: var(--wc-yellow);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: var(--font-arcade);
  text-shadow: 2px 2px 0 #000;
}
.rotate-prompt .rotate-icon {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 24px;
  color: var(--wc-yellow);
  animation: rotateSpin 2.4s ease-in-out infinite;
}
@keyframes rotateSpin {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}
.rotate-prompt .rotate-title {
  font-size: clamp(18px, 5vw, 28px);
  letter-spacing: 4px;
  margin: 0 0 12px;
}
.rotate-prompt .rotate-sub {
  font-size: clamp(10px, 3vw, 14px);
  letter-spacing: 2px;
  color: #fff;
  margin: 0;
  opacity: 0.85;
}
/* Only surface the prompt when the page is in fullscreen AND the device is
 * portrait. Outside fullscreen the existing mobile CSS already handles both
 * orientations gracefully, so we don't pester users in regular browser tabs. */
body.in-fullscreen.is-portrait .rotate-prompt { display: flex; }

/* ---------- Corner brand mark (very subtle) ---------- */
#brand-corner {
  position: absolute;
  bottom: 2vh;
  right: 3vh;
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--wc-salmon);
  opacity: 0.6;
  z-index: 7;
  pointer-events: none;
  text-shadow: 1px 1px 0 #000;
}

/* ---------- Persistent SFA crest brand (top-left) ----------
 * Sits above the cabinet on every screen. White variant reads on dark
 * stages and overlays; a black drop-shadow keeps it legible on light
 * backgrounds too. Sized small so it doesn't fight the HUD portrait.
 */
#sfa-brand {
  position: absolute;
  top: 36px;
  left: 36px;
  width: 84px;
  height: auto;
  /* Above .overlay (z-index: 30) so it stays visible on menu + champions
   * screens (those overlays have fully opaque painted backdrops; the
   * other overlays use translucent washes so the crest peeked through
   * regardless). */
  z-index: 35;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 #000);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.25s ease;
}
#sfa-brand.hidden { display: none; }

/* Attract-screen MADE BY STADION (HTML element so it doesn't render
 * pixelated against the canvas scanlines like the in-canvas variant did). */
#attract-credit.hidden { display: none; }

/* ---------- Banner (3 / 2 / 1 / FIGHT! — chunky KOF style) ----------
 * White fill with a stack of blue chromatic offsets falling to the lower-left,
 * black hard-edge outline, and faint white motion trails to the upper-right.
 * Slight italic skew sells the "punch" of the word.
 */
#banner {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-arcade);
  font-size: clamp(110px, 20vw, 220px);
  font-weight: 900;
  font-style: italic;
  color: #fff;
  letter-spacing: 4px;
  line-height: 0.95;
  /* `pre-line` lets us stack banner text by passing '\n' in JS
   * (used by FINAL\nFIGHT), while keeping everything centred. */
  text-align: center;
  white-space: pre-line;
  /* The chunky blue cascade — order matters (drawn back-to-front) */
  text-shadow:
    /* black outline */
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
    /* stepped blue drop-shadow stack (lower-left) */
    -3px  3px 0 var(--wc-lucent-blue),
    -5px  5px 0 var(--wc-lucent-blue),
    -7px  7px 0 var(--wc-lucent-blue),
    -9px  9px 0 var(--wc-deep-blue),
    -11px 11px 0 var(--wc-deep-blue),
    -13px 13px 0 #000,
    /* upper-right motion trails */
     3px -1px 0 rgba(255,255,255,0.45),
     5px -2px 0 rgba(255,255,255,0.25),
     8px -3px 0 rgba(255,255,255,0.12);
  /* base transform; the pop animation overrides this transiently */
  transform: translate(-50%, -50%) skewX(-8deg);
  z-index: 10;
  pointer-events: none;
  animation: bannerPop 0.45s ease-out;
}
#banner.hidden { display: none; }
@keyframes bannerPop {
  0%   { transform: translate(-50%, -50%) skewX(-8deg) scale(0.3); opacity: 0; }
  60%  { transform: translate(-50%, -50%) skewX(-8deg) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -50%) skewX(-8deg) scale(1);    opacity: 1; }
}

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.96)),
    radial-gradient(ellipse at center, rgba(0,0,69,0.4), transparent 70%);
  text-align: center;
  padding: 24px;
  /* CRT scanlines bleed into overlays too */
  background-blend-mode: normal;
}
.overlay.hidden { display: none; }

/* ----- Enter / exit animations for overlay transitions -----
 * Every overlay gets a soft fade-in when shown. Add `.slam` on the title
 * inside for a quick scale-in punch (used on YOU WIN / CHAMPIONS).
 * `.exiting` plays the reverse so we can sequence overlay → overlay.
 */
.overlay:not(.hidden):not(.exiting) {
  animation: overlayIn 0.45s ease-out both;
}
.overlay.exiting {
  animation: overlayOut 0.30s ease-in both;
  pointer-events: none;
}
@keyframes overlayIn {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes overlayOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.98); }
}

/* Hero title slam — 90s-fighter style: rockets in from the side at huge
 * scale, then bounces through multiple impact stages before settling.
 * Applied to .title in any overlay (.title.small for YOU WIN / YOU LOSE,
 * full-size .title for CHAMPIONS). */
.overlay:not(.hidden):not(.exiting) .title.slam,
.overlay:not(.hidden):not(.exiting) .title {
  animation: titleSlam90s 1.05s cubic-bezier(.18,1.5,.6,1) both;
  animation-delay: 0.10s;
}
@keyframes titleSlam90s {
  0%   { transform: translateX(-40vw) scale(2.6) skewX(-12deg); opacity: 0;
         letter-spacing: 40px; filter: blur(8px); }
  28%  { transform: translateX(0)     scale(2.2) skewX(-4deg);  opacity: 1;
         letter-spacing: 8px;  filter: blur(0); }
  42%  { transform: translateX(0)     scale(0.78) skewX(0); }
  56%  { transform: translateX(0)     scale(1.22) skewX(0); }
  72%  { transform: translateX(0)     scale(0.95) skewX(0); }
  86%  { transform: translateX(0)     scale(1.06) skewX(0); }
  100% { transform: translateX(0)     scale(1)    skewX(0); }
}

/* Round label above the title gets a small punch-in too */
.overlay:not(.hidden):not(.exiting) .round-label {
  animation: roundLabelIn 0.55s ease-out both;
  animation-delay: 0.7s;
}
@keyframes roundLabelIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* End-screen action buttons enter after the title settles */
.overlay:not(.hidden):not(.exiting) #end-actions .menu-btn {
  animation: btnSlideIn 0.5s ease-out both;
  animation-delay: 1.15s;
}
@keyframes btnSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* VS-screen portraits whip in from the sides, then the retro pulse kicks in */
.overlay:not(.hidden):not(.exiting) .vs-side.left  .vs-portrait-frame {
  animation:
    slideInL 0.55s cubic-bezier(.2,1.1,.4,1) 0.10s both,
    vsFrameGlowL 1.7s ease-in-out 0.65s infinite;
}
.overlay:not(.hidden):not(.exiting) .vs-side.right .vs-portrait-frame {
  animation:
    slideInR 0.55s cubic-bezier(.2,1.1,.4,1) 0.10s both,
    vsFrameGlowR 1.7s ease-in-out 0.65s infinite;
}
@keyframes slideInL {
  from { transform: skewX(-4deg) translateX(-60vw); opacity: 0; }
  to   { transform: skewX(-4deg) translateX(0); opacity: 1; }
}
@keyframes slideInR {
  from { transform: skewX( 4deg) translateX( 60vw); opacity: 0; }
  to   { transform: skewX( 4deg) translateX(0); opacity: 1; }
}
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.25) 0px,
    rgba(0,0,0,0.25) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  mix-blend-mode: multiply;
}

.title {
  font-family: var(--font-title);
  font-size: clamp(56px, 12vw, 140px);
  line-height: 0.9;
  letter-spacing: 4px;
  color: var(--wc-yellow);
  text-shadow:
    /* chromatic CRT bleed */
    -3px 0 0 var(--wc-salmon),
     3px 0 0 var(--wc-purple),
     0 4px 0 #000,
     6px 8px 0 #000,
     0 0 24px rgba(222, 255, 115, 0.35);
  animation: titlePulse 1.6s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.title.small { font-size: clamp(96px, 18vw, 200px); }
.title .apos { color: var(--wc-salmon); }
@keyframes titlePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.subtitle {
  font-family: var(--font-arcade);
  font-size: clamp(12px, 1.8vw, 18px);
  letter-spacing: 8px;
  color: var(--arc-ink);
  text-shadow: 2px 2px 0 #000;
  position: relative;
  z-index: 1;
}

.panel-title {
  font-family: var(--font-arcade);
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 8px;
  color: var(--wc-yellow);
  text-shadow: 3px 3px 0 #000;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.copyright {
  font-family: var(--font-arcade);
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--wc-yellow);
  margin-top: 14px;
  animation: blink 1.2s steps(2) infinite;
  position: relative;
  z-index: 1;
  text-shadow:
    -1px 0 0 var(--wc-salmon),
     1px 0 0 var(--wc-purple),
     2px 2px 0 #000;
}
.made-by {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--wc-grey);
  opacity: 0.7;
  z-index: 1;
  text-shadow: 1px 1px 0 #000;
}
.made-by::before { content: "▪ "; color: var(--wc-salmon); }
.made-by::after  { content: " ▪"; color: var(--wc-salmon); }

/* ---------- Asset preloader (home screen) ----------
 * Tiny bar that runs while sprites + stage backgrounds finish caching
 * after the page loads. Auto-hides once everything's in the cache so
 * the player doesn't catch a half-loaded scene when they hit START. */
#asset-preloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
#asset-preloader.hidden { display: none; }
.preloader-label {
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--wc-yellow);
  text-shadow: 1px 1px 0 #000;
}
#preloader-pct { color: var(--wc-salmon); margin-left: 4px; }
.preloader-bar {
  width: clamp(140px, 32vw, 200px);
  height: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000, inset 0 0 0 1px var(--wc-yellow);
  overflow: hidden;
}
#preloader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--wc-yellow) 0%, var(--wc-salmon) 100%);
  transition: width 0.18s ease;
}
@keyframes blink { 50% { opacity: 0.2; } }

/* ---------- Menu buttons (chunky '98 arcade) ----------
 * Bigger, beefier border, hard offset shadow, with the same chromatic
 * CRT bleed (salmon left / purple right) + soft yellow glow as the title.
 */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, 86vw);
  position: relative;
  z-index: 1;
}
.menu-btn {
  font-family: var(--font-arcade);
  font-weight: bold;
  font-size: clamp(14px, 2.4vw, 20px);
  letter-spacing: 6px;
  color: var(--arc-ink);
  background: rgba(0,0,0,0.55);
  border: 4px solid var(--arc-ink);
  padding: 18px 22px;
  cursor: pointer;
  box-shadow:
    6px 6px 0 #000,
    0 0 0 2px #000 inset;
  transition: transform 60ms, background 60ms, color 60ms,
              border-color 60ms, box-shadow 60ms, text-shadow 60ms;
  position: relative;
  /* Chromatic CRT bleed + soft glow — same family as the title */
  text-shadow:
    -2px 0 0 var(--wc-salmon),
     2px 0 0 var(--wc-purple),
     0 2px 0 #000,
     0 0 12px rgba(222, 255, 115, 0.35);
}
.menu-btn:hover {
  background: var(--wc-yellow);
  color: #000;
  border-color: #000;
  /* On hover the chromatic bleed becomes muddy against the bright fill —
   * swap it for a single hard black drop so the text reads cleanly. */
  text-shadow: 2px 2px 0 #000;
  box-shadow: 6px 6px 0 var(--wc-salmon), 0 0 0 2px #000 inset;
}
.menu-btn.selected {
  background: var(--wc-yellow);
  color: #000;
  border-color: #000;
  box-shadow:
    8px 8px 0 var(--wc-salmon),
    0 0 0 2px #000 inset,
    0 0 24px rgba(222, 255, 115, 0.55);
  transform: translate(-2px, -2px);
  /* When selected the text goes solid black — drop the bleed */
  text-shadow: 2px 2px 0 #000;
}
.menu-btn.selected::before {
  content: "▶";
  position: absolute;
  left: -36px;
  color: var(--wc-yellow);
  font-size: 1.2em;
  text-shadow: 2px 2px 0 #000;
  animation: blink 0.5s steps(2) infinite;
}
.menu-btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #000; }
.menu-btn.back {
  border-color: var(--wc-grey);
  color: var(--wc-grey);
  font-size: clamp(12px, 2vw, 16px);
  padding: 14px 18px;
  letter-spacing: 5px;
}

/* ---------- Share button (secondary, outline-only) ----------
 * Sits below the main menu list with a deliberate gap so it reads as
 * a separate, lighter action. Salmon outline + chromatic text, fills
 * on hover for the press-confirm.
 */
.menu-share-row {
  margin-top: clamp(16px, 3vh, 28px);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
/* Default state = the bold salmon block (used to be hover) */
.share-btn {
  font-family: var(--font-arcade);
  font-weight: bold;
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: 4px;
  color: #000;
  background: var(--wc-salmon);
  border: 2px solid #000;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--wc-yellow);
  text-shadow: 1px 1px 0 #000;
  transition: background 90ms, color 90ms, transform 90ms,
              box-shadow 90ms, border-color 90ms;
}
/* Hover reverses the palette — yellow body, salmon drop */
.share-btn:hover {
  background: var(--wc-yellow);
  color: #000;
  border-color: #000;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 5px 5px 0 var(--wc-salmon);
  transform: translate(-1px, -1px);
}
.share-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}
.share-btn.copied {
  background: #000;
  color: var(--wc-yellow);
  border-color: var(--wc-yellow);
  box-shadow: 5px 5px 0 var(--wc-salmon);
  text-shadow: 1px 1px 0 var(--wc-salmon);
}

/* ---------- How To Play ---------- */
.howto-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 24px;
  width: min(440px, 90vw);
  text-align: left;
  font-family: var(--font-arcade);
  font-size: clamp(12px, 1.8vw, 16px);
  letter-spacing: 3px;
  position: relative;
  z-index: 1;
}
.howto-row { display: contents; }
/* Two parallel grids — desktop (keyboard shortcuts) and mobile (touch
 * pad labels). Each is hidden on the wrong viewport so the player sees
 * exactly the inputs they actually have available. */
.howto-mobile  { display: none; }   /* shown on mobile via @media below */
/* On mobile the touch-pad kbd pills mirror the colours of the buttons
 * the player sees on the fight screen — D-pad keys slate-grey, PUNCH
 * salmon-red, SUPER purple, SND/PAUSE ghost yellow. Makes the cheat
 * sheet read like a legend for the actual controls. */
.kbd.kbd-dpad {
  color: var(--wc-yellow);
  background: linear-gradient(180deg, #3a3a4a 0%, #1d1d28 100%);
  border-color: #000;
}
.kbd.kbd-punch {
  color: #fff;
  background: var(--wc-salmon);
  border-color: #000;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.kbd.kbd-super {
  color: #fff;
  background: var(--wc-purple);
  border-color: #000;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.kbd.kbd-tool {
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.4);
  text-shadow: none;
}
.howto-row .kbd {
  font-weight: bold;
  color: var(--wc-yellow);
  background: rgba(0,0,0,0.55);
  border: 3px solid var(--wc-yellow);
  padding: 8px 14px;
  text-align: center;
  min-width: 96px;
  box-shadow:
    4px 4px 0 #000,
    0 0 0 1px #000 inset;
  text-shadow:
    -1px 0 0 var(--wc-salmon),
     1px 0 0 var(--wc-purple),
     0 0 8px rgba(222, 255, 115, 0.45);
}
.howto-tip {
  margin-top: 16px;
  font-family: var(--font-arcade);
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 3px;
  color: var(--wc-salmon);
  position: relative;
  z-index: 1;
}

/* ---------- Settings ---------- */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, 80vw);
  position: relative;
  z-index: 1;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.55);
  border: 3px solid var(--wc-yellow);
  padding: 16px 20px;
  letter-spacing: 5px;
  font-family: var(--font-arcade);
  font-weight: bold;
  font-size: clamp(13px, 2vw, 17px);
  box-shadow:
    6px 6px 0 #000,
    0 0 0 1px #000 inset;
  /* Same chromatic bleed as the buttons */
  text-shadow:
    -2px 0 0 var(--wc-salmon),
     2px 0 0 var(--wc-purple),
     0 0 12px rgba(222, 255, 115, 0.3);
}
.toggle {
  font-family: var(--font-arcade);
  font-weight: bold;
  letter-spacing: 3px;
  background: var(--wc-yellow);
  color: #000;
  border: 3px solid #000;
  padding: 8px 18px;
  cursor: pointer;
  font-size: clamp(11px, 1.6vw, 13px);
  box-shadow: 3px 3px 0 #000;
  text-shadow: none;
  transition: background 60ms, color 60ms, transform 60ms;
}
.toggle:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.toggle.off { background: #333; color: var(--wc-grey); }

/* ===========================================================================
 * VS-SCREEN (round intermission) + CHAMPIONS overlay
 * Big chunky portrait-vs-portrait moment between rounds.
 * Background uses the WC '26 saltire X-pattern as a moving subtle texture.
 * =========================================================================== */
/* VS-screen sits *on top of* the upcoming round's painted stadium so the
 * user can see the fight venue behind the matchup intro. Only a dark wash
 * + the WC '26 saltire X-pattern, no opaque colour fill. */
.vs-bg {
  background:
    linear-gradient(180deg, rgba(0,0,30,0.55), rgba(0,0,40,0.70)),
    repeating-linear-gradient( 45deg, transparent 0 38px, rgba(222,255,115,0.05) 38px 40px),
    repeating-linear-gradient(-45deg, transparent 0 38px, rgba(255,112,94,0.05) 38px 40px);
  animation: vsScroll 14s linear infinite;
}
@keyframes vsScroll {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 80px 80px, -80px 80px, 0 0; }
}

.round-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: 12px;
  color: var(--wc-yellow);
  position: relative;
  z-index: 1;
  /* Match the landing-screen subtitle bleed for continuity */
  text-shadow:
    -1px 0 0 var(--wc-salmon),
     1px 0 0 var(--wc-purple),
     2px 2px 0 #000,
     0 0 14px rgba(222, 255, 115, 0.55);
}

/* The big title: SCOTLAND   VS   HAITI */
.vs-title {
  font-family: var(--font-title);
  font-size: clamp(52px, 9vw, 104px);
  line-height: 1;
  letter-spacing: 4px;
  color: var(--wc-yellow);
  margin: 4px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 36px);
  position: relative;
  z-index: 1;
  text-shadow:
    -3px 0 0 var(--wc-salmon),
     3px 0 0 var(--wc-lucent-blue),
     0 4px 0 #000,
     6px 8px 0 #000;
}
.vs-title .vs-word {
  color: #fff;
  font-family: var(--font-arcade);
  font-style: italic;
  font-weight: 900;
  font-size: 0.75em;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 3px 0 var(--wc-lucent-blue),
    -5px 5px 0 var(--wc-deep-blue),
    -7px 7px 0 #000;
  animation: vsThrob 0.6s ease-in-out infinite alternate;
}
@keyframes vsThrob {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.vs-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
  margin: clamp(8px, 2vh, 20px) 0;
  position: relative;
  z-index: 1;
}

.vs-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vs-portrait-frame {
  position: relative;
  width: clamp(140px, 22vw, 200px);
  height: clamp(140px, 22vw, 200px);
  background: var(--wc-deep-blue);
  border: 5px solid var(--wc-yellow);
  box-shadow:
    8px 8px 0 #000,
    inset 0 0 0 3px #000,
    0 0 24px rgba(222,255,115,0.25);
  overflow: hidden;
}

/* Retro pulse — outer glow throbs between yellow and salmon, scale
 * breathes subtly. Keyframes preserve the slant skew. */
@keyframes vsFrameGlowL {
  0%, 100% {
    transform: skewX(-4deg) scale(1);
    box-shadow:
      8px 8px 0 #000,
      inset 0 0 0 3px #000,
      0 0 18px rgba(222,255,115,0.30);
    border-color: var(--wc-yellow);
  }
  50% {
    transform: skewX(-4deg) scale(1.02);
    box-shadow:
      8px 8px 0 #000,
      inset 0 0 0 3px #000,
      0 0 44px rgba(222,255,115,0.70),
      0 0 18px rgba(255,112,94,0.50);
    border-color: #fff;
  }
}
@keyframes vsFrameGlowR {
  0%, 100% {
    transform: skewX(4deg) scale(1);
    box-shadow:
      8px 8px 0 #000,
      inset 0 0 0 3px #000,
      0 0 18px rgba(255,112,94,0.30);
    border-color: var(--wc-yellow);
  }
  50% {
    transform: skewX(4deg) scale(1.02);
    box-shadow:
      8px 8px 0 #000,
      inset 0 0 0 3px #000,
      0 0 44px rgba(255,112,94,0.70),
      0 0 18px rgba(222,255,115,0.50);
    border-color: #fff;
  }
}
.vs-side.left  .vs-portrait-frame { transform: skewX(-4deg); }
.vs-side.right .vs-portrait-frame { transform: skewX( 4deg); }
.vs-portrait-frame canvas,
.vs-portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Force chunky pixel rendering on every browser. */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  object-fit: cover;
  backface-visibility: hidden;       /* avoids GPU-smoothed fallbacks */
}
.vs-side.left  .vs-portrait-frame canvas,
.vs-side.left  .vs-portrait-frame img  { transform: skewX(4deg)  scale(1.12); }
/* Opponent portrait — mirror via two separate transforms so the browser
 * keeps the pixelated rendering through the flip (a single combined
 * scale(-1.12, 1.12) was triggering smoothing on some engines). */
.vs-side.right .vs-portrait-frame canvas,
.vs-side.right .vs-portrait-frame img  {
  transform: skewX(-4deg) scale(1.12) scaleX(-1);
}

/* When the <img> profile loads, hide the canvas placeholder underneath. */
.vs-profile-img { display: none; z-index: 2; }
.vs-profile-img.loaded { display: block; }
.vs-profile-img.loaded + canvas { display: none; }

.vs-flag-frame {
  position: relative;
  width: 120px;
  height: 80px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
  background: #111;
}
.vs-flag-frame canvas,
.vs-flag-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
}
.vs-flag-img { display: none; }
.vs-flag-img.loaded { display: block; }
.vs-flag-img.loaded + canvas { display: none; }

.vs-name {
  font-family: var(--font-arcade);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: 4px;
  color: var(--wc-salmon);
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  text-align: center;
}

.vs-divider {
  font-family: var(--font-arcade);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(60px, 9vw, 96px);
  color: #fff;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -4px 4px 0 var(--wc-salmon),
    -8px 8px 0 var(--wc-deep-blue),
    -12px 12px 0 #000;
  transform: skewX(-8deg);
  animation: vsThrob 0.6s ease-in-out infinite alternate;
}

.vs-fight {
  margin-top: 10px;
  background: var(--wc-salmon);
  color: #000;
  border-color: #000;
  animation: vsBtnBlink 0.7s steps(2) infinite;
}
@keyframes vsBtnBlink {
  0%, 100% { box-shadow: 6px 6px 0 #000; border-color: #000; }
  50%      { box-shadow: 6px 6px 0 var(--wc-yellow); border-color: var(--wc-yellow); }
}

/* ----- Main menu backdrop (pixel-tartan thistles + slow ken-burns zoom) -----
 * The image background-size pulses 110% → 124% → 110% over 22s for a
 * gentle "breathing" effect. background-size on multi-layer backgrounds
 * needs explicit per-layer sizes so the gradient stays pinned.
 */
.menu-bg {
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,30,0.30) 0%, rgba(0,0,30,0.55) 80%),
    url("Assets/fight%20background/scotland98/ChatGPT%20Image%20Jun%2018%2C%202026%2C%2003_42_00%20PM.png?v=1");
  background-repeat:   no-repeat, no-repeat;
  background-position: center,    center;
  background-size:     100% 100%, 110% auto;
  animation: menuBgZoom 22s ease-in-out infinite;
}
@keyframes menuBgZoom {
  0%, 100% { background-size: 100% 100%, 110% auto; }
  50%      { background-size: 100% 100%, 124% auto; }
}

/* ----- Face the Nations backdrop (lightning stadium) ----- */
.nations-bg {
  background:
    linear-gradient(180deg, rgba(0,0,30,0.55), rgba(0,0,30,0.78)),
    url("Assets/fight%20background/nations%20fight/ChatGPT%20Image%20Jun%2019%2C%202026%2C%2012_45_53%20PM.png")
      center / cover no-repeat;
}

/* ----- Win / Lose / Champions celebration backdrops ----- */
/* Bump the ?v= number on the URLs below whenever the artwork is replaced
   so the browser fetches the fresh file instead of the cached one. */
.win-bg {
  background:
    linear-gradient(180deg, rgba(0,0,30,0.55), rgba(0,0,30,0.78)),
    url("Assets/fight%20background/you%20win/you%20win.png?v=2") center / cover no-repeat;
}
.lose-bg {
  background:
    linear-gradient(180deg, rgba(40,0,10,0.62), rgba(20,0,5,0.82)),
    url("Assets/fight%20background/you%20lose/youlose.png?v=2") center / cover no-repeat;
}
.champions-bg {
  background:
    linear-gradient(180deg, rgba(0,0,30,0.45), rgba(0,0,30,0.65)),
    url("Assets/fight%20background/champions/champions.png?v=2") center / cover no-repeat;
}
.win-bg::before,
.lose-bg::before,
.champions-bg::before {
  /* Soften the CRT-scanline overlay slightly so the photo reads */
  opacity: 0.6;
}

/* ----- Campaign intro screen (THE GAUNTLET) -----
 * Type styled to match the SCOTLAND '98 landing — chromatic CRT bleed,
 * soft yellow glow, the title pulse animation. Same family of effects so
 * the intro feels like a continuation of the title screen.
 */
.intro-title {
  font-family: var(--font-title);
  font-size: clamp(56px, 11vw, 130px);
  line-height: 0.95;
  letter-spacing: 6px;
  color: var(--wc-yellow);
  text-shadow:
    -3px 0 0 var(--wc-salmon),
     3px 0 0 var(--wc-purple),
     0 4px 0 #000,
     6px 8px 0 #000,
     0 0 24px rgba(222, 255, 115, 0.35);
  animation: titlePulse 1.6s ease-in-out infinite;
  position: relative;
  z-index: 1;
  margin: 6px 0 4px;
}
.intro-copy {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 1.9vw, 18px);
  letter-spacing: 5px;
  line-height: 1.5;
  color: var(--arc-ink);
  position: relative;
  z-index: 1;
  text-align: center;
  /* Match the landing-screen .subtitle bleed */
  text-shadow:
    -1px 0 0 var(--wc-salmon),
     1px 0 0 var(--wc-lucent-blue),
     2px 2px 0 #000,
     0 0 8px rgba(255, 255, 255, 0.18);
}

.intro-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 32px);
  margin: clamp(10px, 2vh, 20px) 0;
  position: relative;
  z-index: 1;
}
/* Opponents (three cards) sit together on the right of the VS divider */
.intro-opponents {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 28px);
}
/* Big chunky "VS" between the player and the three opponents */
.intro-vs {
  font-family: var(--font-arcade);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  color: #fff;
  letter-spacing: 2px;
  transform: skewX(-8deg);
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -3px 3px 0 var(--wc-salmon),
    -6px 6px 0 var(--wc-lucent-blue),
    -9px 9px 0 #000;
  animation: vsThrob 0.6s ease-in-out infinite alternate;
}
/* SELECTED label tag above the player's card */
.intro-card.intro-player { position: relative; }
.intro-selected-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-arcade);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 4px;
  color: #000;
  background: var(--wc-yellow);
  padding: 3px 10px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--wc-salmon);
  white-space: nowrap;
  z-index: 2;
  animation: blink 1.4s steps(2) infinite;
}
/* Player card gets a punchier glow than the opponents */
.intro-card.intro-player .intro-portrait-frame {
  border-color: var(--wc-yellow);
  box-shadow:
    10px 10px 0 #000,
    inset 0 0 0 3px #000,
    0 0 40px rgba(222, 255, 115, 0.7),
    0 0 18px rgba(255, 112, 94, 0.4);
}
.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: clamp(160px, 22vw, 220px);
}
.intro-portrait-frame {
  position: relative;
  width: clamp(150px, 20vw, 210px);
  height: clamp(150px, 20vw, 210px);
  background: var(--wc-deep-blue);
  border: 5px solid var(--wc-yellow);
  box-shadow:
    8px 8px 0 #000,
    inset 0 0 0 2px #000,
    0 0 22px rgba(222,255,115,0.25);
  overflow: hidden;
  animation: introFrameStroke 2s linear infinite;
}
/* Stagger each card so the strokes pulse at different points in the cycle —
 * gives a marquee-light feel rather than three identical glows. */
.intro-card:nth-child(1) .intro-portrait-frame { animation-delay: 0s; }
.intro-card:nth-child(2) .intro-portrait-frame { animation-delay: -0.66s; }
.intro-card:nth-child(3) .intro-portrait-frame { animation-delay: -1.33s; }
@keyframes introFrameStroke {
  0% {
    border-color: var(--wc-yellow);
    box-shadow: 8px 8px 0 #000, inset 0 0 0 2px #000,
                0 0 22px rgba(222,255,115,0.25);
  }
  33% {
    border-color: var(--wc-salmon);
    box-shadow: 8px 8px 0 #000, inset 0 0 0 2px #000,
                0 0 30px rgba(255,112,94,0.55);
  }
  66% {
    border-color: var(--wc-purple);
    box-shadow: 8px 8px 0 #000, inset 0 0 0 2px #000,
                0 0 30px rgba(135,79,255,0.5);
  }
  100% {
    border-color: var(--wc-yellow);
    box-shadow: 8px 8px 0 #000, inset 0 0 0 2px #000,
                0 0 22px rgba(222,255,115,0.25);
  }
}
.intro-portrait-frame canvas,
.intro-portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
}
/* The three opponents (right of the VS divider) face LEFT toward the
 * Scotland lion, so we mirror them horizontally. */
.intro-opponents .intro-portrait-frame canvas,
.intro-opponents .intro-portrait-frame img {
  transform: scaleX(-1);
}
/* Profile image hidden by default — shown when loadImageInto succeeds.
   Canvas underneath is hidden once the photo is in to avoid double-rendering. */
.intro-profile-img { display: none; z-index: 2; }
.intro-profile-img.loaded { display: block; }
.intro-profile-img.loaded + canvas { display: none; }
.intro-flag-frame {
  position: relative;
  width: clamp(48px, 7vw, 72px);
  height: clamp(32px, 4.6vw, 48px);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  overflow: hidden;
  background: #111;
}
.intro-flag-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* Real national-team crest (overlays the procedural flag canvas when
 * the crest image successfully loads — hides the canvas underneath). */
.intro-crest-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  display: none;
  z-index: 2;
}
.intro-crest-img.loaded { display: block; }
.intro-crest-img.loaded + canvas { display: none; }
.intro-country {
  font-family: var(--font-title);
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1;
  letter-spacing: 5px;
  color: var(--wc-yellow);
  text-shadow:
    -2px 0 0 var(--wc-salmon),
     2px 0 0 var(--wc-purple),
     0 3px 0 #000,
     4px 5px 0 #000,
     0 0 16px rgba(222, 255, 115, 0.35);
}
.intro-animal {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: 3px;
  color: var(--wc-salmon);
  text-align: center;
  text-shadow:
    -1px 0 0 #fff,
     1px 0 0 var(--wc-lucent-blue),
     2px 2px 0 #000,
     0 0 8px rgba(255, 112, 94, 0.4);
}

/* ----- Champions screen ----- */
.champ-line {
  font-family: var(--font-arcade);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(16px, 2.4vw, 22px);
  letter-spacing: 4px;
  color: var(--wc-yellow);
  text-shadow: 3px 3px 0 #000, 0 0 12px rgba(222,255,115,0.5);
  position: relative;
  z-index: 1;
}
.champ-sub {
  font-family: var(--font-arcade);
  font-weight: bold;
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 5px;
  color: var(--wc-salmon);
  text-shadow: 2px 2px 0 #000;
  position: relative;
  z-index: 1;
}

/* Rally cry — big italic shout with chromatic bleed + a steady pulse.
 * Inherits the title-family chunky retro feel. */
.come-on-scotland {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: 3px;
  color: var(--wc-yellow);
  margin: 6px 0 0;
  position: relative;
  z-index: 1;
  text-shadow:
    -3px 0 0 var(--wc-salmon),
     3px 0 0 var(--wc-purple),
     0 4px 0 #000,
     6px 8px 0 #000,
     0 0 22px rgba(222, 255, 115, 0.55);
  animation: comeOnScotlandPulse 0.9s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes comeOnScotlandPulse {
  from { transform: scale(1)    skewX(-6deg); }
  to   { transform: scale(1.07) skewX(-6deg); }
}

/* Champions main title overrides — italicised + the same chromatic bleed
 * the rally cry had, so the new "COME ON SCOTLAND!" hero text inherits
 * the slam-in entry from .title but reads with that rally-cry vibe. */
.champ-title-italic {
  font-style: italic;
  letter-spacing: 4px;
  transform-origin: center;
}
/* Hidden helper for the reopen-data-capture button on Champions. */
.share-btn.dc-reopen.hidden { display: none; }

/* Follow-up CTA — quieter, points the player at the real-world tournament */
.watch-scotland {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: 4px;
  line-height: 1.5;
  color: var(--arc-ink);
  text-align: center;
  margin: 4px 0 6px;
  position: relative;
  z-index: 1;
  text-shadow:
    -1px 0 0 var(--wc-salmon),
     1px 0 0 var(--wc-lucent-blue),
     2px 2px 0 #000;
}

/* ---------- Touch controls ---------- */
#touch-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  z-index: 20;
  pointer-events: none;
}
#touch-controls.hidden { display: none; }
.touch-left, .touch-right {
  display: flex;
  gap: 12px;
  pointer-events: auto;
}
.tbtn {
  width: 64px;
  height: 64px;
  border: 3px solid var(--wc-yellow);
  background: rgba(0, 0, 0, 0.55);
  color: var(--wc-yellow);
  font-family: var(--font-arcade);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  touch-action: manipulation;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}
.tbtn:active { background: var(--wc-yellow); color: #000; }
.tbtn.punch { border-color: var(--wc-salmon); color: var(--wc-salmon); width: 84px; height: 84px; }
.tbtn.punch:active { background: var(--wc-salmon); color: #000; }
.tbtn.super { border-color: var(--wc-purple); color: var(--wc-purple); width: 72px; height: 72px;
              box-shadow: 3px 3px 0 #000, 0 0 14px rgba(135,79,255,0.4); }
.tbtn.super:active { background: var(--wc-purple); color: #fff; box-shadow: 1px 1px 0 #000; }

@media (hover: hover) and (pointer: fine) {
  #touch-controls { display: none !important; }
}

/* ===========================================================================
 * MOBILE — designed for PORTRAIT play. Gates: width ≤ 900px AND touch.
 *
 *   ┌──────────────────────────────┐
 *   │  [🦁 1P ▬▬▬   30   ▬▬▬ 2P 🐆 ]  ← compact HUD pinned to top
 *   │                              │
 *   │   ┌────────────────────┐     │
 *   │   │   GAME CANVAS      │     │  ← 16:9, full width, centred
 *   │   └────────────────────┘     │
 *   │                              │
 *   │  ◀ ▶ ▼      JUMP PUNCH SUPER │  ← controls pinned to bottom
 *   └──────────────────────────────┘
 *
 * Desktop is untouched (only kicks in via @media gates below).
 * =========================================================================== */
@media (max-width: 900px) {
  html, body { height: 100dvh; }
  #cabinet   { height: 100dvh; min-height: 100dvh; }

  /* Blurred full-screen extension of the current stage backdrop.
   * Lives BEHIND the canvas + 16:9 stage-bg so the painted scene flows
   * to the screen edges on portrait phones, instead of just sitting in
   * the middle letterbox with black bars above + below. JS sets the
   * --stage-bg-image custom property in applyStageBg(). Empty until
   * a fight begins — defaults to an empty `none` value. Dark wash
   * stacked on top of the photo keeps the canvas readable. */
  #cabinet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,0,15,0.55), rgba(0,0,15,0.40) 50%, rgba(0,0,15,0.60)),
      var(--stage-bg-image, none) center / cover no-repeat;
    filter: blur(22px) brightness(0.75);
    /* Slight scale + clip so the blur halo doesn't show transparent edges. */
    transform: scale(1.06);
    transform-origin: center;
  }
  /* During attract / menu / overlays where there's no fight context, the
   * stage-bg variable might still hold the last value — that's fine, the
   * blurred halo just hangs behind the overlay's own bg which paints
   * over it anyway. */

  /* Scanlines + vignette extend to the FULL phone screen instead of the
   * canvas's 16:9 strip. Without this they only covered the middle band,
   * which created a visible horizontal seam where the CRT treatment
   * ended and the raw photo started — looked like the bg image wasn't
   * truly full-screen. */
  #scanlines, #vignette {
    width: 100vw;
    height: 100dvh;
  }
  /* fx-overlay (particles for confetti/fireworks) stays 16:9 on mobile —
   * stretching it to portrait was warping the particles vertically
   * (canvas internal 640x360 → CSS 100vw×100dvh = ~6:13). The trade-off:
   * confetti spawns inside the canvas's middle letterbox rather than
   * the full phone, but the particles draw circular instead of squashed
   * ovals. The victory lion gets its own properly-sized canvas
   * (#mobile-victory-lion) instead so we don't lose that flourish. */
  #fx-overlay {
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }

  /* ---- Mobile victory lion ----
   * Top-of-screen celebration sprite. JS re-parents this canvas into the
   * visible YOU WIN / CHAMPIONS overlay before showing it, so it
   * inherits the overlay's z-index:30 stacking context. z-index: 0 here
   * keeps the lion BEHIND the overlay's .title (z-index 1), .round-label,
   * action buttons, etc. — they sit on top, the lion floats behind. */
  #mobile-victory-lion {
    position: absolute;
    top: calc(max(env(safe-area-inset-top, 0px), 0px) + 84px);
    left: 50%;
    transform: translateX(-50%);
    width: 156px;
    height: 218px;
    z-index: 0;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.65));
    /* Soft entrance — slides up from below */
    animation: mobileLionEnter 0.6s cubic-bezier(.2,.9,.3,1.1) both;
  }
  #mobile-victory-lion.hidden { display: none; }
  @keyframes mobileLionEnter {
    from { opacity: 0; transform: translate(-50%, 20px) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, 0)    scale(1);   }
  }

  /* Canvas + stage backdrop — full viewport width, 16:9 letterboxed.
   * Centered vertically by the cabinet flex.
   * (scanlines / vignette / fx-overlay are kept full-screen by the rule
   * above so the CRT treatment doesn't leave a visible seam at the
   * canvas edges.) */
  #stage-bg, #stage {
    width:  100vw;
    height: calc(100vw * 9 / 16);
  }

  /* ---- HUD (compact bar at top) ---- */
  #hud {
    padding: max(env(safe-area-inset-top, 0px), 8px) 8px 6px;
    gap: 6px;
  }
  .hud-side { gap: 6px; }
  .portrait-frame   { width: 56px; height: 56px; border-width: 3px;
                      box-shadow: 3px 3px 0 #000, inset 0 0 0 2px #fff; }
  .portrait         { width: 50px; height: 50px; }
  .hud-stack        { gap: 1px; }
  .player-label     { font-size: 16px; letter-spacing: 2px; }
  .hud-stack .name  { font-size: 13px; letter-spacing: 2px; margin-top: 2px; }
  .bar              { height: 18px; border-width: 2px;
                      box-shadow: 2px 2px 0 #000,
                                  inset 0 2px 0 rgba(0,0,0,0.5),
                                  inset 0 0 0 1px #ff7060; }
  #timer            { font-size: 42px; min-width: 56px;
                      text-shadow: 2px 2px 0 var(--wc-salmon),
                                   4px 4px 0 #000,
                                   -2px -2px 0 #000, 2px -2px 0 #000,
                                   -2px 2px 0 #000,
                                   0 0 10px rgba(222,255,115,0.45); }

  /* ---- Toolbar (SND / PAUSE) — top-centre, ghosted.
   * Sat top-right with a bright yellow chunky border; that was loud and
   * pulled the eye away from the fight. Centred horizontally just under
   * the HUD timer, frame stripped to a faint outline, whole block at
   * 50% opacity so it reads as a quiet utility chip rather than a UI
   * element competing with the action. Tap brightens it for clear
   * feedback. ---- */
  #toolbar {
    top: calc(max(env(safe-area-inset-top, 0px), 0px) + 96px);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    padding: 0;
    gap: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
  }
  #toolbar:has(.icon-btn:active) { opacity: 1; }
  .icon-btn {
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: 2px;
    min-width: auto;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: none;
    border-radius: 4px;
  }
  .icon-btn:active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
  }

  /* ---- Brand corner mark ---- */
  #brand-corner {
    bottom: max(env(safe-area-inset-bottom, 0px), 4px);
    right: 8px;
    font-size: 8px;
    letter-spacing: 1px;
  }

  /* ---- Full-screen attract bg layer (see top of file for base styles).
   *      Reveals on mobile so the Burley plate + Scotland poster fill the
   *      entire phone screen during the attract sequence — the canvas
   *      bg drawing is suppressed in this mode so there's no seam. ---- */
  #mobile-attract-stack { display: block; }

  /* ---- Menu bg (tartan thistles) — was sized as `auto` so on tall
   *      portrait screens it left empty space top + bottom. Force cover
   *      so the thistle pattern fills the whole screen on mobile and
   *      drop the Ken-Burns zoom (it depended on the old auto sizing). */
  .menu-bg {
    background-size: 100% 100%, cover;
    animation: none;
  }

  /* ---- Scotland NT crest (top-left). Pushed down by the iOS safe-area
   *      inset so the badge clears the notch / Dynamic Island when the
   *      game is embedded full-bleed in a native webview. ---- */
  #sfa-brand {
    top: max(env(safe-area-inset-top, 0px), 8px);
    left: max(env(safe-area-inset-left, 0px), 8px);
    width: 62px;
  }

  /* ---- Touch controls — chunky retro-console D-pad on the left,
   *      SNES-style round face buttons on the right. Same layout grid as
   *      before, but skinned to feel like a real handheld pad. ---- */
  #touch-controls {
    bottom: max(env(safe-area-inset-bottom, 0px), 8px);
    padding: 6px max(env(safe-area-inset-left, 0px), 10px)
             6px max(env(safe-area-inset-right, 0px), 10px);
    align-items: flex-end;     /* anchor left/right groups to the bottom */
  }

  /* ----- D-pad cross ----- */
  /* Cross-shaped chunky pad. Hollow corners — the 3×3 grid puts the four
   * .dpad-* buttons on the edges; the four diagonal cells stay empty. */
  .touch-left {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows:    repeat(3, 52px);
    gap: 0;
    background: linear-gradient(140deg, #15151f 0%, #06060c 100%);
    border-radius: 22px;
    padding: 6px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -2px 4px rgba(0,0,0,0.5),
      0 5px 0 #000,
      0 6px 16px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .dpad-up    { grid-column: 2; grid-row: 1; border-radius: 12px 12px 4px 4px; }
  .dpad-left  { grid-column: 1; grid-row: 2; border-radius: 12px 4px 4px 12px; }
  .dpad-right { grid-column: 3; grid-row: 2; border-radius: 4px 12px 12px 4px; }
  .dpad-down  { grid-column: 2; grid-row: 3; border-radius: 4px 4px 12px 12px; }
  /* D-pad arrows — slate-grey keys with a glossy top highlight + a deep
   * inner shadow when pressed. Yellow arrow glyph for visibility. */
  .touch-left .tbtn {
    width: 100%;
    height: 100%;
    border: none;
    background: linear-gradient(180deg, #3a3a4a 0%, #1d1d28 100%);
    color: var(--wc-yellow);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 1px 0 #000;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -2px 3px rgba(0,0,0,0.55),
      0 2px 0 #000;
    transition: transform 0.05s linear, box-shadow 0.05s linear;
  }
  .touch-left .tbtn:active {
    background: linear-gradient(180deg, #1a1a24 0%, #0d0d14 100%);
    transform: translateY(2px);
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.7),
      0 0 0 #000;
  }

  /* ----- Face buttons (SNES-style diagonal pair) -----
   * Switched from a vertical stack to an absolute-positioned diagonal:
   * primary PUNCH bottom-left (under the resting thumb), SUPER tucked
   * top-right with a clear gap between them so the user can't catch
   * SUPER by accident when mashing PUNCH (which is what was triggering
   * the rogue auto-super complaint). Both bumped up in size so the
   * labels read clearly. */
  .touch-right {
    position: relative;
    width: 188px;
    height: 188px;
    gap: 0;
    padding: 0;
    flex: 0 0 auto;
  }
  /* Reset the base square style so the round face buttons take over. */
  .touch-right .tbtn {
    position: absolute;
    border-radius: 50%;
    border: 4px solid #000;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    box-shadow:
      inset 0 -4px 8px rgba(0,0,0,0.45),
      inset 0 3px 0 rgba(255,255,255,0.22),
      0 5px 0 #000,
      0 6px 14px rgba(0,0,0,0.5);
    transition: transform 0.05s linear, box-shadow 0.05s linear;
  }
  .touch-right .tbtn:active {
    transform: translateY(3px);
    box-shadow:
      inset 0 3px 8px rgba(0,0,0,0.7),
      inset 0 -2px 0 rgba(255,255,255,0.06),
      0 2px 0 #000;
  }
  /* PUNCH = primary face button, lower-left (closer to resting thumb). */
  .tbtn.punch {
    bottom: 0;
    left: 0;
    width: 104px;
    height: 104px;
    font-size: 15px;
    background: radial-gradient(circle at 35% 28%, #ffa494 0%, var(--wc-salmon) 55%, #b53d2a 100%);
    color: #fff;
  }
  /* SUPER = secondary face button, upper-right. Slightly smaller. */
  .tbtn.super {
    top: 0;
    right: 0;
    width: 88px;
    height: 88px;
    background: radial-gradient(circle at 35% 28%, #c4a3ff 0%, var(--wc-purple) 55%, #4d2399 100%);
    color: #fff;
  }

  /* ---- Menu overlay — smaller buttons, tighter spacing ---- */
  .menu-list      { width: 72vw; gap: 8px; }
  .menu-btn       { font-size: 13px; padding: 10px 14px; letter-spacing: 3px;
                    border-width: 3px; box-shadow: 4px 4px 0 #000; }
  .menu-btn.selected::before { left: -22px; }
  .menu-btn.back  { font-size: 12px; padding: 8px 12px; }
  .menu-share-row { margin-top: 12px; }
  .share-btn      { font-size: 10px; padding: 6px 12px; letter-spacing: 2px; }

  .title          { font-size: clamp(48px, 14vw, 80px); letter-spacing: 4px; }
  .title.small    { font-size: clamp(56px, 16vw, 96px); }
  .subtitle       { font-size: 11px; letter-spacing: 5px; }
  .panel-title    { font-size: 18px; letter-spacing: 5px; }
  .copyright      { font-size: 10px; letter-spacing: 4px; margin-top: 8px; }
  .made-by        { font-size: 9px; letter-spacing: 3px; }

  /* ---- VS-screen — stack SCOTLAND / VS / HAITI vertically so it fits ---- */
  .vs-title {
    flex-direction: column;
    gap: 2px;
    font-size: clamp(32px, 9vw, 56px);
    letter-spacing: 3px;
    margin: 4px 0;
  }
  .vs-title .vs-word { font-size: 0.7em; }
  .round-label       { font-size: 11px; letter-spacing: 5px; }
  .vs-stage          { gap: 12px; margin: 6px 0; justify-content: center; width: 100%; }
  /* Lock each side's column to a fixed share of the screen on mobile and
   * let the name text wrap inside it. Without this, a long opponent name
   * like "THE HISPANIOLAN TROGON" stretched the right column and tipped
   * the whole stage off-centre, pushing the right portrait past the
   * screen edge. */
  .vs-side           { width: 42vw; max-width: 170px; flex: 0 0 auto; min-width: 0; }
  .vs-portrait-frame { width: 32vw; height: 32vw; max-width: 130px; max-height: 130px;
                       border-width: 4px;
                       box-shadow: 5px 5px 0 #000, inset 0 0 0 2px #000; }
  .vs-flag-frame     { width: 60px; height: 40px; border-width: 2px; }
  .vs-name           { font-size: 11px; letter-spacing: 2px;
                       width: 100%; text-align: center;
                       white-space: normal; word-break: break-word; line-height: 1.2; }
  .vs-divider        { font-size: 40px; }
  /* LET'S GO / PRESS SPACE TO START — primary CTA on intro + VS screens.
   * Bumped up on mobile so it reads as the dominant action on the page. */
  .vs-fight {
    font-size: 16px;
    padding: 14px 32px;
    letter-spacing: 4px;
    border-width: 4px;
    box-shadow: 5px 5px 0 #000;
    margin-top: 8px;
  }

  /* ---- FACE THE NATIONS — stack player / VS / opponents vertically ----
   * Each card gets a real gap between portrait frame + country/animal
   * text so the animated coloured frame stroke doesn't bleed into the
   * country wordmark below. Bigger opponent cards (was 26vw / 100px max)
   * so they fill the row, and a roomier player card so SCOTLAND breathes
   * away from the LION RAMPANT subtitle. */
  .intro-title { font-size: clamp(30px, 9vw, 52px); letter-spacing: 3px; margin-bottom: 4px; }
  .intro-copy  { font-size: 11px; letter-spacing: 3px; line-height: 1.5; margin-bottom: 6px; }
  .intro-grid  { flex-direction: column; gap: 14px; margin: 6px 0; }
  .intro-vs    { font-size: clamp(28px, 8vw, 44px); margin: 4px 0; }
  .intro-opponents { gap: 12px; }
  .intro-card  { width: 28vw; max-width: 116px; gap: 14px; }
  .intro-card.intro-player {
    width: 44vw; max-width: 168px; gap: 18px;
  }
  .intro-portrait-frame { width: 28vw; height: 28vw; max-width: 116px; max-height: 116px;
                          border-width: 3px;
                          box-shadow: 4px 4px 0 #000, inset 0 0 0 2px #000; }
  .intro-card.intro-player .intro-portrait-frame {
    width: 44vw; height: 44vw; max-width: 168px; max-height: 168px;
  }
  .intro-flag-frame { width: 40px; height: 26px; border-width: 2px; }
  .intro-country    { font-size: 18px; letter-spacing: 2.5px; line-height: 1.1; }
  .intro-card.intro-player .intro-country { font-size: 22px; }
  .intro-animal     { font-size: 10px; letter-spacing: 1.2px; line-height: 1.25; }
  .intro-selected-label { font-size: 9px; letter-spacing: 3px; padding: 2px 8px; top: -16px; }

  /* ---- HOW TO PLAY / SETTINGS panels ---- */
  .howto-grid       { gap: 10px 14px; font-size: 11px; letter-spacing: 2px; }
  .howto-row .kbd   { min-width: 64px; padding: 6px 10px; border-width: 2px; }
  /* Hide the keyboard cheat sheet on mobile, reveal the touch one. */
  .howto-desktop { display: none; }
  .howto-mobile  { display: grid; }
  .howto-tip        { font-size: 10px; letter-spacing: 2px; }
  .settings-row     { padding: 10px 12px; font-size: 12px; letter-spacing: 3px; }

  /* ---- End-screen + champions ---- */
  .champ-line       { font-size: 14px; letter-spacing: 3px; }
  .champ-sub        { font-size: 10px; letter-spacing: 4px; }

  /* ---- Banner (3/2/1/KICK OFF!/WINNER/FINAL MATCH) ----
   * Sized tighter on mobile so the longest line, "SCOTLAND" inside the
   * WINNER\nSCOTLAND splash, fits the narrowest phones (320px iPhone SE)
   * with comfortable margin instead of clipping past the edges. */
  #banner {
    font-size: clamp(38px, 12vw, 64px);
    letter-spacing: 1px;
    line-height: 1.02;
    /* Trim the chunky stepped shadow stack on mobile so the bounding box
     * doesn't blow past the viewport even when the body text fits. */
    text-shadow:
      -1px -1px 0 #000,  1px -1px 0 #000,
      -1px  1px 0 #000,  1px  1px 0 #000,
      -2px  2px 0 var(--wc-lucent-blue),
      -4px  4px 0 var(--wc-lucent-blue),
      -6px  6px 0 var(--wc-deep-blue),
      -8px  8px 0 #000;
  }

  /* Mobile overlays — more vertical breathing room. Was 12px/10px, which
   * left elements feeling crammed (titles touching subtitles touching
   * button stacks). Bumped to 18px/16px so each row gets a real beat of
   * space. Top + bottom padding additionally clear the safe-area insets
   * + the SFA crest / toolbar zones. */
  .overlay {
    padding: max(env(safe-area-inset-top, 0px), 18px)
             18px
             max(env(safe-area-inset-bottom, 0px), 22px);
    gap: 16px;
  }

  /* Menu list + buttons: more gap so the stack reads as separate buttons,
   * not one fused block, and each tap target has slack from its siblings. */
  .menu-list { gap: 14px; }
  .menu-btn  { padding: 14px 16px; }
  .menu-share-row { margin-top: 22px; }

  /* Title + subtitle headroom — title was sitting right on top of the
   * round label and subtitle. */
  .title         { margin-bottom: 4px; }
  .subtitle      { margin-top: 6px; }
  .panel-title   { margin-bottom: 16px; }
  .round-label   { margin-bottom: 6px; }
  .champ-line    { margin-top: 8px; }
  .champ-sub     { margin-top: 4px; }
  .watch-scotland { margin-top: 14px; }

  /* Overlays scroll if content is taller than viewport (small phones) */
  .overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* No accidental horizontal scrollbars on mobile */
  body { overflow-x: hidden; }
}

/* ---------- Tiny phones (≤ 375px wide) — extra tighten ---------- */
@media (max-width: 375px) and (hover: none) {
  /* Shrink the retro pad + diagonal face buttons so 6 chunky controls
   * still fit comfortably on iPhone SE / mini width. */
  .touch-left  { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); padding: 5px; }
  .touch-left .tbtn  { font-size: 16px; }
  .touch-right { width: 158px; height: 158px; }
  .touch-right .tbtn { font-size: 12px; border-width: 3px; }
  .tbtn.punch  { width: 88px; height: 88px; font-size: 13px; }
  .tbtn.super  { width: 72px; height: 72px; font-size: 11px; }
  /* Compact HUD elements */
  .portrait-frame { width: 48px; height: 48px; }
  .portrait       { width: 44px; height: 44px; }
  .player-label   { font-size: 13px; }
  .hud-stack .name{ font-size: 11px; }
  #timer          { font-size: 34px; min-width: 44px; }
  .bar            { height: 14px; }
  /* Smaller bottom toolbar to clear thumb zones */
  .icon-btn { padding: 4px 6px; font-size: 9px; }
  /* Smaller menu buttons */
  .menu-btn       { font-size: 12px; padding: 8px 12px; letter-spacing: 2px; }
  .menu-list      { width: 84vw; }
  /* Smaller titles still read */
  .title          { font-size: clamp(40px, 13vw, 64px); }
  .title.small    { font-size: clamp(48px, 15vw, 80px); }
}

/* ---------- Mobile LANDSCAPE — phone held sideways ----------
 * In landscape the canvas takes most of the viewport. Pin HUD + controls
 * tight to top / bottom so the playable area in the middle stays large.
 */
@media (max-width: 900px) and (orientation: landscape) {
  /* HUD shrinks vertically — landscape phones are short */
  #hud { padding: 4px 8px 4px; }
  .portrait-frame { width: 48px; height: 48px; }
  .portrait       { width: 44px; height: 44px; }
  #timer          { font-size: 32px; min-width: 42px; }
  .bar            { height: 14px; }
  .player-label   { font-size: 12px; }
  .hud-stack .name{ font-size: 10px; }
  /* D-pad + face buttons hug the corners */
  .touch-left  { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); padding: 5px; }
  .touch-left .tbtn  { font-size: 15px; }
  .touch-right { width: 150px; height: 150px; }
  .touch-right .tbtn { font-size: 11px; border-width: 3px; }
  .tbtn.punch  { width: 82px; height: 82px; font-size: 12px; }
  .tbtn.super  { width: 68px; height: 68px; font-size: 10px; }
  #touch-controls { padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px); }
  /* Landscape: HUD is shorter (~52px), so tuck the toolbar tighter to it.
   * Keep the top-right anchor from the portrait rule rather than dropping
   * to the bottom — bottom is owned by the touch controls. */
  #toolbar { top: calc(max(env(safe-area-inset-top, 0px), 0px) + 64px); }
}

/* ===========================================================================
 * DATA CAPTURE MODAL
 * Shown over the Champions screen after a brief celebration delay.
 * Same arcade family — chunky border + offset shadow on a deep-blue card,
 * salmon/yellow accents. Champions sits behind with a darker wash applied
 * via the .dc-dim class on the cabinet.
 * =========================================================================== */

.dc-modal {
  /* Heavier wash than the default overlay so the Champions screen reads
   * as "dimmed behind" rather than a competing layer. */
  background:
    linear-gradient(180deg, rgba(0,0,15,0.78), rgba(0,0,20,0.88)),
    radial-gradient(ellipse at center, rgba(0,0,69,0.40), transparent 70%);
  /* Above the Champions overlay (z-index: 30) so it sits cleanly on top. */
  z-index: 36;
  padding: 24px;
}

.dc-card {
  position: relative;
  width: min(560px, 92vw);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px 32px 26px;
  background: var(--wc-deep-blue);
  border: 4px solid var(--wc-yellow);
  box-shadow:
    8px 8px 0 #000,
    inset 0 0 0 2px #000,
    0 0 36px rgba(222, 255, 115, 0.30);
  text-align: center;
  animation: dcCardIn 0.35s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes dcCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.dc-eyebrow {
  font-family: var(--font-arcade);
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--wc-salmon);
  margin: 0 0 8px;
  text-shadow: 2px 2px 0 #000;
}
.dc-eyebrow::before { content: "▪ "; }
.dc-eyebrow::after  { content: " ▪"; }

.dc-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1;
  letter-spacing: 3px;
  color: var(--wc-yellow);
  margin: 0 0 10px;
  text-shadow:
    -2px 0 0 var(--wc-salmon),
     2px 0 0 var(--wc-purple),
     0 3px 0 #000,
     4px 5px 0 #000;
}

.dc-sub {
  font-family: var(--font-arcade);
  font-size: 11px;
  letter-spacing: 2px;
  line-height: 1.6;
  color: var(--wc-grey);
  margin: 0 0 22px;
  text-shadow: 1px 1px 0 #000;
}

.dc-form { display: flex; flex-direction: column; gap: 16px; }

.dc-row { display: flex; gap: 12px; }
.dc-row .dc-field { flex: 1 1 0; min-width: 0; }

.dc-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }

.dc-label {
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--wc-yellow);
  text-shadow: 1px 1px 0 #000;
}
.dc-optional {
  color: var(--wc-grey);
  font-size: 9px;
  letter-spacing: 2px;
  margin-left: 4px;
}

.dc-input,
.dc-textarea {
  width: 100%;
  font-family: var(--font-arcade);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 12px 14px;
  background: #0a0a18;
  color: #fff;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000, inset 0 0 0 1px var(--wc-deep-blue);
  outline: none;
  resize: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dc-input::placeholder,
.dc-textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 1px;
}
.dc-input:focus,
.dc-textarea:focus {
  border-color: var(--wc-yellow);
  box-shadow: 4px 4px 0 #000, inset 0 0 0 1px var(--wc-yellow);
}
.dc-input.error {
  border-color: var(--wc-salmon);
  box-shadow: 4px 4px 0 #000, inset 0 0 0 1px var(--wc-salmon);
}

.dc-error {
  display: none;
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--wc-salmon);
  margin: 2px 0 0;
  text-shadow: 1px 1px 0 #000;
}
.dc-error.show { display: block; }

/* ----- Checkbox ----- */
.dc-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.dc-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.dc-checkbox-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: #0a0a18;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000, inset 0 0 0 1px var(--wc-deep-blue);
  position: relative;
  margin-top: 1px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dc-checkbox:hover .dc-checkbox-mark { border-color: var(--wc-yellow); }
.dc-checkbox input:checked + .dc-checkbox-mark {
  background: var(--wc-yellow);
  border-color: var(--wc-yellow);
  box-shadow: 3px 3px 0 #000, inset 0 0 0 1px #000;
}
.dc-checkbox input:checked + .dc-checkbox-mark::after {
  content: "";
  position: absolute;
  left: 4px; top: 0px;
  width: 6px; height: 12px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.dc-checkbox-label {
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 1.5;
  color: var(--wc-grey);
  text-shadow: 1px 1px 0 #000;
}

/* ----- Action buttons (re-using .menu-btn base, tightened spacing) ----- */
.dc-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  justify-content: center;
}
.dc-actions .menu-btn {
  flex: 1 1 0;
  font-size: clamp(14px, 1.8vw, 18px);
  padding: 12px 18px;
  letter-spacing: 3px;
}

/* ----- Thanks state ----- */
.dc-thanks { padding: 24px 8px 8px; }
.dc-thanks.hidden { display: none; }
.dc-thanks-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 3px;
  color: var(--wc-yellow);
  margin: 0 0 12px;
  text-shadow:
    -2px 0 0 var(--wc-salmon),
     2px 0 0 var(--wc-purple),
     0 3px 0 #000,
     4px 5px 0 #000;
  animation: dcThanksSlam 0.6s cubic-bezier(.18, 1.5, .6, 1) both;
}
@keyframes dcThanksSlam {
  from { opacity: 0; transform: scale(1.6) skewX(-8deg); }
  to   { opacity: 1; transform: scale(1)   skewX(0);    }
}
.dc-thanks-sub {
  font-family: var(--font-arcade);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--wc-grey);
  text-shadow: 1px 1px 0 #000;
}

/* Champions overlay receives this class while the data-capture modal
 * is open — dims + scales slightly so the modal "feels lifted". */
.dc-behind {
  filter: brightness(0.55) saturate(0.85);
  transform: scale(0.985);
  transition: filter 0.35s ease, transform 0.35s ease;
}

/* ----- Mobile tweaks ----- */
@media (max-width: 900px) {
  .dc-modal { padding: 12px; }
  .dc-card { padding: 18px 18px 16px; box-shadow: 5px 5px 0 #000; }
  .dc-title { font-size: clamp(22px, 6vw, 30px); }
  .dc-sub { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 14px; }
  .dc-form { gap: 12px; }
  .dc-row { flex-direction: column; gap: 12px; }
  .dc-label { font-size: 9px; letter-spacing: 2px; }
  /* iOS Safari auto-zooms when an input gets focus and its computed
   * font-size is under 16px. Keep dc-input + dc-textarea at exactly 16px
   * on mobile to suppress that zoom-bounce. */
  .dc-input, .dc-textarea { font-size: 16px; padding: 9px 10px; }
  .dc-checkbox-label { font-size: 9px; letter-spacing: 1.5px; }
  .dc-actions .menu-btn { padding: 10px 12px; font-size: 13px; letter-spacing: 2px; }
}