:root{--ink:#f4f8ff;--glass:#0e18348c;--gold:#ffd36b}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#0d1630;margin:0;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,sans-serif;overflow:hidden}#renderCanvas{touch-action:none;outline:none;width:100%;height:100%;display:block}#hud{top:max(16px, env(safe-area-inset-top));pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:fixed;left:16px;right:16px}.score{background:var(--glass);-webkit-backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:8px;padding:8px 16px 8px 12px;font-size:22px;font-weight:700;display:flex;box-shadow:0 4px 18px #00000040}.score .star{color:var(--gold);text-shadow:0 0 10px #ffd36bcc}.score.bump{animation:.35s ease-out bump}@keyframes bump{40%{transform:scale(1.18)}}.trick{letter-spacing:.02em;color:#fff;text-shadow:0 2px #00000040,0 0 18px #8cc8ffe6;opacity:0;white-space:nowrap;pointer-events:none;font-size:clamp(22px,5vw,38px);font-weight:800;position:fixed;top:22%;left:50%;transform:translate(-50%)}.trick.show{animation:1.4s ease-out forwards trick}@keyframes trick{0%{opacity:0;transform:translate(-50%,12px)scale(.85)}15%{opacity:1;transform:translate(-50%)scale(1.05)}70%{opacity:1;transform:translate(-50%,-6px)scale(1)}to{opacity:0;transform:translate(-50%,-18px)scale(1)}}#sound{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));background:var(--glass);-webkit-backdrop-filter:blur(8px);width:44px;height:44px;color:var(--ink);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;transition:transform .15s,background .2s;display:grid;position:fixed;box-shadow:0 4px 18px #00000040}#sound svg{width:22px;height:22px}#sound .off,#sound.muted .on{display:none}#sound.muted .off{display:block}#sound.muted{color:#f4f8ff99}#sound:hover{transform:scale(1.06)}#sound:active{transform:scale(.95)}#sound:focus-visible{outline-offset:2px;outline:3px solid #fff}#spin{text-align:center;pointer-events:none;opacity:0;will-change:transform;transition:opacity .35s;position:fixed;top:0;left:0}#spin.on{opacity:1}#spin .n{font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 14px #ffd36be6,0 2px #0000004d;font-size:38px;font-weight:800;line-height:1;display:block}#spin.pop .n{animation:.45s cubic-bezier(.2,1.6,.4,1) spinPop}@keyframes spinPop{0%{color:var(--gold);transform:scale(1.7)}to{transform:scale(1)}}#spin .burst{position:absolute;top:19px;left:50%}#spin .burst i{opacity:0;background:#fff1c4;border-radius:50%;width:6px;height:6px;position:absolute;top:-3px;left:-3px;box-shadow:0 0 6px #ffd36b,0 0 12px #ffb53a}#spin.pop .burst i{animation:.65s ease-out burst}@keyframes burst{0%{opacity:1;transform:rotate(var(--a)) translateX(10px) scale(1.2)}to{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.2)}}#hint{left:50%;bottom:max(18px, env(safe-area-inset-bottom));pointer-events:none;flex-wrap:wrap;justify-content:center;gap:6px;width:max-content;max-width:calc(100% - 32px);transition:opacity 1.2s;display:flex;position:fixed;transform:translate(-50%)}#hint span{background:var(--glass);-webkit-backdrop-filter:blur(8px);white-space:nowrap;border-radius:999px;padding:7px 12px;font-size:14px}#hint b{color:var(--gold);font-weight:700}#hint.hidden{opacity:0}#loader{text-align:center;z-index:10;background:radial-gradient(circle at 50% 40%,#1d2d5c,#0d1630 70%);place-content:center;transition:opacity .8s;display:grid;position:fixed;inset:0}#loader .flake{font-size:56px;animation:3s linear infinite spin}#loader p{opacity:.8;margin:12px 0 0}#loader.ready .flake{animation-duration:12s}#loader.ready .status{letter-spacing:.01em;opacity:1;text-shadow:0 0 24px #8cbeff73;font-size:clamp(28px,6vw,44px);font-weight:800}#enter{background:var(--gold);color:#1a1a2e;font:inherit;letter-spacing:.02em;cursor:pointer;border:0;border-radius:999px;justify-self:center;margin-top:26px;padding:14px 34px;font-size:18px;font-weight:800;transition:transform .15s;animation:.5s ease-out both enterIn,2.2s ease-in-out .6s infinite enterPulse;box-shadow:0 0 #ffd36b8c,0 8px 24px #00000059}#enter:hover{transform:scale(1.05)}#enter:active{transform:scale(.97)}#enter:focus-visible{outline-offset:3px;outline:3px solid #fff}@keyframes enterIn{0%{opacity:0;transform:translateY(8px)}}@keyframes enterPulse{50%{box-shadow:0 0 0 12px #ffd36b00,0 8px 24px #00000059}}@property --iris{syntax:"<length>";inherits:false;initial-value:0}#loader.reveal{pointer-events:none;-webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%), transparent var(--iris), #000 calc(var(--iris) + 140px));-webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%), transparent var(--iris), #000 calc(var(--iris) + 140px));mask-image:radial-gradient(circle at var(--x,50%) var(--y,50%), transparent var(--iris), #000 calc(var(--iris) + 140px));animation:1.6s cubic-bezier(.55,0,.25,1) forwards iris}#loader.reveal>*{opacity:0;transition:opacity .3s}@keyframes iris{85%{opacity:1}to{--iris:150vmax;opacity:0}}#loader.done{display:none}@keyframes spin{to{transform:rotate(360deg)}}
