/* ===================================================================
   ESA ARCADE - Design tokens, reset, typography and shared primitives.
   Everything visual in the arcade is built from the values in :root.
   ========================================================================== */

:root {
  /* --- Navy ------------------------------------------------------------ */
  --navy-900: #030b16;
  --navy-850: #05101f;
  --navy-800: #071728;
  --navy-700: #0a2039;
  --navy-600: #0e2c4d;
  --navy-500: #143a63;
  --navy-400: #1d4e80;

  /* --- Gold ------------------------------------------------------------ */
  --gold-100: #fdeec4;
  --gold-300: #f8d98b;
  --gold-400: #f3c35a;
  --gold-500: #e5a92f;
  --gold-600: #c0871f;
  --gold-700: #8e6314;

  /* --- Neutrals -------------------------------------------------------- */
  --cream: #fff6e4;
  --paper: #f1e5cb;
  --muted: #8ba2bd;
  --muted-dim: #62778f;
  --ink: #081322;

  /* --- Character / accent ---------------------------------------------- */
  --zima: #2f7fd8;
  --zima-deep: #15497f;
  --shaza: #9560ac;
  --shaza-deep: #5d3570;
  --danger: #e8584f;
  --success: #3fbb7d;

  /* --- Player slots (controls belong to the slot, not the character) --- */
  --p1: #4aa3ff;
  --p2: #ff6a5c;

  /* --- Per-game accents ------------------------------------------------ */
  --accent-bomb: #e8584f;
  --accent-coin: #f3c35a;
  --accent-bonk: #4fb7c9;

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Bahnschrift", "DIN Alternate", "Haettenschweiler",
                  "Arial Narrow", "Avenir Next Condensed", "Segoe UI",
                  system-ui, sans-serif;
  --font-ui: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", Arial, sans-serif;
  /* Score / counter readouts: a tabular, slightly mechanical face. */
  --font-digits: "Bahnschrift", "DIN Alternate", "Consolas", "Menlo", monospace;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 420ms;

  /* --- Spacing scale --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, .48), inset 0 2px 0 rgba(255, 255, 255, .05);
  --shadow-card: 0 18px 38px rgba(0, 0, 0, .42);
  --glow-gold: 0 0 36px rgba(243, 195, 90, .28);

  /* --- Geometry -------------------------------------------------------- */
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --rule-gold: linear-gradient(90deg,
      transparent 0%,
      rgba(243, 195, 90, .15) 12%,
      var(--gold-500) 50%,
      rgba(243, 195, 90, .15) 88%,
      transparent 100%);
}

:root {
  /* --- Arcade lounge (arcade/references): its own gold on navy, literal so no event theme repaints it; swapped below for the light lounge -- */
  --lounge-gold-hi: #fdeec4;
  --lounge-gold: #f3c35a;
  --lounge-gold-mid: #e5a92f;
  --lounge-gold-lo: #b07a18;
  --lounge-navy: #030b16;
  --lounge-cream: #fff6e4;
  --lounge-ink: var(--lounge-cream);
  --lounge-title-hi: var(--lounge-gold-hi);
  --lounge-title-lo: var(--lounge-gold-mid);
  --lounge-line: rgba(243, 195, 90, .6);
  --lounge-panel: rgba(5, 16, 31, .84);
  --lounge-btn: rgba(5, 16, 31, .9);
  --lounge-btn-ink: var(--lounge-gold-hi);
  --lounge-glow: 0 0 1.5rem rgba(243, 195, 90, .35);
  --lounge-shade: rgba(3, 11, 22, .55);
  --lounge-quiet: #8ba2bd;
}
/* A game's page is the lounge too: the arcade's own navy and gold under any event theme's palette. */
body[data-game] {
  --navy-900: #030b16; --navy-850: #05101f; --navy-800: #071728; --navy-700: #0a2039; --navy-600: #0e2c4d; --navy-500: #143a63; --navy-400: #1d4e80;
  --gold-100: #fdeec4; --gold-300: #f8d98b; --gold-400: #f3c35a; --gold-500: #e5a92f; --gold-600: #c0871f; --gold-700: #8e6314;
  --cream: #fff6e4; --paper: #f1e5cb; --muted: #8ba2bd; --muted-dim: #62778f; --ink: #081322;
  --glow-gold: 0 0 36px rgba(243, 195, 90, .28);
}
:root[data-mode=light] {
  --lounge-quiet: #143a63;
  --lounge-ink: #071728; --lounge-title-hi: #143a63; --lounge-title-lo: #030b16;
  --lounge-line: var(--lounge-gold-lo); --lounge-panel: rgba(255, 246, 228, .9); --lounge-shade: rgba(255, 246, 228, .7);
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode]) {
    --lounge-quiet: #143a63;
    --lounge-ink: #071728; --lounge-title-hi: #143a63; --lounge-title-lo: #030b16;
    --lounge-line: var(--lounge-gold-lo); --lounge-panel: rgba(255, 246, 228, .9); --lounge-shade: rgba(255, 246, 228, .7);
  }
}

