:root {
  --bg: #0f1419;
  --panel: #1a212b;
  --panel-2: #232d3a;
  --line: #2e3a48;
  --text: #e8edf2;
  --muted: #93a1b0;
  --accent: #4ea1ff;
  --green: #3ddc84;
  --red: #ff5a6a;
  --gold: #ffd166;
  --teamA: #4ea1ff;
  --teamB: #ff8c42;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 50% -10%, #182230, var(--bg));
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

h1 { font-size: 1.6rem; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; margin-bottom: 10px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.center { text-align: center; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-top: 18px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; background: var(--panel-2);
  border: 1px solid var(--line);
}

/* Scoreboard */
.score {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
}
.score .team { text-align: center; padding: 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.score .team.A { border-color: var(--teamA); }
.score .team.B { border-color: var(--teamB); }
.score .name { font-weight: 700; font-size: 1.05rem; }
.score .pts { font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.score .vs { color: var(--muted); font-weight: 700; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--line); margin-left:6px; }
.dot.voted { background: var(--green); }

/* Question + options */
.qmeta { display:flex; gap:10px; align-items:center; margin-bottom: 8px; }
.topic { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--accent); font-weight:700; }
.qtext { font-size: 1.25rem; line-height: 1.4; margin: 6px 0 18px; }

.options { display: grid; gap: 12px; }
.opt {
  text-align: left; padding: 16px 18px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); font-size: 1.02rem; cursor: pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
  display:flex; gap:12px; align-items:center;
}
.opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.opt:disabled { cursor: default; opacity: 0.95; }
.opt .key { font-weight:800; color: var(--muted); width:1.4em; }
.opt.selected { border-color: var(--accent); background: #1d2a3c; }
.opt.correct { border-color: var(--green); background: rgba(61,220,132,0.12); }
.opt.wrong { border-color: var(--red); background: rgba(255,90,106,0.10); }

button.btn {
  appearance:none; border:none; cursor:pointer; font-weight:700;
  padding: 12px 18px; border-radius: 12px; font-size: 1rem;
  background: var(--accent); color: #04121f;
}
button.btn:hover { filter: brightness(1.08); }
button.btn.secondary { background: var(--panel-2); color: var(--text); border:1px solid var(--line); }
button.btn.ghost { background: transparent; color: var(--muted); border:1px solid var(--line); }
button.btn:disabled { opacity:0.4; cursor:not-allowed; }
.row { display:flex; gap:10px; flex-wrap:wrap; }

input.text {
  background: var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:10px; font-size:0.95rem; width:100%;
}

.choices { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.choice {
  text-decoration:none; color:var(--text); display:block; text-align:center;
  padding: 26px 18px; border-radius:16px; background:var(--panel-2); border:1px solid var(--line);
  font-weight:700; font-size:1.1rem;
}
.choice.A { border-color: var(--teamA); }
.choice.B { border-color: var(--teamB); }
.choice:hover { transform: translateY(-2px); }

.banner { padding:14px 16px; border-radius:12px; margin-top:14px; font-weight:600; }
.banner.win { background: rgba(255,209,102,0.14); border:1px solid var(--gold); color: var(--gold); }
.banner.info { background: var(--panel-2); border:1px solid var(--line); color: var(--muted); }

.flag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:0.78rem; font-weight:700; }
.flag.ok { background: rgba(61,220,132,0.15); color: var(--green); }
.flag.no { background: rgba(255,90,106,0.15); color: var(--red); }

a.plain { color: var(--accent); }
.spacer { height: 8px; }