/* Shared, board-first play surface. Scoped so classroom administration stays light. */
.arena-page {
  --ink: #f1f3e9;
  --muted: #b3b9ab;
  --paper: #242722;
  --line: #464b40;
  --coral: #eea078;
  --blue: #88bfd0;
  --gold: #e8cf77;
  --dark: #aed477;
  --board-size: min(680px, calc(100dvh - 270px), calc(100vw - 454px));
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  color-scheme: dark;
}
.arena-page .header {height: 56px; padding: 0 28px; background: #1d201b; border-color: #393d33;}
.arena-page .brand {color: #f1f3e9; font-size: 24px;}
.arena-page .brandmark {background: #3d4933; color: #d4e6ad; width: 34px; height: 37px; font-size: 32px;}
.arena-page .studio {color: #aeb7a0;}
.arena-page .header nav {gap: 20px;}
.arena-page .header .text-button, .arena-page .text-link {color: #d2d8c9;}
.arena-page .avatar-button {color: #c8d6b7; border-color: #505c45;}
.arena-page main, .arena-page #portal {max-width: 1240px; padding: 10px 24px 20px; margin: auto;}
.arena-layout, .arena-page .official-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 26px;
  max-width: none;
  align-items: start;
  margin: 0;
}
.arena-page .game-space, .arena-page .official-layout .game-space {
  width: calc(var(--board-size) + 20px);
  max-width: 100%;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.arena-page .game-top {height: 20px; margin: 0 0 4px 20px; font-size: 10px; letter-spacing: 1px; color: #bac5ae;}
.arena-page .game-top > div {gap: 10px;}
.arena-page .tag {font-size: 10px; border-color: #515e44; color: #d7dfcb; padding: 3px 6px;}
.arena-page #clock, .arena-page #official-clock {font: 700 15px/1.2 Manrope, sans-serif; letter-spacing: 0; color: #e0e6d5; font-variant-numeric: tabular-nums;}
.arena-page .player, .arena-page .official-layout .player {
  margin-left: 20px;
  padding: 3px 10px;
  min-height: 50px;
  gap: 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: #2d312a;
}
.arena-page .player.top-player {margin-top: 0; margin-bottom: 7px;}
.arena-page .player.bottom-player {margin-top: 2px; margin-bottom: 0;}
.arena-page .player.to-move {background: #363f2e; border-left-color: #b5d67e;}
.arena-page .player-icon {width: 34px; height: 34px; border: 0; border-radius: 6px; box-shadow: none; font-size: 16px;}
.arena-page .player-icon.blue {background: #88bfd0; color: #193c49;}
.arena-page .player-icon.coral {background: #eea078; color: #542c20;}
.arena-page .player-identity {display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 10px; min-width: 0;}
.arena-page .player-identity > strong {font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.arena-page .player-identity > small {grid-column: 1/-1; margin: 0; font-size: 10px; color: #b3bda6;}
.move-label {font-size: 8px; letter-spacing: .6px; color: #c4e696; font-weight: 800;}
.arena-page .player-score {padding-left: 8px; min-width: 88px; max-width: 48%; flex-shrink: 0;}
.arena-page .player-score strong {font: 800 36px/1 Manrope, sans-serif; letter-spacing: -1.3px; color: #fff9dd; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;}
.arena-page .player-score strong.score-long {font-size: 25px; letter-spacing: -.5px;}
.arena-page .player-score small {font-size: 8px; line-height: 1; letter-spacing: 1px; margin-top: 2px; color: #bbc3b0;}
.arena-page .board-wrap, .arena-page .official-layout .board-wrap {grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto 16px; gap: 0 4px;}
.arena-page .board {container-type: inline-size; border: 0; border-radius: 4px; box-shadow: 0 5px 20px #0003;}
.arena-page .ranks, .arena-page .files {font-size: 10px; font-weight: 600; color: #b4bda8;}
.arena-page .cell {background: #e6e8cf; opacity: 1; overflow: visible;}
.arena-page .cell.dark {background: #587462;}
.arena-page .cell.last {background: #8c9d58;}
.arena-page .cell.selected {background: #a2b963; box-shadow: inset 0 0 0 3px #f7df91;}
.arena-page .cell.legal {background: #768f59;}
.arena-page .cell:focus-visible {z-index: 3; outline: 3px solid #ffe9a2; outline-offset: -3px;}
.arena-page .symbol {
  right: 2px; bottom: 0;
  width: 29%; height: 33%;
  display: grid; place-items: center;
  color: #fffde4;
  font: 800 clamp(17px, 4cqw, 29px)/1 system-ui, sans-serif;
  text-shadow: 0 1px 2px #172e22;
  pointer-events: none;
  z-index: 2;
}
.arena-page .cell:not(.occupied) .symbol {inset: 0; width: 100%; height: 100%; font-size: clamp(24px, 5.5cqw, 43px); color: #eff2d5; opacity: .8;}
.arena-page .cell.legal::after {position: absolute; z-index: 3; width: 68%; height: 68%; border: 3px solid #ffe49b; background: #16261926; box-shadow: none;}
.arena-page .piece, .arena-page .official-layout .piece {
  width: 72%; height: 72%;
  transform: translate(-6%, -6%);
  border-width: 2px;
  font: 800 clamp(15px, 4.5cqw, 32px)/1 Manrope, sans-serif;
  letter-spacing: -.6px;
  text-shadow: none;
  box-shadow: 0 3px 0 #17291e70, inset 0 0 0 2px #fff2;
}
.arena-page .piece.coral {background: #f1ab83; border-color: #ffd5ae; color: #4a261b;}
.arena-page .piece.blue {background: #91c6d6; border-color: #c7e6e8; color: #193d4b;}
.arena-page .piece.fraction, .arena-page .official-layout .piece.fraction {font-size: clamp(11px, 3.3cqw, 23px); letter-spacing: -.5px;}
.arena-page .piece.king::before {top: -7px; font-size: 12px; background: #353e26; color: #ffe49b;}
.arena-page .cell.available:hover .piece {transform: translate(-6%, -9%);}
.arena-page .board-tools, .arena-page .official-tools {margin: 7px 0 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap;}
.arena-page .board-tools button, .arena-page .official-tools .secondary {color: #ced7c2; border: 0; border-radius: 5px; background: #343a2e; padding: 8px 10px; font-size: 14px; min-height: 34px;}
.arena-page .board-tools button:disabled {opacity: .4;}
.arena-page .board-tools span {font-size: 11px;}
.arena-page .official-tools .secondary {font-size: 12px;}
.arena-page .primary {background: #afd279; color: #243219; font-weight: 800; font-size: 13px; border-bottom: 3px solid #769750; border-radius: 7px;}
.arena-page .primary span {color: #263d1c;}
.arena-page .secondary {background: #3a4132; border-color: #626f53; color: #e2e9d7;}
.arena-sidebar {background: #30352b; border: 1px solid #434b3a; border-radius: 10px; overflow: hidden; min-width: 0;}
.arena-heading {padding: 20px 20px 14px;}
.arena-heading .eyebrow {color: #b8cb9d; font-size: 9px; letter-spacing: 1.6px;}
.arena-heading h1 {font: 800 25px/1.2 Manrope, sans-serif; letter-spacing: -.8px; margin: 8px 0 0;}
.arena-heading p {color: #bac3ad; font-size: 12px; line-height: 1.5; margin: 8px 0 0;}
.arena-page .turn-strip {background: #39432f; border: 0; border-left: 3px solid #b3d77e; border-radius: 0; margin: 0 0 0; padding: 15px 18px; min-height: 80px; align-items: flex-start;}
.arena-page .turn-dot {margin-top: 5px; width: 8px; height: 8px;}
.arena-page .turn-strip strong {font-size: 14px; line-height: 1.4; color: #eef5e2;}
.arena-page .turn-strip small {font-size: 12px; line-height: 1.6; color: #c1cdb2; margin-top: 5px;}
.arena-page .turn-strip > span:last-child {font: 700 17px Manrope; color: #c9d8b7;}
.arena-tabs {display: flex; padding: 0 16px; background: #292e25; border-bottom: 1px solid #464f3c;}
.arena-tabs button {flex: 1; background: transparent; border: 0; padding: 15px 9px; font-size: 13px; font-weight: 700; color: #b8c2ac; border-bottom: 3px solid transparent;}
.arena-tabs button[aria-selected=true] {color: #e8f3d7; border-color: #b7d886;}
.arena-tab-panel {padding: 16px 18px;}
.arena-page .score-sheet {padding: 0; background: transparent; border: 0; border-radius: 0;}
.arena-page .score-sheet .section-label, .arena-page .score-sheet .sheet-title h2 {display: none;}
.arena-page .sheet-title {height: 20px; justify-content: flex-end;}
.arena-page .sheet-title .icon-button {margin-top: 0; color: #c8d8b6;}
.arena-page .sheet-tabs {gap: 24px; border-color: #4b553f;}
.arena-page .sheet-tabs button {font-size: 12px; color: #b4c3a3; padding-bottom: 12px;}
.arena-page .sheet-tabs button[aria-selected=true] {color: #f3f8e9;}
.arena-page .sheet-tabs button[aria-selected=true]::after {background: #b7d886;}
.arena-page .history, .arena-page .official-layout .history {height: clamp(160px, calc(100dvh - 545px), 360px);}
.arena-page .history-row {font-size: 12px; padding: 13px 0; border-color: #47513d; align-items: flex-start;}
.arena-page .history-row strong {font-size: 13px;}
.arena-page .history-row .history-side {margin-top: 5px; background: var(--coral);}
.arena-page .history-row .history-side.blue {background: var(--blue);}
.arena-page .history-row small {font-size: 14px; color: #d9e4cb; line-height: 1.7; margin-top: 6px;}
.arena-page .history-row .points {font-size: 21px; font-weight: 800; color: #e3edc2;}
.arena-page .history-row .move-no {font-size: 10px; color: #a8b69b;}
.arena-page .sheet-footer {color: #b1bda4; border-color: #4b553e; font-size: 10px;}
.arena-page .empty-history {color: #d0dcc2; padding: 25px 12px; display: block;}
.arena-page .empty-history p {color: #b6c1aa; font-size: 12px;}
.arena-page .empty-history strong {font-size: 15px;}
.arena-page .empty-history > span {margin-bottom: 12px; border-color: #6a7958; color: #b8cf9e;}
.capture-card {padding: 15px; border: 1px solid #586747; border-radius: 7px; margin-bottom: 16px; background: #262e21;}
.capture-heading, .capture-detail {display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.capture-heading {font-size: 9px; letter-spacing: 1px; font-weight: 700; color: #b8c8a6;}
.capture-side {color: #d9eabf;}
.capture-equation {display: block; margin: 16px 0 13px; font: 800 25px/1.4 Manrope, sans-serif; letter-spacing: -.8px; overflow-wrap: anywhere; color: #f6f5dc;}
.capture-description {font-size: 11px; line-height: 1.5; color: #b9c7aa;}
.capture-points {font: 800 26px/1.2 Manrope, sans-serif; max-width: 45%; overflow-wrap: anywhere; text-align: right; color: #cae49f;}
.arena-page .setup {background: transparent; border: 0; padding: 0; display: block;}
.arena-page .setup > .section-label, .arena-page .setup > h2, .arena-page .setup > div.field-label {display: none;}
.arena-page .mode-list {gap: 6px; display: flex; flex-direction: row;}
.arena-page .mode {padding: 10px 6px; flex: 1; flex-direction: column; text-align: center; background: #3b4332; border-color: #525f43;}
.arena-page .mode.active {background: #4d5e39; border-color: #a8cb75;}
.arena-page .mode strong {font-size: 10px; line-height: 1.5;}
.arena-page .mode small, .arena-page .mode .radio {display: none;}
.arena-page .mode-icon {color: #d0e2b7; font-size: 20px;}
.arena-page .field-label {font-size: 12px; color: #d4dfc9; margin: 17px 0 8px;}
.arena-page .setup select, .arena-page .join-row input {background-color: #252d20; color: #f0f4e9; border-color: #5c6c4c; font-size: 12px; padding: 11px;}
.arena-page .field-help, .arena-page .save-note {color: #b8c5aa; font-size: 11px;}
.arena-page .setup .primary {padding: 13px; margin-top: 18px;}
.arena-page .save-note {margin-top: 15px;}
.arena-page .or {color: #c4cfb8;}
.arena-page .coach-card {margin: 0; padding: 16px 18px; border: 0; border-top: 1px solid #4a533e; border-radius: 0; background: #353e2c;}
.arena-page .coach-card::after {display: none;}
.arena-page .coach-card .coach-label {color: #bccca6;}
.arena-page .coach-card h3 {font-size: 16px; margin: 10px 0; color: #e5eed7; max-width: none;}
.arena-page .coach-card h3 br {display: none;}
.arena-page .coach-card p {font-size: 12px; line-height: 1.6; color: #c2cfb1; margin: 0;}
.arena-page .coach-card button {color: #d4e6b9; border-color: #536443; margin-top: 12px; font-size: 11px;}
.arena-page .key {padding: 12px 16px; color: #b6c4a7; font-size: 10px; justify-content: center; gap: 18px;}
.arena-page .room-banner {margin: 4px 0 8px 20px; background: #374a30; flex-wrap: wrap;}
.arena-page .room-banner small, .arena-page .room-banner span {color: #c2d6b1;}
.arena-page .room-banner strong {color: #edf5e2;}
.arena-page dialog {background: #303a28; border-color: #657752; color: #eef4e4; color-scheme: dark;}
.arena-page dialog p, .arena-page dialog li, .arena-page dialog .muted {color: #c8d5b9;}
.arena-page dialog a {color: #d5edaa;}
.arena-page dialog h2 {color: #f3f3d8;}
.arena-page dialog h2.capture-question, .arena-page #portal-dialog h2.capture-question {font-size: clamp(32px, 6vw, 44px); line-height: 1.3;}
.arena-page dialog input, .arena-page .portal-form input {background: #20291a !important; color: #fffbe4 !important; border-color: #7d9165 !important;}
.arena-page .setting-row {border-color: #526043;}
.arena-page .result-score {background: #26341e;}
.arena-page .result-score small {color: #c5d4b3;}
.arena-page .result-score strong {font-size: 38px;}
.arena-page .official-note {color: #b9c6ab; font-size: 12px; line-height: 1.7; margin: 16px 0 4px;}
.arena-page .portal-card {background: transparent; border: 0; padding: 18px; border-radius: 0;}
.arena-page .portal-card h2 {font-size: 18px; color: #e6eddb;}
.arena-page .portal-card h3 {color: #e2ecd3;}
.arena-page .portal-card p {color: #bdcbae;}
.arena-page .back-link {font-size: 11px; color: #d0dfbc; margin-bottom: 9px;}
.arena-page .connection-label {margin: 10px 0 0 20px; font-size: 10px; color: #b0c697;}
.arena-page .arena-sidebar .connection-label {margin: 0; padding: 0 18px 15px;}
.arena-page .official-tools .primary {font-size: 12px; padding: 8px 12px; min-height: 34px;}
.arena-page .official-layout .portal-card + .portal-card {border-top: 1px solid #4b563e; margin-top: 0 !important;}
@media (min-width: 900px) and (max-height: 740px) {
  .arena-heading {padding-top: 14px; padding-bottom: 12px;}
  .arena-heading h1 {font-size: 22px;}
  .arena-page .turn-strip {min-height: 72px; padding: 12px 15px;}
  .arena-page .coach-card {display: none;}
}
@media (max-width: 899px) {
  .arena-page {--board-size: min(620px, calc(100vw - 56px));}
  .arena-page .header {padding: 0 18px; height: 60px;}
  .arena-page main, .arena-page #portal {padding: 14px 18px 24px;}
  .arena-layout, .arena-page .official-layout {grid-template-columns: minmax(0, 1fr); gap: 20px;}
  .arena-sidebar {width: 100%; max-width: 640px; justify-self: center;}
  .arena-page .history, .arena-page .official-layout .history {height: 240px;}
  .arena-page .coach-card {display: block;}
  .arena-page .player-score strong {font-size: 38px;}
}
@media (max-width: 480px) {
  .arena-page {--board-size: calc(100vw - 36px);}
  .arena-page .header {padding: 0 12px; height: 56px;}
  .arena-page .brand {font-size: 20px; gap: 7px;}
  .arena-page .studio {font-size: 6px; letter-spacing: 4px; margin-top: 5px;}
  .arena-page .brandmark {width: 29px; height: 31px; font-size: 28px; border-radius: 8px;}
  .arena-page .brandmark > span {font-size: 14px; top: 6px; right: 5px;}
  .arena-page .header nav {gap: 10px;}
  .arena-page .header .text-button, .arena-page .header .text-link {font-size: 10px;}
  .arena-page .header #account-menu {max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .arena-page .header .text-button span {display: none;}
  .arena-page .avatar-button {width: 29px; height: 29px;}
  .arena-page main, .arena-page #portal {padding: 10px 8px 20px;}
  .arena-page .game-space, .arena-page .official-layout .game-space {width: 100%; padding: 0;}
  .arena-page .game-top {margin-left: 20px; font-size: 9px;}
  .arena-page .tag {font-size: 9px;}
  .arena-page .player {padding: 7px; min-height: 56px;}
  .arena-page .player-identity {gap: 3px 7px;}
  .arena-page .player-identity > strong {font-size: 12px;}
  .arena-page .player-identity > small {font-size: 10px;}
  .arena-page .player-score strong {font-size: 34px;}
  .arena-page .player-score {min-width: 65px;}
  .arena-page .player-score strong.score-long {font-size: 23px;}
  .arena-page .board-tools button {padding: 9px 7px; min-height: 40px;}
  .arena-page .board-tools span {font-size: 10px;}
  .arena-page .symbol {font-size: clamp(16px, 4.4cqw, 20px);}
  .arena-page .cell:not(.occupied) .symbol {font-size: 27px;}
  .arena-page .piece, .arena-page .official-layout .piece {font-size: clamp(14px, 4.9cqw, 22px);}
  .arena-page .piece.fraction, .arena-page .official-layout .piece.fraction {font-size: clamp(10px, 3.4cqw, 15px);}
  .arena-page .move-label {font-size: 7px;}
  .arena-page #undo span, .arena-page #hint span, .arena-page #flip span {font-size: 0; margin-left: 3px;}
  .arena-page #undo span::after {content: 'Undo'; font-size: 10px;}
  .arena-page #hint span::after {content: 'Hint'; font-size: 10px;}
  .arena-page #flip span::after {content: 'Flip'; font-size: 10px;}
  .arena-page .capture-equation {font-size: 27px;}
  .arena-page .official-tools {justify-content: flex-end;}
}