:root{--bg:#17181d;--panel:#1d1f27;--line:#2c2f3a;--ink:#eef0f6;--muted:#9aa0b0;--accent:#f0a35f;--lilac:#c4a7ef;--grad:linear-gradient(100deg,#ffc48a,#f0a35f 55%,#ec9270);--display:-apple-system,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;--body:-apple-system,"SF Pro Text","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif}
  *{box-sizing:border-box}
  [hidden]{display:none !important}  /* authoritative: class display rules (.discord-btn, .who, …) must not override the hidden attribute */
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}
  /* when this window isn't focused (on a 2nd monitor / you're watching a stream) the JS already caps the floor to ~10fps; also pause decorative animations + drop the expensive overlay blur so the site stops hogging the GPU. all resumes instantly on focus. */
  body.unfocused .aurora, body.unfocused .blob, body.unfocused #newBattleAlert, body.unfocused .lock-spark, body.unfocused .lock-big, body.unfocused .empty-star{ animation-play-state:paused !important; }
  body.unfocused .pl-overlay, body.unfocused #dupTab{ -webkit-backdrop-filter:none !important;backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .screen[hidden]{display:none}
  .screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:12px;padding:22px;text-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* the character creator is taller than a phone — let it scroll, keep the canvas + "enter" reachable, and pin "enter" so it's always tappable */
  #creator{gap:9px;padding:16px 18px calc(16px + env(safe-area-inset-bottom))}
  #creator>h2{margin:2px 0 4px}
  #enter{position:sticky;bottom:0;margin-top:6px;box-shadow:0 -10px 22px 10px var(--bg)}
  #dupTab{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,11,16,.93);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  #dupTab[hidden]{display:none}
  .dup-card{max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
  .dup-emoji{font-size:46px;line-height:1}
  .dup-card h2{margin:0;font-size:22px}
  .dup-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
  h1{font-size:34px;margin:0;letter-spacing:-1px;font-weight:900}
  h2{font-size:22px;margin:0 0 4px}
  p{color:var(--muted);margin:0}
  .fine{font-size:12px;opacity:.7;max-width:300px;margin-top:6px}
  input{width:min(320px,86vw);background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:11px;color:var(--ink);font-size:16px;padding:13px 15px;outline:none}
  input:focus{border-color:var(--accent)}
  button{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:12px 18px;font-size:15px;font-weight:700;cursor:pointer}
  button:active{transform:scale(.97)}
  button.primary,#auGo{background:var(--accent);color:#1a1206;border:none;width:min(320px,86vw)}
  .msg{font-size:13px;min-height:18px;color:#ff8a8a}
  .msg.ok{color:#7be09a}
  #creator canvas{background:rgba(0,0,0,.28);border-radius:14px;border:1px solid var(--line)}
  .ctrl{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted)}
  .ctrl b{color:var(--ink);min-width:78px;text-transform:capitalize}
  .ctrl button{padding:8px 14px}
  .lbl{font-size:12px;color:var(--muted);letter-spacing:1px;margin-top:6px}
  .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:330px}
  .sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s}
  .sw:hover{transform:scale(1.12)}
  .sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent);transform:scale(1.12)}
  /* compact 2-column creator: preview on the left, all the options on the right (no more scrolling) */
  .cr-grid{display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:100%;max-width:580px;margin:0 auto}
  .cr-prev{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
  .cr-opts{display:flex;flex-direction:column;gap:3px;flex:1 1 250px;min-width:230px;max-width:300px;text-align:left}
  .cr-opts .lbl{margin-top:9px}
  .cr-opts .row,.cr-opts .acc-row{justify-content:flex-start;max-width:100%}
  @media (max-width:470px){ .cr-grid{flex-direction:column;align-items:center;gap:10px} .cr-prev #prev{width:140px;height:auto} .cr-opts{text-align:center;min-width:0;max-width:330px} .cr-opts .lbl{margin-top:6px} .cr-opts .row,.cr-opts .acc-row{justify-content:center} }
  #play{padding:0}
  #world{position:absolute;inset:0;width:100%;height:100%;display:block}
  #npbar{position:absolute;left:0;top:0;width:100%;z-index:20;padding:40px 22px 8px;background:linear-gradient(180deg,rgba(10,8,16,.82),rgba(10,8,16,.3) 72%,transparent)}  /* padding-top drops the wave down to sit where the host's does */
  /* post-submission holding room cue: shown while we wait for the host to start finals (replaces dropping to the lobby) */
  #holdBanner{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:21;display:flex;align-items:center;gap:9px;padding:10px 20px;border-radius:999px;background:rgba(16,12,24,.7);border:1px solid rgba(255,206,90,.32);color:#ffe08a;font-family:'Alagard',ui-monospace,monospace;font-size:17px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 34px rgba(0,0,0,.45);pointer-events:none}
  #holdBanner[hidden]{display:none}
  #holdBanner .hb-dot{width:9px;height:9px;border-radius:50%;background:#ffce5a;box-shadow:0 0 10px #ffce5a;animation:hbPulse 1.3s ease-in-out infinite}
  #holdBanner .hb-ell{width:1.1em;text-align:left;overflow:hidden;white-space:nowrap;animation:hbEll 1.6s steps(4) infinite}
  @keyframes hbPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  @keyframes hbEll{0%{width:0}100%{width:1.1em}}
  .np-info{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
  #ptitle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:56%;text-align:center;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 16px rgba(255,255,255,.5),0 0 5px rgba(255,255,255,.35);pointer-events:none}
  #ptime{position:static;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:#ffb84d;letter-spacing:.05em;text-shadow:0 0 6px rgba(255,150,40,.55),0 1px 3px rgba(0,0,0,.9)}
  /* overlays inside the wave box: NEXT TRACK pinned top-left; gift button + timecode bottom-right (gift to the LEFT of the time) */
  .pwave-foot{position:absolute;left:9px;right:9px;bottom:6px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .pf-right{display:flex;align-items:center;gap:10px;margin-left:auto}
  .np-rank{font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.08);color:#cfd3dc}
  .np-rank:empty{display:none}
  .np-bottom{display:flex;align-items:center;gap:8px;margin-top:3px}
  .np-bottom .np-next{flex:1 1 auto;min-width:0;margin-top:0}
  /* embossed pixel (habbo/stardew) purple button, under the wave to the right of NEXT TRACK */
  #giftBtn{flex:0 0 auto;position:relative;border:0;cursor:pointer;border-radius:4px;padding:8px 12px;font-size:12px;font-weight:800;color:#fff;letter-spacing:.2px;white-space:nowrap;image-rendering:pixelated;background:#7a32e6;box-shadow:inset 3px 3px 0 #a877ff,inset -3px -3px 0 #4e1d9c,0 3px 0 #3a1576,0 5px 6px rgba(0,0,0,.42);transition:transform .05s}
  #giftBtn:active{transform:translateY(2px);box-shadow:inset 3px 3px 0 #a877ff,inset -3px -3px 0 #4e1d9c,0 1px 0 #3a1576}
  .np-sound{flex:0 0 auto;background:rgba(255,255,255,.08);border:1px solid #2c2f3a;border-radius:10px;padding:7px 9px;font-size:14px;line-height:1;cursor:pointer}
  .np-sound:active{transform:scale(.94)}
  .np-sound.off{opacity:.55}
  #giftBtn:active{transform:scale(.985);animation:none}
  .np-stage{display:flex;align-items:stretch;gap:8px}
  .np-stage .pwave-box{flex:1;min-width:0}
  .np-vis{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  #pwave{width:100%;height:168px;display:block;background:none}  /* float the bars (mirror the host), no box */
  .np-lufs{flex:0 0 34px;display:flex;flex-direction:column;align-items:center;gap:3px}
  #plufs{flex:1;width:34px;display:block;border-radius:8px;background:rgba(0,0,0,.36)}
  .lufs-num{font-size:10px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .lufs-cap{font-size:8px;font-weight:800;letter-spacing:1px;color:#7e8696}
  .np-next{display:flex;align-items:center;gap:8px;font-size:12px;min-width:0;max-width:100%}
  .np-next[hidden]{display:none}
  .nn-k{font-weight:800;letter-spacing:.6px;font-size:10px;color:#2a1c08;background:var(--accent);padding:3px 9px;border-radius:3px;image-rendering:pixelated;box-shadow:inset 2px 2px 0 rgba(255,255,255,.45),inset -2px -2px 0 rgba(0,0,0,.22),0 2px 0 rgba(0,0,0,.30)}
  .nn-v{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* finals voting arena (only during finals) */
  /* container matches host's body[data-view=finals] .view-finals EXACTLY (block, fixed overlay) so arena.css lays both out identically */
  #pArena{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100vw,1340px);padding:16px 48px 0;margin:0;box-sizing:border-box;z-index:19;pointer-events:none}  /* r301: side padding 30→48px so the edge lanes clear the 45px socials rail on sub-1250px windows (rail z24 sits over lane z19 and was eating the outermost lane's relisten clicks) */
  #pArena .pa-lanes,#pArena .pa-lane{pointer-events:auto} /* the rest of the arena is click-through, but tapping a lane card must vote (mobile) */
  #pArena[hidden]{display:none}
  .pa-finals-head{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin:2px 0 12px;pointer-events:none}
  .pa-title{font-family:var(--display,'Space Grotesk',system-ui,sans-serif);font-weight:900;font-size:clamp(38px,6.4vw,88px);letter-spacing:-1px;line-height:.94;margin:0;color:#ff3848;text-shadow:0 0 16px rgba(255,56,72,.75),0 0 46px rgba(255,40,60,.5),0 0 90px rgba(255,30,55,.32);animation:finSway 4.2s ease-in-out infinite;will-change:transform}
  @keyframes finSway{0%,100%{transform:rotate(-0.7deg) translateY(0)}50%{transform:rotate(0.7deg) translateY(-2px)}}
  .pa-title.grand{font-size:clamp(42px,7vw,98px);color:transparent;background:linear-gradient(92deg,#ff3848,#ff8a3c,#ffe14a,#3ee07c,#48c6ff,#9a6bff,#ff5ec8,#ff3848);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 26px rgba(150,110,255,.6)) drop-shadow(0 0 60px rgba(80,200,255,.32));animation:finSway 3.4s ease-in-out infinite,grandHue 5s linear infinite}
  @keyframes grandHue{0%{background-position:0% 50%}100%{background-position:220% 50%}}
  .pa-finals-head.grand::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(900px,92vw);height:300px;z-index:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 50%,rgba(180,210,255,.5),rgba(140,120,255,.18) 45%,transparent 72%);mix-blend-mode:screen;opacity:0;animation:lightningFlash 4.6s linear infinite}
  .pa-finals-head.grand::after{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(900px,92vw);height:320px;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='320' viewBox='0 0 60 320'%3E%3Cpath d='M36 0 L10 152 L28 152 L20 320 L54 128 L34 128 Z' fill='%23dbeaff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='320' viewBox='0 0 54 320'%3E%3Cpath d='M20 0 L44 150 L26 150 L36 320 L4 132 L24 132 Z' fill='%23e6d4ff'/%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat;background-position:14% 50%,84% 50%;background-size:58px 320px,52px 320px;filter:drop-shadow(0 0 9px rgba(150,200,255,.9));mix-blend-mode:screen;opacity:0;animation:lightningBolt 4.6s linear infinite}
  @keyframes lightningFlash{0%,100%{opacity:0}2%{opacity:.85}5%{opacity:.12}7%{opacity:.6}10%{opacity:0}52%{opacity:0}54%{opacity:.8}57%{opacity:.2}59%{opacity:.55}62%{opacity:0}}
  @keyframes lightningBolt{0%,100%{opacity:0}3%{opacity:.95}6%{opacity:0}55%{opacity:0}58%{opacity:.9}61%{opacity:0}}
  .pa-finals-head .pa-pill{font-family:var(--display,system-ui,sans-serif);font-weight:900;font-size:15px;letter-spacing:2.5px;padding:6px 18px;border-radius:11px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 26px rgba(255,255,255,.28);text-shadow:0 0 12px rgba(255,255,255,.7),0 0 30px rgba(255,255,255,.4);animation:finSway 4.6s ease-in-out infinite;will-change:transform}
  .pa-bar{position:relative;display:flex;justify-content:center;width:min(100%,1160px);margin:0 auto 14px;box-sizing:border-box;pointer-events:none}
  .pa-fin-count{position:absolute;right:100%;top:50%;transform:translateY(-50%);padding-right:14px;white-space:nowrap;font-weight:800;color:#9aa0ad;font-size:12.5px;font-variant-numeric:tabular-nums}
  .pa-mix{width:100%;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,#16171d,#101116);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px 14px}
  .pa-wave-row{display:flex;align-items:stretch;gap:10px;width:100%}  /* r290: wave + LUFS ladder side by side (finals + grand finals) */
  .pa-bar-wave{flex:1;min-width:0;height:84px;position:relative}
  #paWave{width:100%;height:100%;display:block}
  .pa-lufs{flex:0 0 30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
  #paLufs{width:24px;flex:1;min-height:0;display:block}
  .pa-lufs-val{font:800 10px/1 ui-monospace,Menlo,monospace;color:#5dd29a;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.7)}
  .pa-lufs-cap{font:700 8px/1 ui-monospace,Menlo,monospace;letter-spacing:1.5px;color:#7d828e}
  .pa-bar-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;align-items:center;text-align:center;font-size:12px}
  .pa-track-num{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.6px;color:#ff4655;text-shadow:0 0 12px rgba(255,60,80,.7),0 0 26px rgba(255,40,60,.4);white-space:nowrap}
  .pa-bar-meta b{font-family:var(--display);font-weight:800;font-size:16px;color:#e9edf3;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pa-rank-badge{display:inline-flex;align-items:center;line-height:0}
  .pa-rank-badge:empty{display:none}
  .pa-rank-badge svg{width:20px;height:20px}
  .pa-elo{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;color:#efe4c8;letter-spacing:.3px}
  .pa-elo:empty{display:none}
  .pa-head{display:flex;align-items:center;gap:11px;justify-content:flex-start;min-height:16px}
  .pa-id{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left;gap:1px}
  .pa-pill{font-weight:900;font-size:15px;letter-spacing:1.5px;padding:6px 14px;border-radius:11px;color:#120f1a;background:linear-gradient(180deg,#f8cce4,#f0a9d0)}
  .pa-timer{position:absolute;left:100%;top:50%;margin-top:-48px;margin-left:14px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-weight:800;font-size:40px;font-variant-numeric:tabular-nums;width:96px;height:96px;display:grid;place-items:center;border-radius:50%;border:4px solid var(--accent,#ffcf6a);color:#fff;box-shadow:0 0 26px rgba(255,207,106,.45),0 0 0 1px rgba(255,255,255,.08) inset}
  .pa-timer[hidden]{display:none}
  .pa-timer.danger{border-color:#ff9d5a;color:#ffb27a;animation:paPump .5s ease-in-out infinite}
  .pa-timer.critical{border-color:#ff4d4d;color:#ff5a5a;animation:paShake .26s linear infinite}
  @media (max-width:760px){ .pa-timer{position:fixed;left:auto;right:10px;top:72px;margin:0;width:60px;height:60px;font-size:26px;border-width:3px;z-index:47} }  /* phones: left:100% shoved the countdown off the right edge (invisible during the whole vote window) → pin it top-right, below the cam/FAB row */
  @keyframes paPump{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  @keyframes paShake{0%,100%{transform:translateX(0) scale(1.06)}50%{transform:translateX(3px) scale(1.1)}}
  .pa-lanes{display:flex;gap:10px;align-items:stretch;width:min(100%,1160px);margin:0 auto}
  .pa-lane{position:relative;flex:1 1 0;min-width:0;cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:14px 12px;border-radius:0;background:linear-gradient(180deg,#191a21,rgba(18,19,25,.32));border:1px solid rgba(255,255,255,.16);border-bottom:0;overflow:hidden;text-align:center}
  .pa-fill{position:absolute;left:0;bottom:0;width:100%;height:0;background:linear-gradient(0deg,rgba(120,170,235,.12),rgba(120,170,235,0));transition:height .28s ease;z-index:0}
  .pa-lane>*{position:relative;z-index:1}
  .pa-av{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#0c0c10;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 3px 10px rgba(0,0,0,.35);flex:0 0 auto}  /* r278: 58→46 so the name always fits above the vote count (was clipping in narrow voting lanes) */
  .pa-rank{font-weight:800;font-size:12px;color:var(--muted,#9aa0ad);letter-spacing:.5px}
  .pa-name{font-weight:800;font-size:15px;line-height:1.2;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;word-break:break-word;flex:0 0 auto;min-height:2.4em}  /* r278: reserve 2 lines + never shrink so a vote landing can't squeeze/clip the song name out the bottom */
  .pa-votes{display:block;text-align:center;font-family:var(--body);font-weight:800;font-size:30px;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.3),0 0 36px rgba(255,255,255,.16);margin-top:auto;flex:0 0 auto}  /* r278: 36→30 + pushed to the bottom; the count is what clips (not the name) if a card is ever short */
  .pa-votes.bump{animation:paVotePop .34s cubic-bezier(.2,1.5,.3,1)}
  @keyframes paVotePop{0%{transform:scale(1)}42%{transform:scale(1.4)}100%{transform:scale(1)}}
  .pa-lane.leading .pa-votes{color:var(--accent);text-shadow:0 0 18px var(--accent),0 0 42px rgba(169,230,200,.45)}
  .pa-lane.won .pa-votes{color:#f0a9d0;text-shadow:0 0 18px #f0a9d0,0 0 42px rgba(240,169,208,.45)}
  .pa-lane.leading{box-shadow:none}
  .pa-lane.won{border-color:#f0a9d0;box-shadow:0 0 22px rgba(240,169,208,.5)}
  .pa-hint{text-align:center;font-size:11px;color:var(--muted)}
  .pa-now{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;text-align:center}
  .pa-now[hidden]{display:none}
  .pa-now-num{font-weight:900;font-size:18px;letter-spacing:.6px;color:var(--accent)}
  .pa-now-title{font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}
  .pa-lane.playing{border-color:#3ee07c;box-shadow:0 0 0 3px #3ee07c,0 0 26px rgba(62,224,124,.6),0 0 0 2px rgba(62,224,124,.45) inset;z-index:3}
  .pa-lane.playing::after{content:"\25B6 NOW";position:absolute;top:4px;left:0;right:0;text-align:center;font-weight:900;font-size:9px;letter-spacing:1px;color:#3ee07c;text-shadow:0 0 8px rgba(62,224,124,.85);z-index:2}
  /* the viewer's own live vote — blue aura on the lane they're standing on */
  .pa-lane.my-vote{border-color:#3da9ff;box-shadow:0 0 0 2px #3da9ff inset,0 0 26px rgba(61,169,255,.6),0 0 60px rgba(61,169,255,.3)}
  .pa-lane.my-vote::before{content:"◆ YOUR VOTE";position:absolute;bottom:3px;left:0;right:0;text-align:center;font-weight:900;font-size:8.5px;letter-spacing:.6px;color:#7fc4ff;text-shadow:0 0 8px rgba(61,169,255,.9);z-index:3}
  @keyframes myVote{50%{box-shadow:0 0 0 2px #7fc4ff inset,0 0 34px rgba(61,169,255,.85),0 0 80px rgba(61,169,255,.45)}}
  .pa-lanes.crowned .pa-lane{transition:flex .6s cubic-bezier(.2,.9,.3,1.05),opacity .5s ease,transform .5s ease,box-shadow .45s ease}
  .pa-lanes.crowned .pa-lane.eliminated{flex-grow:0;flex-basis:0;width:0;min-width:0;opacity:0;transform:scale(.5);padding-left:0;padding-right:0;border-color:transparent;pointer-events:none}
  .pa-lanes.crowned .pa-lane.won{box-shadow:0 0 40px rgba(154,220,208,.6),0 0 0 3px rgba(154,220,208,.7) inset;border-color:#9adcd0}
  .pa-lanes.crowned .pa-lane.won::after{content:"👑 WINNER";position:absolute;top:4px;left:0;right:0;text-align:center;font-weight:900;font-size:10px;letter-spacing:1px;color:#9adcd0;z-index:2}
  .pa-choose{text-align:center;font-weight:800;font-size:14px;color:#f0a9d0;background:rgba(12,12,16,.5);padding:7px 12px;border-radius:10px}
  .pa-choose[hidden]{display:none}
  .pa-lobby .pa-bar,.pa-lobby .pa-lanes{display:none}
  .pa-lobby .pa-hint{display:block;text-align:center;font-size:16px;margin-top:40px;opacity:.92;letter-spacing:.3px;color:#cdd2dc}
  #paHint:empty{display:none}  /* no instructional hint text — collapse when empty so it never shows or leaves a gap */
  #pchat{position:absolute;left:14px;bottom:14px;top:auto;width:min(58vw,360px);height:288px;z-index:18;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px);mask-image:linear-gradient(180deg,transparent 0,#000 30px)}  /* r263: jchat overlay — smaller font (size=1) shows MORE lines, LOCKED bottom-left, transparent. pointer-events:none so taps pass through to move on the floor (#pchatInput keeps its own). Mirrors the host. r287: +20% (was min(48vw,300px)/240). r290: soft top fade so history scrolls in cleanly instead of a hard cut-off */
  body.cam-on #pchat{bottom:234px}  /* cam live → lift the chat ABOVE the bottom-left projector (r287: .projcam 390x220 @ bottom:6 → top ~226) */
  #ptwitch{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;pointer-events:none}  /* full-size jchat iframe — no header/input to crop */
  /* FALLBACK: jchat blocked (adblock) → native twitch.tv embed (opaque + cropped header/input) */
  body.tw-embed #pchat{background:#18181b;border-radius:10px;overflow:hidden}
  body.chat-off #pchat{display:none}  /* r313: settings → "show chat" off hides the on-screen twitch feed (the only way to hide it on mobile) */
  body.tw-embed #ptwitch{inset:auto;left:0;top:-106px;width:100%;height:calc(100% + 210px);background:#18181b}
  #pchatLog .r img.tw-emote{height:20px;width:auto;vertical-align:-5px;margin:0 1px}  /* inline Twitch emotes in the chat feed */
  .pchat-head{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line);color:var(--muted);padding:8px 12px;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:1.6px}
  #pchatLog{display:flex;flex-direction:column;gap:6px;padding:2px 6px 0 2px;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;pointer-events:auto;overscroll-behavior:contain;font-family:var(--body);font-size:calc(var(--chat-fs,15px) * var(--uisc,1));line-height:1.36;background:transparent;text-align:left;align-items:flex-start;scrollbar-width:none;-ms-overflow-style:none}  /* OUR relay feed (bots filtered server-side) — SCROLLABLE (r274): sticks to the bottom, scroll up for history. r290: text-align left, scrollbar hidden (the top fade signals history), font-size via --chat-fs (settings slider) */
  #pchatLog::before{content:'';margin-top:auto}  /* push the rows to the bottom when few, scroll cleanly when many */
  #pchatLog::-webkit-scrollbar{width:0;height:0;display:none}  /* r290: hide the out-of-place scrollbar — wheel/drag still scrolls, the top fade shows there's history */
  #pchatLog .r{background:rgba(12,12,16,.58);border-radius:10px;padding:5px 12px;align-self:flex-start;max-width:100%;word-break:break-word;text-align:left}
  #pchatLog .r b{font-family:var(--display);font-weight:800;margin-right:5px}
  #pchatLog .r span{font-weight:600;opacity:.96}
  /* r329: the embedded Twitch player. Deliberately a SMALL floating panel, not a takeover — the pixel floor is still
     the page. When it's on, it becomes the audio (local track playback mutes) and the waveform/now-playing shift to
     match its real latency, so what you SEE lines up with what you HEAR. */
  #twWrap{position:fixed;right:10px;top:64px;z-index:47;width:min(360px,44vw);border-radius:10px;overflow:hidden;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 2px rgba(145,70,255,.5);display:flex;flex-direction:column}  /* r394: a flex column (video + chat), and the 16/9 moved down to #twVid — a wrapper-level ratio would crush the chat to nothing the moment it opened */
  /* Corners, not free position. A player parked mid-screen covers the floor and is worse than one tucked away,
     and a corner is the only thing worth remembering between visits. Bottom corners clear the touch pad (#touch). */
  #twWrap.tw-tl{left:10px;top:64px;right:auto;bottom:auto}
  #twWrap.tw-tr{right:10px;top:64px;left:auto;bottom:auto}
  #twWrap.tw-bl{left:10px;bottom:calc(84px + env(safe-area-inset-bottom));right:auto;top:auto}
  #twWrap.tw-br{right:10px;bottom:calc(84px + env(safe-area-inset-bottom));left:auto;top:auto}
  #twWrap.tw-big{width:min(560px,64vw)}
  /* The iframe eats every pointer event it can reach, which would drop the drag the moment the cursor crossed
     the video. Killing its pointer-events for the duration is what keeps the gesture alive. */
  #twWrap.tw-drag #twEmbed,#twWrap.tw-drag iframe{pointer-events:none}
  #twGrip{position:absolute;left:0;top:0;right:78px;height:24px;z-index:3;cursor:grab;touch-action:none;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0))}  /* there is no grabbable chrome over video, so the drag needs its own strip. right: clears the three buttons (close 4, size 30, chat 56) */
  #twWrap.tw-drag #twGrip{cursor:grabbing}
  #twSize{position:absolute;top:4px;right:30px;z-index:4;width:22px;height:22px;border:0;border-radius:6px;background:rgba(10,10,14,.72);color:#fff;font-size:12px;line-height:1;cursor:pointer}
  #twChat{position:absolute;top:4px;right:56px;z-index:4;width:22px;height:22px;border:0;border-radius:6px;background:rgba(10,10,14,.72);color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0}
  #twChat.on{background:rgba(145,70,255,.85)}
  #twWrap[hidden]{display:none}
  #twVid{position:relative;width:100%;aspect-ratio:16/9;flex:0 0 auto;background:#000}  /* the ratio lives here so the wrapper is free to grow a chat panel underneath */
  #twWrap #twEmbed{position:absolute;inset:0;width:100%;height:100%}
  #twWrap #twEmbed iframe{width:100%;height:100%;border:0;display:block}
  /* r394 — TWITCH CHAT under the player. Twitch's own chat embed, not our relay feed, because it is the only one
     that carries the viewer's twitch.tv session and can therefore SEND. A browser blocking third-party cookies
     renders it logged-out and read-only, which is exactly why the header keeps a popout link out to twitch.tv. */
  #twChatBox{display:flex;flex-direction:column;min-height:0;height:var(--tw-chat-h,260px);background:#18181b;border-top:1px solid rgba(255,255,255,.1)}
  #twChatBox[hidden]{display:none}
  #twChatHead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 8px;font:800 9.5px/1.7 ui-monospace,Menlo,monospace;letter-spacing:1.2px;text-transform:uppercase;color:#b9a7ff;background:rgba(145,70,255,.14)}
  #twChatHead a{color:#b9a7ff;text-decoration:none;font-size:12px;padding:0 3px}
  #twChatMount{flex:1 1 auto;min-height:0}
  #twChatMount iframe{width:100%;height:100%;border:0;display:block}
  /* r394 — DRAG TO RESIZE. One axis: #twVid's ratio supplies the height, so width is the whole gesture. The handle
     sits on the edge facing INTO the screen — the docked edge is pinned by its corner class and dragging it would
     move nothing. */
  #twResize{position:absolute;top:50%;margin-top:-26px;width:14px;height:52px;z-index:5;touch-action:none;cursor:ew-resize;border-radius:7px;background:rgba(10,10,14,.55)}
  #twResize::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:20px;margin:-10px 0 0 -1px;background:rgba(255,255,255,.55);border-radius:1px;box-shadow:3px 0 0 rgba(255,255,255,.55),-3px 0 0 rgba(255,255,255,.55)}
  #twWrap.tw-tr #twResize,#twWrap.tw-br #twResize{left:0}
  #twWrap.tw-tl #twResize,#twWrap.tw-bl #twResize{right:0}
  #twClose{position:absolute;top:4px;right:4px;z-index:2;width:22px;height:22px;border:0;border-radius:6px;background:rgba(10,10,14,.72);color:#fff;font-size:13px;line-height:1;cursor:pointer}
  #twSync{position:absolute;left:0;bottom:0;z-index:2;padding:2px 7px;border-radius:0 7px 0 0;background:rgba(10,10,14,.72);color:#b9a7ff;font:700 10px ui-monospace,Menlo,monospace;letter-spacing:.04em}
  @media(max-width:760px){ #twWrap{width:min(210px,52vw)} }  /* width only: right/top here would beat the corner classes */
  #pchatInput{position:absolute;width:min(360px,80vw);z-index:30}
  #pchatInput[hidden]{display:none}
  #touch{position:absolute;bottom:calc(64px + env(safe-area-inset-bottom));left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px;pointer-events:none;gap:10px}  /* +safe-area so the joystick/jump clear the iPhone home indicator (viewport-fit=cover) */
  #touch button{pointer-events:auto;width:62px;height:62px;border-radius:50%;font-size:15px;opacity:.85;background:rgba(40,43,54,.8);display:flex;align-items:center;justify-content:center;padding:0;line-height:1;text-align:center;box-sizing:border-box}
  .tpad{display:flex;gap:8px}
  #bJ{width:84px;border-radius:40px}
  /* analog movement joystick (left thumb) */
  #joy{pointer-events:auto;width:122px;height:122px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(40,43,54,.62),rgba(20,22,28,.5));border:1px solid rgba(255,255,255,.12);position:relative;touch-action:none;flex:0 0 auto;box-shadow:inset 0 0 22px rgba(0,0,0,.35)}
  .joy-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#cdd3df,#9aa1b2 70%,#7e8696);box-shadow:0 5px 14px rgba(0,0,0,.45);will-change:transform}
  .touch-right{display:flex;align-items:center;gap:12px}
  .tbtn{font-size:22px}
  /* volume row */
  .np-audio{display:flex;align-items:center;justify-content:center;gap:18px;padding:4px 2px 5px}
  .np-vol-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
  .np-vol{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:24px;height:58px;background:transparent;cursor:pointer;padding:0}
  .np-vol.vol-legacy{-webkit-appearance:slider-vertical;appearance:auto;writing-mode:horizontal-tb;direction:ltr;width:22px}  /* old iOS/Chrome ignore writing-mode on range inputs → JS adds this when the slider rendered crushed-horizontal, giving the native (unstyled) vertical control instead */
  .np-vol::-webkit-slider-runnable-track{width:10px;height:100%;border-radius:6px;background:rgba(255,255,255,.18)}
  .np-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.55);margin-left:-5px}
  .np-vol::-moz-range-track{width:10px;border-radius:6px;background:rgba(255,255,255,.18)}
  .np-vol::-moz-range-thumb{width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--accent)}
  .np-vol-cap{font-size:9px;font-weight:800;letter-spacing:1.4px;color:#7e8696}
  /* right column beside the wave: loudness meter, then volume, then a chunky pixel mute below it */
  .np-side{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;flex:0 0 auto;padding-top:0}
  .np-side .np-lufs{flex:0 0 auto}
  .np-side #plufs{flex:1 1 auto;width:34px;height:auto;min-height:0;max-height:240px}  /* tall LED ladder reaching the top of the wave, like host #hlufs. r278: max-height caps a height:auto↔canvas.height feedback loop that could make the ladder "descend" infinitely on some desktop layouts. */
  .np-mute{position:relative;width:46px;height:46px;flex:0 0 auto;border:0;padding:0;cursor:pointer;border-radius:4px;display:grid;place-items:center;color:#3a2a12;background:#d9b878;image-rendering:pixelated;box-shadow:inset 3px 3px 0 #f2dcab,inset -3px -3px 0 #9c7a42,0 3px 0 #6e5226,0 5px 7px rgba(0,0,0,.45);transition:transform .05s}
  .np-mute:active{transform:translateY(2px);box-shadow:inset 3px 3px 0 #f2dcab,inset -3px -3px 0 #9c7a42,0 1px 0 #6e5226}
  .np-mute.off{background:#9a9a9a;color:#222;box-shadow:inset 3px 3px 0 #c6c6c6,inset -3px -3px 0 #6e6e6e,0 3px 0 #4a4a4a,0 5px 7px rgba(0,0,0,.45)}
  .np-mute .mute-ic{display:block}
  .np-mute.off .mute-wave{display:none}
  .np-mute.off::after{content:"";position:absolute;width:3px;height:30px;background:#d23b2e;border-radius:1px;transform:rotate(45deg);box-shadow:0 0 0 1.5px rgba(0,0,0,.5)}
  /* relocated volume + mute cluster — bottom-right, just above the level bar (#xpBar at bottom:12), lilac to match it */
  #npControls{position:fixed;right:12px;bottom:calc(58px + env(safe-area-inset-bottom));z-index:46;display:flex;flex-direction:column-reverse;align-items:center;gap:8px;padding:9px 8px 8px;border-radius:8px;background:linear-gradient(180deg,#241c3c,#171125);box-shadow:0 4px 14px rgba(0,0,0,.5),inset 2px 2px 0 rgba(168,119,255,.28),inset -2px -2px 0 rgba(0,0,0,.42);image-rendering:pixelated}  /* r308: VERTICAL sliders — the panel trades its ~230px width for a slim ~70px column (mute stays, parked at the bottom via column-reverse) */
  #npControls .np-mute{width:34px;height:34px;border-radius:6px;color:#1a1130;background:#b79bff;box-shadow:inset 2px 2px 0 #d8c6ff,inset -2px -2px 0 #7a4fd6,0 2px 0 #4e2da0}
  #npControls .np-mute:active{transform:translateY(1px);box-shadow:inset 2px 2px 0 #d8c6ff,inset -2px -2px 0 #7a4fd6,0 1px 0 #4e2da0}
  #npControls .np-mute.off{background:#6b6480;color:#221c33;box-shadow:inset 2px 2px 0 #9089a6,inset -2px -2px 0 #46415c,0 2px 0 #2e2a3e}
  #npControls .np-mute.off::after{height:22px;width:2px;background:#ff5a6e}
  #npControls .np-vol{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:18px;height:74px;background:transparent;cursor:pointer;padding:0}  /* vertical-lr + rtl = up is louder */
  #npControls .np-vol::-webkit-slider-runnable-track{width:8px;height:100%;border-radius:5px;background:rgba(168,119,255,.25)}
  #npControls .np-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#c9a4ff;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.55);margin:0 0 0 -4px}
  #npControls .np-vol::-moz-range-track{width:8px;height:100%;border-radius:5px;background:rgba(168,119,255,.25)}
  #npControls .np-vol::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#c9a4ff}
  /* r289: two stacked labeled sliders — MUSIC (battle+jukebox+CDs) vs VOICE (bishu's live cam/mic) */
  #npControls .np-sliders{display:flex;flex-direction:row;gap:4px}
  #npControls .np-slabel{display:flex;flex-direction:column-reverse;align-items:center;gap:5px;cursor:pointer;margin:0}  /* column-reverse: slider on top, its tiny label under it */
  #npControls .np-slabel>span{width:auto;flex:0 0 auto;text-align:center;font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#b6a6e0;-webkit-user-select:none;user-select:none}
  #npControls .np-slabel .np-vol{margin:0}
  /* r326: phones used to get `#npControls{display:none}` — which hid the MUSIC slider, the VOICE slider AND the mute
     button, with no substitute anywhere in the mobile UI. That's the whole "the sliders don't work" report: on the device
     most viewers actually use, they didn't exist. Now the cluster stays, collapsed to just the mute button; tapping the
     ⇅ handle expands the two sliders over the floor. Device volume can't balance bishu's mic against the music — these can. */
  @media (max-width:760px){
    #npControls{right:8px;bottom:calc(112px + env(safe-area-inset-bottom));padding:7px 6px 6px;gap:6px}
    body:not(.vol-open) #npControls .np-vol{display:none}          /* collapsed → mute button only */
    #npVolToggle{display:flex;align-items:center;justify-content:center;width:34px;height:26px;margin:0;padding:0;border:0;border-radius:7px;background:linear-gradient(180deg,#2e2450,#1d1533);color:#cbb6ff;font:800 13px ui-monospace,Menlo,monospace;cursor:pointer;box-shadow:inset 1px 1px 0 rgba(168,119,255,.3),inset -1px -1px 0 rgba(0,0,0,.45)}
    body.vol-open #npVolToggle{background:linear-gradient(180deg,#4a3a7a,#2b2048);color:#fff}
  }
  @media (min-width:761px){ #npVolToggle{display:none} }            /* desktop always shows both sliders — no toggle needed */
  /* seamless touch: no blue/grey tap flash, no text selection, no long-press menus on game controls */
  #play, #play *{-webkit-tap-highlight-color:transparent}
  #play button,#joy,.joy-knob,#emotes .emo,.pl-fab,.np-vol,#world,.np-sound{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none}
  /* r290: the whole /play UI is non-selectable (no accidental text-highlight when click-dragging to move) — text fields opt back in so you can still edit + select there */
  #play{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
  #play input,#play textarea,#play select,#play [contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text}
  #world{touch-action:none}
  .hint{position:absolute;bottom:12px;right:14px;font-size:10px;color:rgba(174,180,194,.5);background:rgba(12,12,16,.32);padding:3px 9px;border-radius:20px;white-space:nowrap;z-index:15}
  @media(hover:hover) and (min-width:761px){.hint{display:none}}   /* desktop: no control hint (the ? panel covers it) — keyboard is obvious */
  @media(hover:hover) and (min-width:761px){#touch{display:none}}
  /* TOUCH DEVICES (phones): keep the on-screen movement pad clear. The chat panel otherwise sits on
     top of the ◀ ▶ ▲ buttons (translucent but opaque enough to hide them). Lift it above the control
     band, and drop the keyboard hint — the buttons are self-explanatory on a phone. */
  @media(hover:none),(max-width:760px){
    #pchat{bottom:210px;height:min(32vh,260px)}  /* phone: lift the Twitch feed clear of the joystick + jump/chat buttons */
    .hint{display:block;top:278px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);text-align:center}  /* phone: a touch-control hint, tucked just below the (r313-shrunk) wave panel so it sits on open floor, not under the gift button */
  }
  .aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(130% 95% at 50% -18%,#13141b 0%,var(--bg) 60%)} /* corner glow blobs removed per Dru ("AI balls of light"); base bg kept */
  /* background stars = THE pixel diamond-star asset (matches the host empty-state star), scattered + twinkling crisply */
  .blob{position:absolute;image-rendering:pixelated;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23cfeeff'%3E%3Crect x='11' y='1' width='2' height='6'/%3E%3Crect x='11' y='17' width='2' height='6'/%3E%3Crect x='1' y='11' width='6' height='2'/%3E%3Crect x='17' y='11' width='6' height='2'/%3E%3Crect x='10' y='7' width='4' height='2'/%3E%3Crect x='9' y='9' width='6' height='2'/%3E%3Crect x='8' y='11' width='8' height='2'/%3E%3Crect x='9' y='13' width='6' height='2'/%3E%3Crect x='10' y='15' width='4' height='2'/%3E%3Crect x='7' y='10' width='2' height='4'/%3E%3Crect x='15' y='10' width='2' height='4'/%3E%3Crect x='6' y='6' width='2' height='2'/%3E%3Crect x='16' y='6' width='2' height='2'/%3E%3Crect x='6' y='16' width='2' height='2'/%3E%3Crect x='16' y='16' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(150,210,255,.6));animation:twinkle 5s ease-in-out infinite}
  .b1{top:15%;left:9%;width:34px;height:34px}
  .b2{top:13%;right:16%;width:24px;height:24px;animation-delay:1.2s}
  .b3{top:9%;right:32%;width:18px;height:18px;animation-delay:2.4s}
  .b4{top:24%;left:31%;width:16px;height:16px;animation-delay:1.7s}
  .b5{top:20%;right:7%;width:20px;height:20px;animation-delay:.6s}
  .b6{top:30%;left:62%;width:14px;height:14px;animation-delay:3.1s}
  @keyframes twinkle{0%,100%{transform:scale(.78);opacity:.3}50%{transform:scale(1.16);opacity:.85}} /* scale+fade only — no rotate, so the pixel star stays crisp */
  .grain{display:none} /* backdrop grid removed per Dru — the ambience pass can add real (non-grid) texture later */
  #emotes{position:absolute;display:flex;gap:7px;z-index:16;pointer-events:none}
  body.lobby #emotes{display:none}  /* flags are ELO reactions — no flag buttons in the lobby hangout */
  #emotes .emo{pointer-events:auto;width:38px;height:38px;border-radius:50%;border:none;background:rgba(40,43,54,.82);display:grid;place-items:center;line-height:0;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.32);transition:transform .09s;touch-action:manipulation;position:relative}
  #emotes .emo svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:21px;height:21px;display:block;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
  #emotes .emo .emo-k{position:absolute;bottom:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:rgba(12,12,16,.92);color:#cfd3dc;font-size:8px;font-weight:800;line-height:13px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.5);z-index:2}
  /* crowd-juice fill: rises inside the circle in the button's own colour (matches the squirt) */
  #emotes .emo .emo-juice{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:0}
  #emotes .emo .emo-juice b{position:absolute;left:0;right:0;bottom:0;height:0;background:currentColor;opacity:.34;border-top:2px solid currentColor;box-sizing:border-box;transition:height .14s linear}
  #emotes .emo.brimming{box-shadow:0 0 0 2px currentColor,0 0 16px 1px currentColor,0 4px 12px rgba(0,0,0,.32)}
  #emotes .emo:active{transform:scale(1.25)}
  /* desktop: small centered row along the bottom (numbered for the 1–4 keyboard shortcuts) */
  @media(hover:hover) and (min-width:761px){#emotes{left:50%;bottom:16px;transform:translateX(-50%);flex-direction:row}}
  /* phone: chunky vertical stack hugging the bottom-right so a right thumb taps them; no keyboard numbers */
  @media(hover:none),(max-width:760px){
    #emotes{right:10px;bottom:160px;flex-direction:column;gap:11px}    /* lifted up off the JUMP button */
    #emotes .emo{width:46px;height:46px}
    #emotes .emo svg{width:25px;height:25px}
    #emotes .emo .emo-k{display:none}
    .np-vol-wrap{display:none}              /* the in-app volume knob doesn't work on phones — use the phone's own volume */
    .np-side{gap:9px}
    .np-side #plufs{height:92px}            /* the LUFS meter grows tall into the space the volume knob left */
  }
#pconfetti{position:fixed;inset:0;z-index:530;pointer-events:none;display:none}/* above #pmintOverlay (520) so the perfect-mint confetti burst isn't hidden behind the near-opaque reveal backdrop */
#pconfetti.on{display:block}
#pwinOverlay{position:fixed;inset:0;z-index:500;display:grid;place-items:start center;padding-top:5vh;background:radial-gradient(130% 62% at 50% 6%,rgba(40,30,55,.52),rgba(8,8,12,.04) 72%);opacity:0;pointer-events:none;transition:opacity .4s} /* see-through so the crowd + chat hype shows during the crown; card sits up top, floor band stays clear */
#pwinOverlay[hidden]{display:none}
#pwinOverlay.go{opacity:1}
.pwin-rays{display:none}  /* r280: spinning sunburst removed — too much motion behind the winner */
@keyframes pwoSpin{to{transform:rotate(360deg)}}
#pwinCard{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 30px}
#pwinOverlay.go #pwinCard{animation:pwoCard .7s cubic-bezier(.18,1.1,.3,1.25)}
@keyframes pwoCard{0%{transform:scale(.6) translateY(30px);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.pwin-crown{font-size:64px;filter:drop-shadow(0 8px 22px rgba(240,200,120,.6))}  /* r280: no infinite bob */
@keyframes pwoCrown{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pwin-elo{font-family:var(--display);font-weight:900;font-size:86px;line-height:.9;letter-spacing:-1px;background:linear-gradient(90deg,#ffe8ac,#f8cce4,#9adcd0,#ffe8ac);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 60px rgba(255,220,150,.3)}
#pwinOverlay.go .pwin-elo{animation:pwoElo .8s cubic-bezier(.2,1.3,.3,1.1)}  /* r280: keep the one-shot entrance, drop the never-ending shimmer */
@keyframes pwoShine{to{background-position:200% center}}
@keyframes pwoElo{0%{transform:scale(2.4);opacity:0;filter:blur(8px)}55%{transform:scale(.92)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
.pwin-avwrap{position:relative;width:120px;height:120px;margin-top:6px}
.pwin-avwrap img{width:100%;height:100%;border-radius:26px;object-fit:cover;background:#222;display:block}
.pwin-ring{position:absolute;inset:-5px;border-radius:30px;padding:3px;background:linear-gradient(100deg,#ffc48a,#f0a35f 55%,#ec9270);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}  /* r280: static ring, no infinite spin */
@keyframes pwoRing{to{transform:rotate(360deg)}}
#pwinName{font-family:var(--display);font-weight:900;font-size:clamp(24px,5vw,46px);letter-spacing:-1px;line-height:1.02;margin:6px 0 0;color:#fff;max-width:min(90vw,860px);overflow-wrap:anywhere;text-wrap:balance}  /* scale + wrap a long producer/track name so the winner card stays clean instead of blowing out */
.pwin-sub{font-family:var(--display);font-weight:800;letter-spacing:4px;font-size:14px;color:#9aa0b4}
#pwinWave{display:block;width:min(620px,74vw);height:96px;margin:14px 0 2px;border-radius:14px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.1);box-shadow:0 0 36px rgba(255,120,200,.22) inset}
#pwinOverlay.go #pwinWave{animation:pwoWave .6s cubic-bezier(.2,1.1,.3,1.2) .25s both}
@keyframes pwoWave{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
/* ---- CD mint-reveal (post-finals hype screen) ---- */
#pmintOverlay{position:fixed;inset:0;z-index:520;display:grid;place-items:center;padding:24px;background:radial-gradient(130% 90% at 50% 30%,rgba(28,22,46,.82),rgba(6,6,10,.92));opacity:0;pointer-events:none;transition:opacity .42s}
#pmintOverlay[hidden]{display:none}
#pmintOverlay.go{opacity:1;pointer-events:auto}
#pmintCard{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:90vw}
#pmintOverlay.go #pmintCard{animation:pmCard .6s cubic-bezier(.18,1.1,.3,1.25)}
@keyframes pmCard{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.pmint-kick{font-family:var(--display);font-weight:800;letter-spacing:3px;font-size:13px;color:#9aa0b4;text-transform:uppercase}
#pmintCD{width:200px;height:200px;image-rendering:pixelated;filter:drop-shadow(0 10px 28px rgba(0,0,0,.6))}
.pmint-pct{font-family:var(--display);display:flex;align-items:baseline;gap:6px;line-height:.9}
.pmint-pct b{font-size:74px;font-weight:900;letter-spacing:-1px;background:linear-gradient(90deg,#ffe8ac,#9adcd0,#8fc4ff,#ffe8ac);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pwoShine 2.6s linear infinite}
.pmint-pct span{font-size:18px;font-weight:800;color:#aeb4c2}
.pmint-tier{font-family:var(--display);font-weight:900;letter-spacing:2px;font-size:20px;color:#9adcd0;opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s}
.pmint-tier.show{opacity:1;transform:none}
.pmint-tier.perfect{color:#5ff0d0;text-shadow:0 0 22px rgba(95,240,208,.7);animation:pmPerfect 1.2s ease-in-out infinite}
@keyframes pmPerfect{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.pmint-name{font-family:var(--display);font-weight:800;font-size:15px;color:#e7e9ee;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmint-sub{font-size:11px;color:rgba(174,180,194,.7)}
.pmint-cont{margin-top:10px;font-family:var(--display);font-weight:800;letter-spacing:1px;font-size:14px;color:#0c0c11;background:linear-gradient(180deg,#ffe8ac,#f0c98a);border:none;border-radius:11px;padding:10px 28px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.pmint-cont:hover{filter:brightness(1.06)}
.pmint-flip{margin-top:2px;font-family:var(--display);font-weight:700;letter-spacing:1px;font-size:12px;color:#cfd3dc;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:5px 14px;cursor:pointer}
.pmint-flip:hover{background:rgba(255,255,255,.14);color:#fff}
.pmint-flip[hidden]{display:none}
  .emo.elo-react{font-size:25px}
  .emo.elo-react.green{box-shadow:0 0 15px rgba(143,217,176,.55),0 4px 12px rgba(0,0,0,.32)}
  .emo.elo-react.orange{box-shadow:0 0 15px rgba(236,200,120,.55),0 4px 12px rgba(0,0,0,.32)}
  .emo.elo-react.white{box-shadow:0 0 15px rgba(255,255,255,.45),0 4px 12px rgba(0,0,0,.32)}
  .emo.elo-react.red{box-shadow:0 0 15px rgba(240,123,144,.6),0 4px 12px rgba(0,0,0,.32)}
  .pwave-box{position:relative;isolation:isolate;border-radius:10px;transition:transform .2s ease,box-shadow .2s ease}
  #pWaveRed{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:10px;background:linear-gradient(180deg,rgba(255,72,92,.95),rgba(214,16,44,1));mix-blend-mode:color;opacity:0}
  #pWaveRed.on{animation:pRedWash .95s ease both}
  @keyframes pRedWash{0%{opacity:0}20%{opacity:1}66%{opacity:1}100%{opacity:0}}
  #pAwardPop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);z-index:8;pointer-events:none;display:flex;flex-direction:column;align-items:center;opacity:0;text-shadow:0 2px 14px rgba(0,0,0,.75)}
  #pAwardPop b{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:900;font-size:44px;line-height:1;letter-spacing:1px}
  #pAwardPop span{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:800;font-size:14px;letter-spacing:3px;color:#fff;margin-top:3px}
  #pAwardPop.show{animation:pAwardPop .8s cubic-bezier(.2,1.3,.3,1) both}
  #pAwardPop.fin{filter:drop-shadow(0 0 20px rgba(255,40,70,.95))}
  #pAwardPop.fin b{font-size:56px}
  /* r298: RANK UP pop — an award crossed a tier boundary; floats up over the wave a beat after the award pop */
  #pRankUpPop{position:absolute;left:50%;top:38%;z-index:9;pointer-events:none;display:none;flex-direction:column;align-items:center;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 20px var(--ruc,#ffd45a)}
  #pRankUpPop b{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:900;font-size:34px;line-height:1;letter-spacing:2px;color:var(--ruc,#ffd45a)}
  #pRankUpPop span{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:800;font-size:15px;letter-spacing:4px;color:#fff;margin-top:4px}
  #pRankUpPop.go{display:flex;animation:pRankUpRise 2s cubic-bezier(.2,1.1,.3,1) both}
  @keyframes pRankUpRise{0%{opacity:0;transform:translate(-50%,-30%) scale(.55)}16%{opacity:1;transform:translate(-50%,-56%) scale(1.2)}30%{transform:translate(-50%,-60%) scale(1)}78%{opacity:1;transform:translate(-50%,-72%) scale(1)}100%{opacity:0;transform:translate(-50%,-105%) scale(.95)}}
  #pAwardPop.fin.show{animation:pAwardPop 1.15s cubic-bezier(.2,1.3,.3,1) both}
  @keyframes pAwardPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}32%{transform:translate(-50%,-50%) scale(1)}72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1.04)}}
  .pwave-box.p-award{animation:pBoxPulse .6s cubic-bezier(.2,1.3,.3,1) both;box-shadow:0 0 0 2px var(--awc) inset,0 0 26px var(--awc)}
  @keyframes pBoxPulse{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}
  .pwave-box.p-fin{animation:pBoxFin 1.15s cubic-bezier(.2,1.4,.3,1) both;z-index:30}
  @keyframes pBoxFin{0%{transform:scale(1)}22%{transform:scale(1.18)}46%{transform:scale(.99)}66%{transform:scale(1.04)}100%{transform:scale(1)}}
  /* SUSTAINED award (held until the track changes) */
  #pAwardTag{position:absolute;top:7px;right:9px;z-index:6;pointer-events:none;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:900;font-size:12px;letter-spacing:.5px;padding:3px 9px;border-radius:8px;color:#fff;background:rgba(8,9,14,.62);border:1.5px solid var(--atc,#cfd3dc);box-shadow:0 0 13px -2px var(--atc,transparent);opacity:0;transform:translateY(-5px);transition:opacity .35s ease,transform .35s ease}
  #pAwardTag.on{opacity:1;transform:translateY(0)}
  .pwave-box.held{box-shadow:0 0 0 1.5px var(--atc,transparent) inset,0 0 24px -6px var(--atc,transparent)}
  .pl-fab{position:fixed;left:12px;top:12px;z-index:40;width:46px;height:46px;border-radius:50%;border:none;background:linear-gradient(180deg,#2a2c38,#1a1c24);box-shadow:0 6px 18px rgba(0,0,0,.5);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}  /* moved to the top-left (cam now owns the bottom-left corner) */
  .pl-fab:active{transform:scale(.94)}
  body.crown-lock .pl-fab,body.crown-lock #pbSubmit,body.crown-lock #freeBox{pointer-events:none;opacity:.35;transition:opacity .3s}  /* the winner overlay is see-through → briefly lock the FABs/submit so a tap can't open a panel over the crown */
  /* inventory: level FAB + progress panel */
  .pl-lvl{display:flex!important;flex-direction:column;background:linear-gradient(180deg,#3a2f5e,#241c3c);box-shadow:0 6px 18px rgba(0,0,0,.5),inset 2px 2px 0 rgba(168,119,255,.32),inset -2px -2px 0 rgba(0,0,0,.32)}
  .pl-lvl .pl-lvl-k{font-size:7px;font-weight:800;letter-spacing:.12em;color:#b9a3e8;line-height:1;margin-top:7px}
  .pl-lvl #invFabLvl{font-size:17px;font-weight:900;color:#fff;line-height:1.05}
  .inv-card{text-align:center}
  .inv-lvlrow{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:8px 0 10px}
  .inv-lvlk{font-size:13px;font-weight:800;letter-spacing:.12em;color:#b9a3e8;text-transform:uppercase}
  .inv-lvln{font-size:42px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(168,119,255,.5)}
  .inv-bar{position:relative;height:14px;border-radius:4px;background:#0c0c14;box-shadow:inset 2px 2px 0 rgba(0,0,0,.55),inset -1px -1px 0 rgba(255,255,255,.05);overflow:hidden;image-rendering:pixelated;margin:0 2px}
  .inv-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#7a32e6,#a877ff);box-shadow:inset 0 2px 0 rgba(255,255,255,.3);transition:width .45s cubic-bezier(.2,1,.3,1)}
  .inv-exp{font-size:12px;color:#9a90b5;margin:9px 0 15px}
  .inv-stat{font-size:15px;color:#e7dcc6;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}
  .inv-stat b{color:#ffd45a;font-size:19px;font-variant-numeric:tabular-nums}
  .inv-coin{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe79a,#e0a52a);box-shadow:inset -1px -1px 0 rgba(120,80,0,.5),0 0 6px rgba(255,200,60,.4)}
  .inv-note{font-size:11px;color:#8a7fa8;line-height:1.5;margin:15px auto 0;max-width:300px}
  /* ===== INVENTORY panel — Stardew × Diablo 2 (pixel-embossed, dark purple) ===== */
  .inv2{position:relative;width:calc(min(560px,95vw) / var(--uisc,1));max-height:calc(92vh / var(--uisc,1));max-height:calc(92dvh / var(--uisc,1));overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:15px 15px 17px;border-radius:9px;background:linear-gradient(180deg,#3a2740,#251a30);box-shadow:0 0 0 3px #160d1d,0 0 0 5px #6b4a86,0 0 0 7px #160d1d,inset 0 0 0 2px rgba(160,106,58,.45),0 18px 50px rgba(0,0,0,.6);color:#e7dcc6;image-rendering:pixelated}
  .inv2-title{text-align:center;font-size:22px;font-weight:900;letter-spacing:.2em;color:#ffce5a;text-shadow:0 2px 0 #6e3a12,0 0 12px rgba(255,200,60,.3);text-transform:uppercase;margin:1px 0 3px}
  /* icon-button centering: grid + place-items + zero padding + line-height:1 — the reliable recipe so glyphs sit dead-centre (the recurring off-centre cause is default button padding/line-height) */
  .inv2-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;border-radius:5px;cursor:pointer;background:#3a2740;color:#c7aee0;font-weight:900;font-size:13px;display:grid;place-items:center;padding:0;line-height:1;box-shadow:inset 2px 2px 0 rgba(255,255,255,.12),inset -2px -2px 0 rgba(0,0,0,.45),0 2px 0 #160d1d}
  .inv2-x:active{transform:translateY(1px)}
  .inv2-x:active{transform:translateY(1px)}
  .inv2-head{display:flex;align-items:center;gap:11px;padding:5px 4px}
  .inv2-lvl{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:36px;padding:4px 6px;border-radius:5px;background:linear-gradient(180deg,#7a32e6,#4e1d9c);box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.4),0 2px 0 #160d1d}
  .inv2-lvl span{font-size:7px;font-weight:800;letter-spacing:.12em;color:#e6d8ff}
  .inv2-lvl b{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
  .inv2-xpwrap{flex:1;display:flex;flex-direction:column;gap:3px}
  .inv2-xp{position:relative;height:13px;border-radius:3px;background:#140d1f;overflow:hidden;box-shadow:inset 2px 2px 0 rgba(0,0,0,.6),inset -1px -1px 0 rgba(255,255,255,.05)}
  .inv2-xpfill{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,#7a32e6,#a877ff);box-shadow:inset 0 2px 0 rgba(255,255,255,.3);transition:width .4s cubic-bezier(.2,1,.3,1)}
  .inv2-xptxt{font-size:10px;color:#9a90b5;font-variant-numeric:tabular-nums;letter-spacing:.04em}
  .inv2-tok{display:flex;align-items:center;gap:5px;font-weight:800}
  .inv2-coin{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe79a,#e0a52a);box-shadow:inset -1px -1px 0 rgba(120,80,0,.5)}
  .inv2-tok b{color:#ffd45a;font-size:16px;font-variant-numeric:tabular-nums}
  .inv2-tokk{font-size:9px;color:#8a7fa8;letter-spacing:.1em}
  .inv2-doll{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px;border-radius:8px;background:rgba(0,0,0,.2);box-shadow:inset 2px 2px 0 rgba(0,0,0,.4),inset -1px -1px 0 rgba(255,255,255,.04)}
  .inv2-col{display:flex;flex-direction:column;gap:11px}
  .inv2-slot{position:relative;width:52px;height:52px;border-radius:6px;display:grid;place-items:center;cursor:pointer;background:#1a1226;box-shadow:inset 2px 2px 0 rgba(0,0,0,.55),inset -2px -2px 0 rgba(255,255,255,.06);transition:transform .08s}
  .inv2-slot:active{transform:translateY(1px)}
  .inv2-slot.filled{box-shadow:inset 2px 2px 0 rgba(0,0,0,.55),inset -2px -2px 0 rgba(255,255,255,.06),0 0 0 2px rgba(168,119,255,.55)}
  .inv2-slot.flt{box-shadow:inset 2px 2px 0 rgba(0,0,0,.55),inset -2px -2px 0 rgba(255,255,255,.06),0 0 0 2px #ffd166}  /* r290: this slot is filtering the bag below (gold ring) */
  .inv2-slotlab{position:absolute;bottom:-2px;left:0;right:0;text-align:center;font-size:7px;color:rgba(255,255,255,.32);letter-spacing:.05em;pointer-events:none}
  .inv2-cv{display:block;image-rendering:pixelated;pointer-events:none}
  .inv2-char{flex:1;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:7px;background:linear-gradient(180deg,rgba(124,92,176,.2),rgba(20,12,30,.42));box-shadow:inset 2px 2px 0 rgba(0,0,0,.4),inset -1px -1px 0 rgba(255,255,255,.05);padding:4px}
  .inv2-charname{font-size:11px;font-weight:800;color:#cbb6e6;margin-top:1px;letter-spacing:.02em}
  .inv2-redo{margin-top:7px;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#ffe6bd;background:rgba(255,180,60,.1);border:1px solid rgba(255,209,102,.4);border-radius:8px;padding:5px 10px;cursor:pointer;transition:.15s}
  .inv2-redo:hover{background:rgba(255,180,60,.2);border-color:rgba(255,209,102,.7);color:#fff}
  .inv2-redo.arm{background:rgba(255,90,90,.22);border-color:#ff8a7a;color:#fff;animation:redoArm .9s ease-in-out infinite alternate}  /* armed: one more tap pays */
  @keyframes redoArm{from{box-shadow:0 0 0 0 rgba(255,120,90,.0)}to{box-shadow:0 0 9px 1px rgba(255,120,90,.55)}}
  .inv2-redo.no{opacity:.45}  /* can't afford it — the hover tip says why */
  .inv2-renrow{margin-top:7px;display:flex;gap:5px;align-items:center}  /* inline name-change editor (no window.prompt — it's dead in in-app browsers) */
  .inv2-renrow input{width:104px;height:26px;background:#0e0d14;border:1px solid rgba(255,209,102,.4);border-radius:8px;color:#fff;font:700 11.5px ui-monospace,monospace;padding:0 7px}
  .inv2-renrow button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,209,102,.4);background:rgba(255,180,60,.1);color:#ffe6bd;font-size:13px;line-height:1;cursor:pointer;padding:0}
  .inv2-renrow button:hover{background:rgba(255,180,60,.25);color:#fff}
  .inv2-seclab{font-size:11px;font-weight:800;color:#8a7fa8;letter-spacing:.14em;padding:1px 4px;margin-top:1px}
  .inv2-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;padding:8px;border-radius:8px;background:rgba(0,0,0,.24);box-shadow:inset 2px 2px 0 rgba(0,0,0,.42),inset -1px -1px 0 rgba(255,255,255,.04)}
  .inv2-tile{position:relative;aspect-ratio:1;border-radius:5px;overflow:hidden;display:grid;place-items:center;cursor:pointer;background:#1a1226;box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 rgba(255,255,255,.05);transition:transform .08s}
  .inv2-tile .inv2-cv{width:100%;height:100%}
  .inv2-tile.blank{cursor:default;background:rgba(0,0,0,.34);box-shadow:inset 2px 2px 0 rgba(0,0,0,.5)}
  .inv2-tile.owned{box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 rgba(255,255,255,.05),0 0 0 2px var(--rar)}
  .inv2-tile.owned:hover{transform:translateY(-2px)}
  .inv2-tile.equipped{background:#2a1f3e;box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 rgba(255,255,255,.05),0 0 0 2px var(--rar),0 0 11px var(--rar)}
  .inv2-tile.locked{cursor:default}
  /* status line (ELO rank + season) under the header */
  .inv2-status{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 1px;font-size:11px}
  .inv2-rankpill{display:flex;align-items:center;gap:6px;font-weight:800;color:#cbb6e6}
  .inv2-rankdot{width:11px;height:11px;border-radius:3px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.35),inset -1px -1px 0 rgba(0,0,0,.4)}
  .inv2-elo{color:#8a7fa8;font-variant-numeric:tabular-nums;font-weight:700}
  .inv2-elo:not(:empty)::before{content:"· "}
  .inv2-season{color:#8a7fa8;font-weight:700}
  /* pets / auras tab section headers */
  .inv2-cathead{text-align:center;padding:2px 4px 8px}
  .inv2-cathead b{display:block;font-size:15px;font-weight:900;color:#ffce5a;letter-spacing:.12em}
  .inv2-conshead{padding:12px 4px 4px;text-align:left}
  .inv2-conshead b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a8fb8}
  .inv2-conshead span{display:block;font-size:10.5px;color:#7f7691}
  .inv2-consgrid{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:8px;background:rgba(0,0,0,.24);box-shadow:inset 2px 2px 0 rgba(0,0,0,.42)}
  .inv2-constile{width:48px;height:48px;aspect-ratio:auto;flex:0 0 auto}
  .inv2-count{position:absolute;right:2px;bottom:1px;font:800 10px ui-monospace,Menlo,monospace;color:#fff;background:rgba(0,0,0,.72);border-radius:5px;padding:0 3px;line-height:1.35;pointer-events:none}
  .inv2-consempty{font:600 11px ui-monospace,Menlo,monospace;color:#8a7fa8;padding:10px 4px}
  .inv2-cathead span{font-size:10px;color:#9a8fb5}
  .inv2-tip{position:fixed;z-index:120;pointer-events:none;display:flex;flex-direction:column;gap:1px;background:#140d1f;padding:6px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.6),inset 1px 1px 0 rgba(255,255,255,.08);min-width:120px;max-width:200px;text-align:center}  /* fixed + on <body> (z above the .pl-overlay z60) so the panel's overflow can't clip a tip near its edge */
  .inv2-tip b{font-size:12px}
  .inv2-rar{font-size:8px;letter-spacing:.12em;color:#8a7fa8}
  .inv2-unlock{font-size:10px;color:#b3a9c8;line-height:1.3}
  /* tabs */
  .inv2-tabs{display:flex;gap:6px;justify-content:center;margin:0 0 2px;flex-wrap:wrap} /* 6 tabs now (gambling) — wrap on narrow phones instead of clipping the row */
  .inv2-tab{position:relative;border:none;cursor:pointer;font-weight:800;font-size:12px;letter-spacing:.06em;color:#9a8fb5;background:#1a1226;padding:6px 13px;border-radius:6px 6px 0 0;box-shadow:inset 2px 2px 0 rgba(0,0,0,.4),inset -2px -2px 0 rgba(255,255,255,.04)}
  .inv2-tab.active{color:#ffce5a;background:linear-gradient(180deg,#3a2740,#2a1d36);box-shadow:inset 2px 2px 0 rgba(255,255,255,.08),0 2px 0 #160d1d}
  .inv2-tabn{font-style:normal;font-size:9px;margin-left:6px;padding:1px 5px;border-radius:8px;background:rgba(168,119,255,.3);color:#e6d8ff;vertical-align:middle}
  /* shop */
  .inv2-tile.buyable{box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,212,90,.45)}
  .inv2-tile.buyable:hover{transform:translateY(-2px)}
  .inv2-price{position:absolute;bottom:1px;right:2px;font-size:8px;font-weight:900;color:#ffd45a;background:rgba(12,8,20,.88);padding:0 3px;border-radius:4px;pointer-events:none}
  .inv2-price.dim{color:#9a8fb5}
  .inv2-price::before{content:"\25C9 "}
  /* CD wallet binder */
  .inv2-walhead{text-align:center;padding:2px 4px 8px}
  .inv2-walhead b{display:block;font-size:15px;font-weight:900;color:#ffce5a;letter-spacing:.12em}
  .inv2-walhead span{font-size:10px;color:#9a8fb5}
  .inv2-binder{display:flex;gap:8px;padding:12px 12px 12px 6px;border-radius:8px;background:linear-gradient(180deg,#241528,#160d1a);box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -1px -1px 0 rgba(255,255,255,.04);max-height:48vh;max-height:48dvh;overflow-y:auto}
  .inv2-rings{display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:6px 0;flex:0 0 14px}
  .inv2-rings i{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c7b8c2,#54484f);box-shadow:inset -1px -1px 0 rgba(0,0,0,.5),0 1px 0 rgba(0,0,0,.4)}
  .inv2-pages{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .inv2-sleeve{position:relative;display:flex;flex-direction:column;align-items:center;border-radius:5px;padding:7px 5px 6px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 3px 3px 7px rgba(255,255,255,.05);cursor:pointer;transition:transform .08s}
  .inv2-sleeve:hover{transform:translateY(-2px)}
  .inv2-sleeve.empty{cursor:default;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);min-height:100px}
  .inv2-sleeve.empty:hover{transform:none}
  .inv2-pocket{display:grid;place-items:center}
  .inv2-cdsq{width:72px;height:72px;border-radius:6px;display:grid;place-items:center;font-family:ui-monospace,Menlo,monospace;font-weight:900;font-size:26px;color:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}  /* r280: plain square CD tile */
  .inv2-sleeve-lab{text-align:center;margin-top:4px;width:100%}
  .inv2-sleeve-lab b{display:block;font-size:10px;font-weight:800;color:#e7dcc6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:94px;margin:0 auto}
  .inv2-sleeve-lab span{font-size:8px;color:#8a7fa8}
  .inv2-new{position:absolute;top:3px;right:3px;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#160d1d;background:#ffd45a;padding:1px 4px;border-radius:4px}
  /* jukebox (90s boombox) */
  .jbx{position:relative;width:min(490px,95vw);display:flex;flex-direction:column;align-items:center;gap:11px;padding:15px 15px 17px;border-radius:9px;background:linear-gradient(180deg,#3a2740,#251a30);box-shadow:0 0 0 3px #160d1d,0 0 0 5px #6b4a86,0 0 0 7px #160d1d,inset 0 0 0 2px rgba(160,106,58,.45),0 18px 50px rgba(0,0,0,.6);color:#e7dcc6;image-rendering:pixelated}
  .jbx-title{font-size:20px;font-weight:900;letter-spacing:.2em;color:#ffce5a;text-shadow:0 2px 0 #6e3a12,0 0 12px rgba(255,200,60,.3);text-transform:uppercase;margin:1px 0 2px}
  .jbx-cv{display:block;image-rendering:pixelated;max-width:100%}
  .jbx-controls{display:flex;gap:11px}
  .jbx-btn{min-width:54px;height:42px;border:none;border-radius:5px;cursor:pointer;font-size:15px;color:#3a2a12;background:#d9b878;font-weight:900;image-rendering:pixelated;display:grid;place-items:center;box-shadow:inset 3px 3px 0 #f2dcab,inset -3px -3px 0 #9c7a42,0 3px 0 #6e5226,0 5px 7px rgba(0,0,0,.4);transition:transform .05s}
  .jbx-btn:active{transform:translateY(2px);box-shadow:inset 3px 3px 0 #f2dcab,inset -3px -3px 0 #9c7a42,0 1px 0 #6e5226}
  .jbx-hint{font-size:10px;color:#8a7fa8;text-align:center;max-width:320px;line-height:1.4}
  .jbx-queue{font:700 11px ui-monospace,Menlo,monospace;color:#c9a3ff;text-align:center;max-width:380px;line-height:1.7;padding:6px 10px;border-radius:7px;background:rgba(124,92,176,.16);display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center}
  .jbx-queue b{color:#ffd45a;margin-right:2px}
  .jbx-qitem{padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.24);color:#c9a3ff;white-space:nowrap}
  .jbx-qitem.me{background:rgba(255,206,90,.2);color:#ffce5a;box-shadow:inset 0 0 0 1px rgba(255,206,90,.4)}
  .jbx-pickwrap{width:min(420px,92vw);display:flex;flex-direction:column;gap:6px}
  .jbx-picklab{font:700 10.5px ui-monospace,Menlo,monospace;color:#9a8fb8;text-align:center;text-transform:lowercase}
  .jbx-picker{display:flex;gap:8px;overflow-x:auto;padding:6px 4px;border-radius:8px;background:rgba(0,0,0,.25);box-shadow:inset 2px 2px 0 rgba(0,0,0,.4);min-height:90px;align-items:flex-start}
  .jbx-cdtile{position:relative;flex:0 0 auto;width:54px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 3px 3px;border:none;border-radius:6px;background:rgba(255,255,255,.05);cursor:pointer;transition:transform .08s,background .12s,box-shadow .12s}
  .jbx-cdtile:hover{background:rgba(168,119,255,.22);transform:translateY(-2px)}
  .jbx-cdtile.queued{background:rgba(168,119,255,.24);box-shadow:inset 0 0 0 2px #a877ff}
  .jbx-cdtile.playing{background:rgba(255,206,90,.2);box-shadow:inset 0 0 0 2px #ffce5a;animation:jbxPulse 1.4s ease-in-out infinite}
  @keyframes jbxPulse{0%,100%{box-shadow:inset 0 0 0 2px #ffce5a}50%{box-shadow:inset 0 0 0 2px rgba(255,206,90,.45)}}
  .jbx-badge{font:900 7.5px ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.04em;padding:1px 4px;border-radius:4px;line-height:1.5}
  .jbx-cdtile.queued .jbx-badge{background:#a877ff;color:#1a1024}
  .jbx-cdtile.playing .jbx-badge{background:#ffce5a;color:#3a2a12}
  .jbx-cdname{font:700 8.5px ui-monospace,Menlo,monospace;color:#cdc3e0;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
  .jbx-empty{font:600 11px ui-monospace,Menlo,monospace;color:#8a7fa8;padding:14px;width:100%;text-align:center}
  .pl-lvl.lvlup{animation:lvlPulse 1.4s ease}
  @keyframes lvlPulse{30%,60%{box-shadow:0 0 0 4px rgba(255,212,90,.6),0 6px 22px rgba(255,200,60,.5);transform:scale(1.12)}}
  #helpBtn{left:66px}
  #invBtn{left:120px}
  #phoneBtn{left:174px}
  #emoteBtn{left:228px}
  #fishBtn{left:282px}   /* r369: fishing leaderboard — sits right after the emotes button */
  #settingsBtn{left:336px}
  #emoteBtn.dancing{box-shadow:0 0 0 2px #9be86b,0 6px 18px rgba(0,0,0,.5)}
  /* r290: settings (display options) card */
  .set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
  .set-row:last-child{border-bottom:0}
  .set-lab{font-family:var(--body);font-size:15px;color:#e7e9ee;font-weight:700}
  .set-lab small{display:block;font-weight:600;font-size:11.5px;color:#8b90a0;margin-top:2px;letter-spacing:.2px}
  .set-ctl{display:flex;align-items:center;gap:9px;flex:0 0 auto}
  .set-ctl input[type=range]{width:150px;accent-color:#9146FF;cursor:pointer}
  .set-val{font-family:ui-monospace,monospace;font-size:12px;color:#cbb6f0;min-width:42px;text-align:right}
  .set-toggle{width:52px;height:28px;border-radius:999px;border:none;cursor:pointer;background:#2a2536;position:relative;transition:background .15s}
  .set-toggle.on{background:#3ee07c}
  .set-toggle::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
  .set-toggle.on::after{left:27px}
  .set-reset{margin-top:12px;font-family:var(--body);font-weight:700;font-size:12.5px;color:#9aa0ad;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 14px;cursor:pointer}
  .set-reset:hover{background:rgba(255,255,255,.1);color:#e7e9ee}
  #emotePicker{position:fixed;left:12px;top:68px;z-index:50;width:208px;background:#15131d;border:2px solid #322b3e;border-radius:13px;padding:8px;display:flex;flex-direction:column;gap:5px;box-shadow:0 14px 36px rgba(0,0,0,.55)}  /* pops DOWN from the top-left FAB row. r290: z 62→50 so it sits UNDER the .pl-overlay windows (z60) — it's a floor popover, never on top of a modal */
  #emotePicker[hidden]{display:none}
  #emotePicker .ep-h{font-family:'Alagard',monospace;font-size:15px;color:#fff;padding:1px 4px 4px}
  .ep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#1d1a27;border:1px solid #2c2638;border-radius:9px;padding:7px 10px;cursor:pointer;color:#fff;font-family:'Alagard',monospace;font-size:14px;text-align:left}
  .ep-row:not(.lock):hover{border-color:#7b5cff;background:#241f2e}
  .ep-row.on{border-color:#9be86b;background:#1d2a1b}
  .ep-row.lock{opacity:.5;cursor:default}
  .ep-row .ep-sub{font:600 10px ui-monospace,monospace;color:#8a90a3;display:block;margin-top:1px}
  .ep-row.on .ep-sub{color:#9be86b}
  /* ===== always-visible pixel XP bar (bottom-RIGHT HUD), RuneScape-style — notes boing up over the floor ===== */
  .xp-bar{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));right:12px;left:auto;z-index:46;display:flex;align-items:center;gap:7px;padding:5px 8px 5px 5px;border-radius:6px;background:linear-gradient(180deg,#241c3c,#171125);box-shadow:0 4px 14px rgba(0,0,0,.5),inset 2px 2px 0 rgba(168,119,255,.28),inset -2px -2px 0 rgba(0,0,0,.42);cursor:pointer;image-rendering:pixelated;user-select:none;-webkit-user-select:none}
  .xp-bar:active{transform:translateY(1px)}
  .xp-lvl{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:26px;padding:2px 4px;border-radius:4px;background:linear-gradient(180deg,#7a32e6,#4e1d9c);box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),inset -1px -1px 0 rgba(0,0,0,.35)}
  .xp-lvl span{font-size:7px;font-weight:800;letter-spacing:.1em;color:#e6d8ff;text-transform:uppercase}
  .xp-lvl b{font-size:15px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
  .xp-track{position:relative;width:128px;height:11px;border-radius:3px;background:#0b0b12;box-shadow:inset 2px 2px 0 rgba(0,0,0,.6),inset -1px -1px 0 rgba(255,255,255,.05);overflow:hidden}
  .xp-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#7a32e6,#a877ff);box-shadow:inset 0 2px 0 rgba(255,255,255,.32);transition:width .55s cubic-bezier(.2,1,.3,1)}
  .xp-ghost{position:absolute;top:0;bottom:0;width:0;background:rgba(255,255,255,.5);opacity:0}            /* flashes the chunk just earned */
  .xp-bar.gain .xp-ghost{animation:xpGhost .55s ease-out}
  @keyframes xpGhost{0%{opacity:.85}100%{opacity:0}}
  .xp-bar.levelup{animation:xpLevel 1.1s cubic-bezier(.2,1.3,.3,1)}
  @keyframes xpLevel{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.5),inset 2px 2px 0 rgba(168,119,255,.28),inset -2px -2px 0 rgba(0,0,0,.42)}25%,60%{box-shadow:0 0 0 3px rgba(255,212,90,.7),0 4px 20px rgba(255,200,60,.6);transform:scale(1.08)}}
  .xp-tip{position:absolute;bottom:calc(100% + 6px);right:0;left:auto;white-space:nowrap;font:700 11px ui-monospace,Menlo,monospace;color:#e7dcc6;background:#171125;padding:5px 9px;border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.55),inset 1px 1px 0 rgba(255,255,255,.08);opacity:0;pointer-events:none;transition:opacity .12s;letter-spacing:.02em}
  .xp-bar:hover .xp-tip{opacity:1}
  #xpLevelPop{position:fixed;bottom:56px;right:12px;left:auto;z-index:300;font:900 14px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#ffd45a;text-shadow:0 0 10px rgba(255,200,60,.7),0 2px 3px rgba(0,0,0,.8);opacity:0;pointer-events:none;text-align:right}  /* z 300 (was 47): 'need 20 bucks' / 'you are now …' pops must show OVER the open inventory + other .pl-overlay panels (z 60) — under 47 the paid buttons looked dead */
  #fabTip{position:fixed;z-index:46;pointer-events:none;display:flex;flex-direction:column;gap:2px;max-width:230px;background:#15131d;border:1px solid #3a3450;border-radius:9px;padding:7px 10px;box-shadow:0 8px 22px rgba(0,0,0,.55)}  /* hover explanations for the top-left buttons */
  #fabTip b{font-family:'Alagard',ui-monospace,monospace;font-size:13.5px;color:#fff;letter-spacing:.02em}
  #fabTip span{font:600 11px ui-monospace,monospace;color:#9a92ad;line-height:1.35}
  #xpLevelPop.show{animation:xpPop 1.5s cubic-bezier(.2,1.3,.3,1)}
  @keyframes xpPop{0%{opacity:0;transform:translateY(8px) scale(.7)}18%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
  .help-list{display:flex;flex-direction:column;overflow-y:auto}
  .help-row{display:flex;gap:10px;align-items:baseline;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
  .help-row:last-child{border-bottom:0}
  .help-k{flex:0 0 96px;font-weight:800;font-size:13px}
  .help-v{flex:1;color:var(--muted);font-size:13px;line-height:1.35}
  /* ===================== HELP VIEW (4 tabs) — big + legible on desktop + mobile ===================== */
  .hv-card{width:min(720px,96vw);max-height:calc(90vh / var(--uisc,1));display:flex;flex-direction:column;background:#14151b;border:1px solid #2c2f3a;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}  /* r290: cap pre-divided by --uisc (hi-res scaling) */
  /* readable BODY font everywhere in the help view (overrides the global Alagard), Alagard only on titles/tabs */
  .hv-card, .hv-card p, .hv-card li, .hv-card span, .hv-card a, .hv-card b, .hv-card i, .hv-ctl *{font-family:-apple-system,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif !important}
  .hv-top{display:flex;align-items:center;gap:10px;padding:13px 16px 0;flex-wrap:wrap}
  .hv-socials{display:flex;gap:10px;margin-right:auto}  /* r290: socials read as a group on the left, everything else pushed right */
  .hv-soclabel{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6a6f7e;align-self:center;margin-right:2px}
  .hv-account{display:flex;align-items:center;gap:8px}  /* r290: twitch username sits directly left of the sign-out button */
  .hv-signout{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.3px;color:#ff9bb0;background:rgba(255,90,110,.12);border:1px solid rgba(255,90,110,.4);border-radius:9px;padding:7px 13px;cursor:pointer;transition:.15s}
  .hv-twitch{font-family:var(--body);font-weight:700;font-size:12px;border-radius:9px;padding:7px 12px;cursor:pointer;transition:.15s;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid transparent}
  .hv-twitch.linked{color:#c9b3ff;background:rgba(145,70,255,.16);border-color:rgba(145,70,255,.45)}
  .hv-twitch.linked:hover{background:rgba(145,70,255,.26)}
  .hv-twitch.unlinked{color:#fff;background:#9146FF;border-color:#9146FF}
  .hv-twitch.unlinked:hover{filter:brightness(1.12)}
  .hv-signout:hover{background:rgba(255,90,110,.22);color:#ffd0d8}
  /* host-only: live text editor for this menu (changes broadcast to every player, no repush) */
  .hv-edit{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.3px;color:#9fe8ff;background:rgba(90,180,255,.12);border:1px solid rgba(90,180,255,.4);border-radius:9px;padding:7px 12px;cursor:pointer;transition:.15s}
  .hv-edit:hover{background:rgba(90,180,255,.22);color:#d6f3ff}
  .hv-edit.on{color:#140d1f;background:linear-gradient(180deg,#7fe0ff,#4fb8e0);border-color:#4fb8e0}
  #helpOverlay.hv-editing [data-ek]{outline:1px dashed rgba(127,224,255,.6);outline-offset:3px;border-radius:4px;cursor:text;transition:outline-color .15s}
  #helpOverlay.hv-editing [data-ek]:hover{outline-color:#7fe0ff}
  #helpOverlay.hv-editing [data-ek]:focus{outline:2px solid #7fe0ff;background:rgba(127,224,255,.08)}
  .hv-edithint{margin:12px 16px 0;padding:9px 12px;background:rgba(90,180,255,.1);border:1px solid rgba(90,180,255,.3);border-radius:10px;font-family:var(--body);font-size:12.5px;color:#bfe6f5;line-height:1.45;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .hv-edithint[hidden]{display:none}
  .hv-resetall{font-family:var(--body);font-weight:700;font-size:11.5px;color:#ffb4b4;background:rgba(255,90,110,.12);border:1px solid rgba(255,90,110,.4);border-radius:8px;padding:5px 10px;cursor:pointer;margin-left:auto}
  .hv-resetall:hover{background:rgba(255,90,110,.22)}
  @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
  .shake{animation:shake .4s}
  .hv-soc{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;text-decoration:none;transition:transform .12s,filter .12s;box-shadow:0 3px 10px rgba(0,0,0,.4)}
  .hv-soc:hover{transform:translateY(-2px);filter:brightness(1.12)}
  .soc-dc{background:#5865F2}.soc-yt{background:#FF0000}.soc-tt{background:#111}.soc-ig{background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5)}.soc-pt{background:#000;color:#fff}
  .soc-dc svg{transform:translateY(1px)}  /* r290: the discord glyph's bbox sits ~1.5 viewbox-units high — nudge it down so it optically centers with the other icons */
  .hv-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px 0}
  .hv-tab{font-family:'Alagard',monospace !important;font-size:15px;letter-spacing:.02em;color:#9aa0b0;background:rgba(255,255,255,.04);border:1px solid #2c2f3a;border-radius:10px 10px 0 0;padding:9px 14px;cursor:pointer;transition:.14s}
  .hv-tab:hover{color:#eef0f6;background:rgba(255,255,255,.08)}
  .hv-tab.active{color:#140d1f;background:linear-gradient(180deg,#ffc48a,#f0a35f);border-color:#f0a35f}
  .hv-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 20px 22px;border-top:1px solid #2c2f3a}
  .hv-pane{display:flex;flex-direction:column;gap:11px}
  .hv-title{font-family:'Alagard',monospace !important;font-size:26px;color:#ffce5a;margin:0;letter-spacing:.03em;text-shadow:0 0 16px rgba(255,206,90,.25)}
  .hv-sub{margin:-6px 0 4px;font-size:15px;color:#c4a7ef}
  .hv-h{font-family:'Alagard',monospace !important;font-size:18px;color:#9fe8ff;margin:8px 0 0;letter-spacing:.03em}
  .hv-card p{margin:0;font-size:15.5px;line-height:1.5;color:#dfe2ea}
  .hv-card b{font-weight:800;color:#fff}
  .hv-ol{margin:2px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
  .hv-ol li{font-size:15.5px;line-height:1.5;color:#dfe2ea}
  /* r285: the step list — replaces the old numbered ol (the "1. 2. 3." numerals read as clutter); left-aligned rows w/ a pixel-diamond bullet */
  .hv-steps{display:flex;flex-direction:column;gap:8px;margin:2px 0 0;text-align:left}
  .hv-step{display:flex;align-items:flex-start;gap:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:10px 13px;font-size:15px;line-height:1.45;color:#dfe2ea;text-align:left}
  .hv-step::before{content:'';flex:0 0 10px;width:10px;height:10px;margin-top:5px;background:#f0a35f;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
  .hv-steps.warn .hv-step::before{background:#ff5e7a}
  .hv-step b{color:#fff}
  .hv-ps{font-size:13.5px;color:#9aa0b0;font-style:italic;margin-top:6px}
  .hv-link{color:#ffce5a;text-decoration:underline;font-weight:700}
  .hv-legend{display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.25);border-radius:12px;padding:12px 14px}
  .hv-leg{display:flex;align-items:center;gap:10px;font-size:14.5px}
  .hv-leg b{flex:0 0 auto;min-width:128px;color:#fff}
  .hv-leg span{color:#aeb4c2}
  .hv-dot{width:18px;height:18px;border-radius:5px;flex:0 0 auto;box-shadow:0 0 10px currentColor}
  .hv-tiers{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;background:rgba(0,0,0,.25);border-radius:12px;padding:14px}
  .hv-tier{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:70px}
  .hv-tier b{font-family:'Alagard',monospace !important;font-size:13px;letter-spacing:.04em}
  .hv-tier small{font-size:11px;color:#9aa0b0}
  .hv-ctl{display:flex;flex-direction:column;gap:0}
  .hv-crow{display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
  .hv-crow:last-child{border-bottom:0}
  .hv-key{flex:0 0 128px;display:flex;flex-wrap:wrap;gap:5px}
  .hv-kc{font-weight:800;font-size:12.5px;color:#140d1f;background:#cbd0db;border-radius:6px;padding:4px 8px;box-shadow:0 2px 0 #8a8f9c;white-space:nowrap}
  .hv-cd{flex:1;font-size:14.5px;color:#dfe2ea;line-height:1.4}
  .hv-cnote{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-size:13px;color:#9aa0ad;line-height:1.45}  /* r290: finals-voting note (not a key row) */
  .pl-overlay{position:fixed;inset:0;z-index:60;background:rgba(8,9,13,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
  /* r290: HI-RES SCALING — scale the overlay CARDS up on 2K/4K (barsh/borsh/jukebox/inventory/help/leaderboard/phone) so they aren't tiny. --uisc is set from viewport height by play.js. The full-screen backdrop stays 1× (place-items:center keeps the bigger card centred). Each card's vh cap is pre-divided by --uisc so scaling never overflows the screen. */
  .pl-overlay > *, #profileOverlay > *, .modal-card, .dlg-box{ zoom: var(--uisc, 1); }
  /* HUD scales too (zoom scales the fixed left/right/top offsets, so corners stay anchored + the FAB row stays evenly spaced). Chat is excluded — its font already scales via calc(--chat-fs * --uisc). */
  .pl-fab, #emotePicker, .xp-bar, #npControls{ zoom: var(--uisc, 1); }
  #fpsHud{position:fixed;top:6px;left:6px;z-index:9000;font:700 11px ui-monospace,Menlo,monospace;color:#7dffa6;background:rgba(8,9,13,.78);padding:3px 7px;border-radius:6px;pointer-events:none;white-space:nowrap}
  #fpsHud[hidden]{display:none}
  #endProfiling{position:fixed;bottom:22px;right:22px;z-index:9999;font-family:'Alagard',ui-monospace,monospace;font-size:15px;letter-spacing:.08em;padding:14px 22px;border:0;border-radius:4px;color:#fff;background:#d9304f;box-shadow:inset 3px 3px 0 #ff6b85,inset -3px -3px 0 #951d35,0 4px 0 #6e1527,0 6px 10px rgba(0,0,0,.55);cursor:pointer;text-transform:uppercase;image-rendering:pixelated;transition:transform .05s}
  #endProfiling:active{transform:translateY(3px);box-shadow:inset 3px 3px 0 #ff6b85,inset -3px -3px 0 #951d35,0 1px 0 #6e1527}
  #endProfiling[hidden]{display:none}
  /* secure P2P trade window (window.Trade) */
  .trd{position:relative;width:min(680px,94vw);max-height:calc(92vh / var(--uisc,1));max-height:calc(92dvh / var(--uisc,1));overflow:auto;background:linear-gradient(180deg,#1b1622,#141019);border:2px solid #3a2f4d;border-radius:16px;padding:16px 16px 14px;box-shadow:0 22px 60px rgba(0,0,0,.6)}
  .trd-title{font-family:var(--display);font-weight:900;letter-spacing:3px;text-transform:uppercase;font-size:15px;color:#e7d8ff;text-align:center;margin-bottom:10px}
  .trd-x{position:absolute;top:10px;right:12px}
  .trd-cols{display:flex;align-items:stretch;gap:10px}
  .trd-col{flex:1;min-width:0;background:rgba(0,0,0,.28);border:1px solid #2c2438;border-radius:12px;padding:9px}
  .trd-vs{align-self:center;font-size:22px;color:#9a7fce;flex:0 0 auto}
  .trd-colhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
  .trd-colhd b{font-family:var(--display);font-weight:800;font-size:13px;color:#cbb6f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .trd-chk{font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.5px;color:#3ee07c;opacity:0;transition:opacity .2s}
  .trd-chk.on{opacity:1}
  .trd-tray{display:flex;flex-wrap:wrap;gap:6px;min-height:78px;align-content:flex-start;padding:4px;border-radius:8px;background:rgba(0,0,0,.22)}
  .trd-binder{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;max-height:200px;overflow:auto;padding:4px;border-radius:8px;background:rgba(0,0,0,.18)}
  .trd-binderhd{font-family:var(--display);font-weight:700;font-size:11px;color:#8a7da0;margin:11px 2px 0}
  .trd-cd{position:relative;width:64px;height:84px;border:none;background:transparent;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;border-radius:8px}
  .trd-cd.on{outline:2px solid #5ff0d0;outline-offset:1px;background:rgba(95,240,208,.12)}
  .trd-cd canvas{display:block}
  .trd-mint{font-family:var(--display);font-weight:800;font-size:9px;line-height:1;margin-top:1px}
  .trd-cdname{font-size:8.5px;color:#aeb4c2;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .trd-empty{font-size:10px;color:#6a6275;padding:6px;font-family:var(--display)}
  .trd-bucks{display:flex;align-items:center;gap:6px;margin-top:7px;font-family:var(--display);font-weight:700;font-size:11px;color:#cbb6f0}
  .trd-bucks label{color:#8a7da0}
  .trd-bucksin{width:64px;background:#0e0b14;border:1px solid #3a2f4d;border-radius:7px;color:#ffe8ac;font-family:var(--display);font-weight:800;font-size:13px;padding:3px 6px}
  .trd-bk{font-size:10px;color:#8a7da0}
  .trd-bucks.them b{color:#ffe8ac;font-size:14px}
  .trd-foot{display:flex;gap:9px;margin-top:12px}
  .trd-btn{flex:1;font-family:var(--display);font-weight:800;letter-spacing:1px;font-size:13px;border:none;border-radius:11px;padding:10px;cursor:pointer}
  .trd-cancel{background:rgba(255,255,255,.08);color:#cfd3dc}
  .trd-cancel:hover{background:rgba(255,255,255,.14)}
  .trd-confirm{background:linear-gradient(180deg,#3ee07c,#27b863);color:#062;}
  .trd-confirm.done{background:rgba(62,224,124,.25);color:#9affc4}
  .trd-confirm:disabled{opacity:.7;cursor:default}
  /* Stardew-style NPC dialogue (window.Dialog) */
  .dlg-overlay{position:fixed;inset:0;z-index:210;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 20px;background:rgba(8,9,13,.45)}
  .dlg-box{display:flex;gap:13px;width:min(660px,96vw);padding:14px;border-radius:10px;background:linear-gradient(180deg,#f4e7c9,#e7d3a9);color:#3a2a16;box-shadow:0 0 0 3px #2a1d12,0 0 0 6px #8a6a3a,0 0 0 9px #2a1d12,0 16px 44px rgba(0,0,0,.6);image-rendering:pixelated;cursor:pointer;animation:dlgPop .22s cubic-bezier(.2,1,.3,1)}
  @keyframes dlgPop{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
  .dlg-portrait{width:92px;height:92px;flex:0 0 auto;border-radius:7px;background:#241528;box-shadow:inset 0 0 0 2px #8a6a3a,0 2px 0 #2a1d12;image-rendering:pixelated}
  .dlg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
  .dlg-name{font:800 16px ui-monospace,Menlo,monospace;color:#7a4a18;letter-spacing:.6px;text-transform:lowercase}
  .dlg-text{font:600 14.5px ui-monospace,Menlo,monospace;line-height:1.42;min-height:42px}
  .dlg-options{display:flex;flex-direction:column;gap:6px;margin-top:2px}
  .dlg-opt{font:700 13.5px ui-monospace,Menlo,monospace;text-align:left;background:rgba(112,84,48,.16);border:2px solid #b58a4c;border-radius:7px;padding:8px 12px;color:#3a2a16;cursor:pointer;transition:transform .08s,background .12s}
  .dlg-opt:hover{background:rgba(112,84,48,.3);transform:translateX(3px)}
  .dlg-opt.off{opacity:.45;cursor:not-allowed}
  .dlg-cont{align-self:flex-end;font:800 14px ui-monospace,Menlo,monospace;color:#8a5a2a;animation:dlgBob 1s ease-in-out infinite}
  @keyframes dlgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
  /* blackjack table (window.BJ) */
  .bj{position:relative;width:min(440px,95vw);display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:10px;background:linear-gradient(180deg,#1f6b3a,#15532c);box-shadow:0 0 0 3px #2a1d12,0 0 0 6px #7a4a28,0 0 0 9px #2a1d12,0 18px 50px rgba(0,0,0,.6);color:#f4efe6;image-rendering:pixelated}
  .bj-x{position:absolute;right:10px;top:10px;width:26px;height:26px;border:none;border-radius:6px;background:rgba(0,0,0,.3);color:#f4efe6;cursor:pointer;font-weight:800;z-index:2;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;font-size:14px}
  .bj-row{display:flex;gap:11px;align-items:flex-start}
  .bj-face{width:58px;height:58px;border-radius:7px;background:#16201a;box-shadow:inset 0 0 0 2px #7a4a28;image-rendering:pixelated;flex:0 0 auto}
  .bj-side{flex:1;min-width:0}
  .bj-lab{font:800 13px ui-monospace,Menlo,monospace;letter-spacing:.5px;text-transform:lowercase;margin-bottom:5px;color:#cdeccd}
  .bj-val{color:#ffd45a;font-weight:800}
  .bj-cards{display:flex;gap:5px;flex-wrap:wrap;min-height:54px}
  .bj-card{width:38px;height:54px;border-radius:5px;background:#f4efe6;box-shadow:inset 0 0 0 1px #c9bfa8,0 2px 0 rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1a1320}
  .bj-card.red{color:#d31b3b}
  .bj-card .bj-rk{font:900 16px ui-monospace,Menlo,monospace;line-height:1}
  .bj-card .bj-su{font-size:15px;line-height:1.1}
  .bj-card.back{background:repeating-linear-gradient(45deg,#3a4d8a,#3a4d8a 4px,#2c3c6e 4px,#2c3c6e 8px);box-shadow:inset 0 0 0 2px #1f2a52,inset 0 0 0 4px #5a6db0}
  .bj-msg{font:700 13.5px ui-monospace,Menlo,monospace;text-align:center;padding:8px;border-radius:7px;background:rgba(0,0,0,.22);min-height:18px}
  .bj-msg.good{color:#7be09a;background:rgba(62,224,124,.16)}.bj-msg.bad{color:#ff9a9a;background:rgba(255,59,78,.14)}.bj-msg.mid{color:#ffd45a;background:rgba(255,212,90,.12)}
  .bj-ctrl{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:46px}
  .bj-stakes{display:flex;gap:7px}
  .bj-deal-lab{font:800 13px ui-monospace,Menlo,monospace;color:#cdeccd}
  .bj-btn{font:800 14px ui-monospace,Menlo,monospace;padding:10px 18px;border-radius:9px;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:#f4efe6;cursor:pointer;transition:transform .08s,background .12s}
  .bj-btn:hover:not(:disabled){background:rgba(0,0,0,.4);transform:translateY(-1px)}
  .bj-btn:disabled{opacity:.4;cursor:not-allowed}
  .bj-btn.go{background:linear-gradient(180deg,#e0a52a,#c4861a);border-color:#ffd45a;color:#1a1320}
  .bj-btn.chip{width:46px;height:46px;border-radius:50%;padding:0;background:radial-gradient(circle at 38% 34%,#ffe79a,#e0a52a 70%,#b87f26);color:#3a2a10;border:2px dashed rgba(255,255,255,.5)}
  .bj-cbet{width:74px;height:46px;border-radius:9px;border:2px solid rgba(255,255,255,.25);background:rgba(0,0,0,.3);color:#f4efe6;font:800 14px ui-monospace,Menlo,monospace;text-align:center;-moz-appearance:textfield}
  .bj-cbet::-webkit-outer-spin-button,.bj-cbet::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .bj-btn.chip.bj-go{width:auto;border-radius:9px;padding:0 14px;border-style:solid} /* the custom-bet DEAL chip reads as a button, not a coin */
  .bj-foot{text-align:center;font:700 12.5px ui-monospace,Menlo,monospace;color:#cdeccd}
  .bj-foot b{color:#ffd45a}
  /* ===== FISHING panel (r352) ===== */
  .fsh{position:relative;width:min(460px,95vw);max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:10px;background:linear-gradient(180deg,#173a52,#0f2942);box-shadow:0 0 0 3px #0c1d2a,0 0 0 6px #2a6a8c,0 0 0 9px #0c1d2a,0 18px 50px rgba(0,0,0,.6);color:#eaf2f8;image-rendering:pixelated}
  .fsh-x{position:absolute;top:8px;right:10px;width:30px;height:30px;border:none;border-radius:8px;background:rgba(0,0,0,.3);color:#eaf2f8;font-size:16px;cursor:pointer;z-index:2}
  .fsh-head{display:flex;align-items:center;gap:12px}
  .fsh-head canvas{width:64px;height:64px;image-rendering:pixelated;border-radius:8px;background:rgba(0,0,0,.25);flex:0 0 auto}
  .fsh-title{flex:1;min-width:0}
  .fsh-title>b{font-family:'Alagard',ui-monospace,monospace;font-size:20px;text-transform:lowercase}
  .fsh-lv{font:700 13px ui-monospace,Menlo,monospace;color:#9ad4f0;margin-top:2px}
  .fsh-bar{height:10px;border-radius:6px;background:rgba(0,0,0,.35);overflow:hidden;margin-top:5px}
  .fsh-bar>i{display:block;height:100%;background:linear-gradient(90deg,#3fb0d8,#8ce0ff);transition:width .4s}
  .fsh-xp{font:600 11px ui-monospace,Menlo,monospace;color:#8fb0c4;margin-top:3px}
  .fsh-actions{display:flex;flex-direction:column;gap:6px;align-items:center}
  .fsh-cast{width:100%;padding:12px;border:none;border-radius:9px;background:linear-gradient(180deg,#2a9ac4,#1b6f92);color:#fff;font:800 15px ui-monospace,Menlo,monospace;cursor:pointer;text-transform:lowercase}
  .fsh-cast.waiting{background:linear-gradient(180deg,#3a4150,#2a303c);color:#cfe0ec;animation:fshWait 1.4s ease-in-out infinite}
  .fsh-cast.bite{background:linear-gradient(180deg,#ffcf3a,#e0a11a);color:#1a1320;text-transform:uppercase;letter-spacing:.04em;animation:fshBite .28s steps(2) infinite;box-shadow:0 0 0 3px rgba(255,207,58,.35),0 0 22px rgba(255,207,58,.6)}
  @keyframes fshWait{0%,100%{opacity:.75}50%{opacity:1}}
  @keyframes fshBite{0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
  .fsh-stop{width:100%;padding:7px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(0,0,0,.25);color:#9fb0bc;font:700 12px ui-monospace,Menlo,monospace;cursor:pointer;text-transform:lowercase}
  .fsh-stop[hidden]{display:none}
  .fsh-troph{color:#ffd45a;font-weight:800}
  .fsh-hint{font:600 11.5px ui-monospace,Menlo,monospace;color:#8fb0c4;text-align:center}
  .fsh-sec{background:rgba(0,0,0,.2);border-radius:9px;padding:10px}
  .fsh-sec>b{font-family:'Alagard',ui-monospace,monospace;font-size:15px;text-transform:lowercase}
  .fsh-sec>span{font:600 11px ui-monospace,Menlo,monospace;color:#8fb0c4;margin-left:6px}
  .fsh-bag{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:150px;overflow-y:auto}
  .fsh-fish{display:flex;align-items:center;gap:8px;font:600 12.5px ui-monospace,Menlo,monospace}
  .fsh-fish canvas{width:38px;height:24px;image-rendering:pixelated;flex:0 0 auto}
  .fsh-fish i{color:#ffd45a;font-style:normal}
  .fsh-empty{font:600 12px ui-monospace,Menlo,monospace;color:#7d94a4;padding:6px 0}
  .fsh-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;margin-top:8px}
  .fsh-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;border-radius:7px;background:rgba(0,0,0,.22)}
  .fsh-cell canvas{width:44px;height:28px;image-rendering:pixelated}
  .fsh-cell small{font:600 9px ui-monospace,Menlo,monospace;color:#cfd3dc;text-align:center;line-height:1.1}
  .fsh-cell.lock{opacity:.55}.fsh-cell.lock small{color:#6d8494}
  .fsh-rw{display:flex;flex-direction:column;gap:4px;margin-top:8px}
  .fsh-rwrow{font:600 12px ui-monospace,Menlo,monospace;color:#8fb0c4;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.18)}
  .fsh-rwrow.got{color:#eaf2f8}.fsh-rwrow.got i{color:#7dffa6;font-style:normal}
  .fsh-rwrow b{color:#9ad4f0}
  /* r367: TOP FISHERS board (fishing tab) */
  .fsh-lb{display:flex;flex-direction:column;gap:3px;margin-top:8px;max-height:212px;overflow-y:auto}
  .fsh-lbrow{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.18);font:600 12px ui-monospace,Menlo,monospace;color:#8fb0c4}
  .fsh-lbrow.me{background:rgba(60,150,200,.22);color:#eaf2f8;outline:1px solid #2a6a8c}
  .fsh-lbrk{font-style:normal;color:#6d8494;min-width:20px;flex:0 0 auto;text-align:right}
  .fsh-lbrow.top1 .fsh-lbrk{color:#ffd45a}.fsh-lbrow.top2 .fsh-lbrk{color:#d8e2ea}.fsh-lbrow.top3 .fsh-lbrk{color:#d9924a}
  .fsh-lbnm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eaf2f8;font-weight:700}
  .fsh-lblv{flex:0 0 auto;color:#8ce0ff}
  .fsh-lbxp{flex:0 0 auto;color:#7d94a4;font-size:11px}
  .fsh-lbgap{text-align:center;color:#4f6b7d;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.2em}
  /* r369: the FULL fishing board (fish FAB card) — top 100, two-line detail rows */
  .fsh-lbfull{max-height:none;margin-top:0;gap:4px}
  .fsh-lbmeta{font:600 11.5px ui-monospace,Menlo,monospace;color:#8fb0c4;text-transform:lowercase;min-height:14px}
  .fsh-lbrow.full{flex-direction:column;align-items:stretch;gap:2px;padding:6px 9px;text-align:left}
  .fsh-lbrow.full .fsh-lbl1{display:flex;align-items:center;gap:8px;min-width:0}
  .fsh-lbrow.full .fsh-lbl2{font:600 10.5px ui-monospace,Menlo,monospace;color:#6d8494;padding-left:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fsh-lbrow.full .fsh-lbl2 .fsh-lbtr{color:#5f6f7c}.fsh-lbrow.full .fsh-lbl2 .fsh-lbtr.got{color:#ffd45a}
  .fsh-lbrow.full.me .fsh-lbl2{color:#a9c4d6}
  .fsh-lbrow.top1 .fsh-lbnm{color:#ffd45a}.fsh-lbrow.top2 .fsh-lbnm{color:#d8e2ea}.fsh-lbrow.top3 .fsh-lbnm{color:#d9924a}
  /* fishing tab skill header (inventory) */
  .fshc-skill{margin-bottom:10px}
  .fshc-lv{font:800 15px 'Alagard',ui-monospace,monospace;color:#8ce0ff;text-transform:lowercase}
  /* ===== REEL minigame (balance the bob) ===== */
  #fishReel{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(6,12,20,.55);touch-action:none;user-select:none}
  #fishReel[hidden]{display:none}
  #fishReel .fr-card{background:linear-gradient(180deg,#123049,#0c1f31);border:2px solid #2a6a8c;border-radius:14px;padding:14px 16px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 0 0 3px #06121e,0 18px 50px rgba(0,0,0,.6);font-family:'Alagard',ui-monospace,monospace;color:#eaf2f8;cursor:pointer}
  #fishReel .fr-title{font-size:22px;color:#ffcf3a;letter-spacing:.04em;animation:frTitle .4s steps(2) infinite}
  @keyframes frTitle{0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
  #fishReel .fr-body{display:flex;align-items:stretch;gap:12px}
  #fishReel .fr-cv{border-radius:8px;border:1px solid #24506a;image-rendering:pixelated;background:#0e2436}
  #fishReel .fr-tank{border-radius:8px;image-rendering:pixelated;background:#08131e}
  #fishReel .fr-hint{font:600 12px ui-monospace,Menlo,monospace;color:#9fc4d8;text-align:center;max-width:260px}
  #fishReel .fr-fishname{font:800 17px 'Alagard',ui-monospace,monospace;text-transform:lowercase;margin-top:-4px}
  #fishReel .fr-timer{width:100%;max-width:150px;height:7px;border-radius:5px;background:rgba(0,0,0,.4);border:1px solid #24506a;overflow:hidden}
  #fishReel .fr-timer>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd45a,#ff9a3c);transition:width .1s linear}
  #fishReel .fr-timer.low>i{background:linear-gradient(90deg,#ff6a4a,#e0331a)}
  .pl-overlay[hidden]{display:none}
  /* ===== PHONE (pixel smartphone overlay) + BINGE app ===== */
  .phone-frame{width:min(360px,92vw);height:min(640px,88vh);background:#16171f;border:3px solid #2b2e3a;border-radius:30px;box-shadow:0 18px 60px rgba(0,0,0,.6),inset 0 0 0 2px #0c0d12;display:flex;flex-direction:column;overflow:hidden;position:relative}
  .phone-status{flex:0 0 auto;height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#0e0f15;color:#cfd3dc;font:700 12px ui-monospace,Menlo,monospace;border-bottom:1px solid #23252e}
  .phone-back{background:none;border:none;color:#9fe8ff;width:22px;height:22px;padding:0;cursor:pointer;display:grid;place-items:center}
  .phone-back svg{width:16px;height:16px}
  .phone-bar-title{flex:1;text-align:left;font-family:'Alagard',monospace;font-size:15px;color:#fff;text-transform:lowercase}
  .phone-time{opacity:.85}
  .phone-bat{width:18px;height:10px;border:1.5px solid #cfd3dc;border-radius:2px;position:relative}
  .phone-bat::after{content:'';position:absolute;inset:1.5px;right:5px;background:#7dffa6}
  .phone-bat::before{content:'';position:absolute;right:-3px;top:3px;width:2px;height:4px;background:#cfd3dc}
  .phone-screen{flex:1;position:relative;overflow:hidden auto;background:radial-gradient(120% 80% at 50% 0%,#241a33 0%,#15131f 60%,#0f0d16 100%);display:flex;flex-direction:column}
  .phone-nav{flex:0 0 auto;height:40px;display:grid;place-items:center;background:#0e0f15;border-top:1px solid #23252e}
  .phone-home{width:46px;height:10px;border-radius:6px;background:#3a3d49;border:none;cursor:pointer}
  .phone-home:hover{background:#54586a}
  /* home screen */
  .phone-screen.home{padding:18px 16px}
  .app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px;margin-top:6px}
  .app-icon{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;color:#fff}
  .app-glyph{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(160deg,#2a2c38,#1a1b24);box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
  .app-glyph svg{width:30px;height:30px;color:var(--ac,#fff)}
  .app-label{font-family:'Alagard',monospace;font-size:13px;letter-spacing:.02em}
  .app-icon.off{opacity:.4}.app-icon.off .app-glyph{filter:grayscale(.8)}
  .app-icon:not(.off):active{transform:translateY(1px)}
  .phone-hint{margin-top:auto;text-align:center;font:600 12px ui-monospace,monospace;color:#8a8fa3;padding:10px}
  /* shared app bits */
  .phone-apphead{padding:12px 14px 6px;text-align:center}
  .phone-apphead b{font-family:'Alagard',monospace;font-size:18px;color:#fff;display:block}
  .phone-apphead span{font:600 11.5px ui-monospace,monospace;color:#9098ac}
  .phone-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#9098ac;font:600 13px ui-monospace,monospace;padding:20px}
  .phone-empty-big{font-family:'Alagard',monospace;font-size:20px;color:#fff}
  .phone-refresh,.me-save,.phone-refresh{margin-top:6px;font-family:'Alagard',monospace;font-size:14px;padding:8px 18px;border:none;border-radius:10px;background:linear-gradient(180deg,#3ee07c,#27b863);color:#062;cursor:pointer}
  /* binge swipe */
  .phone-screen.binge{padding-bottom:10px}
  .binge-stack{flex:1;position:relative;display:grid;place-items:center;padding:8px 14px;min-height:0}
  .binge-card{position:absolute;width:min(248px,82%);background:#1c1a26;border:2px solid #38323f;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5);touch-action:none;cursor:grab;display:flex;flex-direction:column;will-change:transform}
  .binge-card.behind{transform:scale(.94) translateY(10px);filter:brightness(.7);pointer-events:none}
  .binge-card canvas{display:block;width:100%;background:radial-gradient(120% 90% at 50% 20%,#3a2c52,#211b30)}
  .binge-info{padding:10px 12px 12px}
  .binge-name{font-family:'Alagard',monospace;font-size:20px;color:#fff;line-height:1.1}
  .binge-meta{font:700 12px ui-monospace,monospace;color:#cfd3dc;margin-top:2px}
  .binge-bio{margin-top:6px;font:600 12.5px ui-monospace,monospace;color:#d7dae3;line-height:1.35;max-height:48px;overflow:hidden}
  .binge-bio.dim{color:#7a8092;font-style:italic}
  .binge-stamp{position:absolute;top:16px;font-family:'Alagard',monospace;font-size:26px;padding:2px 10px;border-radius:8px;border:3px solid;opacity:0;pointer-events:none;text-transform:uppercase}
  .binge-stamp.yes{left:14px;color:#3ee07c;border-color:#3ee07c;transform:rotate(-16deg)}
  .binge-stamp.no{right:14px;color:#ff4d68;border-color:#ff4d68;transform:rotate(16deg)}
  .binge-actions{flex:0 0 auto;display:flex;justify-content:center;gap:26px;padding:8px 0 4px}
  .binge-btn{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;font-size:26px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.4)}
  .binge-btn.pass{background:#26242e;color:#ff6f88}.binge-btn.like{background:#26242e;color:#3ee07c}
  .binge-btn:active{transform:translateY(2px)}
  /* matches */
  .match-list{padding:8px 12px;display:flex;flex-direction:column;gap:8px;overflow:auto}
  .match-row{display:flex;align-items:center;gap:10px;background:#1b1a24;border:1px solid #312b3a;border-radius:12px;padding:6px 10px;cursor:pointer;text-align:left;color:#fff}
  .match-row canvas{flex:0 0 auto;border-radius:8px;background:#241b33}
  .match-name{font-family:'Alagard',monospace;font-size:16px}
  .match-sub{font:600 11px ui-monospace,monospace;color:#9098ac}
  /* me / profile */
  .phone-screen.me{padding:6px 14px 14px;align-items:center}
  .me-card{position:relative;width:min(220px,80%);margin:4px auto 0;background:#1c1a26;border:2px solid #38323f;border-radius:16px;overflow:hidden}
  .me-card canvas{display:block;width:100%;background:radial-gradient(120% 90% at 50% 20%,#3a2c52,#211b30)}
  .me-form{width:min(260px,90%);margin:12px auto 0;display:flex;flex-direction:column;gap:8px;align-items:center}
  .me-bio{width:100%;height:64px;resize:none;background:#0e0d14;border:1px solid #312b3a;border-radius:10px;color:#e7e9ee;font:600 13px ui-monospace,monospace;padding:8px}
  /* it's a match! */
  .match-pop{position:absolute;inset:0;background:linear-gradient(160deg,#3a1530,#1a0f24);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;z-index:5}
  .match-title{font-family:'Alagard',monospace;font-size:30px;color:#ff8ab0;text-shadow:0 0 14px rgba(255,94,122,.7)}
  .match-sub2{font:700 13px ui-monospace,monospace;color:#fff}
  .match-duo{display:flex;align-items:center;gap:6px}
  .match-ava{width:90px;height:104px;border-radius:14px;overflow:hidden;border:2px solid #ff8ab0;background:radial-gradient(120% 90% at 50% 20%,#3a2c52,#211b30)}
  .match-ava canvas{display:block}
  .match-heart{font-size:28px;color:#ff5e7a;animation:mheart 1s ease-in-out infinite}
  @keyframes mheart{50%{transform:scale(1.25)}}
  .match-note{font:600 12px ui-monospace,monospace;color:#ffc8db}
  .match-btns{display:flex;flex-direction:column;gap:8px;width:min(220px,80%)}
  .match-btn{font-family:'Alagard',monospace;font-size:15px;padding:9px;border:none;border-radius:10px;background:linear-gradient(180deg,#ff6f91,#e84d72);color:#fff;cursor:pointer}
  .match-btn.alt{background:#2a2533;color:#ffc8db}
  .phone-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(10,10,16,.92);color:#fff;font:700 12px ui-monospace,monospace;padding:7px 14px;border-radius:9px;z-index:9;white-space:nowrap}
  /* phone NOTIFICATION — buzz the FAB + a pop above the XP bar */
  @keyframes fab-buzz{0%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(-2px,1px) rotate(-8deg)}30%{transform:translate(2px,-1px) rotate(8deg)}45%{transform:translate(-2px,1px) rotate(-6deg)}60%{transform:translate(2px,-1px) rotate(5deg)}80%{transform:translate(-1px,0) rotate(-3deg)}}
  .pl-fab.buzz{animation:fab-buzz .55s ease-in-out 3}
  .pl-fab .noti-dot{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:#ff3b6b;border:2px solid #15131d;box-shadow:0 0 9px #ff3b6b}
  /* in = bouncy (the .show transition), out = smooth (the base transition) → clean slide in AND out */
  #notifPop{position:fixed;left:50%;bottom:96px;z-index:80;display:flex;align-items:center;gap:9px;background:linear-gradient(180deg,#2a1830,#180e20);border:2px solid #ff5e7a;border-radius:13px;padding:8px 15px 8px 11px;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(255,94,122,.35);font-family:'Alagard',ui-monospace,monospace;font-size:14px;color:#fff;white-space:nowrap;opacity:0;transform:translateX(-50%) translateY(22px) scale(.92);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
  #notifPop.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);transition:opacity .25s ease,transform .42s cubic-bezier(.2,1.6,.45,1)}
  #notifPop .np-ic{display:flex;flex:0 0 auto}
  #notifPop.show .np-ic{animation:fab-buzz .5s ease-in-out infinite}  /* only buzz while visible — notifPop hides via opacity:0 (not display:none), so an unscoped infinite animation ran on the invisible element for the whole session */
  #notifPop b{color:var(--np-ac,#ff9ec4)}
  .pl-card{width:min(520px,94vw);max-height:calc(84vh / var(--uisc,1));display:flex;flex-direction:column;background:#14151b;border:1px solid #2c2f3a;border-radius:16px;padding:14px;gap:10px;overflow-y:auto;overscroll-behavior:contain}  /* r290: cap pre-divided by --uisc so the zoomed card never taller than the screen. r311: overflow-y:auto so long content (a 2000-char battle rules block in submit, or the settings rows on a short phone) SCROLLS instead of pushing the upload button / lower rows off-screen */
  .pl-head{display:flex;align-items:center;justify-content:space-between}
  .pl-head b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:18px;letter-spacing:1px}
  .pl-x{background:none;border:none;color:#aeb4c2;font-size:18px;cursor:pointer}
  .pl-search{width:100%;box-sizing:border-box;background:#0e0f14;border:1px solid #2c2f3a;color:#fff;border-radius:10px;padding:9px 12px;font-size:14px;outline:none}  /* r290: full width of the leaderboard card (inputs don't reliably honor flex-stretch) */
  .pl-list{overflow:auto;display:flex;flex-direction:column;gap:6px}
  .pl-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.03)}
  .pl-pos{width:30px;text-align:right;font-variant-numeric:tabular-nums;font-weight:800;color:#8b92a2}
  .pl-av{width:30px;height:30px;border-radius:8px;flex:0 0 auto}
  .pl-nm{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pl-elo{font-weight:800;font-variant-numeric:tabular-nums}
  .discord-btn{display:inline-flex;align-items:center;gap:9px;background:#5865F2;color:#fff;border:none;border-radius:11px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(88,101,242,.4)}
  .discord-btn:active{transform:translateY(1px)}
  .or-div{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin:2px 0}
  .who{display:flex;align-items:center;gap:9px;background:rgba(88,101,242,.14);border:1px solid rgba(88,101,242,.5);color:#cdd3ff;border-radius:11px;padding:7px 13px;font-size:13px}
  .who img{width:26px;height:26px;border-radius:50%;flex:0 0 auto}
  /* ---- finals coin-toss tiebreaker overlay (mirrored from host; same look as control panel) ---- */
  .coin-overlay{position:fixed;inset:0;z-index:280;display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 40%,rgba(35,28,50,.93),rgba(8,8,12,.97));opacity:0;pointer-events:none}
  .coin-overlay.go{opacity:1;pointer-events:auto;transition:opacity .4s ease}
  .coin-card{text-align:center;padding:24px 40px;max-width:540px}
  .coin-title{font-family:var(--display);font-weight:900;font-size:clamp(34px,5vw,54px);letter-spacing:-1px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .coin-sub{margin-top:2px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--lilac)}
  .coin-vs{margin:14px 0 6px;font-family:var(--display);font-weight:900;font-size:clamp(22px,3.6vw,38px);display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
  .coin-vs-x{font-size:14px;font-weight:900;letter-spacing:3px;color:#fff;opacity:.92;margin:0 5px}
  .coin-stage{perspective:700px;height:118px;display:grid;place-items:center;margin:6px 0}
  .coin{width:94px;height:94px;position:relative;transform-style:preserve-3d;transform:rotateY(0deg)}
  .coin-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:34px;color:#3a2c10;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 4px rgba(255,255,255,.28)}
  .coin-h{background:radial-gradient(circle at 35% 30%,#ffe7a0,#f0b94a 70%,#c9912f)}
  .coin-h::after{content:'H'}
  .coin-t{background:radial-gradient(circle at 35% 30%,#ffd98a,#e0a23a 70%,#b87f26);transform:rotateY(180deg)}
  .coin-t::after{content:'T'}
  .coin-flips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px;min-height:30px}
  .coin-pill{font-family:var(--display);font-weight:800;font-size:12px;padding:5px 11px;border-radius:9px;animation:cpPop .3s ease}
  .coin-pill.a{background:rgba(143,211,232,.2);color:#bfe7f2;border:1px solid rgba(143,211,232,.5)}
  .coin-pill.b{background:rgba(240,169,208,.2);color:#f3c4dc;border:1px solid rgba(240,169,208,.5)}
  .coin-result{margin-top:16px;font-family:var(--display);font-weight:900;font-size:clamp(20px,3vw,30px);color:#ffcf6a;opacity:0;transform:scale(.85)}
  .coin-result.show{animation:crShow .5s cubic-bezier(.2,.8,.3,1) forwards}
  .coin-phase-big{font-family:var(--display);font-weight:900;font-size:clamp(46px,9.5vw,128px);letter-spacing:-1px;line-height:.95;color:#fff;text-shadow:0 0 30px rgba(150,110,255,.6),0 0 72px rgba(80,200,255,.4);margin:22px 0}
  .coin-phase-big[hidden]{display:none}
  .coin-phase-big.in{animation:coinBigIn .55s cubic-bezier(.2,1.3,.3,1) both}
  .coin-title[hidden],.coin-sub[hidden],.coin-vs[hidden],.coin-flips[hidden],.coin-stage[hidden]{display:none}
  @keyframes cpPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes crShow{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
  @keyframes coinBigIn{0%{opacity:0;transform:scale(.55)}55%{opacity:1;transform:scale(1.09)}100%{transform:scale(1)}}
  /* ---- finals stage-transition banner (Round 1 -> Round 2 -> Grand Final), mirrored from host ---- */
  .stage-banner{position:fixed;inset:0;z-index:260;display:grid;place-items:center;pointer-events:none;opacity:0}
  .stage-banner.go{animation:sbFade 3s ease forwards}
  @keyframes sbFade{0%{opacity:0}12%{opacity:1}82%{opacity:1}100%{opacity:0}}
  .sb-card{text-align:center;padding:30px 54px;border-radius:22px;background:linear-gradient(180deg,rgba(28,24,38,.82),rgba(12,12,18,.88));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:scale(.85);animation:sbPop 3s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes sbPop{0%{transform:scale(.85) translateY(14px)}14%{transform:scale(1.03) translateY(0)}26%{transform:scale(1)}82%{transform:scale(1)}100%{transform:scale(.97)}}
  .sb-kicker{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--lilac);margin-bottom:8px}
  .sb-main{font-family:var(--display);font-weight:900;font-size:clamp(30px,5vw,52px);letter-spacing:-1px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.02}
  .sb-sub{margin-top:10px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:1px;color:var(--ink)}
  /* Twitch link field in the character creator */
  .acc-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:330px}
  .acc-btn{padding:8px 14px;border-radius:11px;border:1px solid var(--line);background:#15161d;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px}
  .acc-btn.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:rgba(240,168,90,.12)}
  .acc-btn.locked{border-color:#6a4fb0;background:linear-gradient(180deg,rgba(120,90,255,.18),rgba(120,90,255,.06));color:#d7c8ff}
  .acc-btn.locked .hp-dot{opacity:.4}
  .hp-dot{width:11px;height:11px;border-radius:50%;background:#62e0ff;border:1.5px solid rgba(255,255,255,.55);box-shadow:0 0 8px rgba(98,224,255,.6);flex:0 0 auto}
  .lock-tag{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:#7a32e6;color:#fff}
  .acc-btn.on .lock-tag{background:var(--accent);color:#1a1206}
  .hp-hint{font-size:10px;color:#9a7fd6;max-width:300px;text-align:center;line-height:1.4;margin:-2px 0 2px}
  .hp-hint[hidden]{display:none}
  .tw-link{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(320px,86vw)}
  .tw-input{width:100%;text-transform:lowercase}
  .tw-hint{font-size:11px;color:var(--muted);opacity:.85;line-height:1.35;max-width:300px;text-align:center}
  .tw-hint b{color:var(--lilac)}
  .twitch-btn{display:inline-flex;align-items:center;gap:9px;background:#9146FF;color:#fff;border:none;border-radius:11px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(145,70,255,.4)}
  #authStep2{display:flex;flex-direction:column;align-items:center;gap:11px;max-width:340px;width:100%;animation:authUp .3s}
  .auth-done{display:inline-flex;align-items:center;gap:7px;color:#9fe6b0;font-size:13px;font-weight:700;background:rgba(80,220,130,.1);border:1px solid rgba(80,220,130,.35);border-radius:999px;padding:5px 14px}
  .auth-check{font-weight:900}
  .auth-step2-h{margin:2px 0;font-size:15px;line-height:1.4}
  #authStep2 .tw-input{max-width:260px}
  @keyframes authUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .twitch-btn[hidden]{display:none}
  .twitch-btn:active{transform:translateY(1px)}
  .tw-who{display:flex;align-items:center;gap:7px;background:rgba(145,70,255,.14);border:1px solid rgba(145,70,255,.5);color:#d8c8ff;border-radius:11px;padding:7px 13px;font-size:13px;font-weight:700}
  .tw-who[hidden]{display:none}
  /* Twitch sub-gift line-skip alert */
  .gift-alert{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-18px);z-index:520;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
  .gift-alert[hidden]{display:none}
  .gift-alert.go{opacity:1;transform:translateX(-50%) translateY(0)}
  .gift-alert .ga-card{display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:15px;background:linear-gradient(120deg,#7a32e6,#9657ff 55%,#b07bff);box-shadow:0 12px 34px -8px rgba(122,50,230,.7),inset 0 0 0 1px rgba(255,255,255,.18);max-width:92vw}
  .gift-alert.rank1 .ga-card{background:linear-gradient(120deg,#e0883f,#ffcf6a 50%,#9657ff);box-shadow:0 12px 38px -6px rgba(255,180,80,.6),inset 0 0 0 1px rgba(255,255,255,.22)}
  .gift-alert.go .ga-card{animation:gaIn .5s cubic-bezier(.2,1.2,.3,1)}
  .gift-alert .ga-icon{font-size:30px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));animation:gaPop .6s ease}
  .gift-alert .ga-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
  .gift-alert .ga-name{font-family:var(--display);font-weight:900;font-size:17px;color:#fff;letter-spacing:-.3px;text-shadow:0 1px 6px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gift-alert .ga-sub{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.3px;color:rgba(255,255,255,.97);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @keyframes gaIn{0%{transform:scale(.85)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
  @keyframes gaPop{0%{transform:scale(.4) rotate(-15deg)}60%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
  /* ============ Alagard EVERYWHERE on /play (Dru) — pixel font as the UI face ============ */
  @font-face{ font-family:'Alagard'; src:url('/alagard.ttf') format('truetype'); font-display:swap; }
  body, body *{ font-family:'Alagard', -apple-system, "Segoe UI", system-ui, sans-serif !important; }
  /* JUDGMENT opt-outs — keep prose, typed input, chat messages, full-sentence text + playing cards readable */
  input, textarea, .np-vol,
  #pchatLog .r span, #pchatInput, #twitchInput, #lbSearchP, .pl-search, .tw-input, .tw-hint, .tw-who,
  .jbx-picklab, .inv2-unlock, .inv2-tip,
  .det-rules, .det-rules *, .det-sub, .dl-row, .dl-row *, .bcard-t, .bcard-t *, .bcard-m, .bcard-m *, .gc-ssn, .sub-ctx, .sub-ctx *, .sub-snd, #subStatus, .sub-file span, .sub-status *,
  .bj-card, .bj-rk, .bj-su{ font-family:-apple-system, "Segoe UI", system-ui, sans-serif !important; }
  /* NPC dialogue (barsh/borsh lines + blackjack messages) → in the Alagard font (Dru) */
  .dlg-name, .dlg-text, .dlg-opt, .bj-msg{ font-family:'Alagard', -apple-system, system-ui, sans-serif !important; letter-spacing:.02em; }
  .dlg-text{ font-size:16px; line-height:1.5; }
  /* ===== /play now-playing = HOST battle panel, minus the ELO buttons (r172) ===== */
  .pnow-rig{transform:scale(0.8);transform-origin:50% 50%;display:flex;flex-direction:column;align-items:center;gap:2px}  /* level (slant removed) + perfectly centered, 20% smaller — mirrors host .stage */
  .pnow{display:inline-flex;align-items:center;gap:14px;margin-bottom:2px;z-index:9;max-width:96%}
  .pnow .pav{width:54px;height:54px;border-radius:12px;object-fit:cover;background:#2a2440;border:2px solid #d8a73a;flex:0 0 auto}
  .pnow .pav[src=""]{visibility:hidden}
  .pnow .pmeta{min-width:0}
  #ptitle{font-family:'Alagard',monospace !important;font-size:34px;line-height:.9;letter-spacing:.5px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:52vw;position:static;transform:none;font-weight:400;text-align:left}
  .pnow .pfile{font:600 12px/1 ui-monospace,Menlo,monospace;color:#aab0bc;margin-top:8px;text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pnow .prank{display:inline-flex;align-items:center;gap:6px;background:rgba(26,27,34,.9);border:1px solid #2c2e38;border-radius:9px;padding:5px 12px;font:700 14px/1 'Alagard',monospace;color:#cdb89a;text-shadow:0 1px 3px rgba(0,0,0,.6);flex:0 0 auto}
  .pnow .prank:empty{display:none}
  /* r314: submissions rank chip = emblem + tier + the ACTUAL ELO number, badge enlarged (26px, > the finals 20px) for the canon */
  .pnow .prank .pr-badge{display:inline-flex;align-items:center;line-height:0}
  .pnow .prank .pr-badge svg{width:26px;height:26px}
  .pnow .prank .pr-name{white-space:nowrap}
  .pnow .prank .pr-elo{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:#efe4c8;letter-spacing:.3px}
  .pwrow{display:flex;align-items:stretch;gap:14px;width:100%;max-width:1340px;margin:0 auto}  /* stretch so the LUFS column matches the wave height (reaches the top) */
  .pwbox{flex:1 1 auto;min-width:0;position:relative;isolation:isolate}
  #pwave{width:100%;height:200px;display:block;background:none}
  #pmini{width:100%;height:38px;display:block;margin-top:5px;opacity:.8}
  .pwtime{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font:700 16px/1 ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
  .pwtime .tl,.pwtime .tr{color:#f0a35f;text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .pwtime .tc{font:600 13px/1 ui-monospace,Menlo,monospace;color:#aab0bc;letter-spacing:1px}.pwtime .tc b{color:#f3f1ec}
  .pwfoot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:7px}  /* gift-subs button right-aligned, below the mini wave */
  .plufs{flex:0 0 54px;display:flex;flex-direction:column;align-items:center;gap:5px}  /* FIXED width (was auto) — the LUFS number changes width every update (-24.4 / -∞ / -9.2); an auto column re-sized the whole row each time, forcing the waveform canvas to re-layout = the jitter. tabular-nums + a fixed column = rock-steady wave. */
  .plufs .val,.plufs .lufs-num,#plufsVal{width:100%;text-align:center;white-space:nowrap}  /* number centered + nowrap inside the fixed column so it never pushes the layout */
  .plufs .cap{font:700 9px/1 ui-monospace,Menlo,monospace;letter-spacing:2px;color:#7d828e}
  #plufs{width:28px;height:150px;display:block;background:none;border-radius:0}
  .plufs .val{font:700 16px/1 ui-monospace,Menlo,monospace;color:#5dd29a;text-shadow:0 1px 3px rgba(0,0,0,.7)}
  /* r313: the now-playing panel had NO mobile shrink → on a ~375px phone it ate ~400px of the top and collided with the chat
     feed, the touch hint and the ELO flag column ("the layout is fucked on mobile"). Size it natively for the phone. This
     block MUST live AFTER the desktop panel rules above (equal #id specificity → later source wins). */
  @media(hover:none),(max-width:760px){
    .pnow-rig{transform:none}               /* drop the desktop 0.8 scale — size the panel directly instead of compounding */
    #npbar{padding:58px 10px 6px}           /* was 40px 22px 8px — the top FAB row wraps into a full-width strip on phones (bottom ~54px), so drop the panel BELOW it instead of letting the title collide with the icons */
    #pwave{height:104px}                    /* was 200px — the single biggest reclaim */
    #pmini{display:none}                    /* the mini scrubber is redundant on a phone → frees ~43px */
    #ptitle{font-size:22px;max-width:64vw}  /* was 34px */
    .pnow{gap:10px}
    .pnow .pav{width:44px;height:44px}      /* was 54px */
    .pnow .prank{padding:4px 10px}          /* r314: keep the rank+ELO chip compact on phones */
    .pnow .prank .pr-badge svg{width:22px;height:22px}
    .pwtime{margin-top:3px;font-size:13px}
    .pwfoot{margin-top:4px}
    #giftBtn{padding:6px 10px;font-size:11px}
    body.cam-on #pchat{bottom:210px}        /* the mobile projector is at the TOP, not bottom-left → don't lift the chat for it (overrides the desktop rule at line ~169) */
  }
  /* live cam = a 16:9 screen lit by a beam from the left — fixed on the left, shows in ANY mode (battle or lobby) when cam is on */
  .projcam{position:fixed;left:6px;bottom:6px;z-index:25;width:390px;height:220px;display:none;align-items:center;justify-content:flex-end;pointer-events:none}  /* cam locked hugging the bottom-left corner — flat, out of the centered waveform's way (mirrors host). r287: +20% (was 325x183) */
  .cam-on .projcam{display:flex}
  .pc-beam{display:none}  /* projector beam removed (read as stray white lines); screen box-shadow glow stays */
  @keyframes pcFlick{0%,100%{opacity:1}48%{opacity:.86}51%{opacity:.97}}
  .pc-screen{position:relative;z-index:2;width:390px;height:220px;border-radius:6px;overflow:hidden;background:#0a0f18;box-shadow:0 0 44px rgba(255,240,205,.22),0 12px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,240,205,.25)}  /* r287: +20% (was 325x183) */
  .pc-screen video{width:100%;height:100%;object-fit:cover;display:block}
  /* cam is parked in the bottom-left corner now, so the waveform no longer shifts when the cam is on — it stays centered (mirrors host) */
  @media (max-width:760px){ .projcam{left:8px;top:66px;width:176px;height:104px} .pc-beam{display:none} .pc-screen{width:172px;height:96px} .cam-on #npbar{padding-left:0} }  /* phone cam just below the top-left FAB row */
  /* tap the projector → voice-only chip: the video stream truly stops (phone decode + bandwidth → 0), tap again to bring the picture back */
  .projcam{cursor:pointer}
  .cam-mini .pc-screen{display:none}
  .cam-mini .projcam{width:auto;height:auto}
  .cam-mini .projcam::after{content:"🎙 bishu · voice only";display:block;padding:7px 12px;border-radius:999px;background:rgba(10,15,24,.88);box-shadow:0 0 22px rgba(255,240,205,.18),inset 0 0 0 1px rgba(255,240,205,.3);font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#ffe9bd;white-space:nowrap}