:root {
  /* Design tokens: Interaction quest-based: rotating compass-shell Space Grotesk** for compact labels. */
  --abyss-ink: #001B2E;
  --tide-teal: #00C2A8;
  --foam-pearl: #E9FFFC;
  --coral-signal: #FF6B6B;
  --sunken-gold: #F4D35E;
  --kelp-green: #0B6E4F;
  --biolume-violet: #7B61FF;
  --display: Chonburi, Georgia, 'Times New Roman', serif;
  --kr: 'Noto Serif KR', 'Apple SD Gothic Neo', 'Malgun Gothic', Georgia, serif;
  --space: 'Space Grotesk', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--abyss-ink); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--foam-pearl);
  font-family: var(--space);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 4%, rgba(244, 211, 94, .42), transparent 18rem),
    radial-gradient(circle at 82% 90%, rgba(123, 97, 255, .48), transparent 26rem),
    linear-gradient(142deg, #E9FFFC 0%, #00C2A8 13%, #0B6E4F 34%, #001B2E 68%, #00101c 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

body::before {
  background-image:
    radial-gradient(circle, rgba(233, 255, 252, .55) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(0, 194, 168, .4) 0 1px, transparent 2px);
  background-size: 7rem 11rem, 13rem 17rem;
  animation: driftBubbles 22s linear infinite;
  opacity: .55;
}

body::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 27, 46, .35) 42%, rgba(0, 27, 46, .84) 100%);
  mix-blend-mode: multiply;
}

.caustics {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 1;
  opacity: .32;
  background:
    repeating-radial-gradient(ellipse at 20% 10%, transparent 0 2.2rem, rgba(233, 255, 252, .55) 2.35rem 2.55rem, transparent 2.75rem 4.8rem),
    repeating-linear-gradient(116deg, transparent 0 3rem, rgba(244, 211, 94, .14) 3.2rem 3.45rem, transparent 3.7rem 7rem);
  filter: blur(2px);
  animation: causticDrift 18s ease-in-out infinite alternate;
}

.pressure-haze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at 52% 40%, transparent 0 22rem, rgba(0, 27, 46, .22) 40rem),
    linear-gradient(90deg, rgba(0, 27, 46, .36), transparent 24%, transparent 70%, rgba(0, 27, 46, .45));
}

.plankton-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.plankton {
  position: absolute;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: var(--tide-teal);
  box-shadow: 0 0 14px var(--tide-teal), 0 0 30px var(--biolume-violet);
  animation: planktonRise var(--rise, 12s) ease-in-out infinite;
  opacity: .65;
}

.quest-scroll { position: relative; z-index: 5; }

.chamber {
  min-height: 112vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8vh 7vw;
  isolation: isolate;
}

.chamber::before {
  content: attr(data-depth);
  position: absolute;
  left: 4vw;
  bottom: 9vh;
  color: rgba(233, 255, 252, .08);
  font: 900 clamp(4rem, 14vw, 14rem) / .75 var(--display);
  letter-spacing: -.08em;
  text-transform: uppercase;
  z-index: -1;
}

.route-map {
  position: fixed;
  left: -8vw;
  top: 5vh;
  width: 78vw;
  height: 86vh;
  z-index: 4;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 0 18px rgba(0, 194, 168, .35));
}

.route-path,
.lit-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-path { stroke: rgba(233, 255, 252, .16); stroke-width: 7; stroke-dasharray: 2 20; }
.lit-path { stroke: var(--tide-teal); stroke-width: 4; stroke-dasharray: 1200; stroke-dashoffset: 1200; }

.compass-shell {
  position: fixed;
  right: clamp(1rem, 3vw, 3rem);
  top: clamp(1rem, 4vh, 3rem);
  width: 6.3rem;
  height: 6.3rem;
  z-index: 12;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--foam-pearl), var(--sunken-gold) 30%, var(--coral-signal) 58%, rgba(0, 27, 46, .9) 61%);
  box-shadow: 0 0 0 1px rgba(233, 255, 252, .32), 0 0 34px rgba(244, 211, 94, .38);
  transition: transform .12s linear;
}

