/* Android phone/tablet audit: keep the board and its immediate controls together. */
input,select,.filter-btn,.source-button,.speed-label select,.welcome-language select{min-height:44px}
.icon-btn,.work-header .icon-btn,.opening-row>.icon-btn,.filter-row .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px}
.quiet,.game-tools .quiet{min-width:44px;min-height:44px}
.switch{width:52px;height:44px;background:transparent}
.switch:before{content:'';position:absolute;inset:8px 0;background:#53424b;border-radius:20px}
.switch:after{top:12px;left:5px;width:20px;height:20px}
.switch[aria-checked=true]{background:transparent}
.switch[aria-checked=true]:before{background:var(--red)}
.switch[aria-checked=true]:after{transform:translateX(22px)}
.work-header{padding:10px 0;margin-bottom:12px;gap:10px;min-height:65px}
.work-header span{font-size:11px}
.workspace{padding-bottom:20px}
.board-column{width:100%;max-width:100%;margin:0 auto}
.board-frame{max-width:100%;padding:16px;margin:auto}
.work-grid{gap:24px;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr)}
.work-side{display:flex!important;flex-direction:column;max-width:none;width:100%;margin:0}
.work-side>h1{font-size:26px}
.current-move{padding:10px 12px;min-height:44px;gap:8px}
.current-move>strong{font-size:clamp(17px,3vw,24px);white-space:normal;text-align:center;overflow-wrap:anywhere}
.replay-controls{margin-top:8px;gap:8px}
.replay-controls>.secondary{min-height:44px;padding:10px}
.speed-label{margin-top:8px}
.lesson .current-move{order:-5}.lesson .replay-controls{order:-4}.lesson .speed-label{order:-3}.lesson .board-notes{order:-2}
.board-notes{min-width:0}
.move-strip{margin:10px 0;padding:0;max-height:90px}
.board-caption{font-size:11px;margin:8px 0 12px}
.practice:has(.turn-card) .turn-card{order:-5;margin:0;padding:10px 12px;min-height:44px}
.practice:has(.turn-card) .feedback{order:-4}
.practice:has(.turn-card) .practice-tools{order:-3;gap:0 12px}
.practice:has(.turn-card) .attempt-stats{order:-2;margin-top:6px;padding-top:8px}
.practice-tools .quiet{font-size:12px}
.practice:has(.turn-card) .work-side>h1,.practice:has(.turn-card) .work-side>.eyebrow{display:none}
.practice .work-side>p{font-size:12px}
.game .work-side>h1,.game .work-side>.eyebrow,.game .work-side>p:first-of-type,.game .last-move{display:none}
.game-ribbon{margin:0;padding:10px 12px;min-height:44px;font-size:11px;flex-wrap:wrap}
.game-ribbon strong{font-size:20px}
.game-tools{margin-top:8px;gap:8px}
.game-tools .secondary{flex:1;font-size:12px;padding:10px 8px}
.game-tools .quiet{padding:6px 0;font-size:12px}
.game .work-side>p.subtle{font-size:11px;margin-top:4px}
.palette{gap:4px;margin-top:0;grid-template-columns:repeat(6,minmax(44px,1fr))}
.piece-option{min-width:44px;min-height:44px;height:clamp(44px,6vw,64px);max-height:none;aspect-ratio:auto;padding:3px}
.piece-option img{max-width:52px;max-height:52px;object-fit:contain}
.rebuild.phase-answer #palette{order:-5}
.rebuild.phase-answer .work-side>h1,.rebuild.phase-answer .work-side>.eyebrow,.rebuild.phase-answer .work-side>p:first-of-type{display:none}
.rebuild.phase-answer .edit-tools{order:-4;margin-top:6px;gap:8px}
.rebuild.phase-answer .feedback{order:-3;margin:4px 0}
.rebuild.phase-answer .feedback:empty{margin:0}
.rebuild.phase-answer .sticky-actions{order:-2;position:static;margin-top:6px;padding:0;gap:6px;flex-wrap:nowrap}
.sticky-actions .primary,.sticky-actions .secondary{min-height:44px;padding:9px 8px;font-size:12px}
.rebuild.phase-answer .board-column{max-width:100%}
.rebuild.phase-answer .board-caption{display:none}
.work-side>.subtle{font-size:12px}
dialog{max-height:calc(100dvh - 24px);padding:22px}
dialog h2{font-size:23px;margin-bottom:12px}
dialog .button-stack{margin-top:16px}
.history-moves{max-height:calc(100dvh - 190px);min-height:44px}
.keyboard-open .bottom-nav{display:none}
.keyboard-open .shell{padding-bottom:20px}
.keyboard-open .library-tools{position:static}
.keyboard-open .completion-legend,.keyboard-open .source-button{display:none}
.opening-info>span,.completion-mark{font-size:11px}
.source-button{font-size:12px}
.mode-card .secondary{font-size:12px}
.mode-card p,.blind-card p{font-size:12px}
.mode-card .subtle,.creator{font-size:11px}
.page-heading>.eyebrow,.work-side>.eyebrow{font-size:10px}

