:root{font-family:Arial,Helvetica,sans-serif;color:#fff8e8;background:#082f49;font-synthesis:none;--navy:#082f49;--lime:#d4ff71;--pink:#ff88b3}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #fff8e8;outline-offset:5px}button:disabled{opacity:.65;cursor:wait}[hidden]{display:none!important}.arcade{max-width:1440px;margin:auto;padding:0 42px}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{color:inherit;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:1px;display:flex;align-items:center;gap:12px}.brand-icon{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid #6b94a2;border-radius:50%;font-size:27px;color:var(--lime)}.edition{font-size:9px;font-weight:400;color:#85a7b6;letter-spacing:1.2px}.live{font-size:9px;letter-spacing:1.5px;color:#b9d8dc;white-space:nowrap}.live i{display:inline-block;height:6px;width:6px;margin-right:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #cfff75}.game-shell{height:min(760px,calc(100svh - 142px));min-height:660px;position:relative;overflow:hidden;border-radius:22px;border:1px solid #538b97;background:#1689a2;isolation:isolate;box-shadow:0 24px 65px #001b2b55}canvas{display:block;width:100%;height:100%;touch-action:none}.game-top{position:absolute;top:22px;left:28px;right:22px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:4}.pool-label{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#164556;display:flex;align-items:center;gap:12px}.pool-label>span{border:1px solid #32697677;border-radius:5px;padding:5px 6px}.pool-label i{color:#1c8f7a;font-style:normal;font-size:7px}.controls{display:flex;gap:8px;pointer-events:auto}.icon-button{display:grid;place-items:center;border:1px solid #28546555;color:var(--navy);background:#fff6db66;border-radius:50%;width:36px;height:36px;font-weight:bold}.icon-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.splash{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;padding:88px 52px 116px;pointer-events:none}.splash button{pointer-events:auto}.intro{position:relative;z-index:2}.eyebrow{font-size:9px;font-weight:900;letter-spacing:1.8px;display:flex;gap:9px;align-items:center}.eyebrow>span{font-size:19px;color:var(--lime)}h1{position:relative;font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-weight:900;font-size:clamp(60px,6.5vw,94px);line-height:.89;letter-spacing:-1px;margin:19px 0 22px;text-shadow:3px 4px 0 #084659}h1>span{display:block}h1 em{display:inline-block;color:var(--pink);font-style:normal;transform:rotate(-4deg);margin-top:4px;-webkit-text-stroke:1px #07364a;text-shadow:4px 5px 0 #07364a}h1 b{display:inline-block;color:var(--lime);font-size:.88em;transform:rotate(12deg);margin-left:8px}.description{font-size:13px;line-height:1.7;color:#d4f0ef;margin-bottom:23px}.primary{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--lime);color:var(--navy);border:2px solid var(--navy);box-shadow:4px 5px 0 var(--navy);border-radius:10px;font-size:13px;letter-spacing:1px;font-weight:900;padding:17px 21px;min-width:255px;transition:transform .15s,box-shadow .15s}.primary:hover{transform:translateY(-2px);box-shadow:5px 7px 0 var(--navy)}.primary:active{transform:translate(3px,3px);box-shadow:1px 2px 0 var(--navy)}.primary>span:last-child{font-size:24px;line-height:18px}.primary #start-label{font-size:13px;line-height:18px}.start-note{font-size:7px;letter-spacing:1.15px;color:#b3dfe4;margin:17px 0 0}.hero-art{position:relative;align-self:stretch;min-width:0}.hero-swimmer{position:absolute;width:133%;max-width:none;left:-15%;top:21%;transform:rotate(-12deg);filter:drop-shadow(0 20px 10px #034c6644);animation:float 4s ease-in-out infinite}.birthday-sticker{position:absolute;top:3%;left:25%;z-index:1;font-weight:900;font-size:11px;letter-spacing:2px;text-align:center;transform:rotate(8deg);background:#fff6d8;color:var(--navy);padding:12px 22px;border:2px solid var(--navy);border-radius:50%}.birthday-sticker b{font-size:26px;letter-spacing:-1px}.birthday-sticker span{display:block;font-size:9px;letter-spacing:0;font-weight:400;margin-top:4px}.hero-token{position:absolute;right:-6%;top:10%;color:#edff98;font-weight:900;font-size:62px;letter-spacing:-5px;transform:rotate(13deg);text-shadow:0 0 25px #d4ff7199,3px 4px #336c66}.hero-token span{font-size:39px}.hero-token small{display:block;letter-spacing:1px;font-size:7px;line-height:1.5;text-shadow:none;text-align:center}.art-caption{position:absolute;top:76%;left:22%;font-size:8px;letter-spacing:2px;transform:rotate(-6deg);background:#0c5e75aa;padding:8px 13px;border-radius:20px}.enemy-preview{position:absolute;background-image:url('/assets/enemies.png');background-repeat:no-repeat;background-size:300% 100%;width:154px;height:154px;filter:drop-shadow(0 10px 5px #083c5344)}.enemy-preview.croc{background-position:0 0;left:-24%;bottom:-3%;transform:rotate(12deg)}.enemy-preview.shark{background-position:50% 0;right:-9%;bottom:0;transform:rotate(-12deg)}.instructions{position:absolute;bottom:0;left:0;right:0;min-height:93px;background:#06475fbb;border-top:1px solid #8bddd644;display:grid;grid-template-columns:1fr 1fr 1.25fr;padding:23px 40px;gap:30px;backdrop-filter:blur(8px)}.instructions>div{display:flex;align-items:center;gap:13px}.instructions>div+div{border-left:1px solid #8bddd633;padding-left:30px}.step-icon{font-size:27px;color:var(--lime);min-width:28px}.step-icon.coin-icon{font-size:20px;font-weight:900;letter-spacing:-2px}.instructions p{margin:0}.instructions b{display:block;font-size:9px;letter-spacing:1px;white-space:nowrap}.instructions small{display:block;font-size:10px;margin-top:7px;color:#b3dfe4}.hud{position:absolute;top:78px;left:28px;right:28px;display:flex;justify-content:space-between;pointer-events:none;text-shadow:0 2px 6px #05374b66}.hud>div{min-width:60px}.hud span,.result-stats span{display:block;font-size:8px;letter-spacing:1.4px;font-weight:bold}.hud strong{display:block;font-size:32px;margin-top:5px}.hud strong span{display:inline;font-size:14px;padding-left:3px}.hud-coins{color:var(--lime);text-align:center}.hud>div:last-child{text-align:right}.game-help{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1.5px;pointer-events:none;color:#bfe3e7}.game-help span{margin:0 12px;color:var(--lime)}.toast{position:absolute;top:33%;left:50%;transform:translate(-50%,-8px);background:#fff9dc;color:var(--navy);padding:12px 20px;border:2px solid var(--navy);border-radius:12px;font-size:12px;font-weight:900;opacity:0;transition:opacity .2s,transform .2s;text-align:center;pointer-events:none;white-space:nowrap;box-shadow:3px 4px #07364a}.toast.visible{opacity:1;transform:translate(-50%,0)}.overlay{position:absolute;inset:0;z-index:5;background:#062e49a8;backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px}.result-card{background:#fff6df;color:var(--navy);border:3px solid var(--navy);box-shadow:8px 9px 0 #062a43;border-radius:22px;padding:32px;max-width:400px;width:100%;text-align:center}.result-card .eyebrow{justify-content:center;font-size:8px}.result-card h2{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-size:58px;letter-spacing:-1px;line-height:1;margin:24px 0 18px}.result-card h2 em{font-style:normal;color:#e85889}.result-card>p{font-size:12px;line-height:1.7}.result-stats{display:flex;justify-content:space-around;padding:20px 0;margin:22px 0 10px;border-top:1px solid #082f4922;border-bottom:1px solid #082f4922}.result-stats b{display:block;font-size:30px;margin-top:8px}.result-card .primary{width:100%;margin-top:22px}.text-button{border:0;background:none;color:#356272;font-size:11px;padding:20px 4px 0;text-decoration:underline;text-underline-offset:4px}footer{height:55px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:7px;letter-spacing:1.2px;color:#85a7b6}footer b{margin:0 10px;color:var(--lime)}@keyframes float{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-13px) rotate(-9deg)}}
@media(min-width:1400px){h1{font-size:94px}}
@media(max-width:1000px){.arcade{padding:0 24px}.edition{display:none}.splash{padding-left:32px;padding-right:32px}.instructions{padding:22px;gap:16px}.instructions>div+div{padding-left:16px}h1{font-size:72px}.hero-swimmer{top:29%}.birthday-sticker{top:9%}.hero-token{font-size:48px;right:0}.description{font-size:12px}}
@media(max-width:640px){.arcade{padding:0 10px}.topbar{height:58px;padding:0 7px}.brand{font-size:9px;letter-spacing:.8px;gap:8px}.brand-icon{width:25px;height:25px;font-size:21px}.live{font-size:0}.live i{margin:0}.game-shell{height:calc(100svh - 96px);min-height:690px;border-radius:16px}.game-top{top:15px;left:17px;right:14px}.pool-label{font-size:7px;gap:8px;letter-spacing:1px}.icon-button{width:32px;height:32px}.splash{display:block;padding:70px 24px 154px}.eyebrow{font-size:7px;letter-spacing:1.2px;gap:6px}.eyebrow>span{font-size:15px}h1{font-size:clamp(53px,15.2vw,76px);margin:15px 0 18px;position:relative;z-index:2;width:72%}.description{font-size:11px;line-height:1.6;max-width:260px;margin:0 0 18px}.intro{z-index:2}.primary{min-width:230px;padding:15px 18px;width:100%}.start-note{font-size:6px;text-align:center;letter-spacing:.7px;margin-top:14px}.hero-art{position:absolute;inset:0;pointer-events:none}.hero-swimmer{width:72%;left:44%;top:31%;transform:rotate(-27deg);animation:none}.birthday-sticker{font-size:7px;letter-spacing:1px;left:auto;right:13px;top:19%;padding:8px 13px}.birthday-sticker b{font-size:19px}.birthday-sticker span{font-size:7px}.hero-token{right:16px;top:9%;font-size:39px}.hero-token span{font-size:28px}.hero-token small{font-size:5px}.art-caption{display:none}.enemy-preview{width:90px;height:90px}.enemy-preview.croc{left:14%;bottom:14%;transform:rotate(9deg)}.enemy-preview.shark{right:13%;bottom:13%;transform:rotate(-8deg)}.instructions{grid-template-columns:1fr;padding:16px 22px;gap:11px;min-height:140px}.instructions>div{gap:12px}.instructions>div+div{padding:0;border:0}.instructions p{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.instructions b{font-size:7px;letter-spacing:.6px}.instructions small{font-size:8px;margin:0}.step-icon{font-size:20px;width:26px}.step-icon.coin-icon{font-size:16px}.hud{left:19px;right:19px;top:69px}.hud strong{font-size:26px}.hud span{font-size:7px}.game-help{font-size:7px;letter-spacing:.7px;bottom:22px}.game-help span{margin:0 5px}footer{height:38px;justify-content:center;font-size:5px;letter-spacing:.6px}footer>span:last-child{display:none}.result-card{padding:25px 20px}.result-card h2{font-size:52px}.game-shell.playing{min-height:360px;height:calc(100svh - 76px)}body:has(.playing) footer{height:18px}.toast{font-size:10px;padding:11px 13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep the display lettering consistent when condensed system fonts are absent. */
h1{transform:scaleX(.8);transform-origin:left center;width:125%;white-space:nowrap}
.hero-swimmer{width:114%;left:-1%;top:23%}
.hud{color:#164556;text-shadow:none}.hud-coins{color:#376744}.hud-coins strong{color:#214c40}.game-help{bottom:42px}
@media(max-width:640px){h1{font-size:clamp(50px,14.7vw,68px);transform:scaleX(.7);width:143%;margin-bottom:24px}.hero-swimmer{width:72%;left:30%;top:28%;transform:rotate(-25deg)}.birthday-sticker{right:22px;top:17%}.splash{padding-top:78px}.description{font-size:10px;max-width:215px;margin-bottom:22px}.enemy-preview.croc{bottom:20%;left:13%}.enemy-preview.shark{bottom:20%;right:13%}.game-help{bottom:40px}.hero-token{top:8%;right:20px}.splash .primary{margin-top:15px}}
@media(orientation:landscape) and (max-height:540px){body:has(.playing) .topbar{height:40px}body:has(.playing) footer{display:none}.game-shell.playing{height:calc(100svh - 48px);min-height:270px}.playing .game-top{top:8px}.playing .hud{top:48px;left:22px;right:22px}.playing .hud strong{font-size:20px}.playing .hud span{font-size:6px}.playing .game-help{bottom:12px}.playing .overlay{padding:10px}.playing .result-card{max-width:510px;padding:15px 24px}.playing .result-card h2{font-size:30px;margin:9px 0}.playing .result-card h2 br{display:none}.playing .result-card>p{margin:5px 0;font-size:10px}.playing .result-stats{padding:7px 0;margin:8px 0}.playing .result-stats b{font-size:22px;margin-top:3px}.playing .result-card .primary{margin-top:10px;padding:12px 18px}.playing .text-button{padding-top:12px}}
@media(max-width:640px){.hero-swimmer{top:22%}.birthday-sticker{display:none}}
.enemy-preview{background:none}.hero-token{width:120px;transform:none;top:4%;right:-3%}.hero-token canvas{width:120px;height:120px}.hero-token small{margin-top:-16px}.game-help #pace{display:block;color:#d4ff71;font-size:10px;letter-spacing:1px;margin-bottom:9px}
@media(max-width:640px){.hero-token{width:90px;top:5%;right:12px}.hero-token canvas{width:90px;height:90px}.hero-token small{margin-top:-10px}}
/* The birthday landing screen fills the browser, without the arcade frame. */
body:has(.game-shell:not(.playing)) .arcade{max-width:none;padding:0}
body:has(.game-shell:not(.playing)) .topbar,body:has(.game-shell:not(.playing)) footer{display:none}
.game-shell:not(.playing){width:100%;height:100svh;min-height:660px;border:0;border-radius:0;box-shadow:none}
.game-shell:not(.playing) .game-top{top:max(22px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right))}
.game-shell:not(.playing) .splash{padding-top:max(88px,12svh)}
@media(max-width:640px){.game-shell:not(.playing){min-height:690px}.game-shell:not(.playing) .splash{padding-top:88px}.game-shell:not(.playing) .instructions{padding-bottom:max(16px,env(safe-area-inset-bottom))}}
.game-shell:not(.playing){min-height:100svh}
@media(max-width:640px) and (max-height:740px){.game-shell:not(.playing) .splash{padding-top:70px}.splash h1{font-size:clamp(36px,7.8svh,54px);margin:12px 0 18px}.splash .description{margin-bottom:12px}.splash .primary{margin-top:8px;padding:12px 17px}.splash .start-note{margin-top:12px}.splash .instructions{min-height:110px;padding-top:12px;padding-bottom:12px;gap:8px}.splash .enemy-preview{display:none}.splash .hero-swimmer{top:21%}}
@media(min-width:641px) and (max-height:660px){.game-shell:not(.playing) .splash{padding-top:65px;padding-bottom:85px}.splash h1{font-size:clamp(38px,9svh,58px);margin:12px 0}.splash .description{margin-bottom:12px;font-size:10px}.splash .primary{padding:12px 18px}.splash .instructions{min-height:70px;padding-top:15px;padding-bottom:15px}.splash .start-note{margin-top:10px}}
/* Gameplay, pause and results use the same edge-to-edge pool as the menu. */
body .arcade{max-width:none;padding:0}
body .topbar,body footer{display:none}
.game-shell.playing{width:100%;height:100svh;min-height:0;border:0;border-radius:0;box-shadow:none}
.playing .game-top{top:max(14px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
.playing .hud{top:calc(max(14px,env(safe-area-inset-top)) + 48px);left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
.playing .game-help{bottom:max(40px,env(safe-area-inset-bottom))}
@media(orientation:landscape) and (max-height:540px){.playing .game-top{top:max(8px,env(safe-area-inset-top))}.playing .hud{top:46px}.playing .game-help{bottom:max(18px,env(safe-area-inset-bottom))}}