/* Tile rendering, game metrics, dialogs, and themes. Layout lives in layout.css. */
:root { color-scheme:dark;--bg:#45535a;--panel:#202831;--line:#53636d;--muted:#a9b7c0;--ink:#f3f3e9;--accent:#91b4c3;--selected:#db388a;--orange:#efa94c }
* { box-sizing:border-box }
button, select, input { font:inherit }
button, select { cursor:pointer }
button { border:0;border-radius:5px;background:transparent;color:inherit;padding:8px 12px }
button:hover { background:#ffffff10 }
button:disabled { opacity:.35;cursor:default }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, svg g:focus-visible { outline:2px solid #e6aacd;outline-offset:3px }
a { color:#a9d1e2 }
select { background:#26343e;color:var(--ink);border:1px solid #607583;border-radius:5px;padding:8px 28px 8px 11px }
input { accent-color:var(--selected) }
.primary { background:#8fb3c2;color:#15252d;font-weight:600 }
.primary:hover { background:#afcedb }
.secondary { border:1px solid #667b89 }
.icon-button { font-size:22px;padding:5px 8px }
.turn { display:flex;align-items:center;gap:9px }
.turn i, .side-disc { display:inline-block;width:13px;height:13px;background:#f6f2dc;border-radius:50%;border:1px solid #a8b0b4;flex-shrink:0 }
.turn i.black, .side-disc.black { background:#07090a }
.turn strong { font-weight:500 }
.turn>span, .rule-label { font-size:12px;color:#b9c6cd }
.black-player { background:#303439 }
.white-player { background:#f1edda;color:#34404a }
.reserve-tile { position:relative;padding:0;aspect-ratio:.86;min-width:0;filter:drop-shadow(1px 3px 1px #0006) }
.reserve-tile svg { display:block;width:100%;height:100%;overflow:visible }
.reserve-tile:disabled { opacity:.58 }
.reserve-tile.spent { visibility:hidden }
.section-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px }
h2 { font-size:17px;margin:0;font-weight:600 }
.section-heading>span { font-size:11px;color:var(--muted) }
#piece-notes:empty { display:none }
#piece-notes { font-size:13px;margin-top:15px;border-top:1px solid #41515a;padding-top:13px }
#piece-notes strong { font-size:14px;font-weight:500 }
#piece-notes p { margin:6px 0;color:var(--muted) }
.copy-control { font-size:12px;width:100%;margin-top:8px }
.history-panel { margin-top:16px;font-size:13px }
.history-panel summary { cursor:pointer;color:#c4d0d7 }
.history-panel summary span { float:right;color:var(--muted) }
#history-list { max-height:225px;overflow:auto;padding-top:8px }
.history-move { display:block;text-align:left;width:100%;font-size:12px;border-radius:3px;padding:6px 8px;color:#cbd6dd }
.history-move.current { background:#41616e;color:#fff }
.stats-panel { display:grid;gap:13px }
.stat-card { background:var(--panel);border:1px solid #586b75;border-radius:8px;padding:15px }
.stat-heading { display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:13px }
.stat-heading h2 { font-size:15px }
.stat-heading span { font-size:11px;color:#afd1df }
.race-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.race-grid>div { background:#2c3b43;border-radius:5px;padding:10px }
.race-grid span { font-size:12px;color:var(--muted);display:block }
.race-grid strong { font-size:30px;display:block;line-height:1.3;font-weight:500;color:#d7e9ef }
.race-grid small { font-size:11px;color:#b3c3cd;display:block }
.stat-note { font-size:11px;margin:10px 0 0;color:var(--muted) }
.qual-row { display:grid;grid-template-columns:45px 1fr;gap:8px;padding:8px 0;font-size:12px;align-items:start }
.qual-row strong { font-weight:500;text-align:right;color:#c5deea }
.qual-row summary { cursor:pointer }
.qual-reason { font-size:12px;color:var(--muted);margin:5px 0 0 }
.stats-table { border-collapse:collapse;width:100%;font-size:12px }
.stats-table th { font-weight:400;text-align:left;color:var(--muted) }
.stats-table td { text-align:center;min-width:37px }
.stats-table th, .stats-table td { padding:5px 2px }
.stats-table thead th { text-align:center;color:#d1dfe6;font-size:11px }
.stats-table tr:nth-child(even) { background:#ffffff03 }
.stat-details { font-size:12px;color:#bbcbd3;margin-top:9px }
.stat-details summary { cursor:pointer }
.stat-details p { font-size:12px;line-height:1.6;color:var(--muted) }
.stat-details ol { padding-left:20px }
.stat-details button { font-size:12px;border:1px solid #668694;margin-top:5px }
.tile-group, .target { cursor:pointer }
.tile-group:hover .face { stroke:#e2a1c7;stroke-width:2.5 }
.piece-mark { pointer-events:none }
.selected-outline { fill:none;stroke:var(--selected);stroke-width:3 }
.target polygon { stroke:var(--selected);stroke-width:2;stroke-dasharray:4 4;fill:#d9358810 }
.target circle { fill:var(--selected) }
.target.lift-target polygon { stroke:#edb66c }
.target.lift-target circle { fill:#edb66c }
.target:hover polygon { fill:#df85b72a }
.moving-tile { pointer-events:none }
.branch-label { font-size:12px;color:#edb6d3 }
.error { color:#ffc5b8!important }
dialog { color:var(--ink);background:#23323b;border:1px solid #7f98a5;border-radius:10px;padding:28px;width:calc(100% - 30px);max-width:510px }
dialog::backdrop { background:#101820b8 }
dialog h2 { font-size:22px;margin-bottom:16px }
dialog p { font-size:14px;line-height:1.7;color:#bfced6 }
dialog details { font-size:14px }
.setting { display:flex;gap:9px;align-items:center;font-size:14px }
.dialog-close { position:absolute;right:10px;top:5px;font-size:25px;padding:0 8px }
.move-option { display:block;width:100%;border:1px solid #607b89;text-align:left;margin:8px 0;padding:13px }
.sr-only { position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }
[hidden] { display:none!important }
@media(min-width:1700px) {
.stats-table { font-size:14px }
.stat-heading h2 { font-size:17px }
}
@media(max-width:1300px) {
.stats-panel { grid-column:1 / -1;grid-template-columns:repeat(4,1fr) }
.stat-card { padding:13px }
}
@media(max-width:850px) {
#seat-label { font-size:12px }
#seat { font-size:12px }
.icon-button { margin-left:auto }
.turn>span { display:none }
.rule-label { font-size:11px }
.stats-panel { grid-template-columns:1fr 1fr }
}
@media(max-width:620px) {
.stats-panel { grid-column:1;gap:10px }
.stat-card { padding:13px }
.stat-heading { flex-wrap:wrap }
.stats-table { font-size:12px }
.qual-row { grid-template-columns:1fr;gap:3px }
.qual-row strong { text-align:left }
.board-notice { font-size:12px }
}
.stats-panel[aria-busy="true"]::after { content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);right:8px;top:8px;animation:gentle-pulse 1.4s ease-in-out infinite }
.stats-panel { position:relative }
.stat-card { min-height:185px }
.stat-card:first-child { min-height:215px }
.stat-card:nth-child(2) { min-height:190px }
.stat-card:nth-child(n+3) { min-height:260px }
.race-grid strong { font-variant-numeric:tabular-nums }
.race-grid small { min-height:17px }
.stat-note { min-height:34px }
.preview-dim { opacity:.2 }
.projection-layer { pointer-events:none }
#piece-notes { min-height:75px }
#piece-notes:empty { display:block;border-color:transparent }
:root[data-theme="light"] { color-scheme:light;--bg:#d7e1e5;--panel:#f8fafb;--line:#b4c5cf;--muted:#526572;--ink:#1d323e;--accent:#3d6e85;--selected:#bc286f }
html[data-theme="light"] select, html[data-theme="light"] dialog { background:#f8fafb;color:var(--ink);border-color:#a2bac7 }
html[data-theme="light"] .turn>span, html[data-theme="light"] .rule-label { color:#48616f }
html[data-theme="light"] a { color:#28607a }
html[data-theme="light"] .black-player { color:#f0f4f5 }
html[data-theme="light"] .race-grid>div { background:#e5edf1 }
html[data-theme="light"] .race-grid strong, html[data-theme="light"] .qual-row strong, html[data-theme="light"] .stats-table thead th { color:#234d62 }
html[data-theme="light"] .race-grid small, html[data-theme="light"] .stat-details, html[data-theme="light"] .history-panel summary, html[data-theme="light"] .history-move, html[data-theme="light"] dialog p { color:#4c6372 }
html[data-theme="light"] .history-move.current { background:#d0e2eb;color:#193e50 }
html[data-theme="light"] .stat-heading span { color:#32657b }
html[data-theme="light"] button:hover { background:#45678010 }
html[data-theme="light"] .primary { background:#40778f;color:white }
html[data-theme="light"] .error { color:#a33126!important }
@keyframes gentle-pulse {50%{opacity:.25}}
@media(prefers-reduced-motion:reduce) {
*, *::before, *::after { animation:none!important;transition:none!important }
}
@media(max-width:850px) {
.icon-button { margin-left:0 }
}
#workspace-status { font-size:12px;color:#e88989 }
.reserve-stack { cursor:pointer;filter:drop-shadow(0 2px 1px #0003) }
.reserve-stack[aria-disabled="true"] { cursor:default;opacity:.7 }
.reserve-stack:hover .face { stroke:var(--selected) }
.spent-stack { pointer-events:none }
.stat-card { padding:0!important;min-height:0!important }
.stat-heading { margin:0;padding:13px;cursor:pointer;list-style:none }
.stat-heading::before { content:'▾';font-size:12px;color:var(--muted) }
.stat-card:not([open])>.stat-heading::before { content:'▸' }
.stat-heading h2 { flex:1 }
.stat-body { padding:0 13px 13px }
.stat-card:not([open])>.stat-body { display:none }
.stat-card:first-child[open] .stat-body { min-height:280px }
.stat-card:nth-child(2)[open] .stat-body { min-height:150px }
.stat-card:nth-child(n+3)[open] .stat-body { min-height:210px }
#graph-panel .stat-body { min-height:0 }
#edge-graph { display:block;width:100%;height:auto }
#edge-graph circle { cursor:pointer }
.stats-panel[aria-busy="true"]::after { top:16px;right:5px }
.setting { margin:15px 0 }
.stat-card>summary::-webkit-details-marker { display:none }
@media(max-width:1300px) {
.stats-panel { grid-template-columns:repeat(4,minmax(0,1fr)) }
#graph-panel { max-width:100% }
#edge-graph { height:155px }
}
@media(max-width:850px) {
.stats-panel { grid-template-columns:1fr 1fr }
}
@media(max-width:620px) {
.stats-panel { gap:9px }
.stat-heading { padding:11px }
.stat-heading h2 { font-size:14px }
}
.section-heading>span { min-width:92px;text-align:right }
.control-picker { font-size:12px;display:flex;align-items:center;gap:6px;color:var(--muted) }
.control-picker select { font-size:12px;padding:5px 20px 5px 7px;max-width:150px }
#control-caption { min-height:32px;font-size:12px;color:var(--muted);padding:3px 6px }
.change-panel { border-top:1px solid var(--line);padding:8px 6px;font-size:13px }
.change-panel summary { cursor:pointer;color:var(--ink) }
#change-list { min-height:30px;display:flex;flex-wrap:wrap;gap:4px 12px;padding-top:6px;color:var(--muted) }
#change-list button { font-size:12px;text-align:left;padding:3px 0;color:var(--muted) }
#change-list button:hover { color:var(--ink) }
.line-insight { font-size:12px;color:var(--muted);margin:3px 0 7px;line-height:1.5 }
#threat-result { font-size:12px;color:var(--muted) }
#threat-result:not(:empty) { padding:10px 0 }
#threat-result button { font-size:12px;display:block;color:var(--ink);border:1px solid var(--line);margin-top:7px }
@media(max-width:850px) {
.control-picker>select { max-width:110px }
.turn strong { font-size:12px }
}
@media(max-width:620px) {
.control-picker>select { max-width:155px }
}
#online-panel { padding:15px;border-bottom:1px solid var(--line);grid-column:1 / -1 }
#room-players { font-size:14px;font-weight:600 }
#room-status { font-size:12px;color:var(--muted);min-height:18px;margin:5px 0 }
#room-result { font-size:13px;color:var(--ink);margin:5px 0 }
#room-invite { width:100%;font-size:12px;padding:7px }
.room-actions { display:flex;flex-wrap:wrap;gap:4px;margin:9px 0 }
.room-actions button, #room-copy { font-size:12px;border:1px solid var(--line);padding:5px 8px }
.room-chat { margin-top:12px;font-size:13px }
.room-chat summary { cursor:pointer }
#chat-messages { max-height:210px;min-height:70px;overflow-y:auto;overflow-wrap:anywhere;margin:7px 0 }
.chat-message { padding:5px 0;font-size:13px }
.chat-message button { padding:0 4px;font-size:11px;color:var(--muted) }
#chat-form { display:flex;gap:5px }
#chat-text { width:100%;min-width:0;padding:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:4px }
.room-chat>label { display:block;color:var(--muted);font-size:12px;margin-top:8px }
#recent-rooms { display:grid;gap:7px;max-height:200px;overflow:auto }
#recent-rooms button { text-align:left;border:1px solid var(--line);font-size:13px }
#online-dialog input { max-width:100%;padding:7px;border:1px solid var(--line);border-radius:4px }
#online-dialog .setting { justify-content:space-between }
.online-game #online-button { display:none }
.normal-online #control-caption, .normal-online #change-panel { display:none }
.online-game .history-move { pointer-events:none }
#ai-panel>summary { cursor:pointer;list-style:disclosure-open;padding:0 0 8px;margin:0 }
#ai-panel:not([open])>summary { list-style:disclosure-closed }
#ai-panel>summary h2 { display:inline;font-size:15px }
#ai-panel>summary #engine-state { float:right }
.ai-content { display:flow-root }
#online-panel { order:-1 }
.control-picker { position:relative }
.control-picker>summary { cursor:pointer;border:1px solid var(--line);padding:6px 10px;border-radius:5px;color:var(--ink) }
.overlay-options { position:absolute;right:0;top:100%;z-index:20;min-width:205px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 20px #0003 }
.overlay-options label { display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--ink) }
.table-view .tile-group .face, .table-view .moving-tile .face { filter:drop-shadow(0 3px 0 #77786c) drop-shadow(0 3px 0 #393f40) }
@media(max-width:620px) {
.overlay-options { min-width:185px }
}
#lab-dialog { max-width:660px }
#lab-dialog .setting { display:flex;gap:12px;justify-content:space-between }
#lab-dialog input[type=range] { width:48%;margin-left:auto }
#lab-dialog output { width:25px;font-variant-numeric:tabular-nums }
#lab-dialog input:not([type=range]) { min-width:0;max-width:60%;padding:6px }
#lab-dialog details { margin:12px 0 }
.arena-pair { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 }
.arena-pair label { display:grid;gap:5px;font-size:13px }
.arena-pair select { max-width:100% }
#arena-bar { display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--panel);border-bottom:1px solid var(--line);font-size:13px }
#arena-status { flex:1 }
#arena-bar button { border:1px solid var(--line);padding:4px 9px }
#lab-records { display:grid;gap:5px }
#lab-records button { text-align:left;font-size:12px }
.arena-running #online-button { display:none }
@media(max-width:620px) {
.arena-pair { grid-template-columns:1fr }
}
#ai-panel:not([open])~#piece-notes:empty { min-height:0;margin-top:0;padding-top:0 }
.arena-running #lab-button { display:none }
.online-game #lab-button, .arena-running #online-button { display:none!important }
.experimental-page { max-width:1040px;margin:30px auto;padding:30px;border:1px solid var(--line);border-radius:10px;background:var(--panel);position:relative }
#lab-dialog { max-width:1040px }
#close-lab { position:static;font-size:15px;margin-bottom:20px;border:1px solid var(--line) }
.lab-page>#arena-bar { display:none!important }
.lab-page #lab-dialog { display:block }
.experimental-page p { color:var(--muted) }
.experimental-page #lab-template { max-width:650px }
.experimental-page details { padding:12px;border:1px solid var(--line);border-radius:6px }
.tile-art .face { paint-order:stroke fill }
.table-view .tile-group .face, .table-view .moving-tile .face { filter:none }
body[data-tile-style=carbon] .side-w:not(.tile-swatch *) .face, body[data-tile-style=porcelain] .side-w:not(.tile-swatch *) .face { fill:#fafafa;stroke:#a8adb0 }
body[data-tile-style=carbon] .side-b:not(.tile-swatch *) .face { fill:#141414;stroke:#444 }
body[data-tile-style=carbon] .side-w:not(.tile-swatch *) .piece-mark { color:#111!important }
body[data-tile-style=carbon] .side-b:not(.tile-swatch *) .piece-mark { color:#fff!important }
body[data-tile-style=porcelain] .side-b:not(.tile-swatch *) .face { fill:#263649;stroke:#7f97af }
body[data-tile-style=slate] .side-w:not(.tile-swatch *) .face { fill:#d8eff4;stroke:#8eafb9 }
body[data-tile-style=slate] .side-b:not(.tile-swatch *) .face { fill:#303c46;stroke:#758995 }
body[data-tile-style=slate] .side-w:not(.tile-swatch *) .piece-mark { color:#183b49!important }
body[data-tile-style=slate] .side-b:not(.tile-swatch *) .piece-mark { color:#bcecff!important }
.focus-hidden { display:none!important }
@media(max-width:700px) {
.experimental-page { margin:10px;padding:15px }
}
.placement-source { opacity:.18 }
.placement-preview { pointer-events:none }
.target polygon { fill:transparent }
#opponent { display:none!important }
.table-view .control-layer { filter:none }
.table-view .control-layer polygon, .table-view .control-layer circle { stroke-linejoin:round }
.placement-source { opacity:.14 }
.placement-preview { pointer-events:none }
.placement-preview.pending-piece { pointer-events:all }
.target:focus-visible polygon { stroke-width:3.5 }
@keyframes pending-breathe {0%,100%{opacity:.7;filter:drop-shadow(0 0 2px #ed74b5)}50%{opacity:1;filter:drop-shadow(0 0 7px #ed74b5)}}
#compare-page { position:fixed;inset:0;z-index:80;background:var(--bg);overflow:auto;padding:20px clamp(14px,4vw,70px) }
.compare-heading { display:flex;align-items:center;gap:20px }
.compare-heading label { margin-left:auto }
.compare-boards { display:grid;grid-template-columns:1fr 1fr;gap:18px }
.compare-boards article { background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px }
.compare-boards label { display:flex;gap:12px;align-items:center }
.compare-boards select { width:100%;min-width:0 }
.compare-boards svg { width:100%;height:35vh;min-height:180px }
.compare-foot { display:flex;justify-content:space-between;gap:10px;font-size:13px }
.compare-foot button { border:1px solid var(--line) }
.compare-table { margin-top:16px;max-width:1000px;font-size:14px }
.compare-table td:first-child { text-align:left }
.compare-table td { padding:5px 12px }
.normal-online #compare-plans { display:none }
@media(max-width:650px) {
.compare-boards { grid-template-columns:1fr }
.compare-heading { flex-wrap:wrap }
.compare-heading label { margin-left:0 }
}
.online-game #compare-plans { display:none }
#series-score { border:1px solid var(--line);padding:8px;border-radius:6px;font-size:13px;color:var(--accent) }
.hypothesis-base { visibility:hidden }
.hypothesis-tile { pointer-events:none }
#preview-status { margin:0;padding:6px 10px;color:#f1a4d1;border:1px solid #ba6095;border-radius:5px;font-size:13px }
#preview-edge { font-size:12px;color:#f1a4d1;margin:5px 0 }
#setup-page { position:fixed;inset:0;z-index:90;background:var(--bg);overflow:auto;padding:22px }
.setup-columns { display:grid;grid-template-columns:1fr 1.2fr;gap:20px }
.setup-columns img { width:100%;max-height:58vh;object-fit:contain }
.setup-columns svg { width:100%;height:58vh;border:1px solid var(--line);background:var(--panel) }
.setup-tools { display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0 }
.setup-tools input[type=number] { width:70px }
.online-game #screenshot-import, .arena-running #screenshot-import { display:none }
.search-options { font-size:13px }
.search-options select { padding:3px }
@media(max-width:750px) {
.setup-columns { grid-template-columns:1fr }
.setup-columns img { max-height:35vh }
}
.normal-online #focus-controls { display:none!important }
#strategy-panel { display:block;min-height:0 }
.position-panel { background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden }
.position-heading { display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line) }
.position-heading h2 { font-size:16px }
.position-heading button { padding:0 8px }
.metric-tabs { display:flex;gap:3px;padding:8px }
.metric-tabs button { font-size:13px;flex:1;padding:7px 5px;color:var(--muted);border-radius:5px }
.metric-tabs button.active { background:var(--accent);color:#14232b;font-weight:600 }
.metric-table { width:100%;border-collapse:collapse;font-size:13px }
.metric-table th, .metric-table td { padding:9px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent);line-height:1.35 }
.metric-table thead th { font-size:12px;color:var(--muted);font-weight:500 }
.metric-table th { text-align:left;font-weight:400;width:46% }
.metric-table td { text-align:center;font-variant-numeric:tabular-nums;width:27% }
.metric-table thead th:not(:first-child) { text-align:center;width:27% }
.metric-table tr:nth-child(2) td { font-size:11px }
.metric-explanation { padding:10px 13px;font-size:12px;color:var(--muted) }
.metric-explanation p { line-height:1.5 }
.metric-explanation button { font-size:12px;border:1px solid var(--line);margin:3px }
#graph-panel { min-height:0!important;padding:12px!important }
#edge-graph { height:170px;max-height:none!important;width:100%;overflow:visible }
#graph-panel .stat-heading { margin-bottom:3px }
#edge-summary { font-size:12px;min-height:18px;margin:4px 0 }
.move-hit { cursor:pointer }
.move-hit:focus-visible { outline:none }
.target-hit-layer { pointer-events:none }
.target-hit-layer .move-hit { pointer-events:all }
.pending-piece { pointer-events:all!important;cursor:pointer }
.pending-piece .face { stroke:#ed74b5!important;stroke-width:3!important }
#replay-five { width:auto;min-width:45px;font-size:15px }
.position-panel, #graph-panel { border-color:color-mix(in srgb,var(--line) 65%,transparent);box-shadow:0 3px 14px #0000000a }
.position-heading { padding:12px 14px }
.position-content { padding:2px 0 }
.visual-metrics { padding:2px 12px 8px }
.queen-race, .balance-card { width:100%;text-align:left;padding:13px 2px;border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent) }
.queen-race:hover, .balance-card:hover { background:transparent }
.metric-label { display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600 }
.metric-label small { font-size:11px;font-weight:400;color:var(--muted) }
.race-pair { display:flex;align-items:center;justify-content:space-between;margin-top:9px }
.race-pair>span { display:flex;align-items:center;gap:9px }
.race-pair b { font-size:25px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums }
.race-divider { font-size:17px;color:var(--muted) }
.player-dot { display:inline-block;width:10px;height:10px;flex:none;border-radius:50%;border:1px solid #84929a }
.player-dot.white { background:#f4f4ef }
.player-dot.black { background:#15191d }
.balance-title { display:flex;align-items:center;gap:7px;font-size:13px }
.balance-title>svg { width:25px;height:25px;color:var(--ink) }
.balance-title>b { margin-left:auto;font-size:11px;color:var(--muted);font-weight:400 }
.balance-track { display:flex;gap:9px;align-items:center;margin-top:10px;padding:0 2px }
.balance-rail { position:relative;display:block;flex:1;height:5px;border-radius:6px;background:linear-gradient(90deg,#dde5e8,#687a86 50%,#20282e) }
.balance-center { position:absolute;left:50%;top:-3px;height:11px;width:1px;background:var(--muted);opacity:.6 }
.balance-needle { position:absolute;top:-4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent);transition:left .18s ease }
.metric-drilldown>summary { cursor:pointer;font-size:12px;color:var(--muted);padding:8px 14px }
.metric-drilldown[open]>summary { border-top:1px solid var(--line) }
.preview-readout { height:40px;min-height:40px;margin:8px 0 0;display:flex;align-items:center;gap:8px;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent);font-size:11px;color:#e6a3ca }
.preview-readout:has(#preview-status[hidden]):before { content:'Live position';color:var(--muted) }
.preview-readout #preview-status, .preview-readout #preview-edge { font:inherit;color:inherit;border:0;background:transparent;margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.preview-readout #preview-status { flex:none }
.preview-readout #preview-edge { min-width:0 }
@media(prefers-reduced-motion:reduce) {
.balance-needle { transition:none }
}
.move-reason { font-size:12px;color:var(--muted);margin:7px 0 }
.move-reason summary { cursor:pointer }
.move-reason p { margin:7px 0!important;line-height:1.5 }
.target polygon { stroke-dasharray:3 5;stroke-width:1.7;fill:#df76b308 }
.balance-card:focus-visible, .queen-race:focus-visible { outline:2px solid var(--accent);outline-offset:2px }
@media(max-width:1000px) {
#workspace-status { display:none }
.turn { gap:6px;font-size:14px }
.turn>span { font-size:12px }
.control-picker>summary { min-height:40px;display:flex;align-items:center;font-size:13px;padding:5px 9px }
.control-picker label { min-height:44px;display:flex;align-items:center;font-size:14px }
#change-panel { display:none }
.ai-content { display:flow-root;max-height:none!important;overflow:visible!important }
body[data-mobile-panel=moves] #ai-panel>summary { pointer-events:none;list-style:none }
body[data-mobile-panel=moves] #ai-panel>summary::marker { content:'' }
.position-panel { max-height:none!important }
.position-content { overflow:visible!important }
#edge-graph { height:150px!important }
dialog { width:calc(100% - 20px);max-width:560px;max-height:85dvh;padding:18px;overflow:auto;border-radius:16px }
dialog button, dialog select, dialog input:not([type=checkbox]):not([type=range]) { min-height:44px;font-size:16px }
dialog .setting { flex-wrap:wrap;gap:8px }
dialog .setting select { max-width:100% }
dialog h2 { font-size:22px }
dialog input[type=checkbox] { width:20px;height:20px }
}
.controller-dialog { width:340px;max-width:calc(100% - 24px);border-radius:14px }
.controller-options { display:grid;gap:8px }
.controller-options button { min-height:48px;text-align:left;border:1px solid var(--line);border-radius:8px;padding:10px 14px }
.controller-options button[aria-pressed=true] { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent) }
.controller-options button[aria-pressed=true]:after { content:'✓';float:right }
@media(max-width:1000px) {
.controller-dialog h2 { font-size:20px }
}
.moving-tile, .moving-tile .face { filter:none!important }
.search-options[hidden] { display:none!important }
.move-reason { margin:2px 0 }
#control-caption { display:none!important }
.turn { margin-right:auto }
.board-focus-button { min-height:44px;min-width:44px;font-size:22px }
.camera-options label { margin:0;display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:8px }
.camera-options input[type=range] { width:135px }
.camera-options input[type=checkbox] { width:20px;height:20px }
.camera-options select { min-height:40px;max-width:145px;font-size:13px }
.camera-auto { flex-direction:row-reverse }
.camera-options .setting { padding:0 }
.camera-options input[type=range] { accent-color:var(--accent) }
.overlay-options { display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px;min-width:260px;background:var(--panel);border-radius:12px }
.overlay-chip { display:flex!important;align-items:center;gap:7px;position:relative;min-height:46px;padding:7px 9px!important;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:13px!important;cursor:pointer }
.overlay-chip input { position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer }
.overlay-symbol { color:var(--overlay-ink);width:23px;flex:none;font-size:24px;line-height:1 }
.overlay-symbol svg { display:block;width:23px;height:26px }
.overlay-chip:has(input:checked) { border-color:var(--overlay-ink);background:color-mix(in srgb,var(--overlay-ink) 12%,var(--panel));color:var(--ink) }
.overlay-chip:has(input:focus-visible) { outline:2px solid var(--accent);outline-offset:2px }
.control-picker { position:relative }
.control-picker>summary { min-height:40px;font-size:13px;padding:6px 10px }
.visual-metrics button { opacity:1;cursor:pointer;min-height:58px }
.visual-metrics button.active { background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:8px }
.metric-drilldown>summary { display:none }
.metric-drilldown[open] { border-top:1px solid var(--line);padding-top:5px }
.position-heading { gap:6px }
.position-heading h2 { margin-right:auto }
.position-heading button, .info-button { min-width:40px;min-height:40px;padding:4px;font-size:20px;color:var(--muted) }
.info-button { pointer-events:auto!important }
.position-help, .card-help { padding:12px 15px;font-size:14px;line-height:1.6 }
.position-help h3 { font-size:16px;margin:0 0 8px }
.metric-routes { font-size:12px;padding:0 12px 10px }
.metric-routes button { min-height:44px;border:1px solid var(--line);margin:3px 0 }
.card-help { display:none }
#graph-panel.show-help>.stat-body { display:none }
#graph-panel.show-help>.card-help { display:block;min-height:180px }
#graph-panel .stat-heading { gap:5px }
#graph-panel .stat-heading h2 { margin-right:auto }
#graph-panel .stat-heading>span { font-size:11px }
.position-content .metric-table td, .position-content .metric-table th { font-size:13px;padding:8px }
.finish-presets { display:grid;gap:8px }
.finish-presets button { display:flex;justify-content:space-between;align-items:center;min-height:48px;border:1px solid var(--line);gap:10px }
.finish-presets span { font-size:13px;color:var(--muted) }
.muted { color:var(--muted);font-size:13px }
#stop-search { min-height:40px;border:1px solid var(--line);margin-bottom:8px }
.audio-settings { border:1px solid var(--line);border-radius:10px;margin:16px 0;padding:8px 12px }
.audio-settings input[type=range] { width:45%;accent-color:var(--accent) }
.audio-settings input[type=checkbox] { width:21px;height:21px }
.audio-settings .setting { min-height:44px }
.audio-settings legend { padding:0 7px }
.setting { min-height:40px }
@media(min-width:1001px) {
#arena-bar { flex:none }
}
@media(max-width:1000px) {
.board-focus-button { min-width:40px;min-height:40px }
.overlay-options { right:0;min-width:250px;z-index:40 }
.overlay-chip { min-height:44px!important }
.overlay-chip input { min-height:0!important }
body[data-mobile-panel=moves] #ai-panel>summary { pointer-events:auto }
.position-help, .card-help { font-size:14px }
}
html[data-palette=forest] { --bg:#18332e;--panel:#102520;--line:#45695b;--accent:#9bd7b2;--muted:#abc3b9;--ink:#edf6ef }
html[data-palette=ember] { --bg:#382b28;--panel:#241b1b;--line:#72534b;--accent:#edb783;--muted:#c9b3a9;--ink:#fff2e8 }
html[data-palette=arcade] { --bg:#171e36;--panel:#101529;--line:#414d75;--accent:#84d7e6;--muted:#b1b9d7;--ink:#eef4ff }
html[data-palette]:not([data-palette=classic]) select { background:var(--panel);color:var(--ink);border-color:var(--line) }
html[data-theme=light][data-palette=forest] { --bg:#d4e5d9;--panel:#f2f8f1;--line:#9bb8a5;--accent:#2c7651;--muted:#4c6859;--ink:#173b29 }
html[data-theme=light][data-palette=ember] { --bg:#ecded0;--panel:#fff8ee;--line:#c5ab93;--accent:#91502b;--muted:#795f50;--ink:#402a1f }
html[data-theme=light][data-palette=arcade] { --bg:#dce0f2;--panel:#f6f7ff;--line:#a6afd1;--accent:#3b60a0;--muted:#59658a;--ink:#1c2b50 }
html[data-palette]:not([data-palette=classic]) .primary { background:var(--accent);color:var(--panel) }
html[data-palette]:not([data-palette=classic]) dialog { background:var(--panel);color:var(--ink);border-color:var(--line) }
.panels-menu { position:relative }
.panels-menu>summary { list-style:none;display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;font-size:23px;padding:4px;border:1px solid var(--line);border-radius:9px;cursor:pointer }
.panels-menu>summary::-webkit-details-marker { display:none }
.panels-options { position:absolute;right:0;top:calc(100% + 6px);z-index:250;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:285px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px #0003 }
.panel-chip { min-height:50px;padding:8px 5px;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--muted) }
.panel-chip[aria-pressed=true] { color:var(--ink);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel)) }
.panel-reset { grid-column:1/-1;min-height:40px;font-size:13px;color:var(--muted) }
.normal-online .panel-chip:not([data-panel=reserves]) { display:none }
.position-heading, #ai-panel>summary { gap:5px }
#ai-panel>summary h2 { margin-right:auto }
.position-collapse { display:none }
.arranging-panels { user-select:none }
#settings-dialog { width:540px;max-width:calc(100vw - 20px);max-height:85dvh;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--panel);color:var(--ink) }
.settings-heading { display:flex;align-items:center;justify-content:space-between;gap:12px }
.settings-heading #close-settings { position:static;min-width:44px;min-height:44px }
.settings-tabs { display:flex;gap:5px;margin:8px 0 16px;border-bottom:1px solid var(--line) }
.settings-tabs button { flex:1;font-size:14px;min-height:44px;padding:7px 5px;border-radius:0;border-bottom:2px solid transparent;color:var(--muted) }
.settings-tabs button[aria-selected=true] { border-bottom-color:var(--accent);color:var(--ink);font-weight:600 }
.settings-page { display:grid;gap:12px }
.settings-page[hidden] { display:none!important }
.setting-choice { border:0;padding:0;margin:0 0 7px;min-width:0 }
.setting-choice legend { font-size:14px;margin-bottom:9px }
.setting-chips { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.setting-chip { display:flex;align-items:center;gap:12px;min-height:56px;text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px }
.setting-chip[aria-pressed=true] { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel)) }
.setting-swatch { font-size:27px;width:32px;flex:none;color:var(--accent);text-align:center }
.table-theme-forest { color:#9bd7b2 }
.table-theme-ember { color:#edb783 }
.table-theme-arcade { color:#84d7e6 }
.table-theme-classic { color:#a6b6c4 }
.tile-style-carbon { color:#fff }
.tile-style-porcelain { color:#dbc99e }
.tile-style-slate { color:#7ca9be }
.placement-mode-double, .placement-mode-single { font-size:18px }
.setting-toggle { position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;min-height:52px!important;padding:9px 12px!important;margin:0!important;border:1px solid var(--line);border-radius:10px;font-size:14px;cursor:pointer }
.setting-toggle input { position:absolute;inset:0;opacity:0;width:100%!important;height:100%!important;margin:0;cursor:pointer }
.setting-toggle-mark { display:flex;align-items:center;justify-content:center;width:25px;height:25px;flex:none;border:1px solid var(--line);border-radius:7px;color:transparent }
.setting-toggle:has(input:checked) { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel)) }
.setting-toggle:has(input:checked) .setting-toggle-mark { color:var(--panel);background:var(--accent);border-color:var(--accent) }
.setting-toggle:has(input:focus-visible) { outline:2px solid var(--accent);outline-offset:2px }
.settings-note { font-size:13px;line-height:1.5;color:var(--muted);margin:0 }
.settings-page .audio-settings { display:grid;gap:10px;border:0;padding:0;margin:0 }
.settings-page .audio-settings legend { display:none }
.settings-page .audio-settings label:not(.setting-toggle) { font-size:14px;padding:4px 8px }
.settings-page details>summary { min-height:44px;padding:8px;cursor:pointer }
.settings-page details { border:1px solid var(--line);border-radius:10px;padding:4px 8px }
.settings-page details p { font-size:14px;line-height:1.6 }
@media(max-width:1000px) {
.panels-menu>summary { min-width:40px;width:40px;min-height:40px }
.panels-options { width:270px }
.settings-tabs button { font-size:13px }
.setting-chip { font-size:14px;padding:9px;gap:8px }
.settings-page input[type=range] { min-height:40px }
}
.focus-settings { display:none }
.panels-options { grid-template-columns:1fr 1fr }
#change-panel>summary { list-style:none;cursor:pointer;min-width:40px;min-height:40px;display:grid;place-items:center;font-size:20px;color:var(--muted) }
#change-panel>summary::-webkit-details-marker { display:none }
#graph-panel .stat-body { padding:0 4px 4px;margin:0;min-height:0!important }
#graph-panel #edge-graph { height:118px!important }
#graph-panel #edge-summary { font-size:12px;margin:2px 0 6px }
#graph-panel .preview-readout { height:25px;min-height:25px;margin:4px 0 0 }
.edge-reading { display:grid;gap:1px;font-size:12px;min-height:38px;font-variant-numeric:tabular-nums }
.edge-reading span { font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
#edge-review input { width:100%;margin:0;min-height:32px;accent-color:var(--accent) }
.edge-review-actions { display:flex;gap:6px }
.edge-review-actions button { flex:1;min-height:36px;padding:4px;font-size:11px;border:1px solid var(--line) }
#graph-panel:has(#edge-review) #edge-summary { display:none }
#graph-panel .stat-heading { min-height:38px;padding:0;margin:0 }
body[data-mobile-panel] #graph-panel { padding:10px!important }
.qualification-card { display:grid;gap:9px;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--line);min-height:70px }
.qualification-pair { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.qualification-pair>span { display:flex;align-items:center;gap:6px;min-width:0 }
.qualification-pair b { font-weight:500;font-size:11px;line-height:1.4;color:var(--muted) }
.qualification-pair .is-qualified { color:var(--accent);font-weight:600 }

html[data-palette=graphite]{--bg:#202329;--panel:#14171c;--line:#434a55;--accent:#b8c8df;--muted:#a4adb9;--ink:#eff2f7;--selected:#e6a8c8}
html[data-palette=abyss]{--bg:#0b222d;--panel:#081923;--line:#275163;--accent:#61d5d8;--muted:#9bbfc9;--ink:#e4f7f8;--selected:#f1a2cf}
html[data-palette=plum]{--bg:#2b2036;--panel:#1b1524;--line:#5f466f;--accent:#deb2ec;--muted:#bca9c9;--ink:#f7edf9;--selected:#f09baa}
html[data-palette=cyberpunk]{--bg:#161026;--panel:#110d20;--line:#493264;--accent:#64f5e3;--muted:#b5a8d0;--ink:#f7f1ff;--selected:#ff4fca}
html[data-palette=cyberpunk] .drawer-tab[aria-pressed=true],html[data-palette=cyberpunk] .game-tab.active{border-color:var(--selected);box-shadow:0 0 10px #ff4fca24}
html[data-theme=light][data-palette=graphite]{--bg:#dce0e5;--panel:#f7f9fc;--line:#a2adbb;--accent:#3b566f;--muted:#536171;--ink:#202e3b}
html[data-theme=light][data-palette=abyss]{--bg:#d6e8ea;--panel:#f0fafb;--line:#88b2bb;--accent:#166b7a;--muted:#456a72;--ink:#163c46}
html[data-theme=light][data-palette=plum]{--bg:#e7ddeb;--panel:#fcf5ff;--line:#b49ac0;--accent:#78528d;--muted:#786280;--ink:#3b2847}
html[data-theme=light][data-palette=cyberpunk]{--bg:#e6ddf5;--panel:#fbf6ff;--line:#b49ad1;--accent:#156c73;--muted:#6c5789;--ink:#302344;--selected:#b5218a}