:root{--accent:#b6a0ff;--accent-deep:#7565d9;--accent-ink:#130c2a;--square-dark:#33364c;--square-light:#b8af9f}
*{box-sizing:border-box}button,input,select{font:inherit}button,.button{border:1px solid var(--line);background:var(--raised);color:var(--text);border-radius:var(--radius-sm);padding:var(--s2) var(--s3);min-height:var(--tap);min-width:var(--tap);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);font-weight:600}@media(hover:hover){button:hover,.button:hover{border-color:var(--accent);background:#292638}}button:active,.button:active{border-color:var(--accent);background:#292638}button:disabled,select:disabled{cursor:not-allowed;opacity:.5}.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}@media(hover:hover){.primary:hover{background:#cabaff}}.primary:active{background:#cabaff}.subtle{background:transparent}.danger{color:var(--danger)}.wide{width:100%;margin-top:var(--s3);justify-content:space-between}.pill{border:1px solid var(--line);background:var(--raised);border-radius:var(--radius-pill);padding:var(--s1) var(--s2);font:600 10px/1.5 var(--mono);letter-spacing:.06em;color:var(--ok);white-space:nowrap}a{color:var(--accent)}select,input[type=search]{width:100%;min-height:var(--tap);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);padding:var(--s2);color:var(--text)}label{display:block;font-size:var(--fs-xs);font-weight:600;color:#c7cbd8;margin-bottom:var(--s2)}/* Account controls live in #jv-controls; brand.js moves that container between the sheet and the header at 900px. No cloned markup. */
.account-identity{font-weight:600;color:var(--muted);cursor:default}
@media(min-width:900px){#jv-controls #login,#jv-controls #logout{border:1px solid var(--line);background:var(--raised);border-radius:var(--radius-sm)}}
.intro{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding:var(--s4) 0 0}.eyebrow{font-size:var(--fs-xs);letter-spacing:.15em;font-weight:700;color:var(--accent);margin:0 0 var(--s2)}.title-dot{color:var(--accent)}.subtitle{color:var(--muted);margin:0;font-size:var(--fs-sm)}.intro-note{text-align:right;display:flex;flex-direction:column;font-size:var(--fs-xs);color:var(--muted);gap:var(--s1)}.intro-note strong{color:#d9deeb;font-size:var(--fs-sm);font-weight:500}.tiny-label{font-size:var(--fs-2xs);letter-spacing:.14em}h2{font-size:var(--fs-md);margin:0;font-weight:650;letter-spacing:-.02em}h3{font-size:var(--fs-sm);margin:0 0 var(--s2);font-weight:600}.arena{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr);gap:var(--s5)}.board-panel{padding:var(--s4) var(--s5) var(--s3);min-width:0}.player-strip{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}.player-strip strong{display:block;font-size:var(--fs-xs)}.player-strip span:not(.avatar):not(.material-count){display:block;font-size:var(--fs-2xs);color:var(--muted)}.avatar{border:1px solid var(--line);width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:bold;flex:none}.opponent-avatar{color:var(--jev);background:color-mix(in srgb,var(--jev) 22%,var(--sunken))}.human-avatar{color:var(--human);background:color-mix(in srgb,var(--human) 22%,var(--sunken))}.material-count{margin-left:auto;color:#c8cedc;font-size:var(--fs-2xs);font-family:var(--mono)}
/* The board fits both axes: never wider than its column, never taller than the viewport remainder. */
.board-frame{--fit-max:560px;--fit-reserve:320px;--fit-ratio:1;background:#272938;border:1px solid #474b62;padding:var(--s2);border-radius:var(--radius-sm);box-shadow:0 18px 30px #0003}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);width:100%;touch-action:manipulation}.board [role=row]{display:contents}.square{aspect-ratio:1;min-width:0;min-height:0;border:0;border-radius:0;padding:0;position:relative;display:grid;place-items:center;font-weight:400;container-type:inline-size}.square.light{background:var(--square-light)}.square.dark{background:var(--square-dark)}@media(hover:hover){.square.dark:hover{background:#44425b}}.square.dark:active,.square.dark.is-active{background:#44425b}.square.dark.selected{box-shadow:inset 0 0 0 3px #cfb4ff;background:#514662}.square.last{background:#494560}.square.next:after{content:'';width:25%;height:25%;border:2px solid #e3d7ff;border-radius:50%;background:#b4a0ff55;position:absolute}.square .number{position:absolute;left:5px;top:3px;font-size:clamp(6px,16cqw,9px);color:#d1d2dc;opacity:.8;line-height:1}.piece{width:73%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;z-index:1;box-shadow:0 4px 0 #0008,0 5px 9px #0004;border:2px solid #ffffff40;position:relative}.piece:after{content:'';position:absolute;inset:12%;border:1px solid #0004;border-radius:50%;box-shadow:inset 0 1px 2px #fff2}.piece.red{background:linear-gradient(145deg,#e5a196,#b45f60);color:#411b28}.piece.white{background:linear-gradient(145deg,#faf1dd,#bfbfb9);color:#33313a}.piece.king:before{content:'\265B';font-size:clamp(14px,55cqw,30px);line-height:1;z-index:1}.bottom{margin:var(--s4) 0 var(--s2)}.board-controls{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:var(--s2);gap:var(--s2);flex-wrap:wrap}.board-controls button{font-size:var(--fs-2xs);padding:var(--s2) var(--s2);min-height:var(--tap);border-color:transparent;flex:1 1 auto}.side-stack{display:flex;flex-direction:column;gap:var(--s4);min-width:0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}.setup label{margin-top:var(--s3)}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.small{font-size:var(--fs-2xs);line-height:1.65}.muted{color:var(--muted)}.toggle{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-2xs);margin:0;min-height:var(--tap)}.toggle input{accent-color:var(--accent);width:18px;height:18px}.decision-status{display:flex;gap:var(--s2);align-items:center;color:var(--muted);font-size:var(--fs-2xs)}.status-dot{width:6px;height:6px;background:var(--ok);border-radius:50%;flex:none}.status-dot.busy{animation:pulse 1s infinite}.decision-big{font-family:var(--mono);font-size:clamp(1.375rem,1rem + 1.6vw,2.0625rem);font-weight:500;letter-spacing:-.06em;margin:var(--s2) 0 var(--s4)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}.metric-grid span{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-bottom:var(--s2)}.metric-grid strong{display:block;font-size:clamp(1.25rem,1rem + 1vw,1.625rem);font-weight:550;letter-spacing:-.04em}.metric-grid small{display:block;color:var(--muted);font-size:var(--fs-2xs);margin-top:var(--s2)}.mini{grid-template-columns:repeat(4,1fr);gap:var(--s2)}.mini strong{font-size:var(--fs-md)}.mini span{font-size:var(--fs-2xs)}.factor-list{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s3)}.factor-row{display:grid;grid-template-columns:minmax(72px,100px) 1fr 40px;gap:var(--s2);align-items:center;font-size:var(--fs-2xs);margin:var(--s2) 0}.factor-row meter{width:100%;height:7px;accent-color:var(--accent)}summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);font-weight:600}.legal-panel{padding:var(--s4) var(--s5)}.legal-moves{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}.legal-moves button{font:12px var(--mono);min-height:var(--tap)}.notice{padding:var(--s3) var(--s4);border:1px solid #75604c;color:#f6d9bc;background:#2f251d;border-radius:var(--radius-sm);font-size:var(--fs-xs)}.analytics-section{margin-top:var(--s5)}.analytics-heading{display:flex;justify-content:space-between;gap:var(--s4);align-items:center;flex-wrap:wrap}.analytics-heading h2{font-size:var(--fs-2xl)}.toolbar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}.toolbar button,.toolbar .button{font-size:var(--fs-2xs);min-height:var(--tap);padding:var(--s2) var(--s3)}.toolbar label{margin:0}.toolbar select{width:auto}.tabs{display:flex;gap:var(--s2);border-bottom:1px solid var(--line);margin:var(--s5) 0;overflow-x:auto}.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:var(--s3) var(--s4);color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;min-height:var(--tap)}.tabs button[aria-selected=true]{border-color:var(--accent);color:var(--accent)}.summary-metrics .jv-panel{padding:var(--s4)}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s4) 0}.chart-panel{min-width:0}.chart{height:clamp(150px,22vh,190px);width:100%}.chart svg{width:100%;height:100%;overflow:visible}.chart .grid-line{stroke:#35394d;stroke-dasharray:3 4}.chart .chart-line{fill:none;stroke:var(--accent);stroke-width:2.5}.chart .chart-line.secondary{stroke:var(--ok)}.chart text{fill:var(--muted);font:10px var(--mono)}.chart .bar{fill:var(--accent);opacity:.8}.empty-chart{display:grid;place-items:center;height:100%;border:1px dashed var(--line);border-radius:var(--radius-sm);color:var(--muted);font-size:var(--fs-xs)}.heatmap{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:100%;max-width:min(100%,260px);margin:auto}.heat-cell{aspect-ratio:1;display:grid;place-items:center;font:10px var(--mono);border-radius:2px;background:#20222f;color:#e3dbfc}.heat-cell.blank{background:var(--sunken)}.heat-cell.heat-1{background:#39314f}.heat-cell.heat-2{background:#514371}.heat-cell.heat-3{background:#756099}.heat-cell.heat-4{background:#9b80c6;color:#100f15}.heat-cell.heat-5{background:#c2a8ed;color:#100f15}.table-scroll{overflow:auto;max-height:min(70dvh,550px)}table{border-collapse:collapse;width:100%;font-size:var(--fs-2xs);text-align:left}th{color:var(--muted);font-weight:500;white-space:nowrap}th,td{padding:var(--s3) var(--s3);border-bottom:1px solid var(--line)}tr.selected td{background:#29243a;color:#d7c4ff}td.numeric{font-family:var(--mono)}td button{font-size:var(--fs-2xs);min-height:var(--tap);padding:4px var(--s2)}pre{font:11px/1.7 var(--mono);overflow:auto;max-height:min(60dvh,440px);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--sunken);border:1px solid var(--line);padding:var(--s4);border-radius:var(--radius-sm)}#decision-select{max-width:270px}#event-filter{max-width:310px}.replay-layout{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:var(--s6);margin-top:var(--s4)}.readonly .square{pointer-events:none}.readonly .piece.king:before{font-size:clamp(12px,50cqw,22px)}input[type=range]{width:100%;accent-color:var(--accent);min-height:var(--tap)}.rules{margin-top:var(--s2)}.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s4)}.rules p{font-size:var(--fs-xs);color:var(--muted)}footer{width:100%;max-width:var(--shell);margin:auto;padding:var(--s5) var(--s4) calc(2.25rem + var(--sa-b));display:flex;justify-content:space-between;gap:var(--s3);color:var(--muted);font-size:var(--fs-2xs);letter-spacing:.04em}[hidden]{display:none!important}@keyframes pulse{50%{opacity:.3}}
@media(min-width:1280px){.board-panel{padding:var(--s4) var(--s6) var(--s3)}}
@media(max-width:899px){.arena{gap:var(--s4);grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr)}.board-panel{padding:var(--s4)}.mini{grid-template-columns:1fr 1fr}.intro-note{display:none}.analytics-heading{align-items:flex-start;flex-direction:column}.metric-grid{gap:var(--s2)}.rules-grid{grid-template-columns:1fr}.board-controls button{padding:var(--s1);font-size:var(--fs-2xs)}}
@media(max-width:600px){.arena{grid-template-columns:1fr}.side-stack{display:grid;grid-template-columns:1fr;gap:var(--s3)}.intro{padding:0}.board-frame{--fit-reserve:260px}.board-panel{padding:var(--s3)}.decision-big{font-size:var(--fs-num-sm)}.two-columns{grid-template-columns:1fr 1fr;gap:var(--s3)}.setup select{font-size:var(--fs-xs)}.side-stack .jv-panel{padding:var(--s4)}.side-stack h2{font-size:var(--fs-xs)}.setup .section-heading{flex-wrap:wrap;gap:var(--s1)}.setup .small{font-size:var(--fs-2xs)}.metric-grid.summary-metrics{grid-template-columns:1fr 1fr}.chart-grid{grid-template-columns:1fr}.replay-layout{grid-template-columns:1fr}.rules-grid{gap:var(--s2)}footer{display:block}footer span{display:block;margin-top:var(--s1)}.analytics-section{margin-top:var(--s4)}.section-heading{flex-wrap:wrap}.player-strip strong{font-size:var(--fs-xs)}}
/* Landscape phones: shrink the chrome rather than let the board overflow. */
@media(max-height:560px){.intro{display:none}.board-frame{--fit-reserve:180px}.player-strip{margin-bottom:var(--s2)}.bottom{margin:var(--s2) 0 var(--s1)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Absolute sizing avoids percentage-grid intrinsic sizing collapsing empty discs. */
.piece{position:absolute;left:13.5%;top:13.5%;width:73%;height:73%}