/* A tall tablet benefits from one large board, instead of two narrow columns. */
@media(orientation:portrait){
 .workspace{max-width:760px;padding-left:16px;padding-right:16px}
 .work-grid{display:flex;flex-direction:column;gap:10px}
 .board-column{max-width:min(100%,620px,calc(100dvh - 260px - var(--header-extra,0px)))}
 .lesson .board-column{max-width:min(100%,620px,calc(100dvh - 200px - var(--header-extra,0px)))}
 .practice .board-column{max-width:min(100%,620px,calc(100dvh - 225px - var(--header-extra,0px)))}
 .game .board-column{max-width:min(100%,620px,calc(100dvh - 235px - var(--header-extra,0px)))}
 .rebuild.phase-answer .board-column{max-width:min(100%,620px,max(224px,calc(100dvh - 276px - var(--header-extra,0px))))}
 .work-side{max-width:620px;margin:auto}
 .lesson .work-side>h1,.lesson .work-side>.eyebrow,.lesson .original-name{display:none}
 .game .board-caption{display:none}
 .rebuild.phase-answer .piece-option{height:44px}
 .rebuild.phase-answer .work-side{max-width:500px}
}
/* Keep both reconstruction actions above Android's bar on short portrait screens. */
@media(orientation:portrait) and (max-height:600px){
 .rebuild.phase-answer .board-column{max-width:min(100%,max(208px,calc(100dvh - 284px - var(--header-extra,0px))))}
}
@media(orientation:portrait) and (min-width:600px){
 .work-header{margin-bottom:20px;padding:16px 0}
 .work-header strong{font-size:20px}
 .work-header span{font-size:13px}
 .work-grid{gap:18px}
 .rebuild.phase-answer .piece-option{height:56px}
 .rebuild.phase-answer .work-side{max-width:620px}
}
@media(max-width:599px){
 .workspace{padding-left:10px;padding-right:10px}
 .work-header{padding:6px 0;margin-bottom:8px;min-height:60px}
 .work-header strong{font-size:13px;line-height:1.3}
 .work-header span{margin-top:3px}
 .board-frame{padding:13px}
 .work-grid{gap:8px}
 .practice .work-side>p{margin-top:8px}
 .topbar{padding:12px 0 16px}
 .page-heading{padding:4px 0 18px}
 .page-heading h1{font-size:30px}
 .page-heading p{margin-top:10px;font-size:13px}
 .home-modes{grid-template-columns:1fr}
 .blind-card{min-height:185px;padding:20px}
 .blind-card h2{margin:12px 0 8px;max-width:90%}
 .mode-card{padding:18px 20px}
 .mode-card>.icon{margin-bottom:12px}
 .mode-card p{margin-bottom:14px}
 .mode-card .secondary{min-height:44px;font-size:13px}
 .filter-row{gap:6px}
 .filter-row .filter-btn{font-size:11px;padding:8px}
 .filter-row select{font-size:12px;padding:8px}
 .library-tools{padding-bottom:10px}
 body[data-page=library] .topbar{padding-bottom:8px}
 body[data-page=library] .page-heading{padding-bottom:6px}
 body[data-page=library] .page-heading h1{font-size:26px}
 body[data-page=library] .page-heading p{font-size:12px;line-height:1.5;margin-top:7px}
 body[data-page=library] .page-heading .eyebrow{display:none}
 .completion-legend{gap:4px 14px;font-size:11px}
 .source-button{margin-bottom:0}
 .opening-link{padding:8px 4px;gap:8px}
 .opening-link>.icon{display:none}
 .setting-row{font-size:13px;gap:10px}
 .setting-row select{font-size:12px}
}

