:root{--ocean-abyss: #001219;--ocean-deep: #023e8a;--ocean-mid: #0077b6;--ocean-bright: #0096c7;--ocean-light: #48cae4;--ocean-foam: #90e0ef;--sand: #f4d35e;--coral: #e63946;--crystal: #a2d2ff;--flower-pink: #ff006e;--flower-purple: #c77dff;--leaf: #52b788;--shell: #ffd6ff;--gold: #ffd700;--text: #e0fbfc;--text-dim: rgba(224, 251, 252, .55);--glass: rgba(255, 255, 255, .06);--glass-border: rgba(255, 255, 255, .12)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--ocean-abyss);color:var(--text);-webkit-font-smoothing:antialiased}.ocean-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,var(--ocean-bright) 0%,var(--ocean-mid) 25%,var(--ocean-deep) 55%,var(--ocean-abyss) 100%);z-index:-2}.waves{position:fixed;bottom:0;left:0;right:0;height:100px;overflow:hidden;pointer-events:none;z-index:-1}.wave{position:absolute;bottom:0;left:0;width:200%;height:100%;background-repeat:repeat-x;background-position:0 bottom}.wave-1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%230096c7' fill-opacity='0.35' d='M0,60 Q150,0 300,60 Q450,120 600,60 Q750,0 900,60 Q1050,120 1200,60 V120 H0 Z'/%3E%3C/svg%3E");background-size:600px 80px;animation:wave-slide 6s linear infinite}.wave-2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%230077b6' fill-opacity='0.28' d='M0,80 Q200,30 400,80 Q600,130 800,60 Q1000,0 1200,70 V120 H0 Z'/%3E%3C/svg%3E");background-size:800px 60px;animation:wave-slide 9s linear infinite reverse;bottom:-8px}.wave-3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%23023e8a' fill-opacity='0.3' d='M0,50 Q100,100 200,50 Q300,0 400,60 Q500,120 600,50 Q700,0 800,70 Q900,120 1000,50 Q1100,0 1200,60 V120 H0 Z'/%3E%3C/svg%3E");background-size:500px 50px;animation:wave-slide 4.5s linear infinite;bottom:-12px}@keyframes wave-slide{0%{background-position-x:0}to{background-position-x:-600px}}.game{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.title-screen{text-align:center;animation:fade-in 1s ease}.title-emoji{font-size:5rem;display:block;margin-bottom:1rem;animation:float 3s ease-in-out infinite}.title-screen h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:800;background:linear-gradient(135deg,var(--sand),var(--gold),var(--ocean-foam));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em;line-height:1.1;margin-bottom:.5rem}.title-screen .subtitle{font-size:1.15rem;color:var(--text-dim);margin-bottom:2.5rem;letter-spacing:.04em}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;border:none;border-radius:2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;letter-spacing:.02em}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,var(--sand),var(--gold));color:var(--ocean-abyss);box-shadow:0 4px 20px #ffd7004d}.btn-primary:hover{box-shadow:0 6px 30px #ffd70073;transform:translateY(-1px)}.btn-secondary{background:var(--glass);color:var(--text);border:1px solid var(--glass-border);padding:.6rem 1.2rem;font-size:.9rem}.btn-secondary:hover{background:#ffffff1a}.btn-small{padding:.5rem 1rem;font-size:.85rem}.map-screen{width:100%;height:100%;display:flex;flex-direction:column;animation:fade-in .5s ease}.map-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;z-index:10;flex-shrink:0}.map-header h2{font-size:1.1rem;font-weight:600;color:var(--ocean-foam)}.treasure-count{display:flex;align-items:center;gap:.4rem;background:var(--glass);border:1px solid var(--glass-border);padding:.4rem 1rem;border-radius:2rem;font-size:.9rem;font-weight:600;cursor:pointer}.treasure-count:hover{background:#ffffff1a}.map-ocean{flex:1;position:relative;overflow:hidden}.island-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;transition:all .3s ease;z-index:5}.island-node:hover{transform:translate(-50%,-50%) scale(1.12)}.island-node:active{transform:translate(-50%,-50%) scale(1.05)}.node-emoji{font-size:2.5rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));animation:float 4s ease-in-out infinite}.island-node:nth-child(2) .node-emoji{animation-delay:-.5s}.island-node:nth-child(3) .node-emoji{animation-delay:-1s}.island-node:nth-child(4) .node-emoji{animation-delay:-1.5s}.island-node:nth-child(5) .node-emoji{animation-delay:-2s}.island-node:nth-child(6) .node-emoji{animation-delay:-2.5s}.node-label{font-size:.75rem;font-weight:600;background:#00000080;padding:.2rem .6rem;border-radius:1rem;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.island-node.completed .node-emoji{filter:drop-shadow(0 0 12px rgba(255,215,0,.5))}.island-node.completed .node-label{background:#ffd70033;color:var(--gold)}.boat{position:absolute;font-size:2rem;transform:translate(-50%,-50%);transition:left 1.5s cubic-bezier(.4,0,.2,1),top 1.5s cubic-bezier(.4,0,.2,1);z-index:4;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));animation:bob 2s ease-in-out infinite}.boat.sailing{animation:bob .8s ease-in-out infinite}.map-instructions{text-align:center;padding:.8rem;font-size:.85rem;color:var(--text-dim);flex-shrink:0;animation:pulse 2s ease-in-out infinite}.island-landing{text-align:center;max-width:480px;padding:2rem;animation:slide-up .5s ease}.island-landing .back-row{display:flex;justify-content:flex-start;margin-bottom:1.5rem}.landing-emoji{font-size:5rem;display:block;margin-bottom:.5rem;animation:float 3s ease-in-out infinite}.island-landing h2{font-size:2rem;font-weight:700;margin-bottom:.5rem}.island-landing .description{color:var(--text-dim);font-size:1rem;margin-bottom:2rem;line-height:1.6}.island-landing .challenge-btn{font-size:1.1rem;padding:1rem 2.5rem}.completed-badge{display:inline-flex;align-items:center;gap:.4rem;background:#ffd70026;border:1px solid rgba(255,215,0,.3);color:var(--gold);padding:.6rem 1.5rem;border-radius:2rem;font-weight:600;margin-bottom:1rem}.challenge-wrap{width:100%;max-width:520px;padding:1.5rem;animation:slide-up .4s ease}.challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.challenge-header span{font-size:.9rem;color:var(--text-dim);font-weight:600}.challenge-wrap h2{font-size:1.5rem;text-align:center;margin-bottom:.5rem}.challenge-wrap .challenge-desc{text-align:center;color:var(--text-dim);font-size:.9rem;margin-bottom:1.5rem}.message{text-align:center;padding:.6rem 1rem;border-radius:1rem;font-size:.9rem;font-weight:600;margin-bottom:1.5rem;background:var(--glass);transition:all .3s ease}.message.success{background:#52b78833;color:var(--leaf)}.message.error{background:#e6394633;color:var(--coral)}.seq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:300px;margin:0 auto}.seq-stone{aspect-ratio:1;border:3px solid rgba(255,255,255,.15);border-radius:1rem;background:color-mix(in srgb,var(--stone-color, #555) 30%,#111);cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.seq-stone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(circle,var(--stone-color, #555),transparent);opacity:0;transition:opacity .2s ease}.seq-stone.lit:after{opacity:1}.seq-stone.lit{border-color:var(--stone-color, #555);box-shadow:0 0 30px color-mix(in srgb,var(--stone-color, #555) 50%,transparent);transform:scale(1.05)}.seq-stone:disabled{cursor:default}.seq-stone:not(:disabled):hover{border-color:#ffffff4d;transform:scale(1.03)}.seq-stone:not(:disabled):active{transform:scale(.97)}.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;max-width:380px;margin:0 auto}.match-card{aspect-ratio:1;perspective:600px;cursor:pointer;background:none;border:none;padding:0}.match-card .card-inner{position:relative;width:100%;height:100%;transition:transform .5s ease;transform-style:preserve-3d}.match-card.flipped .card-inner{transform:rotateY(180deg)}.match-card .card-face{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:2rem;border-radius:.8rem;backface-visibility:hidden}.card-back{background:linear-gradient(135deg,var(--ocean-deep),var(--ocean-mid));border:2px solid var(--ocean-light);font-size:1.5rem}.card-front{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid var(--crystal);transform:rotateY(180deg)}.match-card.matched .card-front{border-color:var(--gold);box-shadow:0 0 15px #ffd7004d}.match-card:not(.flipped):not(.matched):hover .card-inner{transform:rotateY(10deg)}.color-pattern-display{display:flex;justify-content:center;gap:.6rem;margin-bottom:2rem;min-height:3.5rem}.pattern-slot{width:3rem;height:3rem;border-radius:50%;border:2px dashed var(--glass-border);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .3s ease}.pattern-slot.filled{border-style:solid;background:#ffffff0d}.pattern-slot.active{border-color:var(--gold);box-shadow:0 0 10px #ffd7004d}.color-btn-grid{display:flex;justify-content:center;gap:1rem;margin-bottom:1.5rem}.color-btn{width:4rem;height:4rem;border-radius:50%;border:3px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;font-size:1.8rem;display:flex;align-items:center;justify-content:center;background:#0000004d}.color-btn:hover{transform:scale(1.1);border-color:#ffffff80}.color-btn:active{transform:scale(.95)}.color-btn.highlight{border-color:var(--gold);box-shadow:0 0 20px #ffd70066;transform:scale(1.15)}.color-btn:disabled{cursor:default;opacity:.6}.riddle-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem}.riddle-number{font-size:.8rem;color:var(--text-dim);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.1em}.riddle-text{font-size:1.1rem;line-height:1.5;margin-bottom:1.5rem}.riddle-options{display:flex;flex-direction:column;gap:.6rem}.riddle-option{padding:.8rem 1.2rem;border:1px solid var(--glass-border);border-radius:.8rem;background:#ffffff08;color:var(--text);cursor:pointer;transition:all .2s ease;text-align:left;font-size:.95rem;font-family:inherit}.riddle-option:hover:not(:disabled){background:#ffffff14;border-color:#ffffff40}.riddle-option.correct{background:#52b78833;border-color:var(--leaf);color:var(--leaf)}.riddle-option.wrong{background:#e6394633;border-color:var(--coral);color:var(--coral)}.riddle-score{text-align:center;font-size:1rem;color:var(--text-dim);margin-top:1rem}.catch-area{position:relative;width:100%;height:350px;border:2px solid var(--glass-border);border-radius:1rem;overflow:hidden;background:#0003;margin-bottom:1rem;cursor:crosshair}.catch-hud{display:flex;justify-content:space-between;margin-bottom:.8rem;font-size:1rem;font-weight:600}.catch-shell{position:absolute;font-size:2rem;cursor:pointer;transition:opacity .2s ease,transform .2s ease;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:2}.catch-shell:hover{transform:scale(1.2)}.catch-shell.caught{opacity:0;transform:scale(1.5)!important;pointer-events:none}.catch-start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;border-radius:1rem}.catch-start-overlay p{margin-bottom:1rem;font-size:1rem;color:var(--text-dim)}.inventory-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fade-in .3s ease}.inventory-panel{background:linear-gradient(135deg,#0a1628,#0d2137);border:1px solid var(--glass-border);border-radius:1.5rem;padding:2rem;max-width:420px;width:90%;animation:slide-up .4s ease}.inventory-panel h2{text-align:center;margin-bottom:.3rem;font-size:1.3rem}.inventory-subtitle{text-align:center;color:var(--text-dim);font-size:.9rem;margin-bottom:1.5rem}.inventory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.inventory-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.8rem .5rem;background:var(--glass);border:1px solid var(--glass-border);border-radius:.8rem;text-align:center}.inventory-item.empty{opacity:.3}.inventory-item .item-emoji{font-size:2rem}.inventory-item .item-name{font-size:.7rem;font-weight:600;color:var(--text-dim)}.inventory-item:not(.empty) .item-name{color:var(--gold)}.inventory-close{display:block;margin:0 auto}.victory-screen{text-align:center;animation:fade-in 1s ease;max-width:500px;padding:2rem}.victory-screen .victory-stars{font-size:3rem;display:block;margin-bottom:1rem;animation:sparkle 1.5s ease-in-out infinite}.victory-screen h1{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:800;background:linear-gradient(135deg,var(--gold),var(--sand),var(--ocean-foam));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.victory-screen .victory-sub{color:var(--text-dim);font-size:1.05rem;margin-bottom:2rem}.victory-treasures{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-bottom:2.5rem}.victory-treasure{display:flex;flex-direction:column;align-items:center;gap:.2rem;animation:bounce-in .5s ease backwards}.victory-treasure:nth-child(2){animation-delay:.1s}.victory-treasure:nth-child(3){animation-delay:.2s}.victory-treasure:nth-child(4){animation-delay:.3s}.victory-treasure:nth-child(5){animation-delay:.4s}.victory-treasure:nth-child(6){animation-delay:.5s}.victory-treasure .vt-emoji{font-size:2.5rem}.victory-treasure .vt-name{font-size:.7rem;font-weight:600;color:var(--gold)}.sparkle-field{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.sparkle{position:absolute;width:4px;height:4px;background:var(--gold);border-radius:50%;animation:sparkle-float linear infinite}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes bob{0%,to{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-50%) rotate(3deg)}}@keyframes pulse{0%,to{opacity:.55}50%{opacity:1}}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes sparkle-float{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:1;transform:scale(1)}90%{opacity:1}to{opacity:0;transform:translateY(-20px) scale(0)}}@keyframes fall{0%{top:-40px}to{top:110%}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:shake .4s ease}@media(max-width:600px){.map-header{padding:.8rem 1rem}.node-emoji{font-size:2rem}.node-label{font-size:.65rem}.match-grid{gap:.5rem}.match-card .card-face{font-size:1.5rem}.seq-grid{max-width:240px}.challenge-wrap{padding:1rem}.color-btn{width:3.2rem;height:3.2rem;font-size:1.4rem}}