/* Fill the webview: dvh can under-fill iOS Chrome/PWA; lvh + fill-available + fixed canvas cover the gap. */
html,body{margin:0;width:100%;height:100%;height:100dvh;min-height:100%;min-height:100lvh;min-height:-webkit-fill-available;
  overflow:hidden;overscroll-behavior:none;background:#07091c;font-family:Menlo,Consolas,monospace;touch-action:none}
/* CSS-only boot splash — no images; covers module load until dismissBoot().
   Starts with [hidden] so unstyled HTML does not flash; CSS reveals it. */
#boot[hidden],#boot{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));
  box-sizing:border-box;background:
    radial-gradient(ellipse at 50% 38%,rgba(49,200,255,.14),transparent 52%),
    radial-gradient(ellipse at 50% 100%,rgba(176,107,255,.1),transparent 45%),
    #07091c;
  color:#e8f6ff;text-align:center;pointer-events:auto;
  opacity:1;transition:opacity .38s ease,visibility .38s ease;visibility:visible}
#boot.out{opacity:0;visibility:hidden;pointer-events:none}
.bootMark{margin:0;font-size:clamp(28px,8vw,56px);font-weight:800;letter-spacing:.14em;
  background:linear-gradient(92deg,#ff3d81,#ffd23d,#3dff8f,#31c8ff,#b06bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(80,180,255,.35));animation:bootGlow 2.4s ease-in-out infinite}
.bootHint{margin:0;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#7fb7ff;
  opacity:.85;animation:bootPulse 1.4s ease-in-out infinite}
.bootBar{width:min(220px,56vw);height:6px;border-radius:3px;overflow:hidden;margin-top:-14px;
  background:rgba(49,200,255,.1);box-shadow:inset 0 0 0 1px rgba(127,183,255,.28)}
.bootBar i{display:block;height:100%;width:0%;border-radius:3px;
  background:linear-gradient(90deg,#31c8ff,#3dff8f);
  box-shadow:0 0 12px rgba(49,200,255,.55);
  transition:width .18s ease-out}
.bootStage{position:relative;width:min(220px,56vw);height:120px}
.bootPiece{position:absolute;display:grid;gap:3px;--cell:clamp(14px,4.2vw,18px)}
.bootPiece i{width:var(--cell);height:var(--cell);border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 2px 6px rgba(0,0,0,.35)}
.bootT{top:8%;left:8%;grid-template-columns:repeat(3,var(--cell));grid-template-rows:repeat(2,var(--cell));
  animation:bootDrift 2.8s ease-in-out infinite}
.bootT i{background:#b06bff}
.bootT i:nth-child(1){grid-column:1;grid-row:1}
.bootT i:nth-child(2){grid-column:2;grid-row:1}
.bootT i:nth-child(3){grid-column:3;grid-row:1}
.bootT i:nth-child(4){grid-column:2;grid-row:2}
.bootO{top:42%;left:38%;grid-template-columns:repeat(2,var(--cell));grid-template-rows:repeat(2,var(--cell));
  animation:bootDrift 2.4s ease-in-out -.6s infinite}
.bootO i{background:#ffd23d}
.bootI{top:12%;right:6%;grid-template-columns:var(--cell);grid-template-rows:repeat(4,var(--cell));
  animation:bootDrift 3.1s ease-in-out -1.1s infinite}
.bootI i{background:#31c8ff}
.bootL{bottom:4%;left:18%;grid-template-columns:repeat(2,var(--cell));grid-template-rows:repeat(3,var(--cell));
  animation:bootDrift 2.6s ease-in-out -1.7s infinite}
.bootL i{background:#3dff8f}
.bootL i:nth-child(1){grid-column:1;grid-row:1}
.bootL i:nth-child(2){grid-column:1;grid-row:2}
.bootL i:nth-child(3){grid-column:1;grid-row:3}
.bootL i:nth-child(4){grid-column:2;grid-row:3}
@keyframes bootDrift{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-10px) rotate(5deg)}
}
@keyframes bootGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(80,180,255,.28))}
  50%{filter:drop-shadow(0 0 26px rgba(255,61,129,.45))}}
@keyframes bootPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .bootMark,.bootHint,.bootPiece{animation:none}
  .bootBar i{transition:none}
}
/* Soft pond floor — GPU CSS repeat; URL + pan from applyFloor / syncFloor.
   Tiles use native image px; scenes grow past the viewport and pan by transform. */
#floor{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background-color:#07091c;background-position:0 0;background-size:auto;background-repeat:repeat;
  transition:filter .22s ease-out}