.compass-shell::before {
  content: "";
  position: absolute;
  inset: .8rem;
  border-radius: 50%;
  border: 2px dashed rgba(0, 27, 46, .75);
}

.compass-ring { position: absolute; inset: 0; border-radius: inherit; animation: shellPulse 4s ease-in-out infinite; }
.compass-ring span { position: absolute; width: .25rem; height: 1rem; left: calc(50% - .125rem); top: .45rem; background: var(--abyss-ink); border-radius: 1rem; transform-origin: 50% 2.7rem; }
.compass-ring span:nth-child(2) { transform: rotate(90deg); }
.compass-ring span:nth-child(3) { transform: rotate(180deg); }
.compass-ring span:nth-child(4) { transform: rotate(270deg); }
.compass-core { font: 700 .85rem var(--kr); color: var(--abyss-ink); letter-spacing: .18em; z-index: 1; }

.route-label {
  margin: 0 0 .8rem;
  color: var(--sunken-gold);
  font: 700 .72rem var(--space);
  text-transform: uppercase;
  letter-spacing: .24em;
}

h1, h2 { font-family: var(--display); font-weight: 900; margin: 0; letter-spacing: -.055em; }
h1 { font-size: clamp(5.2rem, 18vw, 18rem); line-height: .68; color: var(--foam-pearl); text-shadow: 0 1.5rem 0 rgba(0, 27, 46, .18), 0 0 42px rgba(233, 255, 252, .24); }
h2 { font-size: clamp(3.1rem, 9vw, 8.6rem); line-height: .82; color: var(--foam-pearl); text-shadow: 0 0 35px rgba(0, 194, 168, .22); }

p { font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.75; }
.korean-rune { font-family: var(--kr); color: var(--foam-pearl); letter-spacing: .34em; text-shadow: 0 0 18px rgba(0, 194, 168, .8); }

.chamber-hero { place-items: start; align-content: center; background: radial-gradient(circle at 5% 2%, rgba(233, 255, 252, .9), transparent 16rem); }
.hero-mark { margin-left: 4vw; max-width: 78rem; transform: rotate(-4deg); }
.foam-band { position: absolute; inset: 0 auto auto 0; width: 72vw; height: 30vh; background: radial-gradient(ellipse at 18% 0, rgba(233, 255, 252, .9), transparent 56%), repeating-linear-gradient(-10deg, rgba(233, 255, 252, .55) 0 .6rem, transparent .8rem 2.2rem); filter: blur(1px); opacity: .75; clip-path: polygon(0 0, 100% 0, 78% 47%, 45% 65%, 0 45%); }
.bottle-fragment { position: absolute; right: 10vw; bottom: 14vh; padding: 1.1rem 1.7rem; color: var(--abyss-ink); background: rgba(233, 255, 252, .72); border: 2px solid rgba(244, 211, 94, .75); transform: rotate(9deg); clip-path: polygon(9% 0, 100% 13%, 94% 100%, 0 86%); box-shadow: 0 1rem 3rem rgba(0, 27, 46, .28); }
.bottle-fragment span { font-family: var(--kr); }

.message-shell {
  position: relative;
  width: min(38rem, 88vw);
  padding: clamp(1.6rem, 4vw, 3.5rem);
  border: 1px solid rgba(233, 255, 252, .28);
  border-radius: 45% 55% 49% 51% / 24% 31% 69% 76%;
  background: linear-gradient(145deg, rgba(0, 27, 46, .74), rgba(11, 110, 79, .4)), radial-gradient(circle at 20% 10%, rgba(233, 255, 252, .21), transparent 15rem);
  box-shadow: inset 0 0 3rem rgba(0, 194, 168, .12), 0 1.8rem 5rem rgba(0, 10, 18, .42);
  backdrop-filter: blur(5px);
  transform: translateY(3rem) scale(.97);
  opacity: .55;
  transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .9s ease, border-color .9s ease;
}

.chamber.in-view .message-shell { transform: translateY(0) scale(1); opacity: 1; border-color: rgba(0, 194, 168, .72); }
.message-shell::after { content: "바다"; position: absolute; right: 2rem; top: 1.2rem; font: 900 4.5rem var(--kr); color: rgba(233, 255, 252, .06); letter-spacing: -.14em; }
.message-shell p:last-child { margin-bottom: 0; }
.angled { transform: translateY(3rem) rotate(-5deg) scale(.97); }
.chamber.in-view .angled { transform: rotate(-5deg) scale(1); }
.wide { width: min(54rem, 88vw); }

