/* The play screen always reserves space for both the board and its touch controls. */
.six-game .six-board{position:relative;width:min(100%,460px);height:min(100%,460px);min-width:0;min-height:0;aspect-ratio:1;margin:auto;color:#f8fbff}
.six-game .six-board button{touch-action:manipulation}
.six-game .six-workspace #six-controls{width:100%}
.six-game .six-workspace .wide{width:100%;min-height:44px}
.six-game .six-workspace .run-button{margin:0}
.six-game .six-workspace .extra-actions{margin:8px 0}
.six-game .six-workspace .message{margin-top:8px}
.six-stroke{background:radial-gradient(circle at center,#405763,#263f52);border:2px solid #8cbbaa;border-radius:20px}
.six-stroke svg{width:100%;height:100%}
.six-stroke line{stroke:#b7cfda;stroke-width:10;stroke-linecap:round}
.six-stroke line.traced{stroke:#f8d869;stroke-width:11}
.six-stroke .stroke-node{position:absolute;z-index:1;transform:translate(-50%,-50%);width:clamp(36px,12%,56px);height:clamp(36px,12%,56px);padding:0;border:3px solid white;border-radius:50%;background:#8ed4ba;color:#233c43;font-size:34px;line-height:1}
.six-stroke .stroke-node.current{background:#f7dc64;box-shadow:0 0 0 5px #f7dc6466;color:#453915}
.six-stroke .stroke-node:disabled{visibility:hidden}
.six-code{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:18px;background:#303c55;border:2px solid #7388a9;border-radius:18px;overflow:hidden}
.code-secret,.code-draft{display:flex;gap:8px;justify-content:center;width:100%}
.code-secret span,.code-draft span{display:grid;place-items:center;min-width:0;flex:1;max-width:76px;height:58px;border:2px solid #91a2bd;border-radius:13px;font-size:30px;font-weight:800;background:#46536c;color:#fff}
.code-secret span{background:#242e43;color:#f3d88f}
.code-history{width:100%;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px}
.code-history>div{display:flex;justify-content:space-between;gap:9px;padding:8px;border-radius:8px;background:#44546d;font-size:13px}
.code-history b{white-space:nowrap;letter-spacing:3px;font-size:17px}
.six-palette,.six-buttons{display:flex;gap:7px;justify-content:center}
.six-palette button{flex:1;min-height:48px;border:2px solid #becbe1;border-radius:10px;background:#eff3ff;color:#25324a;font-size:29px}
.six-palette button:disabled{opacity:.35}
.six-buttons{margin-top:8px}.six-buttons button{flex:1;min-width:0;min-height:44px}
.six-river{display:flex;align-items:stretch;justify-content:space-between;gap:16%;padding:12px;background:linear-gradient(90deg,#658550 0 35%,#5ca8cd 35% 65%,#658550 65%);border:3px solid #b4d18d;border-radius:18px}
.river-bank{width:40%;display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:10px 6px;background:#2d4738cc;border:1px solid #d2e5ba;border-radius:12px;overflow:auto}
.river-bank b{text-align:center;color:#f5ffda;font-size:13px}
.river-bank button{min-height:42px;background:#fff5d5;border:2px solid #9eae77;border-radius:9px;color:#31402b;font-weight:700;font-size:13px;padding:4px}
.river-bank button.selected{background:#ffe092;border-color:#faad38}
.river-boat{position:absolute;z-index:1;left:37%;right:37%;top:43%;min-height:58px;padding:4px;background:#e5ad6e;border:2px solid #644d3e;border-radius:12px;text-align:center;color:#3c2b23;font-size:21px}
.river-boat span,.river-boat small{display:block;font-size:10px;line-height:1.2}
.river-boat small{font-weight:800}
.six-tower{display:flex;align-items:stretch;justify-content:center;gap:5px;background:#30425a;border:2px solid #98abd1;border-radius:18px;padding:12px}
.tower-peg{position:relative;flex:1;min-width:0;border:2px solid #6a819d;border-radius:10px;background:linear-gradient(90deg,transparent 46%,#bbd0db 46% 54%,transparent 54%) center 20% / 100% 68% no-repeat,#26364c;color:#fff;padding:0 4px 8px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.tower-peg.selected{border-color:#ffe47c;box-shadow:inset 0 0 0 2px #ffe47c}
.tower-peg.target>b{color:#ffde73}
.tower-peg b{font-size:12px;white-space:nowrap}
.tower-stack{width:100%;min-height:50%;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:3px}
.tower-stack i{display:grid;place-items:center;width:calc(24% + var(--disc)*17%);height:30px;max-width:96%;min-width:35%;border:2px solid #fff8;border-radius:14px;background:hsl(calc(28 + var(--disc)*47) 76% 70%);color:#24334b;font-style:normal;font-weight:800}
.six-mosaic{padding:10px;border:2px solid #d7aac9;background:#4d385b;border-radius:18px}
.mosaic-playgrid{width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px}
.mosaic-playgrid button{min-width:0;min-height:0;border:2px dashed #a38cba;border-radius:8px;background:#624e6e;color:#c9b9d4;font-size:24px;padding:0}
.mosaic-playgrid button.filled{border-style:solid;color:#273246;font-weight:900;background:#ffce94}
.mosaic-playgrid button.piece-1{background:#a9d9ee}.mosaic-playgrid button.piece-2{background:#c4eaa7}.mosaic-playgrid button.piece-3{background:#efb2e5}
.mosaic-tray{display:flex;justify-content:center;gap:6px;margin-bottom:7px}
.mosaic-piece{position:relative;min-width:0;flex:1;max-width:75px;height:58px;border:2px solid #b5a6cb;border-radius:9px;background:#f3eafa;color:#384050}
.mosaic-piece.selected{border-color:#9160b1;box-shadow:inset 0 0 0 2px #9160b1}
.mosaic-piece:disabled{opacity:.3}
.mosaic-piece b{position:absolute;left:4px;top:1px;font-size:11px}
.mosaic-piece span{position:absolute;display:block;left:20px;top:5px}
.mosaic-piece i{position:absolute;width:10px;height:10px;border:1px solid #51627a;background:#dfaadd;border-radius:2px}
.six-latin{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px;padding:10px;background:#42604e;border:3px solid #a3cead;border-radius:18px}
.six-latin button{min-width:0;min-height:0;padding:0;border:2px solid #b1d4b4;border-radius:9px;background:#f1fff1;color:#2f493c;font-size:clamp(24px,8vw,46px)}
.six-latin button.given{background:#b8dbc0;color:#203728;font-weight:900}
.six-latin button.incorrect{border-color:#ff775e;background:#ffe4dc}
.latin-legend{margin-bottom:9px;text-align:center;font-size:12px;line-height:1.5}
.extra-game[data-mode=trail] .extra-cell:not(.extra-wall){background:#557698;border-color:#b8d5e9;box-shadow:inset 0 0 0 1px #e7f5ff77}
.extra-game[data-mode=trail] .extra-cell.extra-wall{background:#172334;border-color:#172334}
.extra-game[data-mode=trail] .extra-cell.next-number{background:#517b37;border-color:#e0f49b}
.extra-game[data-mode=trail] .extra-cell.player-here{background:#f4df68!important;border-color:white!important}
.extra-game[data-mode=trail] .extra-cell.walked:not(.player-here){background:#417a75;border-color:#a2e8dc}
.six-game[data-mode=river] .extra-task{max-height:44px!important}
@media(max-width:750px),(max-width:1000px) and (max-height:550px){
 body.playing main{overflow:hidden!important}
 .playing .game-view{height:100%;min-height:0;overflow:hidden}
 .playing .play-layout{min-height:0;overflow:hidden}
 .playing .stage,.playing .game-view[data-world] .stage,.playing .extra-game .stage{min-height:0!important;overflow:hidden}
 .playing .surface,.playing .variety-surface{min-height:0;overflow:hidden}
 .playing .workspace,.playing .extra-game .workspace{min-height:0!important;overflow:hidden}
 .playing .extra-game .workspace>.message,.playing .workspace>.message{min-height:26px!important;max-height:40px!important;overflow:auto!important;margin:0!important;padding:3px 7px!important;font-size:12px;line-height:16px}
 .playing .extra-game .extra-task{min-height:0;max-height:32px;overflow:auto}
 .playing .six-game .six-board{width:min(100%,100dvh);height:min(100%,100dvh);max-width:460px;max-height:460px;flex:none}
 .playing .six-game .six-workspace{gap:5px;padding:7px}
 .playing .six-game .six-workspace .extra-actions{margin:0}
 .playing .six-game .six-workspace .extra-actions button{min-height:36px;padding:4px}
 .playing .six-game .six-workspace>.message{max-height:32px!important}
 .playing .six-game .six-board button:focus-visible{outline:3px solid #ffed8c}
 .playing .six-code{gap:7px;padding:8px}
 .playing .code-secret span,.playing .code-draft span{height:40px;font-size:23px}
 .playing .code-history>div{padding:4px;font-size:11px}
 .playing .code-history b{font-size:13px}
 .playing .river-bank{padding:5px 3px;gap:4px}
 .playing .river-bank button{min-height:36px;font-size:11px}
 .playing .river-boat{left:35%;right:35%;font-size:16px}
 .playing .tower-stack i{height:22px}
 .playing .tower-peg{padding:0 2px 5px}
 .playing .tower-peg b{font-size:10px}
 .playing .six-workspace .six-palette button{min-height:42px}
}
@media(max-width:750px) and (max-height:650px) and (orientation:portrait){
 .playing .game-view{grid-template-rows:40px 30px minmax(0,1fr)}
 .playing .stage-header{display:none}
 .playing .stage{gap:2px;padding:6px}
 .playing .extra-game .extra-task{font-size:11px;line-height:14px;max-height:28px}
 .playing .extra-game .workspace{padding:6px;gap:3px}
 .playing .extra-actions button{min-height:38px;padding:4px;font-size:12px}
 .playing .extra-arrows button{min-height:40px}
}
/* Supersede the old narrow-screen column rules that gave the page unlimited height. */
@media(max-width:750px){
 body.playing{height:var(--play-height,100dvh)!important;min-height:0!important;overflow:hidden!important}
 body.playing main{height:100%!important;max-width:none!important;padding:4px 8px max(4px,env(safe-area-inset-bottom))!important;overflow:hidden!important}
 .playing .game-view{display:grid!important;height:100%!important;grid-template-rows:44px 34px minmax(0,1fr)!important;gap:4px!important;overflow:hidden!important}
 .playing .play-heading{height:44px!important;margin:0!important;min-height:0}
 .playing .stage-picker{height:34px!important;min-height:0!important;margin:0!important;overflow:hidden!important}
 .playing .stage-picker .level-nav,.playing .stage-picker .mission-heading{display:none!important}
 .playing .stage-picker .compact-level-select{display:block!important;height:34px;width:100%;font-size:14px}
 .playing .play-layout{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;gap:4px!important;overflow:hidden!important}
 .playing .stage,.playing .game-view[data-world] .stage,.playing .extra-game .stage{display:flex!important;flex:1 1 0!important;min-height:0!important;height:auto!important;padding:6px!important;gap:3px!important;overflow:hidden!important}
 .playing .stage-header{flex:0 0 16px!important;min-height:0!important;height:16px!important;margin:0!important}
 .playing .surface,.playing .variety-surface{display:flex!important;flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:100%!important;padding:0!important;overflow:hidden!important}
 .playing .surface>#board,.playing .variety-game .surface>div[id=board],.playing .six-game .surface>#board{width:var(--board-side,100%)!important;height:var(--board-side,100%)!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1!important;flex:none!important;margin:auto!important}
 .playing .surface>#board.balance-board,.playing .surface>#board.recipe-board,.playing .surface>#board.sorting-board{width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:auto!important;padding:4px!important;overflow:auto!important}
 .playing .workspace,.playing .extra-game .workspace{flex:0 0 auto!important;min-height:0!important;max-height:56%!important;overflow:hidden!important;padding:6px!important;gap:4px!important;margin:0!important}
 .playing .workspace>.instruction,.playing .workspace>.extra-instruction,.playing .workspace>.tutorial,.playing .panel-title,.playing .edit-note{display:none!important}
 .playing .workspace>.message{height:28px!important;min-height:28px!important;max-height:28px!important;overflow:auto!important;padding:3px 6px!important;font-size:12px!important;line-height:16px!important}
 .playing .game-view:not(.extra-game) .workspace{display:grid!important;flex:0 0 var(--controls-height)!important;height:var(--controls-height)!important;max-height:56%!important;align-content:stretch!important}
 .playing .game-view[data-mode=robot]{--controls-height:205px!important}
 .playing .game-view[data-mode=debug]{--controls-height:226px!important}
 .playing .game-view[data-mode=loop]{--controls-height:250px!important}
 .playing .game-view[data-mode=condition]{--controls-height:148px!important}
 .playing .game-view[data-mode=math]{--controls-height:138px!important}
 .playing .game-view[data-mode=pattern]{--controls-height:92px!important}
 .playing .game-view:not(.extra-game) .workspace>.message{min-height:0!important;height:auto!important;max-height:100%!important}
 .playing .extra-game .workspace{display:flex!important;flex-direction:column!important;height:auto!important}
 .playing .extra-game .workspace>.message{flex:0 0 27px!important;height:27px!important;min-height:27px!important;max-height:27px!important}
 .playing .extra-game .extra-task{flex:0 0 auto!important;min-height:0!important;max-height:28px!important;overflow:auto}
 .playing .extra-game .workspace .extra-actions{margin:0!important;gap:5px!important}
 .playing .extra-game .workspace .extra-actions button{min-height:38px!important;padding:4px!important}
 .playing .six-workspace #six-controls{flex:0 0 auto}
 .playing .six-workspace .mosaic-tray{margin:0 0 4px}
 .playing .six-workspace .latin-legend{margin:0 0 4px}
}
@media(max-width:750px) and (max-height:620px) and (orientation:portrait){
 .playing .game-view{grid-template-rows:40px 30px minmax(0,1fr)!important;gap:3px!important}
 .playing .play-heading{height:40px!important}
 .playing .stage-picker,.playing .stage-picker .compact-level-select{height:30px!important}
 .playing .stage-header{display:none!important}
 .playing .stage,.playing .extra-game .stage{padding:4px!important;gap:2px!important}
 .playing .workspace,.playing .extra-game .workspace{padding:4px!important;gap:3px!important}
 .playing .game-view[data-mode=robot]{--controls-height:183px!important}
 .playing .game-view[data-mode=debug]{--controls-height:202px!important}
 .playing .game-view[data-mode=loop]{--controls-height:222px!important}
 .playing .game-view[data-mode=condition]{--controls-height:140px!important}
 .playing .game-view[data-mode=math]{--controls-height:125px!important}
 .playing .game-view[data-mode=pattern]{--controls-height:84px!important}
 .playing .extra-game .extra-task{max-height:18px!important;font-size:11px}
 .playing .extra-game .workspace>.message{height:23px!important;min-height:23px!important;max-height:23px!important}
}
@media(min-width:751px) and (max-width:1100px) and (max-height:500px) and (orientation:landscape){
 .playing .game-view{grid-template-rows:40px 32px minmax(0,1fr)!important;gap:4px!important}
 .playing .stage-picker{height:32px!important;min-height:0!important}
 .playing .stage-picker .level-nav,.playing .stage-picker .mission-heading{display:none!important}
 .playing .stage-picker .compact-level-select{display:block!important;height:32px;width:100%}
 .playing .stage-header,.playing .extra-task{display:none!important}
 .playing .workspace{overflow:auto!important}
}