/* Veil that keeps neon pieces readable — under the shadows, so they stay dark. */
#floor::after{content:"";position:absolute;inset:0;background:rgba(7,9,28,.58);
  transition:background-color .22s ease-out}
/* Smooth red alert filter when someone dangerous is really close to the player. */
#floor.danger{filter:sepia(.38) hue-rotate(318deg) saturate(2.4)}
#floor.danger::after{background:rgba(42,6,18,.64)}
/* Classic plain pond — historical gradient, no art/veil; canvas draws the grid. */
#floor[data-fit=plain]{
  background:linear-gradient(180deg,#0a0d2a 0%,#0a1033 55%,#120a2e 100%);
  background-size:auto;background-repeat:no-repeat;background-position:0 0}
#floor[data-fit=plain]::after{content:none}
canvas{display:block;position:fixed;inset:0;z-index:2;background:transparent;
  touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;width:100%;height:100%}
/* Piece shadows: flat silhouettes softened by the compositor, one light for all. */
#shade{z-index:1;opacity:.55;pointer-events:none}
/* Beer perk haze: amber wash + slight GPU blur over the pond. Lives between
   the canvas (z-2) and HUD chrome (z-5); opacity eases in/out with the perk. */
#beerVeil{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .7s ease;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,196,84,.13),rgba(150,82,16,.22) 88%);
  -webkit-backdrop-filter:blur(2px) saturate(1.12);
  backdrop-filter:blur(2px) saturate(1.12)}
#beerVeil.on{opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #beerVeil{background:radial-gradient(ellipse at 50% 42%,rgba(255,196,84,.22),rgba(150,82,16,.3) 88%)}
}
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  box-sizing:border-box;width:100%;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom),var(--ui-bottom,0px));
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(ellipse at center,rgba(10,12,40,.55),rgba(3,4,12,.88));color:#e8f6ff;text-align:center;z-index:10;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.overlay.hidden{display:none}
/* Eaten: camera centers the eater under mid-panel copy — keep the scrim dense
   enough that neon cells cannot punch through SPECTATING / score. Win stays
   lighter so the live board remains visible during TIME→score. */
