/* Ocean-only soft dimensional art. Matching/reward state remains in its existing module. */
.ocean-tile{background:linear-gradient(145deg,#cbf4ee,#88cedd);color:#285d82}
.ocean-screen{max-width:1080px;margin:auto;padding:4px 20px 12px;box-sizing:border-box}.ocean-screen[hidden]{display:none}
.ocean-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 5px 10px}.ocean-kicker{color:#397e94;font-size:11px;font-weight:900;letter-spacing:1.3px}.ocean-top h1{font-size:clamp(27px,3.5vw,40px);line-height:1.08;color:#35678e;margin:3px 0;text-shadow:0 2px white}
.ocean-score{min-width:106px;padding:6px 16px;text-align:center;color:#32677e;background:linear-gradient(#fffef0,#e2f8f6);border:3px solid white;border-radius:21px;box-shadow:0 4px 0 #8ec5cb,inset 0 0 0 1px #d4eee5;font-weight:900}.ocean-score strong{display:block;font-size:25px}.ocean-score small{font-size:11px}
.ocean-size-options{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;color:#39788c;font-weight:900}.ocean-size-options>span{font-size:25px}.ocean-size-options small{font-size:12px}.ocean-size-options button{min-width:55px;min-height:44px;border:2px solid white;border-radius:15px;background:linear-gradient(#f5fffc,#cdebee);color:#346b87;font-family:inherit;font-size:17px;font-weight:900;box-shadow:0 3px 0 #8cb8c8;cursor:pointer}.ocean-size-options button[aria-pressed=true]{background:linear-gradient(#fff3b6,#ffdb82);color:#755294;box-shadow:0 3px 0 #d3a764}
.ocean-game{--water-top:#a0e6ec;--water-middle:#53b9d0;--water-deep:#337f9f;position:relative;isolation:isolate;overflow:hidden;height:clamp(380px,calc(100dvh - 285px),630px);padding:24px clamp(22px,6vw,68px) 43px;box-sizing:border-box;border:5px solid #f3fffa;border-radius:33px;background:radial-gradient(ellipse at 50% 0,#e4ffef8c,transparent 60%),linear-gradient(var(--water-top),var(--water-middle) 55%,var(--water-deep));box-shadow:0 7px 0 #80b9c7,0 14px 22px #386a851c;touch-action:manipulation}

.ocean-game[data-level=open-sea]{--water-top:#afe3ef;--water-middle:#68b0d2;--water-deep:#477caa}.ocean-game[data-level=cove]{--water-top:#aaeae0;--water-middle:#51c3ba;--water-deep:#398da1}.ocean-game[data-level=polar]{--water-top:#d6eef5;--water-middle:#98cfdc;--water-deep:#6295b5}.ocean-game[data-level=lagoon]{--water-top:#a6dfe9;--water-middle:#6ca9c6;--water-deep:#5a7ba7}
.ocean-environment,.ocean-world{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2}.ocean-world{overflow:visible}.sea-rays{animation:sea-light 13s ease-in-out infinite alternate;transform-origin:50% 0}.sea-plant{animation:sea-sway 5s ease-in-out var(--delay) infinite alternate}.sea-coral{animation:sea-sway 8s ease-in-out infinite alternate;transform-origin:50% 100%}.ocean-coral{display:none}
.sea-swimmer{position:absolute;width:85px;height:70px;left:-18%;top:14%;opacity:.6;animation:sea-swim 26s linear infinite}.swimmer-1{top:66%;width:115px;animation-duration:39s;animation-delay:-18s}.swimmer-2{top:40%;width:70px;animation-duration:32s;animation-delay:-12s}.sea-swimmer svg{width:100%;height:100%;transform:none}
.ocean-bubbles{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.ocean-bubbles i{position:absolute;left:var(--x);bottom:-35px;width:var(--size);height:var(--size);border-radius:50%;border:1.5px solid #e8fffac2;background:radial-gradient(circle at 28% 25%,#fff9 0 8%,transparent 18%),linear-gradient(140deg,#fff2,transparent 70%);box-shadow:inset -2px -2px 3px #f2ffff33;animation:sea-bubble var(--time) linear var(--delay) infinite;opacity:.6}
.ocean-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(10px,1.7vw,18px);max-width:830px;height:100%;margin:auto}.ocean-cards[data-pairs="8"]{grid-template-rows:repeat(4,minmax(0,1fr))}.ocean-cards[data-pairs="10"]{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
.match-card{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:22px;background:none;perspective:900px;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}.match-card:focus-visible{outline:4px solid #ffe18b;outline-offset:4px}.match-card-inner{position:absolute;inset:0;transition:transform .48s cubic-bezier(.3,.04,.18,1);transform-style:preserve-3d}.match-card.revealed .match-card-inner,.match-card.matched .match-card-inner{transform:rotateY(180deg)}
.match-card-face{position:absolute;inset:0;display:grid;place-items:center;border:4px solid #f6f9e8;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4px 0 #447d97,0 8px 10px #174b642e,inset 0 0 0 2px #fff5;overflow:hidden;box-sizing:border-box}.match-card-back{background:#468eb2 url('ocean-card-back.svg') center/cover no-repeat;transform:translateZ(1px)}.match-card-back:after{content:'';position:absolute;inset:4px;border:1px solid #dcfbf199;border-radius:13px;box-shadow:inset 0 3px 10px #ffffff38;pointer-events:none}
.match-card-front{transform:rotateY(180deg) translateZ(1px);background:radial-gradient(ellipse at 50% 38%,#edffff,#a5e0e9 72%,#72c0d4);font-size:45px}.match-card-front:before{content:'';position:absolute;inset:8px;border:1px solid #f1ffff7a;border-radius:50%;background:radial-gradient(circle at 25% 15%,#fff8,transparent 45%)}.match-card-front svg{position:relative;width:94%;height:94%;max-height:180px;filter:drop-shadow(0 3px 2px #38647a22)}
.match-card.matched{animation:sea-match .65s ease-out;opacity:1}.match-card.matched .match-card-front{border-color:#fff1b1;box-shadow:0 4px 0 #b9a671,0 0 0 2px #ffe696,0 0 13px #f9ecb37a}.match-card.wrong{animation:sea-wiggle .5s ease-in-out}
#ocean-effects{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.ocean-pop{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border:2px solid #f0fff9;border-radius:50%;background:#d6fff84d;animation:sea-pop .9s ease-out forwards}.ocean-pop.sea-spark{width:15px;height:15px;border:0;border-radius:0;background:#fff5bd;clip-path:polygon(50% 0,63% 36%,100% 50%,64% 63%,50% 100%,36% 64%,0 50%,36% 36%)}.ocean-reward-friend{position:absolute;left:var(--x);top:var(--y);width:95px;height:80px;animation:sea-friend 1.35s ease-out forwards;filter:drop-shadow(0 4px 3px #3c6d7d33)}.ocean-reward-friend svg{width:100%;height:100%}.ocean-message{text-align:center;color:#39798c;font-size:14px;font-weight:900;margin:12px 0 0}
@keyframes sea-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}@keyframes sea-light{from{opacity:.55;transform:skewX(-3deg)}to{opacity:1;transform:skewX(3deg)}}@keyframes sea-swim{0%{transform:translateX(0) translateY(0)}48%{transform:translateX(650px) translateY(16px)}100%{transform:translateX(1250px) translateY(-10px)}}@keyframes sea-bubble{from{transform:translate(0,0);opacity:0}10%{opacity:.65}85%{opacity:.6}to{transform:translate(18px,-690px);opacity:0}}
@keyframes sea-match{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px) scale(1.035)}}@keyframes sea-wiggle{25%{transform:translateX(-3px) rotate(-1deg)}65%{transform:translateX(3px) rotate(1deg)}}@keyframes sea-pop{to{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:0}}@keyframes sea-friend{0%{transform:translate(-50%,-40%) scale(.35);opacity:0}20%{transform:translate(-50%,-95%) scale(1.05);opacity:1}60%{transform:translate(-20%,-110%) rotate(8deg);opacity:1}100%{transform:translate(35%,-150%) scale(.8);opacity:0}}
.ocean-game[data-paused=true] *, .ocean-screen[hidden] *{animation-play-state:paused!important}
.game-tiles>.game-tile:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 13px);justify-self:center}
@media(max-width:760px){.ocean-screen{padding:4px 9px 12px}.ocean-top h1{font-size:26px}.ocean-kicker{font-size:9px;letter-spacing:.8px}.ocean-score{min-width:78px;padding:5px 10px}.ocean-score strong{font-size:21px}.ocean-game{height:clamp(380px,calc(100dvh - 280px),600px);padding:20px 19px 34px;border-width:4px;border-radius:27px}.ocean-cards{gap:11px}.match-card-face{border-width:3px;border-radius:17px}.match-card-back:after{border-radius:10px}.game-tiles>.game-tile:last-child:nth-child(odd){width:calc(50% - 7px)}}
@media(max-width:430px){.ocean-game{padding:17px 12px 30px}.ocean-cards{gap:8px}.ocean-cards[data-pairs="10"]{gap:6px}.match-card-face{border-radius:14px}.ocean-cards[data-pairs="10"] .match-card-face{border-width:2px;border-radius:12px}.ocean-top h1{font-size:24px}.ocean-size-options{margin-bottom:9px}.game-tiles>.game-tile:last-child:nth-child(odd){width:calc(50% - 5px)}}
@media(orientation:landscape) and (max-height:620px){.ocean-top{margin-bottom:5px}.ocean-top h1{font-size:25px}.ocean-kicker{font-size:9px}.ocean-score{padding:2px 14px}.ocean-score strong{font-size:21px}.ocean-size-options{margin:0 0 7px}.ocean-game{height:max(260px,calc(100dvh - 215px));padding:12px 45px 23px}.ocean-cards{gap:9px;max-width:800px}.match-card-face{border-radius:15px}.ocean-message{margin:10px 0 0;font-size:12px}}
/* Smaller screens use more rows so card artwork never becomes a narrow sliver. */
@media(max-width:430px){.ocean-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}.ocean-cards[data-pairs="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}.ocean-cards[data-pairs="10"]{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr))}.match-card-back{background-size:contain;background-color:#326caf}}
.ocean-size-options>.ocean-size-icon{position:relative;width:23px;height:28px;border:2px solid #fff;border-radius:6px;background:linear-gradient(#a2ddeb,#518eb6);box-shadow:-4px 3px 0 #84b7ca;box-sizing:border-box}.ocean-size-icon:after{content:'';position:absolute;inset:6px;border-radius:50%;border:2px solid #e8fffa}
@media(prefers-reduced-motion:reduce){.ocean-screen *{animation:none!important}.match-card-inner{transition:none}.ocean-reward-friend,.ocean-pop{display:none}}

/* Scenic worlds rotate independently of the matching pairs. */
.ocean-game[data-background=coral-garden]{--water-top:#9aebe6;--water-middle:#46b9cb;--water-deep:#3889a5}
.ocean-game[data-background=kelp-forest]{--water-top:#a6e6d6;--water-middle:#4facb4;--water-deep:#397e98}
.ocean-game[data-background=pearl-cove]{--water-top:#c1e8f6;--water-middle:#7cb9d7;--water-deep:#6b8bb7}
.ocean-world{animation:sea-scene-enter .6s ease-out}
.sea-swimmer{left:-20%;animation-name:sea-travel}
.sea-swimmer svg{animation:sea-swimmer-bob 2.8s ease-in-out infinite;transform-origin:50% 55%}
.swimmer-1 svg{animation-duration:3.6s}.swimmer-2 svg{animation-duration:4.4s}
.sea-floor-shimmer{animation:sea-floor-light 5s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes sea-travel{from{left:-20%}to{left:115%}}
@keyframes sea-swimmer-bob{0%,100%{transform:translateY(-4px) rotate(-2deg)}50%{transform:translateY(5px) rotate(2deg)}}
@keyframes sea-floor-light{from{transform:translateX(-10px) scaleX(.98);opacity:.15}to{transform:translateX(10px) scaleX(1.02);opacity:.4}}
@keyframes sea-scene-enter{from{opacity:.5}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.ocean-world,.sea-swimmer,.sea-swimmer svg,.sea-floor-shimmer,.sea-rays,.sea-plant,.sea-coral,.ocean-bubbles i{animation:none!important}.sea-swimmer{left:5%}.swimmer-1{left:78%}.swimmer-2{left:45%}}