*{box-sizing:border-box}body{margin:0;background:#087eae;color:#fff;font-family:ui-rounded,'Trebuchet MS',sans-serif}header{position:absolute;inset:15px 18px auto;z-index:9;display:flex;gap:12px;align-items:center;pointer-events:none}header>*{pointer-events:auto}header .music-player{margin-left:auto}.pill{background:linear-gradient(#ffb5e2,#f05db4);color:white;border:3px solid white;border-radius:40px;padding:12px 23px;font:800 18px ui-rounded,'Trebuchet MS',sans-serif;text-decoration:none;cursor:pointer;box-shadow:inset 0 3px 0 #ffffff77,0 4px 0 #a5509c88;text-shadow:0 2px #a54c92}main{max-width:1900px;margin:auto}#scene{position:relative;aspect-ratio:16/9;overflow:hidden;background:#73d5fb;isolation:isolate}#sky{position:absolute;inset:0;background:linear-gradient(#6ac9ff,#dbf9ff 40%,#45cadf)}#pool{position:absolute;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease;transform:translateY(0)}.surface #pool{transform:translateY(31%)}#waterline{position:absolute;top:31%;height:13px;width:100%;background:linear-gradient(#e5ffffef,#5fe3f1aa,transparent);box-shadow:0 -4px 15px #fff8;opacity:0;transition:opacity 1s}.surface #waterline{opacity:1}h1{position:absolute;top:1%;left:50%;transform:translateX(-50%);margin:0;font-size:clamp(22px,3vw,48px);color:#ff9bd8;-webkit-text-stroke:1px white;text-shadow:0 3px #a64d9d,0 5px 8px #006ca1;white-space:nowrap;pointer-events:none}#swimmer{position:absolute;width:31%;left:11%;top:40%;z-index:3;transform-origin:65% 65%}#swimmer>img{width:100%;display:block}#bubbles{position:absolute;left:74%;top:73%;width:1px;height:1px}#bubbles i{position:absolute;bottom:0;left:0;border:1.5px solid #fff;border-radius:50%;background:radial-gradient(circle at 30% 25%,white 0 8%,#a3f4ff55 17%,#bc91ff22 65%,#d1feff99);animation:bubble 1.7s linear infinite;animation-delay:var(--delay);width:var(--size);height:var(--size);opacity:0}@keyframes bubble{0%{transform:translate(0,0);opacity:.8}90%{opacity:.6}100%{transform:translate(65px,-125px);opacity:0}}#bubbles.quiet{visibility:hidden}.hoop{position:absolute;width:20%;height:52%;top:31%;z-index:2;filter:drop-shadow(0 0 9px #ffe9ff99)}.hoop svg{width:100%;height:100%;overflow:visible}.hoop.front{z-index:4;pointer-events:none}.star{position:absolute;width:28%;top:36%;left:36%;filter:drop-shadow(0 0 8px #ffffb3)}#instruction{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);background:#ffffffeb;color:#1269a4;padding:9px 23px;border-radius:30px;font-size:clamp(15px,2vw,27px);font-weight:900;white-space:nowrap;z-index:5}#action{position:absolute;bottom:5%;right:3%;z-index:6;font-size:clamp(16px,2.2vw,30px)}#action:disabled{opacity:.65;cursor:default}#counter{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);display:flex;align-items:center;z-index:5;width:39%;height:13%}.dolphin{width:22%;flex-shrink:0;filter:drop-shadow(0 2px 2px #006baf)}#slots{display:flex;gap:2%;align-items:center;width:78%;border:3px solid white;background:linear-gradient(#d6fcff,#35caef,#b7a7f3);border-radius:30px;height:40%}.slot{border:3px solid white;border-radius:50%;background:linear-gradient(#d7f5ff,#68b6e8);width:19%;aspect-ratio:1;display:grid;place-items:center;flex-shrink:0;box-shadow:0 3px 3px #116bb388}.slot img{width:85%;filter:grayscale(1);opacity:.35}.slot.done{background:#ff9ad6}.slot.done img{filter:none;opacity:1}.parent-note{text-align:center;font-size:12px;margin:7px;padding:0 10px}dialog{max-width:520px;width:90%;border:4px solid white;border-radius:35px;background:#fff0fa;color:#734071;text-align:center;padding:26px}dialog::backdrop{background:#17436b77}dialog h2{color:#ba4897}dialog img{width:220px}dialog a{display:block;margin:18px auto 0;color:#824480}dialog .pill{display:inline-block;color:white}button:focus-visible,a:focus-visible{outline:4px solid #8435ad;outline-offset:3px}[hidden]{display:none!important}.paused *{animation-play-state:paused!important}@media(max-width:700px){header{inset:8px 8px auto;gap:5px}.pill{padding:8px 10px;font-size:12px}header .music-player{transform:scale(.7);transform-origin:top right}h1{top:13%;font-size:22px}#scene{height:90svh;aspect-ratio:auto}#pool{object-fit:cover;object-position:60%}#swimmer{width:55%;left:3%}.hoop{width:38%;height:35%;top:43%}#instruction{bottom:25%;max-width:94%;white-space:normal;text-align:center;width:max-content}#counter{width:85%;bottom:4%;height:10%}#action{bottom:15%;right:50%;transform:translateX(50%);font-size:20px}.parent-note{font-size:10px}}@media(prefers-reduced-motion:reduce){#pool,#waterline{transition:none}#bubbles i{animation-duration:3s}}

.surface #swimmer{z-index:3}#scene.surface h1{opacity:.7}

#scene{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}#scene:active{cursor:grabbing}#scene img{pointer-events:none;-webkit-user-drag:none}#action{pointer-events:none;margin:0}#scene:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* Camera movement is driven by swimming progress, so scenery pauses with the player. */
#sky{background: url('../breaststroke/assets/pool.webp') center top / cover no-repeat;height:34%;inset:0 0 auto;}
#pool,.surface #pool{transition:none}
#waterline{z-index:4;pointer-events:none;top:30%;height:3%;transition:none;background:linear-gradient(180deg,#ffffffb0,#8cf5ffc0 22%,#19c9e57a 65%,transparent);box-shadow:0 -3px 12px #c7ffff99}
#waterline:after{content:'';position:absolute;left:-10%;width:120%;height:100%;background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 24px,#eeffffa0 27px,transparent 31px 65px);background-size:180px 24px;animation:surface-ripple 7s linear infinite}
@keyframes surface-ripple{to{transform:translateX(90px)}}
.hoop{pointer-events:none}.hoop.front{display:none}
@media(prefers-reduced-motion:reduce){#waterline:after{animation:none}}

/* A single anchored wrapper keeps the near and far rim perfectly registered.
   No transform/opacity/filter on the wrapper: swimmer sits between its layers. */
.hoop{z-index:auto;filter:none;transform:none;opacity:1}
.hoop svg{position:absolute;inset:0;z-index:2;filter:drop-shadow(0 0 9px #ffe9ff99)}
.hoop .near-rim{z-index:4;clip-path:inset(0 0 0 50%);filter:none}
.hoop .star{z-index:2}
@media(max-width:700px){#swimmer{width:31%}.hoop{width:20%;height:40%;top:35%}}

.hoop .star.collected{z-index:6;animation:collect-star .75s ease-out forwards}
.star-burst{position:absolute;left:29%;top:30%;width:45%;z-index:6;color:#fff5a6;font-size:clamp(18px,3vw,40px);font-weight:900;text-align:center;opacity:0;pointer-events:none;text-shadow:0 2px 4px #bd7d12}
.star-burst b{display:inline-block;color:white;margin:0 4px}
.star-burst.pop{animation:star-sparkle 1.1s ease-out forwards}
.slot.new-star{animation:counter-pop .65s ease-out}
@keyframes collect-star{0%{transform:scale(1);opacity:1}35%{transform:scale(1.65) rotate(15deg);opacity:1}100%{transform:scale(.2) translateY(-80px) rotate(35deg);opacity:0}}
@keyframes star-sparkle{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.2) translateY(-10px)}65%{opacity:1}100%{opacity:0;transform:scale(1) translateY(-55px)}}
@keyframes counter-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.25);box-shadow:0 0 20px #fff6a4}}
@media(prefers-reduced-motion:reduce){.hoop .star.collected{animation:none;opacity:0}.star-burst.pop{animation:gentle-collect 1.1s forwards}.slot.new-star{animation:none}@keyframes gentle-collect{0%,75%{opacity:1}100%{opacity:0}}}