/* BOX² — coming soon. The wordmark reveal is lifted VERBATIM from the game's menu screen
   (game/web/css/08-screens.css): "BOX to BOX" holds, "toBOX" folds away as one block, the ² pops in, then
   the neon arrives. The selector chain (.home > .menu > .wordmark.menu-mark > .wm-plate.b2b) is reproduced
   in the markup so those rules apply unchanged — copying the rules but not the structure is how this kind
   of thing silently drifts. Everything is sized in cqw against .home, so the mark scales with the box. */
@font-face{font-family:'Fugaz One';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fugaz-one-400-latin.woff2') format('woff2')}
@font-face{font-family:'Saira';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/saira-700-latin.woff2') format('woff2')}
@font-face{font-family:'Saira';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/saira-800-latin.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/saira-condensed-800-latin.woff2') format('woff2')}

:root{
  --font:'Saira',-apple-system,system-ui,sans-serif;
  --font-display:'Saira Condensed','Saira',sans-serif;
  --save:#93e83a; --ink:#EAF0FF; --gasket:#05070f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#04060f;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(120% 82% at 50% -10%, #2236ff 0%, #101a7a 38%, #060a2a 72%, #04060f 100%)}
.home{container-type:inline-size;width:min(600px,92vw);display:flex;flex-direction:column;align-items:center;gap:9cqw;padding:6cqw 0}
.menu{display:flex;flex-direction:column;align-items:center;width:100%}
/* the kicker is tuned for the game's 350px board; at this width its tracking makes it wrap and drag the
   centring off, so it is nowrapped and stepped down here */
.home .wm-kick{white-space:nowrap;font-size:2.5cqw;letter-spacing:.86cqw}
.home .menu-mark{width:100%;text-align:center}
.home .wm-plate{margin:0 auto}
.soon{font:800 4.2cqw/1 var(--font);letter-spacing:.34em;text-transform:uppercase;color:#EAF0FF8C;
  opacity:0;animation:soonIn .6s ease 2.9s forwards}
@keyframes soonIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .soon{opacity:1;animation:none} }

.wm-plate{ display:inline-block; position:relative; }
.wm-beta{ position:absolute; left:47.36cqw; right:auto; bottom:.3cqw; transform:none;   /* left edge aligned with the ²'s left edge (measured: ² starts 170px/48.57cqw into the wordmark plate after the .b2-sup margin-left air, 2026-07-09) and dropped for ~20px of breathing under the ²; cqw is of .home's own CONTENT box, 350px at the 390-wide mobile board, since .home carries 20px side padding */
  font:800 2.86cqw/1 var(--font); font-style:normal; letter-spacing:.22em; color:#06122e;
  background:var(--save); padding:1.14cqw 2cqw .86cqw 2.29cqw; border-radius:.86cqw; box-shadow:0 2px 0 rgba(3,6,14,.55); }
.menu .wordmark.menu-mark .wm-plate b{ font-family:var(--font-display); font-weight:900; font-style:italic;
  font-size:34.29cqw; line-height:.95; letter-spacing:-1.71cqw; color:#fff; display:block;
  text-shadow:0 7px 0 rgba(3,6,14,.55); }   /* full italic + a chunky hard drop — no glow (dead rule today — the live markup always carries .b2b — kept converted in case that ever changes) */
.wm-kick{ font:700 3.14cqw/1 var(--font); letter-spacing:1.43cqw; color:var(--save); }
/* BOX2 REVEAL (resequenced 2026-07-09) — the wordmark plays BOXtoBOX -> BOX -> BOX² -> +neon on menu entry,
   then holds. "toBOX" folds away as one block; the ² is its OWN glyph that pops in after (flex top-align makes
   its .5em a true superscript); the drop shadow is the LAST beat. NOTE: the kicker rule
   `.home .wordmark span{font-size:11px!important;...}` (further up) also targets spans here, so the letters
   are <i> elements and size/spacing/colour are restored below at higher specificity. */
.menu .wordmark.menu-mark .wm-plate.b2b b{ display:inline-flex; align-items:flex-start; white-space:nowrap;
  font-family:'Fugaz One'; font-weight:400; font-style:normal; font-size:22.86cqw; letter-spacing:0;   /* Fugaz One 400 (self-hosted, single weight) — swapped from Tourney 900 on 2026-07-09; 80px at the 390px mobile board (cqw of .home's 350px content box) */
  text-shadow:none;                             /* the reveal plays with NO shadow at all — the legacy .wm-plate b rule's black hard-drop would leak here otherwise */
  animation:b2grow 1.7s cubic-bezier(.45,0,.2,1) forwards,   /* the full BOXtoBOX doesn't FIT the frame at mark size — it opens small and ZOOMS up into BOX² as "toBOX" folds */
            b2neon .45s ease 2.5s forwards; }   /* …and the HALF TIME / YOU WIN neon arrives only when BOX² SETTLES — same .45s/2.5s beat as the BETA chip */
@keyframes b2grow{ 0%,45%{ font-size:12.5cqw; } 88%,100%{ font-size:22.86cqw; } }
/* the neon (pink edge + pink hard-drop + blue glow), in em = the titles' exact 40px-base ratios, scaling with the mark */
@keyframes b2neon{
  from{ text-shadow:0 0 .025em rgba(255,61,132,0), .025em .025em 0 rgba(5,7,15,0), .075em .075em 0 rgba(255,61,132,0), 0 0 .75em rgba(47,107,255,0); }
  to  { text-shadow:0 0 .025em rgba(255,61,132,.9), .025em .025em 0 var(--gasket), .075em .075em 0 rgba(255,61,132,.7), 0 0 .75em rgba(47,107,255,.7); }
}
/* b2-mid/b2-tail/b2-sup are <i> (not <span>) so the kicker's `.home .wordmark span{font-size:11px!important}`
   rule no longer hits them — they inherit the plate font (cqw, scales with the frame).
   THE SEQUENCE (2026-07-09): "BOXtoBOX" holds → "toBOX" collapses as one block → "BOX" → the ² pops in →
   the neon drop shadow fades in (with the BETA chip on the same beat). */
.menu .wordmark.menu-mark .wm-plate.b2b b .b2-mid,
.menu .wordmark.menu-mark .wm-plate.b2b b .b2-tail,
.menu .wordmark.menu-mark .wm-plate.b2b b .b2-sup{ font-style:normal; letter-spacing:0; color:#fff; line-height:.95;
  text-shadow:none; }   /* the collapsing letters and the ² NEVER wear the neon — inherited shadow opted out here */
.b2-mid{ --w:2.3em; --mx:.22em; font-size:.72em; align-self:center; text-transform:uppercase; }   /* the TO of BOX TO BOX — caps, a step smaller, mid-height between the words (align-self:center, NOT baseline: the collapse's overflow:hidden strips the box's baseline so baseline-align falls back to top); its --mx margins ARE the word gaps */
.b2-tail{ --w:3.9em; }   /* generous hold width: max-width above the natural width adds NO space, it just stops the fold box clipping the italic X's overhang */
.b2-lead{ font-style:normal; padding-right:.09em; margin-right:-.09em; }   /* <i> only for the kicker-span dodge — UA italic would SYNTHESIZE an extra lean on top of Fugaz's baked slant */   /* the italic X's overhang needs its own paint room — a fold box flush against it shaved the tip (iOS) */
.b2-mid, .b2-tail{ overflow:hidden; min-width:0;
  animation:b2collapse 1.7s cubic-bezier(.45,0,.2,1) forwards; }            /* both collapse TOGETHER: " TO BOX" folds into BOX */
@keyframes b2collapse{
  0%,45%{ max-width:var(--w); margin-left:var(--mx,0); margin-right:calc(var(--mx,0) - .09em); padding-right:.09em; opacity:1; }   /* hold the full BOX TO BOX read — .09em internal pad keeps the fold box off its own X's overhang */
  88%,100%{ max-width:0; margin-left:0; margin-right:0; padding-right:0; opacity:0; }        /* fold away (word gaps included) -> BOX, flush */
}
/* the ² — a separate glyph that POPS once BOX stands alone (flex top-align makes .5em a true superscript).
   It holds ZERO layout width until the pop, so the opening phrase centres exactly; the BOX-to-² air
   (max-width + margin) arrives WITH the pop — the only trailing space after BOX, and only after the fold. */
.b2-sup{ font-size:.5em; min-width:0; max-width:0; margin-left:0; opacity:0; transform:scale(.6) skewX(-9deg); transform-origin:left top;   /* the skew leans the 2 to match the caps — Fugaz digits ship straighter than its letters */
  animation:b2sup .35s cubic-bezier(.2,.8,.3,1.3) 1.9s forwards; }
@keyframes b2sup{ to{ opacity:1; transform:scale(1) skewX(-9deg); max-width:1em; margin-left:.32em; } }   /* .32em of the .5em glyph ≈ .16em of the mark */
.menu-mark .wm-beta{ opacity:0; animation:b2beta .45s ease 2.5s forwards; }   /* BETA fades in once BOX² settles */
@keyframes b2beta{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .b2-mid, .b2-tail{ max-width:0; margin:0; opacity:0; animation:none; }
  .b2-sup{ opacity:1; transform:skewX(-9deg); max-width:1em; margin-left:.32em; animation:none; }
  .menu-mark .wm-beta{ opacity:1; animation:none; }
  .menu .wordmark.menu-mark .wm-plate.b2b b{ animation:none;   /* settled state applied instantly, neon included */
    text-shadow:0 0 .025em rgba(255,61,132,.9), .025em .025em 0 var(--gasket), .075em .075em 0 rgba(255,61,132,.7), 0 0 .75em rgba(47,107,255,.7); }
}