:root {
  color-scheme: dark;
  --ink: #f7fbff;
  --muted: #a9c3d8;
  --aqua: #62eff1;
  --cyan: #3ed0e0;
  --coral: #ff8b68;
  --gold: #ffd66b;
  --green: #8ce0a7;
  --deep: #041221;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 900px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--deep); }
button { color: inherit; font: inherit; }
button:not(:disabled) { cursor: pointer; }
:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ocean-game { position: relative; width: 100%; height: 100%; min-height: 650px; overflow: hidden; isolation: isolate; background: #06182b; }
.ocean-scroll { position: absolute; inset: 0; z-index: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: none; }
.ocean-scroll::-webkit-scrollbar { display: none; }
.ocean-column { position: relative; min-height: 4750px; background: #06182b url("assets/ocean-background-03.webp") center / 100% 100% no-repeat; }
.ocean-column::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(1,10,22,.48), transparent 21%, transparent 78%, rgba(1,10,22,.54)); }
.zone { position: relative; height: 950px; overflow: hidden; }

.mission { position: absolute; z-index: 30; top: 22px; left: 112px; width: 390px; min-height: 105px; padding: 16px 20px 15px; border: 1px solid rgba(180,225,244,.25); border-radius: 20px; background: rgba(4,22,38,.84); box-shadow: 0 16px 40px rgba(0,0,0,.22); backdrop-filter: blur(14px); pointer-events: none; }
.mission > span { color: var(--aqua); font-size: 11px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.mission h1 { margin: 3px 0 2px; font-size: 28px; line-height: 1.08; letter-spacing: -.04em; }
.mission p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 680; }
.mission-count { display: flex; gap: 6px; margin-top: 9px; }
.mission-count i { width: 24px; height: 5px; border-radius: 99px; background: #28465d; }
.mission-count i.is-done { background: var(--aqua); box-shadow: 0 0 12px rgba(98,239,241,.55); }

.mute { position: absolute; z-index: 45; top: 25px; right: 24px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(190,224,239,.36); border-radius: 50%; background: rgba(4,18,32,.89); box-shadow: 0 5px 0 #010914, 0 12px 25px rgba(0,0,0,.24); }
.mute svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sound-off { display: none; }
.mute[aria-pressed="true"] .sound-on { display: none; }
.mute[aria-pressed="true"] .sound-off { display: block; }

.depth-rail { position: absolute; z-index: 25; left: 23px; top: 152px; bottom: 31px; width: 67px; display: flex; flex-direction: column; align-items: center; padding: 13px 8px 12px; border: 1px solid rgba(177,225,244,.22); border-radius: 28px; background: rgba(3,18,33,.72); box-shadow: 0 14px 35px rgba(0,0,0,.22); backdrop-filter: blur(10px); pointer-events: none; }
.rail-track { position: relative; width: 8px; flex: 1; min-height: 280px; border-radius: 99px; background: linear-gradient(#66f1e8, #2876d8 31%, #172b6f 58%, #160d32 82%, #6f3c91); box-shadow: 0 0 0 4px rgba(255,255,255,.07), inset 0 1px 5px rgba(0,0,0,.45); }
.rail-track i { position: absolute; left: 50%; top: 0; width: 25px; height: 25px; border: 4px solid #fff; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,139,104,.2), 0 5px 12px rgba(0,0,0,.32); transform: translate(-50%,-2px); transition: top .08s linear; }
.depth-rail strong { margin-top: 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.depth-rail > span { margin-top: 2px; color: var(--aqua); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.rail-dots { position: absolute; top: 16px; right: 6px; bottom: 74px; display: flex; flex-direction: column; justify-content: space-between; }
.rail-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.45); }
.rail-dots i.is-visited { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.instrument { position: absolute; z-index: 25; top: 97px; right: 23px; width: 208px; padding: 11px; border: 1px solid rgba(177,225,244,.22); border-radius: 22px; background: rgba(3,18,33,.78); box-shadow: 0 14px 35px rgba(0,0,0,.24); backdrop-filter: blur(12px); pointer-events: none; }
.instrument-row { position: relative; padding: 8px 8px 9px; border-radius: 14px; transition: background .18s ease, transform .18s ease; }
.instrument-row + .instrument-row { margin-top: 2px; }
.instrument-row.is-focus { background: rgba(98,239,241,.13); transform: scale(1.04); }
.instrument-row > span { display: inline-flex; align-items: center; gap: 7px; color: #c4d9e8; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.instrument-row > strong { float: right; font-size: 11px; }
.instrument-row > div { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #102b40; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.instrument-row > div i { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .08s linear; }
#lightMeter { background: linear-gradient(90deg, #314d66, var(--gold)); }
#tempMeter { background: linear-gradient(90deg, #60d9ff, #ff9c6e); }
#pressureMeter { background: linear-gradient(90deg, #56d3e4, #a46fe0); }
.sun-icon, .temp-icon, .pressure-icon { width: 11px; height: 11px; display: inline-block; border: 2px solid currentColor; border-radius: 50%; }
.temp-icon { width: 5px; border-radius: 99px; }
.pressure-icon { border-radius: 2px; transform: rotate(45deg); }

.zone-gate { position: absolute; z-index: 6; left: 50%; top: 54px; min-width: 220px; padding: 9px 18px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(4,18,32,.52); text-align: center; transform: translateX(-50%); backdrop-filter: blur(8px); }
.zone-gate span { display: block; font-size: 14px; font-weight: 950; letter-spacing: .02em; }
.zone-gate strong { display: block; margin-top: 1px; color: #b8d7e9; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.zone:not(:first-child)::before { position: absolute; z-index: 4; top: 0; left: 10%; right: 10%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(112,225,239,.7), transparent); box-shadow: 0 0 16px rgba(91,219,233,.32); }

.animal { position: absolute; z-index: 5; min-width: 120px; min-height: 120px; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 16px 20px rgba(0,0,0,.3)); transition: transform .16s ease, filter .16s ease, opacity .2s ease; }
.animal img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.animal span { position: absolute; left: 50%; bottom: -6px; min-width: 70px; padding: 5px 9px; border-radius: 999px; color: #0b2637; background: #fff; box-shadow: 0 5px 12px rgba(0,0,0,.25); font-size: 10px; font-weight: 950; opacity: 0; transform: translate(-50%,5px); transition: .16s ease; }
.ocean-game[data-level="L2"] .animal span, .animal:hover span, .animal:focus-visible span { opacity: 1; transform: translate(-50%,0); }
.animal:hover, .animal:focus-visible { transform: translateY(-5px) scale(1.04); filter: drop-shadow(0 19px 25px rgba(0,0,0,.38)) drop-shadow(0 0 12px rgba(98,239,241,.22)); }
.animal.is-discovered { filter: drop-shadow(0 0 20px rgba(98,239,241,.65)); }
.dolphin { left: 24%; top: 245px; width: 270px; height: 180px; }
.dolphin img { animation: swim 5.8s ease-in-out infinite; }
.clownfish { right: 22%; top: 520px; width: 155px; height: 130px; }
.clownfish img { animation: bob 4.6s ease-in-out infinite; }
.swordfish { right: 7%; top: 230px; width: 210px; height: 150px; }
.swordfish img { animation: swim 6.4s ease-in-out infinite reverse; }
.jellyfish { left: 21%; top: 260px; width: 180px; height: 235px; }
.jellyfish img { animation: float 5.4s ease-in-out infinite; }
.lanternfish { right: 24%; top: 530px; width: 190px; height: 140px; filter: drop-shadow(0 0 14px rgba(59,231,255,.48)); }
.lanternfish img { animation: bob 4.8s ease-in-out infinite; }
.giant-squid { right: 4%; top: 190px; width: 310px; height: 230px; opacity: .82; }
.giant-squid img { animation: swim 7.2s ease-in-out infinite reverse; }
.anglerfish { left: 25%; top: 290px; width: 245px; height: 205px; opacity: .54; filter: brightness(.45) drop-shadow(0 18px 24px rgba(0,0,0,.48)); }
.midnight.is-revealed .anglerfish, .anglerfish.is-discovered { opacity: 1; filter: brightness(1) drop-shadow(0 0 30px rgba(255,211,93,.8)); animation: angler-whoa .75s cubic-bezier(.2,.85,.3,1.25) both; }
.gulper-eel { right: 16%; top: 535px; width: 260px; height: 185px; opacity: .78; }
.gulper-eel img { animation: swim 6.8s ease-in-out infinite; }
.tube-worms { left: 50%; top: 390px; width: 320px; height: 300px; transform: translateX(-50%); filter: drop-shadow(0 0 24px rgba(174,91,255,.28)); }
.tube-worms:hover, .tube-worms:focus-visible { transform: translateX(-50%) translateY(-5px) scale(1.04); }

.sun-rays { position: absolute; top: -30px; left: 25%; width: 50%; height: 570px; opacity: .5; clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); background: repeating-linear-gradient(102deg, transparent 0 11%, rgba(255,244,186,.15) 11% 15%, transparent 15% 25%); pointer-events: none; }
.scroll-nudge { position: absolute; z-index: 7; left: 50%; bottom: 58px; display: flex; flex-direction: column; align-items: center; gap: 9px; color: #d9f8fa; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transform: translateX(-50%); animation: nudge 1.5s ease-in-out infinite; }
.scroll-nudge i { width: 17px; height: 17px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); }
.bio-stars, .marine-snow { position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: radial-gradient(circle, #78f6ff 0 2px, transparent 2.8px); background-size: 92px 78px; }
.bio-stars::before, .marine-snow::before { position: absolute; inset: 0; content: ""; background: inherit; background-size: 133px 119px; transform: translate(47px,31px); opacity: .5; }
.marine-snow { opacity: .16; animation: snow 10s linear infinite; }
.squid-shadow { position: absolute; right: 8%; top: 350px; width: 300px; height: 180px; border-radius: 60% 30% 50% 40%; background: rgba(0,0,0,.22); filter: blur(12px); transform: rotate(-9deg); }
.not-empty { position: absolute; left: 50%; top: 56%; width: 300px; margin: 0; color: rgba(190,221,234,.68); font-size: 14px; font-weight: 700; text-align: center; transform: translateX(-50%); }
.pressure-rings { position: absolute; left: 50%; top: 53%; width: 620px; height: 350px; transform: translate(-50%,-50%); pointer-events: none; }
.pressure-rings i { position: absolute; inset: 0; border: 2px solid rgba(175,112,244,.22); border-radius: 50%; animation: pressure 2.8s ease-in-out infinite; }
.pressure-rings i:nth-child(2) { inset: 50px 85px; animation-delay: .35s; }.pressure-rings i:nth-child(3) { inset: 100px 170px; animation-delay: .7s; }

.fact-card { position: absolute; z-index: 48; left: 50%; bottom: 23px; width: 520px; min-height: 136px; display: grid; grid-template-columns: 112px 1fr 34px; gap: 14px; align-items: center; padding: 13px 15px 13px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 24px; background: rgba(4,20,35,.94); box-shadow: 0 22px 60px rgba(0,0,0,.48), 0 0 35px rgba(70,220,232,.1); backdrop-filter: blur(16px); animation: card-in .3s ease-out both; }
.fact-card > img { width: 112px; height: 105px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.fact-card span { color: var(--aqua); font-size: 10px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.fact-card h2 { margin: 2px 0 4px; font-size: 25px; letter-spacing: -.035em; }
.fact-card p { margin: 0; color: #c2d7e5; font-size: 13px; line-height: 1.38; }
.fact-card button { align-self: start; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.06); font-size: 23px; line-height: 1; }

.challenge-panel { position: absolute; z-index: 38; inset: 145px 95px 25px; overflow: hidden; border: 1px solid rgba(171,224,242,.25); border-radius: 30px; background: rgba(3,16,29,.88); box-shadow: 0 28px 80px rgba(0,0,0,.45); backdrop-filter: blur(18px); animation: panel-in .36s ease-out both; }
.placement-panel { display: grid; grid-template-columns: minmax(520px,1fr) 270px; gap: 20px; padding: 21px; }
.depth-map { display: grid; grid-template-rows: repeat(5,1fr); min-height: 470px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.16); }
.drop-zone { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 12px 22px; border: 0; border-bottom: 1px solid rgba(255,255,255,.11); background: transparent; text-align: left; transition: filter .15s ease, box-shadow .15s ease; }
.drop-zone:last-child { border-bottom: 0; }
.drop-zone[data-zone="sunlit"] { background: linear-gradient(90deg, rgba(34,201,218,.48), rgba(38,133,190,.28)); }
.drop-zone[data-zone="twilight"] { background: linear-gradient(90deg, rgba(31,119,190,.48), rgba(20,73,138,.28)); }
.drop-zone[data-zone="midnight"] { background: linear-gradient(90deg, rgba(19,52,106,.7), rgba(11,31,75,.44)); }
.drop-zone[data-zone="abyss"] { background: linear-gradient(90deg, rgba(12,29,65,.82), rgba(9,19,44,.68)); }
.drop-zone[data-zone="trench"] { background: linear-gradient(90deg, rgba(17,14,45,.9), rgba(67,30,84,.5)); }
.drop-zone span { font-size: 18px; font-weight: 950; }
.drop-zone small { color: #c5d9e6; font-size: 11px; font-weight: 800; }
.drop-zone.drag-over, .drop-zone.is-selected { box-shadow: inset 0 0 0 4px var(--gold); filter: brightness(1.25); }
.drop-zone.is-wrong { animation: shake .34s ease; box-shadow: inset 0 0 0 4px var(--coral); }
.placed-mini { width: 76px; height: 62px; margin-left: auto; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); animation: creature-land .45s cubic-bezier(.2,.8,.25,1.25) both; }
.token-tray { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 12px; }
.animal-token { min-height: 112px; display: grid; grid-template-columns: 108px 1fr; align-items: center; padding: 8px 14px 8px 7px; border: 1px solid rgba(184,226,241,.22); border-radius: 19px; background: rgba(11,39,59,.86); box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .14s ease, border-color .14s ease; }
.animal-token:hover, .animal-token:focus-visible, .animal-token.is-selected { transform: translateY(-3px); border-color: var(--gold); }
.animal-token img { width: 108px; height: 92px; object-fit: contain; pointer-events: none; }
.animal-token span { font-size: 14px; font-weight: 950; }
.animal-token.is-placed { opacity: 0; pointer-events: none; transform: scale(.7); }
.drag-help { position: absolute; right: 27px; bottom: 17px; width: 250px; margin: 0; color: #91acbe; font-size: 11px; text-align: center; }

.reason-panel { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(430px, 1.1fr); gap: 34px; align-items: center; padding: 34px 56px; }
.survivor-card { text-align: center; }
.survivor-card > span { color: var(--aqua); font-size: 11px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.survivor-card img { display: block; width: 250px; height: 230px; margin: 2px auto 0; object-fit: contain; filter: drop-shadow(0 0 28px rgba(69,222,232,.26)); }
.survivor-card h2 { margin: -7px 0 4px; font-size: 31px; letter-spacing: -.045em; }
.survivor-card p { margin: 0 0 16px; color: #bfd4e2; font-size: 14px; }
.reason-target { min-height: 64px; display: grid; place-items: center; max-width: 330px; margin: 0 auto; padding: 12px; border: 2px dashed rgba(140,224,167,.5); border-radius: 17px; color: #a7c1d2; background: rgba(15,45,62,.62); font-size: 12px; font-weight: 850; transition: .16s ease; }
.reason-target.drag-over { color: #102c25; border-style: solid; border-color: var(--green); background: var(--green); transform: scale(1.03); }
.reason-target.is-wrong { animation: shake .34s ease; border-color: var(--coral); }
.reason-target.is-correct { color: #103321; border-style: solid; border-color: var(--green); background: var(--green); }
.reason-tray { display: flex; flex-direction: column; gap: 16px; }
.reason-chip { min-height: 78px; padding: 17px 21px; border: 1px solid rgba(184,226,241,.24); border-radius: 20px; color: #e8f5fa; background: rgba(12,42,62,.88); box-shadow: 0 6px 0 rgba(0,0,0,.28); font-size: 16px; font-weight: 900; text-align: left; transition: transform .14s ease, border-color .14s ease; }
.reason-chip::before { display: inline-grid; width: 32px; height: 32px; margin-right: 12px; place-items: center; border-radius: 50%; color: #12313d; background: var(--aqua); content: "↘"; }
.reason-chip:hover, .reason-chip:focus-visible, .reason-chip.is-selected { transform: translateY(-3px); border-color: var(--gold); }

.success-card, .finish-card { position: absolute; z-index: 70; left: 50%; top: 50%; width: 440px; padding: 29px 32px 28px; border: 1px solid rgba(255,255,255,.25); border-radius: 28px; background: rgba(4,21,36,.97); box-shadow: 0 30px 100px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.08); text-align: center; transform: translate(-50%,-50%); backdrop-filter: blur(18px); }
.success-card::before, .finish-card::before { position: fixed; z-index: -1; inset: -100vh -100vw; content: ""; background: rgba(0,7,15,.48); }
.success-mark { display: grid; width: 66px; height: 66px; margin: -4px auto 14px; place-items: center; border-radius: 50%; color: #0a3c27; background: var(--green); box-shadow: 0 0 0 10px rgba(140,224,167,.1), 0 0 46px rgba(140,224,167,.34); font-size: 34px; font-weight: 950; animation: success-pop .5s cubic-bezier(.2,.9,.25,1.3) both; }
.success-card > span, .finish-card > span { color: var(--aqua); font-size: 11px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.success-card h2, .finish-card h2 { margin: 5px 0 8px; font-size: 34px; line-height: 1.06; letter-spacing: -.045em; }
.success-card p, .finish-card p { margin: 0 auto 22px; max-width: 340px; color: var(--muted); line-height: 1.48; }
.success-card button, .finish-card button { min-width: 190px; min-height: 52px; padding: 11px 20px; border: 0; border-radius: 16px; color: #102d36; background: var(--gold); box-shadow: 0 6px 0 #a77a20; font-weight: 950; }
.success-card button:hover, .finish-card button:hover { transform: translateY(-2px); }
.finish-glow { width: 80px; height: 80px; margin: -5px auto 13px; border: 2px solid #53eff1; border-radius: 50%; background: radial-gradient(circle, #fff 0 5%, #ffd86c 6% 12%, #162b49 13% 48%, #061323 49%); box-shadow: 0 0 45px rgba(83,239,241,.5); }

.toast { position: absolute; z-index: 82; left: 50%; bottom: 28px; max-width: 410px; padding: 11px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #102a39; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.42); font-size: 13px; font-weight: 900; opacity: 0; transform: translate(-50%,10px); pointer-events: none; transition: .18s ease; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.confetti { position: absolute; z-index: 68; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -24px; width: 9px; height: 17px; border-radius: 3px; animation: confetti-fall 1.5s cubic-bezier(.2,.7,.45,1) forwards; }

@keyframes swim { 50% { translate: 18px -8px; } }
@keyframes bob { 50% { translate: -8px 12px; rotate: -2deg; } }
@keyframes float { 50% { translate: 6px -18px; scale: 1.03 .97; } }
@keyframes nudge { 50% { transform: translate(-50%,10px); opacity: .62; } }
@keyframes snow { to { background-position: 0 156px; } }
@keyframes pressure { 50% { transform: scale(.93); opacity: .58; } }
@keyframes angler-whoa { from { transform: scale(.72); } to { transform: scale(1); } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
@keyframes creature-land { from { opacity: 0; transform: scale(.35) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes success-pop { from { opacity: 0; transform: scale(.45) rotate(-18deg); } to { opacity: 1; transform: scale(1); } }
@keyframes confetti-fall { to { transform: translate(var(--drift),108vh) rotate(540deg); opacity: .15; } }

@media (max-height: 760px) {
  .mission { top: 14px; min-height: 92px; padding-top: 12px; padding-bottom: 12px; }
  .mission h1 { font-size: 24px; }
  .instrument { top: 76px; }
  .depth-rail { top: 128px; bottom: 18px; }
  .challenge-panel { top: 119px; bottom: 17px; }
  .placement-panel { padding: 15px; }
  .animal-token { min-height: 98px; }
  .survivor-card img { width: 210px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}