:root{color-scheme:dark;--ink:#11191c;--paper:#e5e9e6;--accent:#d19a68}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);overscroll-behavior:none}
body{font-family:system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none}
button{border:0;color:var(--paper);background:transparent;cursor:pointer;padding:0;display:grid;place-items:center;touch-action:none;outline:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#utility{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:8px;z-index:3}
#utility button{width:44px;height:44px;opacity:.55;background:#11191c99;border-radius:50%}
#utility button svg{width:25px;height:25px}
#sound.muted .waves{opacity:.16}
#controls{position:absolute;inset:0;pointer-events:none;z-index:2}
#controls>div{position:absolute;display:flex;gap:16px;bottom:max(22px,env(safe-area-inset-bottom));pointer-events:auto}
.movement{left:max(26px,env(safe-area-inset-left))}.actions{right:max(26px,env(safe-area-inset-right))}
#controls button{width:64px;height:64px;border:1px solid #e5e9e639;border-radius:50%;background:#11191cbb;transition:background .12s,border-color .12s}
#controls button.held{border-color:var(--paper);background:#e5e9e626}
#controls #act{color:var(--accent);border-color:#d19a6870}
.lid{opacity:0}#act.held .lid{opacity:1}
#veil,#menu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;background:#11191c55;backdrop-filter:blur(3px)}
#veil button{width:98px;height:98px;background:#11191ccc;border-radius:50%}
#veil svg{width:80px;height:80px;stroke-width:1.5}
#veil.hidden{display:none}
#menu{gap:28px;background:#11191cc9;backdrop-filter:blur(10px)}
#menu[hidden]{display:none}
#menu button{width:76px;height:76px;border:1px solid #e5e9e644;border-radius:50%}
#menu button svg{width:40px;height:40px}
@media(max-width:600px) and (orientation:portrait){#controls>div{bottom:max(35px,env(safe-area-inset-bottom));gap:12px}.movement{left:22px}.actions{right:22px}#controls button{width:60px;height:60px}}
@media(max-height:500px){#controls>div{bottom:max(14px,env(safe-area-inset-bottom));gap:12px}#controls button{width:56px;height:56px}.movement{left:max(20px,env(safe-area-inset-left))}.actions{right:max(20px,env(safe-area-inset-right))}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

#controls .climbing{left:max(26px,env(safe-area-inset-left));bottom:max(101px,calc(env(safe-area-inset-bottom) + 82px));}
#climbing[hidden],#clear[hidden]{display:none}
#controls .climbing button{height:50px;width:64px;border-radius:20px;border-color:#7c929580}
#quick-retry.caught{opacity:1;color:var(--accent)}
#clear{position:absolute;inset:76% 0 auto;display:flex;align-items:center;flex-direction:column;gap:18px;z-index:3;animation:appear 1.2s ease}
#clear p{font-size:22px;letter-spacing:.18em;color:var(--paper);margin:0;font-weight:400}
#clear button{height:52px;width:52px;border:1px solid #e5e9e639;border-radius:50%}
#clear button svg{height:26px;width:26px}
@keyframes appear{from{opacity:0}to{opacity:1}}
@media(max-width:600px) and (orientation:portrait){#controls .climbing{left:22px;bottom:max(110px,calc(env(safe-area-inset-bottom) + 95px))}#controls .climbing button{width:60px}}
@media(max-height:500px){#controls .climbing{left:max(20px,env(safe-area-inset-left));bottom:82px}#controls .climbing button{width:56px;height:44px}#clear{inset:63% 0 auto;gap:10px}}
@media(prefers-reduced-motion:reduce){#clear{animation:none}}

@media(max-width:600px) and (orientation:portrait){#clear{inset:64% 0 auto}}

#utility #quick-retry.stranded{position:fixed;left:50%;bottom:max(35px,env(safe-area-inset-bottom));transform:translateX(-50%);width:64px;height:64px;opacity:1;border:1px solid var(--accent);background:var(--ink)}
#utility #quick-retry.stranded svg{width:38px;height:38px}