:root{--ink:#15131F;--card:#221E33;--paper:#F5F1E8;--yellow:#FFC83D;--coral:#FF5B4F;--muted:#B8B3C7;--purple:#4A3A8C}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{background:var(--ink);color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1{font-family:"Oswald","Avenir Next Condensed","Arial Narrow",Impact,sans-serif;font-weight:700;line-height:1.08}
.kicker{font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);font-size:13px}
.muted{color:var(--muted)}
button{font:inherit;cursor:pointer;border:0;border-radius:16px}
/* phone */
.audience main{max-width:560px;margin:0 auto;padding:28px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;min-height:100vh}
.audience h1{font-size:30px}
#options{display:flex;flex-direction:column;gap:12px}
#options button{background:var(--card);color:var(--paper);padding:20px;font-size:20px;font-weight:600;text-align:left;border:2px solid transparent}
#options button[aria-pressed=true]{border-color:var(--yellow);background:#2E2748}
#options button:disabled{opacity:.55;cursor:default}
#status{font-size:16px;min-height:1.4em}
/* projector */
.screen main{padding:6vh 7vw;display:flex;flex-direction:column;gap:4vh;min-height:100vh}
.screen .kicker{font-size:1.6vw}
.screen h1{font-size:4.4vw;max-width:85vw}
#bars{display:flex;flex-direction:column;gap:2.4vh}
.bar{display:grid;grid-template-columns:28vw 1fr 9vw;align-items:center;gap:2vw;font-size:2vw;font-weight:600}
.track{height:5.2vh;background:var(--card);border-radius:12px;overflow:hidden}
.fill{height:100%;width:0;background:var(--yellow);border-radius:12px;transition:width .6s ease}
.bar.answer .fill{background:var(--coral)}
.bar.answer .label::after{content:"  ✓";color:var(--coral)}
.pct{text-align:right;font-variant-numeric:tabular-nums}
.total{font-size:1.8vw;color:var(--muted);margin-top:auto}
.waiting{font-size:2.4vw;color:var(--muted)}
/* presenter */
.control main{max-width:640px;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;gap:16px}
.control form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.control input{font:inherit;padding:12px;border-radius:12px;border:0;min-width:240px}
.control button{background:var(--card);color:var(--paper);padding:12px 14px;font-weight:600}
.control .q{background:var(--card);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.control .q.live{outline:3px solid var(--yellow)}
.control .q .row button{background:#2E2748}
.row{display:flex;gap:8px;flex-wrap:wrap}
.danger{background:#5a1f1c!important}
.counts{font-size:14px;color:var(--muted)}
#msg{min-height:1.4em;color:var(--yellow)}