@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#17181b;--panel:#202226;--line:#41444a;--text:#fff;--muted:#c2c4ca;--green:#fff;--orange:#e5e7ec;--grid-line:#888b93;--heading:'Space Grotesk','Trebuchet MS',sans-serif;--body:'DM Sans','Segoe UI',sans-serif;--board-size:min(640px,calc(100dvh - 220px),calc(100vw - 390px))}
*{box-sizing:border-box}html{height:100%;overflow:clip;overscroll-behavior:none}body{height:100dvh;margin:0;overflow:clip;background:var(--bg);color:var(--text);font:14px var(--body);text-shadow:0 0 12px #ffffff24}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid white;outline-offset:4px}::selection{background:#fff;color:#17181b;text-shadow:none}[hidden]{display:none!important}a{color:var(--text)}
.topbar{height:60px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{color:#fff;text-decoration:none;font:600 12px var(--heading);letter-spacing:1.3px}.mode-button,.secondary-button,.review-tools button{color:#fff;background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px 14px}.mode-button:hover,.secondary-button:hover,.review-tools button:hover{background:#ffffff0c}.text-button{background:none;border:0;color:var(--muted);padding:10px 4px;font-size:12px;text-decoration:underline;text-underline-offset:5px}.text-button:hover{color:#fff}
.home-screen{height:calc(100dvh - 60px);width:min(430px,calc(100% - 40px));margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:24px 0 40px}.home-screen h1{font:500 clamp(38px,6vw,64px)/1.02 var(--heading);letter-spacing:-.04em;margin:0 0 20px;text-shadow:0 0 28px #ffffff30}.home-screen h1 span{display:block}.home-screen>p{font-size:13px;color:var(--muted);margin:0 0 30px;line-height:1.6}.mode-choices{display:grid;gap:12px}.mode-choices button{min-height:70px;border:1px solid #64666e;border-radius:10px;padding:15px 22px;text-align:left;background:#222428;color:white;font-weight:600;text-shadow:0 0 12px #ffffff30;transition:background .18s,border-color .18s,transform .18s}.mode-choices button span{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:5px}.mode-choices button:hover:not(:disabled){background:#303237;border-color:#fff;transform:translateX(3px)}.home-screen #home-error{margin:10px 0 0;color:#fff}.home-screen>.text-button{align-self:flex-start;margin-top:14px}
.game-app main{height:calc(100dvh - 60px);max-width:1140px;margin:auto;padding:20px 22px 0;display:flex;flex-direction:column;justify-content:center}.game-layout{display:grid;grid-template-columns:var(--board-size) minmax(0,250px);gap:40px;justify-content:center;align-items:center}.play-area{min-width:0}.board-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px;font-size:13px}#move-count{font-size:10px;letter-spacing:1px;color:var(--muted);white-space:nowrap}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:var(--board-size);height:var(--board-size);border:3px solid var(--grid-line);position:relative;background:var(--bg)}.small-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));position:relative;min-width:0;min-height:0;background:#191a1e;transition:background .18s}.small-board:not(:nth-child(3n)){border-right:3px solid var(--grid-line)}.small-board:nth-child(-n+6){border-bottom:3px solid var(--grid-line)}.small-board.available{background:#303237}.cell{background:none;border:0;padding:0;min-width:0;min-height:0;position:relative}.cell:not(:nth-child(3n)){border-right:1px solid #777a83}.cell:nth-child(-n+6){border-bottom:1px solid #777a83}.cell:disabled{opacity:1;cursor:default}.cell:not(:disabled):hover{background:#ffffff20}.cell:focus-visible{outline-offset:-4px;z-index:1}.mark-x::before,.mark-x::after,.x-symbol::before,.x-symbol::after{content:'';position:absolute;width:62%;height:3px;left:19%;top:calc(50% - 1.5px);background:#fff;border-radius:2px;transform:rotate(45deg);box-shadow:0 0 9px #ffffff48}.mark-x::after,.x-symbol::after{transform:rotate(-45deg)}.mark-o::before,.o-symbol::before{content:'';position:absolute;width:56%;height:56%;left:22%;top:22%;border:3px solid #fff;border-radius:50%;filter:drop-shadow(0 0 4px #ffffff48)}.last-move{background:#ffffff0d}.board-result{display:none}.finished .cell{visibility:hidden}.finished .board-result{display:grid;place-items:center;position:absolute;inset:0;pointer-events:none;font:500 calc(var(--board-size)/5) var(--heading);text-shadow:0 0 18px #ffffff50}.finished{background:#222428}.board-footer{display:flex;gap:8px;align-items:center;min-height:36px;color:var(--muted);font-size:11px}.hint-dot{width:5px;height:5px;background:white;border-radius:50%;flex:none}.win-line{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}.win-line line{stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 1px #fff);animation:winning-stroke .75s cubic-bezier(.16,1,.3,1) both}@keyframes winning-stroke{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
aside{min-width:0}.players{display:grid;gap:8px}.player{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:13px;background:var(--panel)}.player.active{border-color:#fff;box-shadow:0 3px 18px #ffffff08}.player-symbol{position:relative;width:30px;height:30px;flex:none}.player h2{font-size:13px;margin:0 0 4px;font-weight:500}.player p{color:var(--muted);font-size:11px;margin:0}.turn-dot{width:5px;height:5px;border-radius:50%;background:#fff;margin-left:auto;opacity:0}.active .turn-dot{opacity:1}.status-panel{padding:20px 0 15px;border-bottom:1px solid var(--line)}.eyebrow{display:none}.status-panel p{font-size:13px;line-height:1.65;margin:0 0 12px;color:var(--muted)}.mini-map{display:grid;grid-template-columns:repeat(3,12px);gap:3px;margin-bottom:8px}.mini-map span{width:12px;height:12px;background:#42444a;text-align:center;font-size:9px}.mini-map .selected{background:#fff;color:#17181b}#target-label{font-size:11px}.restart{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:44px;border:1px solid #fff;border-radius:8px;background:#fff;color:#17181b;font-weight:600;margin:16px 0 6px;text-shadow:none}.restart:hover:not(:disabled){background:#dfe1e6}.rules-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-top:1px solid var(--line);color:var(--muted);font-size:12px;padding:13px 0;margin-top:5px}.review-tools{display:flex;justify-content:space-between;gap:7px;align-items:center;margin:12px 0 4px}.review-tools button{font-size:11px;padding:8px}.review-tools span{font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted);white-space:nowrap}footer{display:flex;justify-content:space-between;gap:16px;font-size:9px;color:var(--muted);border-top:1px solid var(--line);padding:13px 0;margin-top:12px}footer span{min-width:0}
dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;background:#222428;color:white;border:1px solid #5c5e66;border-radius:16px;overflow:clip;overscroll-behavior:none;box-shadow:0 24px 80px #0008}dialog::backdrop{background:#0b0c10cc;backdrop-filter:blur(8px)}dialog h2{font:500 clamp(24px,4vw,32px)/1.15 var(--heading);letter-spacing:-.03em;margin:0 0 14px;text-shadow:0 0 18px #ffffff28}dialog p{font-size:13px;line-height:1.6;color:var(--muted);margin:12px 0}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.dialog-heading h2{margin:0}.dialog-heading button{background:none;border:1px solid var(--line);border-radius:6px;color:white;width:32px;height:32px;font-size:22px;flex:none}.rules ol{font-size:13px;line-height:1.6;color:var(--muted);padding-left:20px}.rules li{margin-bottom:12px}.rules strong{color:white;font-weight:500}.difficulty-choices{gap:8px}.difficulty-choices button{min-height:60px;padding:12px 16px}#model-status{font-size:11px;overflow-wrap:anywhere;margin-bottom:0}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.result-actions .restart{margin:0}.result-actions .secondary-button{font-size:13px}.loading-dots{display:flex;gap:8px;margin:3px 0 25px}.loading-dots i{width:8px;height:8px;border-radius:50%;background:white;animation:waiting-pulse 1.35s ease-in-out infinite}.loading-dots i:nth-child(2){animation-delay:.15s}.loading-dots i:nth-child(3){animation-delay:.3s}@keyframes waiting-pulse{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-5px)}}.room-tools{margin:22px 0 12px;min-width:0}.room-tools label{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin:14px 0 7px}.room-tools>div{display:flex;gap:6px}.room-tools input{width:100%;min-width:0;background:#17181b;color:white;border:1px solid var(--line);border-radius:7px;padding:11px;font-size:12px}.room-tools button{background:#fff;color:#17181b;border:0;border-radius:7px;padding:10px;font-size:12px}#room-state{font-size:12px}.welcome-dialog{width:min(440px,calc(100vw - 32px))}.welcome-symbol{display:none}.welcome-dialog .restart{margin-bottom:0}.welcome-note{font-size:12px}.admin-link,.export-button{color:white;background:none;border:0;font-size:12px}
@media(max-width:700px) and (orientation:portrait),(max-width:599px){
:root{--board-size:min(calc(100vw - 36px),calc(100dvh - 350px),540px)}.topbar{height:50px;margin:0 18px}.brand{font-size:10px;letter-spacing:1px}.mode-button{font-size:11px;padding:8px 10px}.home-screen{height:calc(100dvh - 50px)}.game-app main{height:calc(100dvh - 50px);padding:12px 18px 0}.game-layout{grid-template-columns:minmax(0,1fr);gap:6px}.play-area{width:var(--board-size);justify-self:center}.board-heading{font-size:12px;margin-bottom:9px}.board-footer{font-size:10px;min-height:29px}aside{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;align-items:center}.players{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px}.player{padding:8px;gap:8px}.player-symbol{width:24px;height:24px}.player h2{font-size:12px}.player p{font-size:10px}.status-panel{padding:4px 0;border:0}.status-panel p,.mini-map{display:none}#target-label{font-size:10px}.restart{margin:0;min-height:38px;font-size:12px}.rules-trigger{margin:0;padding:8px 0;font-size:11px;grid-column:2}.review-tools{grid-column:1/-1;margin:3px 0}.review-tools button{padding:7px 10px}.text-button{font-size:11px;padding:7px 0}footer{padding:9px 0;margin-top:7px;font-size:8px}footer span:last-child{display:none}.home-screen .text-button{padding:10px 0}
}
@media(max-height:650px){.home-screen{padding:20px 0}.home-screen h1{font-size:38px;margin-bottom:12px}.home-screen>p{margin-bottom:18px}.mode-choices button{min-height:57px;padding:11px 17px}.home-screen .mode-choices{gap:9px}dialog{padding:20px}dialog p{font-size:12px;margin:10px 0}.difficulty-choices button{min-height:50px;padding:9px 14px}.difficulty-choices button span{font-size:10px;margin-top:3px}.dialog-heading h2{font-size:23px}.dialog-heading{margin-bottom:8px}.loading-dots{margin-bottom:16px}}
@media(min-width:600px) and (max-height:500px){:root{--board-size:min(calc(100dvh - 110px),calc(100vw - 350px))}.topbar{height:42px}.game-app main{height:calc(100dvh - 42px);padding:8px 20px 0}.game-layout{gap:25px;grid-template-columns:var(--board-size) minmax(0,240px)}.players{grid-template-columns:1fr 1fr;gap:6px}.player{padding:7px;gap:6px}.player-symbol{width:21px;height:21px}.player h2{font-size:11px}.player p{font-size:9px}.status-panel{padding:9px 0}.status-panel p{font-size:11px;margin-bottom:7px}.mini-map{display:none}.board-heading{margin-bottom:8px;font-size:11px}.board-footer{min-height:26px;font-size:10px}footer{display:none}.restart{min-height:34px;margin:9px 0 0;font-size:12px}.rules-trigger{padding:8px 0;margin:0;font-size:11px}.text-button{padding:7px 0}.review-tools{margin:7px 0}.home-screen{height:calc(100dvh - 42px);width:min(620px,calc(100vw - 50px));display:grid;grid-template-columns:1fr 1fr;align-content:center;column-gap:30px}.home-screen h1{grid-column:1;grid-row:1;font-size:42px}.home-screen>p{grid-column:1;grid-row:2;margin:0}.home-screen .mode-choices{grid-column:2;grid-row:1/4}.home-screen #home-error{grid-row:3}.home-screen>.text-button{grid-column:1;grid-row:4;justify-self:start;margin:8px 0 0}.setup-dialog{width:min(520px,calc(100vw - 32px));padding:16px 22px}.setup-dialog>p{margin:6px 0;font-size:10px}.difficulty-choices{gap:6px}.difficulty-choices button{min-height:39px;padding:8px 14px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.difficulty-choices button span{margin:0}.setup-dialog .dialog-heading{margin-bottom:4px}.welcome-dialog{width:min(600px,calc(100vw - 32px));padding:20px}.welcome-dialog h2{margin:0 0 10px}.welcome-dialog p{margin:8px 0}.welcome-dialog .restart{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Existing local admin panels. */
.admin-main { max-width: 900px; padding: 24px 28px; margin: 0 auto; height: calc(100dvh - 60px); display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.admin-main h1 { font: 500 clamp(28px,4vw,44px)/1.1 var(--heading); margin: 0; letter-spacing: -1.5px; }
.admin-intro { color: var(--muted); margin: 0; font-size: 13px; }
.admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.admin-stats > div { background: var(--panel); padding: 16px; border-radius: 6px; display: flex; flex-direction: column; gap: 5px; }
.admin-stats strong { font: 500 28px var(--heading); color: var(--green); }
.admin-stats span { color: var(--muted); font-size: 11px; }
.admin-import { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.admin-import h2 { font: 500 22px var(--heading); margin: 9px 0; }
.admin-import > p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.admin-import .restart { max-width: 320px; margin: 16px 0 12px; }
.admin-import #import-status { color: var(--text); min-height: 40px; font-size: 12px; overflow-wrap: anywhere; }
.admin-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-bottom p { font-size: 11px; color: var(--muted); margin: 0; }
.admin-bottom code { font-size: 10px; color: var(--text); display: block; margin-top: 6px; }
.admin-bottom a { color: var(--green); font-size: 12px; flex-shrink: 0; text-decoration: none; }
@media (max-width: 599px) {
  .welcome-dialog { padding: 24px; }
  .welcome-symbol { margin-bottom: 18px; font-size: 40px; }
  .welcome-dialog p { font-size: 13px; }
  .admin-main { padding: 14px 16px; height: calc(100dvh - 46px); gap: 11px; }
  .admin-main h1 { font-size: 28px; }
  .admin-stats { gap: 6px; }
  .admin-stats > div { padding: 10px; }
  .admin-stats strong { font-size: 24px; }
  .admin-stats span { font-size: 9px; }
  .admin-import { padding: 15px; }
  .admin-import > p { font-size: 12px; }
  .admin-bottom { gap: 12px; }
  .admin-bottom a { font-size: 10px; }
}
@media (max-height: 650px) {
  .setup-dialog { padding: 16px; }
  .setup-dialog form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .setup-dialog form > label { grid-column: 1; grid-row: 1; }
  .setup-dialog #game-mode { grid-column: 1; grid-row: 2; }
  .setup-dialog #bot-settings { display: contents; }
  .setup-dialog #bot-settings label { grid-column: 2; grid-row: 1; }
  .setup-dialog #bot-strength { grid-column: 2; grid-row: 2; }
  .setup-dialog #model-status, .setup-dialog #setup-help, .setup-dialog #start-game { grid-column: 1 / -1; }
  .setup-dialog label { margin-top: 10px; }
  .setup-dialog p { font-size: 11px; margin: 6px 0; }
  .setup-dialog .restart { margin: 8px 0; min-height: 36px; }
  .welcome-dialog { padding: 22px; }
  .welcome-symbol { font-size: 32px; margin-bottom: 12px; }
  .welcome-dialog h2 { margin: 8px 0 12px; font-size: 30px; }
  .welcome-dialog p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
  .welcome-dialog .restart { margin-top: 16px; min-height: 40px; }
  .admin-main { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .admin-main h1 { font-size: 28px; }
  .admin-intro { font-size: 11px; }
  .admin-stats > div { padding: 10px; }
  .admin-stats strong { font-size: 22px; }
  .admin-import { padding: 14px; }
  .admin-import h2 { font-size: 20px; }
  .admin-import > p { font-size: 11px; }
  .admin-import .restart { min-height: 36px; margin: 10px 0; }
  .admin-import #import-status { min-height: 32px; font-size: 11px; }
}
@media (max-height: 450px) {
  .setup-dialog .training-note, .setup-dialog .logging-note { display: none; }
  .setup-dialog .dialog-heading h2 { font-size: 20px; }
  .setup-dialog .dialog-heading button { height: 30px; width: 30px; }
  .admin-page .topbar { height: 40px; }
  .admin-main { height: calc(100dvh - 40px); gap: 8px; }
  .admin-main > .eyebrow, .admin-intro { display: none; }
  .admin-stats > div { padding: 8px 12px; }
  .admin-stats strong { font-size: 20px; }
  .admin-import { padding: 12px; }
  .admin-import h2 { font-size: 18px; margin: 5px 0; }
  .admin-import .restart { margin: 8px 0; }
}
/* Local training lab: switch panels instead of adding page height. */
.training-admin .admin-main { max-width: 960px; gap: 14px; }
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.admin-tabs button { flex: 1; border: 0; border-radius: 4px; background: transparent; color: var(--muted); padding: 9px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.admin-tabs button[aria-selected=true] { color: var(--green); background: var(--panel); }
.training-panel, .results-panel { padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.transfer-panel { padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.transfer-panel h2 { font: 500 28px var(--heading); margin: 12px 0; }
.transfer-panel p { font-size: 12px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.transfer-actions { display: flex; gap: 10px; }
.transfer-actions .restart { flex: 1; margin: 10px 0; }
@media (max-width:599px), (max-height:650px) {
  .transfer-panel { padding: 14px; }.transfer-panel h2 { font-size: 22px; margin: 8px 0; }
  .transfer-panel p { font-size: 11px; }.transfer-actions .restart { font-size: 11px; min-height: 36px; }
}
@media (max-height:450px) {
  .transfer-panel { padding: 12px; }.transfer-panel p { font-size: 10px; margin: 6px 0; }
  .transfer-panel h2 { font-size: 20px; margin: 6px 0; }.transfer-actions .restart { margin: 6px 0; min-height: 32px; }
}
.profile-field { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.profile-field select { flex: 1; }
.training-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.training-fields label { display: grid; gap: 5px; font-size: 11px; color: var(--muted); }
.training-panel input[type=number], .training-panel select { width: 100%; min-width: 0; min-height: 36px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font: inherit; font-size: 12px; }
.training-panel input:focus-visible, .training-panel select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.resume-field { display: flex; align-items: center; gap: 8px; font-size: 11px; margin: 16px 0; color: var(--muted); }
.resume-field input { accent-color: var(--green); }
.training-progress > div { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.training-progress progress { width: 100%; height: 6px; display: block; accent-color: var(--green); }
#training-message { font-size: 12px; min-height: 36px; line-height: 1.5; margin: 12px 0; overflow-wrap: anywhere; }
.training-actions { display: flex; gap: 10px; }
.training-actions .restart { flex: 1; margin: 0; }
.training-actions > button:not(.restart) { flex: 1; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 8px; background: var(--bg); cursor: pointer; font-size: 12px; }
.training-actions button:disabled { opacity: .4; cursor: default; }
#data-panel .admin-import { margin-top: 12px; }
.results-panel p { color: var(--muted); font-size: 12px; line-height: 1.5; }
#active-model { overflow-wrap: anywhere; }
.metric-grid,.arena-grid { display: grid; gap: 10px; margin: 16px 0; }
.metric-grid { grid-template-columns: 1fr 1fr; }.arena-grid { grid-template-columns: repeat(3,1fr); }
.metric-grid > div,.arena-grid > div { padding: 12px; background: var(--bg); border-radius: 5px; }
.metric-grid span,.arena-grid span { color: var(--muted); font-size: 10px; display: block; margin-bottom: 8px; }
.metric-grid strong,.arena-grid strong { color: var(--green); font: 500 18px var(--heading); }
.arena-grid strong { font-size: 13px; }
.training-admin #training-note { max-width: 70%; font-size: 10px; line-height: 1.45; }
@media (max-width: 599px) {
  .training-admin .admin-main { gap: 10px; }
  .training-panel,.results-panel { padding: 14px; }
  .training-fields { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .training-fields label { font-size: 10px; gap: 3px; }
  .profile-field { margin-bottom: 12px; font-size: 10px; }
  .training-fields input[type=number],.profile-field select { min-height: 30px; font-size: 11px; }
  .resume-field { margin: 10px 0; font-size: 10px; }
  #training-message { font-size: 11px; margin: 8px 0; min-height: 32px; }
  .training-actions button { min-height: 36px; font-size: 10px!important; }
  .arena-grid { grid-template-columns: 1fr; gap: 6px; }
  .arena-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 10px; }
  .arena-grid span { margin: 0; }
}
@media (max-height: 650px) {
  .training-admin .admin-main { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .training-panel,.results-panel { padding: 12px; }
  .profile-field { margin-bottom: 8px; }
  .training-fields { gap: 6px 10px; }
  .training-panel input[type=number], .training-panel select { min-height: 28px; padding: 4px 6px; }
  .resume-field { margin: 8px 0; }
  #training-message { margin: 7px 0; min-height: 30px; font-size: 11px; }
  .training-actions button { min-height: 34px; }
  .admin-tabs { padding-bottom: 5px; }.admin-tabs button { padding: 6px 8px; font-size: 11px; }
  .metric-grid,.arena-grid { margin: 10px 0; }
  .metric-grid > div,.arena-grid > div { padding: 8px; }
  .results-panel p { font-size: 11px; margin: 8px 0; }
}
@media (min-width: 600px) and (max-height: 450px) {
  .training-panel form { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 8px 16px; }
  .profile-field { grid-column: 1 / -1; margin: 0; }
  .training-fields { grid-column: 1; grid-row: 2 / 5; }
  .training-fields label { font-size: 9px; }
  .resume-field { grid-column: 2; grid-row: 2; margin: 0; font-size: 10px; }
  .training-progress { grid-column: 2; grid-row: 3; }
  #training-message { grid-column: 2; grid-row: 4; margin: 0; font-size: 10px; }
  .training-actions { grid-column: 1 / -1; grid-row: 5; }
  #data-panel { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 12px; }
  #data-panel .admin-stats { grid-template-columns: 1fr; gap: 6px; }
  #data-panel .admin-stats > div { flex-direction: row; align-items: center; gap: 8px; }
  #data-panel .admin-import { margin: 0; }
  .results-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .results-panel > .eyebrow, #active-model { grid-column: 1 / -1; margin: 0; }
  .metric-grid { grid-column: 1; grid-row: 3; margin: 0; }
  .arena-grid { grid-column: 2; grid-row: 3 / 5; grid-template-columns: 1fr; gap: 4px; margin: 0; }
  .arena-grid > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; }
  .arena-grid span { margin: 0; }
  #model-promotion { grid-column: 1; grid-row: 4; margin: 0; font-size: 10px; }
  #evaluate-model { grid-column: 1; grid-row: 5; margin: 0; min-height: 32px; }
  .results-note { grid-column: 2; grid-row: 5; margin: 0!important; font-size: 10px!important; }
}
@media (max-width: 599px) and (max-height: 650px) {
  .results-panel p { font-size: 10px; line-height: 1.4; margin: 6px 0; }
  .results-panel .arena-grid > div { padding: 7px 8px; }
  .results-panel .metric-grid span,.results-panel .arena-grid span { font-size: 9px; }
  .results-panel .metric-grid strong { font-size: 16px; }
  .training-admin #training-note { font-size: 9px; }
  #training-message { height: 42px; overflow: clip; line-height: 14px; font-size: 10px; }
}


.game-layout, .game-app footer{flex-shrink:0}

@media(min-width:701px) and (max-height:700px){
.game-app .players{grid-template-columns:1fr 1fr;gap:6px}.game-app .player{padding:8px;gap:6px}.game-app .player-symbol{width:22px;height:22px}.game-app .player h2{font-size:11px}.game-app .player p{font-size:9px}.game-app .mini-map{display:none}.game-app .status-panel{padding:12px 0}.game-app .status-panel p{font-size:12px;margin-bottom:8px}.game-app .restart{margin-top:10px}.game-app .review-tools{margin-top:8px}
}

/* Keep functional game labels readable on small screens. */
.game-app .brand,.game-app #move-count,.game-app .board-footer,.game-app .player p,.game-app #target-label{font-size:11px}
.game-app footer{font-size:10px}

.mode-choices > [data-local-only]{display:contents}

/* Clear macro grid and geometric player marks. */
:root{--x-color:#ff5c6c;--o-color:#579dff}
.board{border-width:6px}
.small-board:not(:nth-child(3n)){border-right-width:6px}
.small-board:nth-child(-n+6){border-bottom-width:6px}
.mark-x::before,.mark-x::after,.x-symbol::before,.x-symbol::after{background:var(--x-color);box-shadow:0 0 9px #ff5c6c55}
.mark-o::before,.o-symbol::before{border-color:var(--o-color);filter:drop-shadow(0 0 4px #579dff55)}
.board-result.x-symbol::before,.board-result.x-symbol::after{height:clamp(4px,calc(var(--board-size)/75),9px);top:50%;margin-top:calc(clamp(4px,calc(var(--board-size)/75),9px)/-2)}
.board-result.o-symbol::before{border-width:clamp(4px,calc(var(--board-size)/75),9px)}
.mini-map span{position:relative}.mini-map .x-symbol::before,.mini-map .x-symbol::after{height:2px;top:calc(50% - 1px)}.mini-map .o-symbol::before{border-width:2px}
.header-rules{width:auto;gap:12px;border:0;margin:0;padding:10px 0;color:var(--text);flex-shrink:0;font-size:12px}
.header-rules span{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-weight:600}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.waiting-dialog .loading-dots{justify-content:center;margin:24px 0}
dialog{opacity:0;transform:translateY(12px) scale(.98);transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1),display .22s allow-discrete,overlay .22s allow-discrete}
dialog[open]{opacity:1;transform:translateY(0) scale(1)}
dialog::backdrop{opacity:0;transition:opacity .22s ease,display .22s allow-discrete,overlay .22s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(12px) scale(.98)}dialog[open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog,dialog::backdrop{transition:none!important;transform:none!important}}
@media(max-width:400px){.header-rules{font-size:11px;gap:6px}.brand{letter-spacing:.4px}}

.win-line[data-winner="X"] line{stroke:var(--x-color);filter:drop-shadow(0 0 1px var(--x-color))}
.win-line[data-winner="O"] line{stroke:var(--o-color);filter:drop-shadow(0 0 1px var(--o-color))}
.mini-map{grid-template-columns:repeat(3,16px);gap:4px}
.mini-map span{width:16px;height:16px;display:grid;place-items:center;overflow:hidden}
.mini-map .mini-x{color:var(--x-color)}.mini-map .mini-o{color:var(--o-color)}
.mini-map svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}