/* Hallmark · macrostructure: single-stage arcade overlays · genre: playful arcade · theme: mid-autumn tin
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41) · nav: none · footer: Ft1 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: legacy exceptions · responsive/mobile: pass (34,49–57)
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{
    height:100%; margin:0; overflow-x:clip; overflow-y:hidden; background:var(--color-ink);
    font-family:var(--font-body);
  }
  #stage-wrap{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:#000;
  }
  #stage{
    position:relative;
    width:100%; height:100%;
    max-width:520px;
    background:#000;
    overflow:hidden;
    box-shadow:0 0 60px rgba(0,0,0,.8);
  }
  #stage::after{
    content:""; position:absolute; inset:-5%; z-index:49; pointer-events:none; opacity:0;
    background:
      radial-gradient(circle at 18% 42%,rgba(73,185,204,.13),transparent 30%),
      radial-gradient(circle at 82% 58%,rgba(232,73,98,.12),transparent 32%),
      radial-gradient(ellipse at 50% 50%,transparent 34%,rgba(4,2,9,.26) 82%);
    mix-blend-mode:screen; transform:translate3d(0,0,0) scale(1.04);
  }
  #stage.total-eclipse::after{ opacity:1; animation:eclipseVertigo 2.8s ease-in-out infinite alternate; }
  #stage.total-eclipse #vignette{ animation:eclipseVignetteBreath 2.2s ease-in-out infinite alternate; }
  @keyframes eclipseVertigo{
    0%{ transform:translate3d(-1.2%,-.6%,0) scale(1.045) rotate(-.18deg); filter:hue-rotate(-5deg) saturate(1.08); }
    52%{ transform:translate3d(.8%,.9%,0) scale(1.06) rotate(.16deg); filter:hue-rotate(5deg) saturate(1.2); }
    100%{ transform:translate3d(1.3%,-.3%,0) scale(1.05) rotate(-.08deg); filter:hue-rotate(-2deg) saturate(1.12); }
  }
  @keyframes eclipseVignetteBreath{ to{ opacity:.72; filter:contrast(1.08); } }
  /* Landscape is not a scaled-down portrait board: at 812x375 the play field
     would be 375px tall, crushing the arc between spawn (95% height) and box
     (27% height) into nothing. Letterbox to a portrait column instead so the
     shot geometry is identical in both orientations. resize() re-reads the
     stage box on the resize event that orientation change fires. */
  @media (orientation: landscape){
    #stage{ width:auto; height:100%; max-width:none; aspect-ratio: 9 / 16; }
  }

  /* Measured by game.js to keep the swipe/spawn zone clear of the iOS home
     indicator, whose system swipe-up gesture would otherwise eat flicks that
     start at the very bottom edge. Not display:none — that would zero it. */
  #safeProbe{
    position:fixed; bottom:0; left:0; width:1px; pointer-events:none;
    visibility:hidden; z-index:-1;
    height: env(safe-area-inset-bottom, 0px);
  }

  .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;
  }

  /* ---------------- background ---------------- */
  /* Front View is the only camera. The Side View crossfade was removed —
     bg-side.jpg has its own hoop painted into the photo, which blended
     confusingly behind the real interactive hoop at mid-streak. */
  .bg-layer{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center top;
    filter:brightness(.92);
  }
  #bgFront{ z-index:1; }
  #eclipseDarkness{
    position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
    background:linear-gradient(rgba(3,5,12,.72),rgba(8,3,8,.46));
    transition:opacity .45s ease;
  }
  #eclipseMoon{
    --eclipse-lum:1; --eclipse-warm:0; --eclipse-th:26deg; --eclipse-w:5deg;
    --eclipse-glow:0; --eclipse-dip:.04; --eclipse-scale:1; --eclipse-cover-x:112%;
    position:absolute; z-index:2; top:15.2%; left:79%; width:clamp(62px,18vw,90px); aspect-ratio:1;
    transform:translateX(-50%) scale(var(--eclipse-scale)); border-radius:50%; pointer-events:none;
    box-shadow:0 0 14px rgba(255,241,196,.66),0 0 36px rgba(236,201,125,.28);
    opacity:.9; transition:box-shadow .4s ease,opacity .4s ease; will-change:transform;
  }
  .eclipse-moon-surface{
    position:absolute; inset:0; z-index:1; width:100%; height:100%; border-radius:50%;
    filter:brightness(var(--eclipse-lum)) contrast(calc(1 + var(--eclipse-warm) * .3)) sepia(calc(var(--eclipse-warm) * .38)) saturate(calc(1 + var(--eclipse-warm) * 1.15)) hue-rotate(calc(var(--eclipse-warm) * -12deg));
  }
  .eclipse-moon-layer{ position:absolute; inset:0; z-index:2; border-radius:50%; }
  .eclipse-moon-rim,.eclipse-moon-bloom{
    background:conic-gradient(from calc(var(--eclipse-th) - 180deg),
      rgb(198 38 16 / calc(var(--eclipse-dip) * 100%)) 0deg,
      rgb(224 62 22 / calc(var(--eclipse-dip) * 130%)) calc(90deg - var(--eclipse-w) * .5),
      #e8471a calc(180deg - var(--eclipse-w)),#ff7a33 calc(180deg - var(--eclipse-w) * .35),
      #ffc48a 180deg,#ff7a33 calc(180deg + var(--eclipse-w) * .35),#e8471a calc(180deg + var(--eclipse-w)),
      rgb(224 62 22 / calc(var(--eclipse-dip) * 130%)) calc(270deg + var(--eclipse-w) * .5),
      rgb(198 38 16 / calc(var(--eclipse-dip) * 100%)) 360deg);
    opacity:var(--eclipse-glow);
  }
  .eclipse-moon-rim{
    -webkit-mask:radial-gradient(circle closest-side,transparent 0 97.6%,#000 99.2%,#000 100%);
    mask:radial-gradient(circle closest-side,transparent 0 97.6%,#000 99.2%,#000 100%);
    filter:blur(.7px);
  }
  .eclipse-moon-bloom{
    position:absolute; z-index:0; border-radius:50%; inset:-5.5%;
    -webkit-mask:radial-gradient(circle closest-side,transparent 0 88%,#000 94.5%,transparent 100%);
    mask:radial-gradient(circle closest-side,transparent 0 88%,#000 94.5%,transparent 100%);
    filter:blur(3px); opacity:calc(var(--eclipse-glow) * .75);
  }
  .eclipse-moon-spill{
    background:conic-gradient(from calc(var(--eclipse-th) - 180deg),
      rgb(214 70 30 / calc(var(--eclipse-dip) * 60%)) 0deg,transparent calc(90deg - var(--eclipse-w) * .5),
      transparent calc(180deg - var(--eclipse-w) * 2.6),rgba(236,104,46,.38) calc(180deg - var(--eclipse-w) * 1.35),
      rgba(255,170,110,.85) 180deg,rgba(236,104,46,.38) calc(180deg + var(--eclipse-w) * 1.35),
      transparent calc(180deg + var(--eclipse-w) * 2.6),transparent calc(270deg + var(--eclipse-w) * .5),
      rgb(214 70 30 / calc(var(--eclipse-dip) * 60%)) 360deg);
    -webkit-mask:radial-gradient(circle closest-side,transparent 0 92%,#000 99.5%);
    mask:radial-gradient(circle closest-side,transparent 0 92%,#000 99.5%);
    mix-blend-mode:screen; opacity:calc(var(--eclipse-glow) * .6); filter:blur(1px);
  }
  #eclipseMoon i{
    position:absolute; inset:0; z-index:2; border-radius:50%; background:radial-gradient(circle at 42% 35%,#17141b,#05040a 72%);
    box-shadow:inset -5px -3px 12px rgba(0,0,0,.9); transform:translateX(var(--eclipse-cover-x));
    transition:transform .82s cubic-bezier(.16,1,.3,1); will-change:transform;
  }
  #stage.eclipse-phase-1 #eclipseDarkness{ opacity:.05; }
  #stage.eclipse-phase-2 #eclipseDarkness{ opacity:.10; }
  #stage.eclipse-phase-3 #eclipseDarkness{ opacity:.17; }
  #stage.total-eclipse #eclipseDarkness{ opacity:.28; }
  #stage.total-eclipse #eclipseMoon{
    opacity:1;
    box-shadow:0 0 8px 2px rgba(226,92,61,.92),0 0 28px 8px rgba(174,47,42,.42),0 0 54px rgba(237,145,84,.2);
  }
  #stage.total-eclipse #eclipseMoon i{ opacity:0; }
  #vignette{
    position:absolute; inset:0; z-index:3;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 18%);
    pointer-events:none;
  }
  #stage.total-eclipse #vignette{ animation:eclipseVignette .8s ease-in-out infinite alternate; }
  @keyframes eclipseVignette{ to{ box-shadow:inset 0 0 42px rgba(125,20,27,.3),inset 0 0 84px rgba(8,6,18,.5); } }
  canvas#game{
    position:absolute; inset:0; width:100%; height:100%; z-index:4;
    touch-action:none; user-select:none;
  }

  /* ---------------- HUD ---------------- */
  #hud{
    position:absolute; top:0; left:0; right:114px;
    padding:max(8px, env(safe-area-inset-top)) 0 0 10px;
    z-index:20; pointer-events:none;
  }
  /* Same trick as .cover-frame: the frame is locked to the banner art's own
     aspect ratio, so every value below can be positioned as a plain percentage
     of the artwork. Positioning against #hud instead would fold the padding
     into the percentages and skew every value vertically. */
  .hud-frame{
    position:relative; width:100%; aspect-ratio: 2250 / 381;
  }
  #hudBanner{
    position:absolute; inset:0; width:100%; height:100%;
  }
  /* Field centres measured off hud-top-banner.png (2250x381). The three baked-in
     labels share a baseline ending at y=116 (30.4%); the plates end at y=365, so
     each value centres at 63.1%. Label centres are x 13.1% / 50.2% / 84.6%. */
  .hud-val{
    position:absolute;
    font-family:var(--font-numeric);
    font-weight:400;
    color:var(--color-gold);
    text-shadow:0 0 10px rgba(240,200,96,.5);
    line-height:1;
    font-variant-numeric: tabular-nums;
    white-space:nowrap;
    transform:translate(-50%,-50%);
  }
  #scoreVal{
    left:13.1%; top:63.1%;
    font-size:clamp(16px, 5.4vw, 26px);
    font-weight:700;
    /* matches the red of the baked-in "SCORE" label (#a5000c) */
    color:#a5000c; text-shadow:none;
  }
  #timeVal{
    left:50.2%; top:63.1%;
    font-size:clamp(24px, 8vw, 38px);
    letter-spacing:-.035em;
    text-shadow:0 0 14px rgba(240,200,96,.72);
  }
  #highVal{
    left:84.6%; top:63.1%;
    font-size:clamp(14px, 4.6vw, 22px);
  }

  /* ---------------- score multiplier — plain text below Score ---------------- */
  #combo{
    position:absolute; top:21.2%; left:15.2%;
    transform:translateX(-50%); z-index:15; pointer-events:none;
  }
  .fx-eclipse{
    --ink:#f5f1df; --ink-2:#dc6a4d; --ink-3:#a9c9ef;
    --eclipse-word-left:-15%; --eclipse-word-opacity:0; --eclipse-active-opacity:.72;
    position:absolute; left:50%; top:50%; transform:translate(-50%,7vh);
    color:var(--ink); font:700 clamp(34px,10.5vw,52px)/1.1 var(--font-numeric); letter-spacing:.1em;
    text-shadow:0 0 8px color-mix(in srgb,var(--ink-2) 72%,transparent),0 0 20px color-mix(in srgb,var(--ink-2) 42%,transparent),0 2px 4px rgba(0,0,0,.92);
    white-space:nowrap; opacity:0; pointer-events:none;
    transition:opacity .72s var(--ease-out),filter .72s var(--ease-out);
  }
  #tierBanner.eclipse-building .fx-eclipse{ opacity:calc(var(--eclipse-word-opacity) * .7); filter:brightness(.96); }
  .fx-eclipse.show{ opacity:var(--eclipse-active-opacity); filter:brightness(1.04); }
  .fx-eclipse::after{
    content:""; position:absolute; top:50%; left:var(--eclipse-word-left); width:1.3em; height:1.3em; border-radius:50%;
    background:#05040c; box-shadow:0 0 8px 2px color-mix(in srgb,var(--ink-2) 85%,transparent),inset -4px -3px 8px rgba(0,0,0,.9);
    transform:translateY(-50%); opacity:0; transition:left .82s cubic-bezier(.16,1,.3,1),opacity .55s ease;
  }
  #tierBanner.eclipse-building .fx-eclipse::after{ opacity:.78; }
  #comboInner{
    font-family:var(--font-numeric); font-weight:700;
    font-size:clamp(32px,9.5vw,46px); letter-spacing:0;
    padding:0; border:0; border-radius:0; background:none;
    color:var(--color-accent-ink); opacity:0; transform:translateY(-5px) scale(.88);
    transition:opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
    white-space:nowrap;
  }
  #comboInner.show{ opacity:1; transform:translateY(0) scale(1); }
  #comboInner.t1{ color:var(--color-accent-ink); text-shadow:0 2px 7px rgba(0,0,0,.9); }
  #comboInner.t2{ color:#dce9ff; text-shadow:0 0 15px rgba(190,215,255,.9),0 2px 7px rgba(0,0,0,.85); }
  #comboInner.t3{ color:#ffe27a; text-shadow:0 0 17px rgba(255,210,80,.92),0 2px 7px rgba(0,0,0,.85); }
  #comboInner.t4{
    color:#ffe6a8;
    text-shadow:0 0 12px rgba(255,210,105,.82),0 2px 7px rgba(0,0,0,.85);
  }
  #stage.total-eclipse #comboInner.t4{
    color:#f8fbff;
    text-shadow:0 0 7px #fff,0 0 17px rgba(220,106,77,.92),0 2px 7px rgba(0,0,0,.85);
    animation:eclipseMultiplierGlow .8s ease-in-out infinite alternate;
  }
  @keyframes eclipseMultiplierGlow{ to{ filter:brightness(1.2); } }

  .iconBtn{
    position:absolute; right:10px; top:max(8px, env(safe-area-inset-top));
    z-index:24; width:44px; min-width:44px; min-height:44px; padding:0;
    border:1px solid color-mix(in oklch, var(--color-paper) 35%, transparent);
    border-radius:var(--radius-pill); background:color-mix(in oklch, var(--color-ink) 78%, transparent);
    color:var(--color-paper); font:700 19px/1 var(--font-body); cursor:pointer;
  }
  #helpBtn{ right:62px; font-family:var(--font-numeric); font-size:21px; }
  @keyframes buttonVibrate{
    0%,100%{ transform:translateX(0) rotate(0); }
    20%{ transform:translateX(-2px) rotate(-.7deg); }
    40%{ transform:translateX(2px) rotate(.7deg); }
    60%{ transform:translateX(-1.5px) rotate(-.5deg); }
    80%{ transform:translateX(1.5px) rotate(.5deg); }
  }
  @media (hover:hover) and (pointer:fine){
    .iconBtn:hover{ background:var(--color-ink-2); animation:buttonVibrate .22s linear 1; }
  }
  .iconBtn:active{ transform:translateY(1px); }
  .iconBtn:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; }
  .iconBtn:disabled{ opacity:0; pointer-events:none; }

  .help-overlay{
    position:absolute; inset:0; z-index:63; display:grid; place-items:center;
    padding:20px; background:color-mix(in oklch,var(--color-ink) 72%,transparent);
  }
  .help-overlay[hidden]{ display:none; }
  .help-card{
    position:relative; width:min(100%,380px); max-height:calc(100% - 20px); overflow:auto; padding:32px 24px 24px;
    border:8px solid var(--color-result-frame); border-radius:30px;
    background:var(--color-result-paper); color:var(--color-result-ink);
    box-shadow:inset 0 0 0 3px var(--color-result-gold),var(--shadow-result);
  }
  .help-card h2{ margin:0 36px 14px; text-align:center; font:700 28px/1 var(--font-numeric); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
  @media (max-width:380px){
    .help-card h2{ margin:0 30px 14px; font-size:clamp(18px,6.2vw,28px); letter-spacing:.03em; }
  }
  .help-card p{ margin:0; text-align:center; color:var(--color-ink-2); font-size:15px; line-height:1.45; }
  .help-steps{ display:grid; gap:11px; margin-top:17px; text-align:left; }
  .help-steps section{ padding-left:14px; border-left:3px solid var(--color-result-gold); }
  .help-steps h3{ margin:0 0 3px; color:var(--color-result-ink); font:700 14px/1.15 var(--font-numeric); letter-spacing:.055em; text-transform:uppercase; }
  .help-steps section p{ text-align:left; font-size:13px; line-height:1.38; }
  .help-close{ position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--color-result-ink); font:700 28px/1 var(--font-body); cursor:pointer; }
  .help-close:hover{ background:color-mix(in oklch,var(--color-result-ink) 10%,transparent); animation:buttonVibrate .22s linear 1; }
  .help-close:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; }

  #timeVal.time-low{ color:var(--color-gold); text-shadow:0 0 16px color-mix(in oklch, var(--color-gold) 85%, transparent); }
  #timeVal.time-critical{
    color:#ff3344; background:none; border:0; border-radius:0; padding:0;
    text-shadow:0 0 8px rgba(255,35,55,.95),0 0 20px rgba(255,35,55,.9),0 0 34px rgba(255,35,55,.7);
  }

  /* ---------------- tier-up celebration banner ---------------- */
  /* Pops over live (unpaused) gameplay for ~1.5s when a combo threshold is
     crossed, then fades — camera/background never changes for this, only
     the overlay. See registerScore() in game.js. */
  #tierBanner{
    position:absolute; inset:0; z-index:35;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
  }
  #tierBanner.show,#tierBanner.eclipse-show,#tierBanner.eclipse-building{ opacity:1; }
  #tierBanner.eclipse-show #tierBannerImg,#tierBanner.eclipse-building #tierBannerImg{ opacity:0; }
  #tierBannerImg{
    width:84.6%; max-width:441px; height:auto;
    transform:translateY(7vh);
    filter:drop-shadow(0 8px 30px rgba(0,0,0,.6));
  }

  /* ---------------- streak float text ---------------- */
  .floatText{
    position:absolute; font-family:var(--font-numeric); font-weight:700; pointer-events:none; z-index:30;
    text-shadow:0 2px 6px rgba(0,0,0,.6);
    animation: floatUp .75s ease-out forwards;
  }
  @keyframes floatUp{
    0%{ transform:translate(-50%,-50%) scale(.6); opacity:0; }
    15%{ opacity:1; transform:translate(-50%,-60%) scale(1.15); }
    100%{ transform:translate(-50%,-140%) scale(1); opacity:0; }
  }

  /* ---------------- overlays (Start / End) ---------------- */
  .overlay{
    position:absolute; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
    background:#000;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .overlay[hidden]{ display:none; }
  .start-shell{
    position:relative; z-index:3; display:flex; flex-direction:column; align-items:center;
    width:100%; max-width:520px; transform:translateY(-2.2%);
  }
  /* cover-frame is locked to the art's own aspect ratio so every overlaid
     value/button below can be positioned as a plain percentage of the art
     itself — object-fit:contain on a bare image element would letterbox these
     (tall, non-stage-shaped) images and throw off every percentage. */
  .cover-frame{
    position:relative; width:100%; margin:auto;
  }
  #startFrame{ aspect-ratio: 1765 / 2057; }
  #endFrame{ aspect-ratio: 1455 / 2020; }
  .cover-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:fill;
  }
  /* Start screen: Front View + a dark scrim behind the cover art, per spec */
  #startOverlay{ background:#000; }
  #startOverlay::before{
    content:''; position:absolute; inset:0;
    background-image:url('../assets/images/bg-front.jpg');
    background-size:cover; background-position:center top;
  }
  #startOverlay::after{
    content:''; position:absolute; inset:0; background:rgba(0,0,0,.55);
  }
  .start-cover-art{ position:absolute; inset:0; z-index:1; overflow:hidden; clip-path:inset(0 0 17% 0); }
  #startOverlay .cover-img{ z-index:1; }
  .start-loading{
    position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding:24px; color:var(--color-gold); text-align:center; text-shadow:0 3px 12px #000;
    transition:opacity .18s ease;
  }
  .start-loading strong{ font:700 clamp(28px,9vw,46px)/1.05 var(--font-display); letter-spacing:.025em; text-transform:uppercase; }
  .start-loading span{ font:700 15px/1 var(--font-numeric); letter-spacing:.12em; text-transform:uppercase; }
  #startOverlay.cover-ready .start-loading{ opacity:0; visibility:hidden; }
  #startOverlay.cover-pending .startHit{ opacity:0; pointer-events:none; }
  #startOverlay.game-assets-pending .startHit,
  #startOverlay.game-assets-error .startHit{
    display:grid; place-items:center; background:#8dcc3d; border:3px solid rgba(255,255,255,.8);
    color:#fff; font:700 clamp(24px,8vw,40px)/1 var(--font-display); text-transform:uppercase;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  #startOverlay.game-assets-pending .startHit span,
  #startOverlay.game-assets-error .startHit span{ opacity:1; font-size:inherit; color:inherit; }
  #startOverlay.game-assets-pending .startHit img,
  #startOverlay.game-assets-error .startHit img{ opacity:0; }
  #startOverlay.game-assets-pending .startHit{ cursor:wait; opacity:.92; }
  .start-help-btn{ z-index:5; right:10px; top:max(10px,env(safe-area-inset-top)); font-family:var(--font-numeric); font-size:21px; }
  .startHit{
    position:absolute; z-index:3; left:20.75%; right:20.75%; top:84.4%; aspect-ratio:1015 / 266;
    border:0; border-radius:999px; padding:0; overflow:hidden; background:transparent; cursor:pointer;
    transition:filter var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
  }
  .startHit img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; transition:opacity var(--dur-fast) var(--ease-out); }
  .startHit span{ position:relative; z-index:1; opacity:0; font-size:0; color:transparent; }
  .startHit:focus-visible{ outline:3px solid var(--color-focus); outline-offset:3px; }
  .startHit:active{ transform:translateY(1px) scale(.99); }
  .startHit:disabled{ opacity:.55; cursor:not-allowed; }
  #startOverlay .start-leaderboard-btn{
    width:57.5%; min-height:48px; margin-top:10px; background:var(--color-result-white);
    border-color:var(--color-result-gold); color:var(--color-result-ink); font-size:clamp(15px,4.4vw,20px);
    box-shadow:0 7px 16px color-mix(in oklch,var(--color-ink) 22%,transparent);
  }
  @media (hover:hover) and (pointer:fine){
    .startHit:hover{ filter:brightness(1.08) drop-shadow(0 8px 13px color-mix(in oklch,var(--color-result-green) 30%,transparent)); animation:buttonVibrate .22s linear 1; }
  }
  .start-copyright{
    position:absolute; left:50%; bottom:max(4px,env(safe-area-inset-bottom)); z-index:3;
    transform:translateX(-50%); color:color-mix(in oklch,var(--color-paper) 72%,transparent);
    font:600 10px/1.2 var(--font-body); letter-spacing:.035em; white-space:nowrap;
  }

  /* Baked-in button hitboxes, calibrated to the art (see docs/HANDOFF.md).
     Invisible — the real button graphic is part of the PNG; these are just
     the clickable regions until cutout art exists. Positioned relative to
     .cover-frame, which matches the art's own pixel proportions exactly. */
  /* The button graphic is baked into the cover PNG, so these carry no art of
     their own — but they still need to react. Without this the Start button
     had no hover, no press, and no visible keyboard focus at all. Label text
     is present for assistive tech and clipped visually. */
  .hiddenBtn{
    position:absolute; z-index:2;
    background:transparent; border:none; padding:0; margin:0; cursor:pointer;
    border-radius:999px;
    font-size:0; color:transparent; overflow:hidden;
    -webkit-appearance:none; appearance:none;
    transition:background-color .15s ease, transform .12s cubic-bezier(0,0,.2,1);
  }
  .hiddenBtn span{ font-size:0; color:transparent; }
  /* Hover only where hovering is real — on touch this would stick after a tap. */
  @media (hover:hover) and (pointer:fine){
    .hiddenBtn:hover{ background:transparent; box-shadow:none; animation:none; }
  }
  .hiddenBtn:active{ transform:scale(.97); background:rgba(0,0,0,.14); }
  .hiddenBtn:focus-visible{
    outline:3px solid var(--color-focus);
    outline-offset:3px;
    background:rgba(255,255,255,.14);
  }
  #stage.eclipse-rumble{ animation:stageEclipseRumble .52s linear both; }
  #stage.eclipse-hit-rumble{ animation:stageEclipseHitRumble .18s linear both; }
  #stage.eclipse-final-rumble{ animation:stageEclipseFinalRumble .42s linear both; }
  @keyframes stageEclipseRumble{
    0%,100%{transform:translate3d(0,0,0)} 12%{transform:translate3d(-3px,1px,0)} 24%{transform:translate3d(3px,-2px,0)}
    38%{transform:translate3d(-2px,2px,0)} 54%{transform:translate3d(2px,-1px,0)} 72%{transform:translate3d(-1px,1px,0)} 88%{transform:translate3d(1px,0,0)}
  }
  @keyframes stageEclipseHitRumble{ 0%,100%{transform:translate3d(0,0,0)} 35%{transform:translate3d(-1.5px,1px,0)} 70%{transform:translate3d(1.5px,-1px,0)} }
  @keyframes stageEclipseFinalRumble{ 0%,100%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-2px,0,0)} 50%{transform:translate3d(2px,1px,0)} 75%{transform:translate3d(-1px,-1px,0)} }
  #endOverlay{
    height:100%; max-height:100dvh; overflow:hidden; align-items:flex-start;
    padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    background:
      linear-gradient(color-mix(in oklch, var(--color-ink) 68%, transparent), color-mix(in oklch, var(--color-ink) 88%, transparent)),
      url('../assets/images/bg-front.jpg') center top / cover;
  }
  .result-card{
    position:relative; width:min(100%,420px); max-height:100%; overflow:auto;
    margin-top:clamp(0px,2vh,16px);
    padding:clamp(22px,4.5vh,34px) clamp(18px,5vw,30px) clamp(22px,4.2vh,32px);
    border:clamp(9px,2.4vw,13px) solid var(--color-result-frame);
    border-radius:clamp(32px,8vw,46px);
    background:
      radial-gradient(circle at 50% 14%,var(--color-result-white),transparent 45%),
      linear-gradient(145deg,var(--color-result-paper),color-mix(in oklch,var(--color-result-paper) 86%,var(--color-result-gold)));
    color:var(--color-result-ink); text-align:center;
    box-shadow:inset 0 0 0 3px var(--color-result-gold),inset 0 0 0 7px var(--color-result-paper),var(--shadow-result);
    scrollbar-width:none;
  }
  @supports(height:100dvh){
    .result-card{ max-height:calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)) - 16px); }
  }
  .result-card::-webkit-scrollbar{ display:none; }
  .result-card::before{ display:none; }
  .result-card > *{ position:relative; z-index:1; }
  .result-card > .result-close{ position:absolute; z-index:6; top:var(--space-xs); right:var(--space-xs); }
  .result-close:active{ transform:translateY(1px); }
  .result-close:disabled{ opacity:.55; cursor:not-allowed; }
  .result-kicker{ margin:0; color:var(--color-result-red); font:700 clamp(16px,4.55vw,21px)/1 var(--font-numeric); letter-spacing:.08em; text-transform:uppercase; }
  .result-score-stage{ position:relative; width:min(95%,266px); margin:10px auto 0; }
  .result-tier{
    position:absolute; z-index:3; left:0; top:calc(50% - 18px);
    display:inline-flex; align-items:center; color:var(--color-competition-orange);
    font-family:var(--font-numeric); text-transform:uppercase; pointer-events:none;
    opacity:0; transform:translate(-8px,-50%) rotate(-14deg) scale(1.42);
  }
  .result-tier.show{ animation:resultTierStamp 280ms var(--ease-out) both; }
  @keyframes resultTierStamp{
    0%{ opacity:0; transform:translate(-8px,-50%) rotate(-14deg) scale(1.42); }
    72%{ opacity:1; transform:translate(-3px,-50%) rotate(-9deg) scale(.94); }
    100%{ opacity:1; transform:translate(-3px,-50%) rotate(-9deg) scale(1); }
  }
  .tier-badge{ position:relative; display:inline-grid; flex:0 0 auto; place-items:center; aspect-ratio:1; }
  .tier-badge img{ grid-area:1/1; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 3px color-mix(in oklch,var(--color-ink) 24%,transparent)); }
  .tier-badge b{ grid-area:1/1; z-index:3; color:var(--color-result-white); font-family:var(--font-numeric); font-weight:700; line-height:1; text-shadow:0 1px 2px var(--color-ink),0 0 3px var(--color-ink); }
  .tier-badge--result{ width:clamp(57px,16.15vw,70px); }
  .tier-badge--result b{ font-size:clamp(21px,5.9vw,27px); }
  .tier-badge-glare{
    position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none;
    -webkit-mask:var(--tier-badge-mask) center/contain no-repeat;
    mask:var(--tier-badge-mask) center/contain no-repeat;
  }
  .tier-badge-glare::after{
    content:""; position:absolute; top:-20%; bottom:-20%; left:35%; width:24%;
    background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--color-result-white) 82%,transparent),transparent);
    opacity:.82; transform:translateX(-360%) rotate(16deg);
    animation:tierBadgeGlare 1.8s var(--ease-in-out) .45s infinite;
  }
  @keyframes tierBadgeGlare{ 0%,35%{transform:translateX(-360%) rotate(16deg)} 70%,100%{transform:translateX(360%) rotate(16deg)} }
  .result-score{ margin:0; color:var(--color-result-ink); font-family:var(--font-numeric); line-height:.86; }
  .result-score span{ font-size:clamp(55px,16.15vw,80px); font-weight:700; letter-spacing:-.04em; }
  .result-score small{ display:block; margin-top:12px; font:700 clamp(12px,3.4vw,16px)/1 var(--font-numeric); letter-spacing:.12em; text-transform:uppercase; }
  .result-competitive{ min-height:1em; margin:var(--space-2xs) 0 5px; color:var(--color-competition-orange); font:700 clamp(8px,2.25vw,10px)/1.2 var(--font-numeric); letter-spacing:.035em; text-transform:uppercase; }
  .result-competitive:empty{ display:none; }
  .result-competitive.is-streak{ animation:resultNoticePulse 1.45s ease-in-out infinite; }
  @keyframes resultNoticePulse{ 0%,100%{opacity:.58;filter:brightness(.9)} 50%{opacity:1;filter:brightness(1.32)} }
  .result-message{ margin:0; }
  .result-divider{ position:relative; display:flex; align-items:center; gap:9px; margin:0 0 5px; color:var(--color-result-red); }
  .result-divider::before,.result-divider::after{ content:""; flex:1; height:1px; background:var(--color-result-line); }
  .result-divider span{ font-size:13px; }
  .result-stats{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:0; transform:translateY(-5px); }
  .result-stats div{ min-width:0; padding:0 8%; }
  .result-stats div+div{ border-left:1px solid var(--color-result-line); }
  .result-stats dt{ color:var(--color-result-green); font:700 clamp(9px,2.65vw,11px)/1 var(--font-numeric); letter-spacing:.04em; text-transform:uppercase; }
  .result-stats dd{ margin:var(--space-3xs) 0 0; color:var(--color-result-ink); font:700 clamp(24px,6.65vw,32px)/1 var(--font-numeric); }
  .result-illustration{ position:relative; z-index:2; height:clamp(99px,14.25vh,127px); margin-top:var(--space-2xs); overflow:visible; pointer-events:none; }
  .result-character-composite{
    position:absolute; left:0; bottom:-23px; display:block; width:100%; height:auto; object-fit:contain;
    opacity:0; transform:translateY(6px); transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
  }
  .result-character-composite.show{ opacity:1; transform:translateY(0); }
  .result-actions{ z-index:3; display:grid; gap:10px; margin-top:0; padding-inline:var(--space-xs); }
  .result-secondary-actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2xs); margin-top:0; }
  .result-secondary-actions:has(.gameBtn[hidden]){ grid-template-columns:minmax(0,1fr); }
  .result-secondary-actions .gameBtn{ min-height:46px; color:var(--color-ink); }
  .result-secondary-actions .gameBtn[hidden],.result-card > .gameBtn[hidden]{ display:none; }
  .result-pending-note{
    display:block; min-height:1.2em; margin-top:calc(var(--space-3xs) * -1);
    color:var(--color-competition-orange); font:700 10px/1.2 var(--font-numeric);
    letter-spacing:.08em; text-transform:uppercase;
  }
  .gameBtn--judge:disabled{
    opacity:.58; cursor:not-allowed; filter:saturate(.6);
  }
  .result-name-form{ min-height:118px; margin:var(--space-sm) var(--space-xs) 0; padding:14px var(--space-xs) var(--space-2xs); border:0; border-radius:14px; background:color-mix(in oklch,var(--color-result-white) 38%,transparent); }
  .result-name-form[hidden]{ display:none; }
  .result-name-form label{ display:block; color:var(--color-result-green); font:700 12px/1 var(--font-numeric); letter-spacing:.06em; text-transform:uppercase; }
  .result-name-form p{ margin:var(--space-3xs) 0 var(--space-2xs); color:var(--color-ink-2); font:600 9px/1.3 var(--font-body); }
  .result-name-form > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2xs); transform:translateY(10px); }
  .result-name-form input{ min-width:0; height:44px; padding:0 var(--space-2xs); border:1px solid var(--color-competition-rule); border-radius:12px; outline:2px solid transparent; background:var(--color-result-white); color:var(--color-result-ink); font:700 15px/1 var(--font-numeric); text-transform:uppercase; }
  .result-name-form input::placeholder{ text-transform:none; }
  .result-name-form input:focus-visible{ outline-color:var(--color-focus); outline-offset:1px; }
  .result-name-form .gameBtn{ min-height:44px; padding-inline:var(--space-xs); font-size:15px; }
  .result-name-form output{ display:block; min-height:1.3em; margin-top:var(--space-3xs); color:var(--color-error); font:700 10px/1.3 var(--font-body); }
  .gameBtn{
    min-height:55px; border:2px solid transparent; border-radius:var(--radius-pill); padding:0 var(--space-md);
    font:800 16px/1 var(--font-body); white-space:nowrap; cursor:pointer;
    transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
  }
  .gameBtn--primary{ background:linear-gradient(180deg,color-mix(in oklch,var(--color-result-red) 82%,var(--color-result-white)),var(--color-result-red)); color:var(--color-result-white); border-color:color-mix(in oklch,var(--color-result-white) 82%,var(--color-result-red)); box-shadow:0 8px 18px color-mix(in oklch,var(--color-result-red) 32%,transparent); }
  .gameBtn--primary{ font-family:var(--font-numeric); font-size:clamp(20px,5.7vw,28px); font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
  .gameBtn--secondary{ display:flex; align-items:center; justify-content:center; background:transparent; color:var(--color-ink); border-color:transparent; font-family:var(--font-numeric); font-size:22px; text-transform:uppercase; }
  .result-secondary-actions .gameBtn{ min-width:0; padding-inline:var(--space-xs); font-size:clamp(15px,4vw,18px); }
  .gameBtn--judge{ position:relative; isolation:isolate; overflow:hidden; border-color:transparent; background:var(--color-result-paper); font-size:clamp(12px,3.5vw,16px) !important; }
  .gameBtn--judge::before{
    content:""; position:absolute; inset:-120%; z-index:0; pointer-events:none;
    background:conic-gradient(transparent 0 62%,var(--color-result-red) 68%,var(--color-gold) 74%,var(--color-success) 80%,var(--color-rank-silver) 86%,var(--color-result-white) 91%,transparent 97%);
    animation:judgePerimeterLight 2.4s linear infinite;
  }
  .gameBtn--judge::after{ content:""; position:absolute; inset:2px; z-index:0; border-radius:inherit; background:var(--color-result-paper); pointer-events:none; }
  .gameBtn--judge span{ position:relative; z-index:1; }
  @keyframes judgePerimeterLight{ to{ transform:rotate(1turn); } }
  .gameBtn--leaderboard{ background:var(--color-result-white); border-color:var(--color-result-gold); box-shadow:0 6px 14px color-mix(in oklch,var(--color-ink) 12%,transparent); }
  @media (hover:hover) and (pointer:fine){
    .gameBtn:hover{ animation:buttonVibrate .22s linear 1; }
    .gameBtn--primary:hover{ background:var(--color-result-red-hover); box-shadow:0 11px 22px color-mix(in oklch,var(--color-result-red) 38%,transparent); }
    .gameBtn--secondary:hover{ background:color-mix(in oklch,var(--color-result-white) 62%,transparent); border-color:var(--color-result-gold); box-shadow:0 8px 18px color-mix(in oklch,var(--color-ink) 14%,transparent); }
    .gameBtn--leaderboard:hover{ background:var(--color-result-paper); }
  }
  .gameBtn:active{ transform:translateY(1px) scale(.99); }
  .gameBtn:focus-visible{ outline:3px solid var(--color-focus); outline-offset:3px; }
  .gameBtn:disabled{ opacity:.55; cursor:not-allowed; }
  .gameBtn[data-state="loading"]::after{ content:'…'; margin-left:.3em; }
  .gameBtn[data-state="success"]{ background:var(--color-success); color:var(--color-ink); }
  .gameBtn[data-state="error"]{ border-color:var(--color-error); }

  /* Mooncake personality interstitial: a brief judgement ritual over the
     existing result card, not a second card competing with it. */
  .judging-overlay{
    position:absolute; inset:0; z-index:90; display:grid; place-items:center;
    padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
    overflow:hidden; background:rgba(5,3,7,.72);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    opacity:0; transition:opacity 180ms ease;
  }
  .judging-overlay[hidden]{ display:none; }
  .judging-overlay.show{ opacity:1; }
  .judging-content{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:min(92vw,390px); color:#fff4db; text-align:center;
    transform:translateY(7px); opacity:0;
    transition:transform 220ms var(--ease-out),opacity 180ms ease;
  }
  .judging-overlay.show .judging-content{ transform:translateY(0); opacity:1; }
  .judging-content h2{
    position:relative; z-index:3; margin:0 0 4px;
    color:#fff4db; font:700 clamp(22px,6.2vw,30px)/1.12 var(--font-numeric);
    letter-spacing:.04em; text-transform:uppercase;
    text-shadow:0 2px 5px rgba(0,0,0,.9),0 0 20px rgba(244,183,78,.3);
  }
  .judging-change-wrap{
    position:relative; width:100%; height:clamp(225px,57vw,285px); margin:-10px auto 0;
  }
  .judging-change{
    position:absolute; display:block; object-fit:contain; pointer-events:none;
    z-index:1; left:50%; bottom:0; width:72%; height:100%;
    transform:translate(-50%,12px) scale(.98); opacity:0;
  }
  .judging-rabbit{
    position:relative; z-index:2; display:block; width:48%; height:auto; max-height:145px;
    margin:-4px auto 0; object-fit:contain; pointer-events:none;
    transform:translate(14px,8px) scale(.96); opacity:0;
  }
  .judging-overlay.show .judging-change{ animation:judgingChangeIn 240ms var(--ease-out) 50ms both; }
  .judging-overlay.show .judging-change-wrap{ animation:judgingTremble .72s steps(2,end) 320ms infinite; }
  .judging-overlay.show .judging-rabbit{ animation:judgingRabbitIn 210ms var(--ease-out) 140ms both; }
  .judging-status{
    position:relative; z-index:3; min-height:2.6em; width:100%; margin:2px 0 0;
    display:grid; place-items:center;
    color:#f6c761; font:700 clamp(14px,4.1vw,18px)/1.3 var(--font-numeric);
    letter-spacing:.055em; text-transform:uppercase;
    text-shadow:0 2px 4px rgba(0,0,0,.9);
  }
  .judging-status.swap{ animation:judgingCopySwap 180ms ease both; }
  @keyframes judgingChangeIn{ to{ opacity:1; transform:translate(-50%,0) scale(1); } }
  @keyframes judgingTremble{
    0%,100%{ transform:translate3d(0,0,0) rotate(0); }
    25%{ transform:translate3d(-1px,0,0) rotate(-.18deg); }
    50%{ transform:translate3d(1px,-1px,0) rotate(.18deg); }
    75%{ transform:translate3d(0,1px,0) rotate(-.1deg); }
  }
  @keyframes judgingRabbitIn{ to{ opacity:1; transform:translate(0,0) scale(1); } }
  @keyframes judgingCopySwap{ 0%{ opacity:0; transform:translateY(3px); } 100%{ opacity:1; transform:none; } }

  .leaderboard-overlay{
    position:absolute; inset:0; z-index:62; display:grid; place-items:center;
    padding:var(--space-sm); background:color-mix(in oklch,var(--color-ink) 78%,transparent);
  }
  .leaderboard-overlay[hidden]{ display:none; }
  .leaderboard-card{
    position:relative; width:min(100%,400px); max-height:calc(100% - 20px); overflow:auto;
    padding:var(--space-lg) var(--space-md) var(--space-xs); border:8px solid var(--color-result-frame); border-radius:30px;
    background:var(--color-result-paper); color:var(--color-result-ink);
    box-shadow:inset 0 0 0 3px var(--color-result-gold),var(--shadow-result);
  }
  .leaderboard-card:has(.leaderboard-list:not([hidden])){ overflow:hidden; }
  .leaderboard-card h2{ width:100%; min-width:0; margin:var(--space-2xs) 0 var(--space-3xs); overflow-wrap:anywhere; text-align:center; font:700 clamp(28px,8vw,38px)/1.04 var(--font-numeric); letter-spacing:.025em; text-transform:uppercase; white-space:nowrap; }
  .leaderboard-status{ min-height:1.3em; margin:0 0 var(--space-2xs); text-align:center; color:var(--color-competition-orange); font:700 13px/1.3 var(--font-numeric); }
  .leaderboard-status:empty{ display:none; }
  .leaderboard-list{ margin:0; padding:0; list-style:none; border-block:1px solid var(--color-result-line); }
  .leaderboard-list li{ display:grid; grid-template-columns:25px minmax(0,1fr) 84px; gap:var(--space-3xs); align-items:center; min-height:38px; padding:var(--space-3xs) var(--space-2xs) var(--space-3xs) 3px; border-bottom:1px solid color-mix(in oklch,var(--color-result-line) 25%,transparent); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
  .leaderboard-list li:last-child{ border-bottom:0; }
  .leaderboard-list li.rank-1{ min-height:48px; background:var(--color-rank-gold-paper); color:var(--color-result-ink); box-shadow:inset 0 0 0 1px var(--color-rank-gold); }
  .leaderboard-list li.rank-2{ background:var(--color-rank-silver-paper); color:var(--color-result-ink); }
  .leaderboard-list li.rank-3{ background:var(--color-rank-copper-paper); color:var(--color-result-ink); }
  .leaderboard-list li.is-current{ position:relative; outline:2px solid var(--color-result-red); outline-offset:-2px; background-color:color-mix(in oklch,var(--color-result-red) 7%,var(--color-result-paper)); }
  .leaderboard-list li.rank-1 .leaderboard-rank{ color:var(--color-rank-gold); font-size:20px; }
  .leaderboard-list li.rank-2 .leaderboard-rank{ color:var(--color-rank-silver); }
  .leaderboard-list li.rank-3 .leaderboard-rank{ color:var(--color-rank-copper); }
  .leaderboard-list li.rank-1 .leaderboard-name{ font-size:22px; }
  .leaderboard-list li.rank-1 .leaderboard-score{ font-size:22px; }
  .leaderboard-list li.rank-1 .leaderboard-streak{ font-size:10px; }
  .leaderboard-rank{ color:var(--color-ink-2); font-weight:700; }
  .leaderboard-identity,.leaderboard-result{ min-width:0; display:grid; align-content:center; }
  .leaderboard-name-line{ min-width:0; display:flex; align-items:center; gap:var(--space-3xs); }
  .leaderboard-tier-badge{ width:22px; }
  .leaderboard-tier-badge b{ display:none; }
  .rank-1 .leaderboard-tier-badge{ width:26px; }
  .leaderboard-name{ min-width:0; white-space:nowrap; color:var(--color-result-green); font-size:16px; font-weight:700; line-height:1.05; }
  .leaderboard-champion{ margin-top:3px; color:var(--color-rank-gold); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
  .leaderboard-score{ color:var(--color-result-ink); font-size:16px; font-weight:700; line-height:1; text-align:right; }
  .leaderboard-streak{ margin-top:3px; color:var(--color-ink-2); font-size:10px; white-space:nowrap; text-align:right; text-transform:uppercase; }
  .player-position{ margin-top:var(--space-2xs); padding:var(--space-2xs) var(--space-xs); border:1px solid var(--color-result-gold); border-radius:16px; background:color-mix(in oklch,var(--color-result-white) 58%,var(--color-result-paper)); color:var(--color-result-ink); font-family:var(--font-numeric); font-variant-numeric:tabular-nums; }
  .player-position[hidden]{ display:none; }
  .player-position__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-sm); }
  .player-position__head span{ color:var(--color-result-green); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .player-position__head strong{ color:var(--color-result-red); font-size:36px; line-height:.9; }
  .player-position__score{ margin-top:calc(var(--space-3xs) * -1); color:var(--color-result-ink); font-size:26px; font-weight:700; line-height:1; }
  .player-position__score small{ font-size:11px; letter-spacing:.08em; }
  .player-position em{ display:block; margin-top:var(--space-2xs); color:var(--color-competition-orange); font-size:13px; font-style:normal; font-weight:700; letter-spacing:.035em; text-transform:uppercase; }
  .player-position[data-state="close"] em{ color:var(--color-result-red); }
  .player-position[data-state="number-one"]{ border-color:var(--color-rank-gold); background:var(--color-rank-gold-paper); }
  .player-position[data-state="number-one"] em{ color:var(--color-rank-gold); }
  .player-progress{ margin-top:var(--space-2xs); }
  .player-progress[hidden]{ display:none; }
  .player-progress__values{ display:flex; justify-content:space-between; gap:var(--space-sm); color:var(--color-ink-2); font-size:10px; line-height:1.15; }
  .player-progress__values span{ display:grid; gap:2px; }
  .player-progress__values span:last-child{ text-align:right; }
  .player-progress__values b{ color:var(--color-result-ink); font-size:11px; }
  .player-progress__values small{ font-size:10px; letter-spacing:.06em; }
  .player-progress__track{ height:4px; margin-top:var(--space-3xs); overflow:hidden; border-radius:var(--radius-pill); background:var(--color-competition-rule); }
  .player-progress__track i{ display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center; border-radius:inherit; background:var(--color-result-red); transition:transform var(--dur-long) var(--ease-out); }
  .player-position__streak{ margin:var(--space-2xs) 0 0; color:var(--color-ink-2); font-size:11px; text-transform:uppercase; }
  #endOverlay[data-competition-state="new-high-score"] .result-competitive,
  #endOverlay[data-competition-state="top10"] .result-competitive,
  #endOverlay[data-competition-state="number-one"] .result-competitive{ color:var(--color-rank-gold); font-weight:700; }
  #endOverlay[data-competition-state="new-best-streak"] .result-competitive{ color:var(--color-result-green); font-weight:700; }
  .player-account-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; color:var(--color-result-green); font:700 12px/1.2 var(--font-numeric); }
  .player-account-bar strong{ font-size:14px; }
  .player-account-bar[hidden]{ display:none; }
  .player-account-bar .gameBtn{ min-height:38px; padding:7px 12px; font-size:12px; }
  .score-submit-form{ margin-top:18px; }
  .score-submit-form label{ display:block; margin-bottom:6px; color:var(--color-result-green); font:700 12px/1 var(--font-numeric); letter-spacing:.04em; text-transform:uppercase; }
  .player-name-help{ margin:0 0 10px; color:var(--color-ink-2); font:600 11px/1.35 var(--font-body); text-align:center; }
  .score-submit-form > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .score-submit-form input{ min-width:0; height:48px; border:2px solid var(--color-result-gold); border-radius:14px; padding:0 12px; background:var(--color-result-white); color:var(--color-result-ink); font:700 16px/1 var(--font-numeric); text-transform:uppercase; }
  .score-submit-form input:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; }
  .score-submit-form .gameBtn{ min-height:48px; padding-inline:15px; font-size:14px; }
  .player-recover-form[hidden],.recovery-code-panel[hidden]{ display:none; }
  .player-link-action{ width:100%; margin-top:8px; }
  .recovery-code-panel{ margin-top:18px; text-align:center; }
  .recovery-code-panel p{ margin:0 0 12px; color:var(--color-ink-2); font:700 13px/1.35 var(--font-numeric); }
  .recovery-code-panel output{
    display:block; margin-bottom:12px; padding:14px 8px; border:2px dashed var(--color-result-gold); border-radius:14px;
    background:var(--color-result-white); color:var(--color-result-ink); font:700 clamp(18px,5vw,24px)/1 var(--font-numeric); letter-spacing:.08em;
  }
  .recovery-code-panel > div{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .recovery-code-panel small{ display:block; margin-top:10px; color:var(--color-ink-2); font-size:11px; }
  .recovery-code-panel .gameBtn{ min-height:44px; padding:7px 9px; font-family:var(--font-numeric); font-size:clamp(11px,3.3vw,14px); font-weight:700; letter-spacing:.025em; }
  .recovery-code-panel .player-link-action{ margin-top:6px; }

  #countdownNum{
    position:absolute; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-numeric); font-size:clamp(84px, 34vw, 150px); font-weight:700; color:var(--color-gold);
    text-shadow:0 0 40px rgba(240,200,96,.8);
    opacity:0; pointer-events:none;
  }
  #countdownNum.final-second{
    color:#ff3b45;
    text-shadow:0 0 12px rgba(255,30,55,.95),0 0 34px rgba(255,30,55,.72),0 4px 10px rgba(0,0,0,.75);
    animation:finalSecond .52s var(--ease-out) both;
  }
  @keyframes finalSecond{ 0%{transform:scale(.7);opacity:0} 22%{transform:scale(1.06);opacity:1} 100%{transform:scale(1);opacity:0} }

  #playHint{
    /* sits just above the resting mooncake at the spawn point (y = 95% of
       stage height), so it reads as pointing at the thing you swipe */
    position:absolute; bottom:20%; left:50%; transform:translate(-50%,0);
    width:min(72%, 320px); z-index:12; text-align:center;
    pointer-events:none;
    transition:opacity var(--dur-short) var(--ease-out);
  }
  #spawnHint{
    display:block; width:100%; height:auto;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));
    animation:pulseHint 1.8s ease-in-out infinite;
  }
  .keyboardHint{ display:block; margin-top:4px; color:var(--color-paper); font-size:12px; font-weight:800; text-shadow:0 2px 5px var(--color-ink); }
  @keyframes pulseHint{ 0%,100%{opacity:.55;} 50%{opacity:1;} }
  /* Must cancel the animation, not just set opacity: a running animation
     outranks an inline style in the cascade, so the old
     `spawnHint.style.opacity='0'` never actually hid this. */
  #playHint.is-hidden{ opacity:0; }
  #playHint.is-hidden #spawnHint{ animation:none; }

  /* Feedback for the Share button on browsers without the Web Share API,
     where it previously appeared to do nothing. */
  #shareToast{
    position:absolute; left:50%; bottom:8%; transform:translate(-50%, 8px);
    z-index:60; pointer-events:none;
    max-width:80%; text-align:center;
    padding:10px 18px; border-radius:999px;
    background:rgba(18,12,10,.92); color:#fff;
    font-size:14px; line-height:1.3;
    box-shadow:0 6px 24px rgba(0,0,0,.45);
    opacity:0; transition:opacity .2s ease, transform .2s cubic-bezier(0,0,.2,1);
  }
  #shareToast.show{ opacity:1; transform:translate(-50%, 0); }

  .security-check{
    position:absolute; inset:0; z-index:100; display:grid; place-items:center; padding:24px;
    background:rgba(20,7,5,.72); backdrop-filter:blur(5px);
  }
  .security-check[hidden]{ display:none; }
  .security-check-card{
    width:min(100%,360px); padding:28px 22px; border:7px double var(--color-result-gold);
    border-radius:24px; background:var(--color-result-paper); color:var(--color-result-ink); text-align:center;
    box-shadow:var(--shadow-result);
  }
  .security-check-card h2{ margin:0 0 10px; font:700 25px/1.1 var(--font-numeric); text-transform:uppercase; }
  .security-check-card p{ margin:0 0 18px; color:var(--color-ink-2); font:700 13px/1.45 var(--font-body); }
  #turnstileMount{ min-height:65px; display:grid; place-items:center; }

  .asset-recovery-overlay{
    position:absolute; inset:0; z-index:120; display:grid; place-items:center; padding:24px;
    background:rgba(12,5,4,.62); backdrop-filter:blur(3px);
  }
  .asset-recovery-overlay[hidden]{ display:none; }
  .asset-recovery-card{
    width:min(100%,330px); padding:24px 22px; text-align:center;
    border:6px double var(--color-result-gold); border-radius:22px;
    background:var(--color-result-paper); color:var(--color-result-ink);
    box-shadow:var(--shadow-result);
  }
  .asset-recovery-card h2{ margin:12px 0 6px; font:700 20px/1.15 var(--font-numeric); text-transform:uppercase; }
  .asset-recovery-card p{ margin:0; color:var(--color-ink-2); font:700 13px/1.4 var(--font-body); }
  .asset-recovery-card .gameBtn{ width:100%; margin-top:16px; min-height:48px; }
  .asset-recovery-spinner{
    width:34px; height:34px; margin:auto; border:4px solid rgba(158,46,34,.18);
    border-top-color:var(--color-result-red); border-radius:50%; animation:assetRecoverySpin .75s linear infinite;
  }
  .asset-recovery-overlay.is-failed .asset-recovery-spinner{ display:none; }
  @keyframes assetRecoverySpin{ to{ transform:rotate(1turn); } }

  @media (pointer:coarse){ .keyboardHint{ display:none; } }
  @media (max-width:360px){
    #hud{ right:104px; padding-left:6px; }
    .iconBtn{ width:40px; min-width:40px; min-height:40px; }
    #helpBtn{ right:56px; }
    .result-card{ padding:18px 13px 16px; border-width:7px; border-radius:30px; }
    .result-illustration{ height:94px; }
    .result-name-form{ margin-inline:var(--space-xs); }
    .leaderboard-overlay{ padding:8px; }
    .leaderboard-card{ padding-inline:12px; border-width:6px; }
  }
  @media (max-width:360px) and (max-height:740px){
    .leaderboard-card{ padding-block:var(--space-sm) var(--space-xs); }
    .leaderboard-card h2{ margin-top:0; font-size:28px; }
    .leaderboard-list li{ min-height:34px; padding-block:0; }
    .leaderboard-list li.rank-1{ min-height:44px; }
    .player-position{ margin-top:var(--space-2xs); padding:var(--space-2xs) var(--space-xs); }
    .player-position__head strong{ font-size:32px; }
    .player-position__score{ font-size:23px; }
  }
  @media (max-height:680px){
    .result-card{ margin-top:0; padding-block:14px 12px; }
    .result-kicker{ font-size:16px; }
    .result-score-stage{ margin-top:6px; }
    .result-score small{ margin-top:7px; }
    .result-competitive{ margin-bottom:5px; }
    .result-divider{ margin:0 0 3px; }
    .result-stats dd{ margin-top:2px; }
    .result-illustration{ height:82px; }
    .result-character-composite{ left:3%; bottom:-17px; width:94%; }
    .result-actions{ gap:var(--space-3xs); margin-top:-5px; }
    .result-secondary-actions{ gap:var(--space-3xs); }
    .result-secondary-actions .gameBtn{ min-height:42px; }
    .result-name-form{ min-height:104px; margin-top:var(--space-2xs); padding:var(--space-2xs) var(--space-3xs) var(--space-3xs); }
    .result-name-form p{ margin:2px 0 var(--space-3xs); }
    .result-name-form output{ min-height:1em; margin-top:2px; }
    .start-shell{ transform:translateY(-1%); }
    #startOverlay .start-leaderboard-btn{ min-height:44px; margin-top:6px; }
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    #spawnHint{ animation:none; opacity:.9; }
    .fx-eclipse.show{ filter:none; }
    #tierBanner.eclipse-building .fx-eclipse::after{ opacity:0; }
    #stage.eclipse-rumble,#stage.eclipse-hit-rumble,#stage.eclipse-final-rumble{ animation:none; transform:none; }
    #stage.total-eclipse::after,#stage.total-eclipse #vignette{ animation:none; }
    .result-competitive.is-streak{ animation:none; opacity:1; filter:none; }
    .result-character-composite{ transition-duration:.01ms; transform:none; }
    .result-tier,.result-tier.show{ animation:none; opacity:1; transform:translate(-3px,-50%) rotate(-9deg); }
    .tier-badge-glare::after,.gameBtn--judge::before{ animation:none; }
    .judging-change-wrap,.judging-change,.judging-rabbit,.judging-status{ animation:none !important; opacity:1; transform:none; }
    .judging-change{ transform:translateX(-50%); }
  }