:root{--accent:#91e0ba;--accent-deep:#5fb894;--accent-ink:#0b1712;--c0:#ed8e7f;--c1:#e4bf75;--c2:#95c3a0;--c3:#87b7db;--c4:#b6a4da;--c5:#df9fbf}
button,input,select{font:inherit}button,select{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--raised);color:var(--text);min-height:var(--tap);padding:var(--s2) var(--s4)}button{cursor:pointer;font-weight:600;transition:background .12s ease,transform .12s ease,border-color .12s ease}button:disabled{cursor:not-allowed;opacity:.45}button:active:not(:disabled){border-color:var(--accent)}button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}button.secondary{background:transparent}button.danger{color:var(--danger);background:transparent}.small{font-size:var(--fs-xs);min-height:var(--tap);padding:var(--s2) var(--s3)}a{color:inherit}.hidden,[hidden]{display:none!important}.muted{color:var(--muted)}.tiny{font-size:var(--fs-xs)}
.jv-status .jv-dot{background:var(--accent)}.jv-status #modeBadge{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab{white-space:nowrap;background:none;border:0;border-radius:var(--radius);padding:var(--s2) var(--s3);min-height:var(--tap);color:var(--muted);font-size:var(--fs-sm);text-align:left;font-weight:600}.tab.active{color:var(--accent);background:var(--raised)}#jv-controls #identity{font-size:var(--fs-sm);padding:0 var(--s3);color:var(--muted)}
.notice{font-size:var(--fs-xs);padding:var(--s2) var(--s3);background:var(--surface);border-left:2px solid var(--accent-deep);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.notice.error{border-color:var(--danger);color:#ffd1c9}
.hero{display:flex;justify-content:space-between;gap:var(--s5);align-items:center;flex-wrap:wrap;padding:var(--s2) 0 var(--s4)}.eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track-caps);color:var(--muted)}h2{font-size:var(--fs-lg);letter-spacing:-.015em;margin:3px 0 var(--s2);font-weight:600}h3{font-size:var(--fs-md);margin:0 0 var(--s3)}p{margin:var(--s2) 0 var(--s4)}.accent{color:var(--accent)}.intro{font-size:var(--fs-md);line-height:1.6;color:var(--muted);margin-bottom:0}.hero-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s4);min-width:0}.pill,.tag{border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--s1) var(--s2);font-size:var(--fs-xs);letter-spacing:.06em;font-weight:600;display:inline-block}.pill{color:var(--accent);background:var(--raised)}.tag{color:var(--muted)}.meta-numbers strong{font-size:clamp(1.75rem,1.2rem + 2vw,2.25rem);letter-spacing:-.035em;display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.1}.meta-numbers span{font-size:var(--fs-xs);color:var(--muted)}.text-link{font-size:var(--fs-xs);color:var(--muted);text-underline-offset:4px;display:inline-block;min-height:var(--tap);line-height:var(--tap)}.jv-panel{margin-bottom:var(--s5)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}.section-heading h2{margin-bottom:0}.setup-grid{display:grid;grid-template-columns:1fr 1.1fr .75fr;gap:var(--s5);align-items:center}.setup-grid label:not(.checkbox){display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--s2)}select{max-width:100%;font-size:var(--fs-sm)}.setup-grid select{width:100%}.checkbox{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);cursor:pointer;margin-top:var(--s2);min-height:var(--tap)}.checkbox input{accent-color:var(--accent);width:18px;height:18px}.composer-label{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--s1)}
.slots{display:flex;gap:clamp(.4rem,1.6vw,.7rem);flex-wrap:wrap}.slot,.peg{--peg:clamp(2.25rem,8.5vw,2.75rem);display:flex;align-items:center;justify-content:center;width:var(--peg);height:var(--peg);border-radius:50%;font-family:var(--mono);font-weight:800;color:#18211c;font-size:clamp(.8rem,2.6vw,1rem);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}.slot{padding:0;min-height:var(--tap);min-width:var(--tap);border-width:2px;box-shadow:none}.slot.selected{outline:2px solid var(--accent);outline-offset:4px}.slot.empty,.peg.empty{background:var(--raised);color:var(--muted);border:1px dashed #42534f;box-shadow:none}.c0{background:var(--c0)!important}.c1{background:var(--c1)!important}.c2{background:var(--c2)!important}.c3{background:var(--c3)!important}.c4{background:var(--c4)!important}.c5{background:var(--c5)!important}.palette{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}.palette button{width:var(--tap);min-width:var(--tap);min-height:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--radius-sm);color:#14211b;font-family:var(--mono);font-size:var(--fs-sm)}.palette button:active{outline:2px solid var(--text);outline-offset:2px}.setup-start{display:flex;flex-direction:column;gap:var(--s2)}.setup-start p{margin:0;line-height:1.45}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-bottom:var(--s5)}.board-panel{--peg:clamp(1.55rem,4.4vw,2.15rem);min-width:0;margin-bottom:0}.board-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}.board-name{display:flex;align-items:center;gap:var(--s3);min-width:0}.avatar{height:37px;width:37px;flex:none;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:var(--fs-sm);font-weight:800}.human-avatar{background:color-mix(in srgb,var(--human) 22%,var(--sunken));color:var(--human)}.jev-avatar{background:color-mix(in srgb,var(--jev) 22%,var(--sunken));color:var(--jev)}.counter{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-xs);color:var(--muted);padding:var(--s1) var(--s2);background:var(--sunken);border-radius:var(--radius-sm);flex:none}.board-columns,.guess-row{display:grid;grid-template-columns:2.25rem minmax(0,1fr) clamp(4rem,14%,5.5rem);align-items:center;gap:var(--s2)}.board-columns{font-size:var(--fs-xs);letter-spacing:.08em;color:var(--muted);margin-bottom:var(--s2)}.board-columns span:last-child{text-align:center}.guess-row{padding:var(--s2) 0;border-top:1px solid var(--line-soft);min-height:calc(var(--peg) + 1.25rem)}.guess-row.current{background:#1e3129;outline:1px solid #355441;border-radius:var(--radius-sm);padding-left:var(--s2);padding-right:var(--s2)}.guess-row.solved{background:#203c2a;border-radius:var(--radius-sm)}.guess-number{font-family:var(--mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:#93a69e}.guess-pegs{display:flex;gap:clamp(.35rem,1.8vw,.7rem);min-width:0}.guess-pegs .peg{height:var(--peg);width:var(--peg);font-size:clamp(.7rem,2.2vw,.85rem)}.guess-pegs .peg.empty{height:calc(var(--peg) - .3rem);width:calc(var(--peg) - .3rem);margin:.15rem}.feedback{font-family:var(--mono);font-variant-numeric:tabular-nums;display:flex;justify-content:center;align-items:center;gap:var(--s3);font-size:var(--fs-sm);color:var(--muted)}.feedback .exact{color:var(--accent)}
.match-status{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:4px 0 var(--s4);flex-wrap:wrap}.match-status h2{font-size:clamp(1.35rem,1rem + 1.4vw,1.65rem)}.match-status p{margin:4px 0}.action-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}.composer{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;border-color:#4a6857}.warning{color:var(--warn)}.warning-button{color:var(--warn);margin-bottom:var(--s4)}.jev-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}.jev-controls p{max-width:420px;margin:0;font-size:var(--fs-sm);color:var(--muted)}.jev-controls .checkbox{margin:0}
.evidence .section-heading{margin-bottom:var(--s3)}.evidence .checkbox{margin:0}.evidence-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--s4)}.evidence-stat span{display:block;color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-caps)}.evidence-stat strong{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(1.15rem,.9rem + 1vw,1.5rem);line-height:1.5}.evidence-note{margin:var(--s4) 0 0;font-size:var(--fs-xs);color:var(--muted)}details summary{cursor:pointer;font-weight:600;min-height:var(--tap);display:flex;align-items:center;list-style-position:inside}details[open] summary{margin-bottom:var(--s4)}.rules-content{font-size:var(--fs-sm);color:var(--muted);max-width:70ch}.rules-content strong{color:var(--text)}
.page-heading{padding:var(--s2) 0 var(--s5)}.page-heading p{margin:0}.jv-panel.empty{padding:var(--s7) var(--s5);text-align:center;color:var(--muted)}.export-row{margin-bottom:var(--s5)}.export-row button{font-size:var(--fs-xs)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--s4);margin:var(--s5) 0}.stat{background:var(--surface);padding:var(--s4);border:1px solid var(--line);border-radius:var(--radius)}.stat-label{font-size:var(--fs-xs);color:var(--muted);display:block}.stat-value{font-family:var(--mono);font-size:clamp(1.4rem,1rem + 1.6vw,1.8rem);letter-spacing:-.035em;display:block;line-height:1.6;font-variant-numeric:tabular-nums}.stat-note{font-size:var(--fs-xs);color:var(--muted);display:block}.compact .stat{padding:var(--s3)}.compact .stat-value{font-size:var(--fs-xl)}
.analytics-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s5)}.analytics-grid .jv-panel{min-width:0}.analytics-grid h2{font-size:var(--fs-md)}.chart{width:100%;height:auto;display:block}.chart text{fill:var(--muted);font-size:var(--fs-2xs);font-family:var(--font)}.chart .grid-line{stroke:var(--line);stroke-width:1}.chart .human-line{stroke:var(--human);stroke-width:2.5;fill:none}.chart .jev-line{stroke:var(--jev);stroke-width:2.5;fill:none;stroke-dasharray:6 3}.legend-human{color:var(--human);margin-right:var(--s3)}.legend-jev{color:var(--jev);margin-right:var(--s3)}.quality-line{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--fs-xs)}.quality-line strong{color:var(--text);font-family:var(--mono);font-variant-numeric:tabular-nums}.quality-line span{color:var(--muted)}
.table-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}th{text-align:left;color:var(--muted);font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.04em;font-weight:600;border-bottom:1px solid var(--line);padding:var(--s3) var(--s3) var(--s3) 0;white-space:nowrap}td{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--line-soft);white-space:nowrap}tr:last-child td{border-bottom:0}td button{font-family:var(--font);font-size:var(--fs-xs);padding:var(--s1) var(--s2);min-height:var(--tap)}.move-detail{border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s4)}.move-detail label{font-size:var(--fs-xs);color:var(--muted);margin-right:var(--s3)}.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:var(--s3);margin:var(--s5) 0}.fact{padding:var(--s3);background:var(--raised);border-radius:var(--radius-sm)}.fact span{font-size:var(--fs-xs);color:var(--muted);display:block}.fact strong{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-md)}.filter-bar{display:flex;gap:var(--s5);align-items:flex-end;flex-wrap:wrap}.filter-bar label{font-size:var(--fs-xs);color:var(--muted);display:grid;gap:var(--s1)}.file-label{font-size:var(--fs-sm);display:block;margin:var(--s4) 0}.file-label input{display:block;margin-top:var(--s2);font-size:var(--fs-xs);max-width:100%}pre{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.7;background:var(--sunken);border:1px solid var(--line);padding:var(--s4);border-radius:var(--radius-sm);max-height:430px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
footer{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;width:100%;max-width:var(--shell);margin:0 auto;padding:var(--s5) var(--s4) calc(var(--s5) + var(--sa-b));border-top:1px solid var(--line);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted)}
@media(hover:hover){button:hover:not(:disabled){background:color-mix(in srgb,var(--raised) 82%,var(--accent) 18%);transform:translateY(-1px)}button.primary:hover:not(:disabled){background:#b0efd2}.tab:hover:not(:disabled){background:var(--raised);transform:none;color:var(--text)}.palette button:hover{outline:2px solid var(--text);outline-offset:2px}}
@media(min-width:900px){#jv-controls #identity{flex:none;padding:0;max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xs)}}
@media(min-width:1280px){#jv-controls #identity{max-width:14rem}}
@media(max-width:899px){.setup-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}.setup-start{grid-column:1/-1;flex-direction:row;align-items:center}.setup-start p{max-width:300px}.analytics-grid{grid-template-columns:1fr}.boards{grid-template-columns:1fr;gap:var(--s4)}.board-panel{--peg:clamp(1.8rem,6vw,2.4rem)}}
/* Board-first, on the same trigger brand.css v2 uses: narrow OR short.
   .boards is .jv-first but sits inside #page-play, not directly in .jv-main,
   so the shared rule cannot reach it and this mirrors it one level down. */
@media(max-width:600px),(max-height:950px){#page-play{display:flex;flex-direction:column}#page-play>#matchStatus{order:-4}#page-play>.boards{order:-3}#page-play>#guessComposer{order:-2}#page-play>#jevControls,#page-play>#retryRequest{order:-1}}
@media(max-width:600px){.hero{padding:0 0 var(--s2);align-items:flex-start}.hero>div:first-child{min-width:0}.hero-meta{text-align:left;align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:var(--s4);align-items:center}.intro{font-size:var(--fs-sm)}.jv-panel{margin-bottom:var(--s4)}.setup-grid{grid-template-columns:1fr;gap:var(--s4)}.setup-start{grid-column:auto;flex-wrap:wrap}.setup-start .primary{flex:1}.setup-start p{max-width:none;flex-basis:100%}.setup-panel h2{font-size:var(--fs-md)}.opponent-panel{opacity:.92}.board-panel{--peg:clamp(1.65rem,7.4vw,2.2rem)}.board-columns,.guess-row{grid-template-columns:2rem minmax(0,1fr) 4.25rem}.match-status{align-items:flex-start;flex-direction:column}.composer{display:grid;grid-template-columns:1fr;gap:var(--s4)}.composer>div:last-child .primary{width:100%}.evidence .section-heading{align-items:flex-start}.evidence h2{font-size:var(--fs-md)}.page-heading{padding:0 0 var(--s4)}.filter-bar button{flex-basis:100%}.section-heading select{max-width:148px}.analytics-grid .section-heading{align-items:flex-start;flex-direction:column}.jev-controls .primary{width:100%}.export-row .pill{flex-basis:100%;text-align:center}footer{padding:var(--s5) var(--s3) calc(var(--s5) + var(--sa-b));line-height:1.8}}
@media(max-height:560px) and (orientation:landscape){.hero{padding:0;gap:var(--s3)}.intro{font-size:var(--fs-xs)}.page-heading{padding:0 0 var(--s3)}.jv-panel{margin-bottom:var(--s3)}.board-panel{--peg:clamp(1.4rem,3.4vw,1.9rem)}.board-heading{margin-bottom:var(--s3)}.meta-numbers strong{font-size:var(--fs-xl)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}