/* Short landscape: board stays visible while the adjacent controls can scroll. */
@media(orientation:landscape){
 .workspace{max-width:1240px;padding:0 16px 20px}
 .work-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(284px,1fr);gap:24px;align-items:start}
 .board-column,.rebuild.phase-answer .board-column,.game .board-column{max-width:min(100%,calc(100dvh - 100px));position:sticky;top:12px}
 .board-frame,.game .board-frame{max-width:100%}
 .work-side{max-width:none;margin:0}
 .board-caption{display:none}
}
@media(orientation:landscape) and (max-height:600px){
 .workspace{padding:0 10px 8px;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 .work-header{min-height:56px;flex-shrink:0;padding:5px 0;margin-bottom:8px}
 .work-header strong{font-size:14px}
 .work-header span{font-size:11px}
 .work-grid{flex:1;min-height:0;grid-template-columns:minmax(0,calc(100dvh - var(--header-space,64px) - 10px)) minmax(284px,1fr);gap:14px}
 .board-column,.rebuild.phase-answer .board-column,.game .board-column{max-width:100%;position:static}
 .board-frame{padding:13px}
 .work-side{height:100%;overflow:auto;overscroll-behavior:contain;padding:0 4px 16px 0;scrollbar-width:thin;scrollbar-color:#89633e transparent}
 .work-side>h1,.work-side>.eyebrow,.work-side>.original-name{display:none}
 .work-side>p{font-size:12px}
 .work-side>div,.work-side>p,.work-side>label,.work-side>h1{flex-shrink:0}
 .piece-option{height:44px}
 .rebuild.phase-answer .work-grid{gap:14px}
 .rebuild .work-side>.button-stack{margin-top:10px}
 .rebuild.phase-observe .work-side>.button-stack{order:-1}
 .game-ribbon{font-size:11px;gap:8px}
 .game .feedback{margin:4px 0}
 .game-tools{margin-top:4px}
 .game-tools .quiet{flex-basis:auto}
 .bottom-nav{left:0;top:0;bottom:0;transform:none;width:74px;flex-direction:column;border-radius:0;padding:12px 5px;justify-content:center}
 .nav-item{flex:0;min-height:64px;align-items:center;justify-content:center}
 .nav-item.active:before{top:auto;left:-5px;height:25px;width:3px}
 .shell{margin-left:74px;padding:0 18px 20px}
 .topbar{padding:10px 0 12px}
 .page-heading{padding:0 0 14px}
 .page-heading h1{font-size:28px}
 .home-modes{grid-template-columns:1fr}
 .mode-card{padding:20px}
 .library-tools{position:static}
 .keyboard-open .shell{margin-left:0}
 dialog{padding:16px 20px}
 dialog h2{font-size:21px;margin-bottom:8px}
 dialog .button-stack{margin-top:12px;gap:8px}
 .history-moves{margin:10px 0;max-height:calc(100dvh - 160px)}
}

.library-info{margin:0 0 8px;color:var(--muted);font-size:12px}
.library-info summary{min-height:44px;padding:13px 0;cursor:pointer;color:var(--gold)}
.library-info summary:focus-visible{outline:3px solid var(--gold)}
.library-info[open]{border-bottom:1px solid var(--line)}
.keyboard-open .library-info{display:none}
@media(max-width:599px){body[data-page=library] .page-heading p{display:none}.library-info{margin-bottom:0}}
