:root {
  color-scheme: dark;
  --bg: #1b0a20;
  --panel: #260d2c;
  --ink: #fff1db;
  --muted: #d2b5cc;
  --gold: #ffc463;
  --line: #69304f;
  --wine: #ad386c;
  --serif: Georgia, "Times New Roman", serif;
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 0%, #35112e, var(--bg) 65%) fixed;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
h1, h2, p { margin: 0; }
h1, h2 { line-height: 1.12; }
h1 { font-family: var(--serif); }
p { line-height: 1.5; color: var(--muted); }
a { color: var(--gold); }
button, input { font: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 3px solid #fce7a8; outline-offset: 4px; }
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 10px clamp(16px, 3vw, 52px);
  border-bottom: 1px solid var(--wine);
  background: #220b25;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  font: 700 clamp(1.05rem, 2.4vw, 2rem)/1.1 var(--serif);
}
.brand img { width: 42px; padding-right: 10px; border-right: 1px solid var(--gold); }
.room-code { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.room-code span { text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; color: var(--muted); }
.room-code strong { color: var(--gold); font-size: clamp(1.05rem, 2vw, 1.65rem); letter-spacing: .09em; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid #b48257;
  border-radius: 10px;
  color: var(--ink);
  background: #351337;
  text-decoration: none;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}
.button:not(:disabled):hover { filter: brightness(1.15); }
.button:disabled { opacity: .45; cursor: default; }
.button.gold { background: linear-gradient(120deg, #ffd078, #ffb447); color: #241024; border-color: #ffd381; }
.button.correct { background: #1d612f; border-color: #72b47d; }
.button.incorrect { background: #852644; border-color: #db7793; }
input:not([type=radio]) {
  display: block;
  width: 100%;
  min-width: 0;
  background: #170a1b;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
}
label, legend { font-weight: 700; }
.landing { max-width: 980px; margin: 0 auto; padding: clamp(34px, 7vh, 80px) 20px 48px; text-align: center; }
.landing > p { margin: 16px 0; }
.hero img { width: 64px; }
.hero h1 { font-size: clamp(3.5rem, 9vw, 7.75rem); line-height: .87; margin: 14px 0 24px; letter-spacing: -.055em; }
.hero p { font-size: clamp(1rem, 2vw, 1.35rem); }
.entry { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; margin-top: 44px; }
.entry section { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.entry h2 { font-family: var(--serif); font-size: 1.65rem; }
.entry p { margin: 8px 0 18px; }
.entry-row { display: flex; gap: 8px; margin-top: 6px; }
.entry-row input { text-transform: uppercase; }
.entry-row button { flex-shrink: 0; }
.tv { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; border: 5px solid #5a143c; }
.tv .masthead { min-height: 62px; }
.stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 82px) minmax(0, 1fr) minmax(0, 82px);
  align-items: center;
  gap: clamp(12px, 2vw, 40px);
  padding: clamp(20px, 3vh, 38px) clamp(16px, 3vw, 48px);
}
.ornament { width: 100%; color: #ebbb57; }
.stage-content { width: 100%; max-width: 1440px; justify-self: center; }
.question-card { border: 2px solid var(--gold); border-radius: 22px; padding: clamp(18px, 4vh, 48px) clamp(16px, 3vw, 48px); text-align: center; }
.round-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6em; font-size: clamp(.8rem, 1.45vw, 1.3rem); font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.round-line b { color: var(--gold); }
.round-line b::before { content: "·"; margin-right: .6em; color: var(--ink); }
.question-card h1 { margin: .27em 0 .15em; font-size: clamp(2rem, min(5vw, 7.1vh), 5.8rem); letter-spacing: -.035em; overflow-wrap: anywhere; text-wrap: balance; }
.question-count { margin-top: 9px; font-size: clamp(.83rem, 1.5vw, 1.2rem); }
.splash img { width: clamp(46px, 7vw, 108px); }
.splash p { font-size: clamp(1.05rem, 2.2vw, 1.8rem); overflow-wrap: anywhere; }
.big-code { display: block; color: var(--gold); font-size: clamp(2.7rem, 8vw, 6rem); letter-spacing: .14em; line-height: 1.3; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: clamp(14px, 2vh, 26px) auto 0; padding: 0; width: 94%; }
.choices li {
  display: flex;
  align-items: center;
  gap: .65em;
  background: #2a0e2d;
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: .38em .65em;
  font-weight: 750;
  font-size: clamp(1rem, min(2.7vw, 4.4vh), 2.65rem);
}
.choices li span { flex: 0 0 1.6em; text-align: center; background: var(--gold); color: #251026; border-radius: .28em; }
.choices li.answer { border-color: #a7e5a8; background: #204831; }
.choices li.answer span { background: #a7e5a8; }
.reveal-note { text-align: center; margin: 12px auto 0; font-size: clamp(1rem, 1.6vw, 1.5rem); }
.stage-status { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(12px, 2vh, 24px); text-align: center; }
.stage-status::before, .stage-status::after { content: ""; height: 1px; width: 14%; background: var(--wine); }
.stage-status span { color: #230f24; background: var(--gold); border-radius: 50px; padding: .42em 1.4em; text-transform: uppercase; font-size: clamp(.82rem, 1.7vw, 1.55rem); font-weight: 850; }
.stage-status .live { background: #a7e5a8; }
.scores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 8px; background: #240b27; border-top: 1px solid var(--wine); }
.score { display: grid; place-content: center; justify-items: center; min-height: clamp(68px, 11vh, 110px); padding: 8px; background: color-mix(in srgb, var(--team) 20%, #291032); border: 1px solid var(--team); border-radius: 12px; text-align: center; }
.score[data-active=true] { box-shadow: inset 0 0 0 3px var(--team); }
.score span { font-size: clamp(.75rem, 1.45vw, 1.3rem); font-weight: 750; }
.score strong { font-size: clamp(1.5rem, 3vw, 2.8rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.host-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr); gap: 28px; max-width: 1320px; margin: 0 auto; padding: 30px 20px; }
.host-game, .host-side { background: #250e29; border: 1px solid var(--line); border-radius: 16px; padding: clamp(14px, 2.5vw, 28px); align-self: start; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.section-head h1, .section-head h2, .sharing h2 { text-transform: uppercase; font: 800 .92rem system-ui, sans-serif; letter-spacing: .12em; }
.section-head span { color: var(--gold); font-size: .85rem; font-weight: 700; text-align: right; }
.preview { border-block: 1px solid var(--line); padding: 18px 0; }
.preview .round-line { justify-content: start; font-size: .78rem; }
.preview h2 { font: 700 clamp(1.45rem, 2.7vw, 2.6rem)/1.12 var(--serif); margin: 10px 0 16px; }
.preview p + p { margin-top: 6px; }
.host-answer strong, .buzz-winner strong { color: var(--gold); }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.controls .button { min-height: 54px; }
.tie-controls { margin-top: 18px; }
.tie-controls .button { margin: 8px 8px 0 0; }
.rounds { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.rounds summary { cursor: pointer; font-weight: 700; }
.rounds ol { padding-left: 24px; margin-bottom: 0; }
.rounds li { padding: 5px 0; }
.rounds li[aria-current] { color: var(--gold); }
.rounds li span { float: right; color: var(--muted); font-size: .85rem; }
.roster { list-style: none; margin: 0; padding: 0; }
.roster li { padding: 9px 0; border-top: 1px solid #512541; }
.team-line { display: flex; gap: 10px; align-items: center; }
.team-dot { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--team); }
.team-count { margin-left: auto; color: var(--muted); font-size: .84rem; }
.team-line b { color: var(--team); min-width: 2.5em; text-align: right; }
.roster-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-left: 20px; margin-top: 4px; }
.roster-bottom small { color: var(--muted); overflow-wrap: anywhere; }
.adjust { display: flex; gap: 5px; }
.adjust .button { min-height: 30px; padding: 3px 7px; font-size: .8rem; }
.sharing { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--wine); }
.sharing p { margin: 8px 0 12px; font-size: .9rem; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.share-buttons .button { font-size: .85rem; }
.phone { width: min(100%, 460px); margin: auto; padding: 30px 20px 36px; }
.phone h1 { font-size: 2.35rem; margin-bottom: 10px; }
.phone form { margin-top: 24px; }
.phone form > input { margin: 6px 0 16px; }
.phone form > .button { margin-top: 18px; width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0 0 6px; }
.team-choice { display: flex; align-items: center; gap: 9px; padding: 9px 10px; margin-bottom: 6px; background: #280e2d; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.team-choice:has(:checked) { border-color: var(--team); background: #3b183a; }
.team-choice:has(:disabled) { opacity: .55; cursor: default; }
.team-choice input { margin: 0; accent-color: var(--gold); }
.team-choice small { margin-left: auto; white-space: nowrap; }
.player { text-align: center; padding-top: clamp(28px, 7vh, 85px); }
.team-tag { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid var(--team); border-radius: 10px; background: color-mix(in srgb, var(--team) 20%, #26102d); font-weight: 800; }
.player-info { margin-top: 8px; overflow-wrap: anywhere; }
.buzzer-wrap { padding: clamp(22px, 6vh, 52px) 0; }
.buzzer {
  width: clamp(190px, 65vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid #ffce75;
  box-shadow: inset 0 0 0 3px #e69837, 0 0 36px #ffb84b66;
  font-size: clamp(1.65rem, 7vw, 3rem);
  font-weight: 950;
  text-transform: uppercase;
  color: #241024;
  background: radial-gradient(circle at 40% 25%, #ffe2a1, #ffad35 80%);
  -webkit-tap-highlight-color: transparent;
}
.buzzer:active:not(:disabled) { transform: scale(.97); }
.buzzer:disabled { box-shadow: inset 0 0 0 3px #e69837; }
.player .phone-status { font: 800 clamp(1.15rem, 5vw, 1.45rem)/1.25 system-ui, sans-serif; }
#message { position: fixed; z-index: 5; bottom: 14px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 10px 15px; color: var(--ink); background: #39163e; border: 1px solid var(--gold); border-radius: 8px; text-align: center; box-shadow: 0 4px 20px #0008; }
@media (max-width: 780px) {
  .host-layout { grid-template-columns: 1fr; gap: 16px; padding: 18px 12px; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .ornament { display: none; }
  .scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .masthead { min-height: 64px; }
  .brand { gap: 8px; }
  .brand img { width: 34px; padding-right: 7px; }
  .room-code { flex-direction: column; gap: 0; }
  .room-code span { font-size: .67rem; }
  .header-actions { gap: 9px; }
  .header-actions .button { padding: 7px 9px; font-size: .82rem; white-space: nowrap; }
}
@media (max-width: 520px) {
  .entry, .choices { grid-template-columns: 1fr; }
  .choices { width: 100%; }
  .entry { margin-top: 28px; }
  .controls .button { padding-inline: 6px; font-size: .9rem; }
}
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 26%); align-items: center; gap: clamp(12px, 3vw, 42px); }
.qr { display: grid; justify-items: center; gap: 8px; color: var(--gold); text-decoration: none; font-weight: 750; font-size: clamp(.9rem, 1.6vw, 1.4rem); }
.splash .qr img { display: block; width: 100%; max-width: 265px; border-radius: 12px; background: white; }
@media (max-width: 520px) {
  .lobby { grid-template-columns: 1fr; }
  .splash .qr img { max-width: 145px; }
}