/* Extended palette: literal colours moved here in Round 2. The redesign will merge these into the scales above. */
:root {
  --x-000000: #000000;
  --x-000000-a16: rgba(0, 0, 0, .16);
  --x-000000-a32: rgba(0, 0, 0, .32);
  --x-000000-a35: rgba(0, 0, 0, .35);
  --x-000000-a40: rgba(0, 0, 0, .4);
  --x-000000-a45: rgba(0, 0, 0, .45);
  --x-000000-a50: rgba(0, 0, 0, .5);
  --x-000000-a55: rgba(0, 0, 0, .55);
  --x-000000-a60: rgba(0, 0, 0, .6);
  --x-000000-a65: rgba(0, 0, 0, .65);
  --x-000000-a70: rgba(0, 0, 0, .7);
  --x-000000-a80: rgba(0, 0, 0, .8);
  --x-000000-a90: rgba(0, 0, 0, .9);
  --x-00ffe1: #00ffe1;
  --x-01050b-a78: rgba(1, 5, 11, .78);
  --x-020810: #020810;
  --x-020810-a50: rgba(2, 8, 16, .5);
  --x-020810-a65: rgba(2, 8, 16, .65);
  --x-020810-a72: rgba(2, 8, 16, .72);
  --x-020810-a85: rgba(2, 8, 16, .85);
  --x-020912-a62: rgba(2, 9, 18, .62);
  --x-020912-a80: rgba(2, 9, 18, .8);
  --x-030b16-a0: rgba(3, 11, 22, 0);
  --x-030b16-a34: rgba(3, 11, 22, .34);
  --x-030b16-a45: rgba(3, 11, 22, .45);
  --x-030b16-a50: rgba(3, 11, 22, .5);
  --x-030b16-a55: rgba(3, 11, 22, .55);
  --x-030b16-a60: rgba(3, 11, 22, .6);
  --x-030b16-a62: rgba(3, 11, 22, .62);
  --x-030b16-a70: rgba(3, 11, 22, .7);
  --x-030b16-a72: rgba(3, 11, 22, .72);
  --x-030b16-a78: rgba(3, 11, 22, .78);
  --x-030b16-a80: rgba(3, 11, 22, .8);
  --x-030b16-a85: rgba(3, 11, 22, .85);
  --x-030b16-a86: rgba(3, 11, 22, .86);
  --x-030b16-a90: rgba(3, 11, 22, .9);
  --x-030b16-a97: rgba(3, 11, 22, .97);
  --x-030b16-a99: rgba(3, 11, 22, .99);
  --x-040c17-a92: rgba(4, 12, 23, .92);
  --x-040d19: #040d19;
  --x-040d19-a80: rgba(4, 13, 25, .8);
  --x-040d19-a90: rgba(4, 13, 25, .9);
  --x-040d19-a94: rgba(4, 13, 25, .94);
  --x-040d19-a97: rgba(4, 13, 25, .97);
  --x-040d19-a98: rgba(4, 13, 25, .98);
  --x-040e1a-a90: rgba(4, 14, 26, .9);
  --x-040e1a-a92: rgba(4, 14, 26, .92);
  --x-040e1a-a97: rgba(4, 14, 26, .97);
  --x-04121f: #04121f;
  --x-04172d: #04172d;
  --x-04222a: #04222a;
  --x-050e1a-a50: rgba(5, 14, 26, .5);
  --x-050e20-a42: rgba(5, 14, 32, .42);
  --x-050e20-a55: rgba(5, 14, 32, .55);
  --x-050e20-a62: rgba(5, 14, 32, .62);
  --x-050e20-a70: rgba(5, 14, 32, .7);
  --x-050e20-a74: rgba(5, 14, 32, .74);
  --x-050e20-a80: rgba(5, 14, 32, .8);
  --x-050f1c: #050f1c;
  --x-050f1d: #050f1d;
  --x-050f1d-a80: rgba(5, 15, 29, .8);
  --x-05101f-a40: rgba(5, 16, 31, .4);
  --x-05101f-a55: rgba(5, 16, 31, .55);
  --x-05101f-a66: rgba(5, 16, 31, .66);
  --x-05101f-a70: rgba(5, 16, 31, .7);
  --x-05101f-a75: rgba(5, 16, 31, .75);
  --x-05101f-a82: rgba(5, 16, 31, .82);
  --x-05101f-a88: rgba(5, 16, 31, .88);
  --x-05101f-a90: rgba(5, 16, 31, .9);
  --x-05101f-a95: rgba(5, 16, 31, .95);
  --x-06121f: #06121f;
  --x-06121f-a90: rgba(6, 18, 31, .9);
  --x-061225: #061225;
  --x-061225-a82: rgba(6, 18, 37, .82);
  --x-061322: #061322;
  --x-061529: #061529;
  --x-06223a: #06223a;
  --x-071728-a60: rgba(7, 23, 40, .6);
  --x-071728-a62: rgba(7, 23, 40, .62);
  --x-071728-a70: rgba(7, 23, 40, .7);
  --x-071728-a72: rgba(7, 23, 40, .72);
  --x-071728-a82: rgba(7, 23, 40, .82);
  --x-071728-a85: rgba(7, 23, 40, .85);
  --x-071728-a95: rgba(7, 23, 40, .95);
  --x-071a30: #071a30;
  --x-071a30-a96: rgba(7, 26, 48, .96);
  --x-071a30-a97: rgba(7, 26, 48, .97);
  --x-081a30-a28: rgba(8, 26, 48, .28);
  --x-081a30-a50: rgba(8, 26, 48, .5);
  --x-09172f: #09172f;
  --x-0a2039-a60: rgba(10, 32, 57, .6);
  --x-0a2039-a80: rgba(10, 32, 57, .8);
  --x-0a2039-a88: rgba(10, 32, 57, .88);
  --x-0a2039-a90: rgba(10, 32, 57, .9);
  --x-0a2039-a98: rgba(10, 32, 57, .98);
  --x-0b1932: #0b1932;
  --x-0b1932-a88: rgba(11, 25, 50, .88);
  --x-0b1932-a92: rgba(11, 25, 50, .92);
  --x-0b1932-a94: rgba(11, 25, 50, .94);
  --x-0b2240: #0b2240;
  --x-0b2340: #0b2340;
  --x-0c243e-a96: rgba(12, 36, 62, .96);
  --x-0d2846: #0d2846;
  --x-0d2f52: #0d2f52;
  --x-0e2c4d-a92: rgba(14, 44, 77, .92);
  --x-0e2c4d-a96: rgba(14, 44, 77, .96);
  --x-0f2c4c: #0f2c4c;
  --x-0f2f52: #0f2f52;
  --x-0f3424: #0f3424;
  --x-10182a: #10182a;
  --x-10213b: #10213b;
  --x-102f52: #102f52;
  --x-102f52-a72: rgba(16, 47, 82, .72);
  --x-103054-a98: rgba(16, 48, 84, .98);
  --x-12040b: #12040b;
  --x-120a02: #120a02;
  --x-123a2a: #123a2a;
  --x-124c58: #124c58;
  --x-142c63: #142c63;
  --x-143a63-a78: rgba(20, 58, 99, .78);
  --x-143a63-a82: rgba(20, 58, 99, .82);
  --x-143a63-a85: rgba(20, 58, 99, .85);
  --x-143a63-a90: rgba(20, 58, 99, .9);
  --x-143a63-a95: rgba(20, 58, 99, .95);
  --x-143a63-a97: rgba(20, 58, 99, .97);
  --x-15406c: #15406c;
  --x-15406c-a90: rgba(21, 64, 108, .9);
  --x-15406c-a96: rgba(21, 64, 108, .96);
  --x-1a0710: #1a0710;
  --x-1a0f00: #1a0f00;
  --x-1a0f00-a70: rgba(26, 15, 0, .7);
  --x-1a1204: #1a1204;
  --x-1a3a2c: #1a3a2c;
  --x-1a4a7c: #1a4a7c;
  --x-1c050e-a90: rgba(28, 5, 14, .9);
  --x-1d4e80-a75: rgba(29, 78, 128, .75);
  --x-1d4e80-a98: rgba(29, 78, 128, .98);
  --x-2a1a02: #2a1a02;
  --x-2a1a03: #2a1a03;
  --x-2c8596: #2c8596;
  --x-2d0604: #2d0604;
  --x-2fa35f: #2fa35f;
  --x-33cdeb: #33cdeb;
  --x-33cdeb-a65: rgba(51, 205, 235, .65);
  --x-3a230d: #3a230d;
  --x-3a2a08: #3a2a08;
  --x-3a2a10: #3a2a10;
  --x-3f73e0: #3f73e0;
  --x-3fbb7d-a16: rgba(63, 187, 125, .16);
  --x-3fbb7d-a28: rgba(63, 187, 125, .28);
  --x-3fbb7d-a55: rgba(63, 187, 125, .55);
  --x-4a1220: #4a1220;
  --x-4a1220-a70: rgba(74, 18, 32, .7);
  --x-4aa3ff-a50: rgba(74, 163, 255, .5);
  --x-4aa3ff-a6: rgba(74, 163, 255, .06);
  --x-4aa3ff-a80: rgba(74, 163, 255, .8);
  --x-4b5d77: #4b5d77;
  --x-553a12: #553a12;
  --x-5ad1ff: #5ad1ff;
  --x-5ad1ff-a20: rgba(90, 209, 255, .2);
  --x-5c400c: #5c400c;
  --x-5c400c-a70: rgba(92, 64, 12, .7);
  --x-5c400c-a80: rgba(92, 64, 12, .8);
  --x-5fd39b: #5fd39b;
  --x-5fd49a: #5fd49a;
  --x-6b1020: #6b1020;
  --x-6d7f99: #6d7f99;
  --x-6e1c16: #6e1c16;
  --x-701280-a42: rgba(112, 18, 128, .42);
  --x-701280-a55: rgba(112, 18, 128, .55);
  --x-781e18-a82: rgba(120, 30, 24, .82);
  --x-7a0c22: #7a0c22;
  --x-7c2019: #7c2019;
  --x-7fe3a0: #7fe3a0;
  --x-8a6f3a: #8a6f3a;
  --x-8a97ab: #8a97ab;
  --x-8ba2bd-a50: rgba(139, 162, 189, .5);
  --x-961030-a55: rgba(150, 16, 48, .55);
  --x-9fb0c8: #9fb0c8;
  --x-9fb2c6: #9fb2c6;
  --x-a5e1ec: #a5e1ec;
  --x-a87518: #a87518;
  --x-a9bdd2: #a9bdd2;
  --x-a9bdd3: #a9bdd3;
  --x-a9d4ff: #a9d4ff;
  --x-b07816-a88: rgba(176, 120, 22, .88);
  --x-b3122f: #b3122f;
  --x-b4c7da: #b4c7da;
  --x-b57d19: #b57d19;
  --x-b8323a: #b8323a;
  --x-b9c7d8: #b9c7d8;
  --x-b9cadc: #b9cadc;
  --x-b9cadd: #b9cadd;
  --x-bd9149: #bd9149;
  --x-c0142f: #c0142f;
  --x-c0871f-a14: rgba(192, 135, 31, .14);
  --x-c0871f-a16: rgba(192, 135, 31, .16);
  --x-c2382f: #c2382f;
  --x-c4d4e5: #c4d4e5;
  --x-c8473d: #c8473d;
  --x-c9403a: #c9403a;
  --x-d6aa58: #d6aa58;
  --x-d6e0ec: #d6e0ec;
  --x-d6e2ef: #d6e2ef;
  --x-e21a3e-a22: rgba(226, 26, 62, .22);
  --x-e21a3e-a45: rgba(226, 26, 62, .45);
  --x-e21a3e-a55: rgba(226, 26, 62, .55);
  --x-e21a3e-a60: rgba(226, 26, 62, .6);
  --x-e21a3e-a80: rgba(226, 26, 62, .8);
  --x-e21a3e-a85: rgba(226, 26, 62, .85);
  --x-e2304f: #e2304f;
  --x-e8584f-a12: rgba(232, 88, 79, .12);
  --x-e8584f-a18: rgba(232, 88, 79, .18);
  --x-e8584f-a25: rgba(232, 88, 79, .25);
  --x-e8584f-a34: rgba(232, 88, 79, .34);
  --x-e8584f-a45: rgba(232, 88, 79, .45);
  --x-e8584f-a55: rgba(232, 88, 79, .55);
  --x-e8584f-a60: rgba(232, 88, 79, .6);
  --x-e8584f-a8: rgba(232, 88, 79, .08);
  --x-e8584f-a80: rgba(232, 88, 79, .8);
  --x-e9ddc6: #e9ddc6;
  --x-e9eefb: #e9eefb;
  --x-f07a22: #f07a22;
  --x-f07a72: #f07a72;
  --x-f3c35a-a10: rgba(243, 195, 90, .1);
  --x-f3c35a-a12: rgba(243, 195, 90, .12);
  --x-f3c35a-a14: rgba(243, 195, 90, .14);
  --x-f3c35a-a15: rgba(243, 195, 90, .15);
  --x-f3c35a-a16: rgba(243, 195, 90, .16);
  --x-f3c35a-a18: rgba(243, 195, 90, .18);
  --x-f3c35a-a20: rgba(243, 195, 90, .2);
  --x-f3c35a-a22: rgba(243, 195, 90, .22);
  --x-f3c35a-a25: rgba(243, 195, 90, .25);
  --x-f3c35a-a26: rgba(243, 195, 90, .26);
  --x-f3c35a-a28: rgba(243, 195, 90, .28);
  --x-f3c35a-a30: rgba(243, 195, 90, .3);
  --x-f3c35a-a32: rgba(243, 195, 90, .32);
  --x-f3c35a-a35: rgba(243, 195, 90, .35);
  --x-f3c35a-a38: rgba(243, 195, 90, .38);
  --x-f3c35a-a40: rgba(243, 195, 90, .4);
  --x-f3c35a-a45: rgba(243, 195, 90, .45);
  --x-f3c35a-a5: rgba(243, 195, 90, .05);
  --x-f3c35a-a50: rgba(243, 195, 90, .5);
  --x-f3c35a-a55: rgba(243, 195, 90, .55);
  --x-f3c35a-a60: rgba(243, 195, 90, .6);
  --x-f3c35a-a7: rgba(243, 195, 90, .07);
  --x-f3c35a-a70: rgba(243, 195, 90, .7);
  --x-f3c35a-a75: rgba(243, 195, 90, .75);
  --x-f3c35a-a8: rgba(243, 195, 90, .08);
  --x-f3c35a-a85: rgba(243, 195, 90, .85);
  --x-f3c35a-a9: rgba(243, 195, 90, .085);
  --x-f3c35a-a90: rgba(243, 195, 90, .9);
  --x-f3c35a-a95: rgba(243, 195, 90, .95);
  --x-f4d89b-a55: rgba(244, 216, 155, .55);
  --x-f4d89b-a65: rgba(244, 216, 155, .65);
  --x-f4d89b-a75: rgba(244, 216, 155, .75);
  --x-fbe3a2: #fbe3a2;
  --x-fde7ae: #fde7ae;
  --x-fdeec4-a28: rgba(253, 238, 196, .28);
  --x-fdeec4-a78: rgba(253, 238, 196, .78);
  --x-fdeec4-a80: rgba(253, 238, 196, .8);
  --x-ff4d5e: #ff4d5e;
  --x-ff5468: #ff5468;
  --x-ff5468-a16: rgba(255, 84, 104, .16);
  --x-ff5468-a35: rgba(255, 84, 104, .35);
  --x-ff5468-a40: rgba(255, 84, 104, .4);
  --x-ff5468-a55: rgba(255, 84, 104, .55);
  --x-ff5468-a80: rgba(255, 84, 104, .8);
  --x-ff5468-a85: rgba(255, 84, 104, .85);
  --x-ff5a6e-a60: rgba(255, 90, 110, .6);
  --x-ff6a5c-a50: rgba(255, 106, 92, .5);
  --x-ff6a5c-a6: rgba(255, 106, 92, .06);
  --x-ff8a7e: #ff8a7e;
  --x-ff8a80: #ff8a80;
  --x-ff8a80-a50: rgba(255, 138, 128, .5);
  --x-ff8a98: #ff8a98;
  --x-ff8c86: #ff8c86;
  --x-ff8c98: #ff8c98;
  --x-ff9c95: #ff9c95;
  --x-ff9f97: #ff9f97;
  --x-ffb3ae: #ffb3ae;
  --x-ffb4a8: #ffb4a8;
  --x-ffb4ad: #ffb4ad;
  --x-ffc0b9: #ffc0b9;
  --x-ffc9c2: #ffc9c2;
  --x-ffd0cb: #ffd0cb;
  --x-ffd0d6: #ffd0d6;
  --x-ffd36b: #ffd36b;
  --x-ffd6dc: #ffd6dc;
  --x-ffd766: #ffd766;
  --x-ffdb83: #ffdb83;
  --x-ffdb83-a45: rgba(255, 219, 131, .45);
  --x-ffe1dd: #ffe1dd;
  --x-ffe29a: #ffe29a;
  --x-ffe4a3: #ffe4a3;
  --x-ffe4a3-a55: rgba(255, 228, 163, .55);
  --x-ffe4a3-a60: rgba(255, 228, 163, .6);
  --x-ffe9a8: #ffe9a8;
  --x-ffe9a8-a60: rgba(255, 233, 168, .6);
  --x-ffecb8-a92: rgba(255, 236, 184, .92);
  --x-ffeebe-a70: rgba(255, 238, 190, .7);
  --x-fff1c8: #fff1c8;
  --x-fff3cf: #fff3cf;
  --x-fff3d9: #fff3d9;
  --x-fff4d6: #fff4d6;
  --x-fff6dc: #fff6dc;
  --x-fff6e4-a12: rgba(255, 246, 228, .12);
  --x-fff6e4-a5: rgba(255, 246, 228, .05);
  --x-fff6e4-a50: rgba(255, 246, 228, .5);
  --x-fff6e4-a55: rgba(255, 246, 228, .55);
  --x-fff6e4-a60: rgba(255, 246, 228, .6);
  --x-fff6e4-a70: rgba(255, 246, 228, .7);
  --x-fff6e4-a72: rgba(255, 246, 228, .72);
  --x-fff6e4-a75: rgba(255, 246, 228, .75);
  --x-fff6e4-a90: rgba(255, 246, 228, .9);
  --x-fff8e6: #fff8e6;
  --x-fffaf0: #fffaf0;
  --x-fffdf4: #fffdf4;
  --x-ffffff: #ffffff;
  --x-ffffff-a10: rgba(255, 255, 255, .1);
  --x-ffffff-a11: rgba(255, 255, 255, .11);
  --x-ffffff-a12: rgba(255, 255, 255, .12);
  --x-ffffff-a14: rgba(255, 255, 255, .14);
  --x-ffffff-a16: rgba(255, 255, 255, .16);
  --x-ffffff-a18: rgba(255, 255, 255, .18);
  --x-ffffff-a2: rgba(255, 255, 255, .02);
  --x-ffffff-a20: rgba(255, 255, 255, .2);
  --x-ffffff-a25: rgba(255, 255, 255, .25);
  --x-ffffff-a2b: rgba(255, 255, 255, .015);
  --x-ffffff-a3: rgba(255, 255, 255, .03);
  --x-ffffff-a4: rgba(255, 255, 255, .04);
  --x-ffffff-a4b: rgba(255, 255, 255, .035);
  --x-ffffff-a50: rgba(255, 255, 255, .5);
  --x-ffffff-a6: rgba(255, 255, 255, .06);
  --x-ffffff-a7: rgba(255, 255, 255, .07);
  --x-ffffff-a70: rgba(255, 255, 255, .7);
  --x-ffffff-a8: rgba(255, 255, 255, .08);
  --x-ffffff-a85: rgba(255, 255, 255, .85);
}
/* end extended palette */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--navy-900);
  color: var(--cream);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow: hidden;              /* the arcade is a fixed single-view app */
  overscroll-behavior: none;
}

