/* ===========================================================
     Three-point contest, 90s streetball UI: red, white, blue,
     gold, hard black outlines, sticker shadows, no soft glass.
     =========================================================== */
  :root{
    --ink:#fff7e6;
    --red:#e8112d;
    --red-d:#9c0a1c;
    --navy:#16356e;
    --navy-d:#0b1d40;
    --gold:#ffc21a;
    --gold-d:#b87c00;
    --cream:#fff3d6;
    --green:#38d66f;
    --green-d:#0f7a3a;
    --miss:rgba(255,247,230,0.26);
    --line:#0d0d12;
    --pill:rgba(12,14,24,0.72);
    --card:#fff3d6;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  html{scroll-padding-top:env(safe-area-inset-top,0px)}
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    background:#1a1611; overflow:hidden; color:var(--ink);
    font-family:"Arial Black","Arial Bold",Arial,Helvetica,sans-serif;
    -webkit-user-select:none; user-select:none; -webkit-text-size-adjust:100%;
  }
  /* no CSS filter: saturation, contrast and vignette now live in the post composite */
  canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
  #vig{position:fixed;inset:0;pointer-events:none;background:none}

  /* display type: Impact first, it ships on Windows and macOS */
  .disp,#score,.card h1,.big,.card button,.pop,#spot,.bar .lbl,#rate{
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;
    text-transform:uppercase;letter-spacing:0.02em;font-weight:400;
  }

  /* ---------------- top scoreboard ---------------- */
  #top{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;opacity:0;transition:opacity .4s}
  #top.on{opacity:1}
  #scorebox{position:relative;display:flex;align-items:center;gap:16px;
    background:var(--navy-d);border:3px solid var(--line);border-radius:6px;padding:7px 20px 9px;
    box-shadow:0 5px 0 var(--line),0 12px 24px rgba(0,0,0,0.45);
    background-image:repeating-linear-gradient(135deg,rgba(255,255,255,0.07) 0 8px,rgba(255,255,255,0) 8px 16px)}
  #scorebox::before,#scorebox::after{content:"";position:absolute;top:-3px;bottom:-3px;width:10px;border:3px solid var(--line)}
  #scorebox::before{left:-13px;background:var(--red)}
  #scorebox::after{right:-13px;background:var(--red)}
  #score{font-size:44px;line-height:1;min-width:1.3em;text-align:center;color:var(--gold);
    transform:skewX(-8deg);text-shadow:3px 0 0 var(--red),4px 4px 0 var(--line)}
  #racks{display:flex;gap:7px}
  .rack{display:flex;gap:3px;padding:4px 4px;border:2px solid transparent;border-radius:4px}
  .rack.cur{border-color:var(--gold);background:rgba(255,194,26,0.16)}
  .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);transition:all .2s}
  .dot.money{border-color:var(--gold)}
  .dot.make{background:var(--red);border-color:var(--ink)}
  .dot.money.make{background:var(--gold);border-color:var(--gold)}
  .dot.miss{background:var(--miss);border-color:transparent}
  .dot.now{transform:scale(1.3);box-shadow:0 0 0 3px rgba(255,194,26,0.45)}
  #spot{font-size:15px;color:var(--cream);letter-spacing:0.06em;
    background:var(--red);border:2px solid var(--line);border-radius:4px;padding:2px 12px 3px;
    box-shadow:0 3px 0 var(--line);transform:skewX(-8deg)}

  /* ---------------- reticle ---------------- */
  #reticle{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
    border:3px solid var(--cream);box-shadow:0 0 0 2px var(--line),0 0 16px rgba(255,194,26,0.4);
    pointer-events:none;opacity:0;transition:opacity .2s,border-color .12s}
  #reticle::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;
    background:var(--red);box-shadow:0 0 0 2px var(--line)}
  #reticle.on{opacity:1}
  #reticle.lock{border-color:var(--gold);box-shadow:0 0 0 2px var(--line),0 0 22px rgba(255,194,26,0.85)}

  /* ---------------- meters ---------------- */
  .bar{position:fixed;background:var(--navy-d);border:3px solid var(--line);border-radius:5px;pointer-events:none;
    opacity:0;transition:opacity .2s;box-shadow:0 4px 0 var(--line),0 10px 22px rgba(0,0,0,0.4);
    background-image:repeating-linear-gradient(135deg,rgba(255,255,255,0.08) 0 7px,rgba(255,255,255,0) 7px 14px)}
  .bar.on{opacity:1}
  /* the IN band is drawn as its own odds: solid core, linear fade to nothing at the edges */
  .bar .zone{position:absolute;border-radius:2px;
    box-shadow:0 0 14px rgba(56,214,111,0.45);transition:left .25s,width .25s,bottom .25s,height .25s}
  .bar.tired .zone{box-shadow:0 0 14px rgba(255,194,26,0.5)}
  #hbar .zone{background:linear-gradient(90deg,rgba(56,214,111,0) 0%,rgba(56,214,111,1) 41%,
    rgba(56,214,111,1) 59%,rgba(56,214,111,0) 100%)}
  #vbar .zone{background:linear-gradient(0deg,rgba(56,214,111,0) 0%,rgba(56,214,111,1) 41%,
    rgba(56,214,111,1) 59%,rgba(56,214,111,0) 100%)}
  #hbar.tired .zone{background:linear-gradient(90deg,rgba(255,194,26,0) 0%,rgba(255,194,26,1) 41%,
    rgba(255,194,26,1) 59%,rgba(255,194,26,0) 100%)}
  #vbar.tired .zone{background:linear-gradient(0deg,rgba(255,194,26,0) 0%,rgba(255,194,26,1) 41%,
    rgba(255,194,26,1) 59%,rgba(255,194,26,0) 100%)}
  .bar .mid{position:absolute;background:var(--cream)}
  .bar .mark{position:absolute;border-radius:2px;background:var(--cream);border:2px solid var(--line)}
  .bar .mark.lock{background:var(--red)}
  .bar .lbl{position:absolute;font-size:15px;color:var(--cream);white-space:nowrap;transform:skewX(-8deg);
    text-shadow:2px 2px 0 var(--line)}
  .bar.active .lbl{color:var(--gold)}
  #hbar{left:50%;bottom:calc(40px + env(safe-area-inset-bottom,0px));width:min(460px,80vw);height:22px;transform:translateX(-50%)}
  #hbar .zone{top:2px;bottom:2px}
  #hbar .mid{top:-5px;bottom:-5px;left:50%;width:3px;margin-left:-1.5px}
  #hbar .mark{top:-8px;width:11px;height:35px;margin-left:-5.5px}
  #hbar .lbl{left:0;top:-26px}
  #vbar{right:calc(30px + env(safe-area-inset-right,0px));top:50%;width:22px;height:264px;margin-top:-132px}
  #vbar .zone{left:2px;right:2px}
  #vbar .mid{left:-5px;right:-5px;top:50%;height:3px;margin-top:-1.5px}
  #vbar .mark{left:-8px;width:35px;height:11px;margin-bottom:-5.5px}
  #vbar .lbl{right:0;bottom:-26px}
  #rate{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) skewX(-8deg);
    font-size:19px;white-space:nowrap;color:var(--cream);text-shadow:3px 3px 0 var(--line);
    opacity:0;transition:opacity .25s;pointer-events:none}
  #rate.on{opacity:1}
  #rate.warn{color:var(--red);text-shadow:3px 3px 0 var(--line),0 0 18px rgba(232,17,45,0.5)}
  #rate b{color:var(--gold);font-weight:400}

  /* ---------------- score pops ---------------- */
  #pops{position:fixed;left:0;right:0;top:28%;display:flex;justify-content:center;pointer-events:none}
  .pop{position:absolute;font-size:68px;color:var(--gold);white-space:nowrap;transform-origin:50% 50%;
    -webkit-text-stroke:3px var(--line);
    text-shadow:5px 5px 0 var(--red),9px 9px 0 var(--navy);
    animation:pop 1.25s cubic-bezier(.2,1.4,.4,1) forwards}
  .pop small{display:block;font-size:22px;color:var(--cream);text-align:center;margin-top:4px;
    -webkit-text-stroke:2px var(--line);text-shadow:3px 3px 0 var(--red)}
  .pop.miss{color:var(--cream);font-size:40px;text-shadow:4px 4px 0 var(--navy)}
  @keyframes pop{0%{transform:scale(.4) rotate(-10deg) translateY(10px);opacity:0}
    18%{transform:scale(1.12) rotate(-6deg);opacity:1}
    70%{transform:scale(1) rotate(-4deg) translateY(-8px);opacity:1}
    100%{transform:scale(.96) rotate(-4deg) translateY(-30px);opacity:0}}

  #hint{position:fixed;left:50%;top:calc(104px + env(safe-area-inset-top,0px));transform:translateX(-50%);
    background:var(--navy-d);border:3px solid var(--line);border-radius:5px;padding:7px 16px;font-size:14px;
    letter-spacing:0.04em;color:var(--cream);pointer-events:none;opacity:0;transition:opacity .35s;white-space:nowrap;
    box-shadow:0 4px 0 var(--line)}
  #hint.on{opacity:1}

  /* ---------------- cards ---------------- */
  .card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1.2deg);
    width:min(460px,calc(100vw - 32px));
    background:var(--card);color:var(--navy-d);border:4px solid var(--line);border-radius:8px;
    padding:0 26px 26px;text-align:center;overflow:hidden;
    box-shadow:0 10px 0 var(--line),0 26px 60px rgba(0,0,0,0.5);transition:opacity .35s,transform .35s}
  .card::before{content:"";display:block;height:16px;margin:0 -26px 20px;border-bottom:4px solid var(--line);
    background:repeating-linear-gradient(90deg,var(--red) 0 26px,var(--cream) 26px 52px,var(--navy) 52px 78px)}
  .card::after{content:"";position:absolute;left:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;
    background:var(--gold);opacity:0.18;pointer-events:none}
  .card.hide{opacity:0;pointer-events:none;transform:translate(-50%,-46%) rotate(-1.2deg)}
  .card h1{margin:0 0 10px;font-size:46px;line-height:0.94;color:var(--gold);transform:skewX(-8deg);
    -webkit-text-stroke:2px var(--line);text-shadow:4px 4px 0 var(--red),8px 8px 0 var(--navy)}
  .card p{margin:10px 0;font-size:14px;line-height:1.5;color:var(--navy-d);font-family:Arial,Helvetica,sans-serif;font-weight:bold}
  .card .how{margin:16px 0 20px;padding:12px 14px;border:3px solid var(--line);border-radius:6px;
    background:var(--navy);color:var(--cream);font-size:13.5px;line-height:1.5;
    font-family:Arial,Helvetica,sans-serif;font-weight:bold;box-shadow:0 4px 0 var(--line)}
  .big{font-size:78px;color:var(--red);line-height:1;margin:4px 0 2px;transform:skewX(-8deg);
    -webkit-text-stroke:2px var(--line);text-shadow:5px 5px 0 var(--gold)}
  .card button{font:inherit;font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-size:24px;
    text-transform:uppercase;letter-spacing:0.04em;color:var(--cream);background:var(--red);
    border:4px solid var(--line);border-radius:6px;padding:11px 30px 13px;cursor:pointer;transform:skewX(-8deg);
    box-shadow:0 6px 0 var(--line);transition:transform .08s,box-shadow .08s}
  .card button:hover{background:#ff2440}
  .card button:active{transform:skewX(-8deg) translateY(5px);box-shadow:0 1px 0 var(--line)}
  .card button:focus-visible{outline:4px solid var(--navy);outline-offset:4px}
  .best{font-size:12px;color:var(--navy);margin-top:14px;letter-spacing:0.08em;
    font-family:Arial,Helvetica,sans-serif;font-weight:bold}
  .best:not(:empty)::before{content:"\2605  "}
  .best:not(:empty)::after{content:"  \2605"}

  /* ---------------- build 23k: chips, golden state, result card ---------------- */
  #chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:22px}
  .chip{font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;text-transform:uppercase;
    font-size:13px;letter-spacing:0.05em;color:var(--cream);background:var(--navy);border:2px solid var(--line);
    border-radius:4px;padding:1px 9px 2px;box-shadow:0 3px 0 var(--line);transform:skewX(-8deg);transition:opacity .25s}
  .chip.off{display:none}
  .chip.gold{background:var(--gold);color:var(--navy-d);animation:chipPulse .9s ease-in-out infinite alternate}
  .chip.flat{background:var(--red)}
  #chipFast{background:var(--cream);color:var(--navy-d)}
  @keyframes chipPulse{from{box-shadow:0 3px 0 var(--line),0 0 0 rgba(255,194,26,0)}to{box-shadow:0 3px 0 var(--line),0 0 16px rgba(255,194,26,0.9)}}
  .dot.hot{background:var(--gold);border-color:#fff;box-shadow:0 0 8px rgba(255,194,26,0.9)}
  /* golden: meters glow, the screen edge breathes gold */
  body.golden .bar{border-color:var(--gold-d);animation:barGlow .9s ease-in-out infinite alternate}
  @keyframes barGlow{from{box-shadow:0 4px 0 var(--line),0 0 8px rgba(255,194,26,0.35)}
    to{box-shadow:0 4px 0 var(--line),0 0 28px rgba(255,194,26,0.95)}}
  body.golden #vig{animation:heatEdge 1.75s ease-in-out infinite}
  @keyframes heatEdge{0%,100%{box-shadow:inset 0 0 90px rgba(255,194,26,0.18)}50%{box-shadow:inset 0 0 160px rgba(255,170,20,0.42)}}
  #vig.flash::after{content:"";position:absolute;inset:0;animation:heatFlash .9s ease-out forwards;
    background:radial-gradient(ellipse at center,rgba(255,220,120,0) 30%,rgba(255,194,26,0.75) 100%)}
  @keyframes heatFlash{0%{opacity:1}100%{opacity:0}}
  /* quick release timer: thin orange strip on top of the aim bar, drains over FAST_T from the aim marker starting */
  #hbar .fast{position:absolute;left:-3px;right:-3px;top:-14px;height:8px;background:rgba(12,14,24,0.8);
    border:2px solid var(--line);border-radius:3px;overflow:hidden}
  #hbar .fast i{display:block;height:100%;width:100%;background:#ff8a1a;transform-origin:0 50%;
    box-shadow:inset 0 1px 0 rgba(255,220,160,0.7)}
  #hbar .fast.out i{background:#5a4c40;box-shadow:none}
  #hbar .ftxt{position:absolute;right:0;top:-34px;font-size:14px;color:#ff8a1a;white-space:nowrap;transform:skewX(-8deg);
    text-shadow:2px 2px 0 var(--line);font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;
    text-transform:uppercase;letter-spacing:0.04em;font-variant-numeric:tabular-nums}
  #hbar .ftxt.out{color:rgba(255,247,230,0.45)}
  #hbar .lbl{top:-36px}
  /* quick release: the green gets a cream outline so the wider band is obvious */
  .bar.wide .zone{box-shadow:0 0 0 2px var(--cream),0 0 16px rgba(255,243,214,0.7)}
  .card .daily{margin:0 0 8px;font-size:13px;letter-spacing:0.08em;color:var(--red);transform:skewX(-8deg);
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;text-transform:uppercase}
  .card .how ul{margin:8px 0 0;padding:0 0 0 18px;text-align:left}
  .card .how li{margin:4px 0}
  .card .how li b{color:var(--gold);font-weight:bold}
  .tier{display:inline-block;margin:6px 0 12px;padding:3px 16px 5px;font-size:26px;color:var(--cream);background:var(--navy);
    border:3px solid var(--line);border-radius:5px;box-shadow:0 4px 0 var(--line);transform:skewX(-8deg);
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;text-transform:uppercase;letter-spacing:0.04em}
  .tier.t-solid{background:#2a6fb8}
  .tier.t-great{background:var(--red)}
  .tier.t-elite{background:var(--gold);color:var(--navy-d)}
  .tier.t-legendary{background:linear-gradient(90deg,var(--red),var(--gold),var(--red));color:var(--cream);
    -webkit-text-stroke:1px var(--line);animation:chipPulse .9s ease-in-out infinite alternate}
  .stats{display:flex;gap:8px;justify-content:center;margin:0 0 18px}
  .stats div{flex:1;background:var(--navy-d);color:var(--cream);border:3px solid var(--line);border-radius:5px;
    padding:6px 4px 7px;box-shadow:0 3px 0 var(--line)}
  .stats b{display:block;font-size:26px;line-height:1.1;color:var(--gold);font-weight:400;
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif}
  .stats span{display:block;font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;font-weight:bold}

  /* ---------------- lighting panel and errors ---------------- */
  #lp{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));top:calc(14px + env(safe-area-inset-top,0px));width:236px;
    max-height:calc(100vh - 40px);overflow-y:auto;
    background:var(--navy-d);border:3px solid var(--line);border-radius:6px;padding:12px 14px 10px;font-size:12px;
    font-family:Arial,Helvetica,sans-serif;box-shadow:0 5px 0 var(--line);-webkit-user-select:text;user-select:text}
  #lp.hide{display:none}
  #lp .t{display:flex;justify-content:space-between;font-weight:bold;margin-bottom:6px;color:var(--gold);
    text-transform:uppercase;letter-spacing:0.06em}
  #lp .t span{font-weight:normal;color:rgba(255,247,230,0.7);font-size:11px}
  #lp label{display:flex;justify-content:space-between;color:rgba(255,247,230,0.78);margin-top:7px}
  #lp label b{color:var(--cream);font-variant-numeric:tabular-nums}
  #lp input{width:100%;accent-color:var(--gold);margin:2px 0 0}
  #lp button{display:block;width:100%;margin:8px 0 4px;font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;
    font-size:15px;text-transform:uppercase;letter-spacing:0.04em;color:var(--cream);background:var(--red);
    border:2px solid var(--line);border-radius:4px;padding:5px 8px;cursor:pointer;box-shadow:0 3px 0 var(--line)}
  #lp button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
  #err{position:fixed;left:16px;right:16px;bottom:16px;max-width:460px;margin:auto;padding:12px 14px;
    background:var(--gold);color:var(--navy-d);border:3px solid var(--line);border-radius:6px;
    font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:14px;display:none}

  @media (max-width:560px){
    #score{font-size:34px} .dot{width:7px;height:7px} #racks{gap:4px} .rack{gap:2px;padding:3px 3px}
    .pop{font-size:48px} #hint{font-size:12px} #vbar{height:200px;margin-top:-100px}
    .card h1{font-size:34px} .big{font-size:58px}
  }
  @media (prefers-reduced-motion:reduce){ .pop{animation-duration:.01s} }

  /* =========================================================================================
     25a: front end (Roblox sync). A 1280 x 720 stage scaled to the window by menu.js.
     ========================================================================================= */
  #menu{position:fixed;inset:0;z-index:20;
    background:linear-gradient(180deg,rgba(6,10,24,0.55) 0%,rgba(6,10,24,0.25) 40%,rgba(6,10,24,0.78) 100%)}
  #menu.hide{display:none}
  #menu .stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:50% 50%}
  .mscreen{position:absolute;inset:0}
  .mscreen.hide{display:none}
  .disp2,.mbtn,.mhead,.logo,.datepill,.racktile .rn,.rt,.pill,.board .bt,.stamp,.wallet,.stab,.scard .nm,.otab,.otog,.mdaily,.shoothint{
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;text-transform:uppercase;letter-spacing:0.03em;font-weight:400}

  /* buttons: grow about 7%, gold edge, pointer, on hover and keyboard focus */
  .mbtn{position:relative;display:block;margin:0 auto;border:4px solid var(--line);border-radius:8px;color:var(--cream);
    font-size:30px;padding:8px 0 10px;width:300px;cursor:pointer;transform:skewX(-8deg);
    box-shadow:0 6px 0 var(--line),0 14px 24px rgba(0,0,0,0.35);transition:transform .12s,border-color .12s,box-shadow .12s}
  .mbtn.red{background:var(--red)} .mbtn.navy{background:var(--navy)}
  .mbtn.big{width:360px;font-size:42px;padding:8px 0 12px}
  .mbtn .ptr{position:absolute;left:-44px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:28px;opacity:0;transition:opacity .12s;
    text-shadow:2px 2px 0 var(--line)}
  .mbtn .tx{text-shadow:3px 3px 0 var(--line)}
  .mbtn:hover,.mbtn.focus{transform:skewX(-8deg) scale(1.07);border-color:var(--gold);box-shadow:0 6px 0 var(--line),0 0 0 3px var(--gold),0 14px 28px rgba(0,0,0,0.4)}
  .mbtn:hover .ptr,.mbtn.focus .ptr{opacity:1}
  .mbtn:active{transform:skewX(-8deg) scale(1.03) translateY(4px);box-shadow:0 2px 0 var(--line)}
  .mbtn:focus-visible{outline:none}
  .mbtn.small{width:150px;font-size:22px;padding:4px 0 6px}
  .mbtn.back{position:absolute;left:40px;top:34px;background:var(--navy-d)}
  .mhead{position:absolute;left:0;right:0;top:34px;text-align:center;font-size:62px;transform:skewX(-8deg);
    -webkit-text-stroke:2px var(--line);text-shadow:4px 4px 0 var(--red),8px 8px 0 var(--navy)}
  .mhead.gold{color:var(--gold)} .mhead.cream{color:var(--cream)}

  /* title */
  .logo{position:absolute;left:50%;top:40px;width:900px;height:340px;margin-left:-450px;transform:rotate(-3deg);
    animation:logoBob 4.5s ease-in-out infinite}
  @keyframes logoBob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1.6deg) translateY(-8px)}}
  .logo .rays{position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;
    background:repeating-conic-gradient(rgba(255,194,26,0.20) 0deg 7deg,rgba(255,194,26,0) 7deg 18deg);
    -webkit-mask:radial-gradient(circle,#000 18%,rgba(0,0,0,0) 62%);mask:radial-gradient(circle,#000 18%,rgba(0,0,0,0) 62%);
    animation:rays 60s linear infinite;pointer-events:none}
  @keyframes rays{to{transform:rotate(360deg)}}
  .logo .ribbon{position:absolute;left:50%;top:6px;width:380px;margin-left:-190px;text-align:center;background:var(--red);color:var(--cream);
    border:3px solid var(--line);border-radius:4px;font-size:26px;padding:2px 0 4px;transform:rotate(2deg);box-shadow:0 4px 0 var(--line);
    text-shadow:2px 2px 0 var(--line)}
  .logo .l1{position:absolute;left:0;right:80px;top:48px;text-align:center;font-size:118px;line-height:1;color:var(--cream);transform:skewX(-8deg);
    -webkit-text-stroke:4px var(--line);text-shadow:5px 5px 0 var(--red),10px 10px 0 #071430}
  .logo .l2{position:absolute;left:0;right:0;top:152px;text-align:center;font-size:172px;line-height:1;color:var(--gold);transform:skewX(-8deg);
    -webkit-text-stroke:5px var(--line);text-shadow:6px 6px 0 var(--red),12px 12px 0 #071430}
  .logo .lball{position:absolute;right:-78px;top:14px;width:120px;height:120px}
  .logo .lball .spin{position:absolute;right:0;top:0;animation:spin 1.6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .logo .lball i{position:absolute;right:92px;height:8px;background:var(--cream);border:2px solid var(--line);border-radius:6px;transform:rotate(-18deg)}
  .logo .lball i:nth-child(1){top:26px;width:74px} .logo .lball i:nth-child(2){top:48px;width:96px;right:96px} .logo .lball i:nth-child(3){top:70px;width:66px;right:92px}
  .mnav{position:absolute;left:0;right:0;top:436px;display:flex;flex-direction:column;gap:18px;align-items:center}
  .mdaily{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:20px;color:var(--cream);text-shadow:2px 2px 0 var(--line)}
  .mbuild{position:absolute;right:18px;bottom:16px;font:12px Arial,Helvetica,sans-serif;color:rgba(255,247,230,0.5)}

  /* daily challenge */
  .datepill{position:absolute;left:50%;top:116px;width:280px;margin-left:-140px;text-align:center;background:var(--red);color:var(--cream);
    border:3px solid var(--line);border-radius:18px;font-size:22px;padding:1px 0 3px;text-shadow:2px 2px 0 var(--line)}
  .racks{position:absolute;left:0;right:0;top:162px;display:flex;justify-content:center;gap:14px}
  .racktile{width:196px;height:76px;background:rgba(11,29,64,0.92);border:3px solid var(--line);border-radius:9px;box-shadow:0 4px 0 var(--line);text-align:center}
  .racktile .rn{font-size:17px;color:var(--cream);padding-top:4px}
  .racktile .rballs{display:flex;justify-content:center;align-items:center;gap:6px;height:40px}
  .rules{position:absolute;left:0;right:0;top:256px;display:flex;justify-content:center;gap:18px}
  .ruletile{width:224px;height:156px;background:var(--cream);color:var(--navy-d);border:4px solid var(--line);border-radius:10px;
    box-shadow:0 6px 0 var(--line);text-align:center;position:relative;overflow:hidden}
  .ruletile .icw{height:84px;display:flex;align-items:center;justify-content:center}
  .ruletile .rt{font-size:24px;color:var(--red);line-height:1}
  .ruletile .rl{font:bold 13px Arial,Helvetica,sans-serif;margin-top:5px;padding:0 10px}
  .ic{position:relative;display:flex;align-items:center;justify-content:center}
  .ic.money b{position:absolute;font:40px Impact,Haettenschweiler,"Arial Black",sans-serif;color:var(--cream);-webkit-text-stroke:2px var(--line)}
  .ic.streak svg{margin:0 -5px} .ic.streak .gold svg{margin-left:4px;filter:drop-shadow(0 0 6px rgba(255,194,26,0.9))}
  .ic.watch{width:64px;height:64px;border-radius:50%;background:var(--cream);border:5px solid var(--line);box-shadow:0 0 0 4px #ff8a1a}
  .ic.watch i{position:absolute;left:50%;top:10px;width:4px;height:22px;margin-left:-2px;background:var(--red)}
  .ic.watch b{position:absolute;left:50%;top:30px;width:18px;height:4px;background:var(--line)}
  .ic.watch u{position:absolute;left:50%;top:-16px;width:14px;height:9px;margin-left:-7px;background:var(--line);border-radius:2px}
  .ic.key{font:26px Impact,Haettenschweiler,"Arial Black",sans-serif;color:var(--line);background:var(--cream);border:4px solid var(--line);
    border-radius:10px;padding:4px 16px 6px;box-shadow:0 6px 0 var(--line)}
  .pills{position:absolute;left:0;right:0;top:436px;display:flex;justify-content:center;gap:14px}
  .pill{width:250px;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--cream);
    border:3px solid var(--line);border-radius:19px;color:var(--navy);font-size:19px}
  .pill b{color:var(--red);font-size:24px;font-weight:400}
  .boards{position:absolute;left:0;right:0;top:490px;display:flex;justify-content:center;gap:24px}
  .board{width:410px;background:rgba(11,29,64,0.92);border:3px solid var(--line);border-radius:10px;box-shadow:0 5px 0 var(--line);padding:6px 14px 8px}
  .board .bt{color:var(--gold);font-size:22px;text-align:center;text-shadow:2px 2px 0 var(--line)}
  .brow{display:flex;align-items:center;gap:10px;height:25px;font:bold 14px Arial,Helvetica,sans-serif;color:var(--cream)}
  .brow span{flex:1} .brow b{font:22px Impact,Haettenschweiler,"Arial Black",sans-serif;color:var(--gold)}
  .brow .rk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);font:13px Impact,Haettenschweiler,sans-serif;font-style:normal;
    display:flex;align-items:center;justify-content:center;color:var(--line);background:#8b95a8}
  .brow .rk.r1{background:var(--gold)} .brow .rk.r2{background:#d4dbe6} .brow .rk.r3{background:#d08a4a}
  .brow.empty .rk{opacity:0.25} .brow.empty span{font-style:italic;color:rgba(255,247,230,0.6)}
  .bnote{position:absolute;left:0;right:0;top:686px;text-align:center;font:12px Arial,Helvetica,sans-serif;color:rgba(255,247,230,0.6)}
  .mbtn.shoot{position:absolute;right:48px;bottom:44px;width:250px;font-size:44px;margin:0;animation:shootPulse 1s ease-in-out infinite}
  @keyframes shootPulse{0%,100%{box-shadow:0 6px 0 var(--line),0 0 0 0 rgba(255,194,26,0.0)}50%{box-shadow:0 6px 0 var(--line),0 0 0 8px rgba(255,194,26,0.55)}}
  .shoothint{position:absolute;right:48px;bottom:14px;width:250px;text-align:center;font-size:14px;color:var(--cream)}

  /* shop placeholder */
  .stamp{position:absolute;right:120px;top:40px;font-size:30px;color:var(--red);border:5px solid var(--red);border-radius:8px;padding:2px 14px;
    transform:rotate(12deg);background:rgba(255,243,214,0.9);box-shadow:0 0 0 3px var(--line)}
  .wallet{position:absolute;right:48px;top:122px;display:flex;align-items:center;gap:8px;font-size:28px;color:var(--gold);
    background:var(--navy-d);border:3px solid var(--line);border-radius:20px;padding:2px 16px 4px 6px}
  .wallet i,.price i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--gold);
    border:2px solid var(--line);color:var(--gold-d);font:16px Impact,sans-serif;font-style:normal}
  .shoptabs{position:absolute;left:0;right:0;top:128px;display:flex;justify-content:center;gap:10px}
  .stab,.otab{border:3px solid var(--line);border-radius:6px;background:var(--navy-d);color:rgba(255,247,230,0.8);font-size:22px;padding:4px 18px 6px;cursor:pointer;
    box-shadow:0 4px 0 var(--line)}
  .stab.on,.otab.on{background:var(--gold);color:var(--navy-d)}
  .shopgrid{position:absolute;left:90px;right:90px;top:190px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .scard{position:relative;height:222px;background:var(--cream);border:4px solid var(--line);border-radius:10px;box-shadow:0 6px 0 var(--line);overflow:hidden;text-align:center}
  .scard .prev{height:124px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#fff 0%,#e9dcc0 75%)}
  .scard .nm{font-size:22px;color:var(--navy-d);margin-top:6px}
  .scard .foot{display:flex;justify-content:space-between;align-items:center;padding:6px 12px}
  .scard .rar{font:bold 11px Arial,Helvetica,sans-serif;color:#fff;padding:3px 8px;border-radius:10px;border:2px solid var(--line);letter-spacing:0.06em}
  .scard.common .rar{background:#8b95a8} .scard.rare .rar{background:#2f6fe0} .scard.epic .rar{background:#8a3be0} .scard.legendary .rar{background:var(--gold);color:var(--navy-d)}
  .scard.legendary{border-color:var(--gold-d)}
  .scard .price{display:flex;align-items:center;gap:5px;font:20px Impact,Haettenschweiler,"Arial Black",sans-serif;color:var(--navy-d)}
  .scard .price i{width:20px;height:20px;font-size:12px}
  .scard .eq{font:15px Impact,Haettenschweiler,sans-serif;color:#fff;background:#1f9d55;border:2px solid var(--line);border-radius:5px;padding:1px 8px}
  .scard .lock{position:absolute;left:10px;top:10px;font:13px Impact,Haettenschweiler,sans-serif;color:var(--cream);background:rgba(13,13,18,0.75);
    border-radius:4px;padding:2px 8px}
  .scard:not(.owned) .prev{filter:saturate(0.8)}

  /* options */
  .oside{position:absolute;left:110px;top:150px;width:230px;display:flex;flex-direction:column;gap:12px}
  .otab{text-align:left;font-size:26px;padding:6px 18px 8px}
  .opanel{position:absolute;left:380px;top:150px;width:790px;height:500px;background:rgba(11,29,64,0.94);border:4px solid var(--line);border-radius:12px;
    box-shadow:0 8px 0 var(--line);padding:24px 34px;overflow:auto}
  .orow{display:flex;align-items:center;gap:18px;min-height:52px;color:var(--cream);font:24px Impact,Haettenschweiler,"Arial Black",sans-serif;text-transform:uppercase}
  .orow>span:first-child{flex:1}
  .orow input[type=range]{width:300px;accent-color:var(--gold)}
  .orow>b{width:44px;text-align:right;color:var(--gold);font-weight:400}
  .otog{min-width:90px;font-size:20px;border:3px solid var(--line);border-radius:6px;background:var(--navy);color:rgba(255,247,230,0.8);padding:3px 14px 5px;cursor:pointer}
  .otog.on{background:var(--gold);color:var(--navy-d)}
  .oseg{display:flex;gap:8px} .oseg .otog{min-width:62px}
  .onote{font:bold 14px Arial,Helvetica,sans-serif;color:rgba(255,247,230,0.65);margin:6px 0 10px}
  .orow.ctl{font:bold 17px Arial,Helvetica,sans-serif;text-transform:none;min-height:40px}
  .orow.ctl .k{flex:0 0 220px;font:20px Impact,Haettenschweiler,sans-serif;color:var(--gold);text-transform:uppercase}

  /* cards gain a second button */
  .card .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .card button.alt{background:var(--navy)}
  .card button.alt:hover{background:#1f4690}

  /* HUD visibility switches */
  body.inmenu #top,body.inmenu #hint{opacity:0}
  body.noreticle #reticle{display:none}
  body.nohud #top,body.nohud .bar,body.nohud #reticle,body.nohud #rate,body.nohud #pops,body.nohud #hint,body.nohud #flyhint,body.nohud #pause{visibility:hidden}

  /* free camera hint */
  #flyhint{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;display:none;
    background:rgba(11,29,64,0.9);border:3px solid var(--line);border-radius:6px;padding:6px 14px;font:bold 13px Arial,Helvetica,sans-serif;color:var(--cream);white-space:nowrap}
  #flyhint.on{display:block}
  #flyhint span{color:var(--gold)}

  /* tuning panel tabs and albedo rows */
  .lptabs{display:flex;gap:6px;margin:4px 0 6px}
  .lptabs button{flex:1;margin:0!important;background:var(--navy)!important}
  .lptabs button.on{background:var(--gold)!important;color:var(--navy-d)!important}
  #lp .hide{display:none}
  #lp .alb{border-top:1px solid rgba(255,247,230,0.15);padding:6px 0 4px}
  #lp .albh{display:flex;align-items:center;gap:8px;font-weight:bold;color:var(--cream)}
  #lp .albh i{width:16px;height:16px;border:2px solid var(--line);border-radius:3px}
  #lp .albh span{flex:1} #lp .albh b{font-weight:normal;color:var(--gold);font-variant-numeric:tabular-nums}
  #lp{z-index:40}

  /* ready countdown (27a): same sticker type as the score pops */
  #countdown{position:fixed;left:0;right:0;top:30%;display:flex;justify-content:center;pointer-events:none;z-index:15}
  #countdown span{display:block;font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;font-size:160px;line-height:1;
    color:var(--gold);-webkit-text-stroke:4px var(--line);text-shadow:7px 7px 0 var(--red),13px 13px 0 var(--navy);
    animation:cdBeat .55s cubic-bezier(.2,1.4,.4,1) forwards}
  #countdown span.go{color:var(--cream);font-size:180px;animation:cdGo .42s ease-out forwards}
  @keyframes cdBeat{0%{transform:skewX(-8deg) scale(.35);opacity:0}25%{transform:skewX(-8deg) scale(1.12);opacity:1}
    75%{transform:skewX(-8deg) scale(1);opacity:1}100%{transform:skewX(-8deg) scale(.92);opacity:0}}
  @keyframes cdGo{0%{transform:skewX(-8deg) scale(.6);opacity:1}30%{transform:skewX(-8deg) scale(1.14);opacity:1}
    100%{transform:skewX(-8deg) scale(1.45);opacity:0}}
  @media (max-width:560px){ #countdown span{font-size:110px} #countdown span.go{font-size:120px} }