.board-page { overflow: hidden; }
#stage { height: 100vh; display: flex; flex-direction: column; padding: 2.2vh 2.5vw 2vh; gap: 2vh; }

.topbar { display: flex; align-items: center; gap: 24px; min-height: 3vh; }
.topbar .eyebrow { font-size: max(12px, 1.1vw); }
.topbar .round-name { font-size: max(13px, 1.2vw); font-weight: 800; color: var(--fg-3); }
.topbar .conn { margin-left: auto; }
.topbar .conn.on { visibility: hidden; }

#view { flex: 1; min-height: 0; display: flex; position: relative; }

/* ---- Grid ---- */
.grid { flex: 1; display: grid; gap: 0.8vh 0.6vw; }
.grid .theme {
  display: flex; align-items: center; padding: 0 1.4vw;
  background: var(--surface); border: 1px solid var(--surface-border); border-left: 4px solid var(--brand);
  border-radius: 8px; font-size: 1.7vw; font-weight: 800; line-height: 1.1;
}
.grid .cell {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(61, 232, 202, .35); border-radius: 8px;
  background: rgba(61, 232, 202, .06);
  font-size: 3vw; font-weight: 800; color: var(--brand);
  letter-spacing: -0.02em;
}
.grid .cell.played { color: transparent; background: transparent; border-color: var(--surface-border); }
.grid .cell.flash { animation: flash .22s steps(1) infinite; }
@keyframes flash {
  0% { background: var(--brand); color: var(--bg); }
  50% { background: rgba(61, 232, 202, .06); color: var(--brand); }
}

/* ---- Round splash ---- */
.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3vh; }
.splash .big-title { font-size: 7vw; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.splash .big-title .accent { color: var(--brand); }
.splash .sub { font-size: 2vw; color: var(--fg-3); font-weight: 700; }
.splash .themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1vw; max-width: 80vw; }
.splash .themes .chip { height: auto; padding: 0.8vh 1.2vw; font-size: 1.5vw; }
.splash.special .big-title { color: var(--accent-violet); animation: pop .6s ease-out; }
.splash.special.auction .big-title { color: var(--accent-cyan); }
.splash .special-icon { width: 10vw; height: 10vw; color: var(--accent-violet); stroke-width: 1.4; }
.splash.auction .special-icon { color: var(--accent-cyan); }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ---- Question ---- */
.question { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 2.4vh; }
.q-head { display: flex; align-items: center; gap: 1.2vw; }
.q-head .theme-name { font-size: 1.8vw; font-weight: 800; color: var(--fg-2); }
.q-head .value { font-size: 2.2vw; font-weight: 800; color: var(--brand); margin-left: auto; }
.q-head .chip { height: auto; padding: 0.6vh 1vw; font-size: 1.2vw; }
.q-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3vh; overflow: hidden; }
.q-text { font-size: 3.2vw; font-weight: 800; text-align: center; line-height: 1.2; max-width: 85vw; letter-spacing: -0.01em; }
.q-text.medium { font-size: 2.5vw; }
.q-text.small { font-size: 2vw; }
.q-body pre.code { font-size: 1.75vw; line-height: 1.4; max-width: 85vw; max-height: 52vh; }
.q-body pre.code.small { font-size: 1.35vw; }

.answer-box {
  border: 2px solid var(--brand); border-radius: 10px; padding: 2vh 2vw;
  background: rgba(61, 232, 202, .08); text-align: center; max-width: 85vw;
  animation: pop .4s ease-out;
}
.answer-box .label { font-size: 1.1vw; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); margin-bottom: 1vh; }
.answer-box .text { font-size: 2.4vw; font-weight: 800; }
.answer-box pre.code { margin-top: 1.5vh; font-size: 1.4vw; }
.answer-box .who { margin-top: 1vh; font-size: 1.4vw; color: var(--fg-2); }

/* ---- Timer ---- */
.timer { display: flex; align-items: center; gap: 1.5vw; }
.timer .bar { flex: 1; height: 1.4vh; border-radius: 99px; background: var(--fill-muted); overflow: hidden; }
.timer .fill { height: 100%; background: var(--accent-cyan); border-radius: 99px; transition: background .3s; }
.timer .secs { font: 700 3vw var(--mono); min-width: 6vw; text-align: right; color: var(--accent-cyan); }
.timer.warn .fill { background: var(--accent-purple); }
.timer.warn .secs { color: var(--accent-purple); }
.timer .state { font-size: 1.3vw; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3); min-width: 14vw; }
.timer.idle .fill { background: var(--fg-5); }
.timer.idle .secs { color: var(--fg-3); }

/* ---- Players ---- */
#players { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1vw; }
.player {
  position: relative; padding: 1.4vh 1.4vw; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--surface-border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1vw;
  transition: opacity .2s, border-color .2s;
}
.player .name { min-width: 0; font-size: 1.7vw; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .score { font-size: 2.8vw; font-weight: 800; letter-spacing: -0.02em; color: var(--brand); }
.player .score.neg { color: var(--accent-purple); }
.player.active { border-color: var(--accent-cyan); box-shadow: inset 0 0 0 1px var(--accent-cyan); }
.player.locked { opacity: .4; }
.player.bump-up .score { animation: bump-up .7s ease-out; }
.player.bump-down .score { animation: bump-down .7s ease-out; }
.player .delta { position: absolute; right: 1.4vw; top: -2.6vh; font-size: 2vw; font-weight: 800; animation: rise 1.4s ease-out forwards; }
.player .delta.up { color: var(--brand); }
.player .delta.down { color: var(--accent-purple); }
@keyframes bump-up { 30% { transform: scale(1.25); } }
@keyframes bump-down { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes rise { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }

/* ---- Overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(29, 29, 27, .92); display: flex; align-items: center; justify-content: center; z-index: 150; cursor: pointer; }
.overlay-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.overlay-box h2 { font-size: 30px; letter-spacing: -0.02em; }
.overlay-box p { color: var(--fg-3); margin: 0; font-size: 15px; }
.icon.big { width: 56px; height: 56px; color: var(--brand); stroke-width: 1.6; }