:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: #173a55;
  background: #ccefff;
  font-synthesis: none;
}

.match-settings { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 18px; padding:14px; border-radius:16px; background:#eff9fc; }
.match-settings label { color:#4b7187; font-size:.7rem; font-weight:900; text-transform:uppercase; }
.match-settings select,.match-settings input[type="number"] { width:100%; margin-top:5px; padding:8px; border:2px solid #c5e3ec; border-radius:9px; color:#214b63; background:white; font:800 .82rem inherit; }
.match-settings .toggle { display:flex; align-items:center; gap:7px; padding-top:8px; }
.match-settings .toggle input { width:auto; margin:0; }
.live-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.live-controls button { padding:10px; border:0; border-radius:11px; color:white; background:#258eb9; font-weight:900; cursor:pointer; }
.live-controls #endMatchButton { background:#cf5267; }
.match-control-status { grid-column:1/-1; padding:11px 14px; border:2px solid #83cde6; border-radius:12px; color:#155978; background:#e9f9ff; font-weight:900; text-align:center; transition:.2s ease; }.match-control-status.paused { border-color:#f1bd55; color:#7a5200; background:#fff5d8; }.match-control-status.ended { border-color:#e38b99; color:#8f263b; background:#fff0f3; }
.live-controls button { transition:transform .12s ease,box-shadow .12s ease,filter .12s ease,opacity .12s ease; box-shadow:0 3px 0 #156b8f; }.live-controls button:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }.live-controls button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #156b8f; }.live-controls button.selected { outline:3px solid #ffd45c; outline-offset:2px; }.live-controls button:disabled { cursor:not-allowed; opacity:.48; box-shadow:none; }
.teacher-dialog #startMatchButton,.teacher-dialog .preview-button { flex:none; margin-top:7px; padding:8px 10px; font-size:.8rem; }.teacher-dialog .live-controls { flex:none; margin-top:8px; }.teacher-dialog .live-controls button { padding:7px 6px; font-size:.78rem; }.teacher-dialog .match-control-status { padding:7px 10px; font-size:.8rem; }
.teacher-footer { flex:none; padding-top:7px; border-top:1px solid #d8ebf2; background:#fff; }.teacher-launch-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:7px; }.teacher-launch-actions[hidden] { display:none; }.teacher-dialog #startMatchButton,.teacher-dialog .preview-button { width:auto; margin:0; }.teacher-dialog .live-controls { grid-template-columns:minmax(130px,1.35fr) repeat(4,minmax(64px,1fr)); margin:0; }.teacher-dialog .match-control-status { grid-column:auto; display:flex; align-items:center; justify-content:center; }.teacher-dialog .live-controls[hidden] { display:none; }
@media (max-width:560px){.teacher-dialog .live-controls{grid-template-columns:repeat(4,1fr)}.teacher-dialog .match-control-status{grid-column:1/-1}.teacher-launch-actions{grid-template-columns:1fr}}
@media (max-width:650px){.match-settings{grid-template-columns:1fr;}}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 50% -10%, #fff 0 18%, #d9f4ff 50%, #b6e3f5 100%); }
button { font: inherit; }
.game-shell { width: min(1600px, 100%); margin: 0 auto; padding: 18px clamp(12px, 2.5vw, 34px) 12px; }
.title-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
h1, h2, p { margin: 0; }
h1 { color: #153c5b; font-size: clamp(1.65rem, 3.2vw, 2.6rem); line-height: .95; letter-spacing: -.04em; text-shadow: 0 2px #fff; }
.eyebrow { margin-bottom: 5px; color: #34789c; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.pill-button, .done-button { border: 0; border-radius: 999px; color: white; font-weight: 900; cursor: pointer; box-shadow: 0 5px 0 #0a638b, 0 9px 18px #367b9b33; background: linear-gradient(#22a9dd, #1388bd); }
.pill-button { padding: 11px 18px; }
.header-actions, .hud-group { display: flex; gap: 8px; align-items: center; }
.home-link { display:inline-flex; align-items:center; padding:10px 14px; border-radius:999px; color:#174b68; background:#fff; border:2px solid #b9e8f8; font-weight:900; text-decoration:none; box-shadow:0 4px 12px #367b9b26; }
.home-link:hover { background:#eaf9ff; }
.entry-home-link { align-self:flex-start; margin-bottom:8px; }
.connection-status { margin:0; padding:9px 12px; border-radius:12px; background:#eef8fc; color:#24526b; font-weight:800; font-size:.86rem; }
.connection-status.online { background:#e5f8ee; color:#17643e; }
.connection-status.offline { background:#fff0ed; color:#963d30; }
.pill-button.question { background: linear-gradient(#50bd85,#299667); box-shadow: 0 5px 0 #17734a,0 9px 18px #367b9b33; }
.pill-button.store { background: linear-gradient(#f7ba45,#e69325); box-shadow: 0 5px 0 #b66a13,0 9px 18px #367b9b33; }
.pill-button:active, .done-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #0a638b; }
.game-frame { position: relative; overflow: hidden; border: 5px solid #fff; border-radius: 25px; box-shadow: 0 18px 50px #27647c3d, inset 0 0 0 1px #9fd8ec; background: #eaf9ff; aspect-ratio: 16 / 9; min-height: 340px; }
#gameCanvas { display: block; width: 100%; height: 100%; outline: none; cursor: crosshair; touch-action:none; overscroll-behavior:none; }
.hud { position: absolute; inset: 15px 15px auto; display: flex; justify-content: space-between; pointer-events: none; }
.hud-card { display: flex; align-items: center; gap: 9px; min-width: 132px; padding: 9px 14px; border: 2px solid #ffffffcc; border-radius: 18px; color: #163c59; background: #effbffeb; box-shadow: 0 5px 16px #1d5a7533; backdrop-filter: blur(8px); }
.hud-card.compact { min-width: 90px; }
.hud-card strong, .hud-card small { display: block; }
.hud-card strong { font-size: 1.3rem; line-height: 1; }
.hud-card small { margin-top: 2px; color: #548099; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hud-icon { font-size: 1.5rem; color: #18a8e0; }
.hud-card.item-loaded { color:#fff; border-color:#d8c5ff; background:linear-gradient(135deg,#16052fef,#6e3eb5e8); animation:itemPulse 1s ease-in-out infinite alternate; }
.hud-card.item-loaded small { color:#e7dcff; }.hud-card.item-loaded .hud-icon { color:#c7a7ff; }
@keyframes itemPulse { to { box-shadow:0 0 26px #9d6cffaa; } }
.hint { position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 30px); padding: 7px 14px; border-radius: 99px; color: #effcff; background: #143d5bc7; font-size: clamp(.66rem, 1.2vw, .82rem); font-weight: 800; text-align: center; pointer-events: none; transition: opacity .35s; }
.footnote { padding: 9px 4px 0; color: #477d98; font-size: .75rem; text-align: center; }
.mobile-controls { display: none; }
dialog { width: min(470px, calc(100% - 26px)); padding: 0; border: 0; border-radius: 25px; color: #173a55; box-shadow: 0 28px 90px #0e334b80; background: #f7fdff; }
dialog::backdrop { background: #14384d99; backdrop-filter: blur(5px); }
.entry-dialog { width:min(650px,calc(100% - 26px)); }.teacher-dialog { width:min(620px,calc(100% - 26px)); max-height:calc(100dvh - 28px); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }#teacherDialog { overflow:hidden; }#teacherDialog .panel-form { display:flex; max-height:calc(100dvh - 32px); flex-direction:column; overflow:hidden; }.teacher-scroll-area { min-height:0; margin:0 -10px -10px; padding:4px 10px 10px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }.teacher-close-x { position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border:2px solid #b9dce9; border-radius:50%; color:#315f76; background:#f5fcff; font-size:1.45rem; font-weight:900; line-height:1; cursor:pointer; box-shadow:0 3px 10px #1d536a20; }.teacher-close-x:hover { color:#fff; border-color:#258eb9; background:#258eb9; }.teacher-close-x:active { transform:scale(.92); }
.muted { margin-top:8px; color:#628398; }.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }.role-grid button { padding:20px 10px; border:2px solid #c1e4ef; border-radius:18px; color:#214b63; background:#effaff; cursor:pointer; }.role-grid button:hover { transform:translateY(-2px); border-color:#25a5d4; }.role-grid span,.role-grid strong,.role-grid small { display:block; }.role-grid span { font-size:2rem; }.role-grid strong { margin:8px 0 4px; }.role-grid small { color:#63879a; }.back-link { margin-bottom:16px; border:0; color:#287aa1; background:transparent; cursor:pointer; }.panel-form label+input { margin-bottom:14px; }.waiting-snowman { font-size:5rem; animation:bob 1.3s ease-in-out infinite alternate; }.room-code { margin:18px auto; padding:12px 20px; width:max-content; border-radius:14px; background:#dff4fc; color:#167da9; font:900 1.6rem monospace; letter-spacing:.08em; }.code-card { display:grid; grid-template-columns:1fr auto; gap:5px 12px; margin:20px 0; padding:16px; border-radius:17px; background:#dff4fc; }.code-card span { grid-column:1/-1; color:#64879a; font-size:.72rem; font-weight:900; text-transform:uppercase; }.code-card strong { color:#167da9; font:900 1.7rem monospace; }.code-card button { border:0; border-radius:10px; color:white; background:#188fc2; font-weight:900; cursor:pointer; }.roster-heading { display:flex; justify-content:space-between; margin-bottom:8px; }.player-roster { max-height:240px; margin:0; padding:0; list-style:none; overflow:auto; }.player-roster li { display:flex; justify-content:space-between; padding:10px 12px; border-radius:10px; background:#eff8fb; }.player-roster li+li { margin-top:5px; }.player-roster small { color:#4b8968; }.player-roster .empty { justify-content:center; color:#7895a4; }
@keyframes bob { to { transform:translateY(-9px) rotate(2deg); } }
.customizer { padding: 22px; }
.dialog-heading { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.dialog-heading h2 { font-size: 1.45rem; }
.close-button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #52778d; background: #dceff7; font-size: 1.5rem; cursor: pointer; }
.preview-wrap { display: grid; place-items: center; margin: 12px 0 6px; border-radius: 18px; background: radial-gradient(circle, #fff 0 32%, #d6f2fc 72%); }
#previewCanvas { width: 180px; height: 180px; }
fieldset { margin: 14px 0 0; padding: 0; border: 0; }
legend { margin-bottom: 7px; color: #486f86; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.swatches, .face-choices, .accessory-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch, .face-choice, .accessory-choice { border: 3px solid transparent; cursor: pointer; box-shadow: 0 2px 8px #315e7330; }
.swatch { width: 38px; height: 38px; border-radius: 50%; }
.face-choice, .accessory-choice { padding: 8px 13px; border-radius: 12px; color: #254d65; background: #eaf7fc; font-weight: 800; }
.accessory-choice { display:inline-flex; align-items:center; gap:6px; }
.swatch.selected, .face-choice.selected, .accessory-choice.selected { border-color: #153f5b; transform: scale(1.08); }
.done-button { width: 100%; margin-top: 19px; padding: 12px; }
.preview-button { width:100%; margin-top:10px; padding:11px; border:2px solid #70c7e6; border-radius:13px; color:#176b8e; background:#eefaff; font-weight:900; cursor:pointer; }
.panel-form { position: relative; padding: 26px; }
.dialog-x { position: absolute; right: 18px; top: 18px; }
.question-text { margin: 24px 0 14px; padding: 22px; border-radius: 18px; background: #dff4fc; font-size: 1.45rem; font-weight: 900; text-align: center; }
.panel-form label { display:block; margin-bottom:6px; font-size:.8rem; font-weight:900; color:#4b7187; text-transform:uppercase; }
.panel-form input { width:100%; padding:13px; border:3px solid #b9dfed; border-radius:13px; color:#173a55; background:white; font:900 1.25rem inherit; text-align:center; outline:none; }
.panel-form input:focus { border-color:#22a9dd; }
.feedback { min-height:22px; margin-top:10px; font-weight:900; text-align:center; }
.feedback.correct { color:#238559; }.feedback.wrong { color:#cf4962; }
.feedback.explanation { padding:10px 12px; border-radius:12px; background:#fff0f3; font-size:.9rem; line-height:1.35; }
.question-meta { margin-top:12px; color:#557d92; font-size:.72rem; font-weight:900; line-height:1.4; text-align:center; text-transform:uppercase; }
.answer-choices { display:grid; gap:8px; margin:14px 0; }
.answer-choice { display:flex!important; align-items:center; gap:10px; margin:0!important; padding:11px 13px; border:2px solid #c5e3ed; border-radius:13px; color:#234e65!important; background:#f1faff; font-size:.9rem!important; text-transform:none!important; cursor:pointer; }
.answer-choice:has(input:checked) { border-color:#239dca; background:#dff4fc; }.answer-choice input { width:auto!important; margin:0; accent-color:#178fbe; }
.wallet { margin:18px 0 10px; }.shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shop-grid button { padding:18px 10px; border:2px solid #bfe2ee; border-radius:16px; color:#214b63; background:#effaff; cursor:pointer; }.shop-grid strong,.shop-grid span { display:block; }.shop-grid span { margin-top:4px; color:#63879a; font-size:.75rem; }
.results { text-align:center; }.big-score { margin:22px 0; padding:24px; border-radius:20px; background:#dff4fc; }.big-score strong,.big-score span { display:block; }.big-score strong { font-size:3rem; color:#1388bd; }.big-score span { font-weight:900; text-transform:uppercase; }
.black-hole-dialog { width:min(560px,calc(100% - 24px)); color:white; background:#020107; overflow:hidden; }
.black-hole-dialog::backdrop { background:#000; backdrop-filter:none; }
.black-hole-capture { min-height:430px; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at 50% 42%,#643bb0 0 8%,#18062e 28%,#020107 66%); }
.capture-vortex { position:relative; width:260px; height:260px; margin:auto; border:10px solid #8359cf; border-radius:50%; box-shadow:0 0 40px #9769ff,inset 0 0 55px #000; animation:vortexSpin .65s linear infinite; }
.capture-vortex::before,.capture-vortex::after { content:''; position:absolute; inset:20px; border:6px dashed #d6c0ff; border-radius:50%; }
.capture-vortex::after { inset:52px; border-color:#5f35a9; animation:vortexSpin .35s linear infinite reverse; }
.capture-snowman { position:absolute; inset:0; display:grid; place-items:center; font-size:5rem; animation:eaten 1.7s ease-in forwards; }
.capture-title { margin-top:24px; font-size:1.35rem; font-weight:900; }
.black-hole-question { padding:30px; background:radial-gradient(circle at top,#25103e,#05020a 70%); }
.black-hole-question h2 { color:white; }.black-hole-question label { display:block; margin:16px 0 6px; color:#cbb7ee; font-weight:900; }
.black-hole-question input { width:100%; padding:13px; border:3px solid #8159bc; border-radius:13px; font:900 1.25rem inherit; text-align:center; }
.black-hole-question .question-text { color:#24113c; background:#e9ddff; }.team-hint { margin-top:10px; padding:10px; border-radius:12px; color:#e4d5ff; background:#7246a944; font-weight:800; }
.black-hole-dialog .feedback { color:#d9c8f4; }.black-hole-dialog .feedback.correct { color:#70e4ac; }.black-hole-dialog .feedback.wrong { color:#ff7894; }
@keyframes vortexSpin { to { transform:rotate(360deg); } }
@keyframes eaten { 0% { transform:scale(1) rotate(0); opacity:1; } 70% { transform:scale(.5) rotate(540deg); opacity:1; } 100% { transform:scale(0) rotate(900deg); opacity:0; } }

@media (hover: none), (pointer: coarse) {
  .mobile-controls { position: absolute; inset: auto 18px 22px; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
  .touch-zone, .throw-button { pointer-events: auto; touch-action: none; user-select: none; }
  .touch-zone { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border: 3px solid #ffffffb8; border-radius: 50%; color: #ffffffb8; background: #143d5b55; font-size: .62rem; font-weight: 900; }
  .stick { position: absolute; width: 48px; height: 48px; border: 3px solid white; border-radius: 50%; background: #e9faffc9; box-shadow: 0 4px 10px #14384d44; }
  .throw-button { width: 84px; height: 84px; border: 4px solid #fff; border-radius: 50%; color: white; background: #168fc5cc; font-weight: 900; box-shadow: 0 5px 18px #15435c55; }
  .hint { bottom: 5px; opacity: .8; }
}

@media (max-width: 650px) {
  .role-grid { grid-template-columns:1fr; }.role-grid button { padding:12px; }.role-grid span { font-size:1.4rem; }
  .game-shell { padding: 10px; }
  .game-frame { min-height: 390px; aspect-ratio: auto; height: calc(100vh - 116px); border-radius: 19px; }
  .title-bar { margin-bottom: 8px; }
  .pill-button { padding: 9px 12px; font-size: .75rem; }
  .title-bar h1 { font-size:1.35rem; }.header-actions { gap:4px; }.home-link { padding:7px 9px; font-size:.75rem; }.pill-button { padding:7px 9px; }.pill-button.store { display:none; }
  .hud { inset: 8px 8px auto; }
  .hud-card { min-width: 112px; padding: 7px 10px; }
  .hud-card.compact { min-width:64px; }.hud-card.compact:nth-child(4) { display:none; }.hud-card small { font-size:.52rem; }
  .hud-card strong { font-size: 1.05rem; }
  .footnote { display: none; }
}

/* Teacher projector and spectator view */
.roster-player { display:flex; justify-content:space-between; align-items:center; width:100%; padding:0; border:0; color:#214b63; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.roster-player.selected { color:#7b45b4; }
.spectator-panel { position:absolute; z-index:8; inset:12px 12px auto; display:grid; grid-template-columns:auto minmax(180px,1fr) auto; gap:9px 14px; align-items:center; padding:10px 12px; border:2px solid #ffffffd9; border-radius:18px; color:#173b57; background:#effbfff0; box-shadow:0 8px 24px #174c6638; backdrop-filter:blur(10px); }
.spectator-summary { display:flex; gap:9px; align-items:center; }
.spectator-summary small,.spectator-summary strong { display:block; }.spectator-summary small { color:#3784a6; font-size:.62rem; font-weight:900; letter-spacing:.1em; }.spectator-summary strong { font-size:1rem; }
.live-dot { width:10px; height:10px; border-radius:50%; background:#35c477; box-shadow:0 0 0 5px #35c4772e; animation:itemPulse .8s ease-in-out infinite alternate; }
.spectator-stats { color:#52788e; font-size:.78rem; font-weight:800; text-align:center; }
.spectator-actions { display:flex; gap:6px; }.spectator-actions button,.spectator-roster button { padding:7px 10px; border:0; border-radius:10px; color:#176b91; background:#d8f2fb; font-weight:900; cursor:pointer; }
.spectator-actions button:hover,.spectator-roster button:hover,.spectator-roster button.selected { color:#fff; background:#258eb9; }
.spectator-roster { grid-column:1/-1; display:flex; gap:6px; overflow-x:auto; padding-top:2px; scrollbar-width:thin; }.spectator-roster button { flex:0 0 auto; }
.spectator-actions button.selected { color:#153f5b; background:#fff; box-shadow:inset 0 0 0 2px #55c7ea; }
.statistics-view { position:absolute; inset:112px 18px 18px; z-index:8; padding:22px; border:3px solid #ffffffcc; border-radius:22px; color:#173a55; background:linear-gradient(145deg,#f7fdfff2,#dff5fcf2); box-shadow:0 18px 45px #123e5660; backdrop-filter:blur(12px); overflow:auto; }
.statistics-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }.statistics-heading h2 { font-size:clamp(1.3rem,2.5vw,2rem); }.statistics-heading>strong { padding:10px 16px; border-radius:14px; color:white; background:#177fa8; font-size:1.35rem; }
.statistics-sort-hint { margin-top:3px; color:#628398; font-size:.78rem; font-weight:700; }
.statistics-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }.statistics-summary article { padding:12px; border-radius:14px; background:white; text-align:center; box-shadow:0 4px 12px #32627c1c; }.statistics-summary strong,.statistics-summary span { display:block; }.statistics-summary strong { font-size:1.4rem; }.statistics-summary span { color:#628398; font-size:.7rem; font-weight:900; text-transform:uppercase; }
.statistics-table-wrap { overflow:auto; border-radius:14px; background:white; }.statistics-view table { width:100%; border-collapse:collapse; }.statistics-view th,.statistics-view td { padding:10px 12px; border-bottom:1px solid #d9edf4; text-align:left; white-space:nowrap; }.statistics-view th { color:#4b7187; background:#eff9fc; font-size:.7rem; text-transform:uppercase; }.statistics-view tbody tr:first-child td { font-weight:900; background:#fff8dc; }
.statistics-view th button { width:100%; padding:3px 0; border:0; color:inherit; background:transparent; font:inherit; text-align:left; text-transform:inherit; cursor:pointer; }.statistics-view th button:hover,.statistics-view th button:focus-visible { color:#177fa8; }.statistics-view th button.active { color:#0d719a; }.statistics-view th button span { display:inline-block; margin-left:3px; font-size:.62rem; }
.statistics-view th:not(:first-child),.statistics-view td:not(:first-child),.statistics-view th:not(:first-child) button { text-align:center; }
@media (max-width:760px){.statistics-view{inset:150px 8px 8px;padding:12px}.statistics-summary{grid-template-columns:repeat(2,1fr)}.statistics-view th,.statistics-view td{padding:8px;font-size:.75rem}}
.teacher-spectator .title-bar,.teacher-spectator .footnote,.teacher-spectator .hud,.teacher-spectator .hint,.teacher-spectator .mobile-controls { display:none; }
.teacher-spectator .game-shell { width:100%; padding:0; }.teacher-spectator .game-frame { width:100vw; height:100vh; min-height:0; aspect-ratio:auto; border:0; border-radius:0; }
.game-frame:fullscreen { width:100vw; height:100vh; border:0; border-radius:0; }.game-frame:fullscreen canvas { width:100%; height:100%; }
.game-frame:fullscreen,.arena-fullscreen { overscroll-behavior:none; }.arena-fullscreen { overflow:hidden; position:fixed; inset:0; width:100%; height:100%; }
.fullscreen-player { background:#244f76; }
.classroom-address { margin:-10px 0 16px; padding:9px 12px; border-radius:11px; color:#2a6f8e; background:#eef9fd; font-size:.78rem; font-weight:800; overflow-wrap:anywhere; }
.classroom-address.online { color:#176b45; background:#e8f8ef; }.classroom-address.local { color:#76510a; background:#fff5d8; }.classroom-address.offline { color:#963d30; background:#fff0ed; }
@media (max-width:760px) { .spectator-panel { grid-template-columns:1fr; }.spectator-stats { text-align:left; }.spectator-actions { flex-wrap:wrap; }.spectator-roster { grid-column:1; } }

/* Phone controls stay inside the visible arena in either orientation. */
@media (max-width: 650px) {
 .title-bar{flex-wrap:wrap;gap:8px}.header-actions{flex-wrap:wrap}.pill-button.store{display:inline-block}
 .game-frame{min-height:280px;height:calc(100dvh - 200px)}
}
@media (pointer:coarse), (max-width:1000px) and (max-height:600px) {
 .mobile-controls{position:absolute;inset:auto max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:flex;align-items:end;justify-content:space-between;pointer-events:none}
 .touch-zone,.throw-button{pointer-events:auto;touch-action:none;user-select:none}
 .touch-zone{position:relative;display:grid;place-items:center;width:88px;height:88px;border:3px solid #ffffffb8;border-radius:50%;background:#143d5b55;color:white;font-size:10px}
 .stick{position:absolute;width:40px;height:40px;border:3px solid white;border-radius:50%;background:#e9faffc9}
 .throw-button{width:72px;height:72px;border:3px solid white;border-radius:50%;color:white;background:#168fc5dd;font-weight:900}
 dialog{max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain}
 #practiceDialog{scroll-padding-block:16px max(28px,env(safe-area-inset-bottom));touch-action:pan-y}
 #practiceDialog .panel-form{min-height:min-content;overflow:visible;padding-bottom:max(24px,env(safe-area-inset-bottom))}
 input,select,textarea{font-size:16px}
}
@media (orientation:landscape) and (max-height:600px) {
 body{min-height:100dvh}
 body #hm-game-nav{display:none}
 .game-shell{height:100dvh;padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column}
 .title-bar{flex:none;margin-bottom:6px;gap:6px;flex-wrap:nowrap}.title-bar h1{font-size:1.1rem}.title-bar .eyebrow{display:none}
 .header-actions{gap:5px;flex-wrap:wrap}.pill-button,.home-link{min-height:36px;padding:6px 9px;font-size:12px}
 .game-frame{flex:1;min-height:0;height:auto;aspect-ratio:auto;border-radius:12px}.footnote,.hint{display:none}
 .hud{inset:6px 6px auto}.hud-card{min-width:80px;padding:4px 7px}.hud-card.compact{min-width:48px}.hud-card strong{font-size:1rem}.hud-card small{font-size:9px}
 .panel-form{padding:16px}.role-grid{grid-template-columns:repeat(3,1fr)}.black-hole-capture{min-height:240px}.capture-vortex{width:130px;height:130px}
}

/* Keep the prompt beside the answer, above the landscape keyboard. */
@media (orientation:landscape) and (max-height:600px){
 #questionDialog,#blackHoleDialog{position:fixed;inset:calc(var(--question-visible-top,0px) + 4px) 0 auto;margin:0 auto;width:min(760px,calc(100% - 16px));max-height:calc(var(--question-visible-height,100dvh) - 8px);overflow:auto;border-radius:14px;scroll-padding:8px}
 #questionForm,#blackHoleForm{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,1fr);gap:6px 12px;padding:10px 40px 10px 12px;align-items:start}
 #questionForm>.eyebrow,#questionForm>h2,#blackHoleForm>.eyebrow,#blackHoleForm>h2{display:none}
 #questionMeta,#blackHoleMeta{grid-column:1;grid-row:1;margin:0;text-align:left;font-size:10px}
 #questionText,#blackHoleQuestion{grid-column:1;grid-row:2 / span 5;margin:0;padding:8px;font-size:clamp(16px,2.5vw,21px);line-height:1.3;max-height:calc(var(--question-visible-height,100dvh) - 54px);overflow:auto;overflow-wrap:anywhere}
 #questionChoices,#blackHoleChoices{grid-column:2;grid-row:1 / span 3;margin:0;gap:4px}
 #questionChoices:empty,#blackHoleChoices:empty{display:none}
 #questionAnswerLabel,#blackHoleAnswerLabel{grid-column:2;grid-row:1;margin:0;font-size:12px}
 #questionAnswer,#blackHoleAnswer{grid-column:2;grid-row:2;min-height:36px;padding:6px;font-size:16px;margin:0}
 #questionFeedback,#blackHoleFeedback{grid-column:2;grid-row:4;margin:0;min-height:0;font-size:12px}
 #questionForm>.done-button,#blackHoleForm>.done-button{grid-column:2;grid-row:5;margin:0;padding:8px;min-height:36px;font-size:13px}
 #blackHoleTeamHint{grid-column:1;grid-row:7;margin:0;font-size:12px}
 #questionForm .dialog-x{top:5px;right:5px}
}