:root{
    --bg:#04050e; --panel:rgba(8,11,26,.85);
    --cyan:#00e8ff; --mag:#ff36d6; --lime:#b8ff2e; --gold:#ffd24a; --red:#ff3b5c;
    --txt:#e2e8ff; --dim:#7f89b0; --line:rgba(0,232,255,.16);
    --f-disp:'Audiowide','Chakra Petch',sans-serif;
    --f-body:'Chakra Petch','Segoe UI',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--txt);font-family:var(--f-body);font-size:15px;overflow-x:hidden;min-height:100vh;min-height:100dvh}
  body.ingame{overflow:hidden}
  button{font-family:var(--f-body)}
  svg.defs{position:absolute;width:0;height:0;overflow:hidden}

  /* ---------- ambient layers ---------- */
  .bg-grid{position:fixed;inset:-44px;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(0,232,255,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,232,255,.05) 1px,transparent 1px);
    background-size:44px 44px;
    animation:gridDrift 26s linear infinite;
    will-change:transform;
    mask-image:radial-gradient(90% 80% at 50% 40%,#000 30%,transparent 100%);
    -webkit-mask-image:radial-gradient(90% 80% at 50% 40%,#000 30%,transparent 100%);
  }
  @keyframes gridDrift{to{transform:translate(44px,44px)}}
  /* scanlines + vignette merged into one layer (one less full-viewport composite) */
  .bg-veil{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
      radial-gradient(120% 90% at 50% 20%,transparent 45%,rgba(2,3,10,.8) 100%)}
  #flash{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0}
  #flash.good{background:radial-gradient(60% 60% at 50% 45%,rgba(184,255,46,.17),transparent 70%);animation:fl .45s ease-out}
  #flash.bad{background:radial-gradient(70% 70% at 50% 45%,rgba(255,59,92,.22),transparent 70%);animation:fl .4s ease-out}
  @keyframes fl{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
  #fx{position:fixed;inset:0;z-index:50;pointer-events:none}

  /* ---------- screens ---------- */
  #app{position:relative;z-index:1}
  .screen{display:none}
  .screen.on{display:block;animation:scrIn .5s ease both}
  @keyframes scrIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .panel{background:var(--panel);border:1px solid var(--line);padding:18px 20px;position:relative}
  .panel::before,.panel::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--cyan)}
  .panel::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
  .panel::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
  .p-title{font-size:11px;font-weight:700;letter-spacing:.34em;color:var(--dim);margin-bottom:14px;display:flex;align-items:center;gap:10px}
  .p-title::after{content:'';flex:1;height:1px;background:var(--line)}

  /* ---------- menu ---------- */
  .ghosts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
  .ghost{position:absolute;width:84px;opacity:.1;filter:blur(1.2px) saturate(1.5);
    border:2px solid var(--c);border-radius:8px;background:linear-gradient(165deg,#0d1128,#070a18);
    animation:floaty var(--dur) ease-in-out infinite alternate;transform:rotate(var(--rot))}
  .ghost svg{width:100%;height:auto;display:block}
  @keyframes floaty{from{transform:rotate(var(--rot)) translateY(0)}to{transform:rotate(var(--rot)) translateY(-46px)}}

  .masthead{max-width:1080px;margin:0 auto;padding:34px 24px 6px;position:relative}
  .title{font-family:var(--f-disp);line-height:.92;margin:16px 0 12px}
  .title .l1{display:block;font-size:clamp(20px,3.2vw,32px);letter-spacing:.44em;color:var(--txt);text-shadow:0 0 14px rgba(0,232,255,.35)}
  .title .l2{display:block;font-size:clamp(64px,11vw,126px);letter-spacing:.05em;color:#fff;
    text-shadow:0 0 12px var(--mag),0 0 40px rgba(255,54,214,.75),0 0 90px rgba(255,54,214,.4);
    animation:flick 6s infinite}
  @keyframes flick{0%,91%,94%,97%,100%{opacity:1}92%{opacity:.6}95.5%{opacity:.75}}
  @keyframes blink{50%{opacity:0}}
  .tagline{color:var(--dim);max-width:62ch;line-height:1.55}
  .tagline b{color:var(--txt)}


  .menu-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:1080px;margin:22px auto 0;padding:0 24px}
  .how .demo{display:flex;gap:10px;align-items:center;margin-bottom:14px}
  .dc{width:58px;aspect-ratio:3/4;border:2px solid var(--c);border-radius:8px;background:linear-gradient(165deg,#0d1128,#070a18);box-shadow:0 0 10px -2px var(--c)}
  .dc svg{width:100%;height:100%;display:block}
  .set-badge{margin-left:auto;font-family:var(--f-disp);font-size:12px;color:var(--gold);letter-spacing:.2em;
    border:1px solid rgba(255,210,74,.5);padding:7px 10px;text-shadow:0 0 12px rgba(255,210,74,.6)}
  ul.lines{list-style:none}
  ul.lines li{padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.07);color:var(--dim);font-size:13px;line-height:1.55}
  ul.lines li b{color:var(--txt);font-weight:600}
  .kc{color:var(--cyan)}.km{color:var(--mag)}.kg{color:var(--gold)}.kl{color:var(--lime)}

  .olabel{font-size:10px;letter-spacing:.3em;color:var(--dim);display:block;margin:15px 0 7px}
  .olabel:first-of-type{margin-top:0}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{font-size:12px;font-weight:600;letter-spacing:.12em;padding:9px 15px;background:transparent;
    border:1px solid rgba(0,232,255,.28);color:var(--dim);cursor:pointer;transition:all .15s;text-transform:uppercase}
  .chip:hover{color:var(--txt);border-color:var(--cyan)}
  .chip.on{background:var(--cyan);color:#031418;border-color:var(--cyan);box-shadow:0 0 16px rgba(0,232,255,.5)}
  input[type=text]{width:100%;background:#05081a;border:1px solid rgba(0,232,255,.3);color:#fff;
    font-family:var(--f-body);font-size:15px;padding:11px 12px;letter-spacing:.1em;outline:none;transition:all .15s}
  input[type=text]:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,232,255,.35)}
  .btn{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:13px;padding:13px 22px;
    background:#081020;color:var(--cyan);border:1px solid var(--cyan);cursor:pointer;transition:all .15s}
  .btn:hover{background:var(--cyan);color:#031418;box-shadow:0 0 22px rgba(0,232,255,.55)}
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.5;cursor:default;pointer-events:none}
  .btn.primary{background:var(--mag);border-color:var(--mag);color:#1c0216;box-shadow:0 0 20px rgba(255,54,214,.4)}
  .btn.primary:hover{background:#ff5fe0;color:#12000d;box-shadow:0 0 34px rgba(255,54,214,.8)}
  .btn.wide{width:100%;margin-top:18px}
  .btn.sm{padding:8px 14px;font-size:11px;letter-spacing:.14em}
  .btn.linky{background:transparent;border-color:rgba(255,255,255,.18);color:var(--dim)}
  .btn.linky:hover{background:transparent;color:var(--red);border-color:var(--red);box-shadow:none}
  .best{margin-top:13px;font-size:12px;color:var(--gold);letter-spacing:.1em;line-height:1.5}
  .best b{color:#fff}

  .menu-row2{display:grid;grid-template-columns:1.08fr 1fr;gap:18px;max-width:1080px;margin:18px auto 8px;padding:0 24px;align-items:start}
  @media(max-width:820px){.menu-row2{grid-template-columns:1fr}}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{font-size:10px;letter-spacing:.3em;color:var(--dim);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);font-weight:600}
  td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
  td.s{font-family:var(--f-disp);color:var(--gold);font-size:13px}
  tfoot td{border:0;padding-top:12px;text-align:right}
  /* endless: own heading row + running totals */
  tr.esub th{color:var(--mag);border-top:1px solid var(--line);padding-top:16px}
  tr.erow td{background:rgba(0,232,255,.05);border-bottom:1px solid rgba(0,232,255,.14)}
  tr.erow td:first-child{color:var(--cyan)}
  tr.erow td:last-child{color:var(--cyan);font-family:var(--f-disp);font-size:13px}
  .menu-foot{max-width:1080px;margin:6px auto 40px;padding:0 24px;text-align:center;color:var(--dim);font-size:11px;letter-spacing:.2em}
  /* ---------- HUD ---------- */
  .hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:start;
    max-width:1000px;margin:16px auto 6px;padding:0 16px;position:relative;z-index:5}
  .hud-left,.hud-right{display:flex;flex-direction:column;gap:10px}
  .hud-right{align-items:flex-end;text-align:right}
  .hud-center{text-align:center;min-width:200px}
  .hud label{display:block;font-size:9px;letter-spacing:.3em;color:var(--dim);margin-bottom:3px}
  .mode-badge{align-self:flex-start;font-family:var(--f-disp);font-size:15px;color:var(--mag);letter-spacing:.15em;
    border:1px solid rgba(255,54,214,.55);padding:6px 12px;text-shadow:0 0 10px rgba(255,54,214,.6)}
  .num{font-family:var(--f-disp);font-size:19px;color:var(--cyan);display:inline-block}
  .num.gold{color:var(--gold);font-size:30px;text-shadow:0 0 16px rgba(255,210,74,.5)}
  .tag{font-size:9px;letter-spacing:.2em;padding:2px 7px;border:1px solid;margin-left:8px;display:inline-block}
  .t-mag{color:var(--mag);border-color:rgba(255,54,214,.5);box-shadow:0 0 10px rgba(255,54,214,.25)}
  .t-gold{color:var(--gold);border-color:rgba(255,210,74,.5)}
  .t-cyan{color:var(--cyan);border-color:rgba(0,232,255,.5)}
  .timer{font-family:var(--f-disp);font-size:clamp(34px,5vw,52px);color:#fff;text-shadow:0 0 16px rgba(0,232,255,.6);line-height:1}
  .timer.low{color:var(--red);text-shadow:0 0 18px rgba(255,59,92,.85);animation:tpulse .5s infinite}
  @keyframes tpulse{50%{opacity:.55}}
  .tbar{width:clamp(180px,24vw,300px);height:6px;margin:8px auto 0;background:rgba(255,255,255,.08);overflow:hidden}
  .tbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),var(--lime));box-shadow:0 0 10px rgba(0,232,255,.6);
    transform-origin:0 50%;will-change:transform}
  .tbar.low i{background:linear-gradient(90deg,var(--red),var(--gold))}
  .paywrap{width:min(220px,32vw)}
  .paybar{height:6px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
  .paybar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));box-shadow:0 0 8px rgba(255,210,74,.5);
    transform-origin:0 50%;will-change:transform}
  .paywrap.drained .paybar i{background:var(--red);box-shadow:0 0 8px rgba(255,59,92,.6)}
  .pct{font-size:10px;letter-spacing:.2em;color:var(--dim)}
  .mini{display:flex;gap:16px;font-size:12px;color:var(--dim);letter-spacing:.12em}
  .mini span b{color:var(--txt);font-weight:600}
  .mini .hot{color:var(--gold)}
  /* HUD pinning: deterministic width/height so digit-count changes can't reflow the board */
  .hud-left>div,.hud-right>div{white-space:nowrap}
  .mini{flex-wrap:nowrap}
  #hFieldNum{min-width:2ch}
  #hCap{min-width:3ch}
  #hScore{min-width:6.5ch;text-align:right}
  .tag{min-width:7ch}
  .timer{white-space:nowrap;min-width:6ch;margin-inline:auto}
  .pct{display:block;width:100%;text-align:right}
  .mini span{display:inline-block;text-align:right}
  #hSets,#hMiss{min-width:5.5ch}
  #hStreak{min-width:7ch}
  .hud-row2{max-width:1000px;margin:0 auto 8px;padding:0 16px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
  .rulehint{font-size:10px;letter-spacing:.32em;color:var(--dim)}
  .rulehint em{font-style:normal;color:var(--cyan)}
  .rowbtns{display:flex;gap:8px}

  /* ---------- board ---------- */
  .board-zone{display:flex;justify-content:center;padding:8px 12px 28px;position:relative;z-index:4}
  #frame{position:relative;padding:clamp(10px,2vw,20px);border:1px solid rgba(0,232,255,.25);
    background:radial-gradient(120% 100% at 50% 0%,rgba(0,232,255,.07),rgba(4,5,14,.3) 62%);
    box-shadow:0 0 26px -16px rgba(0,232,255,.55);
    contain:layout style}
  #frame::before,#frame::after{content:'';position:absolute;width:18px;height:18px;border:2px solid var(--mag)}
  #frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
  #frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
  /* breathing glow as an opacity-animated layer (compositor-only, no per-frame repaint) */
  .fglow{position:absolute;inset:0;pointer-events:none;z-index:0;
    box-shadow:0 0 44px -12px rgba(0,232,255,.8),0 0 90px -30px rgba(0,232,255,.45);
    animation:breathO 5s ease-in-out infinite}
  @keyframes breathO{0%,100%{opacity:.45}50%{opacity:1}}
  #board{display:grid;gap:clamp(8px,1.2vw,14px);justify-content:center;
    --cw:clamp(52px,min(20vw,118px,calc(18.75vh - 58px)),118px);
    --cw:clamp(52px,min(20vw,118px,calc(18.75dvh - 58px)),118px)}
  #board.g3{grid-template-columns:repeat(3,var(--cw));
    --cw:clamp(60px,min(24vw,128px,calc(25vh - 74px)),128px);
    --cw:clamp(60px,min(24vw,128px,calc(25dvh - 74px)),128px)}
  #board.g4{grid-template-columns:repeat(4,var(--cw))}

  .card{position:relative;width:var(--cw);aspect-ratio:3/4;border:2px solid var(--c);border-radius:10px;
    background:linear-gradient(165deg,#0d1128,#070a18 72%);cursor:pointer;padding:0;user-select:none;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    box-shadow:0 0 12px -2px var(--c),inset 0 0 22px -10px var(--c);
    transition:transform .14s ease}
  .card::before{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%)}
  .card svg{width:100%;height:100%;display:block}
  /* hover lift only on real hover devices — taps on phones must not repaint shadows */
  @media (hover:hover) and (pointer:fine){
    .card:hover{transform:translateY(-5px);box-shadow:0 0 22px 0 var(--c),inset 0 0 26px -8px var(--c)}
  }
  .card:focus-visible{outline:2px dashed rgba(255,255,255,.7);outline-offset:3px}
  .card.sel{transform:translateY(-6px) scale(1.05);z-index:2;
    box-shadow:0 0 0 2px #fff,0 0 28px 2px var(--c),inset 0 0 26px -6px var(--c)}
  .card.deal{animation:dealIn .5s cubic-bezier(.2,1.4,.4,1) both}
  /* transform+opacity only — no animated filter (per-card re-raster on every frame) */
  @keyframes dealIn{0%{opacity:0;transform:translateY(18px) scale(.35)}60%{opacity:1}100%{opacity:1;transform:none}}
  .card.gone{animation:cardGone .45s ease-in forwards;pointer-events:none;z-index:3}
  @keyframes cardGone{0%{transform:scale(1);opacity:1}35%{transform:scale(1.18)}
    100%{transform:scale(.15) translateY(-30px);opacity:0}}

  /* ---------- fx text ---------- */
  .float{position:fixed;transform:translate(-50%,-50%);font-family:var(--f-disp);font-size:30px;z-index:60;
    pointer-events:none;color:var(--gold);text-shadow:0 0 14px rgba(255,210,74,.8);animation:floatUp 1.05s ease-out forwards}
  .float.fast{color:var(--lime);text-shadow:0 0 14px rgba(184,255,46,.8)}
  .float.slow{color:var(--red);text-shadow:0 0 14px rgba(255,59,92,.8)}
  .float.streak{font-size:15px;letter-spacing:.2em;color:var(--cyan);text-shadow:0 0 12px rgba(0,232,255,.8);animation-duration:1.2s}
  @keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.55)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}
    100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
  .setbang{position:fixed;transform:translate(-50%,-50%);font-family:var(--f-disp);font-size:clamp(40px,7vw,72px);
    letter-spacing:.1em;color:#fff;z-index:55;pointer-events:none;
    text-shadow:0 0 18px var(--mag),0 0 44px var(--mag);animation:bangA .8s ease-out forwards}
  @keyframes bangA{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
    70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
  .pop{animation:popA .35s ease}
  @keyframes popA{40%{transform:scale(1.3);filter:brightness(1.9)}}
  /* phones: filter forces a full repaint — transform-only pop */
  @media (pointer:coarse){@keyframes popA{40%{transform:scale(1.3)}}}

  /* ---------- end screen ---------- */
  .end-wrap{max-width:940px;margin:36px auto 60px;padding:0 16px;text-align:center}
  .end-title{font-family:var(--f-disp);font-size:clamp(38px,7vw,68px);letter-spacing:.08em;color:#fff;
    text-shadow:0 0 16px var(--mag),0 0 50px rgba(255,54,214,.55);animation:flick 4s infinite}
  .end-combo{margin-top:8px;font-size:11px;letter-spacing:.34em;color:var(--dim)}
  .rec{display:inline-block;margin:14px auto 0;font-family:var(--f-disp);font-size:14px;letter-spacing:.28em;
    color:var(--gold);border:1px solid rgba(255,210,74,.55);padding:7px 16px;animation:blink 1s steps(2) infinite}
  .end-score{font-family:var(--f-disp);font-size:clamp(48px,9vw,86px);color:var(--gold);margin:14px 0 2px;
    text-shadow:0 0 26px rgba(255,210,74,.55)}
  .end-score-l{font-size:10px;letter-spacing:.4em;color:var(--dim)}
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
  .tile{border:1px solid var(--line);background:rgba(8,11,26,.6);padding:13px 8px}
  .tile label{display:block;font-size:9px;letter-spacing:.28em;color:var(--dim);margin-bottom:6px}
  .tile .v{font-family:var(--f-disp);font-size:24px;color:var(--cyan);text-shadow:0 0 12px rgba(0,232,255,.4)}
  .end-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;margin-top:8px;text-align:left}
  .end-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
  .save-status{font-family:var(--f-disp);font-size:12px;letter-spacing:.22em;padding:10px 12px;border:1px solid var(--line);margin-bottom:4px}
  .save-status.ok{color:var(--lime);border-color:rgba(184,255,46,.4);text-shadow:0 0 10px rgba(184,255,46,.5)}
  .save-status.dim{color:var(--dim)}
  .lb-row{display:grid;grid-template-columns:36px 1fr auto auto;gap:10px;align-items:center;
    padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
  .lb-row .rk{font-family:var(--f-disp);font-size:13px;color:var(--dim)}
  .lb-row .rk1{color:var(--gold);text-shadow:0 0 10px rgba(255,210,74,.7)}
  .lb-row .rk2{color:#cfd6ff}.lb-row .rk3{color:#e8a06a}
  .lb-row .nm{letter-spacing:.08em}
  .lb-row .sc{font-family:var(--f-disp);color:var(--gold);font-size:13px}
  .lb-row .st{font-size:11px;color:var(--dim)}
  .lb-row.you{background:rgba(0,232,255,.08);box-shadow:inset 2px 0 0 var(--cyan)}
  .lb-row.you .nm{color:var(--cyan)}
  .lb-empty{color:var(--dim);letter-spacing:.2em;font-size:12px;padding:18px 10px;text-align:center}

  /* ---------- confirm modal ---------- */
  .modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
  .modal.on{display:flex}
  .modal-backdrop{position:absolute;inset:0;background:rgba(2,3,10,.78);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .2s ease both}
  .modal-box{position:relative;width:min(420px,100%);background:var(--panel);border:1px solid var(--line);
    padding:26px 24px;box-shadow:0 0 44px -14px rgba(0,232,255,.65),0 0 0 1px rgba(0,232,255,.05);
    animation:modalIn .24s cubic-bezier(.2,1.3,.4,1) both}
  .modal-box::before,.modal-box::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--cyan)}
  .modal-box::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
  .modal-box::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
  .modal-title{font-family:var(--f-disp);font-size:18px;letter-spacing:.16em;color:#fff;
    text-shadow:0 0 12px rgba(0,232,255,.5);margin-bottom:12px}
  .modal-msg{color:var(--dim);font-size:14px;line-height:1.62;margin-bottom:22px}
  .modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
  .btn.danger{background:transparent;border-color:var(--red);color:var(--red)}
  .btn.danger:hover{background:var(--red);color:#1a0208;box-shadow:0 0 22px rgba(255,59,92,.6)}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
  body.modal-open{overflow:hidden}
  @media (prefers-reduced-motion:reduce){.modal-box,.modal-backdrop{animation:none!important}}


  /* ---------- mobile quiet mode: let the display actually idle ---------- */
  @media (pointer:coarse){
    .bg-grid{animation:none}
    .title .l2{animation:none}
    .fglow{animation:none;opacity:.55}
    .ghost{filter:none;opacity:.08}
    /* full-viewport gradient repaint on every set — too expensive on phones */
    #flash{display:none}
    .card.deal{animation-duration:.3s}
    .card.gone{animation-duration:.3s}
  }
  @media (pointer:coarse) and (max-width:720px){
    .ghost:nth-child(n+3){display:none}
  }

  @media (max-width:900px){.menu-grid,.end-grid{grid-template-columns:1fr}.tiles{grid-template-columns:1fr}
    /* finishRun() pins the streak tile to column 2 inline for the 3-col grid — that leaks
       into an implicit right-hand column here, so drop it back to the single column */
    #tileStreak{grid-column:auto!important}}
  @media (max-width:720px){
    .hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:12px}
    .hud-center{grid-column:1/-1;order:-1}
    .hud-right{align-items:flex-end;text-align:right}
    .paywrap{width:min(220px,44vw)}
  }
  @media (prefers-reduced-motion:reduce){
    .bg-grid,.ghost,.title .l2,.fglow,.rec,.end-title,.timer.low{animation:none!important}
  }