:root{
  --bg:#0b0f1a; --bg2:#121829; --card:#171f33; --card2:#1e2840; --line:#2a3552;
  --text:#eef2fb; --muted:#93a0bd; --gold:#f2b630; --gold-ink:#1a1300;
  --crew:#3ee0c8; --imp:#ff4d5e; --ok:#4ade80; --warn:#fbbf24;
  --radius:16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%}
body{min-height:100dvh;background:
  radial-gradient(1200px 600px at 80% -10%, #1b2a55 0%, transparent 60%),
  radial-gradient(900px 500px at -10% 110%, #2a1530 0%, transparent 55%), var(--bg);
  background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold)}
.boot{padding:40vh 16px;text-align:center;color:var(--muted)}
#app{max-width:720px;margin:0 auto;padding:16px 16px calc(32px + env(safe-area-inset-bottom))}
#app.wide{max-width:1180px}

h1,h2,h3{margin:0 0 8px;line-height:1.15;letter-spacing:.01em}
h1{font-size:28px} h2{font-size:21px} h3{font-size:16px}
p{margin:0 0 10px;line-height:1.45}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}
.mono{font-family:var(--mono);letter-spacing:.08em}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack>*+*{margin-top:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spacer{flex:1}

.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card+.card{margin-top:12px}
.card.tight{padding:12px}

.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--gold)}
.brand .dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--gold);display:inline-block;box-shadow:0 0 12px #f2b63080}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.topbar .who{font-size:13px;color:var(--muted);text-align:right}

