:root {
  --bg: #12151f;
  --panel: #1c2133;
  --text: #f4f1ea;
  --muted: #9aa3b8;
  --red: #d7263d;
  --green: #2fbf71;
  --gold: #f2b84b;
  --a: #d7263d;
  --b: #2e86de;
  --c: #f2b84b;
  --d: #2fbf71;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 20% 0%, #1f2540, var(--bg) 60%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.hidden { display: none !important; }
.center { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; gap: 16px; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 4rem); }
.muted { color: var(--muted); }
button { font: inherit; cursor: pointer; }
.btn { background: var(--red); color: #fff; border: 0; border-radius: 14px; padding: 14px 28px; font-weight: 700; font-size: 1.1rem; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: transparent; border: 2px solid var(--muted); color: var(--muted); }
input[type=text] { font: inherit; padding: 14px 16px; border-radius: 12px; border: 2px solid #333b56; background: var(--panel); color: var(--text); width: min(320px, 100%); text-align: center; font-size: 1.2rem; }
.timerbar { width: 100%; height: 14px; background: #2a3150; border-radius: 99px; overflow: hidden; }
.timerbar > div { height: 100%; background: var(--gold); transition: width 1s linear; }

/* ---------- Host ---------- */
.host { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 28px 40px; gap: 20px; }
.host header { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 1.2rem; }
.host .timer { font-size: 3rem; font-weight: 800; color: var(--gold); min-width: 90px; text-align: right; }
.lobby { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }
.lobby .qr { background: #fff; padding: 12px; border-radius: 18px; }
.lobby .qr img { width: 100%; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: var(--panel); padding: 8px 16px; border-radius: 99px; font-size: 1.3rem; }
.chip.off { opacity: .4; }
.question-text { font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 800; line-height: 1.15; margin: 0 0 24px; }
.question-img { max-height: 34vh; border-radius: 14px; margin-bottom: 20px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.opt { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 18px; background: var(--panel); font-size: clamp(1.4rem, 2.6vw, 2.4rem); font-weight: 700; border-left: 14px solid; position: relative; overflow: hidden; }
.opt:nth-child(1) { border-color: var(--a); }
.opt:nth-child(2) { border-color: var(--b); }
.opt:nth-child(3) { border-color: var(--c); }
.opt:nth-child(4) { border-color: var(--d); }
.opt .letter { opacity: .7; }
.opt .count { margin-left: auto; opacity: .8; font-size: .8em; }
.opt.correct { background: #1d5c3c; outline: 4px solid var(--green); }
.opt.wrong { opacity: .35; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 900px; width: 100%; margin-inline: auto; }
.board li { display: flex; align-items: center; gap: 16px; background: var(--panel); padding: 14px 22px; border-radius: 14px; font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 700; }
.board li .rank { width: 48px; color: var(--gold); }
.board li .name { flex: 1; }
.board li .pts { font-variant-numeric: tabular-nums; }
.board li .flag { color: var(--red); font-size: .7em; margin-left: 8px; }
.board li:nth-child(1) { background: #3a3220; outline: 3px solid var(--gold); }
.host footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.kbd { background: #2a3150; border-radius: 6px; padding: 2px 8px; font-size: .85em; }
.podium-title { text-align: center; font-size: clamp(2.4rem, 5vw, 4.5rem); margin: 0 0 16px; }

/* ---------- Player ---------- */
.play { min-height: 100%; display: flex; flex-direction: column; padding: 16px; gap: 14px; }
.play .top { display: flex; justify-content: space-between; color: var(--muted); font-size: .95rem; }
.answers { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 55vh; }
.answers.two { grid-template-rows: 1fr; }
.abtn { border: 0; border-radius: 20px; color: #fff; font-size: 4.5rem; font-weight: 800; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.abtn:nth-child(1) { background: var(--a); }
.abtn:nth-child(2) { background: var(--b); }
.abtn:nth-child(3) { background: var(--c); color: #3a2c00; }
.abtn:nth-child(4) { background: var(--d); }
.abtn:disabled { opacity: .35; }
.abtn.picked { opacity: 1; outline: 6px solid #fff; }
.status { text-align: center; font-size: 1.3rem; min-height: 2.2em; }
.status.good { color: var(--green); }
.status.bad { color: var(--red); }
.warn { background: var(--red); color: #fff; padding: 12px; border-radius: 12px; text-align: center; font-weight: 700; }
.nosel, .nosel * { user-select: none; -webkit-user-select: none; }
@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; }
  .host { padding: 16px; }
}