/* The same labelled controls on the website and inside Android. */
:root {
 --safe-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));
 --safe-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
 --safe-left:var(--safe-area-inset-left,env(safe-area-inset-left,0px));
 --safe-right:var(--safe-area-inset-right,env(safe-area-inset-right,0px));
 --dock-height:76px;
 --controls-height:calc(var(--dock-height) + var(--safe-bottom));
}
body {padding-bottom:calc(var(--controls-height) + 16px)}
.topbar {height:auto;min-height:calc(80px + var(--safe-top));padding-top:var(--safe-top);padding-left:max(1rem,var(--safe-left));padding-right:max(1rem,var(--safe-right));gap:.75rem}
.game-controls {position:fixed;bottom:0;left:0;right:0;z-index:12;min-height:calc(var(--dock-height) + var(--safe-bottom));padding:.55rem max(.65rem,var(--safe-right)) calc(.55rem + var(--safe-bottom)) max(.65rem,var(--safe-left));display:flex;justify-content:center;gap:.6rem;background:var(--night);border-top:1px solid var(--line)}
.game-controls button {display:flex;align-items:center;justify-content:center;gap:.45rem;flex:1;max-width:190px;min-width:0;min-height:52px;border:1px solid #67818a;border-radius:10px;background:#183943;color:var(--ink);font-size:1rem;font-weight:600;line-height:1.3;padding:.5rem}
.game-controls button>span {font-size:1.35rem;font-weight:400}
.game-controls button:hover:not(:disabled) {border-color:var(--gold);background:#244b56}
.game-controls button:disabled {opacity:.45}
.scroll-hint-space {display:flex;align-items:center;justify-content:center;flex:1;min-width:0;max-width:190px;text-align:center;padding:0 .25rem}
.scroll-hint {color:var(--muted);font-size:.875rem;font-weight:400;line-height:1.4;text-wrap:balance}
.scroll-hint[hidden] {display:none}
.turn-strip {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem;margin:1rem 0;padding:.8rem;border:1px solid #69878f;border-left:4px solid var(--coral);border-radius:10px;background:#1a3c45}
.turn-strip.tinker {border-left-color:var(--aqua)}
.turn-strip>div {flex:1;min-width:130px}
.turn-strip small,.turn-strip strong {display:block}
.turn-strip small {font-size:.875rem;line-height:1.4;color:var(--muted)}
.turn-strip strong {font-size:1.1rem;line-height:1.5}
.turn-strip>button {min-height:52px;padding:.5rem .8rem;border:1px solid var(--gold);border-radius:8px;background:#304340;color:var(--ink);text-align:left}
.turn-strip>button small {color:var(--gold)}
.area-jump {display:none;min-height:48px;padding:.6rem .8rem;border:1px solid var(--gold);border-radius:9px;background:#203e45;color:var(--ink);font-size:.94rem;font-weight:600;width:100%;margin:.3rem 0 .8rem}
.wk-tools>.btn:first-of-type {margin:0 0 1rem}
.wk-machine,.wk-tools,.search-playfield,.search-pocket,.scene-content {scroll-margin-top:calc(var(--header-height,80px) + 16px);scroll-margin-bottom:calc(var(--controls-height) + 16px)}
.wk-machine:focus,.wk-tools:focus,.search-playfield:focus {outline:none}
.overlay {max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 2rem)}
@media(max-width:780px) {
 .topbar {min-height:calc(64px + var(--safe-top))}
 .topbar .home-button {display:none}
 .topbar .brand-navigation .wordmark {display:flex;font-size:.7rem;letter-spacing:.12em}
 .topbar .brand-navigation:has(.back-button:not(.home-button)) .wordmark {display:none}
 .area-jump {display:block}
 .game-controls {gap:.4rem}
 .game-controls button {font-size:.875rem;gap:.3rem}
 .game-controls button>span {font-size:1.15rem}
 .wk-heading h1 {font-size:2rem}
 .wk-small-break {display:none}
 .wk-challenges {margin-top:1rem}
}
@media(min-width:781px) {
 .story-art {top:calc(var(--header-height,80px))}
}
@media(forced-colors:active) {
 .game-controls,.turn-strip,.area-jump {border-color:ButtonText}
}