:root{color-scheme:light;--paper:#f7f5ef;--ink:#243c34;--muted:#74796e;--line:#dfdfd4;--green:#365d49;--light:#e8e6d7;--dark:#829481;--blue:#407aa4;--gold:#c7a452;--coral:#b85946;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}button[hidden],[hidden]{display:none!important}a{color:inherit}svg{display:block}.header{max-width:1160px;margin:auto;height:88px;display:flex;align-items:center;gap:32px;padding:0 32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;letter-spacing:-.5px;font-size:20px}.header nav{display:flex;gap:8px;margin:auto}.header nav button{padding:12px 18px;color:var(--muted);border-radius:6px}.header nav button[aria-current=page]{background:#e7ebdf;color:var(--ink);font-weight:600}.settings-button{padding:10px}.settings-button svg{height:22px;width:22px;stroke:currentColor;stroke-width:1.6;fill:none}main{max-width:1096px;margin:44px auto 32px;min-height:calc(100dvh - 215px)}footer{max-width:1096px;margin:20px auto;padding:14px 0;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-1.8px;font-size:clamp(34px,4vw,52px);line-height:1.08;margin-bottom:20px}h2{font-size:23px;letter-spacing:-.6px;font-weight:550}h3{font-size:17px;font-weight:600}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:20px}.lede{font-size:17px;line-height:1.7;max-width:470px;color:#526054}.primary,.secondary{border-radius:5px;padding:13px 20px;min-height:44px;font-weight:550;font-size:14px}.primary{background:var(--green);color:white}.secondary{border:1px solid #cdd3c7;background:#f1f1e8}.text-button{font-size:13px;text-decoration:underline;text-underline-offset:4px;padding:10px 0;color:var(--muted)}.today{display:grid;grid-template-columns:1.15fr 1fr;gap:90px;align-items:start;padding:45px 0}.focus-copy{margin-bottom:24px}.today .primary{margin-top:12px}.recent{padding-top:4px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-heading h2{font-size:19px;margin:0}.game-row{display:flex;gap:16px;width:100%;text-align:left;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.game-row:hover .opponent{text-decoration:underline;text-underline-offset:4px}.result{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e5e9de;font-size:16px;font-family:Georgia,serif}.result.loss{background:#eee4db;color:#856759}.game-detail{flex:1}.opponent{font-size:14px;font-weight:550}.game-meta{font-size:11px;color:var(--muted);margin-top:4px}.chevron{color:#8b9386}.games-list{max-width:760px}.games-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}.games-heading h1{margin:0}.caption{font-size:12px;line-height:1.5;color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(300px,580px) minmax(260px,1fr);gap:48px;align-items:start}.board-top{display:flex;justify-content:space-between;align-items:center;height:30px;margin-bottom:10px;font-size:12px;color:#6a7668}.board-top button{font-size:12px;color:var(--ink)}.board{aspect-ratio:1;position:relative;isolation:isolate;touch-action:manipulation;border-radius:3px;overflow:hidden;box-shadow:0 5px 20px #293c3210}.squares{display:grid;grid-template-columns:repeat(8,1fr);width:100%;height:100%}.square{position:relative;background:var(--light);padding:0;border-radius:0;min-width:0;min-height:0;display:block}.square.dark{background:var(--dark)}.square.last:after{content:"";position:absolute;inset:0;background:#4c86b744}.square.selected{box-shadow:inset 0 0 0 4px #dbb54a}.workspace .square.possible:before{content:"";position:absolute;width:23%;height:23%;background:#243c3455;border-radius:50%;left:38.5%;top:38.5%}.square.check{box-shadow:inset 0 0 20px #b85946}.coord{position:absolute;font-size:10px;font-weight:600;bottom:2px;right:3px;color:#3d5647}.coord.rank{left:3px;top:2px;right:auto;bottom:auto}.dark .coord{color:#f4f4de}.pieces{position:absolute;inset:0;pointer-events:none}.piece{position:absolute;left:0;top:0;width:12.5%;height:12.5%;padding:.5%;transition:transform 150ms ease;will-change:transform}.arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.board-controls{display:flex;align-items:center;justify-content:center;gap:16px;height:56px}.board-controls button{font-size:20px;height:42px;min-width:42px;border:1px solid var(--line);border-radius:5px}.board-controls .step{font-size:12px;color:var(--muted);min-width:50px;text-align:center}.coach{padding-top:44px}.coach h1{font-size:36px;letter-spacing:-1px;line-height:1.15;margin-bottom:18px}.coach-text{font-size:16px;line-height:1.7;min-height:86px;color:#4b5c50}.practice-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}.feedback{min-height:26px;font-size:14px;line-height:1.6;margin:18px 0 0}.feedback.wrong{color:#9a4d3f}.feedback.correct{color:var(--green);font-weight:600}.hint{padding:14px 0;font-size:15px;line-height:1.6;border-top:1px solid var(--line);margin-top:18px}.theme{font-size:12px;color:#647445;min-height:18px}.source{font-size:12px;color:var(--muted);margin-top:28px;line-height:1.6}.voice-row{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:12px;color:var(--muted)}.voice-row button{padding:8px 12px;border:1px solid var(--line);border-radius:4px}.graph{height:42px;display:block;width:100%;margin-top:8px;cursor:crosshair;background:#e9ebdf;border-radius:3px}.branch-note{font-size:12px;line-height:1.5;color:#6f7969;margin-top:10px}.review-link{margin-bottom:20px;display:inline-block;font-size:12px;color:var(--muted)}.status-note{margin-top:24px;font-size:12px;line-height:1.6;color:var(--muted);max-width:420px}.loading{padding:40px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:28px;width:min(440px,calc(100% - 30px));max-height:90dvh}dialog::backdrop{background:#132a2466;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-heading h2{margin:0}.dialog-heading button{font-size:28px;width:36px;height:36px}dialog label{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line);font-size:14px}dialog small{display:block;color:var(--muted);font-size:11px;margin-top:5px;line-height:1.5}input[type=checkbox]{accent-color:var(--green);width:19px;height:19px}dialog .settings-note,dialog details{font-size:12px;line-height:1.6;color:var(--muted)}dialog .text-button{display:block;margin-top:14px}dialog details{margin-top:20px}.promotion-choices{display:flex;gap:12px}.promotion-choices button{padding:10px;border:1px solid var(--line);border-radius:5px}.promotion-choices img{width:48px}.login{max-width:360px;margin:90px auto}.login label{display:block;margin:24px 0 10px;font-size:14px}.login input{width:100%;padding:12px;border:1px solid var(--line);background:white;border-radius:5px}.login .primary{margin-top:18px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:6px;background:var(--ink);color:white;font-size:13px;max-width:90vw;z-index:10}.error{color:#984f40}.empty{padding:50px 0;max-width:500px}
@media(min-width:900px) and (max-height:850px){main{margin-top:24px}.workspace{grid-template-columns:minmax(300px,min(53vw,calc(100dvh - 235px))) 1fr;gap:40px}.coach{padding-top:40px}.coach h1{font-size:30px}}
@media(max-width:1150px){main,footer{margin-left:28px;margin-right:28px}.today{gap:40px}}
@media(max-width:700px){.header{height:70px;padding:0 16px;gap:8px;flex-wrap:nowrap}.brand{font-size:0;gap:0}.brand img{height:25px;width:25px}.header nav{gap:2px}.header nav button{font-size:13px;padding:10px 13px}.settings-button{padding:8px}main{margin:22px 16px;min-height:calc(100dvh - 175px)}footer{margin:12px 16px;display:block;font-size:10px}footer span{display:block;margin-top:5px}.today{display:block;padding:14px 2px}.today h1{font-size:41px}.lede{font-size:15px}.today .recent{margin-top:44px}.workspace{display:flex;flex-direction:column;gap:12px;max-width:440px;margin:auto}.board-column{width:100%}.board-top{height:20px;margin-bottom:8px}.coach{padding:0;width:100%}.coach .eyebrow{display:none}.coach h1{font-size:27px;margin:4px 0 10px}.coach-text{font-size:14px;line-height:1.5;min-height:0;margin-bottom:8px}.practice-actions{margin-top:14px;gap:8px}.primary,.secondary{padding:11px 14px;min-height:42px;font-size:13px}.feedback{margin-top:10px;min-height:20px;font-size:13px}.hint{margin-top:10px;padding:10px 0;font-size:13px}.source{margin-top:12px;font-size:11px}.board-controls{height:47px;gap:16px}.board-controls button{height:36px;min-width:38px;font-size:17px}.board-controls .step{font-size:11px}.review-link{margin-bottom:12px}.voice-row{margin-top:10px}.theme{min-height:0;margin-top:5px}.graph{height:26px}.games-heading h1{font-size:36px}.game-row{padding:14px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.pieces.instant .piece{transition:none}

.opponent,.game-meta{display:block}

/* Private notebook: dark surfaces, clear board, one review transport. */
:root{color-scheme:dark;--paper:#141a1c;--ink:#edf2ef;--muted:#a0b0aa;--line:#35423f;--green:#477e68;--blue:#76baff;--coral:#ef9c88}
.header{height:72px}.header nav button[aria-current=page]{background:#293b34}.lede,.coach-text{color:#dce6e0}.secondary{background:#25312d;border-color:#4b6056}.result{background:#294335}.result.loss{background:#44312c;color:#edb8a5}.board-top,.branch-note,.theme{color:#b5c6bc}.login input{background:#25312d;color:var(--ink)}.feedback.wrong,.error{color:#f2aa99}.feedback.correct{color:#a3d8b8}#toast{background:#dce9e2;color:#17261e}.connection-notice{max-width:1096px;margin:12px auto;padding:10px 16px;color:var(--muted);font-size:12px}.review-workspace{display:grid;grid-template-columns:minmax(0,540px) minmax(230px,1fr);gap:40px;align-items:start}.review-main{min-width:0}.review-analysis{padding-top:50px}.player-clock{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;font-size:13px}.player-clock>span{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-clock small{color:var(--muted);font-size:11px}.player-clock time{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums;padding:3px 10px;border-radius:4px;background:#25332e;min-width:80px;text-align:right}.player-dot{width:11px;height:11px;border-radius:50%;flex:none;border:1px solid #9bac9f}.player-dot.white{background:#f1eee3}.player-dot.black{background:#171c1a}.coaching-copy{margin-top:14px;min-height:88px}.coaching-copy .coach-text{font-size:17px;line-height:1.65;margin:0;min-height:0}.spoken-word{position:relative;display:inline-block}.spoken-word:after{content:attr(data-text);font-weight:750;visibility:hidden;height:0;display:block;overflow:hidden}.spoken-word.current{font-weight:750;color:#fff;background:#385647;border-radius:3px;box-shadow:0 0 0 2px #385647}.review-main .board-controls{justify-content:flex-start;gap:12px;height:56px}.transport{display:flex;gap:6px}.review-main .board-controls .step{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;min-width:0}.review-main #voice-mute{font-size:12px;min-width:68px;padding:0 8px}.voice-status{min-height:18px;font-size:12px;color:var(--muted)}.evaluation{font-size:21px;line-height:1.4;font-weight:600;min-height:34px}.evaluation small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px}.review-analysis .graph{height:150px;margin:14px 0 8px;background:#202b27;border:1px solid var(--line);overflow:visible}.graph-key{font-size:11px;color:var(--muted);margin-bottom:26px}.review-actions{display:flex;flex-wrap:wrap;gap:10px}.review-link{margin-bottom:12px}.review-main .board{box-shadow:none}
@media(min-width:701px) and (max-height:850px){main{margin-top:18px}.review-workspace{grid-template-columns:minmax(280px,min(49vw,calc(100dvh - 315px))) 1fr;gap:30px}.review-main{max-width:calc(100dvh - 315px);min-width:280px}.coaching-copy .coach-text{font-size:15px;line-height:1.55}.coaching-copy{min-height:72px;margin-top:10px}.review-analysis{padding-top:44px}.player-clock{min-height:30px}.player-clock time{font-size:17px}}
@media(max-width:700px){.header{height:62px}main{margin-top:14px}.review-workspace{display:flex;flex-direction:column;gap:20px;max-width:440px;margin:auto}.review-main,.review-analysis{width:100%;max-width:none}.review-analysis{padding-top:0}.review-main .board-controls{gap:8px}.review-main .board-controls button{min-height:42px;min-width:40px}.review-main #voice-mute{min-width:63px}.review-main .board-controls .step{font-size:11px}.coaching-copy .coach-text{font-size:16px;line-height:1.6}.coaching-copy{min-height:0}.player-clock{font-size:12px}.player-clock time{font-size:18px}.evaluation{font-size:18px}.review-analysis .graph{height:105px}.graph-key{margin-bottom:16px}.connection-notice{margin:8px 16px}.review-actions .secondary{font-size:12px}}
@media(min-width:701px) and (max-height:850px){.header{height:62px}main{margin-top:10px}.review-link{padding:5px 0;margin-bottom:8px}.review-workspace{grid-template-columns:minmax(280px,min(49vw,calc(100dvh - 365px))) 1fr}.review-main{max-width:calc(100dvh - 365px)}.review-main .board-top{height:22px;margin-bottom:4px}.review-analysis{padding-top:30px}}
.spoken-word{display:inline-grid;vertical-align:baseline}.spoken-word>span,.spoken-word:after{grid-area:1/1}.spoken-word:after{height:auto;display:block;overflow:visible}.review-main .board-controls .step{white-space:nowrap}

/* Keep lesson actions beside the coaching and transport reachable on short phones. */
.review-main .review-actions{margin-top:8px}.voice-status:empty{display:none}
.board-controls button,.review-main .board-controls button{min-height:44px;min-width:44px}
@media(max-width:700px){.review-main .board-top{margin-bottom:2px}.coaching-copy{margin-top:8px}.review-link{margin-bottom:4px}.review-workspace{gap:12px}.review-main .review-actions{gap:8px}.coach-text:empty,.source:empty,.status-note:empty{display:none}}
/* Playback sits next to the recorded player clock, directly below the board. */
.clock-controls{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding-top:4px}
.clock-controls #clock-bottom{display:contents}
.clock-controls #clock-bottom>span{grid-column:1/-1;grid-row:1;font-size:12px;display:flex;align-items:center;gap:8px}
.clock-controls .transport{grid-column:1;grid-row:2}
.clock-controls #clock-bottom time{grid-column:2;grid-row:2}
.clock-controls .transport button{height:44px;min-width:44px;font-size:20px;border:1px solid var(--line);border-radius:5px}
.review-main .board-controls{height:44px;justify-content:space-between}
.review-main .board-controls .step{margin-left:0}

/* Let the three destinations own the header; the decorative brand adds no task value. */
.header{gap:16px}
.header nav{gap:6px}
.header nav button{font-size:15px;padding:14px 20px;min-height:48px}
@media(max-width:700px){
  .header{padding:0 12px;gap:8px}
  .header nav{gap:4px}
  .header nav button{font-size:15px;padding:12px 16px;min-height:46px}
  .settings-button{min-width:44px;min-height:44px}
}

/* Lichess-style last move; spoken references settle onto a piece or a square. */
.square.last:after{background:rgba(170,162,58,.65)}
.review-main .square:before{content:"";position:absolute;inset:5%;z-index:4;pointer-events:none;opacity:0;transform:scale(.8);border:2px dashed var(--focus,#ffe27b);border-radius:7px;background:var(--focus-wash,rgba(255,226,123,.08));box-shadow:0 0 0 2px rgba(14,20,19,.68),0 0 15px var(--focus-glow,rgba(255,226,123,.38));transition:opacity 160ms ease,transform 260ms cubic-bezier(.16,1,.3,1)}
.review-main .square.spoken-piece:before{inset:7%;border-style:solid;border-radius:50%;background:transparent}
.review-main .square.spoken-focus:before{opacity:1;transform:scale(1);animation:spoken-focus-settle 380ms cubic-bezier(.2,.75,.2,1) both}
@keyframes spoken-focus-settle{0%{opacity:0;transform:scale(.74)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.spoken-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;--arrow-played:#4c9ada;--arrow-idea:#57a76a;--arrow-threat:#ed7865}
.spoken-arrow-path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(10,19,17,.85));animation:spoken-arrow-appear 260ms ease-out both}
.spoken-arrow-path.played{stroke:var(--arrow-played)}
.spoken-arrow-path.idea{stroke:var(--arrow-idea)}
.spoken-arrow-path.threat{stroke:var(--arrow-threat);stroke-dasharray:15 10}
.spoken-arrow-head.played{fill:var(--arrow-played)}
.spoken-arrow-head.idea{fill:var(--arrow-idea)}
.spoken-arrow-head.threat{fill:var(--arrow-threat)}
@keyframes spoken-arrow-appear{from{opacity:0}to{opacity:1}}

#graph .graph-midline{stroke:#637578;stroke-dasharray:4 6}
#graph .graph-series{stroke:#b6d6cc;fill:none;stroke-width:3}
#graph .graph-cursor{stroke:#76baff;stroke-width:2}
#graph .graph-point{fill:#76baff}
.arrows line{stroke:#24735d;stroke-width:10;opacity:.8}
.arrows marker path{fill:#24735d}

/* Red mode is designed around brightness separation after a deep red phone tint. */
:root[data-color-mode=red]{color-scheme:dark;--paper:#080000;--ink:#e08300;--muted:#c46600;--line:#863200;--green:#9a3900;--light:#7e2800;--dark:#120300;--blue:#f6a000;--gold:#ffb000;--coral:#e87800;--focus:#ffb000;--focus-wash:rgba(255,150,0,.12);--focus-glow:rgba(255,145,0,.42);color:var(--ink);background:var(--paper)}
:root[data-color-mode=red] ::selection{color:#080000;background:#ffb000}
:root[data-color-mode=red] .header nav button[aria-current=page]{background:#572000}
:root[data-color-mode=red] .lede,:root[data-color-mode=red] .coach-text{color:var(--ink)}
:root[data-color-mode=red] .primary{background:#953800;color:#ffae00}
:root[data-color-mode=red] .secondary,:root[data-color-mode=red] .login input{background:#190500;border-color:#963800;color:var(--ink)}
:root[data-color-mode=red] .result{background:#522000;color:#ffad00}
:root[data-color-mode=red] .result.loss{background:#250900;color:#e87800}
:root[data-color-mode=red] .board-top,:root[data-color-mode=red] .branch-note,:root[data-color-mode=red] .theme{color:var(--muted)}
:root[data-color-mode=red] .chevron{color:#e08300}
:root[data-color-mode=red] .player-clock time{background:#210700}
:root[data-color-mode=red] .player-dot{border-color:#df7400}
:root[data-color-mode=red] .player-dot.white{background:#f69a00}
:root[data-color-mode=red] .player-dot.black{background:#0c0200}
:root[data-color-mode=red] .board{box-shadow:0 5px 20px rgba(25,4,0,.18)}
:root[data-color-mode=red] .square.last:after{background:rgba(233,104,0,.22)}
:root[data-color-mode=red] .square.check{box-shadow:inset 0 0 0 3px #ffae00,inset 0 0 18px #ed7700}
:root[data-color-mode=red] .square.selected{box-shadow:inset 0 0 0 4px #ffc000}
:root[data-color-mode=red] .workspace .square.possible:before{background:#ffae00;opacity:.88}
:root[data-color-mode=red] .coord{color:#ffac00}
:root[data-color-mode=red] .dark .coord{color:#df7400}
:root[data-color-mode=red] .review-main .square:before{box-shadow:0 0 0 2px rgba(10,1,0,.78),0 0 15px var(--focus-glow)}
:root[data-color-mode=red] .spoken-arrow-path{filter:drop-shadow(0 2px 3px rgba(10,1,0,.85))}
:root[data-color-mode=red] .spoken-arrow-path.idea{stroke-dasharray:28 9}
:root[data-color-mode=red] .spoken-arrow-path.threat{stroke-dasharray:7 9}
:root[data-color-mode=red] .spoken-word.current{color:#ffb000;background:#572000;box-shadow:0 0 0 2px #572000}
:root[data-color-mode=red] .review-analysis .graph{background:#140400}
:root[data-color-mode=red] #graph .graph-midline{stroke:#a84b00}
:root[data-color-mode=red] #graph .graph-series{stroke:#ef8900}
:root[data-color-mode=red] #graph .graph-cursor{stroke:#ffb000}
:root[data-color-mode=red] #graph .graph-point{fill:#ffb000}
:root[data-color-mode=red] .arrows line{stroke:#f69a00}
:root[data-color-mode=red] .arrows marker path{fill:#f69a00}
:root[data-color-mode=red] .spoken-arrows{--arrow-played:#ffb000;--arrow-idea:#e57a00;--arrow-threat:#f35d00}
:root[data-color-mode=red] .feedback.correct{color:#f69a00}
:root[data-color-mode=red] .feedback.wrong,:root[data-color-mode=red] .error{color:#e87800}
:root[data-color-mode=red] #toast{background:#6b2600;color:#ffb000}
:root[data-color-mode=red] dialog::backdrop{background:rgba(5,0,0,.84)}
:root[data-color-mode=red] input[type=checkbox]{appearance:none;background:#1d0600;border:2px solid #d66c00;border-radius:3px;display:grid;place-content:center;color:var(--ink);outline-color:#ffb000}
:root[data-color-mode=red] input[type=checkbox]:checked{background:#f69a00;border-color:#f69a00}
:root[data-color-mode=red] input[type=checkbox]:checked:before{content:"";width:9px;height:5px;border:solid #180400;border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-1px)}
:root[data-color-mode=red] input[type=checkbox]:focus-visible{outline:3px solid #ffb000;outline-offset:2px}
:root[data-color-mode=red] button:disabled{opacity:.62}

/* Installed touch apps behave like a native screen; editable fields still support paste. */
:root.installed-touch-app,:root.installed-touch-app body{touch-action:pan-x pan-y}
:root.installed-touch-app body,:root.installed-touch-app body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root.installed-touch-app input,:root.installed-touch-app textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Keep the spoken line beside the board; reveal the whole move only on request. */
.review-main .coaching-copy{height:54px;min-height:0;margin-top:8px;padding:4px 0;overflow-y:auto;scrollbar-width:none;border-block:1px solid var(--line)}
.review-main .coaching-copy::-webkit-scrollbar{display:none}
.review-main .coaching-copy.expanded{height:auto;overflow:visible}
.review-main .coaching-copy .coach-text{font-size:19px;line-height:1.32;margin:0;min-height:0}
.caption-actions{display:flex;align-items:center;gap:6px}
.review-main #expand-coaching,.review-main #voice-mute{width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center}
.review-main #expand-coaching{font-size:23px;line-height:1}
.review-main #voice-mute svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.review-main #voice-mute .voice-slash,.review-main #voice-mute.muted .voice-waves{display:none}
.review-main #voice-mute.muted .voice-slash{display:block}

.coach-questions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.6rem}.coach-questions button{min-height:44px;padding:.55rem .8rem}.coaching-copy:has(.coach-text:empty){display:none}

.spoken-word{white-space:nowrap}

/* Move dots, capture rings, and attack corners remain distinct without color. */
.square.capture-target>.move-hint{content:"";position:absolute;inset:5%;width:auto;height:auto;left:5%;top:5%;border:4px solid #dbb54a;border-radius:50%;background:transparent;z-index:3;pointer-events:none}
.square.under-attack:after{content:attr(data-attack-count);position:absolute;inset:auto;top:2px;right:2px;width:18px;height:18px;line-height:18px;text-align:center;font-size:13px;font-weight:800;border-radius:3px;background:#a83922;color:#fff;z-index:4;pointer-events:none}
#show-attacks[data-active=true]{outline:2px solid #dbb54a;outline-offset:1px}
:root[data-color-mode=red] .square.capture-target>.move-hint{border-color:#ffc000}
:root[data-color-mode=red] .square.under-attack:after{background:#a83000;color:#ffc000}
.square:focus-visible{outline:3px solid #dbb54a;outline-offset:-3px;z-index:5}

.review-main .square.possible>.move-hint{position:absolute;left:38.5%;top:38.5%;width:23%;height:23%;border-radius:50%;background:#243c3499;z-index:3;pointer-events:none}
:root[data-color-mode=red] .review-main .square.possible>.move-hint{background:#ffae00}

.transport #show-attacks{font-size:12px;font-weight:650;padding:0 9px;min-width:64px;min-height:44px}
.transport #show-attacks[data-active=true]{background:#775622;color:#fff1c4}
:root[data-color-mode=red] .transport #show-attacks[data-active=true]{background:#662600;color:#ffc000}

/* One review screen: home owns navigation; board controls remain in reach. */
.header #back{min-height:44px;min-width:70px;text-decoration:none;font-size:15px;color:var(--ink)}
.header:has(#back:not([hidden])){justify-content:space-between}
.review-main .board-controls{display:none}
.review-main .coaching-copy{position:relative;padding-right:48px}
.review-main #expand-coaching{position:absolute;right:0;top:0;background:var(--paper)}
.review-main .coaching-copy.expanded{position:fixed;inset:calc(env(safe-area-inset-top) + 60px) 16px calc(env(safe-area-inset-bottom) + 20px);height:auto;max-height:none;z-index:30;background:var(--paper);padding:52px 18px 18px;border:1px solid var(--line);border-radius:8px;overflow:auto}
.review-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.review-tools .coach-questions,.review-tools .review-actions{display:contents}
.review-tools button{min-height:44px;font-size:12px;padding:8px}
.review-tools #move-advice{min-width:44px;font-size:21px;text-decoration:none}
@media(max-width:700px){
 body.review-screen{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .review-screen .header{height:46px;min-height:46px}
 .review-screen main{margin:4px 12px 0;min-height:0}
 .review-screen .review-workspace{gap:4px;max-width:440px}
 .review-screen .review-main{max-width:none}
 .review-screen .board{margin-inline:auto;max-width:100%}
 .review-screen .board-top{height:24px;margin-bottom:0}
 .review-screen .player-clock{min-height:28px}
 .review-screen .player-clock time{font-size:17px;min-width:70px}
 .review-screen .clock-controls{gap:2px 6px;padding-top:2px}
 .review-screen .transport{gap:4px}
 .review-screen .coaching-copy{height:66px;margin-top:5px}
 .review-screen .coaching-copy .coach-text{font-size:16px;line-height:1.25}
 .review-screen .review-tools{gap:4px;margin-top:4px}
 .review-screen .review-analysis{display:flex;align-items:center;gap:8px;height:48px;min-height:48px;padding:0}
 .review-screen .evaluation{font-size:13px;line-height:1.2;min-height:0;flex:0 0 100px}
 .review-screen .evaluation small{font-size:10px;margin-top:2px}
 .review-screen .review-analysis .graph{height:44px;min-width:0;flex:1;margin:0}
 .review-screen .graph-key{display:none}
 .review-screen .branch-note{font-size:11px;margin:0}
 .review-screen .connection-notice{position:fixed;bottom:env(safe-area-inset-bottom);left:0;right:0;margin:0;padding:3px 12px;background:var(--paper);font-size:11px;z-index:20}
}

/* Spend available height on readable coaching and deliberate spacing. */
@media(max-width:700px){
 .review-screen .header{height:52px;min-height:52px;padding-inline:16px}
 .review-screen main{margin:8px 16px 0}
 .review-screen .review-workspace{gap:12px}
 .review-screen .board-top{height:28px}
 .review-screen .player-clock{min-height:30px}
 .review-screen .board{border-radius:5px}
 .review-screen .clock-controls{gap:5px 8px;padding-top:5px}
 .review-screen .transport{gap:5px}
 .review-screen .transport button{border-radius:7px}
 .review-screen .transport #play{background:#304c3f;border-color:#4b705d;color:#f1f5ee}
 .review-screen .coaching-copy{height:var(--coach-height,76px);margin-top:10px;padding:10px 48px 10px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(220,235,222,.025)}
 .review-screen .coaching-copy .coach-text{font-size:clamp(16px,2.1dvh,18px);line-height:1.4}
 .review-screen #expand-coaching{top:4px;right:3px;background:transparent;color:var(--muted)}
 .review-screen .review-tools{gap:4px;margin-top:8px}
 .review-screen .coach-questions{display:flex;flex:1 0 100%;gap:8px;margin:0}
 .review-screen .coach-questions .secondary{flex:1;font-size:13px;border-radius:7px;padding:10px 12px}
 .review-screen .review-actions{display:flex;flex:1 0 100%;gap:12px;margin:0}
 .review-screen .review-actions:not(:has(button:not([hidden]))){display:none}
 .review-screen .review-actions button{background:transparent;border:0;padding:8px 4px;color:var(--muted);font-size:13px}
 .review-screen .review-analysis{height:var(--analysis-height,52px);min-height:52px;gap:12px;border-top:1px solid var(--line);padding-top:8px}
 .review-screen .review-analysis .graph{height:100%;max-height:120px;border-radius:6px}
 .review-screen .evaluation{font-size:14px;flex-basis:96px}
 .review-screen .coaching-copy.expanded{height:auto;padding:52px 18px 18px;background:var(--paper)}
 :root[data-color-mode=red] .review-screen .transport #play{background:#552100;border-color:#b54e00;color:#ffb000}
 :root[data-color-mode=red] .review-screen .coaching-copy{background:#190700}
}

@media(max-width:700px){
 .review-screen .review-workspace{gap:calc(12px + var(--review-relax,0)*4px)}
 .review-screen .board-top{height:calc(28px + var(--review-relax,0)*4px)}
 .review-screen .player-clock{min-height:calc(30px + var(--review-relax,0)*8px)}
 .review-screen .clock-controls{padding-top:calc(5px + var(--review-relax,0)*5px)}
 .review-screen .coaching-copy{display:flex;flex-direction:column;margin-top:calc(10px + var(--review-relax,0)*4px)}
 .review-screen .coaching-copy .coach-text{flex:none;margin-block:auto}
 .review-screen .review-tools{margin-top:calc(8px + var(--review-relax,0)*4px)}
}
@media(max-width:700px) and (max-height:740px){
 .review-screen .review-tools .coach-questions,.review-screen .review-tools .review-actions{display:contents}
 .review-screen .review-tools .secondary{flex:0 1 auto;font-size:12px;padding:8px}
 .review-screen .review-tools .review-actions button{padding:8px 4px}
}

.task-progress{display:flex;flex-direction:column;gap:4px;font-size:11px;line-height:1.3;color:var(--muted);font-weight:400;min-width:72px}.task-progress>span{display:flex;justify-content:space-between;gap:10px}.task-progress strong{font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink)}.task-progress progress{appearance:none;display:block;border:0;border-radius:4px;background:var(--line);width:100%;height:4px;overflow:hidden}.task-progress progress::-webkit-progress-bar{background:var(--line);border-radius:4px}.task-progress progress::-webkit-progress-value{background:#91b49e;border-radius:4px;transition:width 200ms ease}.task-progress progress::-moz-progress-bar{background:#91b49e;border-radius:4px}#voice-status:not(:empty){margin-top:4px}#voice-status .task-progress{flex-direction:row;align-items:center;gap:12px}#voice-status .task-progress>span{min-width:84px}#voice-status .task-progress progress{flex:1}#evaluation .task-progress{margin-top:5px}#review-copy .task-progress{font-size:14px}.loading .task-progress{max-width:300px}:root[data-color-mode=red] .task-progress progress::-webkit-progress-value{background:#ffae00}:root[data-color-mode=red] .task-progress progress::-moz-progress-bar{background:#ffae00}

/* Home can breathe and scroll; game review retains its fitted layout. */
.header{justify-content:space-between}.home-title{font-size:17px;font-weight:600;letter-spacing:-.4px}
.dashboard,.puzzle-hub{max-width:760px;margin:0 auto;padding:12px 0 30px}
.dashboard .eyebrow,.puzzle-hub .eyebrow{margin-bottom:12px}
.dashboard h1,.puzzle-hub h1{margin-bottom:12px}
.dashboard-intro{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:28px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:36px}
.stat,.destination{border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper),var(--ink) 3%)}
.stat{padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.stat>span,.stat small{color:var(--muted);font-size:12px;line-height:1.5}.stat>strong{font-size:42px;font-weight:550;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.opening-stat{grid-column:1/-1}.opening-stat>strong{font-size:22px;letter-spacing:-.4px;overflow-wrap:anywhere}
.dashboard-recent{margin-top:32px}.dashboard-recent h2{font-size:21px}.dashboard .game-row{padding:18px 0}.dashboard .opponent{overflow-wrap:anywhere}
.destination-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.destination{padding:22px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;width:100%}.destination strong{font-size:23px;letter-spacing:-.6px}.destination>span{color:var(--muted);font-size:13px;line-height:1.5}.destination .destination-icon{font-size:26px;color:var(--ink)}button.destination:hover{border-color:var(--muted);background:color-mix(in srgb,var(--paper),var(--ink) 6%)}
.puzzle-options{display:grid;gap:14px}.destination .availability{font-size:11px;text-transform:uppercase;letter-spacing:1px}.destination .puzzle-start{color:var(--ink);margin-top:8px}.upcoming{background:transparent}.upcoming strong{font-size:20px;color:var(--muted)}
@media(max-width:700px){.dashboard,.puzzle-hub{padding-top:18px}.dashboard h1,.puzzle-hub h1{font-size:38px}.stat{padding:18px 16px}.stat>strong{font-size:38px}.opening-stat>strong{font-size:21px}.destination{padding:20px 16px}.destination strong{font-size:21px}}


/* A native select keeps the board-view menu usable with touch and keyboards. */
.transport select#show-attacks{width:132px;max-width:42vw;min-height:44px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.square.hanging-piece:after{content:"!";position:absolute;top:2px;right:2px;width:18px;height:18px;line-height:18px;text-align:center;font-size:14px;font-weight:800;border-radius:3px;background:#a83922;color:#fff;z-index:4;pointer-events:none}
:root[data-color-mode=red] .square.hanging-piece:after{background:#a83000;color:#ffc000}

.square.hanging-attacker>.move-hint{position:absolute;inset:5%;left:5%;top:5%;width:auto;height:auto;border:4px solid #dbb54a;border-radius:50%;background:transparent;z-index:3;pointer-events:none}
:root[data-color-mode=red] .square.hanging-attacker>.move-hint{border-color:#ffc000}

/* Fixed White/Black orientation makes the advantage readable in either theme. */
.advantage-chart{position:relative;height:150px;margin:14px 0 8px;min-width:0;border-radius:6px;overflow:hidden;isolation:isolate}
.review-analysis .advantage-chart .graph{width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0}
#graph .graph-white-half{fill:#f3f3ef}#graph .graph-black-half{fill:#161a1d}
#graph .graph-midline{stroke:#89939a;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
#graph .graph-series-outline{stroke:#102330;stroke-width:5;fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#graph .graph-series{stroke:#55b7ef;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#graph .graph-cursor{stroke:#db6500;stroke-width:1.5;vector-effect:non-scaling-stroke}
#graph .graph-point{fill:#ffb34d;stroke:#192128;stroke-width:1.5;vector-effect:non-scaling-stroke}
.graph-side{position:absolute;left:5px;z-index:1;padding:1px 4px;border-radius:3px;font-size:11px;font-weight:650;line-height:1.25;pointer-events:none}
.graph-side-white{top:3px;color:#161a1d;background:#f3f3efed}.graph-side-black{bottom:3px;color:#f3f3ef;background:#161a1ded}
@media(max-width:700px){.review-screen .advantage-chart{flex:1;height:100%;max-height:120px;margin:0}.review-screen .graph-side{font-size:10px;line-height:1.1;padding:1px 3px}.review-screen .graph-side-white{top:2px}.review-screen .graph-side-black{bottom:2px}}

/* Home prioritizes starting a review or puzzle; stats remain a quiet summary. */
.home-actions{gap:16px}
.home-actions .home-action{position:relative;min-height:176px;padding:24px;gap:20px;border-radius:16px;border:1px solid var(--line);transition:background 150ms,border-color 150ms,transform 150ms}
.home-actions .home-review{background:color-mix(in srgb,var(--green),var(--paper) 42%);border-color:color-mix(in srgb,var(--green),var(--ink) 20%)}
.home-actions .home-practice{background:color-mix(in srgb,var(--green),var(--paper) 88%)}
.home-actions .home-action-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--ink),transparent 90%);color:var(--ink)}
.home-action-icon svg{width:25px;height:25px;fill:currentColor}
.home-actions .home-action-copy{display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.home-action-copy strong{font-size:25px;letter-spacing:-.7px;line-height:1.15}
.home-action-copy>span{font-size:13px;line-height:1.45;color:var(--ink);opacity:.8}
.home-actions .home-action-arrow{position:absolute;right:24px;top:27px;font-size:26px;color:var(--ink)}
.home-actions .home-action:hover{background:color-mix(in srgb,var(--green),var(--paper) 30%);border-color:var(--green)}
.home-actions .home-action:active{transform:translateY(1px)}
.home-stats{margin:20px 0 0;padding:0 2px;color:var(--muted);font-size:12px;line-height:1.7}
.home-stats p{margin:0}.home-stats strong{font-weight:600;color:var(--ink);font-size:13px}.stat-divider{margin:0 8px}.home-record{margin-left:12px;white-space:nowrap}.home-opening{font-size:11px;overflow-wrap:anywhere}
.dashboard .dashboard-recent{margin-top:30px}.dashboard-recent h2{font-size:18px}
@media(max-width:700px){.dashboard .dashboard-intro{margin-bottom:24px}.home-actions{grid-template-columns:1fr;gap:12px}.home-actions .home-action{min-height:112px;flex-direction:row;align-items:center;padding:22px 18px;gap:16px}.home-actions .home-action-icon{flex:0 0 42px}.home-action-copy strong{font-size:23px}.home-actions .home-action-copy{padding-right:15px}.home-actions .home-action-arrow{position:static;margin-left:auto;font-size:24px}.home-action-copy>span{font-size:12px}.home-stats{margin-top:18px}.home-record{margin-left:8px}}
@media(prefers-reduced-motion:reduce){.home-actions .home-action{transition:none}}

/* Review: player clocks and controls have separate, bounded rows. */
.review-main .clock-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.review-main .clock-controls #clock-bottom{display:flex;order:-1;min-width:0;justify-content:space-between}
.review-main .clock-controls #clock-bottom>span{min-width:0;flex:1;font-size:13px}
.review-main .player-clock time{flex:none;min-width:72px;font-size:18px}
.review-main .clock-controls .transport{display:grid;grid-template-columns:44px 44px 44px minmax(0,1fr) 44px;gap:6px;width:100%;min-width:0}
.review-main .transport #show-attacks{width:100%;min-width:0;padding:0 8px;font-size:12px;height:44px}
.review-main .transport #voice-mute{width:44px;min-width:44px;padding:0;display:grid;place-items:center}
.review-main .coaching-copy{display:block;position:relative;padding:12px 42px 12px 12px;height:96px;min-height:96px;overflow:visible;border:1px solid var(--line);border-radius:10px;text-align:left}
.review-main .transcript-scroll{height:72px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.review-main .coaching-copy .coach-text{font-size:16px;line-height:24px;margin:0;text-align:left;letter-spacing:normal;word-spacing:normal}
.review-main .spoken-word{display:inline;white-space:normal}
.review-main .spoken-word:after{display:none}
.review-main .spoken-word.current{font-weight:inherit}
.review-main #expand-coaching{top:4px;right:2px;width:36px;min-height:44px}
.review-main .coaching-copy.expanded{height:auto;min-height:0;padding:52px 18px 18px;overflow:hidden}
.review-main .coaching-copy.expanded .transcript-scroll{height:100%;overflow:auto}
.review-analysis .graph-key{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin:6px 0 0}
@media(max-width:700px){
 .review-screen .review-workspace{gap:12px}
 .review-screen .review-main{width:100%;min-width:0}
 .review-screen .board-top{height:26px}
 .review-screen .player-clock{min-height:30px}
 .review-screen .clock-controls{padding-top:5px;gap:8px}
 .review-screen .coaching-copy{height:96px;margin-top:12px}
 .review-screen .review-tools{display:flex;gap:8px;margin-top:10px}
 .review-screen .review-tools .coach-questions{display:flex;flex:1 0 100%;gap:8px}
 .review-screen .review-tools .coach-questions .secondary{flex:1;min-height:44px;padding:10px 8px;font-size:13px}
 .review-screen .review-tools .review-actions{display:flex;flex:1 0 100%;gap:8px}
 .review-screen .review-tools .review-actions:not(:has(button:not([hidden]))){display:none}
 .review-screen .review-tools .review-actions button{min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;font-size:12px}
 .review-screen .review-analysis{display:grid;grid-template-columns:1fr;grid-template-rows:auto 68px auto;height:auto;min-height:112px;gap:6px;padding-top:12px;align-items:center}
 .review-screen .evaluation{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;line-height:18px;min-height:18px}
 .review-screen .evaluation .task-progress{width:108px;min-width:0;margin:0;font-size:10px}
 .review-screen .evaluation .task-progress:has(progress[value="100"]){display:none}
 .review-screen .advantage-chart{height:68px;width:100%;max-height:none;margin:0;flex:none}
 .review-screen .review-analysis .graph{height:68px;width:100%;max-height:none;overflow:hidden}
 .review-screen .review-analysis .graph-key{display:flex;margin:0;font-size:10px}
 .review-screen .branch-note{grid-column:1}
}

/* Two complete caption lines; expansion stays in the document flow. */
.review-main .coaching-copy,.review-screen .review-main .coaching-copy{height:64px;min-height:64px;padding:8px 40px 8px 0;background:none;border:0;border-radius:0;margin-top:10px;display:block}
.review-main .transcript-scroll{height:48px;overflow:hidden;scrollbar-width:none}
.review-main .coaching-copy .coach-text{line-height:24px;font-size:16px;margin:0}
.review-main .coaching-copy.expanded,.review-screen .review-main .coaching-copy.expanded{position:relative;inset:auto;height:auto;max-height:none;min-height:64px;padding:8px 40px 8px 0;z-index:auto;background:none;border:0;overflow:visible}
.review-main .coaching-copy.expanded .transcript-scroll{height:auto;overflow:visible}

@media(max-width:360px){.review-main .transport #show-attacks{font-size:11px;padding-inline:3px}}