body.booting{overflow:hidden;overscroll-behavior:none}
#boot-splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px;background:radial-gradient(ellipse at 50% 42%,#247966 0%,#124a42 48%,#062e2a 100%);color:#fff6d4;overflow:hidden;opacity:1;transition:opacity .4s ease;isolation:isolate}
#boot-splash.boot-leaving{opacity:0;pointer-events:none}
.boot-logo{position:relative;width:min(76vw,560px);height:auto;z-index:2;filter:drop-shadow(0 16px 22px #02192988);animation:boot-arrive .65s cubic-bezier(.18,.85,.25,1.2) both,boot-float 3s .65s ease-in-out infinite}
.boot-glow{position:absolute;width:min(105vw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f8dd8b38,transparent 65%);animation:boot-glow 3s ease-in-out infinite;z-index:-1}
.boot-sparks{position:absolute;inset:0;pointer-events:none;z-index:-1}
.boot-sparks span{position:absolute;left:calc(12% + var(--i,0)*15%);top:65%;width:7px;height:7px;border-radius:50%;background:#ffe8a0;box-shadow:0 0 18px #ffe8a0;animation:boot-spark 3.8s calc(var(--i,0)*-.6s) ease-in-out infinite}
.boot-sparks span:nth-child(2){--i:1}.boot-sparks span:nth-child(3){--i:2}.boot-sparks span:nth-child(4){--i:3}.boot-sparks span:nth-child(5){--i:4}.boot-sparks span:nth-child(6){--i:5}
.boot-track{width:min(58vw,280px);height:9px;padding:2px;border-radius:999px;background:#061e3699;box-shadow:inset 0 1px 3px #0008,0 1px 0 #a3d5d333}
.boot-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#efaa54,#ffe49a);box-shadow:0 0 12px #ffd27966;transition:width .3s ease}
#boot-status{font-size:12px;letter-spacing:.5px;margin:0;min-height:18px;text-align:center;color:#ebf0e1}
#boot-skip{background:#ffffff12;border:1px solid #ffffff30;color:#fff6d4;border-radius:20px;padding:9px 20px;font-size:12px}
body.booting #title-screen .game-wordmark,body.booting #title-screen #play{visibility:hidden}
body.app-ready #title-screen .game-wordmark{animation:title-unfold .75s cubic-bezier(.16,.85,.3,1.15) both}
body.app-ready #title-screen #play{animation:title-unfold .6s .2s cubic-bezier(.16,.85,.3,1.15) both}
@keyframes boot-arrive{from{opacity:0;transform:translateY(28px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes boot-float{50%{transform:translateY(-9px) rotate(-.6deg)}}
@keyframes boot-glow{50%{opacity:.65;transform:scale(1.12)}}
@keyframes boot-spark{0%,100%{opacity:0;transform:translateY(20px) scale(.5)}35%,65%{opacity:.7}80%{opacity:0;transform:translateY(-180px) scale(1)}}
@keyframes title-unfold{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.boot-reduced *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#boot-splash,#boot-splash *{animation:none!important;transition:none!important}body.app-ready #title-screen .game-wordmark,body.app-ready #title-screen #play{animation:none}}
body[data-reduced-motion="true"].app-ready #title-screen .game-wordmark,body[data-reduced-motion="true"].app-ready #title-screen #play{animation:none}
body.boot-motion-reduced.app-ready #title-screen .game-wordmark,body.boot-motion-reduced.app-ready #title-screen #play{animation:none}

/* The ident is a reusable studio asset; always fit the complete logo on phones. */
#boot-splash{background:radial-gradient(ellipse at 50% 42%,#105064,#002e3e 52%,#001c29);padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));gap:18px}
.studio-stage{position:relative;width:min(92vw,700px,calc((100dvh - 170px)*1.5));aspect-ratio:3/2;flex-shrink:0;filter:drop-shadow(0 18px 25px #0008);animation:studio-arrive .5s ease-out both}
.studio-stage img,.studio-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:24px}
.studio-stage video{opacity:0;transition:opacity .18s}
.studio-playing .studio-stage video{opacity:1}
.studio-playing .studio-poster{visibility:hidden}
.studio-fallback .studio-poster{animation:studio-poster-bounce 2.8s ease-in-out infinite}
.studio-caption{position:absolute;left:0;right:0;bottom:-12px;text-align:center;font-size:10px;letter-spacing:2.2px;font-weight:800;color:#a2dcd3;text-shadow:0 1px 5px #001b28}
#boot-skip[hidden]{display:none}
#boot-skip{min-height:40px;cursor:pointer}
@keyframes studio-arrive{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
@keyframes studio-poster-bounce{45%{transform:scale(1.025) rotate(-.6deg)}55%{transform:scale(.985,1.015)}70%{transform:scale(1.01)}}
@media(prefers-reduced-motion:reduce){.studio-stage,.studio-poster{animation:none!important}}

#studio-sound{border:1px solid #ffe7a0;background:linear-gradient(#ffe194,#f4b64d);color:#073b4d;border-radius:22px;min-height:42px;padding:9px 20px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #997432}#studio-sound:disabled{opacity:.6;cursor:default}#studio-sound[hidden]{display:none}.topbar .brand{flex-shrink:0}.topbar .studio-brand{width:108px;height:70px;object-fit:contain;border-radius:12px;filter:drop-shadow(0 2px 2px #14453b33)}@media(max-width:700px){.topbar .studio-brand{width:76px;height:51px}.topbar{height:auto;min-height:70px}}@media(max-width:360px){.topbar .studio-brand{width:62px;height:46px}.topbar .top-actions{gap:3px;padding:3px}.topbar .heart-icons{display:none}.topbar .heart-panel b{display:inline-block}.topbar .heart-panel small{display:none}}