/* GameParlorHQ Party: vibrant party-game skin. Self-hosted fonts only, no CDNs. */
@font-face{font-family:"Fredoka";src:url(/fonts/Fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}
:root{
  --bg:#1b0b3a; --bg2:#2a1260; --card:#2f1670; --card2:#3a1d86; --line:rgba(255,255,255,.14);
  --text:#fff8ec; --muted:#cfc3ff;
  --pink:#ff3d9a; --cyan:#21e6ff; --yellow:#ffd23f; --lime:#a6ff4d;
  --ink:#1b0b3a; /* dark text on bright buttons */
  --display:"Fredoka","SF Pro Rounded",ui-rounded,"Arial Rounded MT Bold","Nunito",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:24px; --tap:52px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:17px/1.5 var(--body);
  background:radial-gradient(80% 50% at 15% 0%,rgba(255,61,154,.28),transparent 60%),
             radial-gradient(70% 50% at 100% 30%,rgba(33,230,255,.20),transparent 60%),
             radial-gradient(60% 40% at 50% 100%,rgba(255,210,63,.14),transparent 60%),
             linear-gradient(180deg,var(--bg2),var(--bg));background-attachment:fixed}
h1,h2,h3,.display{font-family:var(--display);font-weight:700;line-height:1.1;margin:0 0 .4em;letter-spacing:.2px}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:12px}
.skip{position:absolute;left:12px;top:-80px;background:var(--yellow);color:var(--ink);padding:10px 14px;border-radius:999px;font-weight:800;z-index:50}
.skip:focus{top:10px}
.muted{color:var(--muted)} .small{font-size:14px} .center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font:600 16px var(--display)}
.brand img{border-radius:8px}
.brand em{font-style:normal;background:var(--pink);color:var(--ink);padding:2px 10px;border-radius:999px;font-size:13px}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:480px){.brand span{display:none}.pill{font-size:13px;padding:5px 10px}}
.pill{font:600 14px var(--display);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line);white-space:nowrap}
.pill.hosted{background:rgba(255,255,255,.06);font-weight:500;font-size:13px;opacity:.9}
.pill.hot{background:var(--yellow);color:var(--ink);border-color:transparent}
.pill.final{background:var(--pink);color:var(--ink);border-color:transparent}
.pill.low{background:var(--pink);color:var(--ink);animation:pulse 1s infinite}

main{max-width:1100px;margin:0 auto;padding:4px 16px 48px;outline:none}

/* buttons */
.btn{appearance:none;border:0;min-height:var(--tap);padding:0 28px;border-radius:999px;font:700 19px var(--display);letter-spacing:.3px;
  background:var(--yellow);color:var(--ink);cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.3,1.8,.5,1),box-shadow .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(4px) scale(.96);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn.pink{background:var(--pink);color:var(--ink)}
