html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#79c9ff;font-family:system-ui,sans-serif;touch-action:none}canvas{display:block;width:100%;height:100%}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}.corner{position:fixed;top:max(8px,env(safe-area-inset-top));width:36px;height:36px;display:grid;place-items:center;background:#10202dd9;color:white;border:1px solid #ffffff80;border-radius:8px;font-size:22px;text-decoration:none;z-index:30}#back{left:max(8px,env(safe-area-inset-left))}#screenLock{left:calc(max(8px,env(safe-area-inset-left)) + 42px);font-size:15px;overflow:hidden;touch-action:none}#screenLock strong{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}#screenLock::after{position:absolute;right:0;bottom:0;left:0;height:3px;content:"";background:linear-gradient(90deg,#70ecff,#ffe479);transform:scaleX(0);transform-origin:left}#screenLock.locked{border-color:#ffe479;background:#49390ee8;box-shadow:0 0 13px #ffd95555,inset 0 1px 0 #fff5}#screenLock.unlocking::after{animation:screenUnlockHold 1s linear forwards}@keyframes screenUnlockHold{to{transform:scaleX(1)}}#pause{left:calc(max(8px,env(safe-area-inset-left)) + 84px)}#clean{right:max(8px,env(safe-area-inset-right))}#reset{right:calc(max(8px,env(safe-area-inset-right)) + 42px)}.screen-locked :is(#back,#pause,#reset,#clean,#sound){opacity:.3;pointer-events:none}.screen-locked #screenLock{opacity:1;pointer-events:auto}#hud{position:fixed;top:max(50px,calc(env(safe-area-inset-top) + 42px));left:50%;transform:translateX(-50%);color:white;background:#10202db8;border-radius:8px;padding:5px 10px;font-weight:800;font-size:14px;white-space:nowrap;pointer-events:none}#build{position:fixed;bottom:max(4px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:12px;color:white;text-shadow:0 1px 3px black;pointer-events:none}.pad{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:10}#leftPad{left:max(10px,env(safe-area-inset-left))}#rightPad{right:max(10px,env(safe-area-inset-right))}.pad button{width:58px;height:58px;border-radius:50%;border:2px solid #ffffffba;background:#10202d60;color:white;font-weight:900;font-size:23px;touch-action:none;user-select:none}.pad #jump{width:82px;border-radius:22px;font-size:16px}.pad button:active{background:#245b87b0}#overlay{position:fixed;inset:0;z-index:25;display:grid;place-items:center;background:#10202d85;color:white}.card{box-sizing:border-box;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 100px);overflow:auto;background:#101e2df5;border:1px solid #7ad7ff70;padding:22px;border-radius:20px;text-align:center;box-shadow:0 12px 40px #0005}.card h1{font-size:32px;margin:0 0 10px}.card p{line-height:1.5;font-size:16px}.card button{padding:12px 24px;border:0;border-radius:10px;font-weight:800;background:#ffcf45;color:#10202d}.clean #hud{display:none}@media(max-height:450px){.corner{width:30px;height:30px;font-size:19px}#screenLock{left:calc(max(5px,env(safe-area-inset-left)) + 35px);font-size:13px}#pause{left:calc(max(5px,env(safe-area-inset-left)) + 70px)}#reset{right:calc(max(5px,env(safe-area-inset-right)) + 35px)}#hud{top:10px;font-size:12px}.pad button{width:46px;height:46px;font-size:20px}.pad #jump{width:70px;font-size:14px}.card{padding:14px}.card h1{font-size:26px}.card p{font-size:14px;margin:8px 0}}@media(max-width:360px){.pad button{width:48px;height:48px}.pad #jump{width:68px}#hud{font-size:12px}}
body:has([data-arcade-xbox]) #build{bottom:24px}
#message{position:fixed;z-index:12;left:50%;top:98px;transform:translateX(-50%);padding:8px 13px;border-radius:12px;background:#0c1922d1;color:white;font-weight:800;font-size:14px;opacity:0;transition:opacity .22s;pointer-events:none;text-align:center;max-width:86vw}#message.show{opacity:1}.pad button.on{transform:scale(.94);background:#ffffff38}@media(max-height:450px){#message{top:84px;font-size:12px;padding:5px 8px}#objective{top:43px;font-size:9px;padding:2px 7px}#bossHud{top:62px;font-size:9px;padding:2px 7px}}.clean #message{display:none}
#hud{max-width:calc(100vw - 24px);width:max-content;white-space:normal;text-align:center;font-size:clamp(12px,2.8vw,14px);line-height:1.3}
#objective{position:fixed;z-index:11;top:max(82px,calc(env(safe-area-inset-top) + 74px));left:50%;transform:translateX(-50%);max-width:calc(100vw - 28px);padding:4px 10px;border:1px solid #ffd27a80;border-radius:999px;background:#2b1715c9;color:#ffe5a6;font-size:11px;font-weight:900;letter-spacing:.08em;text-align:center;white-space:nowrap;pointer-events:none}.clean #objective{display:none}
#bossHud{position:fixed;z-index:11;top:max(112px,calc(env(safe-area-inset-top) + 104px));left:50%;transform:translateX(-50%);max-width:calc(100vw - 28px);padding:5px 12px;border:1px solid #ff936f9c;border-radius:8px;background:#351314df;color:#ffd1aa;font-size:12px;font-weight:900;text-align:center;white-space:nowrap;pointer-events:none}#bossHud[hidden],.clean #bossHud{display:none}

