.ocean-page{max-width:1280px;margin:auto;padding:12px 18px 28px}.ocean-page>h1{font-size:clamp(22px,3vw,34px);color:#0c4d6d;margin:0}.ocean-page>p{margin:4px 0 12px}.ocean{--ink:#093e59;--cream:#fff9e9;--teal:#057796;--u:min(1cqw,1.77778cqh);position:relative;container-type:size;width:100%;aspect-ratio:16/9;border:4px solid #b38e43;border-radius:18px;background:#2099b5 url('./assets/ocean.webp') center/cover;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif;font-weight:900;overflow:hidden;isolation:isolate}.ocean *{box-sizing:border-box}.ocean [hidden]{display:none!important}.ocean button{font:inherit;color:var(--ink);background:#f7fcf3;border:2px solid #74b5bd;border-radius:20px;padding:.6em 1em;cursor:pointer;line-height:1.4;box-shadow:0 3px 0 #0847602b}.ocean button:hover{filter:brightness(1.06)}.ocean button:focus-visible{outline:4px solid #e78913;outline-offset:2px}.ocean button:disabled{cursor:default;opacity:.5}.ocean .primary{color:#fff;background:#087c9a;border-color:#edc670}.base{height:100%;display:flex;flex-direction:column}.game-tools{height:10%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 1.5%;background:#004966e8;color:#fff8db;border-bottom:3px solid #d5be7a;font-size:calc(var(--u)*1.25)}.game-tools>strong{font-size:calc(var(--u)*2.1);white-space:nowrap}.game-tools>div{display:flex;gap:calc(var(--u)*.45)}.game-tools button{padding:.35em .65em}.cover{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:56% 42%;gap:2%;padding:2.5%}.cover-art{position:relative;display:grid;place-items:center;min-width:0;min-height:0}.porthole{position:absolute;inset:0;min-height:0;min-width:0;width:100%;height:100%;object-fit:contain}.cover-turtle{position:absolute;width:37%;bottom:0;left:0;transform:rotate(-7deg)}.intro{border:4px solid #ccaf61;border-radius:24px;background:#f6fffaed;box-shadow:0 6px 0 #095a7122;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*1);padding:5%;text-align:center}.intro h2{font-size:calc(var(--u)*3.2);line-height:1.35;margin:0;color:#075677}.intro h2 span{color:#bd6203}.intro p{font-size:calc(var(--u)*1.4);line-height:1.6;margin:0}.intro .primary{font-size:calc(var(--u)*1.9)}.example{display:flex;align-items:center;justify-content:center;gap:12px}.example-code{font:700 calc(var(--u)*3.4) Fredoka,sans-serif;color:#ba5a00}.mini-chart{display:grid;grid-template-columns:12% repeat(5,1fr);grid-template-rows:12% repeat(5,1fr);aspect-ratio:1;width:calc(var(--u)*14);gap:1px}.mini-chart span{background:#d9f3f3;border:1px solid #7bb8bc;display:grid;place-items:center;font-family:Fredoka,sans-serif;font-size:calc(var(--u)*1.1)}.mini-chart .axis{background:transparent;border:none}.mini-chart .path{background:#ffe3a0}.mini-chart .cross{background:#e88a12}.play{flex:1;min-height:0;display:grid;grid-template-columns:58% 40%;gap:2%;padding:1.3% 2% 1.4%}.chart-block{display:grid;place-items:center;min-width:0;min-height:0}.chart{width:min(100%,78cqh);aspect-ratio:1;background:#e8edce url('./assets/chart.webp') center/100% 100%;border-radius:14px;padding:4%;display:grid;grid-template-columns:8% repeat(5,minmax(0,1fr));grid-template-rows:8% repeat(5,minmax(0,1fr));gap:4px;box-shadow:0 5px 15px #024e6d55}.axis{font:700 calc(var(--u)*2.3) Fredoka,sans-serif;color:#073e58;display:grid;place-items:center;background:#d8f2ed;border-radius:4px}.axis.highlight{color:#663800;background:#ffce70}.ocean .cell{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1;border:2px solid #277d8a;border-radius:7px;padding:6%;background:#ffffff21;box-shadow:inset 0 1px 4px #fff9;position:relative}.ocean .cell:disabled{opacity:1}.cell.hint{outline:4px solid #ffb224;outline-offset:-4px;background:#ffd26977}.cell.wrong{border:3px dashed #bd5c30}.cell.found{border:3px solid #ea9416;background:#fff0a855;box-shadow:inset 0 0 15px #fff3a2}.cell img{width:100%;height:100%;display:block;object-fit:contain}.instrument{min-width:0;min-height:0;display:grid;grid-template-rows:54% 17% 29%;gap:0}.coordinate-card{background:#fffceeeb;border:4px solid #c4a557;border-radius:22px;padding:4% 7%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.8);box-shadow:0 5px 0 #00617d44}.coordinate-card h2{font-size:calc(var(--u)*2);line-height:1.45;margin:0;text-align:center}.target{font:700 calc(var(--u)*6.3) / 1.5 Fredoka,sans-serif;color:#06394f;background:#e8f8ff;border:2px solid #9acdd5;border-radius:18px;width:90%;text-align:center;flex:none}.coordinate-guide{font-size:calc(var(--u)*1.45);text-align:center;line-height:1.6;margin:0}.coordinate-guide b{font-family:Fredoka,sans-serif;font-size:1.25em}.feedback{font-size:calc(var(--u)*1.55);line-height:1.55;text-align:center;margin:0;min-height:2.8em;display:grid;place-items:center;max-width:100%;color:#12516b}.feedback[data-kind=wrong]{color:#9f4726}.ocean[data-phase=found] .coordinate-card h2{color:#925205}.readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5%;align-items:center;padding:4% 2%}.reading{background:#edf9f5f5;border:3px solid #c3ac6d;border-radius:13px;padding:5%;text-align:center;display:flex;flex-direction:column}.reading span{font-size:calc(var(--u)*1.3)}.reading strong{font:700 calc(var(--u)*2.8)/1.1 Fredoka,sans-serif}.control-deck{display:grid;grid-template-columns:33% 67%;align-items:center;min-height:0}.deck-art{height:100%;min-height:0;position:relative}.deck-turtle{width:100%;height:100%;object-fit:contain}.deck-chest{position:absolute;width:46%;right:-5%;bottom:0}.deck-actions{padding:4%;display:grid;gap:calc(var(--u)*.7);font-size:calc(var(--u)*1.6)}.ocean .hint-button{background:#f3a535;color:#493019;border-color:#ffe5a4}.dialog{position:absolute;inset:0;z-index:10;background:#032d48bd;display:grid;place-items:center;padding:3%}.dialog-card{width:min(720px,90%);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:3%;border:5px solid #c1a565;border-radius:20px;background:#f3fff8;font-size:clamp(14px,1.7cqw,21px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-head h2{margin:0;font-size:1.4em}.dialog-card p{line-height:1.8;margin:10px 0}.dialog-card button{font-size:1em}.dialog-card #pausePanel{text-align:center}.pause-turtle{height:120px;max-height:23cqh;object-fit:contain;display:block;margin:10px auto}.dialog-card #settingsPanel{display:grid;gap:14px;padding-top:16px}.dialog-card input{width:100%;accent-color:#087b94}.parent-note{font-size:14px;line-height:1.8;padding:8px 2px;color:#315769}.ocean:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}
@media(max-width:600px) and (orientation:portrait){.ocean-page{padding:8px}.ocean{--u:1cqw;height:830px;aspect-ratio:auto;border-width:3px}.game-tools{height:73px;display:grid;align-content:center;gap:4px;padding:5px 8px}.game-tools>strong{font-size:19px}.game-tools button{font-size:10px;padding:5px 6px}.game-tools>div{gap:3px}.cover{grid-template-columns:1fr;grid-template-rows:41% 59%;gap:0;padding:3%}.cover-turtle{width:29%;left:15%}.intro{padding:4%;gap:10px}.intro h2{font-size:28px}.intro p{font-size:13px}.intro .primary{font-size:19px}.mini-chart{width:95px}.mini-chart span{font-size:11px}.example-code{font-size:32px}.play{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:12px;padding:9px 7px}.chart{width:100%;padding:4%;gap:3px}.axis{font-size:19px}.ocean .cell{border-radius:4px;border-width:1.5px}.instrument{grid-template-rows:54% 18% 28%}.coordinate-card{border-width:3px;padding:8px 12px;display:grid;grid-template-columns:40% 60%;grid-template-rows:auto auto auto;gap:3px}.coordinate-card h2{font-size:17px;grid-column:1/3}.target{font-size:48px;width:100%;grid-row:2;border-radius:13px;line-height:1.5}.coordinate-guide{font-size:13px;margin:0}.feedback{font-size:13px;grid-column:1/3;min-height:2.5em;line-height:1.4}.readings{padding:4px 2px;gap:8px}.reading{border-width:2px;padding:3px}.reading span{font-size:11px}.reading strong{font-size:24px}.deck-actions{font-size:14px;padding:3px;gap:6px}.control-deck{grid-template-columns:26% 74%}.deck-actions button{padding:.5em .6em}.dialog{padding:8px}.dialog-card{width:100%;padding:14px;font-size:14px}.ocean:fullscreen{height:100dvh}.ocean:fullscreen .chart{width:min(100%,45cqh)}.ocean:fullscreen .play{grid-template-rows:46% 54%;gap:0}.ocean:fullscreen .game-tools{height:66px}.ocean:fullscreen .instrument{grid-template-rows:54% 19% 27%}.ocean:fullscreen .cover{grid-template-rows:37% 63%}}
@media(orientation:landscape) and (max-height:520px){.intro{gap:4px;padding:3%}.intro h2{font-size:20px;line-height:1.2}.intro p{font-size:11px;line-height:1.35}.intro .primary{font-size:13px;padding:.55em}.mini-chart{width:70px}.mini-chart span{font-size:8px}.example-code{font-size:27px}.game-tools{font-size:max(9px,1.25cqw)}.game-tools button{font-size:max(9px,1.1cqw)}.coordinate-card h2{font-size:max(13px,2cqw)}.coordinate-guide{font-size:max(10px,1.45cqw)}.feedback{font-size:max(10px,1.55cqw)}.reading span{font-size:max(9px,1.3cqw)}.deck-actions{font-size:max(10px,1.6cqw)}.dialog-card{padding:2%;font-size:14px}.pause-turtle{height:70px}}