/* Minimal game theme shared by host and player screens. */
:root {
  --bg:#46178f; --bg2:#3a1279; --surface:#54249b; --surface2:#6435aa;
  --line:rgba(255,255,255,.18); --text:#fff; --muted:#e0d4f2;
  --gold:#ffd45c; --gold-dim:#e5b42b; --cyan:#fff; --pink:#ef3f68;
  --green:#43d6a1; --danger:#ffb8c8; --shadow:none; --radius:12px;
  --font:Arial, 'Segoe UI', sans-serif; --display:var(--font);
}
html { color-scheme:dark; }
body { background:#46178f; font-weight:600; isolation:isolate; }
body::before,body::after { content:''; position:fixed; z-index:-1; pointer-events:none; }
body::before { width:60vw; height:60vw; max-width:900px; max-height:900px; background:#ffffff04; border:70px solid #ffffff04; border-radius:50%; right:-28vw; top:-25vw; }
body::after { width:46vw; height:46vw; background:#00000007; transform:rotate(30deg); left:-28vw; bottom:-10vw; border-radius:40px; }
h1,h2,h3 { font-weight:800; letter-spacing:-.035em; }
h2 { font-size:26px; }
a { color:inherit; }
.topbar { background:transparent; border:0; min-height:76px; padding:18px 32px; }
.brand { color:white; font-size:22px; font-weight:900; letter-spacing:-1px; }
.brand svg { width:32px; height:32px; }
.icon-btn { background:#ffffff12; color:white; border:0; border-radius:8px; }
.icon-btn.active { color:#ffd45c; background:#ffffff20; border:0; }
.btn { min-height:52px; padding:12px 24px; font-size:17px; font-weight:800; border-radius:8px; border:0; background:white; color:#32145f; box-shadow:0 4px 0 #00000030; }
.btn:hover { background:#eee8fb; }
.btn.gold { background:#ffd45c; color:#392b0a; }
.btn.gold:hover { background:#ffe28c; }
.btn.ghost,.btn.cyan { background:#ffffff16; color:white; border:1px solid #ffffff30; }
.btn.ghost:hover,.btn.cyan:hover { background:#ffffff25; border-color:#ffffff60; }
.btn.danger { color:white; background:#c63050; border:0; }
.btn.danger:hover { background:#e43b5e; }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #00000030; }
.btn:disabled { background:#ffffff20; color:#ffffff65; border:0; box-shadow:0 4px 0 #00000015; }
.btn.small { min-height:36px; padding:8px 14px; font-size:13px; }
.card { background:#ffffff0c; border:1px solid #ffffff20; box-shadow:none; border-radius:12px; }
.field label { color:#eee6f8; font-size:13px; font-weight:700; }
.field input,.field select,.field textarea,.opt-in { background:white; border:2px solid transparent; color:#241438; border-radius:6px; font-size:16px; padding:12px; color-scheme:light; }
.field input:focus,.field select:focus,.field textarea:focus,.opt-in:focus { border-color:#ffd45c; outline:2px solid #ffd45c40; }
:focus-visible { outline:3px solid #ffd45c; }
.badge { background:#ffffff20; color:white; min-width:32px; justify-content:center; border-radius:6px; font-size:17px; }
.muted { color:var(--muted); font-weight:500; }
.stars { color:#ffd45c; }
.timer-bar { background:#ffffff20; height:8px; }
.timer-bar > span { background:#ffd45c; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.dashboard-home { max-width:460px; margin:clamp(30px,12vh,130px) auto; text-align:center; }
.dashboard-home .hero { text-align:center; padding:0 0 32px; }
.dashboard-home h1 { font-size:clamp(32px,6vw,48px); }
.home-star { font-size:70px; color:#ffd45c; line-height:1; margin-bottom:20px; transform:rotate(-10deg); }
.dashboard-actions { display:flex; flex-direction:column; gap:16px; max-width:320px; margin:auto; }
.dashboard-actions .btn { min-height:60px; font-size:20px; }
.host-home { max-width:760px; }
.quiz-row { background:#ffffff10; border-color:#ffffff20; }
.quiz-row .muted { font-size:13px; }
.q-card header { color:white; }
.opt-line input[type=radio],.toggle input { accent-color:#ffd45c; }
.editor-note { color:var(--muted); font-size:12px; margin-top:12px; }
.toggle { background:#ffffff0c; border-color:var(--line); }
.settings-grid .field { margin-bottom:4px; }
.lobby-shell { max-width:1080px; margin:18px auto 0; padding:0 24px 28px; }
.lobby-grid { display:flex; flex-direction:column; gap:24px; }
.pin-box { display:grid; grid-template-columns:minmax(0,1fr) 156px; column-gap:30px; row-gap:12px; width:min(100%,760px); margin:auto; padding:24px 32px 12px; background:white; color:#281344; border:0; border-radius:12px; text-align:left; }
.pin-content { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; }
.pin-box h2 { font-size:15px; letter-spacing:0; font-weight:700; color:#695979; }
.pin-box .pin { font-family:Arial,sans-serif; color:#281344; font-size:clamp(40px,6vw,72px); font-weight:900; line-height:1.15; letter-spacing:.07em; margin:6px 0 14px; white-space:nowrap; overflow-wrap:normal; }
.pin-tools { display:flex; gap:8px; }
.pin-tools .btn { box-shadow:none; background:#eee8f7; border:0; color:#52357c; font-size:12px; min-height:30px; padding:5px 10px; }
.pin-tools .btn:hover { background:#e1d6f0; }
.qr-wrap { padding:0; background:white; border:0; border-radius:0; align-self:center; }
.pin-box img.qr { width:156px; height:156px; background:white; padding:0; border-radius:0; }
.join-details { grid-column:1/-1; border-top:1px solid #eee9f3; padding-top:8px; color:#79648e; font-size:11px; }
.join-details summary { cursor:pointer; width:max-content; }
.join-details .join-link { color:#5b3592; font-size:12px; margin:10px 0; }
.join-details .join-help { border:0; padding:0; margin:0 0 8px; color:#79648e; font-size:11px; }
.players-panel { display:flex; flex-direction:column; background:transparent; min-height:280px; }
.players-header { display:flex; justify-content:space-between; align-items:center; border:0; padding:0 0 16px; }
.players-header h2 { color:white; font-size:20px; display:flex; align-items:center; gap:12px; }
.players-header .btn { min-width:130px; }
.player-area { min-height:170px; flex:1; padding:12px 0; }
.player-empty { min-height:160px; padding:24px; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.player-empty h3 { font-size:19px; font-weight:700; color:#e9ddf8; }
.waiting-dots { display:flex; gap:9px; margin-bottom:20px; }
.waiting-dots i { display:block; width:10px; height:10px; border-radius:50%; background:#ffd45c; animation:waiting 1.2s infinite ease-in-out; }
.waiting-dots i:nth-child(2) { animation-delay:.15s; }.waiting-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes waiting { 50% { opacity:.3; transform:translateY(-5px); } }
.player-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.pill { background:white; color:#32145f; border:0; padding:12px 10px 12px 20px; border-radius:8px; min-width:150px; box-shadow:0 3px 0 #00000018; }
.pill span { font-size:18px; font-weight:800; }.pill button { color:#967db3; }
.lobby-footer { display:flex; justify-content:space-between; align-items:center; padding:14px 0 0; background:none; border-top:1px solid #ffffff15; gap:16px; }
.lobby-footer > p { font-size:12px; color:var(--muted); margin:0; }
.live .big-timer { color:white; font-size:clamp(56px,10vw,100px); font-weight:900; }
.progress-label { color:#eee3fa; }
.pair-row { background:#ffffff0f; border-color:var(--line); }
.pair-row .vs { color:#cabbde; }
.match-card { background:#ffffff0c; border-color:var(--line); }.match-card .slot { background:#00000018; }.match-card .winner { background:#ffd45c; color:#37234c; }
table.standings th { color:#d1c0e8; } table.standings td { border-color:var(--line); } table.standings tr.me { background:#ffffff14; } table.standings tr.top td:first-child { color:#ffd45c; }
.place .nick { color:white; }.place.first .block { background:#ffd45c; }.place.second .block { background:#ddd2ef; }.place.third .block { background:#e0aa7f; }
.play-body { max-width:620px; padding:28px 20px; }
.join-card { max-width:360px; margin:clamp(20px,8vh,90px) auto 0; background:white; color:#2b1844; padding:28px; border:0; border-radius:10px; box-shadow:0 6px 0 #00000020; }
.join-card h1 { text-align:center; font-size:28px; margin-bottom:24px; }
.join-card .field { margin-bottom:12px; }
.join-card .field input { border:2px solid #ddd5e7; background:white; text-align:center; font-size:18px; font-weight:700; }
.join-card #pin { font-size:22px; letter-spacing:.06em; }
.join-card .btn { background:#2d2042; color:white; margin-top:4px; }
.join-card .btn:hover { background:#46305f; }
.join-card #joinErr { color:#b53650 !important; font-size:12px; text-align:center; }
.join-card #joinErr:empty { margin:0 !important; }
.waiting h2 { font-size:30px; }.waiting .orb { background:conic-gradient(#ffd45c,#ffffff12); }
.opponent-card .you,.opponent-card .them { font-size:32px; font-weight:900; }.opponent-card .vs { margin:24px; font-size:18px; color:#ffd45c; }
.q-text { color:white; text-align:center; font-size:26px; font-weight:800; margin:24px 0; }
.q-meta { color:#e3d8f1; }
.ans { min-height:170px; border-radius:8px; box-shadow:0 4px 0 #00000025; font-size:19px; font-weight:800; }
.ans.red { background:#dc2847; }.ans.blue { background:#176bd1; }.ans.yellow { background:#f5c832; color:#372c0d; }.ans.green { background:#198d50; color:white; }
.ans.selected { outline:3px solid white; outline-offset:3px; }.ans .shape { width:34px; height:34px; }
.rps-btn { background:#ffffff15; color:white; border:1px solid var(--line); }.rps-btn.picked,.predict-match button.picked { background:#ffd45c; color:#352044; outline:none; }
.predict-match button { background:#ffffff14; color:white; border-color:var(--line); }
.rank-chip { background:#ffffff15; }
@media(min-width:900px) and (min-height:850px) { .lobby-shell { margin-top:40px; } .player-area { min-height:250px; } }
@media(max-width:640px) {
  .topbar { min-height:64px; padding:12px 18px; }.brand { font-size:20px; }
  .lobby-shell { padding:0 16px 20px; margin-top:12px; }.lobby-grid { gap:22px; }
  .pin-box { padding:18px 20px 10px; grid-template-columns:minmax(0,1fr) 92px; column-gap:14px; }
  .pin-box .pin { font-size:clamp(30px,8vw,46px); margin:4px 0 10px; letter-spacing:.04em; }
  .pin-box h2 { font-size:12px; }.pin-box img.qr { width:92px; height:92px; }.pin-tools { gap:6px; }.pin-tools .btn { font-size:10px; padding:4px 7px; min-height:26px; }
  .players-header { padding:0; }.players-header h2 { font-size:17px; }.players-header .btn { min-width:102px; min-height:44px; padding:10px 18px; }
  .player-area { padding:12px 0; min-height:190px; }.player-empty { min-height:170px; padding:12px; }.player-empty h3 { font-size:17px; }
  .player-pills { gap:8px; }.pill { min-width:130px; flex:1; max-width:240px; padding:9px 8px 9px 12px; }.pill span { font-size:16px; }
  .lobby-footer { padding-top:12px; }.btn.small { min-height:32px; }
  .play-body { padding:20px 16px; }.join-card { padding:24px; margin-top:32px; }
  .ans { min-height:140px; font-size:16px; }.q-text { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .waiting-dots i { animation:none; } }