/* Arena is the immersive game surface of the shared Pulse design system. */
body[data-page="game"] .sidebar, body[data-page="results"] .sidebar,
body[data-page="game"] .topbar, body[data-page="results"] .topbar,
body[data-page="game"] footer, body[data-page="results"] footer { display: none; }
body[data-page="game"] .main-content, body[data-page="results"] .main-content { margin: 0 auto; max-width: 1800px; padding: 0 32px 20px; }
.game-page { padding-top: 20px; }
.arena-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.workspace-link { display: inline-flex; align-items: center; gap: 8px; color: #526078; font-size: 12px; font-weight: 650; text-decoration: none; min-height: 44px; }
.workspace-link:hover { color: var(--action); }
.workspace-link .ui-icon { width: 17px; height: 17px; }
.arena-title { text-align: center; min-width: 0; }
.arena-title .eyebrow { justify-content: center; margin-bottom: 5px; font-size: 9px; color: var(--action); }
.arena-title h1 { margin: 0; font-size: 23px; }
.arena-roundbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 0; }
.round-summary { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.round-available { color: var(--muted); font-size: 12px; font-weight: 600; }
.round-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; list-style: none; gap: 8px; padding: 0; margin: 0; }
.round-progress li { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #b9c3d6; border-radius: 50%; color: #5f6b82; font-size: 10px; font-weight: 700; }
.round-progress li[data-state="current"] { color: white; background: var(--action); border-color: var(--action); box-shadow: 0 0 0 4px var(--indigo-soft); }
.round-progress li[data-state="complete"] { border-color: #a8dcd1; color: var(--teal-ink); background: var(--teal-soft); }
.round-progress .ui-icon { width: 13px; height: 13px; }
.arena-layout { display: grid; grid-template-columns: minmax(165px,.7fr) minmax(0,2.8fr) minmax(165px,.7fr); grid-template-areas: "left stage right" "extra extra extra"; gap: 16px; align-items: stretch; }
.arena-stage { grid-area: stage; background: var(--navy); color: white; border: 1px solid #263552; border-radius: var(--radius-lg); padding: 25px 30px 30px; min-width: 0; position: relative; }
.stage-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.stage-topline .eyebrow { color: #b9b8ff; font-size: 9px; letter-spacing: 1.7px; }
.stage-instruction { color: var(--stage-muted); font-size: 11px; margin: 0; }
.timer-dial { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 94px; height: 94px; position: relative; flex: 0 0 auto; }
.timer-ring { width: 100%; height: 100%; position: absolute; inset: 0; transform: rotate(-90deg); }
.timer-track { stroke: #3a4762; }
.timer-progress { stroke: var(--amber); stroke-linecap: round; transition: stroke-dashoffset var(--motion-fast) linear; }
.round-clock { font-size: 25px; font-weight: 800; letter-spacing: -.8px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.timer-caption { font-size: 7px; font-weight: 700; letter-spacing: 1.3px; color: var(--stage-muted); margin-top: 2px; }
.timer-dial[data-urgent="true"] .round-clock { color: #fcd478; }
.stage-question { text-align: center; padding: 28px 0 15px; }
.stage-question h2 { font-size: clamp(32px,3.6vw,62px); line-height: 1.22; letter-spacing: -.04em; margin: 7px 0 16px; font-weight: 750; overflow-wrap: anywhere; }
.stage-question h2:focus-visible { outline-color: #c7c9ff; }
.stimulus { margin: 8px 0 24px; padding: 17px 20px; border: 1px solid #435372; border-left: 3px solid var(--indigo); border-radius: 10px; background: #1d2a43; color: #eef2ff; font-size: 15px; line-height: 1.8; text-align: left; white-space: pre-wrap; }
.answer-panel { margin-top: 22px; padding: 20px 22px; background: #dbf8ef; color: #123f3a; border-radius: 13px; border: 1px solid #89d8c4; font-size: 13px; line-height: 1.7; text-align: left; }
.answer-heading { display: flex; align-items: center; gap: 10px; }
.answer-heading>.ui-icon { padding: 4px; width: 26px; height: 26px; border-radius: 50%; color: white; background: var(--teal-ink); }
.answer-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.answer-panel p { margin: 10px 0; }
.answer-panel .answer-text { color: #123f3a; font-size: 21px; font-weight: 750; }
.answer-panel ul { padding-left: 20px; margin-bottom: 0; font-size: 12px; }
.arena-team { border-radius: 18px; border: 1px solid var(--team-color); background: var(--team-color); color: white; padding: 21px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-width: 0; }
.team-wing-left { grid-area: left; }
.team-wing-right { grid-area: right; }
.team-identity { width: 100%; }
.team-number { display: inline-block; color: #ffffffdc; font-size: 8px; font-weight: 750; letter-spacing: 1.6px; margin-bottom: 8px; }
.team-identity h2 { font-size: 20px; line-height: 1.3; margin: 0; letter-spacing: -.03em; overflow-wrap: anywhere; }
.team-points { display: flex; align-items: center; flex-direction: column; margin: 18px 0 21px; font-variant-numeric: tabular-nums; }
.team-points strong { font-family: var(--font-numbers); font-size: clamp(52px,5vw,78px); font-weight: 800; letter-spacing: -4px; line-height: 1; }
.team-points>span { font-size: 11px; color: #ffffffe0; margin-top: 5px; }
.score-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.score-button { border: 1px solid #ffffff90; border-radius: 9px; min-width: 44px; min-height: 44px; padding: 8px; font-size: 13px; font-weight: 800; background: white; color: var(--team-color); transition: transform var(--motion-fast),background var(--motion-fast); }
.score-button:hover { background: var(--team-soft); transform: translateY(-2px); }
.score-button:active { transform: translateY(0); }
.score-button:focus-visible { outline-color: white; outline-offset: 3px; box-shadow: 0 0 0 5px var(--team-color); }
.score-button:disabled { color: #5d6677; background: #e6eaf1; border-color: #e6eaf1; transform: none; }
.arena-extra-scores { grid-area: extra; display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; min-width: 0; }
.team-extra { flex-direction: row; justify-content: space-between; text-align: left; gap: 20px; padding: 17px 23px; }
.team-extra .team-identity { width: auto; min-width: 0; }
.team-extra .team-identity h2 { font-size: 17px; }
.team-extra .team-number { margin-bottom: 3px; }
.team-extra .team-points { margin: 0; flex-direction: row; gap: 7px; }
.team-extra .team-points strong { font-size: 39px; letter-spacing: -1.5px; }
.team-extra .score-actions { flex: 0 0 auto; }
.arena-layout[data-team-count="5"] .team-extra,.arena-layout[data-team-count="6"] .team-extra { flex-direction: column; text-align: center; gap: 12px; }
.arena-layout[data-team-count="5"] .team-extra .team-points,.arena-layout[data-team-count="6"] .team-extra .team-points { flex-direction: row; }
.arena-support { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 0 22px; min-height: 57px; }
.teacher-notes { font-size: 12px; color: var(--muted); max-width: 780px; }
.teacher-notes summary { min-height: 44px; padding: 14px 0 8px; }
.teacher-notes p { margin: 5px 0 17px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: white; line-height: 1.7; }
.game-status { font-size: 12px; font-weight: 700; color: var(--amber-ink); margin: 13px 0 5px; min-height: 20px; }
.control-deck { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }
.timer-controls,.round-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.control-deck .secondary-button { font-size: 12px; }
.answer-toggle[aria-expanded="true"] { color: var(--teal-ink); background: var(--teal-soft); border-color: #8fcabf; }
.arena-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 7px; }
.arena-footer>span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.arena-footer>span .ui-icon { width: 15px; height: 15px; }
.arena-footer .text-button { color: #6b5267; font-size: 11px; }
.round-enter { animation: round-enter var(--motion-enter) ease-out; }
.answer-enter { animation: reveal-answer var(--motion-enter) ease-out; }
.score-updated { animation: score-bump var(--motion-enter) ease-out; }
@keyframes round-enter { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-answer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes score-bump { 40% { transform: scale(1.025); box-shadow: 0 0 0 4px var(--team-soft); } }
.projection-mode .teacher-only { display: none; }
.projection-mode .arena-header { padding-bottom: 12px; }
.projection-mode .stage-question h2 { font-size: clamp(42px,4.6vw,84px); }
.projection-mode .timer-dial { width: 112px; height: 112px; }
.projection-mode .round-clock { font-size: 31px; }
.projection-mode .arena-support { min-height: 30px; }
.results-page { max-width: 1180px; margin: 0 auto; padding-top: 22px; }
.results-hero { position: relative; text-align: center; background: var(--navy); color: white; padding: 34px; border-radius: 25px; margin-top: 18px; }
.results-hero .page-heading { margin: 18px 0 10px; }
.results-hero .page-heading h1 { font-size: clamp(30px,4vw,53px); max-width: none; }
.results-hero .eyebrow { justify-content: center; color: #b9b8ff; }
.results-hero .page-description { max-width: none; color: var(--stage-muted); }
.results-trophy { display: grid; place-items: center; border: 1px solid #7d632d; border-radius: 18px; background: #362f25; color: #fcd478; width: 66px; height: 66px; margin: auto; }
.results-trophy .ui-icon { width: 36px; height: 36px; }
.results-message { color: #e3e7f0; font-size: 13px; margin: 15px 0; }
.results-hero>.level-badge { position: absolute; right: 25px; top: 25px; }
.results-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; list-style: none; padding: 0; margin: 0; }
.result-team { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: white; border: 1px solid var(--line); border-top: 4px solid var(--team-color); border-radius: 16px; padding: 23px; position: relative; min-width: 0; }
.result-team[data-winner="true"] { background: var(--team-soft); border-color: var(--team-color); }
.result-rank { color: var(--team-color); font-size: 12px; font-weight: 800; align-self: start; margin-top: 4px; }
.result-name { flex: 1; min-width: 0; }
.result-name h3 { font-size: 17px; margin: 0 0 3px; overflow-wrap: anywhere; }
.result-name span { color: var(--muted); font-size: 11px; }
.result-team>.ui-icon { color: var(--team-color); width: 24px; height: 24px; }
.result-points { font-size: 44px; font-weight: 800; letter-spacing: -2px; color: var(--team-color); display: block; flex-basis: 100%; font-variant-numeric: tabular-nums; }
.result-points span { font-size: 12px; color: var(--muted); letter-spacing: 0; font-weight: 500; }
.reflection-panel>div { display: flex; gap: 12px; align-items: center; }
.reflection-panel>div .ui-icon { color: var(--action); }
.reflection-panel h2 { margin: 0; }
.reflection-panel ul { display: flex; gap: 15px 30px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
@media(min-width:1700px) { .arena-stage { padding: 30px 40px 35px; } .stage-question { padding-block: 35px; } }
@media(max-width:1200px) { .control-deck { flex-wrap: wrap; } .round-navigation { margin-left: auto; } .arena-stage { padding: 22px; } .stage-question h2 { font-size: 40px; } .arena-layout { grid-template-columns: minmax(150px,.7fr) minmax(0,2.5fr) minmax(150px,.7fr); gap: 12px; } .arena-team { padding-inline: 12px; } .team-identity h2 { font-size: 18px; } .team-extra { padding-inline: 18px; } .arena-title h1 { font-size: 20px; } }
@media(max-width:950px) { .arena-layout { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "stage stage" "left right" "extra extra"; } .arena-team { flex-direction: row; gap: 18px; padding: 18px; text-align: left; justify-content: space-between; } .team-identity { width: auto; } .team-points { margin: 0; } .team-points strong { font-size: 42px; letter-spacing: -2px; } .team-number { margin-bottom: 4px; } .score-actions { flex-shrink: 0; } .arena-team .score-actions { max-width: 100px; } .team-extra .team-points { flex-direction: column; } .arena-title h1 { font-size: 18px; } .arena-header { flex-wrap: wrap; gap: 12px; } .arena-title { order: 3; width: 100%; } .stage-question h2 { font-size: 43px; } .results-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { body[data-page="game"] .main-content,body[data-page="results"] .main-content { padding: 0 16px 17px; } .game-page { padding-top: 12px; } .arena-header { padding-bottom: 14px; } .arena-header>.secondary-button { font-size: 11px; padding-inline: 11px; } .workspace-link { font-size: 11px; } .arena-title h1 { font-size: 20px; } .arena-roundbar { padding-block: 18px; gap: 16px 10px; flex-wrap: wrap; } .round-progress { order: 3; width: 100%; gap: 10px; } .round-summary { font-size: 11px; } .round-available { font-size: 11px; } .arena-stage { padding: 21px 20px 25px; border-radius: 19px; } .stage-topline { gap: 10px; } .stage-topline .eyebrow { font-size: 8px; letter-spacing: 1px; } .stage-instruction { font-size: 10px; max-width: 135px; } .timer-dial { width: 82px; height: 82px; } .round-clock { font-size: 23px; } .timer-caption { font-size: 6px; } .stage-question { padding-top: 22px; } .stage-question h2 { font-size: 32px; line-height: 1.28; } .stimulus { font-size: 13px; padding: 14px; } .arena-team { flex-direction: column; padding: 18px 13px; text-align: center; gap: 14px; border-radius: 15px; } .team-identity h2 { font-size: 17px; } .team-points strong { font-size: 45px; } .arena-team .score-actions { max-width: none; gap: 5px; } .score-button { padding: 7px; font-size: 12px; } .team-extra { flex-direction: column; gap: 14px; } .arena-extra-scores { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .arena-layout[data-team-count="3"] .arena-extra-scores { grid-template-columns: 1fr; } .arena-layout[data-team-count="3"] .team-extra { flex-direction: row; text-align: left; padding: 18px; } .arena-layout[data-team-count="3"] .team-extra .score-actions { max-width: 95px; } .team-extra .team-points { flex-direction: column; gap: 0; } .team-extra .team-points strong { font-size: 40px; } .answer-panel { padding: 16px; font-size: 12px; } .answer-heading h2 { font-size: 13px; } .answer-panel .answer-text { font-size: 19px; } .answer-panel ul { font-size: 11px; } .arena-support { display: block; min-height: 40px; } .game-status { font-size: 11px; } .control-deck { padding: 13px; gap: 13px; } .timer-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .timer-controls .answer-toggle { grid-column: 1/-1; } .control-deck .secondary-button { padding: 10px 11px; font-size: 11px; } .round-navigation { width: 100%; display: grid; grid-template-columns: 1fr 1.15fr; gap: 7px; } .round-navigation .primary-button { padding: 11px; font-size: 11px; } .arena-footer>span { max-width: 220px; font-size: 9px; } .arena-footer .text-button { font-size: 10px; } .projection-mode .stage-question h2 { font-size: 34px; } .projection-mode .timer-dial { width: 89px; height: 89px; } .projection-mode .round-clock { font-size: 25px; } .results-page { padding-top: 12px; } .results-hero { padding: 28px 22px; margin-top: 10px; } .results-hero .page-heading h1 { font-size: 34px; } .results-hero .page-description { font-size: 12px; } .results-hero>.level-badge { top: 17px; right: 17px; } .results-list { grid-template-columns: minmax(0,1fr); } .result-team { padding: 20px; } .result-points { flex-basis: auto; margin-left: auto; font-size: 36px; } .result-team>.ui-icon { display: none; } .reflection-panel { padding: 22px; } .reflection-panel h2 { font-size: 19px; } .reflection-panel ul { display: block; padding-left: 18px; } }
@media(prefers-reduced-motion:reduce) { .round-enter,.answer-enter,.score-updated { animation: none; } .timer-progress { transition: none; } }
@media(max-width:600px) {
  .arena-layout[data-team-count] .team-extra .team-points { flex-direction: column; gap: 0; }
  .arena-layout[data-team-count] .team-extra .team-points strong { font-size: 45px; }
}

/* Mystery Numbers shares Arena surfaces and Pulse controls. */
.mystery-scores { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:22px; }
.mystery-score { display:flex; justify-content:space-between; gap:12px; padding:15px; border:1px solid var(--line); border-radius:13px; background:white; border-top:4px solid var(--team-color); overflow-wrap:anywhere; }
.mystery-score[data-active="true"] { background:var(--team-soft); outline:2px solid var(--team-color); }
.mystery-score strong { white-space:nowrap; }
.mystery-page #active-team { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.mystery-layout { display:grid; grid-template-columns:minmax(280px,0.9fr) minmax(0,1.4fr); grid-template-areas:"board challenge"; gap:24px; align-items:start; }
.mystery-board-panel { grid-area:board; min-width:0; background:white; padding:24px; border:1px solid var(--line); border-radius:22px; }
.mystery-board-panel h2 { margin-top:0; }
.mystery-board-panel p { color:var(--muted); font-size:14px; }
.mystery-board { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:24px; }
.mystery-number { position:relative; min-height:64px; border:1px solid #524ca1; border-radius:12px; background:var(--navy); color:white; font-size:24px; font-weight:800; cursor:pointer; transition:transform .15s; }
.mystery-number:hover:not(:disabled) { transform:translateY(-2px); background:#4c46a0; }
.mystery-number:disabled { opacity:.55; cursor:default; }
.mystery-number[data-used="true"] { background:#e7edf2; color:#536176; border-color:#cbd4df; opacity:1; }
.mystery-used { position:absolute; right:5px; top:3px; font-size:12px; }
.mystery-challenge { grid-area:challenge; min-height:400px; }
.mystery-challenge .stage-question h2 { font-size:clamp(24px,2.5vw,40px); }
.mystery-prompt { font-size:clamp(20px,2vw,30px); line-height:1.45; color:white; }
.discussion-prompt { font-size:16px; color:#d4d9eb; line-height:1.5; }
.mystery-clock { font-size:25px; font-weight:800; color:#fcd478; font-variant-numeric:tabular-nums; }
.mystery-challenge .timer-controls { flex-wrap:wrap; }
.mystery-award { display:grid; gap:15px; border-top:1px solid #697086; margin-top:20px; padding-top:20px; }
.mystery-award .field { color:inherit; }
.mystery-award input[type="checkbox"] { width:24px; height:24px; accent-color:#7569ed; }
.mystery-award select { color:#142033; background:white; }
.mystery-page button:focus-visible { outline:3px solid #f7c65d; outline-offset:4px; }
.projection-mode .mystery-prompt { font-size:clamp(26px,3vw,48px); }
@media(max-width:950px) { .mystery-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"board" "challenge"; } .mystery-board-panel { padding:18px; } .mystery-board { margin-top:16px; } }
@media(max-width:600px) { .mystery-number { min-height:52px; font-size:20px; } .mystery-board { gap:7px; } .mystery-scores { grid-template-columns:repeat(2,minmax(0,1fr)); } .mystery-score { flex-direction:column; font-size:13px; padding:12px; gap:5px; } .mystery-challenge .timer-controls { display:flex; } .mystery-challenge { min-height:300px; } }
@media(prefers-reduced-motion:reduce) { .mystery-number { transition:none; } .mystery-number:hover:not(:disabled) { transform:none; } }