/* Comic cloud passage: white inked walls, saffron vanishing point. */
@font-face{font-family:CloudTitle;src:url('../assets/fonts/cloud-title.ttf') format('truetype');font-weight:900;font-display:swap}
html,body.booting{background:#e8a02e}
#world:focus{outline:none}
#game-ui{opacity:1;transition:opacity 280ms ease-out}
body.booting #game-ui,body.booting #qa-controls{visibility:hidden;pointer-events:none;opacity:0}
#startup{position:fixed;inset:0;z-index:100;background:#e8a02e;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff4c7;overflow:hidden}
#cloud-canvas,.cloud-ink-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#startup-title{position:absolute;top:max(7vh,env(safe-area-inset-top));left:8vw;margin:0;font:900 clamp(26px,3.25vw,44px)/1.12 CloudTitle,sans-serif;letter-spacing:-.025em;color:#fff4c7;-webkit-text-stroke:2px #827745;paint-order:stroke fill;text-wrap:balance}
.startup-identity{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:8vw;margin:0;font:900 14px/1.4 CloudTitle,sans-serif;color:#44332b}
.startup-identity small{display:block;margin-top:3px;font:11px/1.6 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;letter-spacing:.06em}
#ignition-button{position:absolute;left:var(--cloud-x,50%);top:var(--cloud-y,47.5%);transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;min-width:116px;min-height:74px;padding:10px 8px;border:0;border-radius:0;color:#fff4c7;background:transparent;text-align:left;touch-action:none;-webkit-touch-callout:none;transition:color 160ms ease-out,transform 160ms ease-out}
#ignition-button svg{flex:none;width:43px;height:43px;fill:currentColor;stroke:none}
#ignition-button .mouse-press{fill:none;stroke:currentColor;stroke-width:1.5}
#ignition-button .startup-button-copy{display:grid;gap:1px;-webkit-text-stroke:1.25px #795021;paint-order:stroke fill}
#startup-control{font:900 13px/1.4 CloudTitle,sans-serif;letter-spacing:.01em}
#ignition-button strong{font:900 16px/1.35 CloudTitle,sans-serif;letter-spacing:.01em}
#ignition-button:hover{color:#fff}
#ignition-button:focus-visible{outline:2px solid #513d25;outline-offset:3px}
#ignition-button.is-held{color:#fff;transform:translate(-50%,-50%) scale(.92)}
#startup-status{position:absolute;left:22px;right:22px;bottom:max(70px,calc(env(safe-area-inset-bottom) + 50px));margin:0;text-align:center;font:12px/1.7 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;color:#44332b}
.startup-hint{position:absolute;right:5vw;bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));margin:0;text-align:right;font:11px/1.6 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;color:#44332b}
#startup-speed{display:inline-block;min-width:3.5em;margin-left:9px;font-variant-numeric:tabular-nums}
.startup-interface{transition:opacity 180ms ease-out}
#startup[data-state='falling'],#startup[data-state='impact'],#startup[data-state='recovering']{background:transparent;pointer-events:none}
#startup:is([data-state='falling'],[data-state='impact'],[data-state='recovering']) .startup-interface{opacity:0;visibility:hidden}
#startup[data-state='error'] #ignition-button{background:#fff4c7;color:#513d25;padding:12px 16px;min-width:158px}
#startup[data-state='error'] .startup-hint{visibility:hidden}
#startup-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:540px){#startup-title{left:7vw;top:max(5vh,env(safe-area-inset-top));font-size:28px}.startup-identity{left:7vw;bottom:max(58px,calc(env(safe-area-inset-bottom) + 48px));font-size:12px}.startup-identity small{display:none}#startup-status{bottom:max(92px,calc(env(safe-area-inset-bottom) + 72px));font-size:11px}.startup-hint{left:7vw;right:7vw;bottom:max(27px,calc(env(safe-area-inset-bottom) + 17px));font-size:11px;text-align:left}}
@media(prefers-reduced-motion:reduce){#game-ui,.startup-interface,#ignition-button{transition:none}}

/* World < startup/cloud canvas (0) < interface (1) < pure-white transition (3). */
#cloud-canvas{z-index:0}
.startup-interface{z-index:1}
#startup-white{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
#startup:is([data-state='covering'],[data-state='whitehold'],[data-state='revealing']) .startup-interface{opacity:0;visibility:hidden}
#startup:is([data-state='whitehold'],[data-state='revealing']){background:transparent;pointer-events:none}
#startup:is([data-state='whitehold'],[data-state='revealing'],[data-state='falling'],[data-state='impact'],[data-state='recovering'],[data-state='playing']) #cloud-canvas{visibility:hidden}