:root { --bg:#12151c; --card:#1c212c; --fg:#e6e9f0; --dim:#8b93a7; --accent:#5ac8fa;
        --good:#4cd964; --bad:#ff6b6b; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,sans-serif; background:var(--bg); color:var(--fg);
       min-height:100vh; display:flex; flex-direction:column; align-items:center; overflow-y:auto; }
main { padding-bottom:2.5rem; }
main { width:100%; max-width:520px; padding:1rem; }
h1 { font-size:1.3rem; margin:.6rem 0; }
.card { background:var(--card); border-radius:14px; padding:1rem; margin:.6rem 0; }
button { width:100%; padding:1rem; margin:.35rem 0; font-size:1.05rem; border:none;
         border-radius:12px; background:#2a3140; color:var(--fg); cursor:pointer; text-align:left; }
button:disabled { opacity:.55; }
button.primary { background:var(--accent); color:#000; font-weight:700; text-align:center; }
button.picked { outline:3px solid var(--accent); }
button.warn { background:rgba(255,107,107,.12); color:var(--bad); font-weight:700;
              text-align:center; border:2px solid var(--bad); }
button.correct { background:var(--good); color:#000; }
button.wrong { background:var(--bad); color:#000; }
input { width:100%; padding:.9rem; font-size:1.1rem; border-radius:10px; border:1px solid #333;
        background:#0e1118; color:var(--fg); }
.dim { color:var(--dim); font-size:.9rem; }
.big { font-size:2.4rem; font-weight:800; text-align:center; margin:.5rem 0; }
.scores li { display:flex; justify-content:space-between; padding:.3rem 0; font-size:1.05rem; }
.scores { list-style:none; padding:0; margin:0; }
.timer { height:6px; background:#2a3140; border-radius:3px; overflow:hidden; margin:.6rem 0; }
.timer > div { height:100%; background:var(--accent); transition:width 1s linear; }
img.art { width:100%; max-width:340px; border-radius:14px; display:block; margin:.6rem auto; }
.center { text-align:center; }
/* server errors surface as a toast nobody can miss */
#err { position:sticky; top:.4rem; z-index:20; min-height:0; }
#err:not(:empty) { background:var(--bad); color:#fff; font-weight:700; padding:.7rem 1rem;
                   border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.5); text-align:center; }

.wall { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; max-height:40vh; overflow-y:auto; }
.wall button { width:auto; flex:0 0 auto; padding:.5rem .8rem; font-size:.95rem; margin:0; }
.wall button.sel { background:var(--accent); color:#000; font-weight:700; }
/* invite-others QR in the lobby — white field so the dark-module code scans */
.invite { margin-top:1rem; padding-top:.8rem; border-top:1px solid #2a3140; }
.qr { display:block; width:170px; max-width:60%; height:auto; background:#fff;
      border-radius:12px; padding:10px; margin:.5rem auto; }
.join-url { font-family:ui-monospace,monospace; word-break:break-all; margin-top:.2rem; }