:root{--ink:#17344a;--cream:#fff5d3;--coral:#f75f58;--coral-dark:#b83446;--aqua:#25c9c3;--aqua-dark:#087d8d;--sun:#ffd64f}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--ink);background:#73cfda;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{touch-action:manipulation}.reef-game{isolation:isolate;background:#72ccd6;width:100vw;height:100dvh;min-height:560px;position:relative;overflow:hidden}.reef-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.reef-topbar{z-index:4;pointer-events:none;align-items:center;gap:14px;height:58px;display:flex;position:absolute;top:12px;left:18px;right:18px}.reef-mini-logo{object-fit:contain;object-position:left center;clip-path:inset(5% round 9%);filter:drop-shadow(0 4px #10404f2e);width:175px;height:74px}.reef-round-chip,.reef-sound,.reef-shells,.reef-status{border:3px solid #ffffffc7;box-shadow:0 5px #13465133,0 10px 24px #12485429}.reef-round-chip{color:#fff;letter-spacing:.13em;background:#124654d6;border-radius:999px;margin-left:auto;padding:8px 15px;font-size:12px;font-weight:950}.reef-sound{pointer-events:auto;cursor:pointer;color:var(--ink);letter-spacing:.08em;background:#fff5d3ed;border-radius:999px;padding:8px 13px;font-size:10px;font-weight:950}.reef-sound:hover{transform:translateY(-1px)}.reef-health{z-index:4;color:#fff;background:#133c4ac2;border:3px solid #ffffffd1;border-radius:18px;width:min(28vw,330px);padding:10px 13px 12px;position:absolute;top:84px;box-shadow:0 6px #0f394638}.reef-health-player{left:20px}.reef-health-enemy{right:20px}.reef-health-copy{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.reef-health-copy span{letter-spacing:.12em;font-size:11px;font-weight:950}.reef-health-copy strong{font:900 18px/1 SFMono-Regular,Consolas,Liberation Mono,monospace}.reef-health-track{background:#00000047;border:2px solid #ffffffa8;border-radius:99px;height:12px;overflow:hidden}.reef-health-track i{border-radius:inherit;background:linear-gradient(90deg,#56f09b,#dcf76a);height:100%;transition:width .35s;display:block}.reef-health-enemy .reef-health-track i{background:linear-gradient(90deg,#ffae4c,#ff5e57)}.reef-status{z-index:4;max-width:38vw;color:var(--ink);text-align:center;background:#fff5d3f0;border-radius:999px;padding:9px 18px;font-size:12px;font-weight:900;position:absolute;top:88px;left:50%;transform:translate(-50%)}.reef-status-enemy{color:#fff;background:#ff685bf0}.reef-status-projectile{background:#ffd64ff2}.reef-shells{z-index:4;color:#fff;background:#10535ddb;border-radius:999px;align-items:center;gap:4px;padding:5px 12px 5px 6px;font-weight:950;display:flex;position:absolute;top:145px;left:50%;transform:translate(-50%)}.reef-overlay{z-index:10;color:#fff;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:radial-gradient(circle at 50% 40%,#67e1df94,#134a5be0);flex-direction:column;justify-content:center;align-items:center;padding:22px;display:flex;position:absolute;inset:0}.reef-loading{letter-spacing:.04em;gap:18px;font-weight:800}.reef-spinner{border:5px solid #ffffff4d;border-radius:50%;width:72px;height:72px;padding:8px}.reef-spinner span{border:8px dotted var(--sun);border-radius:50%;width:100%;height:100%;animation:1s linear infinite reef-spin;display:block}@keyframes reef-spin{to{transform:rotate(360deg)}}.reef-menu{gap:12px}.reef-menu>img{object-fit:contain;clip-path:inset(3% round 9%);filter:drop-shadow(0 10px #0d434f2e);width:auto;max-width:76vw;height:min(38vh,380px)}.reef-menu p{color:#fff9e4;text-shadow:0 2px #0d434f4d;max-width:610px;margin:-14px auto 7px;font-size:clamp(15px,2vw,20px);font-weight:750;line-height:1.45}.reef-menu small{opacity:.82;font-weight:800}.reef-primary{cursor:pointer;color:#fff;letter-spacing:.08em;text-shadow:0 2px #7b203659;background:linear-gradient(#ff7d65,#ed4e57);border:4px solid #fff;border-radius:18px;min-width:235px;padding:15px 28px 13px;font-weight:1000;box-shadow:0 7px #a72f48,0 13px 28px #09343e4d}.reef-primary:hover{transform:translateY(-2px);box-shadow:0 9px #a72f48,0 15px 30px #09343e4d}.reef-primary:active{transform:translateY(5px);box-shadow:0 2px #a72f48}.reef-upgrade{background:radial-gradient(circle,#2ac8bfc2,#0c3e4ef0);gap:4px}.reef-kicker{color:var(--sun);letter-spacing:.22em;font-size:12px;font-weight:1000}.reef-upgrade h1,.reef-result h1{text-shadow:0 5px #0d3e4b40;margin:8px 0 22px;font-size:clamp(28px,4vw,50px);line-height:1}.reef-upgrade h1{color:#ff785f;letter-spacing:.035em;text-transform:uppercase;-webkit-text-stroke:7px #fff0bd;paint-order:stroke fill;filter:drop-shadow(0 6px #087d8d)drop-shadow(0 10px #b83446);font-family:Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif;font-weight:1000}.reef-upgrade-grid{grid-template-columns:repeat(3,1fr);gap:16px;width:min(900px,94vw);display:grid}.reef-upgrade-grid button{cursor:pointer;min-height:270px;color:var(--ink);background:linear-gradient(145deg,#fff8dc,#ffd971);border:4px solid #fff;border-radius:24px;padding:14px 16px 20px;box-shadow:0 8px #d58a3c,0 18px 34px #07313e38}.reef-upgrade-grid button:hover{transform:translateY(-4px)rotate(-1deg)}.reef-upgrade-grid b,.reef-upgrade-grid span{display:block}.reef-upgrade-art{background-position:50%;background-repeat:no-repeat;background-size:122%;border-radius:50%;width:132px;height:132px;margin:0 auto 8px;box-shadow:0 5px #16344a29}.reef-upgrade-grid b{color:var(--coral-dark);letter-spacing:.035em;margin-bottom:7px;font-family:Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif;font-size:19px;font-weight:1000}.reef-upgrade-grid .reef-upgrade-copy{font-size:13px;font-weight:750;line-height:1.35}.reef-result{gap:13px}.reef-result p{margin:0;font-size:18px;font-weight:750}.reef-result>strong{color:var(--sun);letter-spacing:.12em;margin-bottom:9px}.reef-result-icon{width:116px!important;height:116px!important}.reef-controls{z-index:5;background:linear-gradient(#fff7daf5,#ffdc7af2);border:4px solid #ffffffe0;border-radius:24px;grid-template-columns:1fr 1fr auto 130px;align-items:center;gap:15px;width:min(960px,100vw - 30px);min-height:112px;padding:14px 16px;transition:opacity .2s,transform .2s;display:grid;position:absolute;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 9px #a25b3585,0 18px 32px #10404b38}.reef-controls.is-locked{opacity:.48;transform:translate(-50%)translateY(6px)}.reef-control-block label{color:var(--ink);letter-spacing:.1em;justify-content:space-between;margin-bottom:8px;font-size:11px;font-weight:1000;display:flex}.reef-control-block label b{color:var(--coral-dark)}.reef-control-block input{width:100%;accent-color:var(--coral);cursor:pointer}.reef-control-block input:disabled{cursor:not-allowed}.reef-ammo{gap:7px;display:flex}.reef-ammo button{cursor:pointer;width:60px;height:68px;color:var(--ink);background:#ffffff7a;border:3px solid #13344a2e;border-radius:15px;padding:3px;position:relative}.reef-ammo button.is-active{border-color:var(--coral);box-shadow:0 4px 0 var(--coral-dark);background:#fff;transform:translateY(-3px)}.reef-ammo button:disabled{cursor:not-allowed;filter:grayscale(.8);opacity:.43}.reef-ammo button b{background:var(--ink);color:#fff;border-radius:99px;min-width:19px;padding:2px 4px;font-size:10px;position:absolute;bottom:2px;right:4px}.reef-fire{cursor:pointer;color:#fff;text-shadow:0 2px #791f3573;background:linear-gradient(#ff755b,#e83e51);border:4px solid #fff;border-radius:19px;height:76px;box-shadow:0 7px #9d2844}.reef-fire span,.reef-fire small{display:block}.reef-fire span{letter-spacing:.05em;font-size:23px;font-weight:1000}.reef-fire small{opacity:.72;font-size:8px;font-weight:900}.reef-fire:hover:not(:disabled){transform:translateY(-2px)}.reef-fire:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px #9d2844}.reef-fire:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.65}.reef-icon{background-image:var(--reef-hud-sprite);vertical-align:middle;background-repeat:no-repeat;background-size:400% 200%;width:44px;height:44px;display:inline-block}.reef-icon-heart{background-position:0 0}.reef-icon-coconut{background-position:33.333% 0}.reef-icon-pineapple{background-position:66.666% 0}.reef-icon-volley{background-position:100% 0}.reef-icon-shell{background-position:0 100%;width:31px;height:31px}.reef-icon-star{background-position:100% 100%}.reef-credit{z-index:4;color:#ffffffe6;letter-spacing:.16em;text-shadow:0 1px #0d3e4b66;font-size:8px;font-weight:950;position:absolute;bottom:8px;right:17px}@media (width<=760px){.reef-game{min-height:620px}.reef-topbar{gap:7px;height:48px;top:6px;left:8px;right:8px}.reef-mini-logo{width:112px;height:52px}.reef-round-chip{padding:6px 9px;font-size:9px}.reef-sound{padding:6px 8px;font-size:8px}.reef-health{border-radius:14px;width:calc(50vw - 13px);padding:7px 9px 9px;top:62px}.reef-health-player{left:7px}.reef-health-enemy{right:7px}.reef-health-copy span{font-size:8px}.reef-health-copy strong{font-size:14px}.reef-health-track{height:9px}.reef-status{max-width:80vw;padding:6px 12px;font-size:9px;top:114px}.reef-shells{padding:3px 8px 3px 3px;font-size:11px;top:146px}.reef-shells .reef-icon{width:24px;height:24px}.reef-controls{border-radius:18px;grid-template-columns:1fr 1fr 93px;gap:9px;min-height:0;padding:10px;bottom:24px}.reef-ammo{grid-area:2/1/auto/3}.reef-ammo button{width:54px;height:50px}.reef-ammo .reef-icon{width:36px;height:36px}.reef-fire{grid-area:1/3/3;height:92px}.reef-fire span{font-size:18px}.reef-control-block label{font-size:9px}.reef-upgrade-grid{grid-template-columns:1fr;gap:10px}.reef-upgrade-grid button{text-align:left;grid-template-columns:72px 1fr;align-items:center;column-gap:10px;min-height:92px;padding:8px 14px;display:grid}.reef-upgrade-art{grid-row:1/3;width:70px;height:70px;margin:0}.reef-upgrade-grid b{align-self:end;margin:0 0 2px}.reef-upgrade-grid .reef-upgrade-copy{align-self:start}.reef-upgrade h1{margin-bottom:12px}.reef-menu>img{width:94vw}.reef-menu p{margin-top:-8px;font-size:14px}.reef-credit{font-size:6px;bottom:5px}}@media (height<=640px) and (orientation:landscape){.reef-health{top:62px}.reef-status{top:66px}.reef-shells{top:104px}.reef-controls{min-height:92px;padding-block:8px;bottom:18px}.reef-menu>img{max-height:35vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}