@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden;font-family:Fredoka,sans-serif}.ocean-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#006994,#004e7a,#003d66,#002d4d,#001f33,#000f1a);overflow:hidden}.light-rays{position:absolute;top:-20%;left:0;width:100%;height:60%;background:linear-gradient(170deg,rgba(255,255,200,.08) 0%,transparent 40%),linear-gradient(190deg,rgba(255,255,200,.06) 0%,transparent 35%),linear-gradient(160deg,rgba(200,220,255,.05) 0%,transparent 30%);animation:lightRays 8s ease-in-out infinite;pointer-events:none}@keyframes lightRays{0%,to{opacity:.6;transform:translate(-2%)}50%{opacity:1;transform:translate(2%)}}.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff6,#64c8ff26);border:1px solid rgba(255,255,255,.2);animation:bubbleRise linear infinite;pointer-events:none}@keyframes bubbleRise{0%{transform:translateY(0) translate(0) scale(1);opacity:.7}50%{transform:translateY(-50vh) translate(20px) scale(1.1);opacity:.5}to{transform:translateY(-110vh) translate(-10px) scale(.8);opacity:0}}.sparkle{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;animation:sparkle 3s ease-in-out infinite;pointer-events:none}@keyframes sparkle{0%,to{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}.sea-floor{position:absolute;bottom:0;left:0;width:100%;height:18%;background:linear-gradient(0deg,#1a3a2a 0%,#1a4030 40%,#1a503a 80%,transparent 100%);border-top:2px solid rgba(60,180,120,.15)}.sand{position:absolute;bottom:0;width:100%;height:40px;background:linear-gradient(0deg,#2a1f0e,#3d2b14 50%,transparent 100%);border-radius:100% 100% 0 0/20px 20px 0 0}.coral{position:absolute;bottom:10%;font-size:3rem;animation:coralSway 4s ease-in-out infinite;cursor:pointer;transition:transform .3s;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 0 8px rgba(255,100,150,.3))}.coral:hover{transform:scale(1.2)}@keyframes coralSway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.seaweed{position:absolute;bottom:8%;font-size:2.5rem;animation:seaweedSway 3s ease-in-out infinite;pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes seaweedSway{0%,to{transform:rotate(-5deg) scaleX(1)}25%{transform:rotate(3deg) scaleX(.95)}75%{transform:rotate(-2deg) scaleX(1.05)}}.game-ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.game-ui>*{pointer-events:auto}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(180deg,rgba(0,30,60,.7),transparent)}.stats{display:flex;gap:16px;align-items:center}.stat{display:flex;align-items:center;gap:6px;background:#00285099;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 14px;border-radius:20px;border:1px solid rgba(100,200,255,.2);color:#e0f0ff;font-size:.95rem;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.5)}.stat-icon{font-size:1.2rem}.nav-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:8px;padding:10px 16px 14px;background:linear-gradient(0deg,rgba(0,20,40,.85),transparent);z-index:20}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:#00285080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(100,200,255,.15);border-radius:14px;padding:8px 16px;color:#b4dcffb3;font-family:Fredoka,sans-serif;font-size:.7rem;font-weight:500;cursor:pointer;transition:all .3s;min-width:64px}.nav-btn:hover,.nav-btn.active{background:#0050a080;border-color:#64c8ff66;color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px #0064c84d}.nav-btn .nav-icon{font-size:1.4rem}.mermaid{position:absolute;font-size:3.5rem;transition:left .3s ease,top .3s ease;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:5;filter:drop-shadow(0 0 12px rgba(150,100,255,.5));animation:mermaidFloat 3s ease-in-out infinite}@keyframes mermaidFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.mermaid.face-right{transform:scaleX(1)}.mermaid.face-left{transform:scaleX(-1)}.pearl{position:absolute;font-size:1.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;animation:pearlBob 2s ease-in-out infinite,pearlGlow 2s ease-in-out infinite;transition:transform .2s;z-index:4}.pearl:hover{transform:scale(1.3)}@keyframes pearlBob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pearlGlow{0%,to{filter:drop-shadow(0 0 4px rgba(255,200,255,.5))}50%{filter:drop-shadow(0 0 12px rgba(255,200,255,.9))}}.treasure{position:absolute;font-size:2.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;animation:treasureShimmer 3s ease-in-out infinite;z-index:4;transition:transform .2s}.treasure:hover{transform:scale(1.15) rotate(5deg)}@keyframes treasureShimmer{0%,to{filter:drop-shadow(0 0 8px rgba(255,200,0,.3))}50%{filter:drop-shadow(0 0 20px rgba(255,200,0,.8))}}.sea-animal{position:absolute;font-size:2.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:3;transition:transform .2s}.sea-animal:hover{transform:scale(1.2)}.sea-animal.swim-right{animation:swimRight 12s linear infinite}.sea-animal.swim-left{animation:swimLeft 14s linear infinite}@keyframes swimRight{0%{transform:translate(-100px)}to{transform:translate(calc(100vw + 100px))}}@keyframes swimLeft{0%{transform:translate(calc(100vw + 100px)) scaleX(-1)}to{transform:translate(-100px) scaleX(-1)}}.collect-pop{animation:collectPop .5s ease-out forwards}@keyframes collectPop{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.8}to{transform:scale(0);opacity:0}}.score-popup{position:absolute;font-size:1.4rem;font-weight:700;color:#ffe566;text-shadow:0 0 10px rgba(255,200,0,.8),0 2px 4px rgba(0,0,0,.5);pointer-events:none;animation:scoreFloat 1s ease-out forwards;z-index:20}@keyframes scoreFloat{0%{transform:translateY(0) scale(.5);opacity:1}to{transform:translateY(-60px) scale(1.2);opacity:0}}.panel-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a1eb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.panel{background:linear-gradient(135deg,#0a2a4a,#0a1a30);border:2px solid rgba(100,200,255,.2);border-radius:20px;padding:24px;max-width:480px;width:90%;max-height:80vh;overflow-y:auto;color:#e0f0ff;box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff0d;animation:panelSlide .4s ease}@keyframes panelSlide{0%{transform:translateY(30px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.panel h2{font-size:1.5rem;margin-bottom:16px;text-align:center;background:linear-gradient(135deg,#6cf,#f9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.panel-close{display:block;margin:16px auto 0;background:linear-gradient(135deg,#1a5080,#1a3050);border:1px solid rgba(100,200,255,.3);color:#e0f0ff;padding:10px 28px;border-radius:12px;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.panel-close:hover{background:linear-gradient(135deg,#2070b0,#1a4070);transform:translateY(-2px);box-shadow:0 4px 15px #0064c84d}.outfit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin:12px 0}.outfit-option{display:flex;flex-direction:column;align-items:center;gap:4px;background:#00285066;border:2px solid rgba(100,200,255,.1);border-radius:12px;padding:10px 6px;cursor:pointer;transition:all .2s;font-size:.7rem;color:#c8e6ffcc}.outfit-option:hover{border-color:#64c8ff66;background:#003c7866;transform:translateY(-2px)}.outfit-option.selected{border-color:#6cf;background:#0050a066;box-shadow:0 0 12px #64c8ff4d}.outfit-icon{font-size:2rem}.mini-game{text-align:center}.mini-game h3{font-size:1.1rem;color:#8df;margin-bottom:12px}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px auto;max-width:320px}.memory-card{aspect-ratio:1;background:linear-gradient(135deg,#0a3060,#0a2040);border:2px solid rgba(100,200,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;transition:all .3s;-webkit-user-select:none;user-select:none}.memory-card.flipped{background:linear-gradient(135deg,#1a5080,#1a3060);border-color:#64c8ff80;box-shadow:0 0 12px #64c8ff33}.memory-card.matched{background:linear-gradient(135deg,#0a5040,#0a3030);border-color:#64ffc880;box-shadow:0 0 12px #64ffc84d;animation:matchPulse .5s ease}@keyframes matchPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.memory-card:not(.flipped):not(.matched):hover{transform:scale(1.05);border-color:#64c8ff4d}.home-area{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin:12px 0}.deco-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:#00285066;border:2px solid rgba(100,200,255,.1);border-radius:12px;padding:8px 4px;cursor:pointer;transition:all .2s;font-size:.65rem;color:#c8e6ffb3}.deco-item:hover{border-color:#64c8ff4d;transform:translateY(-2px)}.deco-item.placed{border-color:#f9d;background:#50143c4d}.deco-icon{font-size:1.6rem}.home-preview{background:linear-gradient(135deg,#0a2040,#0a1530);border:2px solid rgba(100,200,255,.15);border-radius:14px;padding:20px;margin-bottom:16px;min-height:150px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.home-preview .placed-item{font-size:2rem;animation:placedBob 2s ease-in-out infinite}@keyframes placedBob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.help-text{color:#c8e6ffcc;font-size:.9rem;line-height:1.7}.help-text li{margin:6px 0;padding-left:4px}.help-text .emoji{margin-right:6px}.music-btn{position:fixed;top:12px;right:12px;background:#00285099;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(100,200,255,.2);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;z-index:30;transition:all .2s;color:#e0f0ff}.music-btn:hover{background:#003c7899;transform:scale(1.1)}.talk-bubble{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#002850d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(100,200,255,.3);border-radius:12px;padding:8px 14px;color:#e0f0ff;font-size:.8rem;white-space:nowrap;animation:bubbleAppear .3s ease;z-index:10}.talk-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#002850d9}@keyframes bubbleAppear{0%{transform:translate(-50%) scale(.8) translateY(5px);opacity:0}to{transform:translate(-50%) scale(1) translateY(0);opacity:1}}.title-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:fadeIn 1s ease}.title-screen h1{font-size:2.8rem;font-weight:700;background:linear-gradient(135deg,#6cf,#f9d,#fc6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:8px;animation:titleShimmer 3s ease-in-out infinite}@keyframes titleShimmer{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.title-screen .subtitle{color:#b4dcffb3;font-size:1.1rem;margin-bottom:30px;text-align:center}.play-btn{background:linear-gradient(135deg,#f6a,#f96);border:none;color:#fff;font-family:Fredoka,sans-serif;font-size:1.4rem;font-weight:600;padding:14px 48px;border-radius:30px;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px #ff649666;animation:playBtnPulse 2s ease-in-out infinite}.play-btn:hover{transform:scale(1.08);box-shadow:0 6px 30px #ff649699}@keyframes playBtnPulse{0%,to{box-shadow:0 4px 20px #ff649666}50%{box-shadow:0 4px 30px #ff6496b3}}.title-mermaid{font-size:5rem;margin-bottom:16px;animation:mermaidFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(150,100,255,.5))}.level-up{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;font-weight:700;color:#ffe566;text-shadow:0 0 20px rgba(255,200,0,.8),0 0 40px rgba(255,200,0,.4);z-index:60;pointer-events:none;animation:levelUp 2s ease-out forwards}@keyframes levelUp{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}20%{transform:translate(-50%,-50%) scale(1.3);opacity:1}80%{opacity:1}to{transform:translate(-50%,-80%) scale(1);opacity:0}}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:#64c8ff33;border-radius:3px}@media(max-width:480px){.top-bar{padding:8px 12px}.stat{font-size:.8rem;padding:4px 10px}.nav-btn{padding:6px 10px;min-width:52px;font-size:.6rem}.nav-icon{font-size:1.1rem}.title-screen h1{font-size:2rem}}