@media(min-height:451px){#message{top:148px}}

/* P33: one transparent thumb joystick replaces the directional button cluster. */
#leftPad{display:block;bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px))}
#joystick{position:relative;width:138px;height:138px;border-radius:50%;box-sizing:border-box;overflow:hidden;touch-action:none;user-select:none;background:rgba(18,39,45,.10);border:2px solid rgba(255,255,255,.34);box-shadow:inset 0 0 28px rgba(7,25,28,.2),0 5px 18px rgba(7,25,28,.12);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#joystickRing{position:absolute;inset:17%;border-radius:50%;border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 0 0 1px rgba(10,32,34,.08);pointer-events:none}
#joystickKnob{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;box-sizing:border-box;transform:translate(-50%,-50%);background:rgba(18,39,45,.24);border:2px solid rgba(255,255,255,.62);box-shadow:0 3px 12px rgba(8,25,29,.22),inset 0 0 12px rgba(255,255,255,.1);pointer-events:none;will-change:transform}
#joystickKnob::after{content:"";position:absolute;inset:42%;border-radius:50%;background:rgba(255,255,255,.72)}
#joystick.active{background:rgba(18,39,45,.15);border-color:rgba(255,255,255,.5)}#joystick.active #joystickKnob{background:rgba(31,88,103,.34);border-color:rgba(255,255,255,.8)}
.pad #jump{width:112px;height:112px;border-radius:50%;font-size:20px;background:rgba(18,39,45,.15);border:2px solid rgba(255,255,255,.72);text-shadow:0 1px 4px #17362a}
#rightPad{bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px))}
#rightPad{align-items:flex-end;gap:10px}
.pad #run{width:76px;height:76px;border-radius:50%;font-size:15px;background:rgba(18,39,45,.13);border:1.5px solid rgba(255,255,255,.7);text-shadow:0 1px 4px #17362a}
.pad #jump:active{background:#ffffff32}
@media(max-height:450px){#leftPad{bottom:max(12px,env(safe-area-inset-bottom))}#joystick{width:112px;height:112px}#joystickKnob{width:48px;height:48px}.pad #jump{width:88px;height:88px;font-size:18px}.pad #run{width:60px;height:60px;font-size:13px}#rightPad{bottom:max(18px,env(safe-area-inset-bottom));gap:7px}}

.pad button[hidden]{display:none}#action{font-size:12px!important}#rightPad:has(#action:not([hidden])){flex-wrap:wrap;max-width:140px}
/* Keep both thumb zones separate on narrow portrait phones. */
@media (orientation:portrait){
 #leftPad{left:max(8px,env(safe-area-inset-left))}
 #joystick{width:126px;height:126px}#joystickKnob{width:54px;height:54px}
 #rightPad{right:max(8px,env(safe-area-inset-right));gap:7px}
 .pad #jump{width:84px;height:84px;font-size:17px}.pad #run{width:54px;height:54px;font-size:12px}
 #build{font-size:10px;max-width:90vw;text-align:center}
}
@media (max-width:340px) and (orientation:portrait){
 #joystick{width:112px;height:112px}#joystickKnob{width:48px;height:48px}
 .pad #jump{width:76px;height:76px}.pad #run{width:48px;height:48px}
}
.card button{margin:4px;min-height:44px}
/* Keep status, objective, boss health and messages in separate rows. */
#objective{top:max(96px,calc(env(safe-area-inset-top) + 88px));font-size:10px;white-space:normal}
#bossHud{top:max(120px,calc(env(safe-area-inset-top) + 112px));font-size:10px;white-space:normal}
#message{top:160px}
@media(max-height:450px){#objective{top:56px;font-size:9px;padding:2px 7px}#bossHud{top:78px;font-size:9px;padding:2px 7px}#message{top:104px;font-size:11px}}

/* P24 keeps the contextual valve/hammer control readable beside RUN. */
#rightPad button{flex-shrink:0}#action{font-size:10px!important;line-height:1.15;white-space:normal}

/* P25 results remain inside the game, including short phone landscape. */
#results{position:fixed;inset:0;z-index:24;display:grid;place-items:center;background:linear-gradient(#09242feb,#163d37f5);color:#fff}#results[hidden]{display:none}.result-panel{box-sizing:border-box;width:min(450px,92vw);max-height:calc(100dvh - 65px);overflow:auto;padding:18px 24px;border:2px solid #83cda1;border-radius:22px;background:#112f35;box-shadow:0 12px 45px #0006;text-align:center}.result-panel h1{font-size:clamp(22px,5vw,30px);margin:0 0 6px;color:#ffeaa1}.result-panel p{margin:0 0 14px;font-weight:800}.result-panel dl{display:grid;grid-template-columns:1fr auto;gap:6px 18px;text-align:left;margin:0 0 14px}.result-panel dt{font-size:14px}.result-panel dd{margin:0;text-align:right;font-weight:900;color:#d2ffe3}.result-panel strong{display:block;color:#ffeaa1;margin:10px 0;font-size:20px}.result-panel button{padding:12px 18px;background:#ffd579;color:#183c37;font-weight:900;border:0;border-radius:12px;min-height:44px}.result-panel button:disabled{opacity:.5}@media(max-height:450px){.result-panel{padding:10px 20px}.result-panel h1{font-size:22px}.result-panel dl{gap:3px 18px;margin-bottom:6px}.result-panel p{margin-bottom:8px}.result-panel strong{margin:6px 0;font-size:18px}}

#revisit{margin-top:12px;padding-top:12px;border-top:1px solid #ffffff30}#revisit[hidden]{display:none}#revisit label{display:block;font-size:13px;margin-bottom:6px}#revisit select{max-width:100%;padding:8px;border-radius:8px;background:#173e42;color:#fff;border:1px solid #85bca9}
/* P38 visual finish; control sizes, safe areas and game layout are preserved. */
.card{background:linear-gradient(145deg,#1b4249f5,#142a37fa);border-color:#b2dfc478;box-shadow:0 18px 50px #03172080,inset 0 1px 0 #ffffff24}.card h1{color:#ffe4a0;letter-spacing:.03em;text-shadow:0 2px 0 #0b232e}.card button,.result-panel button{background:linear-gradient(#ffe7a0,#e9bb65);box-shadow:inset 0 1px 0 #fff6,0 3px 0 #876139}.result-panel{background:linear-gradient(145deg,#245457,#102d37);border-color:#b7dac0;box-shadow:0 15px 55px #03182099,inset 0 1px 0 #ffffff33}.result-panel dd{font-variant-numeric:tabular-nums}#hud{border:1px solid #e2f4d52b;box-shadow:0 2px 7px #102d3926;text-shadow:0 1px 1px #0b2538}.corner{box-shadow:inset 0 1px 0 #ffffff25,0 2px 4px #0b283526}#build{letter-spacing:.035em;font-size:clamp(9px,2vw,12px);white-space:nowrap}
/* P39 compact music/sound toggle alongside the existing corner controls. */
#sound{right:calc(max(8px,env(safe-area-inset-right)) + 84px);top:max(8px,env(safe-area-inset-top));font-size:18px}#sound[aria-pressed="true"]{color:#d4d7d2;background:#27383dcc}@media(max-height:450px){#sound{right:calc(max(5px,env(safe-area-inset-right)) + 70px);width:30px;height:30px;font-size:16px}}