@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--ocean-deep: #0a1628;--ocean-mid: #0d2847;--ocean-light: #1a4a7a;--coral-pink: #ff6b9d;--coral-orange: #ff8c42;--sand: #f4d58d;--seaweed: #2ecc71;--bubble: rgba(255, 255, 255, .15);--gold: #ffd700;--treasure: #ffb347}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Fredoka,sans-serif;background:var(--ocean-deep);color:#fff;user-select:none;-webkit-user-select:none}.game-container{position:relative;width:100%;height:100vh;overflow:hidden}.ocean-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0a2a5c,#0d3b6e,#0f4c81,#126094,#0a3d6b,#062a4a);z-index:0}.ocean-bg:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 50%,rgba(30,100,180,.3) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(20,80,160,.2) 0%,transparent 40%)}.light-rays{position:absolute;top:0;left:50%;transform:translate(-50%);width:120%;height:100%;background:linear-gradient(170deg,rgba(255,255,200,.08) 0%,transparent 30%),linear-gradient(190deg,rgba(255,255,200,.05) 0%,transparent 25%),linear-gradient(160deg,rgba(255,255,200,.06) 0%,transparent 35%);z-index:1;pointer-events:none;animation:lightShimmer 8s ease-in-out infinite}@keyframes lightShimmer{0%,to{opacity:.6}50%{opacity:1}}.sand-floor{position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(180deg,transparent 0%,rgba(194,154,97,.3) 30%,rgba(194,154,97,.5) 100%);z-index:2}.sand-floor:before{content:"";position:absolute;top:-20px;left:0;width:100%;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0,20 Q50,0 100,20 Q150,40 200,20 Q250,0 300,20 Q350,40 400,20 Q450,0 500,20 Q550,40 600,20 Q650,0 700,20 Q750,40 800,20 Q850,0 900,20 Q950,40 1000,20 Q1050,0 1100,20 Q1150,40 1200,20' fill='none' stroke='rgba(194,154,97,0.3)' stroke-width='2'/%3E%3C/svg%3E") repeat-x;animation:sandWave 6s ease-in-out infinite}@keyframes sandWave{0%,to{transform:translate(0)}50%{transform:translate(-20px)}}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;cursor:none}.bubbles-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;overflow:hidden}.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff6,#ffffff1a);border:1px solid rgba(255,255,255,.2);animation:bubbleRise linear infinite}@keyframes bubbleRise{0%{transform:translateY(0) scale(1);opacity:.8}50%{transform:translateY(-50vh) scale(1.1);opacity:.6}to{transform:translateY(-100vh) scale(.8);opacity:0}}.hud{position:absolute;top:0;left:0;right:0;z-index:20;padding:12px 20px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.hud>*{pointer-events:auto}.hud-left{display:flex;flex-direction:column;gap:8px}.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.score-display{background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:var(--gold);text-shadow:0 0 10px rgba(255,215,0,.3)}.score-display .icon{font-size:22px}.world-display{background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px 16px;font-size:14px;font-weight:500;color:#8ec8f0}.depth-gauge{background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px 16px;font-size:14px;color:#7eb8da;display:flex;align-items:center;gap:6px}.creature-count{background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px 16px;font-size:14px;color:var(--seaweed);display:flex;align-items:center;gap:6px}.mission-panel{position:absolute;top:80px;left:20px;z-index:20;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 16px;max-width:260px;pointer-events:auto}.mission-panel h3{font-size:13px;font-weight:600;color:var(--coral-orange);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;display:flex;align-items:center;gap:6px}.mission-item{font-size:13px;color:#fffc;padding:4px 0;display:flex;align-items:center;gap:8px}.mission-item.completed{color:var(--seaweed);text-decoration:line-through;opacity:.7}.mission-check{width:16px;height:16px;border-radius:4px;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}.mission-item.completed .mission-check{background:var(--seaweed);border-color:var(--seaweed)}.mission-progress{margin-top:8px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.mission-progress-bar{height:100%;background:linear-gradient(90deg,var(--coral-orange),var(--coral-pink));border-radius:2px;transition:width .5s ease}.inventory-btn{position:absolute;top:80px;right:20px;z-index:20;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px 16px;font-family:Fredoka,sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.inventory-btn:hover{background:#000c;border-color:#fff3;transform:scale(1.05)}.inventory-panel{position:absolute;top:0;right:0;width:320px;height:100%;z-index:30;background:#0a1628f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,.1);padding:20px;overflow-y:auto;transform:translate(100%);transition:transform .3s ease}.inventory-panel.open{transform:translate(0)}.inventory-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.inventory-header h2{font-size:20px;font-weight:700;color:var(--coral-pink)}.close-btn{background:#ffffff1a;border:none;border-radius:8px;width:32px;height:32px;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.close-btn:hover{background:#fff3}.creature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.creature-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;text-align:center;transition:all .2s}.creature-card.collected{border-color:#2ecc714d;background:#2ecc710d}.creature-card.locked{opacity:.4;filter:grayscale(1)}.creature-emoji{font-size:36px;display:block;margin-bottom:6px}.creature-name{font-size:12px;font-weight:600;color:#ffffffe6}.creature-rarity{font-size:10px;color:#ffffff80;margin-top:2px}.creature-rarity.rare{color:#9b59b6}.creature-rarity.epic{color:var(--coral-orange)}.creature-rarity.legendary{color:var(--gold)}.world-selector{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:20;display:flex;gap:10px;pointer-events:auto}.world-btn{background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 18px;font-family:Fredoka,sans-serif;font-size:13px;font-weight:500;color:#fff9;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.world-btn:hover{background:#000c;color:#fff}.world-btn.active{border-color:var(--coral-pink);color:#fff;background:#ff6b9d26}.world-btn.locked{opacity:.4;cursor:not-allowed}.world-btn .lock-icon{font-size:12px}.toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;background:#000000d9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:24px 36px;text-align:center;animation:toastIn .4s ease,toastOut .4s ease 2s forwards;pointer-events:none}@keyframes toastIn{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes toastOut{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(.8);opacity:0}}.toast-icon{font-size:48px;display:block;margin-bottom:8px}.toast-text{font-size:16px;font-weight:600;color:#fff}.toast-sub{font-size:13px;color:#fff9;margin-top:4px}.collect-particle{position:absolute;z-index:15;pointer-events:none;font-size:20px;animation:collectFloat 1s ease-out forwards}@keyframes collectFloat{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5) translateY(-20px);opacity:.8}to{transform:scale(.5) translateY(-50px);opacity:0}}.start-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#0a1628,#0d3b6e 40%,#1a5a8a,#0d2847);animation:startFade .5s ease}@keyframes startFade{0%{opacity:0}to{opacity:1}}.start-screen h1{font-size:52px;font-weight:700;background:linear-gradient(135deg,var(--coral-pink),var(--coral-orange),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;text-align:center;line-height:1.1}.start-screen .subtitle{font-size:18px;color:#fff9;margin-bottom:40px;text-align:center}.start-creatures{font-size:60px;margin-bottom:40px;display:flex;gap:16px;animation:floatCreatures 3s ease-in-out infinite}@keyframes floatCreatures{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.play-btn{background:linear-gradient(135deg,var(--coral-pink),var(--coral-orange));border:none;border-radius:50px;padding:16px 48px;font-family:Fredoka,sans-serif;font-size:22px;font-weight:700;color:#fff;cursor:pointer;transition:all .3s;box-shadow:0 8px 30px #ff6b9d4d;display:flex;align-items:center;gap:10px}.play-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 40px #ff6b9d80}.start-info{margin-top:30px;font-size:13px;color:#fff6;text-align:center;line-height:1.8}.level-up-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.level-up-overlay h2{font-size:42px;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--coral-orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}.level-up-overlay p{font-size:18px;color:#ffffffb3;margin-bottom:8px}.level-up-overlay .reward{font-size:16px;color:var(--seaweed);margin-bottom:30px}.continue-btn{background:#ffffff26;border:2px solid rgba(255,255,255,.3);border-radius:50px;padding:12px 36px;font-family:Fredoka,sans-serif;font-size:16px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s}.continue-btn:hover{background:#ffffff40;transform:scale(1.05)}.treasure-popup{position:absolute;z-index:25;background:#000c;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:2px solid var(--gold);border-radius:16px;padding:16px 20px;text-align:center;animation:popupIn .3s ease;pointer-events:auto}@keyframes popupIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.treasure-popup .chest-icon{font-size:40px;display:block;margin-bottom:6px}.treasure-popup .reward-text{font-size:14px;font-weight:600;color:var(--gold)}.mini-map{position:absolute;bottom:80px;right:20px;z-index:20;width:120px;height:80px;background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;pointer-events:none}.mini-map-dot{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%)}.mini-map-player{background:#fff;box-shadow:0 0 6px #fff;z-index:2}.mini-map-creature{background:var(--seaweed);opacity:.7}.mini-map-treasure{background:var(--gold);opacity:.8}.oxygen-bar-container{position:absolute;bottom:20px;left:20px;z-index:20;display:flex;align-items:center;gap:8px;background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px 14px;pointer-events:none}.oxygen-icon{font-size:18px}.oxygen-bar{width:100px;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.oxygen-fill{height:100%;background:linear-gradient(90deg,#3498db,#2ecc71);border-radius:4px;transition:width .3s ease}.oxygen-fill.low{background:linear-gradient(90deg,#e74c3c,#f39c12)}.speed-boost{position:absolute;bottom:60px;left:20px;z-index:20;background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px 12px;font-size:12px;color:var(--coral-orange);display:flex;align-items:center;gap:6px;pointer-events:none;animation:boostPulse 1s ease-in-out infinite}@keyframes boostPulse{0%,to{opacity:1}50%{opacity:.6}}@media(max-width:600px){.start-screen h1{font-size:36px}.start-creatures{font-size:44px}.play-btn{font-size:18px;padding:14px 36px}.mission-panel{max-width:200px;padding:10px 12px}.inventory-panel{width:280px}.world-btn{padding:8px 12px;font-size:12px}}