img { display: block; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: .92;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.body-copy {
  color: #b9cadd;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Egyptian geometric rule - a restrained gold divider used under headers.
   Pure CSS so it costs nothing to render.
   -------------------------------------------------------------------------- */
.rule {
  position: relative;
  height: 10px;
  flex: none;
}
.rule::before {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  height: 2px;
  background: var(--rule-gold);
}
.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--gold-400);
  transform: rotate(45deg);
  box-shadow: -22px 0 0 -3px var(--gold-600), 22px 0 0 -3px var(--gold-600);
}

/* --------------------------------------------------------------------------
   Panels - navy slab with a gold hairline and notched Egyptian corners.
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  background:
    linear-gradient(165deg, rgba(29, 78, 128, .55), rgba(5, 16, 31, .92)),
    var(--navy-800);
  border: 1px solid rgba(243, 195, 90, .28);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.panel-corners::before,
.panel-corners::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--gold-500);
  opacity: .7;
  pointer-events: none;
}
.panel-corners::before {
  top: 10px; left: 10px;
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 6px;
}
.panel-corners::after {
  bottom: 10px; right: 10px;
  border-left: 0; border-top: 0;
  border-bottom-right-radius: 6px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out),
              background .14s var(--ease-out), border-color .14s var(--ease-out);
}

.btn-gold {
  color: #221703;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 5px 0 var(--gold-700), 0 12px 22px rgba(0, 0, 0, .4),
              inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn-gold:hover {
  background: linear-gradient(180deg, #fde7ae, var(--gold-400));
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--gold-700), 0 16px 28px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn-gold:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--gold-700), 0 6px 12px rgba(0, 0, 0, .4),
              inset 0 1px 0 rgba(255, 255, 255, .5);
}

.btn-ghost {
  color: #cfe0f1;
  background: rgba(14, 44, 77, .72);
  border: 1px solid rgba(243, 195, 90, .3);
  box-shadow: 0 4px 0 rgba(3, 11, 22, .8), 0 10px 20px rgba(0, 0, 0, .32);
}
.btn-ghost:hover {
  color: var(--cream);
  background: rgba(20, 58, 99, .9);
  border-color: var(--gold-400);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(3, 11, 22, .8); }

.btn-small { min-height: 38px; padding: 0 16px; font-size: 13px; letter-spacing: .12em; }
.btn-big { min-height: 56px; padding: 0 34px; font-size: 18px; }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none !important; filter: grayscale(.5); }

/* Small key hint inside a button: [Enter] */
.kbd-hint {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1;
  background: rgba(3, 11, 22, .22);
  border: 1px solid currentColor;
  opacity: .72;
}
.btn-ghost .kbd-hint { background: rgba(3, 11, 22, .45); }

