/* Text gets real layout space; never clip a status to a fixed one-line row. */
@media(max-width:750px),(max-width:1000px) and (max-height:550px){
 .playing .workspace{height:auto;flex:0 0 auto;min-height:var(--controls-height);overflow:visible;align-content:start}
 .playing .workspace>.message{font-size:14px;line-height:19px;min-height:62px;max-height:none;overflow:visible;padding:5px 7px;overflow-wrap:anywhere}
 .playing .game-view[data-mode] .workspace{grid-auto-rows:auto}
 .playing .game-view[data-mode=robot] .workspace,.playing .game-view[data-mode=debug] .workspace{grid-template-rows:54px 42px 26px 40px auto}
 .playing .game-view[data-mode=loop] .workspace{grid-template-rows:54px 36px 42px 24px 40px auto}
 .playing .game-view[data-mode=condition] .workspace{grid-template-rows:34px 48px 40px auto}
 .playing .game-view[data-mode=math] .workspace{grid-template-rows:58px 40px auto}
 .playing .game-view[data-mode=pattern] .workspace{grid-template-rows:31px 40px auto}
 .playing .stage{flex:1 1 0;min-height:120px}
 .playing main{overflow-y:auto}
 .playing .play-layout{min-height:0}
 .playing .game-view[data-mode=loop],.playing .game-view[data-mode=debug],.playing .game-view[data-mode=math]{--controls-height:0px!important}
}
.extra-level-select{width:100%;padding:7px 10px;border:1px solid #d6dcea;border-radius:9px;background:#e7eaf3;color:#344057;font-size:16px}
.extra-game .mission-heading{margin:10px 0}.extra-game .stage{display:flex;flex-direction:column;gap:10px}.extra-game .surface{display:flex;align-items:center;justify-content:center;min-height:0;flex:1}.extra-board{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:4px;width:100%;aspect-ratio:1;max-width:500px;touch-action:none}
.extra-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;background:#414f67;border:2px solid #60728e;border-radius:8px;color:white;font:600 clamp(18px,4vw,32px) 'DM Sans',sans-serif;touch-action:manipulation}
.extra-cell.extra-wall{background:#202939;border-color:#202939;opacity:1}.extra-cell.target{border:2px dashed #cdeb87;color:#cdeb87}.extra-cell.stored{background:#52683a;border:2px solid #cdeb87}.extra-cell.lit{background:#f7df78;color:#4c3b05;box-shadow:inset 0 0 0 3px #e8bd45}.extra-cell.next-number{border-color:#d4f564;background:#516e41}.extra-task{font-size:14px;line-height:20px;color:#e5eafa;min-height:20px}.extra-instruction{font-size:16px;line-height:1.5;margin-bottom:16px}.extra-actions,.extra-arrows{display:flex;gap:8px;margin:10px 0}.extra-arrows button{flex:1;min-height:48px;border:1px solid #c7cfdf;border-bottom:4px solid #c7cfdf;border-radius:10px;background:#eef1f8;font-size:28px}.extra-actions button{min-height:44px;padding:8px;font-size:14px}.extra-workspace>.message{font-size:14px;line-height:20px;overflow:visible}.extra-cell:focus-visible{outline:3px solid #ffb96c;outline-offset:1px}.extra-cell:disabled{cursor:default}
.pipe-center,.pipe-arm{position:absolute;background:#c4cfe1;pointer-events:none}.pipe-center{width:24%;height:24%;left:38%;top:38%;border-radius:4px}.pipe-arm{width:24%;height:50%;left:38%;top:0}.arm-1{width:50%;height:24%;left:50%;top:38%}.arm-2{top:50%}.arm-3{width:50%;height:24%;left:0;top:38%}.wet .pipe-center,.wet .pipe-arm{background:#5ee3ff}.pipe-marker{z-index:1;position:absolute;left:2px;top:0;font-size:16px}
@media(max-width:750px),(max-width:1000px) and (max-height:550px){
 .playing .extra-game .mission-heading{margin:0}.playing .extra-level-select{height:30px;padding:3px 8px;font-size:14px}
 .playing .extra-game .stage{gap:4px;min-height:150px}.playing .extra-game .extra-task{font-size:14px;line-height:18px;flex:0 0 auto}
 .playing .extra-game .workspace{display:flex;flex-direction:column;gap:5px;padding:9px;min-height:0;height:auto;flex:0 0 auto}
 .playing .extra-game .extra-instruction{display:none}.playing .extra-actions,.playing .extra-arrows{margin:0;gap:6px}.playing .extra-actions button{flex:1}
 .playing .extra-game .workspace>.message{min-height:48px;margin:0}.playing .extra-board{gap:3px}.playing .extra-cell{font-size:clamp(17px,5vw,27px);border-radius:5px;border-width:1.5px}
}
@media(max-width:1000px) and (max-height:550px) and (orientation:landscape){.playing .workspace{height:100%;min-height:0;overflow-y:auto}.playing .extra-game .workspace{justify-content:center}.playing .extra-game .extra-instruction{display:block;font-size:14px;line-height:18px;margin:0}.playing .stage{min-height:0}}
/* Distinct, labelled endpoints remain visible while pipe pieces rotate. */
.extra-cell.pipe-start{border:3px solid #bce76a;box-shadow:inset 0 0 0 2px #253a20}
.extra-cell.pipe-finish{border:3px solid #ffb366;box-shadow:inset 0 0 0 2px #594029}
.pipe-marker{font:800 12px/16px 'DM Sans',sans-serif;left:0;right:0;top:0;width:100%;letter-spacing:0;text-align:center;border-radius:3px;color:#152014;background:#bce76a;pointer-events:none}
.finish-marker{top:auto;bottom:0;background:#ffb366;color:#352007}
.port-arrow{position:absolute;z-index:2;top:34%;font:900 21px/1 sans-serif;pointer-events:none;color:#12221b;background:#bce76a;border-radius:4px}.port-in{left:0}.port-out{right:0;background:#ffb366;color:#352007}
.extra-cell.walked{background:#3c626c;border-color:#79b8c6}.trail-dot{color:#a1e7f5;font-size:18px}.extra-cell.player-here{background:#f4df68!important;border:3px solid white!important;box-shadow:0 0 0 1px #f4df68}.trail-player{color:#212c40;font:900 clamp(23px,7vw,42px)/1 sans-serif}.extra-cell.trail-goal{border:2px solid #ffb366}.extra-cell.player-here .trail-dot{display:none}
.level-nav{flex-wrap:wrap}.world-progress{gap:3px}.world-progress i{min-width:0}