*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b1620;color:#eaf3f6;font-family:system-ui,sans-serif}#app{position:relative;height:100%;overflow:hidden}#stage{display:block;width:100%;height:100%;touch-action:none}.screen{position:absolute;inset:0;display:grid;place-content:center;gap:.75rem;text-align:center;padding:1.5rem;z-index:10;overflow-y:auto;background:radial-gradient(ellipse at center,#08121cbd,#04090ef5)}.screen[hidden],#hud[hidden],.touch-controls[hidden],#warn-banner[hidden]{display:none}.eyebrow{margin:0;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:#7fe3d0}h1{margin:0;font-size:clamp(2.4rem,9vw,5rem);line-height:1;letter-spacing:-.02em}h2{margin:0;font-size:clamp(1.8rem,6vw,3rem);line-height:1.1}.lede{margin:0 auto;max-width:36rem;color:#cbd9e0}.hint{margin:0;font-size:.8rem;color:#a9bcc6}.primary{justify-self:center;padding:.7rem 1.6rem;border-radius:999px;border:1px solid #7fe3d0;background:#7fe3d0;color:#05100e;font-weight:700;font-size:1rem;cursor:pointer}.ghost{padding:.7rem 1.4rem;border-radius:999px;border:1px solid #8fa7b3;background:transparent;color:#eaf3f6;font-weight:600;font-size:1rem;cursor:pointer}.row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}.stars{margin:0;font-size:2rem;letter-spacing:.25em;color:#ffc65a}.score-line{margin:0;font-weight:700}button:focus-visible{outline:2px solid #ffd45a;outline-offset:3px}#levels{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}#levels button{display:grid;gap:.15rem;min-width:7.6rem;padding:.6rem .9rem;border-radius:.9rem;border:1px solid #36546a;background:#0b1620cc;color:#eaf3f6;cursor:pointer;font:inherit}#levels button[aria-checked=true]{border-color:#7fe3d0;background:#7fe3d029;box-shadow:0 0 0 1px #7fe3d0 inset}.lv-name{font-weight:700}.lv-meta{font-size:.72rem;color:#dbe7ed}#hud{position:absolute;inset:0;z-index:4;pointer-events:none;display:grid;grid-template-rows:auto auto auto auto auto 1fr auto;gap:.35rem;padding:.75rem;padding-top:max(.75rem,env(safe-area-inset-top))}.hud-top{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.hud-top span{background:#060d14d1;border:1px solid #36546a;border-radius:999px;padding:.25rem .7rem;font-size:.8rem;font-variant-numeric:tabular-nums}.hud-top span.hot{color:#ffb36a;border-color:#ff9a4a}.hud-top span.good{color:#9ff0e0;border-color:#7fe3d0}.hud-top button{pointer-events:auto;margin-left:auto;padding:.3rem .8rem;border-radius:999px;border:1px solid #7fe3d0;background:#060d14d1;color:#9ff0e0;cursor:pointer;font-size:.8rem}.bar-track{position:relative;height:10px;background:#060d14d9;border:1px solid #36546a;border-radius:6px;overflow:hidden}.bar-track.water{height:7px}#cov-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#4fb7e8,#aef2ff)}#goal-mark{position:absolute;top:0;bottom:0;width:2px;background:#ffc65a;left:90%}#water-fill{position:absolute;inset:0 auto 0 0;width:100%;background:#6fd6c0}#warn-banner{grid-row:4;justify-self:center;max-width:92vw;margin:0;padding:.4rem 1rem;border-radius:999px;background:#be2828f0;border:1px solid #ffd45a;color:#fff;font-weight:700;font-size:.85rem;text-align:center;animation:warn .6s ease-in-out infinite alternate}@keyframes warn{to{transform:scale(1.05)}}#hud-status{margin:.2rem 0;text-align:center;font-size:.85rem;color:#d6ecf4;min-height:1em;text-shadow:0 1px 3px #000;align-self:start;grid-row:5}.touch-controls{grid-row:7;pointer-events:auto;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:max(.5rem,env(safe-area-inset-bottom))}.touch-controls button{border-radius:14px;border:1px solid #7fe3d0;background:#08161ec7;color:#eaf3f6;font-weight:700;font-size:1.1rem;touch-action:none;user-select:none;-webkit-user-select:none}.dpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px);gap:6px;grid-template-areas:". up ." "left down right"}.dpad button{width:54px;height:54px;padding:0}#btn-up{grid-area:up}#btn-left{grid-area:left}#btn-down{grid-area:down}#btn-right{grid-area:right}.acts{display:grid;gap:8px}.acts button{min-width:112px;height:54px;padding:0 1rem}#btn-spray{background:#7fe3d0;color:#05100e;height:74px;font-size:1.2rem}#btn-boost{border-color:#ffc65a;color:#ffe3a8}#btn-boost:disabled{opacity:.45}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 60%,rgba(2,6,10,.45))}@media(prefers-reduced-motion:reduce){#warn-banner{animation:none}}