#go{
  background:radial-gradient(ellipse at center,rgba(7,9,28,.92),rgba(3,4,12,.97));
}
/* Menu art: cover-crop on center; light scrim for UI contrast. */
#menu{
  background:
    radial-gradient(ellipse at 50% 42%,rgba(7,9,28,.28) 0%,rgba(7,9,28,.52) 42%,rgba(3,4,12,.78) 100%),
    url(/img/ui/tetroback.webp) center / cover no-repeat #07091c;
}
.overlay>*{max-width:100%;min-width:0;box-sizing:border-box}
h1{font-size:min(9vw,84px);margin:0 0 8px;letter-spacing:.08em;
  background:linear-gradient(92deg,#ff3d81,#ffd23d,#3dff8f,#31c8ff,#b06bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(80,180,255,.35))}
/* Reset text-gradient h1 so WebKit does not clip/hide logo imgs.
   Cast shadow before the glow (same 1:2 light as the pond pieces), so the
   halo wraps the art instead of the art casting a halo-shaped blob. */
h1.logo{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;
  font-size:0;line-height:0;letter-spacing:0;
  filter:drop-shadow(4px 8px 7px rgba(0,0,0,.62)) drop-shadow(0 0 18px rgba(80,180,255,.3))}
h1.logo img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
/* Menu status (update / disconnect) — under title art; [hidden] toggles visibility. */
.menuNote{margin:0 0 16px;max-width:min(92vw,520px);font-size:18px;font-weight:800;
  letter-spacing:.14em;line-height:1.35;color:#ff6b6b;text-shadow:0 0 18px currentColor}
.menuNote.blink{animation:noteBlink .85s step-end infinite}
@keyframes noteBlink{50%{opacity:0}}
.sub{color:#9fb6d8;font-size:15px;margin:0 0 26px;max-width:42rem}
.keys{display:grid;grid-template-columns:repeat(2,auto);gap:8px 14px;justify-content:center;justify-items:start;
  width:min(340px,100%);margin:0 auto 18px;font-size:12px;color:#bcd2ee;text-align:left}
.keys span{display:flex;align-items:center;flex-wrap:wrap;gap:3px 0;min-width:0}
.keys b{display:inline-block;background:#141b33;border:1px solid #2c3a63;border-bottom-width:3px;border-radius:6px;
  padding:4px 8px;margin-right:5px;color:#fff;font-weight:700}
@media (min-width:640px){
  .keys{grid-template-columns:repeat(3,auto);gap:10px 18px;font-size:13px;margin:0 auto 24px}
  .keys b{padding:5px 10px;margin-right:7px}
}
.btn{cursor:pointer;font:inherit;font-size:18px;font-weight:700;letter-spacing:.1em;color:#04121a;
  background:linear-gradient(90deg,#3dff8f,#31d9ff);border:none;border-radius:10px;padding:14px 44px;
  box-shadow:0 0 28px rgba(61,255,143,.45);transition:transform .12s;margin-bottom:18px;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:scale(1.06)}
.btn.ghost{color:#eaf6ff;background:transparent;border:1px solid #2c3a63;box-shadow:none;margin-bottom:18px}
.btn.ghost:hover{transform:scale(1.04);border-color:#31d9ff}
/* Brick PLAY / DONATE — shared plate, text labels, same height. */
.btn.art{display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  margin:0 auto;border:none;border-radius:0;box-shadow:none;text-decoration:none;
  padding:0 1.1em;color:#04121a;font-size:min(20px,4.8vw);font-weight:800;letter-spacing:.12em;
  line-height:1;white-space:nowrap;touch-action:manipulation;flex-shrink:0;
  height:min(70px,18vw);aspect-ratio:800/339;width:auto;
  background:url(/img/ui/brick.webp) center/100% 100% no-repeat;
  text-shadow:0 1px 0 rgba(255,255,255,.4),0 -1px 0 rgba(255,255,255,.2)}
.btn.play{margin-bottom:18px}
/* Menu PLAY row: PLAY stays on the menu centerline; the round settings
   gear sits just right of it (side columns keep the button centered). */
.menuRow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:18px}
.menuRow #startBtn{grid-column:2;margin-bottom:0}
.menuRow #menuGearBtn{grid-column:3;justify-self:start;margin-left:10px}
#menuGearBtn{display:flex;flex-shrink:0;font:400 19px/1 Menlo,Consolas,monospace}
#menuGearBtn:active{transform:scale(.93)}
.btn.donate{margin-bottom:10px}
#lbMenu{margin-top:0}
.btn.art:hover{transform:none}
.btn.art:visited{color:#04121a}
.btn.art:active,.btn.art.press{transform:scale(.93)}
#nick,.nickIn{font:inherit;font-size:18px;font-weight:700;letter-spacing:.06em;color:#eaf6ff;text-align:center;
  background:#101731;border:1px solid #2c3a63;border-bottom-width:3px;border-radius:10px;padding:12px 16px;
  width:min(320px,100%);box-sizing:border-box;outline:none;margin-bottom:16px;
  user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
#nick:focus,.nickIn:focus{border-color:#31d9ff}
.lb{background:rgba(9,12,30,.75);border:1px solid #22305c;border-radius:12px;padding:14px 16px;
  width:min(320px,100%);max-width:100%;margin-top:12px;font-size:13px;text-align:left;overflow:hidden;flex-shrink:0}
.lb h3{margin:0 0 8px;font-size:11px;letter-spacing:.18em;color:#7fb7ff;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb ol{list-style:none;margin:0;padding:0;counter-reset:r}
.lb li{counter-increment:r;display:grid;grid-template-columns:3ch minmax(0,1fr) 7ch 1em;
  column-gap:8px;align-items:baseline;padding:2.5px 0;color:#cfe3ff}
.lb li::before{content:counter(r) ".";color:#5f7dbb;text-align:right}
.lb li.won::after{content:"★";color:#ffd23d;text-align:center}
.lb li b{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lb li span{color:#7f95c0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.lb li.pr{border-radius:6px;margin:0 -6px;padding-left:6px;padding-right:6px;
  animation:prFlash 2.75s linear 1}
.lb li.pr b{color:#3dff8f}
.lb li.pr span{color:#9dffc4}
@keyframes prFlash{
  0%,20%,40%,60%,80%,100%{background:transparent}
  10%,30%,50%,70%,90%{background:rgba(61,255,143,.28)}
}
.lb .empty{display:block;color:#5f7dbb;white-space:normal;counter-increment:none}
.lb .empty::before{content:none}
#hud{position:fixed;top:max(14px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));
  z-index:5;color:#eaf6ff;text-shadow:0 0 10px rgba(60,200,255,.5);pointer-events:none}
#hud .score{font-size:34px;font-weight:800;line-height:1.05}
#hud .row{font-size:12px;color:#8fd8ff;margin-top:3px;letter-spacing:.06em}
#hud #perkEl{display:none}
#hud .row img{width:45px;height:45px;vertical-align:-14px;margin-right:4px;
  filter:drop-shadow(0 0 6px rgba(80,200,255,.6))}
#lbLive{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));
  z-index:5;text-align:left;color:#cfe3ff;font-size:12px;
  background:rgba(9,12,30,.55);border:1px solid rgba(34,48,92,.8);border-radius:10px;padding:10px 14px;
  min-width:170px;max-width:min(220px,46vw);max-height:min(42vh,320px);overflow:hidden;
  display:none;pointer-events:none;box-sizing:border-box}
#lbLive h4{margin:0 0 6px;font-size:10px;letter-spacing:.28em;color:#7fb7ff;font-weight:700}
#lbLive .lrow{display:flex;gap:8px;padding:1.5px 0;white-space:nowrap;min-width:0}
#lbLive .lrow .rk{color:#5f7dbb;min-width:14px;text-align:right}
#lbLive .lrow b{font-weight:700;color:#eaf6ff;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#lbLive .lrow.me b,#lbLive .lrow.me .sz{color:#3dff8f}
#lbLive .lrow .sz{margin-left:auto;color:#8fd8ff}
#lbLive .lrow.lead .sz,#lbLive .lrow.lead b{color:#ffd23d}
#lbLive .lsub{margin:8px 0 3px;font-size:9px;letter-spacing:.28em;color:#7fb7ff;font-weight:700}
#lbLive .lsub:first-child{margin-top:0}
#lbLive .lrow.spec b{color:#9aadc8;font-weight:600}
#lbLive .lrow.me.spec b{color:#3dff8f}
#banner{position:fixed;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:5;
  font-size:15px;letter-spacing:.35em;display:none;max-width:min(92vw,520px);text-align:center;
  padding:0 8px;box-sizing:border-box}
#banner.big{top:max(64px,calc(env(safe-area-inset-top) + 48px));font-size:20px;font-weight:800;letter-spacing:.18em;
  text-shadow:0 0 18px currentColor}
#count{position:fixed;top:36%;left:50%;transform:translate(-50%,-50%);z-index:12;display:none;
  font-size:min(20vw,170px);font-weight:800;color:#fff;
  text-shadow:0 0 70px rgba(90,200,255,.95),0 0 24px rgba(90,200,255,.8)}
.count-pop{animation:countPop .7s ease-out}
@keyframes countPop{from{transform:translate(-50%,-50%) scale(1.12);opacity:.55}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
/* --ui-bottom lifts controls above iOS Chrome's toolbar (not in safe-area); canvas still full-bleed. */
#chatWrap{position:fixed;left:max(12px,env(safe-area-inset-left));
  bottom:max(12px,env(safe-area-inset-bottom),var(--ui-bottom,0px));z-index:6;width:min(360px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:6px}
#specBadge{display:none;align-self:center;font-size:12px;letter-spacing:.22em;color:#ffd23d;
  text-shadow:0 0 16px rgba(255,210,61,.65);pointer-events:none;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;text-align:center}
#waitBadge{display:none;align-self:center;font-size:12px;letter-spacing:.14em;color:#7ad7ff;
  text-shadow:0 0 14px rgba(49,217,255,.45);pointer-events:none;text-align:center;
  max-width:100%;line-height:1.35}
/* --pads-lift: map-draw stamps extra lift so the radar fits under the column. */
#pads{display:none;position:fixed;z-index:7;right:max(10px,env(safe-area-inset-right));
  bottom:calc(max(110px,calc(max(env(safe-area-inset-bottom),var(--ui-bottom,0px)) + 100px)) + var(--pads-lift,0px));flex-direction:column;gap:12px;align-items:center;
  touch-action:none;user-select:none;-webkit-user-select:none}
#pads.show{display:flex}
#pads button{width:64px;height:64px;border-radius:50%;font:700 18px Menlo,Consolas,monospace;color:#eaf6ff;
  background:rgba(9,12,30,.55);border:1px solid rgba(34,48,92,.9);padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
#pads button[data-act=boost]{width:76px;height:76px;font-size:11px;letter-spacing:.1em;color:#04121a;
  background:linear-gradient(90deg,#3dff8f,#31d9ff);border:none;box-shadow:0 0 18px rgba(61,255,143,.35)}
#pads button.on{border-color:#31d9ff;background:rgba(49,217,255,.28)}
#pads button[data-act=boost].on{filter:brightness(1.12)}
/* Round chrome icons — one shared 40px circle recipe (close cross, pond gear,
   menu gear); each id below keeps only its position and glyph font. */
#closeBtn,#gearBtn,#menuGearBtn,#pauseBtn{width:40px;height:40px;border-radius:50%;
  align-items:center;justify-content:center;color:#cfe3ff;background:rgba(9,12,30,.78);
  border:1px solid rgba(44,58,99,.95);padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* Close cross + gear — shown on every pointer while seated (ESC also exits). */
#closeBtn{display:none;position:fixed;z-index:15;top:max(10px,env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right));font:700 22px/1 Menlo,Consolas,monospace}
#closeBtn.show{display:flex}
body:has(#closeBtn.show) #lbLive{top:max(58px,calc(env(safe-area-inset-top) + 48px))}
/* Settings gear — left of the close cross, same in-game chrome row. */
#gearBtn{display:none;position:fixed;z-index:15;top:max(10px,env(safe-area-inset-top));
  right:calc(max(10px,env(safe-area-inset-right)) + 48px);font:400 19px/1 Menlo,Consolas,monospace}
#gearBtn.show{display:flex}
/* Pause — left of the gear in the same chrome row; frozen by #pause overlay. */
#pauseBtn{display:none;position:fixed;z-index:15;top:max(10px,env(safe-area-inset-top));
  right:calc(max(10px,env(safe-area-inset-right)) + 96px);font:400 15px/1 Menlo,Consolas,monospace}
#pauseBtn.show{display:flex}
/* Paused pond — gradient wordmark, same neon ramp as h1 (no logo art asset). */
.pauseMark{margin:0 0 10px;font-size:min(14vw,96px);font-weight:800;letter-spacing:.14em;
  background:linear-gradient(92deg,#ff3d81,#ffd23d,#3dff8f,#31c8ff,#b06bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(80,180,255,.35))}
/* Offline pond: no peers to talk to — keep the OFFLINE badge, drop the input. */
#chatWrap.no-chat #chatIn,#chatWrap.no-chat #chatMsgs{display:none}
#bgPanel{display:none;position:fixed;z-index:15;top:calc(max(10px,env(safe-area-inset-top)) + 50px);
  right:max(10px,env(safe-area-inset-right));background:rgba(9,12,30,.88);
  border:1px solid rgba(44,58,99,.95);border-radius:12px;padding:12px 16px;
  -webkit-tap-highlight-color:transparent}
#bgPanel.show{display:block}
#bgPanel b{display:block;margin:0 0 8px;font:700 10px Menlo,Consolas,monospace;
  letter-spacing:.28em;color:#7fb7ff}
#bgPanel label{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;
  font:700 12px Menlo,Consolas,monospace;letter-spacing:.08em;color:#cfe3ff}
#bgPanel input{width:16px;height:16px;margin:0;accent-color:#31d9ff;cursor:pointer}
#bgPanel #steerHint{margin:8px 0 0;padding:0;font:11px Menlo,Consolas,monospace;
  line-height:1.5;color:#9fb6d8;max-width:230px}
/* Touch-first devices steer by dragging: the keyboard-mode selector is hidden
   there (author rule — #bgPanel b/label display would beat the UA [hidden]). */
#steerBox[hidden]{display:none}
/* Copyright — last element of the menu's scroll flow: bottom of the content
   when the menu scrolls, pinned to the flex-column floor when it fits.
   Never fixed, never overlaying — it scrolls away with the rest. */
#copyright{display:none;margin-top:auto;padding-top:14px;text-align:center;
  font-size:11px;letter-spacing:.08em;color:#9fb6d8;
  text-shadow:0 1px 3px rgba(0,0,0,.85);pointer-events:none}
#menu:not(.hidden) #copyright{display:block}
/* Menu / eaten overlays blank play chrome; win keeps HUD + live board for the
   TIME→score / hold before the next-round countdown (scrim still covers canvas).
   #count is z-index 12 (above overlays) — hide it on menu/go so the next-round
   digits cannot stamp over EATEN / SPECTATING. */
#menu:not(.hidden) ~ #chatWrap,#go:not(.hidden) ~ #chatWrap,
#menu:not(.hidden) ~ #hud,#go:not(.hidden) ~ #hud,
#menu:not(.hidden) ~ #lbLive,#go:not(.hidden) ~ #lbLive,
#menu:not(.hidden) ~ #pads,#go:not(.hidden) ~ #pads,#win:not(.hidden) ~ #pads,
#menu:not(.hidden) ~ #banner,#go:not(.hidden) ~ #banner,
#menu:not(.hidden) ~ #count,#go:not(.hidden) ~ #count{visibility:hidden;pointer-events:none}
/* Win scrim is z-index 10 — lift live chrome above it. */
#win:not(.hidden) ~ #hud,#win:not(.hidden) ~ #lbLive,#win:not(.hidden) ~ #chatWrap,
#win:not(.hidden) ~ #banner{z-index:11}
#chatMsgs{display:flex;flex-direction:column;gap:2px;pointer-events:none;justify-content:end;
  max-height:6lh;overflow:hidden}
#chatMsgs .cmsg{font-size:12.5px;color:#dbe9ff;text-shadow:0 1px 3px rgba(0,0,0,.9);
  overflow-wrap:anywhere;word-break:break-word}
#chatMsgs .cmsg b{color:#8fd8ff;font-weight:700;display:inline-block;max-width:16ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Soft cyan callout under go/win overlays — shadow keeps it readable over pond glow. */
.sub.note{color:#8fd8ff;margin-top:6px;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.75)}
/* Leftover clock on win — drains into score (Mario TIME). */
.winTime{font-size:22px;font-weight:800;color:#ffd23d;letter-spacing:.08em;margin:0 0 8px}
.winTime.hidden{display:none}
/* Big score under go/win titles (fixed size through TIME→score ticks). */
.scoreBig{font-size:56px;font-weight:800;color:#fff;margin-bottom:24px}
/* Gold emphasis in menu blurb. */
.hl{color:#ffd23d}
#winnerName{display:inline-block;max-width:16ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom;color:#fff}
#chatIn{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;color:#eaf6ff;
  background:rgba(9,12,30,.72);border:1px solid rgba(44,58,99,.9);border-radius:8px;padding:8px 12px;
  outline:none}
#chatIn:focus{border-color:#31d9ff;background:rgba(9,12,30,.9)}
#chatIn::placeholder{color:#51618f}
@media (max-width:520px){
  /* Keep keys 2-col on phones — a single column shoved HoF under the Chrome/PWA bottom chrome. */
  h1{font-size:min(8.5vw,64px);margin:0 0 6px}
  h1.logo img{max-width:420px}
  .menuNote{margin:0 0 10px;font-size:14px;letter-spacing:.1em}
  .sub{font-size:12px;margin:0 0 12px;line-height:1.35}
  .keys{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:start;font-size:11px;
    gap:6px 10px;margin:0 auto 10px;width:min(360px,100%)}
  .keys span{justify-content:flex-start;text-align:left}
  .keys b{padding:3px 6px;margin-right:4px;font-size:10px}
  .btn{margin-bottom:12px;padding:12px 36px}
  .btn.art{padding:0 1em;font-size:min(16px,4.2vw);height:min(56px,16vw)}
  .btn.play{margin-bottom:12px}
  .menuRow{margin-bottom:12px}
  #nick,.nickIn{margin-bottom:10px;padding:10px 14px;font-size:16px}
  .lb{padding:10px 10px;font-size:11px;margin-top:8px}
  .lb h3{letter-spacing:.12em;font-size:10px;margin:0 0 4px}
  .lb li{padding:1.5px 0;column-gap:6px}
  #pads{bottom:calc(max(96px,calc(max(env(safe-area-inset-bottom),var(--ui-bottom,0px)) + 88px)) + var(--pads-lift,0px));gap:10px}
  #pads button{width:58px;height:58px;font-size:16px}
  #pads button[data-act=boost]{width:68px;height:68px;font-size:10px}
  #closeBtn{width:44px;height:44px;font-size:24px}
  body:has(#closeBtn.show) #lbLive{top:max(56px,calc(env(safe-area-inset-top) + 48px))}
  #hud{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}
  #hud .score{font-size:26px}
  #hud .row{font-size:11px;margin-top:2px;letter-spacing:.04em}
  #lbLive{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));
    min-width:0;max-width:min(148px,44vw);max-height:min(36vh,240px);padding:8px 9px;font-size:11px}
  #lbLive h4{font-size:9px;letter-spacing:.14em;margin:0 0 4px}
  #lbLive .lrow b{max-width:16ch}
  #lbLive .lsub{margin:6px 0 2px;letter-spacing:.16em}
  #banner{font-size:12px;letter-spacing:.18em;top:max(10px,env(safe-area-inset-top))}
  #banner.big{font-size:15px;letter-spacing:.1em;top:max(52px,calc(env(safe-area-inset-top) + 36px))}
  #chatWrap{left:max(8px,env(safe-area-inset-left));
    bottom:max(8px,env(safe-area-inset-bottom),var(--ui-bottom,0px));
    width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  #chatIn{font-size:16px;padding:10px 12px} /* 16px avoids iOS input zoom */
  #specBadge{font-size:11px;letter-spacing:.14em}
  #waitBadge{font-size:11px;letter-spacing:.1em}
  #count{font-size:min(28vw,140px)}
}
/* Narrow-band banner corridor: between 520px and ~1000px the desktop-centered
   520px banner box still runs under the live board panel (iPad portrait,
   small windows) — route it through the same side-clear corridor. */
@media (min-width:521px) and (max-width:1000px){
  #banner{left:112px;right:248px;transform:none;margin:0 auto;max-width:none;text-wrap:balance}
  #banner.big{font-size:16px}
}
/* Short phones: shrink the blurb so a full 10-row HoF still clears the bottom chrome. */
@media (max-width:520px) and (max-height:760px){
  #menu .sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
    margin:0 0 8px;font-size:11px;line-height:1.3}
  #menu .keys{margin:0 auto 8px;gap:5px 8px}
  #menu .btn{margin-bottom:10px;padding:10px 32px;font-size:16px}
  #menu .btn.art{padding:0 .9em;font-size:14px;margin-left:auto;margin-right:auto;height:min(50px,14vw)}
  #menu .btn.donate{margin-bottom:8px}
  #menu #nick{margin-bottom:8px;padding:9px 12px}
  #menu .lb{padding:8px 8px;font-size:10px}
  #menu .lb li{padding:1px 0}
}