:root{font-family:ui-rounded,"Nunito",system-ui,sans-serif;color:#123c4e;background:#e9f8f4}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}a{color:inherit}.shell{width:min(1080px,100%);min-height:100dvh;margin:auto;padding:16px clamp(12px,3vw,30px) 30px}.top{display:flex;justify-content:space-between;align-items:center;gap:10px}.back{font-weight:900;text-decoration:none;background:#ffffffd9;border-radius:999px;padding:10px 15px;box-shadow:0 4px 15px #003c5620}.brand{font-weight:950;color:#126b7c}.hero{position:relative;overflow:hidden;margin-top:18px;border-radius:32px;min-height:355px;padding:clamp(22px,5vw,54px);display:flex;align-items:center;background:linear-gradient(#70d8ec 0 33%,#2aa4c4 33%,#086284 100%);color:white;box-shadow:0 18px 45px #0b667342}.hero:before{content:"";position:absolute;inset:auto -10% -25% -10%;height:48%;border-radius:50%;background:#03496366}.hero-copy{position:relative;z-index:2;max-width:570px;text-shadow:0 2px 5px #073d5766}.eyebrow{font-size:.76rem;font-weight:950;letter-spacing:.15em;text-transform:uppercase;color:#fff0a6}.hero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.94;letter-spacing:-.055em;margin:10px 0 18px}.hero p{font-size:clamp(1rem,2vw,1.22rem);line-height:1.5}.whale-art{position:absolute;right:-1%;bottom:11%;font-size:clamp(7rem,20vw,15rem);transform:scaleX(-1) rotate(-7deg);filter:drop-shadow(0 20px 10px #033f5c80);animation:float 3s ease-in-out infinite}.bubble{position:absolute;border:3px solid #ffffff8a;border-radius:50%;animation:rise 5s linear infinite}.b1{width:22px;height:22px;right:27%;bottom:11%}.b2{width:14px;height:14px;right:10%;bottom:34%;animation-delay:2s}.b3{width:35px;height:35px;right:42%;bottom:8%;animation-delay:3s}.primary,.secondary{border:0;border-radius:17px;padding:14px 22px;font-weight:950}.primary{background:#ffd166;color:#533a03;box-shadow:0 8px 0 #d9952f,0 14px 20px #083b4d30}.primary:active{transform:translateY(5px);box-shadow:0 3px 0 #d9952f}.secondary{background:#e6f8f4;color:#12546b}.intro,.level-list,.result{margin-top:20px;border-radius:25px;background:#fff;padding:clamp(20px,4vw,32px);box-shadow:0 10px 30px #0d6c7422}.intro h2,.level-list h2,.result h2{margin:0 0 12px;font-size:clamp(1.5rem,4vw,2.2rem)}.intro p{line-height:1.6;color:#466779}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.level-card{border:2px solid #c4e8e5;border-radius:20px;background:linear-gradient(150deg,#f3fffd,#d6f1f4);padding:18px;text-align:left;color:#12445c;min-height:145px}.level-card strong,.level-card span{display:block}.level-card strong{font-size:1.2rem}.level-card i{font-size:2rem;font-style:normal}.level-card[disabled]{opacity:.54;cursor:not-allowed}.level-card:not([disabled]):hover{border-color:#f0b844;transform:translateY(-3px)}.story{margin-top:18px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 15px 40px #0b617b30}.story-stage{position:relative;height:min(52vw,370px);min-height:240px;overflow:hidden;background:linear-gradient(#9de5f5 0 55%,#157aa8 56%,#083f72)}.story-stage:after{content:"";position:absolute;left:-10%;right:-10%;bottom:30%;height:30px;border-radius:50%;border-top:8px solid #c9f5f688;animation:sea 2s ease-in-out infinite}.sun{position:absolute;top:9%;right:13%;width:65px;height:65px;background:#fff3b0;border-radius:50%;box-shadow:0 0 45px #fff8cd}.boat{position:absolute;z-index:2;top:29%;left:20%;font-size:clamp(6rem,18vw,10rem);transition:opacity .5s}.jonah{position:absolute;z-index:3;top:37%;left:49%;font-size:clamp(3rem,9vw,5rem);transition:top 1.1s,left 1.1s,opacity .5s}.story-stage.fall .jonah{top:72%;left:52%}.story-stage.rescue .jonah{opacity:0}.story-fish{position:absolute;z-index:3;bottom:-40%;left:20%;font-size:clamp(7rem,19vw,12rem);transform:scaleX(-1);transition:bottom 1.2s,left 1.2s}.story-stage.rescue .story-fish{bottom:-1%;left:43%}.story-copy{padding:22px 28px}.story-copy p{font-size:1.1rem;line-height:1.55;min-height:54px}.story-actions{display:flex;gap:12px;flex-wrap:wrap}.game-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px}.game-head h1{font-size:clamp(1.25rem,4vw,2rem);margin:3px 0}.game-head p{margin:0;color:#5a7a88}.stats{white-space:nowrap;font-weight:950;color:#0c6677}.game-frame{position:relative;overflow:hidden;border:8px solid white;border-radius:27px;box-shadow:0 18px 45px #064c6b4a;background:#076289}.game-frame canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#053754b8;color:white;text-align:center}.game-overlay.hidden{display:none}.overlay-card{max-width:460px;border-radius:22px;background:#fffffff0;color:#194757;padding:20px;box-shadow:0 14px 35px #002d4760}.overlay-card h2{margin:0 0 8px;font-size:1.8rem}.overlay-card p{line-height:1.45}.controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px auto}.control{width:clamp(80px,18vw,130px);height:76px;display:grid;place-items:center;border:0;border-radius:22px;background:#ffd166;color:#4d4106;font-size:2.3rem;font-weight:900;box-shadow:0 7px 0 #dc9d33;touch-action:none;user-select:none}.control:active,.control.pressed{transform:translateY(5px);box-shadow:0 2px 0 #dc9d33}.control.jump{background:#c2f4e8;box-shadow:0 7px 0 #68bcb0;font-size:1rem;line-height:1.1}.control[disabled]{opacity:.45}.hint{text-align:center;color:#587887;font-weight:700}.result{text-align:center}.result .big{font-size:5rem;display:block}.result .actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.toast{position:absolute;left:50%;top:18px;transform:translateX(-50%);border-radius:999px;background:#fff8df;color:#4d513c;font-weight:900;padding:9px 16px;white-space:nowrap;box-shadow:0 5px 15px #003b5340;pointer-events:none}.toast.hidden{display:none}@keyframes float{50%{transform:scaleX(-1) translateY(-15px) rotate(-4deg)}}@keyframes rise{to{transform:translateY(-280px);opacity:0}}@keyframes sea{50%{transform:translateY(9px)}}@media(max-width:620px){.shell{padding-bottom:20px}.hero{min-height:320px;align-items:flex-start}.hero-copy{max-width:85%}.hero h1{font-size:2.6rem}.whale-art{right:-13%;bottom:2%;font-size:8rem}.levels{grid-template-columns:1fr}.level-card{min-height:96px;display:flex;align-items:center;gap:14px}.level-card i{font-size:2.5rem}.game-frame{border-width:5px}.game-frame canvas{aspect-ratio:3/4}.controls{gap:12px}.control{width:28vw;height:72px}.game-head{align-items:flex-start}.game-head .back{padding:8px;font-size:.8rem}.stats{font-size:.85rem}.story-copy{padding:18px}}