/* --------------------------------------------------------------------------
   Key caps - used in intro screens and the HUD.
   -------------------------------------------------------------------------- */
.keycap {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cream);
  background: linear-gradient(180deg, var(--navy-500), var(--navy-700));
  border: 1px solid rgba(243, 195, 90, .34);
  box-shadow: 0 3px 0 rgba(3, 11, 22, .9), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.keycap.wide { min-width: 86px; font-size: 12px; letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
:root{--avatar-cap:#d8a33c;--avatar-beanie:#8ec8eb;--avatar-scarf:#e193ac}

/* --------------------------------------------------------------------------
   Stage (Round 4 home, css/stage.css and css/paper.css): the self-hosted fonts and the measured colours
   (docs/design/palette.json) that the four-colour preset palette cannot carry. Kept here because every
   colour and font-family literal lives in this file (tests/tokens.test.mjs).
   -------------------------------------------------------------------------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/montserrat-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url(/fonts/montserrat-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/newsreader-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/newsreader-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "UnifrakturCook"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/unifrakturcook-latin-700-normal.woff2) format("woff2"); }
:root {
  --font-stage: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-news: "Newsreader", Georgia, serif;
  --font-masthead: "UnifrakturCook", "Newsreader", Georgia, serif;
  --stage-paper: #e4dad0;
  --stage-ink: #07101f;
  --stage-rule: #777475;
  --stage-curtain-text: #f9f3ee;
  --stage-gold-light: #ebbf1f;
  --stage-button-light: #031d3f;
  --stage-lamp: #edc0a4; /* glow.lamp: the curtain's light spill (css/fx.css) */
  --stage-snow: #ffffff; /* snow, stars, the moon halo and the arcade shimmer (js/fx) */
  --stage-arcade-edge: #6b3a0a;   /* the "ESA ARCADE" title's dark-brown outline, both modes */
  --stage-arcade-shadow: #4a2506; /* and its drop to the lower right */
}
/* --- Staff area (css/staff.css): measured from the v37 dev references, dark then light. --- */
:root{
  --font-staff:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --staff-bg:#001325;--staff-surface:#021a2e;--staff-raise:#06223a;--staff-line:#536c82;--staff-frame:#3f5a74;--staff-rule:#243a50;
  --staff-ink:#f5ecd3;--staff-muted:#a9b8c8;--staff-gold:#fab01c;--staff-gold-hi:#fdc23e;--staff-on-gold:#001325;--staff-link:#f6b72a;
  --staff-active:#524319;--staff-edge:#f4b62f;--staff-selected:#3d3a1f;--staff-track:#2a4054;--staff-area:rgba(242,178,27,.16);
  --staff-ok-bg:#143822;--staff-ok-line:#266f34;--staff-ok-ink:#bfe8c4;
  --staff-warn-bg:#423b1e;--staff-warn-line:#b88c29;--staff-warn-ink:#f3dc9a;
  --staff-bad-bg:#3d1b1b;--staff-bad-line:#a54444;--staff-bad-ink:#f5c2c2;
  --staff-info-bg:#0e2c4d;--staff-info-line:#4d78a6;--staff-info-ink:#cfe0f3;
  --staff-scrim:rgba(0,8,18,.6);--staff-shadow:0 18px 40px rgba(0,0,0,.45)
}
:root[data-mode=light]{
  --staff-bg:#fdfaf7;--staff-surface:#ffffff;--staff-raise:#f6f1ea;--staff-line:#8a8178;--staff-frame:#d6cfc7;--staff-rule:#e4ded6;
  --staff-ink:#0c2754;--staff-muted:#4a5a72;--staff-gold:#fcc543;--staff-gold-hi:#fdd166;--staff-on-gold:#0c2754;--staff-link:#9a6200;
  --staff-active:#fde3af;--staff-edge:#e8ac0b;--staff-selected:#fef0d4;--staff-track:#e6dfd9;--staff-area:rgba(248,178,16,.2);
  --staff-ok-bg:#dbfbdd;--staff-ok-line:#5fcb66;--staff-ok-ink:#17602a;
  --staff-warn-bg:#fdedc8;--staff-warn-line:#d0ae61;--staff-warn-ink:#7a5300;
  --staff-bad-bg:#fde2e0;--staff-bad-line:#e08a84;--staff-bad-ink:#8c2620;
  --staff-info-bg:#e3eefa;--staff-info-line:#8fb0d6;--staff-info-ink:#1d4672;
  --staff-scrim:rgba(12,39,84,.35);--staff-shadow:0 18px 40px rgba(12,39,84,.16)
}
@media(prefers-color-scheme:light){:root:not([data-mode]){
  --staff-bg:#fdfaf7;--staff-surface:#ffffff;--staff-raise:#f6f1ea;--staff-line:#8a8178;--staff-frame:#d6cfc7;--staff-rule:#e4ded6;
  --staff-ink:#0c2754;--staff-muted:#4a5a72;--staff-gold:#fcc543;--staff-gold-hi:#fdd166;--staff-on-gold:#0c2754;--staff-link:#9a6200;
  --staff-active:#fde3af;--staff-edge:#e8ac0b;--staff-selected:#fef0d4;--staff-track:#e6dfd9;--staff-area:rgba(248,178,16,.2);
  --staff-ok-bg:#dbfbdd;--staff-ok-line:#5fcb66;--staff-ok-ink:#17602a;
  --staff-warn-bg:#fdedc8;--staff-warn-line:#d0ae61;--staff-warn-ink:#7a5300;
  --staff-bad-bg:#fde2e0;--staff-bad-line:#e08a84;--staff-bad-ink:#8c2620;
  --staff-info-bg:#e3eefa;--staff-info-line:#8fb0d6;--staff-info-ink:#1d4672;
  --staff-scrim:rgba(12,39,84,.35);--staff-shadow:0 18px 40px rgba(12,39,84,.16)
}}