:root{--ink:#23304a;--ink-soft:#4b5b7a;--cream:#fff8ee;--gold:#f7c948;--gold-deep:#c98a12;--sky-top:#4f9fe0;--sky-mid:#9fd0f3;--sky-low:#e9f6fd;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--strip-h:0px;--font:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:var(--ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#142033;margin:0;overflow:hidden}.app{height:100vh;background:linear-gradient(var(--sky-top), var(--sky-mid) 60%, var(--sky-low));flex-direction:column;height:100dvh;display:flex;position:fixed;inset:0;overflow:hidden}.platform-strip{flex:0 0 var(--strip-h);height:var(--strip-h);overflow:hidden}.stage{flex:auto;min-height:0;position:relative;overflow:hidden}.game-canvas{touch-action:none;opacity:0;width:100%;height:100%;transition:opacity var(--fade-in,.45s) ease-out;display:block;position:absolute;inset:0}.stage.is-playing .game-canvas{opacity:1}@media (hover:hover) and (pointer:fine){body{background:radial-gradient(circle at 50% 30%,#2a3f5f,#101826 70%)}.app{aspect-ratio:440/956;border:10px solid #0b0f17;border-radius:46px;width:auto;height:min(100vh - 40px,956px);inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 30px 80px #0000008c,0 0 0 2px #2b3446}}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}.icon-btn{width:44px;height:44px;color:var(--cream);pointer-events:auto;background:#1420336b;border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 -3px #0000002e}.icon-btn svg{width:24px;height:24px}.icon-btn:active{transform:scale(.92)}.play-btn{letter-spacing:.02em;color:#4a2a00;background:linear-gradient(#ffe27a, var(--gold) 55%, #f0a92a);min-width:220px;box-shadow:inset 0 -6px 0 var(--gold-deep), 0 10px 24px #50280059;border-radius:999px;padding:18px 44px 20px;font-size:28px;font-weight:800;transition:transform .12s,filter .2s,opacity .3s}.play-btn:active:not(:disabled){box-shadow:inset 0 -3px 0 var(--gold-deep), 0 6px 14px #5028004d;transform:translateY(3px)scale(.97)}.play-btn:disabled{filter:grayscale(.6)brightness(.95);opacity:.75;cursor:default}.play-btn--small{min-width:0;padding:12px 28px 14px;font-size:20px}.title{z-index:20;background:radial-gradient(120% 70% at 50% 38%,#bfe6ff 0%,#7cc0ef 38%,#3d86cf 72%,#26579b 100%);flex-direction:column;align-items:center;transition:opacity .5s,transform .5s;display:flex;position:absolute;inset:0;overflow:hidden}.title.is-leaving{opacity:0;pointer-events:none;transform:scale(1.04)}.title-media{position:absolute;inset:0}.title-poster,.title-video{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .8s;position:absolute;inset:0}.title-poster.is-shown,.title-video.is-shown{opacity:1}.title-glow{pointer-events:none;background:radial-gradient(60% 30% at 50% 36%,#fff6d68c,#0000 70%),linear-gradient(#0000 60%,#10204073);position:absolute;inset:0}.title-sound{top:calc(var(--safe-top) + 14px);right:calc(var(--safe-right) + 14px);z-index:2;position:absolute}.title-centre{flex:auto;justify-content:center;align-items:center;padding-bottom:12vh;display:flex;position:relative}.title-name{color:var(--cream);text-align:center;text-shadow:0 4px #1d3f77,0 8px #1228508c,0 14px 26px #0a143273;-webkit-text-stroke:2px #1d3f77;flex-direction:column;align-items:center;margin:0;font-weight:900;line-height:.92;display:flex;transform:rotate(-3deg)}.title-name-a{font-size:clamp(48px,15vw,76px)}.title-name-b{color:var(--gold);font-size:clamp(56px,18vw,92px)}.title-bottom{padding-bottom:calc(var(--safe-bottom) + 9vh);flex-direction:column;align-items:center;gap:14px;display:flex;position:relative}.title-progress{background:#ffffff47;border-radius:3px;width:180px;height:6px;transition:opacity .4s;overflow:hidden}.title-progress-fill{background:var(--cream);transform-origin:0;width:100%;height:100%;transition:transform .2s linear;transform:scaleX(0)}.title.is-ready .title-progress{opacity:0}.title-status{min-height:1.2em;color:var(--cream);text-shadow:0 1px 2px #00000059;margin:0;font-size:15px;font-weight:700}.title.is-ready .play-btn{animation:1.6s ease-in-out infinite play-pulse}@keyframes play-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.hud{z-index:10;pointer-events:none;opacity:0;flex-direction:column;justify-content:space-between;transition:opacity .4s .15s;display:flex;position:absolute;inset:0}.hud.is-shown{opacity:1}.hud-top{padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) 0 calc(var(--safe-left) + 12px);align-items:center;gap:10px;display:flex}.hud-spacer{flex:1}.counter{height:38px;color:var(--cream);font-variant-numeric:tabular-nums;background:#14203380;border-radius:19px;align-items:center;gap:6px;padding:0 14px 0 6px;font-size:19px;font-weight:800;display:flex;box-shadow:inset 0 -3px #0003}.counter-icon{place-items:center;width:28px;height:28px;display:grid}.counter-icon svg{width:26px;height:26px}.hud-bottom{padding:0 calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 12px);justify-content:center;align-items:flex-end;gap:10px;display:flex}.hud-btn{pointer-events:auto;max-width:130px;height:58px;color:var(--ink);background:linear-gradient(#fffaf1,#f1e2cc);border-radius:18px;flex:1 1 0;font-size:17px;font-weight:800;transition:transform .1s;box-shadow:inset 0 -5px #cdb08c,0 6px 14px #141e3c40}.hud-btn--primary{color:#4a2a00;background:linear-gradient(#ffe27a, var(--gold) 55%, #f0a92a);max-width:170px;height:70px;box-shadow:inset 0 -6px 0 var(--gold-deep), 0 8px 18px #5028004d;flex-grow:1.35;flex-basis:0;font-size:24px}.hud-btn:active{transform:translateY(2px)scale(.97)}.perf{z-index:30;top:calc(var(--safe-top) + 60px);left:calc(var(--safe-left) + 8px);right:calc(var(--safe-right) + 8px);color:#e9f1ff;pointer-events:none;font-variant-numeric:tabular-nums;background:#080c16bd;border-radius:10px;padding:8px 10px;font:600 13px/1.4 ui-monospace,SF Mono,Menlo,Consolas,monospace;position:absolute}.perf-row{flex-wrap:wrap;gap:2px 14px;display:flex}.perf-label{color:#8fa3c4}.perf-p50,.perf-p95,.perf-fps{color:#a6f4c5;font-size:15px}.perf-gpu{color:#8fa3c4;font-size:11px}.perf-value.is-bad{color:#ff8f8f}.perf-note{color:#fff;background:#b45309;border-radius:6px;margin-top:4px;padding:4px 6px}.cover{z-index:50;text-align:center;color:var(--cream);background:linear-gradient(#26579b,#142033);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;font-size:20px;font-weight:800;display:flex;position:fixed;inset:0}.cover[hidden]{display:none}.cover p{max-width:320px;margin:0}.cover-message{z-index:40;position:absolute}.cover-rotate{display:none}.cover-rotate-phone{border:5px solid var(--cream);border-radius:12px;width:46px;height:80px;animation:2s ease-in-out infinite rotate-hint}@keyframes rotate-hint{0%,30%{transform:rotate(-90deg)}60%,to{transform:rotate(0)}}@media (orientation:landscape) and (hover:none) and (pointer:coarse){.cover-rotate{display:flex}}@media (prefers-reduced-motion:reduce){.title.is-ready .play-btn,.cover-rotate-phone{animation:none}}