.tide-gate { justify-items: end; background: radial-gradient(circle at 82% 50%, rgba(255, 107, 107, .18), transparent 22rem); }
.coral-gate { position: absolute; bottom: 12vh; width: 11rem; height: 56vh; background: var(--coral-signal); opacity: .72; filter: drop-shadow(0 0 22px rgba(255, 107, 107, .38)); clip-path: polygon(44% 100%, 52% 66%, 34% 52%, 49% 45%, 42% 23%, 60% 41%, 71% 12%, 69% 52%, 91% 37%, 75% 61%, 91% 76%, 63% 70%, 57% 100%); }
.coral-gate.left { left: 7vw; transform: scaleX(-1) rotate(-8deg); }
.coral-gate.right { left: 23vw; transform: rotate(7deg) scale(.8); background: var(--sunken-gold); opacity: .45; }
.pearl-row { display: flex; gap: .7rem; margin-top: 1.5rem; }
.pearl-row i { width: .75rem; height: .75rem; border-radius: 50%; background: rgba(233, 255, 252, .28); box-shadow: 0 0 0 transparent; transition: background .3s, box-shadow .3s, transform .3s; }
.pearl-row i.lit { background: var(--foam-pearl); box-shadow: 0 0 16px var(--sunken-gold); transform: translateY(-.25rem); }

.kelp-labyrinth { justify-items: start; background: radial-gradient(circle at 20% 45%, rgba(11, 110, 79, .6), transparent 28rem); }
.kelp-curtain { position: absolute; top: 0; bottom: 0; width: 21vw; min-width: 10rem; background: linear-gradient(90deg, rgba(11, 110, 79, .9), rgba(0, 194, 168, .1)); clip-path: polygon(0 0, 67% 0, 50% 13%, 82% 27%, 58% 43%, 88% 65%, 53% 84%, 72% 100%, 0 100%); transition: transform 1s cubic-bezier(.2,.8,.2,1); opacity: .78; }
.curtain-a { left: 0; }
.curtain-b { right: 0; transform: scaleX(-1); }
.kelp-open .curtain-a { transform: translateX(-48%); }
.kelp-open .curtain-b { transform: translateX(48%) scaleX(-1); }
.shell-button { margin-top: 1rem; border: 1px solid var(--sunken-gold); color: var(--abyss-ink); background: var(--sunken-gold); border-radius: 999px; padding: .9rem 1.2rem; font: 800 .76rem var(--space); letter-spacing: .17em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 26px rgba(244, 211, 94, .3); }
.fish-arrow { position: absolute; right: 12vw; top: 44%; display: flex; gap: 1.1rem; transform: rotate(-18deg); }
.fish-arrow span, .stone-fish { width: 2.3rem; height: 1rem; background: var(--foam-pearl); opacity: .62; clip-path: polygon(0 50%, 22% 0, 78% 8%, 100% 50%, 78% 92%, 22% 100%); }
.fish-arrow span { animation: fishPulse 2.8s ease-in-out infinite; }
.fish-arrow span:nth-child(2) { animation-delay: .2s; } .fish-arrow span:nth-child(3) { animation-delay: .4s; } .fish-arrow span:nth-child(4) { animation-delay: .6s; } .fish-arrow span:nth-child(5) { animation-delay: .8s; }

