@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@600;700;800;900&display=swap');
:root{font-family:'Nunito',sans-serif;color:#174475;background:#99def0;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(circle at 50% 40%,#e5fbff,#99def0 75%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid #693ed6;outline-offset:4px}main{max-width:920px;margin:auto;padding:24px 24px 20px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#195297;font-family:Fredoka,sans-serif;font-weight:600;font-size:25px}.mark{font-size:35px;color:#ef4170}.edition{display:none}.small{border:2px solid #ffffffb0;border-radius:22px;padding:10px 15px;background:#ffffffb0;color:#174475;font-size:14px;font-weight:900;min-height:44px;box-shadow:0 3px 0 #3895b42b}.intro{text-align:center;margin:18px 0 20px}h1{font-family:Fredoka,sans-serif;font-weight:600;font-size:42px;letter-spacing:-.5px;margin:0 0 7px}h1 em{font-style:normal;color:#dd3467}.intro p{margin:0;font-size:17px;font-weight:800}.toy{max-width:520px;margin:auto;border:3px solid #ffe978;border-radius:52px 52px 64px 64px;padding:18px 21px 22px;background:linear-gradient(110deg,#ffdf48,#ffc327 75%);box-shadow:inset 0 5px 2px #fff5ad,inset 0 -7px 0 #ed951b,0 10px 0 #db8221,0 20px 35px #1b68983a;color:#753914}.topline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 7px 15px}.toytitle{font-family:Fredoka,sans-serif;font-size:24px;font-weight:700;color:#1165b1;letter-spacing:.3px;text-shadow:0 2px #fff5b5;line-height:1}.toytitle b{color:#dc3860}.topline .small{background:#fff6c5;border-color:#fff9da;box-shadow:0 3px 0 #e9a51e;color:#8b4a16}.tank{position:relative;height:365px;border:9px solid #ff8934;border-radius:35px;background:#5bcced;overflow:hidden;box-shadow:0 3px 0 #fff0a3,inset 0 4px 8px #07669d70,0 -2px 0 #e78019}canvas{display:block;width:100%;height:100%}.score{position:absolute;left:50%;transform:translateX(-50%);top:12px;text-align:center;color:#12558b;pointer-events:none;background:#efffffcc;border:2px solid #fff;border-radius:22px;padding:5px 18px 8px;min-width:120px;box-shadow:0 3px 0 #1682a51c}.score>span{font-family:Fredoka,sans-serif;font-size:31px;font-weight:600}.score b{font-size:21px;margin-left:4px}.score small{display:block;font-size:12px;font-weight:900;line-height:1}.tanklabel{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:12px;font-weight:900;color:#145d84;letter-spacing:1px;pointer-events:none}.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:center;padding:22px 8px 13px}.pump{width:96px;height:96px;border-radius:50%;border:6px solid #fff3a1;color:#fff;touch-action:none;user-select:none;box-shadow:0 7px 0 #aa2747,inset 0 4px 2px #ffffff6b,inset 0 -5px 2px #00000020,0 0 0 2px #eda529}.pump.left{background:radial-gradient(circle at 35% 25%,#ff7180,#f33e5c 70%)}.pump.right{background:radial-gradient(circle at 35% 25%,#58b9ff,#187ddd 70%);box-shadow:0 7px 0 #1852a2,inset 0 4px 2px #ffffff6b,inset 0 -5px 2px #00000020,0 0 0 2px #eda529}.pump span{display:block;transform:rotate(-90deg);font-size:46px;text-shadow:0 2px #0002}.pump:active,.pump.pressed{transform:translateY(5px);box-shadow:0 2px 0 #9b6419,inset 0 4px 5px #0002}.controls label{display:block;font-family:Fredoka,sans-serif;font-size:16px;font-weight:600;margin-top:12px}.controls p{font-size:15px;line-height:1.4;margin:0}.controls strong{font-weight:900}.bottomline{display:flex;justify-content:space-between;border-top:2px dashed #b877213b;padding:13px 9px 0;gap:12px;font-size:12px;font-weight:900}footer{display:flex;justify-content:center;gap:20px;margin-top:23px;font-size:13px;font-weight:800;color:#28668b}.win{position:absolute;inset:0;background:#e9fcfff2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}.win[hidden]{display:none}.win>span{font-size:44px;color:#ed9a09;text-shadow:0 2px #ffe768}.win h2{font-family:Fredoka,sans-serif;font-size:40px;color:#e43e67;margin:8px}.win p{font-size:16px;color:#205487}.win button{border:3px solid #ffda72;border-radius:28px;background:#ffcc37;color:#673606;padding:12px 24px;font-weight:900;box-shadow:0 4px #e49b22;min-height:48px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:600px){main{padding:14px 12px max(22px,env(safe-area-inset-bottom))}.brand{font-size:22px}.mark{font-size:30px}.intro{margin:17px 0}h1{font-size:32px}.intro p{font-size:16px}.toy{padding:15px 13px 18px;border-radius:38px 38px 48px 48px}.topline{padding:0 5px 13px}.toytitle{font-size:21px}.tank{height:clamp(250px,42svh,350px);border-width:7px;border-radius:26px}.controls{gap:8px;padding:18px 3px 12px}.pump{width:82px;height:82px;border-width:5px}.pump span{font-size:40px}.controls p{font-size:14px}.controls label{font-size:15px}.bottomline{padding:12px 4px 0}.keyboard{display:none}footer{font-size:12px;text-align:center}}@media(max-width:370px){.toytitle{font-size:18px}.small{padding:9px 12px}.pump{width:74px;height:74px}.controls p{font-size:13px}h1{font-size:29px}.controls{gap:5px}}@media(max-height:740px) and (max-width:600px){.intro{margin:10px 0}.tank{height:250px}.controls{padding-top:14px}.intro p{font-size:14px}footer{margin-top:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Printed toy-shop colors, glossy molded plastic, and an aquarium insert. */
:root{background:#2a8ea5}body{background:radial-gradient(circle at 1px 1px,#fff3 1.5px,transparent 2px) 0 0/18px 18px,repeating-linear-gradient(135deg,#1f8ba322 0 24px,#fff0 24px 48px),radial-gradient(ellipse at 50% 30%,#8cddd6,#2a91aa);background-attachment:fixed}main{max-width:900px}header{max-width:670px;margin:auto}.brand{color:#fff9d3;text-shadow:0 2px #286c88}.mark{color:#ffdf60}.small{background:#fff2c9;border-color:#fff8df}.intro{margin:21px 0;color:#fffbdc;text-shadow:0 2px #327e9366}.nostalgia{font-size:12px;letter-spacing:2px;font-weight:900;margin-bottom:6px}h1{font-size:44px;letter-spacing:-1px;text-shadow:0 3px #256b87}h1 em{color:#ffe477}.intro p{font-size:15px;color:#edffff}.toy{position:relative;background:linear-gradient(105deg,#ffda4c,#ffc135 60%,#ffb631);border-color:#ffe786;border-radius:48px 48px 70px 70px;box-shadow:inset 0 5px 2px #fff4b0,inset 5px 0 5px #ffe99a,inset -5px 0 5px #e79926,inset 0 -8px 0 #ed951b,0 10px 0 #c37724,0 14px 0 #ffd778,0 25px 40px #15527577}.toytitle{font-size:26px;transform:rotate(-3deg);line-height:1.1;text-shadow:1px 2px #fff7b8}.toytitle small{display:block;font-family:Nunito,sans-serif;font-size:10px;letter-spacing:1px;margin-top:5px;color:#895116}.topline{padding-bottom:18px}.tank{isolation:isolate;border-color:#fa8736;box-shadow:0 3px 0 #fff1a1,0 -3px 0 #d97128;border-radius:32px}.tankback{position:absolute;inset:0;z-index:-1;background:#7bd9ec center/100% 100% no-repeat}.tank::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:22px;box-shadow:inset 0 3px 9px #135d8470,inset 3px 0 3px #ffffff90}.score{top:10px;min-width:100px;border-radius:13px;padding:4px 13px 7px;background:#fffde3e6;box-shadow:0 3px #0d6e9330;transform:translateX(-50%) rotate(-2deg)}.score>span{font-size:27px}.score small{font-size:11px}.controls{padding-top:21px}.controls>p{display:flex;flex-direction:column;align-items:center;gap:9px}.sticker{display:block;background:#fff5ca;border:2px solid #e84860;color:#d13252;font-family:Fredoka,sans-serif;font-size:14px;line-height:1.2;padding:5px 10px;transform:rotate(-7deg);box-shadow:2px 3px #c5832455;white-space:nowrap}.pump{background-clip:padding-box;border:7px solid #ffec9d}.pump.left{background:radial-gradient(circle at 33% 24%,#ff8c91 0,#ff516d 35%,#eb3051 80%)}.pump.right{background:radial-gradient(circle at 33% 24%,#86d7ff 0,#289fed 35%,#1770d0 80%)}.controls label{letter-spacing:1px}.bottomline{border-top:3px double #af681b55;letter-spacing:.6px;font-size:11px}footer{color:#effffe;margin-top:28px;text-shadow:0 1px #246d87;font-size:13px}@media(max-width:600px){.intro{margin:16px 0 19px}.nostalgia{font-size:10px;letter-spacing:1.6px}h1{font-size:34px}.intro p{font-size:13px}.toy{border-radius:35px 35px 50px 50px}.toytitle{font-size:22px}.toytitle small{font-size:9px;letter-spacing:.5px}.tank{height:clamp(250px,39svh,330px)}.controls{padding-top:18px}.sticker{font-size:12px;padding:4px 7px}.controls strong{font-size:13px}.bottomline{font-size:10px;letter-spacing:.2px}.score small{font-size:10px}}@media(max-height:740px) and (max-width:600px){.intro{margin:10px 0 14px}.tank{height:240px}.nostalgia{display:none}.controls{padding-top:16px}h1{font-size:31px}.controls>p{gap:7px}.toy{padding-bottom:17px}}@media(max-width:370px){.toytitle{font-size:19px}.toytitle small{font-size:8px}.sticker{font-size:11px}}

.tankback{background-image:url("aquarium.png")}
/* Explicit layers keep the printed insert visible in mobile browsers. */
.tankback{z-index:0;background-color:#75dced;filter:saturate(1.1)}
#game{position:relative;z-index:1;background:transparent}
.score,.tanklabel{z-index:2}.tank::after{z-index:2}.win{z-index:4}

.tankback{background-image:url("aquarium-cartoon.png")}
.tilt-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:3px 0 12px}.tilt-controls .small{font-size:13px;min-height:44px;padding:8px 13px}.tilt-controls [hidden]{display:none}.tilt-controls span{flex-basis:100%;text-align:center;font-size:12px;line-height:1.35;max-width:310px}.tilt-controls button[aria-pressed=true]{background:#174475;color:#fff}.tilt-controls button:disabled{opacity:.65}

/* A larger aquarium set into a glossy baby-pink toy shell. */
.toy{max-width:560px;color:#6f3152;background:linear-gradient(105deg,#ffd8e9,#f7afd0 60%,#ed92bd);border-color:#ffedf5;box-shadow:inset 0 5px 2px #fff4f9,inset 5px 0 5px #ffe5f0,inset -5px 0 5px #d973a2,inset 0 -8px 0 #d978a5,0 10px 0 #ae537e,0 14px 0 #f8b9d5,0 25px 40px #15527577}
.tank{height:410px}
.tank{border-color:#df78a9;box-shadow:0 3px 0 #ffeaf4,0 -3px 0 #bd5688}
.toytitle small{color:#8f3b64}.bottomline{border-top-color:#a94e7b66}
@media(max-width:600px){.tank{height:clamp(290px,46svh,380px)}}
@media(max-height:740px) and (max-width:600px){.tank{height:270px}}
.final-taps{display:flex;flex-direction:column;align-items:center;margin:7px 0 18px;padding:8px 22px 10px;border:3px solid #f3a8c9;border-radius:20px;background:#fff7fb;color:#b33e74;box-shadow:0 4px 0 #d977a4}.final-taps strong{font-family:Fredoka,sans-serif;font-size:42px;line-height:1}.final-taps span{font-size:11px;font-weight:900;letter-spacing:1.4px}.win .final-taps+button{margin-top:0}