.btn{appearance:none;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:12px 16px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;text-decoration:none;color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.block{width:100%}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.btn.red{background:var(--imp);border-color:var(--imp);color:#fff}
.btn.teal{background:var(--crew);border-color:var(--crew);color:#00221d}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 11px;min-height:34px;font-size:13px;border-radius:9px}
.btn.big{min-height:60px;font-size:18px;border-radius:14px}

label.field{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
label.field>span{display:block;margin-bottom:5px}
input[type=text],input[type=number],input[type=password],select,textarea{width:100%;background:#0d1322;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:120px;resize:vertical;line-height:1.4}
.check{display:flex;gap:8px;align-items:center;font-size:14px;margin-bottom:10px;color:var(--text)}
.check input{width:20px;height:20px;accent-color:var(--gold)}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:#0d1322;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.pill.crew{color:var(--crew);border-color:#3ee0c855}
.pill.imp{color:var(--imp);border-color:#ff4d5e66}
.pill.ok{color:var(--ok);border-color:#4ade8055}
.pill.warn{color:var(--warn);border-color:#fbbf2455}
.pill.gold{color:var(--gold);border-color:#f2b63066}
.pill.dead{color:#c7cede;background:#2a2f3d}

.progress{height:14px;background:#0d1322;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#9be15d);border-radius:999px;transition:width .6s}

/* join */
.hero{text-align:center;padding:28px 0 10px}
.hero h1{font-size:40px;letter-spacing:.04em;text-transform:uppercase}
.hero h1 b{color:var(--imp)}
.codebox{font-family:var(--mono);font-size:28px;text-transform:uppercase;letter-spacing:.35em;text-align:center}

/* tasks */
.task{display:flex;align-items:center;gap:12px;padding:13px 14px;background:#0d1322;border:1px solid var(--line);border-radius:12px;cursor:pointer;width:100%;text-align:left}
.task+.task{margin-top:8px}
.task .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--card2);flex:none;font-size:16px}
.task.done{opacity:.6}
.task.done .ico{background:#4ade8022;color:var(--ok)}
.task.denied{border-color:#fbbf2488}
.task .t{font-weight:650}
.task .r{font-size:13px;color:var(--muted)}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.actions .full{grid-column:1/-1}

.rolecard{position:relative;border-radius:var(--radius);padding:16px;border:1px dashed var(--line);background:#0d1322;text-align:center;user-select:none;-webkit-user-select:none;touch-action:manipulation;cursor:pointer}
.rolecard .hidden-msg{color:var(--muted);font-size:14px}
.rolecard.show{border-style:solid}
.rolecard.show.crew{border-color:var(--crew);box-shadow:0 0 30px #3ee0c833 inset}
.rolecard.show.imp{border-color:var(--imp);box-shadow:0 0 30px #ff4d5e33 inset}
.rolename{font-size:26px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.rolename.crew{color:var(--crew)} .rolename.imp{color:var(--imp)}

.banner{padding:12px 14px;border-radius:12px;background:#2a2f3d;border:1px solid #3a4258;font-size:14px;margin-bottom:12px}
.banner.warn{background:#3a2f12;border-color:#6b5317}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 10px;border-radius:999px;background:var(--card2);border:1px solid var(--line);font-size:14px}
.chip.dead{text-decoration:line-through;color:var(--muted)}

/* full-screen alert states */
.alert{min-height:calc(100dvh - 64px);display:flex;flex-direction:column;justify-content:center;text-align:center;gap:14px}
.alert .big:not(.btn){font-size:38px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
.alert.red .big:not(.btn){color:var(--imp);animation:pulse 1s infinite}
.alert .place{font-size:22px;font-weight:800;color:var(--gold)}
@keyframes pulse{50%{opacity:.55}}
body.alarm{background:#3a0b13}
body.alarm #app{animation:flash 1.5s infinite}
@keyframes flash{0%,100%{background:transparent}50%{background:#ff4d5e22}}

.vote{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:#0d1322;border:2px solid var(--line);width:100%;text-align:left;cursor:pointer;font-size:17px;font-weight:650}
.vote+.vote{margin-top:8px}
.vote.sel{border-color:var(--gold);background:#2a220a}
.vote .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:none}
.vote.sel .radio{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 45%,transparent 50%)}
.countdown{font-family:var(--mono);font-size:44px;font-weight:800;color:var(--gold)}

.reveal-line{font-size:26px;font-weight:850;opacity:0;animation:fadein .8s forwards}
.reveal-line.d1{animation-delay:.3s}.reveal-line.d2{animation-delay:1.8s}.reveal-line.d3{animation-delay:3s}
@keyframes fadein{to{opacity:1}}
.tally{text-align:left}
.tally .tr{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}

.win{font-size:44px;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.win.crew{color:var(--crew)} .win.imp{color:var(--imp)}

/* modal */
#modal:empty,#overlay:empty{display:none}
.modal-wrap{position:fixed;inset:0;background:#000b;z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fadein .15s forwards;opacity:0}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:92dvh;overflow:auto;padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
@media(min-width:700px){.modal-wrap{align-items:center}.modal{border-radius:20px}}
.modal .x{float:right;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.instructions{white-space:pre-wrap;line-height:1.5;background:#0d1322;border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0;font-size:15px}
.puzzle-img{width:100%;border-radius:12px;border:1px solid var(--line);margin:6px 0}
.photo-prev{width:100%;max-height:300px;object-fit:contain;border-radius:12px;background:#000;margin-top:10px}
.scanbox{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:1/1}
.scanbox video{width:100%;height:100%;object-fit:cover}
.scanbox .frame{position:absolute;inset:18%;border:3px solid var(--gold);border-radius:16px;box-shadow:0 0 0 999px #0007}

.overlay-full{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:16px}

#toasts{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:#1f2a44;border:1px solid var(--line);padding:11px 16px;border-radius:12px;font-size:15px;max-width:520px;box-shadow:0 8px 30px #0009;animation:fadein .2s forwards;opacity:0}
.toast.err{border-color:var(--imp)} .toast.ok{border-color:var(--ok)}

/* host */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:650;font-size:14px;color:var(--muted)}
.tab.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:start}
@media(max-width:900px){.hgrid{grid-template-columns:1fr}}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list td,table.list th{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.list th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.scroll-x{overflow-x:auto}
.feed-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.feed-item img{width:76px;height:76px;object-fit:cover;border-radius:10px;cursor:zoom-in;background:#000;flex:none}
.feed-item .noimg{width:76px;height:76px;border-radius:10px;background:#0d1322;border:1px dashed var(--line);display:grid;place-items:center;font-size:11px;color:var(--muted);flex:none;text-align:center}
.stat{background:#0d1322;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-size:24px}
.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.joinpanel{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.qr{background:#fff;border-radius:12px;padding:8px;width:180px;height:180px}
.qr svg{width:100%;height:100%;display:block}
.bigcode{font-family:var(--mono);font-size:56px;font-weight:900;letter-spacing:.2em;color:var(--gold)}
@media(max-width:560px){.joinpanel{grid-template-columns:1fr;justify-items:center;text-align:center}.bigcode{font-size:44px}}
.puz{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.puz.off{opacity:.5}

/* print sheet */
.print-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.print-card{background:#fff;color:#111;border-radius:14px;padding:18px;text-align:center;break-inside:avoid;page-break-inside:avoid}
.print-card .qr{width:220px;height:220px;margin:8px auto;padding:0}
.print-card .rname{font-size:24px;font-weight:900}
.print-card .rcode{font-family:var(--mono);font-size:18px;letter-spacing:.25em;margin-top:4px}
@media print{
  body{background:#fff!important}
  .noprint{display:none!important}
  #app{max-width:none;padding:0}
  .print-grid{gap:0.3in}
  .print-card{border:2px solid #111;min-height:4.6in}
}

/* meeting station */
.station-title{font-size:28px;font-weight:800}
.station-reveal .reveal-line{font-size:40px}
.ebtn{width:min(72vw,380px);aspect-ratio:1/1;border-radius:50%;margin:0 auto;cursor:pointer;color:#fff;
  font-size:38px;font-weight:950;letter-spacing:.08em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(circle at 35% 30%,#ff8a95 0%,#e0263a 55%,#8f1020 100%);
  border:12px solid #2a3552;box-shadow:0 0 0 6px #ff4d5e33,0 18px 50px #000a, inset 0 -10px 30px #0006}
.ebtn small{font-size:15px;font-weight:600;letter-spacing:.02em;opacity:.9}
.ebtn:active{transform:scale(.97);box-shadow:0 0 0 6px #ff4d5e55,0 8px 25px #000a, inset 0 -6px 20px #0008}
.caller-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:10px}
.caller-grid .btn{min-height:56px;font-size:16px}

/* random setup number */
.setup-badge{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0;padding:12px;border-radius:14px;
  background:#2a220a;border:2px solid var(--gold)}
.setup-badge span{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
.setup-badge b{font-size:44px;font-weight:950;line-height:1;color:var(--gold)}