:root {
  /* Design typography compliance: Inter** from Google Fonts for clean flat-design readability; Interpret flat design with unusually rich composition: hard-edged shapes; Roboto Flex so headings squeeze while “loading” and expand when solved. Use Recursive for tiny coordinate labels that tick from placeholder bars into readable text. Roboto Flex** from Google Fonts. Animate width. */
  --abyss: #031A2E;
  --current: #073B5A;
  --cyan: #11F5D2;
  --ultra: #335CFF;
  --lime: #B8FF4D;
  --coral: #FF6B6B;
  --foam: #EAFDFF;
  --violet: #28115C;
  --gradient-band: linear-gradient(120deg, #031A2E 0%, #073B5A 48%, #28115C 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: #031A2E;
  color: #EAFDFF;
  font-family: "Inter", system-ui, sans-serif;
}

.lagoon {
  position: relative;
  min-height: 400vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 6%, rgba(51, 92, 255, .34), transparent 22rem),
    radial-gradient(circle at 86% 22%, rgba(40, 17, 92, .7), transparent 28rem),
    radial-gradient(circle at 52% 72%, rgba(17, 245, 210, .13), transparent 36rem),
    var(--gradient-band);
}

.ocean-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(234, 253, 255, .035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(17, 245, 210, .025) 0 1px, transparent 1px 13px);
  mask-image: linear-gradient(180deg, black, rgba(0,0,0,.55));
}

