:root{--c-water: #1FB5C9;--c-deep: #0B5F8A;--c-gold: #FFD36B;--c-sand: #F2D3A0;--c-coral: #FF7A45;--c-magenta: #FF4F9A;--c-purple: #8B5CF6;--c-yellow: #FFC93C;--c-kelp: #2FA36B;--c-pearl: #FFF4D6;--c-ink: #062A44;--c-foam: #EAFCFF;--font-display: "Fredoka", "Rubik", system-ui, sans-serif;--font-body: "Rubik", system-ui, sans-serif;--fs-display: 28px;--fs-heading: 20px;--fs-body: 16px;--fs-caption: 13px;--fs-button: 17px;--glass-bg: rgba(6, 42, 68, .55);--glass-blur: 16px;--glass-border: rgba(255, 255, 255, .4);--glass-border-w: 1.5px;--glass-radius: 24px;--pill-radius: 999px;--touch-min: 48px;--press-scale: .96;--icon-stroke: 2.2;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--c-deep);color:var(--c-foam)}body{font-family:var(--font-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}#reef{position:fixed;inset:0;width:100%;height:100%;display:block}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}h1,h2,h3,.display{font-family:var(--font-display);margin:0}h1{font-size:var(--fs-display);font-weight:700}h2{font-size:var(--fs-heading);font-weight:600}.caption{font-size:var(--fs-caption);font-weight:500;opacity:.9}.glass{position:relative;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:var(--glass-border-w) solid var(--glass-border);border-radius:var(--glass-radius);color:var(--c-foam);box-shadow:0 8px 24px #062a4440,inset 0 1px #ffffff59;padding:16px}.glass:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120px 60px at 92% 6%,rgba(255,255,255,.28),transparent 70%)}.glass.pill{border-radius:var(--pill-radius);padding:10px 18px}.btn{font-family:var(--font-display);font-weight:600;font-size:var(--fs-button);min-height:var(--touch-min);min-width:var(--touch-min);padding:0 22px;border-radius:var(--pill-radius);border:var(--glass-border-w) solid var(--glass-border);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform 90ms ease,filter .12s ease;color:var(--c-foam);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}.btn.primary{background:var(--c-gold);color:var(--c-ink);border-color:#fff9}.btn:active{transform:scale(var(--press-scale))}.btn:disabled{opacity:.5;cursor:default}.btn.icon{padding:0;width:var(--touch-min);border-radius:50%}input.field{font-family:var(--font-body);font-size:var(--fs-body);color:var(--c-foam);background:#062a4473;border:var(--glass-border-w) solid var(--glass-border);border-radius:16px;padding:12px 14px;min-height:var(--touch-min);width:100%;outline:none}input.field:focus{border-color:var(--c-gold)}input.field::placeholder{color:#eafcff8c}.row{display:flex;align-items:center;gap:10px}.col{display:flex;flex-direction:column;gap:10px}.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.hidden{display:none!important}.topbar{position:absolute;top:calc(8px + var(--safe-top));right:12px;left:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}.topbar .brand{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.5px}.joystick{position:absolute;bottom:calc(28px + var(--safe-bottom));left:28px;width:128px;height:128px;border-radius:50%;background:#062a4459;border:var(--glass-border-w) solid var(--glass-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.joystick .knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#eafcffbf;box-shadow:0 4px 12px #062a444d}.vbuttons{position:absolute;bottom:calc(28px + var(--safe-bottom));right:24px;display:flex;flex-direction:column;gap:12px}.vbuttons .btn{width:64px;height:64px;border-radius:50%;padding:0;font-size:26px}.toast{position:absolute;top:calc(70px + var(--safe-top));left:50%;transform:translate(-50%);padding:10px 18px;animation:toast-in .24s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}.perf{position:absolute;top:calc(66px + var(--safe-top));left:12px;font:11px/1.3 monospace;opacity:.8;padding:4px 10px;direction:ltr}.wheel{position:absolute;bottom:calc(176px + var(--safe-bottom));left:50%;transform:translate(-50%);gap:6px}.wheel .btn{width:44px;height:44px;min-width:44px;min-height:44px}@media(min-width:900px){.wheel{bottom:calc(24px + var(--safe-bottom))}.wheel .btn{width:52px;height:52px}}.bubble{position:absolute;width:10px;height:10px;border-radius:50%;background:#eafcffcc;pointer-events:none;animation:rise .9s ease-out forwards}@keyframes rise{to{transform:translateY(-80px) scale(.3);opacity:0}}@media(min-width:900px){.joystick,.vbuttons{display:none}}