:root{--reef-bg:#031721;--reef-panel:#04141fd6;--reef-panel-strong:#04141ff2;--reef-text:#f8fafc;--reef-muted:#e2f2fbc2;--reef-cyan:#67e8f9;--reef-coral:#fb7185;--reef-gold:#facc15;--reef-lime:#a3e635;--reef-plum:#f472b6}*{box-sizing:border-box}html,body,#game-root{background:var(--reef-bg);width:100%;height:100%;color:var(--reef-text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button{font:inherit}canvas{touch-action:none;width:100%;height:100%;display:block}.reef-root{isolation:isolate;position:relative}.reef-loading{z-index:5;background:var(--reef-bg);color:var(--reef-cyan);place-items:center;font-weight:800;display:grid;position:fixed;inset:0}.reef-menu{z-index:10;background:linear-gradient(180deg, #082f49e6, #04141ff2), var(--reef-panel-strong);border:1px solid #67e8f957;border-radius:8px;gap:18px;width:min(760px,100% - 32px);max-height:calc(100dvh - 32px);padding:24px;animation:.24s ease-out reef-menu-in;display:grid;position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 28px 80px #0000007a}.reef-start-menu{top:52%}.reef-title-block{gap:8px;display:grid}.reef-kicker{color:var(--reef-lime);letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:900}.reef-menu h1{color:var(--reef-text);letter-spacing:0;margin:0;font-size:clamp(34px,5vw,62px);line-height:.94}.reef-menu h2{color:var(--reef-cyan);letter-spacing:0;margin:0;font-size:18px}.reef-menu p{max-width:58ch;color:var(--reef-muted);margin:0;font-size:16px;line-height:1.45}.reef-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.reef-mini-panel{background:#0206177a;border:1px solid #67e8f93d;border-radius:8px;align-content:start;gap:6px;min-height:88px;padding:12px;display:grid}.reef-mini-panel span,.reef-mini-panel small{color:var(--reef-muted);font-size:12px;line-height:1.35}.reef-mini-panel strong{color:var(--reef-text);font-size:22px;line-height:1}.reef-xp-bar{background:#94a3b83d;border-radius:999px;width:100%;height:7px;overflow:hidden}.reef-xp-bar i{border-radius:inherit;background:linear-gradient(90deg, var(--reef-lime), var(--reef-gold));height:100%;display:block}.reef-menu-actions{flex-wrap:wrap;gap:10px;display:flex}.reef-button,.reef-skin-button,.reef-icon-button,.reef-touch-button{min-height:44px;color:var(--reef-text);cursor:pointer;background:#082f49c2;border:1px solid #67e8f959;border-radius:8px;font-weight:900}.reef-button{padding:0 18px}.reef-button-primary{color:#fff7cc;background:#facc1529;border-color:#facc15b8}.reef-button:hover,.reef-button:focus-visible,.reef-skin-button:hover:not(:disabled),.reef-skin-button:focus-visible,.reef-icon-button:hover,.reef-icon-button:focus-visible,.reef-touch-button:active{border-color:var(--reef-gold);outline:none;transform:translateY(-1px)}.reef-skins{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.reef-skin-button{text-align:left;border-color:color-mix(in srgb, var(--skin-accent,var(--reef-cyan)) 55%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--skin-accent,var(--reef-cyan)) 18%, transparent), transparent), #0206178f;min-height:118px;padding:12px}.reef-skin-button small{color:var(--reef-muted);margin-top:8px;font-size:12px;line-height:1.32;display:block}.reef-skin-button.is-selected{box-shadow:inset 0 0 0 1px var(--reef-gold), 0 0 18px #facc152e}.reef-skin-button:disabled{cursor:not-allowed;opacity:.58}.reef-leaderboard{gap:10px;display:grid}.reef-leaderboard ol{gap:6px;margin:0;padding:0;list-style:none;display:grid}.reef-leaderboard li{min-height:34px;color:var(--reef-muted);background:#0206176b;border:1px solid #94a3b82e;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:7px 10px;display:flex}.reef-leaderboard li strong{color:var(--reef-gold)}.reef-rules{gap:10px;display:grid}.reef-rules p{max-width:none}.reef-result-score{color:var(--reef-gold);font-size:clamp(42px,8vw,76px);font-weight:950;line-height:.9}.reef-progress-note,.reef-submission-status{color:var(--reef-muted);background:#14532d3d;border:1px solid #a3e63542;border-radius:8px;gap:4px;padding:12px;line-height:1.35;display:grid}.reef-progress-note strong{color:var(--reef-lime)}.reef-hud{z-index:4;pointer-events:none;opacity:0;justify-content:space-between;align-items:flex-start;gap:12px;transition:opacity .18s;display:flex;position:fixed;inset:12px 12px auto}.reef-active .reef-hud{opacity:1}.reef-hud-strip{background:var(--reef-panel);border:1px solid #67e8f947;border-radius:8px;grid-template-columns:repeat(5,minmax(72px,1fr));gap:8px;width:min(780px,100vw - 160px);padding:8px;display:grid;box-shadow:0 14px 32px #00000052}.reef-hud-strip div{gap:2px;min-width:0;display:grid}.reef-hud-strip span{color:var(--reef-muted);text-transform:uppercase;font-size:11px;font-weight:800}.reef-hud-strip strong{color:var(--reef-text);text-overflow:ellipsis;white-space:nowrap;font-size:16px;overflow:hidden}.reef-hud-actions{pointer-events:auto;gap:8px;display:flex}.reef-icon-button{background:var(--reef-panel);width:44px;height:44px;padding:0}.reef-powerups{flex-wrap:wrap;gap:6px;max-width:min(520px,100vw - 24px);display:flex;position:fixed;top:80px;left:12px}.reef-powerups span{color:var(--reef-gold);background:#0206179e;border:1px solid #facc1552;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:900}.reef-touch{z-index:4;pointer-events:none;justify-content:space-between;align-items:flex-end;gap:14px;display:none;position:fixed;inset:auto 14px 14px}.reef-active .reef-touch{display:flex}.reef-joystick,.reef-touch-actions{pointer-events:auto}.reef-joystick{touch-action:none;background:#0206177a;border:1px solid #67e8f96b;border-radius:50%;width:122px;height:122px;position:relative;box-shadow:0 18px 42px #00000057}.reef-joystick span{background:#67e8f9bd;border-radius:50%;width:46px;height:46px;position:absolute;top:38px;left:38px;box-shadow:inset 0 0 0 2px #f8fafc5c}.reef-touch-actions{gap:8px;display:grid}.reef-touch-button{background:#020617a8;min-width:84px;min-height:52px;padding:0 12px}.reef-touch-ability{min-height:70px;color:var(--reef-gold);border-color:#facc1594}@keyframes reef-menu-in{0%{opacity:0;transform:translate(-50%,-48%)scale(.97)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@media (width<=820px){.reef-menu{width:calc(100% - 22px);padding:16px}.reef-menu-grid,.reef-skins{grid-template-columns:repeat(2,minmax(0,1fr))}.reef-button{flex:100%}.reef-hud{inset:8px 8px auto}.reef-hud-strip{grid-template-columns:repeat(3,minmax(66px,1fr));gap:6px;width:min(100%,100vw - 110px);padding:7px}.reef-hud-strip div:nth-child(4),.reef-hud-strip div:nth-child(5){display:none}.reef-powerups{top:68px;left:8px}}@media (width<=520px){.reef-menu{max-height:calc(100dvh - 18px);top:52%}.reef-menu h1{font-size:34px}.reef-menu-grid,.reef-skins{grid-template-columns:1fr}.reef-mini-panel{min-height:auto}.reef-joystick{width:108px;height:108px}.reef-joystick span{width:40px;height:40px;top:34px;left:34px}}@media (prefers-reduced-motion:reduce){.reef-menu,.reef-hud{transition:none;animation:none}}