.wave-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.wave-skeleton,
.wave-solved {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wave-skeleton {
  stroke: rgba(234, 253, 255, .22);
  stroke-width: 20;
  stroke-dasharray: 54 42 8 35;
  animation: skeletonTide 2.1s linear infinite;
}
.wave-solved {
  stroke: #11F5D2;
  stroke-width: 10;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  path-length: 1;
  filter: url(#neonPulse);
}
@keyframes skeletonTide { to { stroke-dashoffset: -139; } }

.tide-gauge {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: clamp(.7rem, 2.5vw, 2rem);
  transform: translateY(-50%);
  display: grid;
  gap: .95rem;
}
.tide-gauge::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 1rem;
  bottom: 1rem;
  width: 3px;
  background: linear-gradient(#335CFF, #11F5D2, #B8FF4D);
  box-shadow: 0 0 18px rgba(17,245,210,.55);
}
.gauge-marker {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(234,253,255,.52);
  text-decoration: none;
  font-family: "Recursive", monospace;
  font-size: .73rem;
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 760;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.marker-symbol {
  width: 2.55rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: transparent;
  background:
    linear-gradient(90deg, rgba(234,253,255,.12), rgba(234,253,255,.42), rgba(234,253,255,.12)) 0 0 / 220% 100%,
    #073B5A;
  border: 2px solid rgba(234,253,255,.18);
  clip-path: polygon(0 10%, 62% 10%, 62% 0, 86% 0, 86% 12%, 100% 12%, 100% 88%, 84% 88%, 84% 100%, 60% 100%, 60% 90%, 0 90%);
  animation: markerLoad 1.35s linear infinite;
}
.gauge-marker.active { color: #EAFDFF; }
.gauge-marker.active .marker-symbol {
  color: #031A2E;
  background: #B8FF4D;
  border-color: #11F5D2;
  box-shadow: 0 0 0 .22rem rgba(17,245,210,.14), 0 0 24px rgba(184,255,77,.7);
  animation: markerPop .55s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes markerLoad { to { background-position: -220% 0, 0 0; } }
@keyframes markerPop { 45% { transform: scale(1.18) rotate(-5deg); } }

.basin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 7vw, 8rem) clamp(4rem, 8vw, 7rem) clamp(4.2rem, 10vw, 11rem);
}
.shoreline {
  position: absolute;
  inset: 7vh 6vw;
  z-index: -1;
  opacity: .78;
  background: rgba(7, 59, 90, .7);
  border: 2px solid rgba(17, 245, 210, .32);
  box-shadow: inset 0 0 0 1.2rem rgba(51, 92, 255, .08), 0 0 2.4rem rgba(17,245,210,.12);
}
.shoreline-one { clip-path: polygon(8% 22%, 30% 8%, 56% 12%, 82% 4%, 96% 32%, 88% 70%, 64% 92%, 28% 86%, 4% 68%); }
.shoreline-two { clip-path: polygon(0 30%, 22% 8%, 62% 0, 100% 20%, 91% 77%, 72% 100%, 34% 87%, 7% 95%); background: rgba(51,92,255,.34); }
.shoreline-three { clip-path: polygon(16% 6%, 48% 0, 76% 9%, 100% 42%, 82% 96%, 46% 84%, 18% 100%, 0 54%); background: rgba(40,17,92,.78); }
.shoreline-four { clip-path: polygon(10% 12%, 50% 0, 90% 14%, 100% 57%, 78% 94%, 42% 100%, 4% 76%, 0 36%); background: rgba(7,59,90,.84); }

.coordinate {
  position: absolute;
  top: 14vh;
  left: clamp(5rem, 11vw, 12rem);
  padding: .5rem .72rem;
  background: #11F5D2;
  color: #031A2E;
  font-family: "Recursive", monospace;
  font-size: .76rem;
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 820;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.coordinate.violet { background: #28115C; color: #EAFDFF; border: 1px solid #11F5D2; }

.empty-ocean {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.skeleton-piece {
  position: absolute;
  display: block;
  width: clamp(4rem, 9vw, 8rem);
  height: clamp(4rem, 9vw, 8rem);
  background: linear-gradient(90deg, rgba(234,253,255,.08), rgba(234,253,255,.38), rgba(234,253,255,.08)) 0 0 / 230% 100%, rgba(7,59,90,.85);
  border: 2px solid rgba(234,253,255,.13);
  clip-path: polygon(0 0, 40% 0, 50% 16%, 62% 0, 100% 0, 100% 38%, 84% 50%, 100% 62%, 100% 100%, 0 100%, 0 63%, 15% 51%, 0 39%);
  animation: pieceLoad 1.2s linear infinite, driftPiece 4.5s ease-in-out infinite alternate;
}
.sk-p { left: 17%; top: 25%; }
.sk-p2 { right: 23%; top: 19%; animation-delay: -.45s; }
.sk-z { left: 28%; bottom: 20%; animation-delay: -.8s; }
.sk-z2 { right: 13%; bottom: 25%; animation-delay: -.2s; }
.sk-l { left: 53%; top: 54%; animation-delay: -.62s; }
.basin.active .skeleton-piece { background-color: #B8FF4D; border-color: #11F5D2; box-shadow: 0 0 22px rgba(184,255,77,.42); }
@keyframes pieceLoad { to { background-position: -230% 0, 0 0; } }
@keyframes driftPiece { to { transform: translate(1rem, -1.35rem) rotate(8deg); } }

.wordmark {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 12ch;
  font-family: "Roboto Flex", "Inter", sans-serif;
  font-size: clamp(4.7rem, 16vw, 14rem);
  line-height: .72;
  letter-spacing: -.16em;
  color: #EAFDFF;
  font-variation-settings: "wdth" var(--wordWidth, 44), "wght" var(--wordWeight, 960), "opsz" 144;
  text-shadow: 0 0 20px rgba(17,245,210,.54), .035em .05em 0 #335CFF, -.025em -.025em 0 #28115C;
  transition: font-variation-settings .75s cubic-bezier(.2,.8,.18,1), letter-spacing .75s ease, color .75s ease;
}
.lagoon.solved .wordmark,
.basin-ripple.active .wordmark { --wordWidth: 126; --wordWeight: 820; letter-spacing: -.06em; color: #B8FF4D; }
.wordmark span { display: inline-block; }
.wordmark span:nth-child(4), .wordmark span:nth-child(5) { color: #11F5D2; transform: skewX(-10deg); }
.wordmark span:last-child { color: #FF6B6B; }

.basin-title {
  position: relative;
  z-index: 3;
  max-width: 9.8ch;
  margin: 0;
  font-family: "Roboto Flex", "Inter", sans-serif;
  font-size: clamp(3.2rem, 10vw, 9.2rem);
  line-height: .82;
  letter-spacing: -.08em;
  color: #EAFDFF;
  font-variation-settings: "wdth" var(--titleWidth, 56), "wght" 900, "opsz" 120;
  text-shadow: .055em .045em 0 #335CFF, 0 0 23px rgba(17,245,210,.38);
  transition: font-variation-settings .7s ease, color .7s ease;
}
.basin.active .basin-title { --titleWidth: 116; color: #B8FF4D; }
.logic-title { margin-left: 18vw; max-width: 10.5ch; }
.solved-title { max-width: 11ch; text-align: center; justify-self: center; }

.clue-copy {
  position: relative;
  z-index: 3;
  max-width: 34rem;
  margin: 1.15rem 0 0;
  color: rgba(234,253,255,.86);
  font-size: clamp(1rem, 1.45vw, 1.24rem);
  line-height: 1.65;
}
.intro-copy { max-width: 30rem; }
.logic-copy { margin-left: auto; margin-right: 5vw; background: rgba(3,26,46,.62); border-left: 5px solid #FF6B6B; padding: 1rem 1.2rem; }
.solved-copy { justify-self: center; text-align: center; background: rgba(40,17,92,.55); padding: 1rem 1.2rem; border: 1px solid rgba(17,245,210,.34); }

.shell-action,
.drop-clue {
  position: relative;
  z-index: 4;
  width: max-content;
  margin-top: 1.25rem;
  border: 2px solid #11F5D2;
  background: #B8FF4D;
  color: #031A2E;
  padding: .85rem 1rem;
  font-family: "Recursive", monospace;
  font-size: .83rem;
  font-variation-settings: "MONO" 1, "CASL" .2, "wght" 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, 92% 0, 100% 35%, 92% 100%, 0 100%, 8% 50%);
  box-shadow: .42rem .42rem 0 #335CFF, 0 0 18px rgba(184,255,77,.48);
}
.drop-clue { justify-self: center; background: #FF6B6B; box-shadow: .42rem .42rem 0 #11F5D2; }

.buoy {
  position: absolute;
  z-index: 1;
  width: clamp(6rem, 13vw, 12rem);
  aspect-ratio: .78;
  display: grid;
  place-items: center;
  font-family: "Roboto Flex", sans-serif;
  font-size: clamp(5rem, 12vw, 11rem);
  font-variation-settings: "wdth" 134, "wght" 980, "opsz" 144;
  color: #031A2E;
  background: #335CFF;
  border: 4px solid #11F5D2;
  border-radius: 48% 48% 58% 58%;
  box-shadow: 0 0 28px rgba(17,245,210,.55);
  opacity: .62;
}
.pair-left { right: 21vw; top: 17vh; transform: rotate(-12deg); }
.pair-right { right: 9vw; top: 28vh; transform: rotate(13deg); }

.piece-current .puzzle-tile {
  position: absolute;
  z-index: 2;
  width: clamp(4.8rem, 11vw, 9.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: "Roboto Flex", sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-variation-settings: "wdth" 90, "wght" 900, "opsz" 80;
  color: #031A2E;
  background: #EAFDFF;
  border: 3px solid #11F5D2;
  clip-path: polygon(0 0, 37% 0, 50% 18%, 63% 0, 100% 0, 100% 40%, 84% 50%, 100% 62%, 100% 100%, 0 100%, 0 62%, 16% 50%, 0 38%);
  animation: lagoonDrift 5s ease-in-out infinite alternate;
}
.tile-one { left: 15vw; bottom: 21vh; background: #B8FF4D !important; }
.tile-two { right: 19vw; top: 26vh; background: #11F5D2 !important; animation-delay: -1.1s; }
.tile-three { left: 44vw; bottom: 15vh; background: #335CFF !important; animation-delay: -.55s; }
.tile-four { right: 9vw; bottom: 30vh; background: #FF6B6B !important; animation-delay: -1.8s; }
@keyframes lagoonDrift { to { transform: translate(1.4rem, -2rem) rotate(10deg); } }
.bubble-counter {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  color: #11F5D2;
  font-family: "Recursive", monospace;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.zigzag-board {
  position: absolute;
  left: 9vw;
  bottom: 14vh;
  z-index: 2;
  display: flex;
  gap: .55rem;
  transform: rotate(-8deg);
}
.zigzag-board span {
  width: clamp(3.6rem, 8vw, 7rem);
  height: clamp(5rem, 11vw, 10rem);
  background: #335CFF;
  border: 3px solid #11F5D2;
  clip-path: polygon(0 0, 100% 0, 43% 42%, 100% 42%, 100% 100%, 0 100%, 56% 58%, 0 58%);
  box-shadow: 0 0 24px rgba(17,245,210,.42);
  animation: zCurrent 1.7s ease-in-out infinite alternate;
}
.zigzag-board span:nth-child(even) { background: #B8FF4D; animation-delay: -.45s; }
@keyframes zCurrent { to { transform: translateY(-1rem) skewY(-6deg); } }
.sonar-shell {
  position: absolute;
  right: 12vw;
  top: 18vh;
  width: clamp(10rem, 25vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(234,253,255,.28);
}
.sonar-shell i {
  position: absolute;
  inset: calc(var(--i, 1) * 13%);
  border-radius: inherit;
  border: 2px solid rgba(17,245,210,.5);
  animation: sonarBreathe 2.2s ease-in-out infinite alternate;
}
.sonar-shell i:nth-child(1) { --i: 1; }
.sonar-shell i:nth-child(2) { --i: 2; animation-delay: -.5s; border-color: rgba(184,255,77,.55); }
.sonar-shell i:nth-child(3) { --i: 3; animation-delay: -1s; border-color: rgba(255,107,107,.6); }
@keyframes sonarBreathe { to { transform: scale(1.08); opacity: .42; } }

.solved-emblem {
  position: relative;
  z-index: 2;
  justify-self: center;
  margin-top: 2rem;
  width: min(78vw, 34rem);
  aspect-ratio: 1.55;
  border: 1rem solid rgba(17,245,210,.45);
  border-left-color: #335CFF;
  border-right-color: #B8FF4D;
  border-radius: 48% 52% 46% 54%;
  box-shadow: inset 0 0 38px rgba(17,245,210,.18), 0 0 38px rgba(17,245,210,.28);
}
.solved-emblem span:not(.coral-token) {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: "Roboto Flex", sans-serif;
  font-size: clamp(3.7rem, 10vw, 8rem);
  font-variation-settings: "wdth" 124, "wght" 980, "opsz" 144;
  color: #031A2E;
}
.emblem-p { left: 8%; top: 26%; width: 20%; height: 50%; background: #EAFDFF; border-radius: 48% 48% 36% 36%; }
.emblem-z { left: 35%; top: 19%; color: #11F5D2 !important; text-shadow: 0 0 20px #11F5D2; }
.emblem-z.second { left: 53%; top: 34%; color: #B8FF4D !important; }
.emblem-l { right: 11%; bottom: 18%; width: 16%; height: 56%; background: #FF6B6B; clip-path: polygon(0 0, 58% 0, 58% 68%, 100% 68%, 100% 100%, 0 100%); }
.coral-token {
  position: absolute;
  left: 48%;
  top: 45%;
  width: 3.2rem;
  aspect-ratio: 1;
  background: #FF6B6B;
  border-radius: 50%;
  box-shadow: 0 0 0 .55rem rgba(255,107,107,.2), 0 0 30px rgba(255,107,107,.75);
}

.basin .coordinate,
.basin .basin-title,
.basin .clue-copy,
.basin .shell-action,
.basin .drop-clue {
  opacity: .42;
  transform: translateY(1.2rem) skewX(-4deg);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.18,1);
}
.basin.active .coordinate,
.basin.active .basin-title,
.basin.active .clue-copy,
.basin.active .shell-action,
.basin.active .drop-clue {
  opacity: 1;
  transform: translateY(0) skewX(0);
}

@media (max-width: 780px) {
  .tide-gauge { left: .55rem; gap: .45rem; }
  .gauge-marker em { display: none; }
  .marker-symbol { width: 2.2rem; }
  .basin { padding-left: 4rem; padding-right: 1rem; }
  .shoreline { inset: 8vh .8rem; }
  .coordinate { left: 4rem; top: 11vh; font-size: .62rem; }
  .wordmark { font-size: clamp(4rem, 20vw, 7rem); }
  .basin-title { font-size: clamp(3rem, 17vw, 6rem); }
  .buoy { opacity: .25; }
  .pair-left { right: 16vw; top: 16vh; }
  .pair-right { right: 5vw; top: 31vh; }
  .logic-title { margin-left: 0; }
  .logic-copy { margin-right: 0; }
  .sonar-shell { opacity: .35; right: 0; }
  .zigzag-board { left: 4rem; opacity: .6; }
}