.coral-cipher { background: radial-gradient(circle at 50% 50%, rgba(123, 97, 255, .26), transparent 27rem); }
.cipher-card { margin-left: 20vw; }
.cipher-line { display: flex; gap: .4rem; margin-top: 1.2rem; font: 900 2.6rem var(--kr); color: var(--tide-teal); }
.cipher-line span { opacity: .25; transform: translateY(.6rem); transition: opacity .5s ease, transform .5s ease, text-shadow .5s ease; }
.chamber.in-view .cipher-line span { opacity: 1; transform: translateY(0); text-shadow: 0 0 16px var(--tide-teal); }
.cipher-line span:nth-child(2) { transition-delay: .16s; } .cipher-line span:nth-child(3) { transition-delay: .32s; } .cipher-line span:nth-child(4) { transition-delay: .48s; }
.glyph-trace { position: absolute; left: 7vw; bottom: 18vh; width: min(34rem, 58vw); height: auto; overflow: visible; }
.glyph-trace path { fill: none; stroke: var(--coral-signal); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; filter: drop-shadow(0 0 16px rgba(255, 107, 107, .5)); transition: stroke-dashoffset 1.5s ease; }
.chamber.in-view .glyph-trace path { stroke-dashoffset: 0; }
.glyph-trace path:nth-child(2) { stroke: var(--sunken-gold); transition-delay: .35s; }

.whale-road { overflow: hidden; background: radial-gradient(ellipse at 50% 35%, rgba(0, 194, 168, .12), transparent 29rem); }
.whale-shadow { position: absolute; top: 22vh; left: -28vw; width: 62vw; height: 26vh; border-radius: 54% 46% 46% 54%; background: rgba(0, 8, 16, .58); filter: blur(10px); clip-path: polygon(0 50%, 15% 25%, 58% 10%, 86% 36%, 100% 19%, 92% 50%, 100% 83%, 85% 65%, 58% 90%, 15% 75%); animation: whaleCross 18s ease-in-out infinite; }
.stone-fish { position: absolute; background: rgba(233, 255, 252, .32); width: 6rem; height: 2.4rem; }
.fish-a { left: 10vw; bottom: 20vh; transform: rotate(14deg); }
.fish-b { right: 15vw; top: 22vh; transform: rotate(-11deg) scale(.7); }

.abyss-lantern { background: radial-gradient(circle at 72% 38%, rgba(123, 97, 255, .52), transparent 23rem), linear-gradient(180deg, transparent, rgba(0, 8, 18, .64)); }
.lantern-card { margin-right: 22vw; }
.jellyfish { position: absolute; width: 9rem; height: 10rem; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 50% 25%, var(--foam-pearl), rgba(123, 97, 255, .75) 42%, rgba(123, 97, 255, .08) 70%); box-shadow: 0 0 40px rgba(123, 97, 255, .65); animation: jellyDrift 7s ease-in-out infinite; }
.jellyfish::before, .jellyfish::after, .jellyfish i { content: ""; position: absolute; top: 72%; width: .18rem; height: 8rem; background: linear-gradient(var(--tide-teal), transparent); border-radius: 1rem; }
.jellyfish::before { left: 35%; } .jellyfish::after { left: 53%; } .jellyfish i { left: 68%; }
.lantern-one { left: 13vw; top: 15vh; }
.lantern-two { right: 13vw; bottom: 20vh; transform: scale(.66); animation-delay: -2s; }
.bubble-string { display: flex; gap: .55rem; margin-top: 1.4rem; }
.bubble-string b { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--tide-teal); animation: bubblePop 2.4s ease-in-out infinite; }
.bubble-string b:nth-child(2) { animation-delay: .2s; } .bubble-string b:nth-child(3) { animation-delay: .4s; } .bubble-string b:nth-child(4) { animation-delay: .6s; } .bubble-string b:nth-child(5) { animation-delay: .8s; }