.btn.cyan{background:var(--cyan)}
.btn.lime{background:var(--lime)}
.btn.ghost{background:rgba(255,255,255,.1);color:var(--text);box-shadow:none;border:2px solid var(--line)}
.btn.small{min-height:40px;padding:0 16px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.wide{width:100%}

/* cards & forms */
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.form{max-width:520px;margin:12px auto;display:grid;gap:16px}
label{font:600 15px var(--display);display:block;margin-bottom:6px;color:var(--muted)}
input[type=text],textarea,select{width:100%;font:700 20px var(--body);color:var(--text);background:rgba(0,0,0,.25);border:2px solid var(--line);border-radius:18px;padding:14px 16px}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 4px rgba(33,230,255,.25)}
textarea{resize:none;min-height:96px}
select{appearance:none}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 140px}
.avatars{display:flex;flex-wrap:wrap;gap:8px}
.avatars button{width:48px;height:48px;border-radius:50%;border:3px solid transparent;background:rgba(255,255,255,.1);font-size:24px;cursor:pointer;transition:transform .12s}
.avatars button[aria-pressed=true]{border-color:var(--yellow);background:rgba(255,210,63,.2);transform:scale(1.1)}
.stepper{display:flex;align-items:center;gap:10px}
.stepper output{font:700 28px var(--display);min-width:2ch;text-align:center}
.stepper button{width:var(--tap);height:var(--tap);border-radius:50%;border:0;background:var(--cyan);color:var(--ink);font:700 26px var(--display);cursor:pointer}
.hero{text-align:center;margin:18px auto 6px;max-width:640px}
.hero h1{font-size:clamp(34px,8vw,56px)}
.hero h1 span{color:var(--yellow)}
.hero p{color:var(--muted);margin:0}
/* Logo 3a (punch-left): wordmark on the home hero, icon on the invite page. */
.hero .wordmark{display:block;width:min(100%,380px);height:auto;margin:0 auto 10px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.hero .invite-icon{display:block;width:clamp(72px,20vw,96px);height:auto;margin:0 auto 10px;border-radius:22%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.err{color:#fff;background:rgba(255,61,154,.25);border:2px solid var(--pink);border-radius:14px;padding:10px 14px;font-weight:700}

/* the table: ring of players around the prompt card */
.table{position:relative;margin:8px auto 0}
.ring{display:flex;gap:10px;overflow-x:auto;padding:8px 2px 12px;scrollbar-width:none;justify-content:flex-start}
.ring::-webkit-scrollbar{display:none}
.seat{flex:0 0 auto;width:74px;text-align:center;transition:transform .3s}
.bubble{position:relative;width:58px;height:58px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:30px;
  background:var(--c);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.35)}
.seat.me .bubble{box-shadow:0 0 0 4px var(--yellow),0 8px 18px rgba(0,0,0,.35)}
.seat .nm{font:600 13px var(--display);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .sc{font-size:12px;color:var(--muted)}
.tag{position:absolute;right:-8px;bottom:-6px;font:700 10px/1 var(--display);padding:4px 6px;border-radius:999px;background:#fff;color:var(--ink);text-transform:uppercase;letter-spacing:.4px}
.tag.submitted,.tag.voted{background:var(--lime)} .tag.writing,.tag.voting{background:var(--yellow)} .tag.on-stage{background:var(--pink)} .tag.host{background:var(--cyan)}
.seat.empty .bubble{background:transparent;border:3px dashed var(--line);box-shadow:none;font-size:20px;color:var(--muted)}
.seat.done .bubble{animation:bounce .5s cubic-bezier(.3,1.8,.5,1)}
.stage{max-width:620px;margin:0 auto}

@media (min-width:880px){
  .table{width:100%;max-width:1040px;height:800px}
  /* scoped to the game table: on the invite page the ring is a plain row (an unscoped absolute ring covered the join form) */
  .table .ring{position:absolute;inset:0;display:block;overflow:visible;padding:0;pointer-events:none}
  .table .seat{pointer-events:auto}
  .table .seat{position:absolute;width:96px;margin:-44px 0 0 -48px;left:calc(50% + var(--x) * 42%);top:calc(50% + var(--y) * 41.25%)}
  .bubble{width:72px;height:72px;font-size:38px}
  .seat .nm{font-size:15px}
  .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:480px;max-height:500px;overflow:auto;margin:0;padding:4px 4px 12px}
}

/* prompt card */
.prompt{background:#fff8ec;color:var(--ink);border-radius:28px;padding:22px 22px 26px;position:relative;box-shadow:0 10px 0 var(--pink),0 24px 50px rgba(0,0,0,.4);margin-bottom:22px}
.prompt .kicker{font:700 13px var(--display);letter-spacing:1px;text-transform:uppercase;color:#8a2a6a;margin-bottom:6px}
.prompt h2{font-size:clamp(24px,5.6vw,32px);color:var(--ink);margin:0}
.prompt.final{box-shadow:0 10px 0 var(--yellow),0 24px 50px rgba(0,0,0,.4)}
.answerbox{display:grid;gap:10px}
.count{font-size:13px;color:var(--muted);text-align:right;margin-top:-4px}
.done-card{text-align:center;padding:26px}
.done-card .big{font-size:56px;line-height:1}

/* versus */
.versus{display:grid;gap:14px;position:relative}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:2;background:var(--yellow);color:var(--ink);font:700 22px var(--display);
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.opt{appearance:none;border:0;text-align:left;width:100%;border-radius:24px;padding:22px 20px;min-height:110px;font:700 22px/1.25 var(--display);cursor:pointer;
  color:var(--ink);box-shadow:0 8px 0 rgba(0,0,0,.3);transition:transform .14s cubic-bezier(.3,1.8,.5,1),box-shadow .14s,opacity .2s;position:relative}
.opt.a{background:var(--pink)}.opt.b{background:var(--cyan)}
.opt.c0{background:var(--pink)}.opt.c1{background:var(--cyan)}.opt.c2{background:var(--yellow)}.opt.c3{background:var(--lime)}
.opt:hover:not(:disabled){transform:translateY(-3px) rotate(-.5deg)}
.opt:active:not(:disabled){transform:translateY(5px) scale(.97);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.opt:disabled{cursor:default}
.opt.picked{outline:5px solid #fff;outline-offset:3px}
.opt.dim{opacity:.45}
.opt.empty{font-style:italic;opacity:.6}
.opt .meta{display:flex;align-items:center;gap:8px;margin-top:12px;font:600 15px var(--body)}
.opt .meta .mini{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:16px;background:rgba(255,255,255,.85)}
.opt .pts{margin-left:auto;font:700 20px var(--display)}
.opt .mine{position:absolute;top:10px;right:14px;font:700 11px var(--display);text-transform:uppercase;letter-spacing:.6px;background:var(--ink);color:#fff;padding:3px 8px;border-radius:999px}
.sweep{text-align:center;font:700 26px var(--display);color:var(--yellow);margin:10px 0 0;animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
.finallist{display:grid;gap:12px}
.finallist .opt{min-height:76px;font-size:19px}

/* scoreboard */
.board{display:grid;gap:10px}
.line{display:grid;grid-template-columns:34px 44px 1fr auto;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:18px;padding:10px 14px;position:relative;overflow:hidden}
.line .bar{position:absolute;inset:0 auto 0 0;background:var(--c);opacity:.28;border-radius:18px;transform-origin:left;animation:grow .9s cubic-bezier(.2,1.2,.4,1) both}
.line>*{position:relative}
.line .rk{font:700 22px var(--display);color:var(--muted)}
.line .mini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--c)}
.line .who{font:600 18px var(--display)}
.line .pts{font:700 22px var(--display)}
.line.win{outline:3px solid var(--yellow)}
.crown{font-size:40px;text-align:center;animation:bounce 1s infinite alternate}

/* invite */
.invite{display:grid;gap:10px;background:rgba(0,0,0,.22);border:2px dashed rgba(255,255,255,.25);border-radius:20px;padding:14px}
.code{font:700 34px var(--display);letter-spacing:6px;color:var(--yellow);text-align:center}
.invite input{font-size:14px;padding:10px 12px}

/* toast + confetti + pop */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120px);background:var(--lime);color:var(--ink);font:700 17px var(--display);padding:12px 22px;border-radius:999px;transition:transform .3s cubic-bezier(.3,1.8,.5,1);z-index:60;box-shadow:0 8px 0 rgba(0,0,0,.3)}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--pink)}
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
#confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
.pop{animation:pop .45s cubic-bezier(.3,1.8,.5,1)}
.burst{position:fixed;pointer-events:none;z-index:45}
.burst i{position:absolute;width:10px;height:10px;border-radius:50%;animation:burst .6s ease-out forwards}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(var(--w))}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .line .bar{transform:scaleX(var(--w))}
  #confetti{display:none}
}
.row .btn{flex:1 1 auto;white-space:nowrap;padding:0 18px;font-size:17px}

/* ---------- countdowns ---------- */
.facts{display:flex;justify-content:center;gap:10px;margin:10px 0 14px;flex-wrap:wrap}
.fact{background:var(--card2);border-radius:16px;padding:8px 14px;text-align:center;min-width:84px}
.fact b{display:block;font:700 22px var(--display);color:var(--yellow)}
.fact span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.countdown{display:grid;justify-items:center;gap:2px;background:linear-gradient(135deg,var(--card2),var(--card));border:2px solid var(--cyan);border-radius:20px;padding:12px 16px;margin:0 0 14px;text-align:center}
.countdown b{font:700 40px/1.1 var(--display);color:var(--cyan);font-variant-numeric:tabular-nums}
.countdown span{font-size:13px;color:var(--muted)}
.notice{background:rgba(255,213,74,.12);border:2px solid var(--yellow);border-radius:18px;padding:12px 14px;margin:0 0 14px;text-align:center;font-size:15px}
.notice b{color:var(--yellow)}
.phase-clock{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;margin:0 auto 12px;padding:6px 14px;border-radius:999px;background:var(--card2);font:600 15px var(--display)}
.phase-clock b{font-variant-numeric:tabular-nums;color:var(--cyan)}
.phase-clock.low b{color:var(--pink)} .phase-clock.low{animation:pulse 1s infinite}
.deadline-btns{justify-content:center;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.join-facts{font-size:14px;color:var(--muted);margin:6px 0 0}
.join-facts b{color:var(--cyan);font-variant-numeric:tabular-nums}
.pill.theme{background:var(--card2)}

/* ---------- chat ---------- */
.chat{display:flex;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.chat-body{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.chat-head{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.chat-head strong{font:700 16px var(--display);margin-right:auto}
.chip{border:0;border-radius:999px;padding:6px 12px;background:var(--card2);color:inherit;font:600 13px var(--display);cursor:pointer}
.chip[aria-pressed=true]{background:var(--yellow);color:var(--ink)}
.chat-list{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.msg{font-size:14px;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere}
.msg .mini{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c,var(--card2));font-size:13px;margin-right:6px;vertical-align:-5px}
.msg b{font-family:var(--display);margin-right:6px;color:var(--cyan)}
.msg.mine b{color:var(--yellow)}
.msg.host b{color:var(--pink)}
.hosttag{font:700 10px/1 var(--display);text-transform:uppercase;letter-spacing:.5px;background:var(--pink);color:var(--ink);border-radius:999px;padding:3px 6px;margin-right:6px;vertical-align:1px}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-form input{flex:1;min-width:0;margin:0}
.chat-muted{display:none;padding:14px;text-align:center}
.chat.muted .chat-list{display:none}.chat.muted .chat-muted{display:block;flex:1}
.chat-rail{display:none}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--pink);color:var(--ink);font:700 11px var(--display);margin-left:4px}
.chat-toggle{cursor:pointer;color:inherit;font:600 14px var(--display)}

@media (min-width:1100px){
  main.has-chat, #app.has-chat{max-width:1440px}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
  .layout.chat-collapsed{grid-template-columns:minmax(0,1fr) 56px}
  .chat{position:sticky;top:12px;height:min(640px,calc(100vh - 100px))}
  .chat-toggle{display:none}
  .layout.chat-collapsed .chat-body{display:none}
  .layout.chat-collapsed .chat-rail{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:14px 0;border:0;background:none;color:inherit;font:600 13px var(--display);cursor:pointer;font-size:22px}
  .layout.chat-collapsed .chat-rail .rail-lbl{font-size:13px;writing-mode:vertical-rl}
}
@media (max-width:1099px){
  /* mobile/tablet: a bottom drawer that is fully gone when closed and auto-closes when you owe an answer or vote */
  .chat{position:fixed;left:0;right:0;bottom:0;z-index:30;height:min(52vh,440px);border-radius:22px 22px 0 0;transform:translateY(105%);visibility:hidden;transition:transform .25s,visibility .25s}
  .chat.open{transform:none;visibility:visible}
  body.chat-open #app{padding-bottom:calc(min(52vh,440px) + 16px)}
  body.chat-open .stage .btn{scroll-margin-bottom:calc(min(52vh,440px) + 20px)}
}

/* ---------- themes (clean skins via vars; emblem is decoration only) ---------- */
#emblem{position:fixed;right:-30px;bottom:-40px;font-size:220px;opacity:.08;pointer-events:none;z-index:-1;user-select:none;line-height:1}
html[data-theme=neon]{--bg:#06021a;--bg2:#160642;--card:#140b38;--card2:#21104f;--pink:#ff2bd6;--cyan:#00f0ff;--yellow:#f5ff3b;--lime:#39ff14;--muted:#a99fe0}
html[data-theme=neon] body{background:linear-gradient(rgba(0,240,255,.06) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,rgba(255,43,214,.06) 1px,transparent 1px) 0 0/32px 100%,radial-gradient(1200px 700px at 50% -10%,var(--bg2),var(--bg)) fixed}
html[data-theme=neon] h1,html[data-theme=neon] h2,html[data-theme=neon] .countdown b{text-shadow:0 0 12px rgba(0,240,255,.55),0 0 2px #fff;letter-spacing:.5px}
html[data-theme=neon] .prompt{box-shadow:0 10px 0 var(--cyan),0 0 30px rgba(255,43,214,.45)}
html[data-theme=haunted]{--bg:#0c0911;--bg2:#2a1636;--card:#21172b;--card2:#30223d;--pink:#ff7a1a;--cyan:#a3ff7a;--yellow:#ffd36e;--lime:#b18cff;--muted:#b9a8c9;--display:"Fredoka",Georgia,serif}
html[data-theme=haunted] body{background:radial-gradient(900px 500px at 80% -10%,rgba(163,255,122,.12),transparent 60%),radial-gradient(1200px 700px at 20% 110%,rgba(255,122,26,.16),transparent 60%),linear-gradient(var(--bg2),var(--bg)) fixed}
html[data-theme=haunted] .prompt{background:#f3ead8;box-shadow:0 10px 0 var(--pink),0 24px 50px rgba(0,0,0,.6)}
html[data-theme=beach]{--bg:#05395a;--bg2:#0a7aa1;--card:#0c5577;--card2:#11698f;--pink:#ff7f6b;--cyan:#3ff2d6;--yellow:#ffd166;--lime:#9ae66e;--muted:#c8eef5}
html[data-theme=beach] body{background:radial-gradient(500px 300px at 85% 0,rgba(255,209,102,.45),transparent 70%),linear-gradient(180deg,var(--bg2) 0%,var(--bg) 70%,#04263d 100%) fixed}
html[data-theme=beach] .prompt{background:#fff6e0;box-shadow:0 10px 0 var(--yellow),0 24px 50px rgba(0,0,0,.35)}
html[data-theme=space]{--bg:#03050f;--bg2:#121a44;--card:#111840;--card2:#1b245c;--pink:#ff6ec7;--cyan:#7df9ff;--yellow:#ffe066;--lime:#a594ff;--muted:#aab3e6}
html[data-theme=space] body{background:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 70% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 85% 75%,#fff,transparent),radial-gradient(1px 1px at 25% 55%,#cfe,transparent),radial-gradient(900px 600px at 70% 10%,rgba(165,148,255,.25),transparent 60%),linear-gradient(var(--bg2),var(--bg)) fixed;background-size:300px 300px,250px 250px,400px 400px,350px 350px,200px 200px,auto,auto}
html[data-theme=space] .prompt{box-shadow:0 10px 0 var(--lime),0 24px 50px rgba(0,0,0,.5)}
body{isolation:isolate}

/* ---------- continue on another device ---------- */
.move-btn{cursor:pointer;color:inherit}
.modal{position:fixed;inset:0;z-index:90;background:rgba(5,2,15,.72);display:grid;place-items:center;padding:16px;overflow:auto}
.modal-card{width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto}
.modal-card h2{margin:0 0 8px;font-size:22px;text-align:center}
.qr{width:min(220px,62vw);margin:10px auto;border-radius:14px;overflow:hidden;box-shadow:0 0 0 4px var(--cyan)}
.qr svg{display:block;width:100%;height:auto}
.xfer-code{font:700 34px/1.1 var(--display);letter-spacing:6px;text-align:center;color:var(--yellow);font-variant-numeric:tabular-nums}
.xfer-code span{color:var(--muted);margin:0 2px}
.copy-row{gap:8px;margin:8px 0}
.copy-row input{flex:1;min-width:0;margin:0;font-size:13px}
.modal-actions{justify-content:center;margin-top:10px}
.moved .big{font-size:48px}
#xfer{font:700 26px var(--display);letter-spacing:6px;text-transform:uppercase;text-align:center}
.copy-row{flex-wrap:nowrap}.copy-row>button{flex:0 0 auto}.modal-actions>*{flex:0 0 auto}

/* ---------- early-start vote ---------- */
.tag.ready{background:var(--lime)}
.ready-box{display:grid;justify-items:center;gap:8px;margin:0 0 14px;padding:12px;border-radius:18px;background:rgba(255,255,255,.06);border:1px dashed var(--line)}
.ready-count b{font:700 18px var(--display);color:var(--lime)} .ready-count span{color:var(--muted);font-size:14px}
.ready-btn{background:var(--card2);color:var(--text);border:2px solid var(--lime)}
.ready-btn.on{background:var(--lime);color:var(--ink)}
.ready-go{font:700 18px var(--display);color:var(--yellow);animation:pulse 1s infinite}
.ready-go b{font-size:26px;font-variant-numeric:tabular-nums}

/* ---------- back to the hall (footer, every screen; in normal flow so it never covers play) ---------- */
.hall-foot{display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:center;padding:8px 16px calc(28px + env(safe-area-inset-bottom));max-width:1100px;margin:0 auto}
.back-hall{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font:700 18px var(--display);letter-spacing:.3px;text-decoration:none;color:var(--ink);background:var(--cyan);
  box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.12);transition:transform .12s cubic-bezier(.3,1.8,.5,1),box-shadow .12s}
.back-hall span{font-size:22px;line-height:1}
.back-hall:hover{transform:translateY(-2px) scale(1.02)}
.back-hall:active{transform:translateY(4px) scale(.96);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.back-hall:focus-visible{outline:4px solid var(--yellow);outline-offset:4px;border-radius:999px}
@media (max-width:1099px){ body.chat-open .hall-foot{padding-bottom:calc(min(52vh,440px) + 16px)} }
@media (prefers-reduced-motion:reduce){.back-hall{transition:none}.back-hall:hover,.back-hall:active{transform:none}}