:root{color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;overflow:hidden;background:#87ceeb}.pool-scene{position:relative;width:100vw;height:100vh;overflow:hidden}.sky{position:absolute;top:0;left:0;right:0;height:35%;background:linear-gradient(180deg,#4a90d9,#87ceeb 60%,#b0e0f0);z-index:0}.sun{position:absolute;top:1.5rem;right:3rem;width:70px;height:70px;border-radius:50%;background:#ffe066;box-shadow:0 0 40px 15px #ffe06666,0 0 80px 30px #ffe06626;animation:sun-pulse 4s ease-in-out infinite}@keyframes sun-pulse{0%,to{box-shadow:0 0 40px 15px #ffe06666,0 0 80px 30px #ffe06626}50%{box-shadow:0 0 50px 20px #ffe06680,0 0 100px 40px #ffe06633}}.cloud{position:absolute;background:#fff;border-radius:50px;opacity:.85}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-1{width:100px;height:30px;top:2rem;left:10%;animation:cloud-drift 25s linear infinite}.cloud-1:before{width:50px;height:40px;top:-20px;left:15px}.cloud-1:after{width:35px;height:30px;top:-12px;left:50px}.cloud-2{width:80px;height:25px;top:4rem;left:50%;animation:cloud-drift 30s linear infinite;animation-delay:-10s}.cloud-2:before{width:40px;height:35px;top:-18px;left:10px}.cloud-2:after{width:30px;height:25px;top:-10px;left:40px}.cloud-3{width:120px;height:28px;top:1.5rem;left:75%;animation:cloud-drift 20s linear infinite;animation-delay:-5s}.cloud-3:before{width:55px;height:45px;top:-22px;left:20px}.cloud-3:after{width:40px;height:32px;top:-14px;left:60px}@keyframes cloud-drift{0%{transform:translate(0)}to{transform:translate(calc(100vw + 150px))}}.deck{position:absolute;top:33%;left:0;right:0;height:7%;background:linear-gradient(180deg,#d4a574,#c4956a,#b08560);z-index:1;display:flex;align-items:center;justify-content:space-evenly;border-bottom:3px solid #a07550}.lane-marker{width:24px;height:24px;border-radius:50%;border:3px solid #e8d5c0;background:#c4956a}.pool{position:absolute;top:40%;left:5%;right:5%;bottom:15%;background:linear-gradient(180deg,#1a8fb8,#1575a0,#0f5f85 60%,#0a4a6a);border-radius:12px;border:6px solid #b08560;box-shadow:inset 0 0 60px #0003,0 8px 30px #0000004d;z-index:2;overflow:hidden;cursor:pointer}.water-surface{position:absolute;top:-5px;left:-10%;width:120%;height:40px;background:repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(255,255,255,.15) 40px,rgba(255,255,255,.15) 80px);animation:wave 3s linear infinite;z-index:5}.water-surface-2{animation:wave 4s linear infinite reverse;opacity:.5;top:2px}@keyframes wave{0%{transform:translate(0)}to{transform:translate(80px)}}.pool-floor{position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent,rgba(0,80,120,.4));z-index:1}.lane-line{position:absolute;top:0;bottom:0;width:4px;background:repeating-linear-gradient(180deg,#fff,#fff 12px,#e84040 12px,#e84040 24px,#fff 24px,#fff 36px,#3080d0 36px,#3080d0 48px);opacity:.7;z-index:3}.lane-line-1{left:25%}.lane-line-2{left:50%}.lane-line-3{left:75%}.bubble{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffc,#fff3);z-index:8;animation:bubble-rise .8s ease-out forwards;pointer-events:none}.b1{width:6px;height:6px;animation-delay:0s}.b2{width:10px;height:10px;animation-delay:.1s}.b3{width:5px;height:5px;animation-delay:.2s}@keyframes bubble-rise{0%{opacity:.8;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-40px) scale(.3)}}.splash-effect{position:absolute;width:80px;height:80px;transform:translate(-50%,-50%);z-index:10;pointer-events:none}.splash-effect:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid rgba(255,255,255,.6);animation:splash-ring .6s ease-out forwards}.splash-effect:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;border:2px solid rgba(255,255,255,.4);animation:splash-ring .6s ease-out .1s forwards}@keyframes splash-ring{0%{transform:scale(.3);opacity:1}to{transform:scale(2);opacity:0}}.swimmer{position:absolute;z-index:9;transition:left .05s linear,top .05s linear;pointer-events:none}.swimmer-body{position:relative;width:60px;height:30px}.head{position:absolute;width:16px;height:14px;background:#fdd;border-radius:50%;top:2px;left:4px;z-index:3;box-shadow:0 1px 3px #0003}.torso{position:absolute;width:30px;height:12px;background:linear-gradient(180deg,#2196f3,#1976d2);border-radius:6px;top:6px;left:14px;z-index:2}.arm{position:absolute;width:22px;height:6px;background:#fdd;border-radius:3px;top:5px;z-index:1;transform-origin:left center}.arm-front,.arm-back{left:20px}.swimming .arm-front{animation:arm-stroke-front .5s ease-in-out infinite}.swimming .arm-back{animation:arm-stroke-back .5s ease-in-out infinite .25s}@keyframes arm-stroke-front{0%,to{transform:rotate(-20deg)}50%{transform:rotate(30deg)}}@keyframes arm-stroke-back{0%,to{transform:rotate(-20deg)}50%{transform:rotate(30deg)}}.leg{position:absolute;width:18px;height:5px;background:#fdd;border-radius:3px;top:14px;left:36px;z-index:1;transform-origin:left center}.leg-front{top:12px}.leg-back{top:17px}.swimming .leg-front{animation:kick-front .3s ease-in-out infinite}.swimming .leg-back{animation:kick-back .3s ease-in-out infinite .15s}@keyframes kick-front{0%,to{transform:rotate(-10deg)}50%{transform:rotate(15deg)}}@keyframes kick-back{0%,to{transform:rotate(10deg)}50%{transform:rotate(-15deg)}}.hud{position:absolute;top:1rem;left:50%;transform:translate(-50%);display:flex;gap:1rem;z-index:20}.hud-card{background:#fff3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:.5rem 1rem;text-align:center;min-width:80px}.hud-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#00000080;font-weight:600}.hud-value{font-size:1.2rem;font-weight:700;color:#0a4a6a}.controls{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;gap:2rem;z-index:20;background:#fff3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:.5rem 1.5rem;font-size:.8rem;color:#0a4a6a;font-weight:500}@media(max-width:600px){.hud{flex-direction:column;gap:.5rem}.controls{flex-direction:column;gap:.3rem;text-align:center}.swimmer-body{transform:scale(.7)}}