:root{color-scheme:dark;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#091b20;color:#f6ebd5}*{box-sizing:border-box}body{margin:0;min-height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);display:grid;place-items:center;overscroll-behavior:none}#app{width:min(100%,430px)}header{height:48px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}header .brand{color:#d9d6ba;font-weight:800;letter-spacing:2px;font-size:11px;text-decoration:none}button{font:inherit;cursor:pointer;touch-action:none}button:focus-visible{outline:3px solid #f6ebd5;outline-offset:4px}#pause{background:#294440;border:0;color:#fff;border-radius:50%;width:36px;height:36px;font-weight:900}.stage{position:relative;width:100%;height:min(740px,calc(100dvh - 76px - var(--safe-top) - var(--safe-bottom)));min-height:410px;overflow:hidden;background:#102b2b;border:1px solid #31504a;border-radius:22px}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none}.hud small{display:block;font-size:11px;font-weight:800;letter-spacing:2px;color:#b4c4ad}.hud strong{font-size:30px;font-variant-numeric:tabular-nums}.hud em{font-style:normal;font-size:12px;margin-left:4px}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:30px;background:linear-gradient(180deg,#102b2bd9 0%,#102b2b33 50%,#102b2bec 100%)}.eyebrow{color:#ef9b66;font-size:11px;letter-spacing:2px;font-weight:900}h1{font-size:clamp(40px,12vw,58px);letter-spacing:-3px;line-height:.98;margin:15px 0 16px;font-weight:900}h1 i{font-style:normal;color:#ed9a65}p{font-size:15px;line-height:1.5;color:#d6dac8;margin:0 0 22px}#instructions{margin-top:95px}#instructions b{font-size:15px}#instructions p{font-size:13px;margin:8px 0 22px}#start{background:#eb9360;border:1px solid #ffd5ad;color:#142c2b;border-radius:12px;padding:17px 18px;font-weight:900;text-align:left;display:flex;justify-content:space-between;font-size:16px;box-shadow:0 5px 0 #965d40}#start:active{transform:translateY(3px);box-shadow:0 2px 0 #965d40}.fine{font-size:10px;margin:15px 0 0;color:#abb9ac;text-align:center}#hold{position:absolute;bottom:20px;left:22px;right:22px;border:1px solid #91a799;border-radius:12px;background:#173c39de;color:#f6ebd5;padding:14px;font-size:13px;font-weight:800;letter-spacing:1px}#hold span{float:right}#hold.active{background:#eb9360;color:#142c2b;border-color:#eb9360}#callout{position:absolute;top:94px;width:100%;text-align:center;color:#f4bc81;font-weight:800;font-size:13px;pointer-events:none}#result{font-size:40px;font-weight:900;color:#f7ead0;margin:0 0 20px}footer{text-align:center;height:28px;padding:9px;font-size:9px;letter-spacing:1.5px;color:#7f9990}[hidden]{display:none!important}@media(max-height:700px){#overlay{padding:24px}#instructions{margin-top:55px}h1{font-size:43px}p{margin-bottom:15px}#instructions p{margin-bottom:15px}.stage{border-radius:14px}header{height:40px}footer{height:24px}.fine{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-height:700px){#overlay{padding:20px}h1{font-size:39px;margin:12px 0}#message{font-size:13px;line-height:1.35}#instructions{margin-top:25px}#instructions p{font-size:12px;line-height:1.35}#start{padding:15px}.fine{margin-top:12px}}

#menu-mascot{flex-shrink:0;width:140px;height:98px;background:url('assets/sloth-atlas-v1.png?v=f45554c4b4e59eb7') no-repeat;background-size:412.1px 412.1px;background-position:-5.26px -161.03px;margin:0 auto 12px}#instructions{margin-top:0}@media(max-height:700px){#menu-mascot{width:96px;height:67px;background-size:282.59px 282.59px;background-position:-3.61px -110.42px;margin-bottom:6px}h1{font-size:36px;margin:8px 0}#message{font-size:12px;margin-bottom:6px}#instructions{margin-top:0}#instructions b{font-size:14px}#instructions p{margin-bottom:12px}#start{padding:14px}}

/* Dedicated airborne pose, shared character asset v1. */
#menu-mascot{width:156px;height:104px;background-image:url('assets/sloth-airborne-v1.png?v=f45554c4b4e59eb7');background-size:contain;background-position:center}@media(max-height:700px){#menu-mascot{width:105px;height:70px;background-size:contain;background-position:center}}

:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
body{touch-action:none}.stage{min-height:0}#overlay{overflow-y:auto;justify-content:safe center}


#sound{font:700 11px/1.2 system-ui,sans-serif;min-height:40px;min-width:72px;padding:8px;border:1px solid #718f80;border-radius:12px;background:#1b3935;color:#f6ebd5;touch-action:manipulation;flex-shrink:0}header{gap:8px}header .brand,header>a{margin-right:auto}#pause{min-width:40px;min-height:40px;flex-shrink:0}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#snap-results{flex-shrink:0;margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}#snap-board{min-height:44px;padding:10px 18px;border:1px solid #9ab9a6;border-radius:12px;background:#21473f;color:#f7efda;font-size:14px;font-weight:800}#snap-board:disabled{opacity:.6}#snap-portrait{width:36px;height:36px;object-fit:contain}#snap-status{flex-basis:100%;font-size:12px;text-align:center;color:#cfdece;line-height:1.35}

#replay-target,#result-note,#fine,#keyboard{font-size:12px;line-height:1.5;color:#d0ddc9;white-space:normal}#replay-target{margin:0 0 14px}

/* Results are a dedicated composition: frozen hazards must not bleed through. */
#overlay:has(#result:not([hidden])){background:linear-gradient(155deg,#173b3b 0%,#102b2b 65%,#0c2428 100%)}

/* Candidate: preserve the world and mascot aspect on every viewport. */
#app{--flight-height:min(740px,calc(100dvh - 56px - var(--safe-top) - var(--safe-bottom)));width:min(100%,430px,calc(var(--flight-height) * .5625 + 2px))}
.stage{height:auto}canvas{height:auto;aspect-ratio:360 / 640}
@media(max-height:700px){#app{--flight-height:min(740px,calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom)))}}

/* Isolate score and transient instructions from moving ceiling art. */
.hud{top:0;left:0;right:0;padding:18px 22px 16px;background:linear-gradient(#102b2b 80%,#102b2b00)}
#callout:not(:empty){text-shadow:0 2px 3px #102b2b,0 0 6px #102b2b}

/* Encounter instructions stay clear of the top flight lane. */
.stage[data-guard] #callout{top:auto;bottom:4px;left:10px;width:calc(100% - 20px);padding:5px 6px;border:1px solid #8ba593;border-radius:12px;background:#102631ef;font-size:11px;line-height:1.3;color:#fff1cd;pointer-events:none;z-index:2}