.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); }
.splash.bear .special-img { height: 38vh; max-width: 40vw; object-fit: contain; animation: pop .6s ease-out; }
.splash.bear .special-icon, .splash.bear.no-img .special-img { display: none; }
.splash.bear.no-img .special-icon { display: block; }
@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; }

body.no-cursor, body.no-cursor * { cursor: none !important; }

/* ---- Buzzer on player cards ---- */
.player .tag { position: absolute; left: 1.4vw; top: -1.4vh; font-size: 1.1vw; font-weight: 800; padding: 0.2vh 0.6vw; border-radius: 6px; }
.player .tag:empty { display: none; }
.player.buzzed { border-color: var(--brand); background: rgba(61, 232, 202, .12); box-shadow: 0 0 0 2px var(--brand), 0 0 40px rgba(61, 232, 202, .35); animation: buzzed .5s ease-out; }
.player.buzzed .tag { background: var(--brand); color: var(--bg); }
.player:not(.buzzed) .tag { background: var(--fill-muted); color: var(--fg-2); }
.player.false-start { border-color: var(--accent-purple); }
.player.false-start .tag { background: var(--accent-purple); color: var(--bg); }
@keyframes buzzed { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---- Button test ---- */
.test-view .big-title { font-size: 5vw; }
.test-cards, .final-cards { display: flex; justify-content: center; gap: 1.5vw; width: 100%; }
.tcard, .fcard {
  flex: 0 1 24vw; min-width: 0; padding: 2.4vh 1.6vw; border-radius: 12px;
  background: var(--surface); border: 2px solid var(--surface-border);
  display: flex; flex-direction: column; align-items: center; gap: 1vh; transition: background .1s, border-color .1s;
}
.tcard .nm, .fcard .nm { font-size: 2vw; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .info { font: 700 1.8vw var(--mono); color: var(--fg-3); min-height: 1.2em; }
.tcard.hit { background: var(--brand); border-color: var(--brand-light); color: var(--bg); }
.tcard.win { border-color: var(--accent-cyan); box-shadow: 0 0 40px rgba(51, 187, 255, .35); }
.tcard.win .info { color: var(--accent-cyan); }

/* ---- Final ---- */
.splash.final .big-title { color: var(--accent-violet); font-size: 5.5vw; }
.splash.final .special-icon { color: var(--accent-violet); }
.fcard .st { font-size: 1.4vw; font-weight: 700; color: var(--fg-3); }
.fcard .st.done { color: var(--brand); }
.fcard .ans { font-size: 2vw; font-weight: 800; text-align: center; word-break: break-word; }
.fcard .ans.hidden-val { color: var(--fg-5); }
.fcard .bet { font-size: 1.4vw; color: var(--fg-2); }
.fcard .bet b { color: var(--fg); }
.fcard.ok { border-color: var(--brand); background: rgba(61, 232, 202, .1); }
.fcard.bad { border-color: var(--accent-purple); background: rgba(233, 124, 255, .08); }
.final-q .final-cards { margin-top: 1vh; }

.splash.results .podium { display: flex; justify-content: center; align-items: flex-end; gap: 2vw; }
.pcard { width: 22vw; padding: 3vh 1.5vw; border-radius: 12px; background: var(--surface); border: 1px solid var(--surface-border); border-top: .6vh solid var(--fg-5); display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.pcard .place { font-size: 2vw; font-weight: 800; color: var(--fg-3); }
.pcard .nm { font-size: 2.4vw; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .sc { font-size: 3.4vw; font-weight: 800; color: var(--brand); }
.pcard.place1 { border-top-color: var(--brand); padding-top: 6vh; background: rgba(61, 232, 202, .09); }
.pcard.place2 { border-top-color: var(--accent-cyan); padding-top: 4vh; }
.pcard.place3 { border-top-color: var(--accent-violet); }

/* =====================================================================
   Hall screen 4080×1080 (≈3.8 : 1), same as midori-arena.
   Sizes switch to vh (the height is what is scarce), players move to a right column,
   question text and code sit side by side.
   ===================================================================== */
@media (min-aspect-ratio: 5 / 2) {
  #stage {
    display: grid; padding: 2.4vh 1.6vw 2.4vh; gap: 2vh 1.4vw;
    grid-template-columns: minmax(0, 1fr) 21vw;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "view players";
  }
  .topbar { grid-area: top; min-height: 0; }
  .topbar .eyebrow { font-size: 2.2vh; }
  .topbar .round-name { font-size: 2.4vh; }
  #view { grid-area: view; }
  #players { grid-area: players; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: 2vh; }

  .player { flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.6vh; padding: 2vh 1.4vw; }
  .player .name { font-size: 4vh; max-width: 100%; }
  .player .score { font-size: 9vh; line-height: 1; }
  .player .delta { font-size: 5vh; top: 1vh; right: 1.4vw; }
  .player .tag { font-size: 2.4vh; top: 1.6vh; left: auto; right: 1.2vw; padding: 0.4vh 0.8vw; }

  .grid { gap: 1.2vh 0.6vw; }
  .grid .theme { font-size: 3.8vh; padding: 0 1.2vw; border-left-width: 6px; }
  .grid .cell { font-size: 7.5vh; }

  .splash { gap: 3.4vh; }
  .splash .big-title { font-size: 15vh; }
  .splash .sub { font-size: 4vh; }
  .splash .themes { max-width: 70vw; gap: 1.2vh 0.8vw; }
  .splash .themes .chip { font-size: 3.4vh; padding: 1vh 1.2vw; }
  .splash .special-icon { width: 20vh; height: 20vh; }
  .splash.bear .special-img { height: 50vh; max-width: 30vw; }
  .splash.final .big-title, .test-view .big-title { font-size: 11vh; }

  .q-head { gap: 1vw; }
  .q-head .theme-name { font-size: 4vh; }
  .q-head .value { font-size: 5.4vh; }
  .q-head .chip { font-size: 2.6vh; padding: 0.8vh 0.8vw; }
  .q-text { font-size: 7.4vh; max-width: 62vw; }
  .q-text.medium { font-size: 5.8vh; }
  .q-text.small { font-size: 4.4vh; }
  .q-body pre.code { font-size: 3.8vh; max-width: 44vw; max-height: 74vh; }
  .q-body pre.code.small { font-size: 2.7vh; }
  /* Text left, code right for the full height: the width is plentiful, the height is not */
  .q-body:has(> pre.code) {
    display: grid; grid-template-columns: fit-content(36vw) auto; grid-auto-rows: auto;
    align-content: center; justify-content: center; align-items: center; column-gap: 3vw; row-gap: 2.4vh;
  }
  .q-body:has(> pre.code) > pre.code { grid-column: 2; grid-row: 1 / span 3; max-height: 100%; align-self: center; }
  .q-body:has(> pre.code) > :not(pre.code) { grid-column: 1; text-align: left; max-width: 36vw; }
  .q-body:has(> pre.code) > .final-cards { justify-content: flex-start; }
  .q-body:has(> pre.code) > .final-cards .fcard { flex-basis: 11vw; }

  .answer-box { padding: 2vh 2vw; max-width: 70vw; }
  .answer-box .label { font-size: 2.2vh; }
  .answer-box .text { font-size: 5vh; }
  .answer-box pre.code { font-size: 2.8vh; }
  .answer-box .who { font-size: 3vh; }

  .timer .bar { height: 1.8vh; }
  .timer .secs { font-size: 6.4vh; min-width: 7vw; }
  .timer .state { font-size: 2.8vh; min-width: 12vw; }

  .tcard, .fcard { flex-basis: 18vw; padding: 3vh 1.4vw; }
  .tcard .nm, .fcard .nm { font-size: 4.4vh; }
  .tcard .info { font-size: 4vh; }
  .fcard .st, .fcard .bet { font-size: 3vh; }
  .fcard .ans { font-size: 4.4vh; }

  .pcard { width: 17vw; }
  .pcard .place { font-size: 4vh; }
  .pcard .nm { font-size: 5vh; }
  .pcard .sc { font-size: 8vh; }
}