*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b5ea8;font-family:Fredoka,ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}.scene{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:linear-gradient(#5cc4f5,#a5e3ff 55%,#e6f8ff);user-select:none;-webkit-user-select:none;touch-action:manipulation}.sun{position:absolute;top:calc(env(safe-area-inset-top) + 4vmin);right:6vmin;width:16vmin;height:16vmin;border-radius:50%;background:radial-gradient(circle,#fff7c2 0 40%,#ffd84d 70%);box-shadow:0 0 6vmin 2vmin #ffdc5a8c}.cloud{position:absolute;width:22vmin;height:7vmin;border-radius:7vmin;background:#fff;opacity:.9;animation:drift 50s linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:#fff}.cloud:before{width:9vmin;height:9vmin;left:3vmin;top:-4.5vmin}.cloud:after{width:11vmin;height:11vmin;left:9vmin;top:-6vmin}.c1{top:22%;left:-25vmin}.c2{top:9%;left:-25vmin;transform:scale(.7);animation-duration:70s;animation-delay:-35s}@keyframes drift{to{translate:calc(100vw + 50vmin) 0}}.title{position:absolute;top:calc(env(safe-area-inset-top) + var(--titleTop, 5vh));left:0;right:0;margin:0;display:flex;justify-content:center;gap:calc(var(--titleSize, 160px) * .12);font-size:var(--titleSize, 160px);font-weight:700;line-height:1;pointer-events:none;z-index:2}.big{display:inline-block;color:var(--c);-webkit-text-stroke:calc(var(--titleSize, 160px) * .035) #fff;paint-order:stroke fill;text-shadow:0 calc(var(--titleSize, 160px) * .05) 0 rgba(10,60,110,.35);opacity:0}.j1{--c: #ff5d73}.j2{--c: #ffb627}.scene.go .big{animation:drop .9s cubic-bezier(.3,0,.4,1) both,sway 3s ease-in-out 1.2s infinite}.scene.go .j2{animation-delay:.35s,1.55s}.scene.done .big{opacity:1}@keyframes drop{0%{opacity:0;transform:translateY(-120%) rotate(-12deg)}55%{opacity:1;transform:translateY(6%) rotate(4deg) scaleY(.88)}75%{transform:translateY(-8%) rotate(-2deg)}to{opacity:1;transform:none}}@keyframes sway{0%,to{transform:rotate(0)}50%{transform:rotate(-4deg) translateY(-3%)}}.deck{position:absolute;left:0;right:0;top:calc(var(--surface) - var(--deckH));height:var(--deckH);background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(150,110,70,.25) 38px 40px),linear-gradient(#f1d9b5,#d9b98d);border-bottom:4px solid #f7f3ea}.pool{position:absolute;left:0;right:0;top:var(--surface);bottom:0;background:radial-gradient(ellipse 30% 8% at 20% 30%,rgba(255,255,255,.35),transparent 70%),radial-gradient(ellipse 25% 7% at 70% 60%,rgba(255,255,255,.3),transparent 70%),radial-gradient(ellipse 35% 9% at 45% 85%,rgba(255,255,255,.25),transparent 70%),repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.25) 46px 48px),repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.25) 46px 48px),linear-gradient(#6fe3f7,#23b5e8);background-size:200% 100%,200% 100%,200% 100%,auto,auto,auto;animation:caustics 9s ease-in-out infinite alternate}@keyframes caustics{to{background-position:60% 0,20% 0,80% 0,0 0,0 0,0 0}}.water-front{position:absolute;left:0;right:0;top:var(--surface);bottom:0;z-index:5;pointer-events:auto;cursor:pointer;background:linear-gradient(#0078c86b,#003c8c9e)}.water-front:before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10'%3E%3Cpath d='M0 6 Q20 0 40 6 T80 6 V10 H0Z' fill='rgba(0,120,200,0.42)'/%3E%3Cpath d='M0 6 Q20 0 40 6 T80 6' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x;animation:wave 3s linear infinite}@keyframes wave{to{background-position-x:80px}}.tower{position:absolute;left:calc(var(--boardX0) + var(--size) * .15);top:var(--boardY);width:max(22px,calc(var(--size) * .42));height:calc(var(--surface) - var(--boardY) - var(--deckH) * .4);border-left:5px solid #9fb3c8;border-right:5px solid #9fb3c8;background:repeating-linear-gradient(transparent 0 16px,#9fb3c8 16px 20px);z-index:1}.board{position:absolute;left:var(--boardX0);top:var(--boardY);width:var(--boardLen);height:max(10px,calc(var(--size) * .14));border-radius:0 999px 999px 0;background:linear-gradient(#fff,#cfe1f2);box-shadow:0 4px #2b6cb0;transform-origin:0 50%;z-index:3}.letters{position:absolute;inset:0;pointer-events:none;z-index:4}.ltr{position:absolute;left:0;top:0;width:var(--slot);height:var(--size);font-size:var(--size);font-weight:700;line-height:1;text-align:center;transform-origin:50% 50%;will-change:transform}.ltr .glyph{display:block;color:var(--c);-webkit-text-stroke:calc(var(--size) * .05) #fff;paint-order:stroke fill;text-shadow:0 calc(var(--size) * .04) 0 rgba(10,60,110,.35)}.ltr.floating .glyph{animation:bob 2.4s ease-in-out infinite;animation-delay:var(--bobDelay, 0s)}@keyframes bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(6%) rotate(3deg)}}.fx{position:absolute;inset:0;pointer-events:none;z-index:6}.drop{position:absolute;left:0;top:0;width:var(--d, 10px);height:var(--d, 10px);border-radius:50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#fff,#bdefff 55%,#6fd3f5)}.ring{position:absolute;left:0;top:0;border:3px solid rgba(255,255,255,.85);border-radius:50%}.again{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 5vh);translate:-50% 0;z-index:7;min-height:48px;padding:0 1.4em;border:3px solid #fff;border-radius:999px;background:#ff5d73;color:#fff;font:700 clamp(17px,2.4vmin,22px) / 1 "Fredoka",ui-rounded,system-ui,sans-serif;box-shadow:0 5px #c23651;cursor:pointer;animation:pop .4s ease-out}.again:active{translate:-50% 4px;box-shadow:0 1px #c23651}.again:focus-visible{outline:3px solid #ffb627;outline-offset:3px}@keyframes pop{0%{opacity:0;scale:.6}}@media(prefers-reduced-motion:reduce){.cloud,.pool,.water-front:before,.ltr.floating .glyph,.scene.go .big{animation:none!important}.big{opacity:1}}