.moonpool-prize { min-height: 118vh; background: radial-gradient(circle at 66% 48%, rgba(244, 211, 94, .32), transparent 16rem), radial-gradient(circle at 66% 48%, rgba(0, 194, 168, .42), transparent 25rem), rgba(0, 27, 46, .32); }
.moonpool-glow { position: absolute; right: 7vw; bottom: 13vh; width: 44vw; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(233, 255, 252, .22); background: radial-gradient(circle, rgba(233, 255, 252, .7) 0 3%, rgba(0, 194, 168, .35) 4% 22%, rgba(123, 97, 255, .2) 23% 46%, transparent 47%); box-shadow: 0 0 80px rgba(0, 194, 168, .45), inset 0 0 80px rgba(123, 97, 255, .32); z-index: -1; animation: moonpoolSpin 18s linear infinite; }
.final-seal { position: relative; width: min(42rem, 90vw); min-height: 31rem; display: grid; place-items: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, rgba(0, 27, 46, .86) 0 45%, rgba(244, 211, 94, .8) 46% 48%, rgba(255, 107, 107, .34) 49% 55%, rgba(0, 27, 46, .72) 56%); border: 2px solid rgba(244, 211, 94, .66); box-shadow: 0 0 72px rgba(244, 211, 94, .35), inset 0 0 70px rgba(0, 194, 168, .24); overflow: hidden; }
.final-seal h2 { font-size: clamp(3rem, 8vw, 6.5rem); color: var(--sunken-gold); text-shadow: 0 0 30px rgba(244, 211, 94, .5); z-index: 2; }
.final-rune { margin: -2rem 0 0; z-index: 2; }
.coin { position: absolute; width: 48%; height: 48%; border: 1px solid rgba(244, 211, 94, .3); background: rgba(244, 211, 94, .08); transition: transform 1.2s cubic-bezier(.18,.9,.2,1), opacity .8s; opacity: .2; }
.coin-a { left: 0; top: 0; border-radius: 100% 0 0 0; transform: translate(-45%, -42%) rotate(-35deg); }
.coin-b { right: 0; top: 0; border-radius: 0 100% 0 0; transform: translate(45%, -42%) rotate(35deg); }
.coin-c { bottom: 0; left: 26%; border-radius: 0 0 100% 100%; transform: translateY(55%) rotate(18deg); }
.chamber.in-view .coin { transform: translate(0, 0) rotate(0deg); opacity: 1; }

.shell-marker { position: absolute; width: 3.1rem; height: 3.1rem; display: grid; place-items: center; border-radius: 50%; color: var(--abyss-ink); background: var(--foam-pearl); font: 900 .72rem var(--space); letter-spacing: .1em; box-shadow: 0 0 0 .25rem rgba(0, 194, 168, .18), 0 0 22px rgba(0, 194, 168, .4); transition: background .4s, transform .4s, box-shadow .4s; }
.shell-marker.active { background: var(--sunken-gold); transform: scale(1.18) rotate(18deg); box-shadow: 0 0 0 .45rem rgba(244, 211, 94, .2), 0 0 35px rgba(244, 211, 94, .65); }
.marker-one { left: 11vw; top: 22vh; } .marker-two { left: 31vw; top: 19vh; } .marker-three { left: 16vw; bottom: 24vh; } .marker-four { right: 25vw; top: 19vh; } .marker-five { left: 22vw; bottom: 16vh; } .marker-six { right: 20vw; top: 23vh; }

@keyframes causticDrift { from { transform: translate3d(-2%, -1%, 0) rotate(-2deg); } to { transform: translate3d(3%, 2%, 0) rotate(2deg); } }
@keyframes driftBubbles { from { background-position: 0 0, 2rem 5rem; } to { background-position: 0 -42rem, -8rem -52rem; } }
@keyframes planktonRise { 0%,100% { transform: translate3d(0, 0, 0) scale(.8); opacity: .2; } 45% { transform: translate3d(1.5rem, -6rem, 0) scale(1.25); opacity: .9; } }
@keyframes shellPulse { 50% { transform: scale(1.08); filter: brightness(1.15); } }
@keyframes fishPulse { 50% { transform: translateX(1rem); opacity: 1; } }
@keyframes whaleCross { 0% { transform: translateX(0) scale(.95); opacity: 0; } 22% { opacity: .62; } 70% { opacity: .48; } 100% { transform: translateX(142vw) scale(1.15); opacity: 0; } }
@keyframes jellyDrift { 50% { transform: translateY(2rem) translateX(.8rem); } }
@keyframes bubblePop { 50% { transform: translateY(-.8rem); box-shadow: 0 0 16px var(--tide-teal); } }
@keyframes moonpoolSpin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .route-map { width: 118vw; left: -34vw; opacity: .5; }
  .compass-shell { width: 4.8rem; height: 4.8rem; }
  .hero-mark { margin-left: 0; }
  .message-shell, .cipher-card, .lantern-card { margin: 0; }
  .coral-gate, .stone-fish, .fish-arrow { opacity: .28; }
  .moonpool-glow { width: 82vw; right: -10vw; }
}