:root{color-scheme:dark;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:#030b1a}.ocean{position:relative;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(180deg,#0b2860,#061640,#030d26 60%,#010816);cursor:none}.light-rays{position:absolute;top:-20%;left:50%;transform:translate(-50%);width:140%;height:60%;background:linear-gradient(170deg,rgba(100,180,255,.08) 0%,transparent 50%),linear-gradient(190deg,rgba(80,160,255,.06) 0%,transparent 50%),linear-gradient(160deg,rgba(120,200,255,.04) 0%,transparent 40%);pointer-events:none;z-index:1}.whale{position:absolute;z-index:10;transition:top .1s ease-out,left .1s ease-out;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}.whale-body{position:relative;width:90px;height:50px}.whale-main{position:absolute;width:80px;height:44px;background:linear-gradient(135deg,#3b7dd8,#2563a8 40%,#1a4f8a);border-radius:40px 30px 28px 40px;left:0;top:3px;box-shadow:inset -4px -4px 10px #0000004d,inset 3px 3px 8px #64b4ff4d}.whale-belly{position:absolute;width:55px;height:18px;background:linear-gradient(180deg,#7ab4e8,#5a9ad4);border-radius:0 0 20px 20px;left:10px;bottom:0}.whale-eye{position:absolute;width:9px;height:10px;background:#fff;border-radius:50%;left:58px;top:12px;box-shadow:inset 3px 0 #1a1a2e}.whale-tail{position:absolute;right:-8px;top:5px;width:22px;height:30px}.whale-tail-top,.whale-tail-bottom{position:absolute;width:18px;height:14px;background:linear-gradient(135deg,#3b7dd8,#2563a8)}.whale-tail-top{top:0;right:0;border-radius:0 14px 0 0;transform:rotate(-15deg);animation:tailTop .8s ease-in-out infinite}.whale-tail-bottom{bottom:0;right:0;border-radius:0 0 14px;transform:rotate(15deg);animation:tailBottom .8s ease-in-out infinite}@keyframes tailTop{0%,to{transform:rotate(-15deg)}50%{transform:rotate(-30deg)}}@keyframes tailBottom{0%,to{transform:rotate(15deg)}50%{transform:rotate(30deg)}}.whale-fin{position:absolute;width:16px;height:20px;background:linear-gradient(180deg,#2563a8,#1a4f8a);left:35px;bottom:-12px;border-radius:0 0 12px 12px;transform:rotate(-10deg);animation:finWave 1.2s ease-in-out infinite}@keyframes finWave{0%,to{transform:rotate(-10deg)}50%{transform:rotate(-18deg)}}.whale-spout{position:absolute;top:-14px;left:55px;width:6px;height:0;opacity:0}.whale-spout.active{animation:spout .8s ease-out forwards}.spout-drop{position:absolute;width:4px;height:4px;background:#96d2ffcc;border-radius:50%}.spout-drop:nth-child(1){left:-3px;animation:spoutDrop1 .8s ease-out forwards}.spout-drop:nth-child(2){left:2px;animation:spoutDrop2 .8s ease-out forwards .1s}.spout-drop:nth-child(3){left:7px;animation:spoutDrop3 .8s ease-out forwards .05s}@keyframes spoutDrop1{0%{transform:translateY(0);opacity:1}to{transform:translateY(-28px) translate(-5px);opacity:0}}@keyframes spoutDrop2{0%{transform:translateY(0);opacity:1}to{transform:translateY(-32px) translate(0);opacity:0}}@keyframes spoutDrop3{0%{transform:translateY(0);opacity:1}to{transform:translateY(-26px) translate(4px);opacity:0}}.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#96d2ff66,#64b4ff1a);border:1px solid rgba(150,210,255,.2);animation:bubbleRise linear infinite;z-index:3;pointer-events:none}@keyframes bubbleRise{0%{transform:translateY(0) translate(0);opacity:.7}50%{transform:translateY(-50vh) translate(15px);opacity:.5}to{transform:translateY(-105vh) translate(-5px);opacity:0}}.seabed{position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(0deg,#0a1a0a 0%,#0d2618 60%,transparent 100%);z-index:2;pointer-events:none}.seaweed{position:absolute;bottom:0;width:8px;background:linear-gradient(0deg,#1a5c2a,#2d8a44);border-radius:4px 4px 0 0;transform-origin:bottom center;animation:seaweedSway 3s ease-in-out infinite}@keyframes seaweedSway{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}.treasure{position:absolute;z-index:5;cursor:pointer;filter:drop-shadow(0 0 8px rgba(255,215,0,.5))}.treasure-gem{width:24px;height:24px;background:linear-gradient(135deg,gold,#fa0,#f80);clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);animation:gemFloat 2s ease-in-out infinite}.treasure-pearl{width:20px;height:20px;background:radial-gradient(circle at 35% 35%,#fff,#e8d5f5,#b088c9);border-radius:50%;animation:gemFloat 2.5s ease-in-out infinite}.treasure-coin{width:22px;height:22px;background:radial-gradient(circle at 40% 40%,gold,#daa520,#b8860b);border-radius:50%;border:2px solid #ffd700;animation:gemFloat 1.8s ease-in-out infinite}@keyframes gemFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.creature{position:absolute;z-index:4;pointer-events:none}.fish{position:relative}.fish-body{border-radius:50%;position:absolute;top:1px;left:0}.fish-tail{position:absolute;right:0;top:3px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;animation:fishTailWag .4s ease-in-out infinite}@keyframes fishTailWag{0%,to{transform:rotate(0)}50%{transform:rotate(10deg)}}.jellyfish{position:relative}.jellyfish-bell{border-radius:50% 50% 30% 30%;animation:jellyPulse 2s ease-in-out infinite}.jellyfish-tentacle{position:absolute;width:2px;background:linear-gradient(180deg,rgba(200,150,255,.6),transparent);animation:tentacleWave 1.5s ease-in-out infinite}@keyframes jellyPulse{0%,to{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(.85) scaleY(1.1)}}@keyframes tentacleWave{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.shark{position:relative}.shark-body{background:linear-gradient(135deg,#4a5568,#2d3748,#1a202c);border-radius:30px 15px 15px 25px;position:absolute}.shark-belly{background:#718096;border-radius:0 0 15px 10px;position:absolute}.shark-fin{position:absolute;top:-8px;left:20px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:14px solid #2d3748}.shark-eye{position:absolute;width:5px;height:5px;background:#e53e3e;border-radius:50%;box-shadow:0 0 6px #e53e3ecc}.urchin{border-radius:50%;position:relative;background:radial-gradient(circle,#2d2d2d,#1a1a1a);box-shadow:0 0 10px #6400004d}.urchin-spike{position:absolute;width:2px;height:6px;background:#555;top:-5px;left:50%;transform-origin:bottom center}.hud{position:absolute;top:0;left:0;right:0;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;z-index:20;background:linear-gradient(180deg,rgba(3,11,26,.7) 0%,transparent 100%);pointer-events:none}.hud-score{display:flex;align-items:center;gap:12px}.score-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:#ffffff80}.score-value{font-size:1.5rem;font-weight:700;color:gold;text-shadow:0 0 10px rgba(255,215,0,.4)}.hud-level{text-align:center}.level-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.2em;color:#fff6}.level-value{font-size:1.1rem;font-weight:600;color:#64b5f6}.hud-health{display:flex;gap:6px;align-items:center}.health-heart{font-size:1.3rem;transition:opacity .3s}.health-heart.lost{opacity:.2;filter:grayscale(1)}.float-msg{position:absolute;z-index:15;pointer-events:none;animation:msgFloat 1.2s ease-out forwards;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.5)}.float-msg.score-msg{font-size:1.1rem;color:gold}.float-msg.hit-msg{font-size:1rem;color:#ef5350}@keyframes msgFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(1.2)}}.start-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;background:#030b1ad9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.start-title{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#64b5f6,#42a5f5,#1e88e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;text-align:center}.start-subtitle{font-size:1rem;color:#ffffff80;margin-bottom:40px;text-align:center}.start-whale-emoji{font-size:4rem;margin-bottom:24px;animation:whaleBob 2s ease-in-out infinite}@keyframes whaleBob{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.start-btn{padding:14px 48px;font-size:1.1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(135deg,#1e88e5,#1565c0);color:#fff;border:none;border-radius:50px;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px #1e88e566}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px #1e88e599}.start-controls{margin-top:24px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.control-hint{display:flex;align-items:center;gap:6px;color:#fff6;font-size:.8rem}.key-icon{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:.7rem;font-weight:600;color:#ffffffb3}.gameover-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;background:#030b1ae6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.gameover-title{font-size:2.5rem;font-weight:800;color:#ef5350;margin-bottom:8px}.gameover-score{font-size:1.2rem;color:#fff9;margin-bottom:8px}.gameover-score span{color:gold;font-weight:700}.gameover-level{font-size:1rem;color:#fff6;margin-bottom:32px}.ocean.hit-flash:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ff323226;z-index:100;pointer-events:none;animation:flashOut .3s ease-out forwards}@keyframes flashOut{0%{opacity:1}to{opacity:0}}.levelup-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;text-align:center;pointer-events:none;animation:levelUp 2s ease-out forwards}.levelup-text{font-size:2rem;font-weight:800;color:#64b5f6;text-shadow:0 0 20px rgba(100,181,246,.6)}.levelup-sub{font-size:1rem;color:#ffffff80;margin-top:4px}@keyframes levelUp{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1) translateY(-40px)}}.collect-particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:12;animation:particleBurst .6s ease-out forwards}@keyframes particleBurst{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--px),var(--py)) scale(0)}}.whale.invincible{animation:invFlash .15s ease-in-out infinite}@keyframes invFlash{0%,to{opacity:1}50%{opacity:.4}}