@font-face{font-family:Pixel;src:url('assets/pixel.ttf')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none;background:#070b35;color:#f9f1cd}body{font:14px/1.45 Pixel,monospace}button{font:inherit;color:inherit;cursor:pointer;min-width:44px;min-height:44px;border:2px solid #5969bf;background:#151c51;border-radius:6px;padding:8px 12px;touch-action:manipulation;box-shadow:0 3px #030525}button:active,.pressed{background:#ffe143!important;color:#10133f;transform:translateY(2px)}button:focus-visible{outline:3px solid #65f0b2;outline-offset:2px}#app{height:var(--vh,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);max-width:1200px;margin:auto;display:flex;flex-direction:column;isolation:isolate}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#0c103a;flex-shrink:0}.brand{display:flex;gap:10px;align-items:center;line-height:1.25}.brand b{color:#ffe143;font-size:19px}.brand span{max-width:190px}nav{display:flex;gap:5px}nav button{font-size:11px;padding:6px}#hud{padding:5px 12px;display:flex;gap:10px;justify-content:space-between;color:#65f0b2;font-size:10px;min-height:29px}#stage{position:relative;flex:1;min-height:100px;overflow:hidden;background:#080d38;border-top:2px solid #343b79;border-bottom:2px solid #343b79}canvas{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none}#toast{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:8px 12px;background:#101744ee;border:1px solid #65f0b2;border-radius:4px;max-width:90%;text-align:center;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s}#toast.show{opacity:1}#roomGoal{position:absolute;bottom:8px;left:8px;right:8px;font-size:10px;text-shadow:2px 2px #030525;pointer-events:none;color:#ffe143}#controls{display:flex;gap:7px;padding:10px;align-items:stretch;background:#0e143e;flex-shrink:0;touch-action:none}#controls button{font-size:12px}#controls small{display:block;font-size:7px;margin-top:4px}#steer{width:105px;position:relative;background:#050a2d;border:2px solid #5969bf;border-radius:32px;touch-action:none;min-height:62px;display:flex;align-items:center;justify-content:center;user-select:none}#steer small{position:absolute;bottom:4px;font-size:6px;color:#8494ce}#thumb{display:block;width:34px;height:34px;line-height:34px;border-radius:50%;text-align:center;background:#2c3977;color:#65f0b2;margin-top:-8px}#bounce{margin-left:auto;background:#f329a3;border-color:#ff9cd8;min-width:86px;color:white}#action{background:#204d68;border-color:#65f0b2}#atlas{font-size:10px!important}footer{padding:5px 12px;color:#92a0d8;font-size:8px;display:flex;gap:9px;flex-wrap:wrap;flex-shrink:0}footer span{color:#ffe143}footer em{margin-left:auto;font-style:normal}#overlay{position:absolute;inset:0;background:#040623b8;z-index:5;display:grid;place-items:center;padding:12px;padding-top:max(12px,env(safe-area-inset-top));overflow:auto;pointer-events:auto}#overlay.hidden{display:none}#panel{background:#0c1238ed;border:2px solid #7a78bb;box-shadow:0 0 0 5px #070b35;padding:22px;max-width:590px;width:min(100%,590px);max-height:calc(var(--vh,100dvh) - 30px);overflow:auto;border-radius:8px}#panel .eyebrow{color:#65f0b2;letter-spacing:2px;font-size:10px}h1{font-size:clamp(27px,6vw,46px);line-height:1.15;color:#ffe143;margin:10px 0;text-shadow:3px 3px #b8198d}h2{font-size:24px;color:#ffe143;margin:0 0 12px}p{font-family:Pixel,monospace;font-size:12px;color:#d1d6f2}#panel .buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}#panel .primary{background:#ffe143;color:#070b35;border-color:#fff3a0;min-width:140px}#panel .credits{font-size:9px;color:#a7b3e1;margin-bottom:0}#panel .atlas{display:grid;grid-template-columns:1fr 1fr;gap:7px}#panel .atlas button{text-align:left;font-size:11px}#panel .atlas small{display:block;color:#65f0b2;font-size:9px}#panel button:disabled{opacity:.45;cursor:default}#panel .stats{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#65f0b2}#panel .tip{border-left:3px solid #f329a3;padding-left:10px}.expanded{position:fixed!important;inset:0;z-index:999;max-width:none!important;width:100%;background:#070b35}.title-open #controls{opacity:.45}.title-open #roomGoal{display:none}@media(max-width:550px){header{padding:5px 7px}.brand{gap:6px}.brand b{font-size:15px}.brand span{font-size:10px;max-width:102px}nav{gap:3px}nav button{font-size:9px;padding:5px}#controls{gap:5px;padding:8px 6px}#controls button{padding:6px;min-width:44px}#steer{width:72px;min-height:60px}#left,#right{display:none}#bounce{min-width:83px}#action{min-width:56px}#atlas{min-width:44px}#hud{font-size:8px;padding:5px 8px}footer{font-size:6px;gap:5px;padding:4px 7px}footer em{display:none}#panel{padding:18px}#panel p{font-size:11px}}@media(max-height:420px){header{padding:2px 8px}.brand b{font-size:14px}.brand span{font-size:11px}nav button{min-height:44px;padding:3px 8px}#hud{min-height:22px;font-size:8px;padding:2px 8px}#controls{padding:4px 8px;gap:7px}#controls button,#steer{min-height:48px}#steer{width:100px}#controls small{font-size:6px;margin-top:2px}#thumb{width:28px;height:28px;line-height:28px}footer{display:none}#roomGoal{font-size:8px;bottom:4px}#panel{padding:14px;max-width:640px}#panel h1{font-size:27px;margin:4px 0}#panel p{font-size:10px;margin:7px 0}#panel .buttons{margin-top:10px}#panel .credits{font-size:8px}.title-open #panel{max-width:600px}}@media(prefers-reduced-motion:reduce){#toast{transition:none}}
@media(max-width:360px){.brand span{display:none}#panel .valve-inputs{display:grid;grid-template-columns:1fr 1fr}#panel .valve-inputs button{font-size:11px}}@media(min-height:421px) and (max-width:550px){#app #hud{font-size:10px}#app footer{font-size:8px}#app footer span{display:block}}

/* Tool buttons remain reachable above every title, pause and routing panel. */
#app header{position:relative;z-index:7}#app #overlay{top:60px}#app #panel{max-height:calc(var(--vh,100dvh) - 84px)}@media(max-height:420px){#app #overlay{top:48px}#app #panel{max-height:calc(var(--vh,100dvh) - 66px)}}
/* Keep the objective outside the canvas so it cannot cover a landing. */
#app #stage{display:flex;flex-direction:column}#app canvas{flex:1;min-height:0;height:0}#app #roomGoal{position:static;flex-shrink:0;min-height:24px;padding:4px 8px;background:#0c1238;color:#ffe143;font-size:10px;line-height:1.4}#app #overlay{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom))}body #app #panel{max-height:calc(var(--vh,100dvh) - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}@media(max-height:420px){#app #roomGoal{font-size:8px;min-height:20px;padding:3px 8px}body #app #panel{max-height:calc(var(--vh,100dvh) - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}


/* A real animated title scene remains visible beside its menu. */
.title-open #app{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);grid-template-rows:60px minmax(0,1fr)}
.title-open #app>header{grid-column:1/-1}
.title-open #app #hud,.title-open #app #controls,.title-open #app>footer{display:none}
.title-open #app #stage{grid-column:1;grid-row:2;min-height:0}
.title-open #app #overlay{position:static;inset:auto;grid-column:2;grid-row:2;min-height:0;max-height:none;padding:12px;display:grid;place-items:center;background:#0c103a;overflow:auto}
.title-open #app #panel{width:100%;max-height:100%;padding:14px}
.title-open #panel h1{font-size:clamp(26px,4.2vw,40px);margin:6px 0}
.title-open #panel .eyebrow{font-size:8px;letter-spacing:1px}
.title-open #panel .buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.title-open #panel .buttons button{min-width:0;min-height:44px;font-size:11px;padding:6px}
.title-open #panel .credits{font-size:8px;line-height:1.5}
@media(max-width:699px) and (orientation:portrait){
 .title-open #app{display:flex}
 .title-open #app #stage{flex:1;min-height:120px}
 .title-open #app #overlay{display:block;flex:none;padding:6px 8px;max-height:calc(var(--vh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 174px)}
 .title-open #app #panel{max-height:min(58vh,calc(var(--vh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 186px));padding:12px}
 .title-open #panel p{font-size:10px;line-height:1.4;margin:8px 0}
 .title-open #panel .tip{display:none}
}
@media(orientation:landscape) and (max-height:420px){
 .title-open #app{grid-template-columns:minmax(0,1fr) minmax(240px,1fr);grid-template-rows:48px minmax(0,1fr)}
 .title-open #app #overlay{padding:6px 8px}
 .title-open #panel h1{font-size:24px;line-height:1.1}
 .title-open #panel .tip{display:none}
}

/* Status has its own row; it never hides the next landing. */
#app>#toast{position:static;transform:none;flex:none;min-height:28px;height:28px;max-width:none;margin:0;padding:3px 8px;overflow:hidden;border:0;border-radius:0;background:#101744;font-size:9px;line-height:1.2}
.title-open #app>#toast{display:none}
@media(orientation:landscape) and (max-height:420px){
 body:not(.title-open) #app{display:grid;grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:48px 22px 28px minmax(0,1fr)}
 body:not(.title-open) #app>header{grid-column:1/-1;grid-row:1}
 body:not(.title-open) #app>#hud{grid-column:1/-1;grid-row:2}
 body:not(.title-open) #app>#toast{grid-column:1/-1;grid-row:3}
 body:not(.title-open) #app>#stage{grid-column:1;grid-row:4;min-height:0}
 body:not(.title-open) #app>#controls{grid-column:2;grid-row:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:62px 48px 44px;align-content:center;gap:6px;padding:6px 8px}
 body:not(.title-open) #controls #steer{grid-column:1/-1;width:auto;min-height:62px}
 body:not(.title-open) #controls #left,body:not(.title-open) #controls #right{display:none}
 body:not(.title-open) #controls #bounce{margin:0;min-width:0;font-size:10px}
 body:not(.title-open) #controls #action{min-width:0;font-size:10px}
 body:not(.title-open) #controls #atlas{grid-column:1/-1;min-height:44px}
}

#controls #steer{border-radius:6px}

@media(orientation:landscape) and (max-height:420px){.title-open #panel .title-summary{display:none}}