:root{--ink:#2d231a;--forest:#2d2217;--gold:#d7b277;--paper:#f5f0e6;--line:#dacdb9;--muted:#756554;--wood-dark:#836248;--wood-light:#ead9be;--wood-border:#5a3d26;--wood-green:#7f8e6f}*{box-sizing:border-box}html,body{margin:0;min-width:0}body{font:15px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--paper);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #a77d36;outline-offset:3px}button:disabled{cursor:not-allowed}.skip-game{position:absolute;left:-9999px}.skip-game:focus{left:15px;top:15px;z-index:100;background:white;padding:8px}.game-header{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--forest);color:#fff;padding:0 clamp(10px,2vw,22px);position:relative;z-index:20}.game-brand{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:.73rem;letter-spacing:.065em;font-weight:700}.game-brand span{color:var(--gold);font-size:1.35rem;line-height:1}.game-brand b{color:var(--gold)}.header-links{display:flex;align-items:center;gap:8px}.header-links a{color:#eadfcb;font-size:.8rem;text-decoration:none}.minimal-button{background:#fff;border:1px solid #bcae9c;border-radius:6px;color:var(--ink);padding:9px 12px;font-size:.8rem;font-weight:650}.header-links .minimal-button{background:#4a3625;color:#fff;border-color:#76593f;padding:6px 9px;font-size:.73rem}.language-menu{position:relative}.lang-button{display:flex;align-items:center;gap:7px;background:#4a3625;color:#fff;border:1px solid #76593f;border-radius:999px;padding:5px 8px;font-size:.72rem;font-weight:700}.lang-current{letter-spacing:.08em}.language-options{position:absolute;top:calc(100% + 8px);right:0;width:200px;background:#fff;border:1px solid #d7c8b6;border-radius:10px;box-shadow:0 15px 35px rgba(32,19,9,.22);padding:8px;display:grid;gap:5px}.language-option{border:1px solid #ebdfd1;background:#fff;border-radius:8px;padding:9px 10px;text-align:left;font-size:.8rem;color:#3c2e1f}.language-option.is-active{background:#f4ebdc;border-color:#d5b485;font-weight:700}.language-option:disabled{color:#907f6d;background:#f7f2ea}.game-layout{display:grid;grid-template-columns:minmax(185px,260px) minmax(280px,660px) minmax(250px,350px);justify-content:center;align-items:start;gap:clamp(12px,2vw,28px);max-width:1560px;padding:clamp(12px,2vw,30px);margin:auto}.game-sidebar{min-width:0}.game-left{position:sticky;top:18px;display:grid;gap:17px;padding-top:4px}.mini-label{font-size:.67rem;font-weight:850;letter-spacing:.12em;color:#9c784a;margin:0 0 7px}.game-left h1{font:normal clamp(1.75rem,2.5vw,2.7rem)/1.14 Georgia,serif;letter-spacing:-.045em;margin:0}.game-left h1 em{color:#b4844b;font-style:normal}.turn-panel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:15px;background:#fff;border:1px solid var(--line);border-radius:8px}.turn-panel strong{font-size:.87rem}.turn-panel>span:last-child{width:100%;padding-left:21px;font-size:.75rem;color:var(--muted)}.turn-dot{width:13px;height:13px;flex:0 0 13px;border:2px solid var(--ink);background:#f7ead4;border-radius:50%}.turn-dot.black{background:#3b2b1c}.stage-tabs{display:flex;flex-direction:column;gap:7px}.stage-tab{border:1px solid #d6cab6;border-radius:5px;padding:11px;text-align:left;background:#fff;color:#8b7d6e;font-weight:700;font-size:.85rem}.stage-tab.active{background:#5b3f28;color:#fff;border-color:#5b3f28}.stage-tab:disabled:not(.active){background:#ece5dc;color:#a19283;opacity:.82}.opening-card,.moves-panel{background:#fff;padding:14px 15px;border:1px solid var(--line);border-radius:7px;display:grid;gap:3px}.opening-card strong{font-size:.85rem}.opening-card small{color:var(--muted)}.moves-panel{max-height:140px;overflow:auto}.move-history{display:flex;flex-wrap:wrap;gap:4px 9px;font-size:.8rem;color:#5a4636}.move-history span{white-space:nowrap}.left-controls{display:flex;gap:6px;flex-wrap:wrap}.sidebar-small{color:#7a6a59;font-size:.75rem;margin:0}.game-center{min-width:0;padding-top:1px}.board-wrap{width:min(100%,660px);margin:auto;padding:12px;background:linear-gradient(145deg,#785535,#4d351f);box-shadow:0 15px 38px rgba(22,48,33,.17);border-radius:10px;border:2px solid #402917}.chessboard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;touch-action:manipulation;user-select:none;border:1px solid rgba(38,20,8,.35)}.square{border:0;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;padding:0;aspect-ratio:1;font:normal clamp(26px,4.4vw,54px)/1 Georgia,"DejaVu Sans",serif}.square.light{background:#e8cfa8 url("/assets/wood-light.webp?v=034") center/cover}.square.dark{background:#ab7f56 url("/assets/wood-dark.webp?v=034") center/cover}.square.last{box-shadow:inset 0 0 0 4px rgba(255,223,139,.45)}.square.selected{background:#eac47e}.square.legal:after{content:"";position:absolute;width:23%;height:23%;border-radius:50%;background:rgba(59,41,24,.36);pointer-events:none}.square.legal:has(.piece):after{width:83%;height:83%;background:transparent;border:4px solid rgba(80,45,20,.5)}.square.in-check{background:#c96762}.piece{position:relative;z-index:1;display:block;line-height:1}.piece.white{color:#fbf0d7;text-shadow:0 2px 1px rgba(69,43,20,.8),0 0 1px rgba(69,43,20,.8),1px 0 1px rgba(69,43,20,.8),-1px 0 1px rgba(69,43,20,.8)}.piece.black{color:#2f2012;text-shadow:0 1px 0 rgba(255,243,220,.18)}.piece[draggable=true]{cursor:grab}.square .coordinate{position:absolute;bottom:2px;right:3px;font:600 clamp(7px,.9vw,10px)/1 Arial,sans-serif;opacity:.62;color:#402715}.board-status{text-align:center;margin:8px 0;font-size:.82rem;color:#5f4b39}.board-status.warn{color:#9d4e35;font-weight:700}.mobile-turn,.mobile-checklist-toggle{display:none}.game-advisor{background:white;border:1px solid var(--line);box-shadow:0 7px 27px rgba(20,41,35,.05);border-radius:7px;position:sticky;top:18px;display:flex;flex-direction:column}.advisor-head{padding:19px 18px 8px}.advisor-head h2{font:normal 1.55rem/1.18 Georgia,serif;margin:0;letter-spacing:-.035em}.advisor-step{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 18px 12px}.advisor-step strong{font-size:.8rem;color:#685440}.mini-nav{border:1px solid #d5c6b1;background:#f8f2e8;border-radius:999px;padding:7px 12px;font-size:.74rem;color:#5b4431;font-weight:700}.advisor-questions{padding:0 15px 15px;flex:1}.advisor-question{border:1px solid #dfd5c6;border-radius:10px;padding:14px;background:#fff}.advisor-question.alert{border-color:#bd8b4f;background:#fff8ea}.advisor-question .question-row{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;cursor:pointer;font-weight:650;line-height:1.45;padding:8px 0;margin:4px 0 8px}.advisor-question input{width:19px;height:19px;flex:0 0 19px;accent-color:#6b4b2d;margin:1px 0 0}.advisor-question.checked{background:#f6f1e8}.question-tools{margin:10px 0 0 29px;display:flex;gap:6px;flex-wrap:wrap}.question-tools button{background:#f1ede6;border:1px solid #d8cdbc;border-radius:999px;font-size:.72rem;padding:6px 10px;color:#5a4636}.question-tools button.learned{margin-left:auto;background:#f5efdd;border-color:#d6bd8f}.question-detail-panel{margin:10px 0 0 29px;padding:10px 12px;background:#f4f2eb;border-radius:8px;font-size:.78rem;line-height:1.55;color:#4d4033}.question-detail-panel[hidden],.promotion-overlay[hidden],.language-options[hidden]{display:none}.advisor-foot{border-top:1px solid var(--line);padding:12px 17px}.advisor-progress{display:flex;align-items:center;gap:11px;color:#5c4b3c;font-size:.75rem;margin-bottom:10px}.advisor-progress>span{flex:1;height:6px;background:#ebe3d7;border-radius:5px;overflow:hidden}.advisor-progress>span>span{display:block;height:100%;background:#8f6a41;width:0;transition:width .18s}.advisor-notice{font-size:.75rem;color:#6e6256;line-height:1.45;margin:8px 0}.ready-button{border:0;background:#5b3f28;color:#fff;width:100%;padding:12px 10px;border-radius:5px;font-weight:750;font-size:.82rem}.ready-button:disabled{background:#e5ddd2;color:#736558}.ready-button[hidden],.board-status[hidden]{display:none}.learned-drawer{font-size:.77rem;color:#47634f;margin-top:11px}.learned-drawer summary{cursor:pointer;color:#5a4734}.learned-row{display:flex;gap:7px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:8px 0;font-size:.74rem}.learned-row span{padding-right:8px;line-height:1.45;color:#423426}.learned-row button{border:1px solid #cdbfac;background:#fff;border-radius:6px;font-size:.72rem;padding:7px 10px}.learned-drawer .minimal-button{margin-top:9px}.promotion-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,22,17,.65);display:grid;place-items:center;padding:20px}.promotion-card{background:white;border-radius:8px;padding:27px;max-width:380px;width:100%;text-align:center}.promotion-card h2{font:normal 1.5rem Georgia,serif}.promotion-options{display:flex;gap:6px;justify-content:center;margin:17px 0}.promotion-options button{border:1px solid #c2d0c1;background:#f5f5ef;border-radius:5px;font-size:2.4rem;min-width:58px;min-height:58px}
@media(max-width:1120px){.game-layout{grid-template-columns:minmax(165px,210px) minmax(250px,1fr) minmax(245px,295px);gap:12px}.square{font-size:clamp(26px,4.3vw,48px)}}
@media(max-width:850px){.game-header{height:46px}.game-layout{grid-template-columns:1fr;max-width:650px;padding:12px 10px 30px}.game-left{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0}.game-left h1,.game-left>.mini-label,.turn-panel,.stage-tabs,.opening-card,.moves-panel,.sidebar-small{display:none}.left-controls{margin-left:auto}.left-controls .minimal-button{font-size:.72rem}.game-center{width:100%}.board-wrap{padding:8px}.square{font-size:clamp(29px,8.2vw,62px)}.mobile-turn{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 6px 11px;font-size:.82rem}.mobile-turn span{color:#6d5844;font-size:.76rem;letter-spacing:.015em}.game-advisor{display:block;position:static;height:auto;max-height:none;margin-top:14px}.advisor-questions{padding-bottom:16px}.mobile-checklist-toggle{display:flex;justify-content:space-between;align-items:center;border:0;border-radius:8px;background:#5b3f28;color:#fff;padding:12px 16px;font-size:.88rem;font-weight:750;width:100%;margin-top:10px}.board-status{margin:12px 5px}.header-links .muted-link{display:none}.advisor-step{padding-top:13px;padding-bottom:10px}.header-links{gap:8px}.lang-button{padding:8px 10px}.language-options{right:-4px;width:190px}}
@media(max-width:375px){.game-header{padding:0 10px}.game-brand{font-size:.61rem;letter-spacing:.035em}.header-links .minimal-button{padding:5px 7px}.square{font-size:clamp(25px,8vw,33px)}.left-controls .minimal-button{padding:7px}.advisor-question .question-row{font-size:.88rem}.question-tools{margin-left:0}.question-detail-panel{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;scroll-behavior:auto}}
.opening-observation{font-size:.77rem;line-height:1.5;color:#5c4a3b;margin:7px 0 0}

/* r4: single-screen practice workspace; keep the board and one checklist point in view. */
html,body{height:100%;overflow:hidden}
.game-page{height:100dvh;display:flex;flex-direction:column}
.game-header{flex:0 0 46px;min-height:46px;box-shadow:none}
.game-layout{flex:1;min-height:0;width:100%;height:calc(100dvh - 46px);overflow:hidden;align-items:start;padding:clamp(7px,1.1vh,12px) clamp(8px,1.3vw,19px);gap:clamp(8px,1.1vw,16px)}
.game-left{position:static;gap:clamp(7px,1.1vh,13px)}
.game-left h1{font-size:clamp(1.45rem,2vw,2.15rem)}
.turn-panel{padding:10px;background:transparent;border:0;border-radius:0}
.stage-tabs{gap:4px}.stage-tab{padding:6px 9px;border:0;border-radius:3px;font-size:.78rem}
.opening-card,.moves-panel{padding:8px 10px;border:0;border-radius:3px;box-shadow:none}
.moves-panel{max-height:min(16dvh,105px)}
.left-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.history-controls{display:flex;gap:5px;align-items:center;margin-left:auto}
.minimal-button,.header-links .minimal-button{border:0;border-radius:3px;padding:5px 9px;min-height:26px;font-size:.73rem;line-height:1.15}
.lang-button{border:0;border-radius:3px;padding:5px 7px;min-height:26px}
.game-center{display:flex;flex-direction:column;min-width:0;min-height:0;max-height:100%;justify-content:center}
.board-wrap{width:min(100%,calc(100dvh - 98px));max-height:calc(100dvh - 98px);flex:0 1 auto;aspect-ratio:1;padding:clamp(4px,.8vw,9px);border:0;border-radius:3px;box-shadow:0 4px 17px rgba(50,30,15,.15)}
.chessboard{height:100%;width:100%;min-height:0}
.board-status{font-size:.74rem;margin:5px 0;flex:0 0 auto}
.game-advisor{position:static;max-height:100%;min-height:0;display:flex;flex-direction:column;border:0;border-radius:3px;box-shadow:none;padding:0;overflow:hidden}
.advisor-step{flex:0 0 auto;padding:7px 8px;gap:6px}
.mini-nav{border:0;border-radius:3px;padding:5px 9px;min-height:26px;line-height:1.15}
.advisor-questions{flex:0 1 auto;min-height:0;padding:2px 9px 5px;overflow:hidden}
.advisor-question{border:0;border-radius:3px;padding:9px 6px;background:#fff}
.advisor-question.alert{border:0;box-shadow:inset 3px 0 #b8864e}
.question-tools{margin:8px 0 0 26px;gap:5px}
.question-tools button{border:0;border-radius:3px;padding:4px 8px;font-size:.71rem;min-height:24px}
.question-detail-panel{margin:5px 0 0 26px;padding:6px 8px;max-height:min(17dvh,106px);overflow:auto}
.advisor-foot{padding:5px 9px 8px;border:0;flex:0 0 auto}
.advisor-progress{margin:0 0 4px}.advisor-progress>span{height:3px}
.ready-button{min-height:28px;border:0;border-radius:3px;padding:5px 7px;font-size:.73rem}
.learned-trigger{display:block;border:0;background:transparent;color:#5c4835;font:650 .73rem/1.25 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;text-align:left;padding:6px 2px;cursor:pointer;width:100%;min-height:26px}
.learned-trigger:hover,.learned-trigger:focus-visible{color:#2d231a}
.learned-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.learned-overlay[hidden]{display:none}
.learned-backdrop{position:absolute;inset:0;background:rgba(28,19,10,.46)}
.learned-modal{position:relative;background:#fffaf4;color:#3e3022;width:min(100%,740px);max-height:min(62dvh,550px);display:flex;flex-direction:column;gap:8px;padding:14px clamp(14px,2vw,22px) max(13px,env(safe-area-inset-bottom));border-radius:8px 8px 0 0;box-shadow:0 -8px 35px rgba(32,20,10,.25);animation:learned-rise .22s ease-out}
.learned-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.learned-modal h2{font:600 1rem/1.3 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;margin:0}
.learned-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
.learned-row{border:0;border-bottom:1px solid #eee7dc;padding:7px 0}
.learned-row:last-child{border-bottom:0}
.learned-row button{border:0;border-radius:3px;background:#eee4d4;min-height:27px}
.learned-modal>.minimal-button{align-self:flex-start;background:#eee4d4}
@keyframes learned-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(max-width:1120px) and (min-width:851px){.game-layout{grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(210px,290px);gap:9px}.game-left h1{font-size:1.5rem}.board-wrap{width:min(100%,calc(100dvh - 100px))}}
@media(max-width:850px){
 .game-header{flex-basis:42px;min-height:42px;height:42px;padding:0 9px}
 .game-layout{height:calc(100dvh - 42px);max-width:650px;display:flex;flex-direction:column;flex:1;gap:0;padding:5px 8px 4px;overflow:hidden}
 .game-left{flex:0 0 auto;display:flex;justify-content:space-between;gap:2px;width:100%;min-height:27px}
 .left-controls{flex:1;justify-content:space-between;gap:5px;margin:0}.left-controls .minimal-button{padding:4px 8px;font-size:.68rem;min-height:24px}
 .history-controls{margin-left:auto;gap:5px}
 .game-center{flex:0 0 auto;width:100%;max-height:none;display:flex;gap:0;padding:0;justify-content:flex-start}
 .mobile-turn{padding:0 2px 4px;min-height:23px;gap:4px;font-size:.76rem}
 .mobile-turn span{font-size:.68rem;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .board-wrap{width:min(calc(100vw - 22px - var(--board-reduction,0px)),calc(100dvh - 308px - var(--board-reduction,0px)),600px);height:auto;max-height:none;flex:0 0 auto;aspect-ratio:1;padding:clamp(3px,.65vw,7px);margin:0 auto}
 .chessboard{height:100%;width:100%}
 .game-advisor{margin-top:6px;width:100%;flex:1;min-height:0;display:flex;overflow:hidden;gap:0}
 .advisor-step{padding:5px 7px;min-height:34px}
 .advisor-questions{padding:0 8px 3px;flex:1;overflow:hidden}
 .advisor-question{padding:8px 8px}
 .advisor-question .question-row{font-size:clamp(.77rem,2.5vw,.9rem);line-height:1.3}
 .question-tools{margin-top:5px}
 .question-detail-panel{margin-top:4px;max-height:clamp(30px,10dvh,95px)}
 .advisor-foot{padding:2px 8px 4px}
 .learned-trigger{padding:3px 2px;min-height:23px}
 .board-status{margin:4px 0 0;min-height:0;font-size:.7rem}
 .mobile-checklist-toggle{display:none}
 .header-links{gap:5px}
 .game-brand{font-size:.69rem;white-space:nowrap}
 .game-brand span{font-size:1.25rem}
 .header-links .minimal-button{padding:5px 7px;font-size:.68rem}
 .lang-button{padding:4px 6px;min-height:24px;font-size:.68rem}
 .learned-modal{max-height:min(67dvh,550px)}
}
@media(max-width:375px){.board-wrap{width:min(calc(100vw - 20px - var(--board-reduction,0px)),calc(100dvh - 300px - var(--board-reduction,0px)))}.game-brand{font-size:.61rem;letter-spacing:0}.game-brand span{font-size:1.15rem}.advisor-question .question-row{font-size:.78rem}.question-tools{margin-left:24px}.question-detail-panel{margin-left:24px}}
@media(max-height:620px) and (min-width:851px){.game-left h1{display:none}.game-left{gap:6px}.stage-tab{padding:5px 7px}.opening-observation,.sidebar-small{display:none}.game-advisor .advisor-step{padding:4px 8px}.board-wrap{width:min(100%,calc(100dvh - 76px))}}
@media(prefers-reduced-motion:reduce){.learned-modal{animation:none}}
/* The navigation counter replaces the visual progress separator. */
.advisor-progress{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
@media(max-width:850px){.game-advisor{flex:0 0 auto;max-height:calc(100dvh - 42px)}.advisor-questions{flex:0 0 auto}}
@media(max-width:850px){.game-layout{justify-content:flex-start;align-items:stretch}}
/* Short landscape screens keep the board beside the controls, rather than shrinking it to a strip. */
@media(max-width:850px) and (orientation:landscape) and (max-height:540px){
 .game-layout{display:grid;grid-template-columns:minmax(74px,110px) minmax(0,1fr) minmax(155px,220px);align-items:start;justify-content:center;gap:6px;padding:4px 8px}
 .game-left{display:flex;align-items:stretch;justify-content:flex-start;min-width:0}
 .left-controls{display:flex;flex-direction:column;align-items:stretch;gap:6px}
 .left-controls .minimal-button{width:100%;font-size:.66rem;padding:5px 2px}
 .history-controls{margin:0;display:flex;flex-direction:column;align-items:stretch}
 .game-center{width:100%;min-width:0;min-height:0;justify-content:flex-start}
 .mobile-turn{font-size:.7rem;flex-wrap:wrap;padding:0 0 3px;line-height:1.2}
 .mobile-turn span{font-size:.61rem;max-width:100%}
 .board-wrap{width:min(100%,calc(100dvh - 73px));max-width:100%;padding:4px}
 .game-advisor{margin:0;max-height:calc(100dvh - 53px);min-height:0;overflow:hidden}
 .advisor-step{padding:3px 2px;min-height:28px}
 .mini-nav{padding:3px 5px;font-size:.66rem;min-height:23px}
 .advisor-question{padding:5px 2px}.advisor-question .question-row{font-size:.72rem}
 .advisor-question input{width:16px;height:16px;flex:0 0 16px}
 .question-tools{margin-left:0;gap:4px;flex-wrap:wrap}.question-tools button{padding:4px 5px;font-size:.65rem}
 .question-detail-panel{margin-left:0;max-height:17dvh;font-size:.68rem}
 .advisor-foot{padding:2px 3px}
 .learned-trigger{font-size:.65rem}
}
@media(max-width:560px) and (orientation:landscape) and (max-height:540px){
 .game-layout{grid-template-columns:minmax(0,1fr) minmax(155px,175px);grid-template-rows:26px minmax(0,1fr);gap:3px 6px}
 .game-left{grid-column:1/-1;grid-row:1;justify-content:flex-start}
 .left-controls{flex-direction:row;align-items:center;justify-content:space-between}
 .left-controls .minimal-button{width:auto;padding:3px 6px}
 .history-controls{margin-left:auto;flex-direction:row}
 .game-center{grid-column:1;grid-row:2}
 .game-advisor{grid-column:2;grid-row:2}
 .board-wrap{width:min(100%,calc(100dvh - 109px))}
}
.learned-modal .learned-row{border:0}
.learned-modal #restore-learned{display:block;margin:10px 0 0 auto}
.learned-modal-head .minimal-button{padding-inline:10px}
.learned-list{margin-top:6px}


/* r5 — mobile portrait: fixed top controls, vertically centered board module, bottom checklist. */
.learned-trigger{background:#e9dcc9;color:#513921;border-radius:3px;padding:9px 12px;min-height:35px;font-weight:720}
.learned-trigger:hover,.learned-trigger:focus-visible{background:#dcc5a6;color:#322317}
@media(max-width:850px) and (orientation:portrait){
 .game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch;justify-content:stretch;gap:0;min-height:0;height:auto;padding:5px 8px 5px}
 .game-left{grid-column:1;grid-row:1;align-self:start;min-height:0;margin:0;padding:0}
 .left-controls{margin-top:5px}
 .game-center{grid-column:1;grid-row:2;align-self:center;justify-self:center;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;width:100%;height:auto;max-height:100%;padding:0;margin:0}
 .mobile-turn{width:var(--mobile-board-size,100%);max-width:100%;margin:0 auto;padding:0 2px 5px;min-height:22px}
 .board-wrap{width:var(--mobile-board-size,min(100%,calc(100dvh - 325px)));max-width:100%;height:auto;max-height:none;flex:0 0 auto;aspect-ratio:1;margin:0 auto;padding:clamp(3px,.65vw,7px)}
 .game-advisor{grid-column:1;grid-row:3;align-self:end;margin:0;min-height:0;max-height:min(38dvh,320px);height:auto;flex:0 0 auto;display:flex;flex-direction:column;overflow:hidden}
 .advisor-step{flex:0 0 auto;padding:4px 7px;min-height:29px}
 .advisor-questions{flex:0 1 auto;min-height:0;padding:0 8px 3px;overflow:hidden}
 .advisor-question{padding:8px 8px}
 .advisor-foot{flex:0 0 auto;padding:2px 5px 4px}
 .learned-trigger{min-height:34px;padding:8px 11px;margin-top:3px}
 .question-detail-panel{max-height:min(13dvh,98px);overflow:auto}
}
@media(max-width:850px) and (orientation:portrait) and (max-height:650px){
 .game-layout{padding-top:3px;padding-bottom:3px}
 .mobile-turn{min-height:18px;padding-bottom:2px;font-size:.68rem}
 .advisor-step{padding:2px 6px;min-height:25px}
 .advisor-question{padding:6px 6px}
 .advisor-foot{padding:0 4px 2px}
 .learned-trigger{min-height:30px;padding:6px 10px}
 .question-detail-panel{max-height:11dvh}
}

/* r8 — filled chess glyphs remain light irrespective of color-font fallback. */
.piece{font-family:"DejaVu Sans","Segoe UI Symbol","Apple Symbols",Georgia,serif;font-variant-emoji:text}
.piece.white{color:#fff9ec;-webkit-text-fill-color:#fff9ec;text-shadow:0 1px 1px rgba(51,32,16,.8),1px 0 1px rgba(51,32,16,.7),-1px 0 1px rgba(51,32,16,.7)}
.piece.white.pawn{color:#fff9ec;-webkit-text-fill-color:#fff9ec;text-shadow:none;filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(51,32,16,.85))}
/* One horizontal toolbar: learned in the center, help/tips at the right. */
.advisor-question .question-tools{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:6px;min-height:29px;margin:10px 0 0;padding:0 1px;flex-wrap:nowrap}
.advisor-question .question-tools>button:first-child,.advisor-question .question-tools>button:nth-child(2){grid-column:auto;grid-row:auto}
.advisor-question .question-tools>button.learned{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;min-width:84px;white-space:nowrap;grid-column:auto;grid-row:auto}
.advisor-question .question-detail-panel{margin-left:0}
/* Center the board module in the available viewport and reserve an actual gap before the checklist. */
@media(max-width:850px) and (orientation:portrait){
 .game-layout{height:calc(100dvh - 42px);min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(72px,1fr) auto auto;align-content:stretch;justify-content:stretch;align-items:stretch;gap:0;padding:5px 8px 5px;overflow:hidden}
 .game-left{grid-column:1;grid-row:1;align-self:start;margin:0;padding:0;min-height:0}
 .game-left .left-controls{margin-top:15px}
 .game-center{grid-column:1;grid-row:2;align-self:center;justify-self:center;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0}
 .mobile-turn{width:var(--mobile-board-size,100%);max-width:100%;margin:0 auto;padding:0 2px 5px;min-height:22px}
 .board-wrap{width:var(--mobile-board-size,min(100%,calc(100dvh - 325px)));max-width:100%;height:auto;max-height:none;flex:0 0 auto;aspect-ratio:1;margin:0 auto;padding:clamp(3px,.65vw,7px)}
 .game-advisor{grid-column:1;grid-row:3;align-self:end;display:flex;flex-direction:column;justify-content:space-between;height:clamp(178px,26dvh,225px);max-height:none;min-height:0;flex:0 0 auto;margin:20px 0 0;padding:0;overflow:hidden}
 .advisor-step{flex:0 0 auto;padding:4px 7px;min-height:29px}
 .advisor-questions{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:2px 8px 5px}
 .advisor-question{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly;min-height:0;margin:0;padding:5px 7px 6px}
 .advisor-question .question-row{flex:0 0 auto;padding:5px 0;margin:1px 0 3px;line-height:1.35;font-size:clamp(.74rem,2.4vw,.87rem)}
 .advisor-question .question-tools{flex:0 0 auto;margin:4px 0 5px;min-height:25px;gap:4px}
 .advisor-question .question-tools button{padding:4px 5px;font-size:.65rem}
 .advisor-question .question-tools>button.learned{min-width:80px}
 .advisor-question .question-detail-panel{flex:0 1 auto;min-height:0;max-height:min(10dvh,72px);overflow:auto}
 .advisor-foot{flex:0 0 auto;padding:0 5px 5px}
 .learned-trigger{min-height:33px;margin:0}
}
@media(max-width:850px) and (orientation:portrait) and (max-height:650px){
 .game-layout{padding-top:3px;padding-bottom:3px}
 .game-advisor{height:clamp(175px,31dvh,195px);margin-top:20px}
 .advisor-step{padding:2px 6px;min-height:25px}
 .advisor-question{padding:3px 5px 4px}
 .advisor-question .question-row{padding:3px 0;margin:0 0 2px;font-size:.72rem}
 .advisor-question .question-tools{margin:2px 0 4px;min-height:23px}
 .advisor-foot{padding:0 4px 3px}
 .learned-trigger{min-height:30px}
 .advisor-question .question-detail-panel{max-height:min(7dvh,42px)}
}
/* Keep the confirmation separate from the permanently visible learned bar. */
.game-advisor .ready-button:not([hidden]) + .learned-trigger{margin-top:7px}
@media(max-width:850px) and (orientation:portrait){
 .game-advisor:has(.ready-button:not([hidden])){height:calc(clamp(178px,26dvh,225px) + 8px)}
}
@media(max-width:850px) and (orientation:portrait) and (max-height:650px){
 .game-advisor:has(.ready-button:not([hidden])){height:calc(clamp(175px,31dvh,195px) + 8px)}
}
/* Expanded guidance receives usable space without moving the checklist over the board. */
@media(max-width:850px) and (orientation:portrait){
 .game-advisor:has(.question-detail-panel:not([hidden])){height:calc(clamp(178px,26dvh,225px) + 48px)}
 .advisor-question .question-detail-panel:not([hidden]){max-height:min(11dvh,74px)}
}
@media(max-width:850px) and (orientation:portrait) and (max-height:650px){
 .game-advisor:has(.question-detail-panel:not([hidden])){height:calc(clamp(175px,31dvh,195px) + 48px)}
 .advisor-question .question-detail-panel:not([hidden]){max-height:min(11dvh,60px)}
}

/* r9: when all current checkpoints have been learned, show only the move action and the learned-questions bar. */
.game-advisor .advisor-step[hidden],.game-advisor .advisor-questions[hidden],.game-advisor .advisor-progress[hidden]{display:none}
.game-advisor .ready-button{background:#1767c9;color:#fff;border:0;border-radius:3px;min-height:58px;padding:13px 16px;font-size:1rem;font-weight:750;line-height:1.2}
.game-advisor .ready-button:not([hidden]):hover{background:#1054a9}
.game-advisor .ready-button:not([hidden]):focus-visible{outline:3px solid #153e86;outline-offset:2px}
.game-advisor .ready-button:disabled{background:#c4d5e8;color:#3a5774}
.game-advisor .ready-button:not([hidden]) + .learned-trigger{margin-top:15px}
.game-advisor.is-empty{min-height:165px}
.game-advisor.is-empty .advisor-foot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.game-advisor.is-empty .ready-button:not([hidden]){min-height:78px;margin:auto 0 17px;font-size:1.08rem}
.game-advisor.is-empty.is-unlocked{min-height:0}
@media(max-width:850px) and (orientation:portrait){
 .game-advisor.is-empty{height:clamp(155px,22dvh,190px);min-height:0}
 .game-advisor.is-empty .ready-button:not([hidden]){min-height:clamp(65px,10dvh,88px);margin:auto 0 14px}
 .game-advisor.is-empty.is-unlocked{height:42px}
}
@media(max-width:850px) and (orientation:portrait) and (max-height:650px){
 .game-advisor.is-empty{height:clamp(145px,26dvh,170px)}
 .game-advisor.is-empty .ready-button:not([hidden]){min-height:65px;margin:auto 0 10px}
 .game-advisor.is-empty.is-unlocked{height:38px}
}

/* r10: fixed mobile layout slots keep the complete board module anchored through checklist state changes. */
@media (max-width:850px) and (orientation:portrait){
 .game-layout{--advisor-reserved:clamp(202px,26dvh,226px);grid-template-rows:46px minmax(0,1fr) var(--advisor-reserved);height:calc(100dvh - 42px);min-height:0;align-items:stretch;}
 .game-left{grid-row:1;align-self:start;min-height:0}
 .game-center{grid-row:2;align-self:center;justify-self:center;max-height:100%;min-height:0;}
 .game-advisor,.game-advisor.is-empty,.game-advisor.is-empty.is-unlocked,
 .game-advisor:has(.ready-button:not([hidden])),.game-advisor:has(.question-detail-panel:not([hidden])){
  grid-row:3;align-self:stretch;height:var(--advisor-reserved);min-height:0;max-height:var(--advisor-reserved);
  margin:0;padding:18px 0 0;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;
 }
 .advisor-step{flex:0 0 auto}
 .advisor-questions{flex:1 1 auto;min-height:0;overflow:hidden}
 .advisor-foot,.game-advisor.is-empty .advisor-foot{flex:0 0 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;margin-top:auto;padding:0 5px 4px;}
 .game-advisor .ready-button:not([hidden]),.game-advisor.is-empty .ready-button:not([hidden]){
  min-height:55px;margin:5px 0 13px;flex:0 0 auto;
 }
 .game-advisor.is-empty .advisor-foot{flex:1 1 auto}
 .game-advisor.is-empty .ready-button:not([hidden]){min-height:70px;margin:auto 0 14px}
 .game-advisor.is-empty.is-unlocked .advisor-foot{justify-content:flex-end}
 .learned-trigger{flex:0 0 auto}
 .game-advisor.is-empty.is-unlocked .learned-trigger{margin-top:auto}
}
@media (max-width:850px) and (orientation:portrait) and (max-height:650px){
 .game-layout{--advisor-reserved:202px}
 .game-advisor,.game-advisor.is-empty,.game-advisor.is-empty.is-unlocked,
 .game-advisor:has(.ready-button:not([hidden])),.game-advisor:has(.question-detail-panel:not([hidden])){
  height:var(--advisor-reserved);max-height:var(--advisor-reserved);padding-top:18px;
 }
 .game-advisor .ready-button:not([hidden]),.game-advisor.is-empty .ready-button:not([hidden]){margin-bottom:10px}
}
/* Keep one checklist item, with a clear confirmation and a transition to the following item. */
.advisor-question .question-tools>button.learned{background:#1767c9;color:white;border:0;border-radius:3px;}
.advisor-question .question-tools>button.learned:hover{background:#1054a9;color:white}
.advisor-question .question-tools>button.learned:disabled{opacity:1;cursor:default}
.advisor-question.learning-checked{background:#dcebd8;transition:background-color .25s ease,opacity .22s ease,transform .22s ease;}
.advisor-question.learning-checked .question-row input{accent-color:#317f41}
.advisor-question.learning-exit{opacity:0;transform:translateY(-9px)}
.advisor-question.learning-enter{animation:checkpoint-enter .28s ease-out both}
@keyframes checkpoint-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.advisor-question.learning-enter{animation:none}.advisor-question.learning-checked{transition:none}}

/* r11: captured pieces are part of the board module, with reserved rows to avoid layout shifts. */
.captured-pieces{width:min(100%,calc(100dvh - 98px));max-width:100%;min-height:21px;height:21px;display:flex;align-items:center;justify-content:flex-start;gap:1px;overflow:hidden;padding:0 5px;line-height:1;flex:0 0 21px}
.captured-piece{display:inline-block;font-family:"DejaVu Sans","Segoe UI Symbol",Georgia,serif;font-size:clamp(13px,1.6vw,21px);line-height:1;white-space:nowrap}
.captured-piece.white{color:#fff9e9;-webkit-text-fill-color:#fff9e9;text-shadow:0 1px 1px #4b3320,1px 0 1px #4b3320,-1px 0 1px #4b3320}
.captured-piece.black{color:#2d2118;text-shadow:0 1px 0 #c9b69a}
.game-center .captured-top{margin-bottom:10px}
.game-center .captured-bottom{margin-top:10px}
.move-ready{color:#5b3f28;font-weight:760;font-size:1rem;line-height:1.3;text-align:center;margin:9px 0 15px;min-height:24px}
.move-ready[hidden]{display:none}
@media(max-width:850px){
 .game-left .mobile-turn{display:flex;order:2;flex:1 0 100%;width:100%;margin:0;padding:3px 2px 0;min-height:22px;align-items:center}
 .game-center .captured-pieces{width:var(--mobile-board-size,100%);height:20px;min-height:20px;flex-basis:20px;padding:0 3px}
 .game-center .captured-piece{font-size:clamp(14px,4.6vw,20px)}
 .game-center .board-wrap{flex:0 0 auto}
}
@media(max-width:850px) and (orientation:portrait){
 .game-layout{grid-template-rows:82px minmax(0,1fr) var(--advisor-reserved)}
 .game-left{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:space-between;gap:0}
 .game-left .left-controls{flex:0 0 100%;width:100%;margin-top:15px}
 .game-left .mobile-turn{flex:0 0 100%;width:100%;margin-top:5px;padding:0 2px}
 .game-center{align-self:center;justify-self:center;gap:0}
 .game-center .captured-pieces{width:var(--mobile-board-size,100%)}
 .game-center .captured-top{margin-bottom:10px}
 .game-center .captured-bottom{margin-top:10px}
 .game-advisor .move-ready{margin:9px 0 15px;flex:0 0 auto}
}
@media(max-width:850px) and (orientation:landscape){.game-left .mobile-turn{display:none}.captured-pieces{height:16px;min-height:16px;flex-basis:16px}}

/* r13: orientation switch sits beside Flip board without adding a new vertical row. */
.board-orientation{display:flex;align-items:center;gap:6px;min-width:0}
.auto-flip{display:inline-flex;align-items:center;gap:5px;min-height:25px;padding:3px 5px;border:0;border-radius:3px;background:transparent;color:var(--ink);font-size:.72rem;line-height:1.15;font-weight:650;white-space:nowrap}
.auto-flip-track{width:26px;height:15px;flex:0 0 26px;padding:2px;border-radius:999px;background:#b9a998;transition:background-color .18s ease}
.auto-flip-thumb{display:block;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.17);transition:transform .18s ease}
.auto-flip[aria-checked="true"] .auto-flip-track{background:#35735c}
.auto-flip[aria-checked="true"] .auto-flip-thumb{transform:translateX(11px)}
@media(max-width:850px){.board-orientation{gap:3px}.auto-flip{gap:4px;font-size:.67rem;padding:3px 2px}.auto-flip-track{width:24px;flex-basis:24px}.auto-flip[aria-checked="true"] .auto-flip-thumb{transform:translateX(9px)}}
@media(max-width:560px) and (orientation:landscape) and (max-height:540px){.board-orientation{align-self:center}.auto-flip{font-size:.64rem;padding:2px}}
@media(prefers-reduced-motion:reduce){.auto-flip-track,.auto-flip-thumb{transition:none}}