/* The child adventure opens onto the world; parent and lesson layouts stay separate. */
.child-shell {
  --child-header-height: 72px;
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cream);
}

.child-shell .main-wrap {
  width: 100%;
  min-width: 0;
}

.child-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--child-header-height);
  padding: 0 clamp(20px, 5vw, 76px);
  border-bottom: 1px solid #263a4d;
  background: #0d1723;
}

.child-header .child-brand {
  min-width: 0;
  margin: 0;
  gap: 11px;
}

.child-header .child-brand > svg {
  width: 38px;
  height: 38px;
}

.child-header .child-brand > span {
  font-size: 17px;
  letter-spacing: -.45px;
}

.child-header .child-brand small {
  margin-top: 5px;
  font-size: 8px;
  letter-spacing: 1.65px;
}

.child-menu {
  position: relative;
  flex: 0 0 auto;
  color: var(--ink);
}

.child-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #3b536c;
  border-radius: 2px;
  background: #152537;
  color: var(--ink);
  font: 700 12px/1.4 var(--display);
  list-style: none;
  cursor: pointer;
}

.child-menu > summary::-webkit-details-marker {
  display: none;
}

.child-menu > summary::marker {
  content: "";
}

.child-menu > summary:hover,
.child-menu[open] > summary {
  background: #203442;
  border-color: var(--cyan);
  color: var(--cyan);
}

.child-menu-links {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  gap: 4px;
  width: 242px;
  max-width: calc(100vw - 40px);
  padding: 9px;
  border: 1px solid #496079;
  border-radius: 2px;
  background: #111e30;
  box-shadow: 4px 4px 0 #030a13, 0 16px 38px #030a1366;
}

.child-menu-links a,
.child-menu-links button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: #c9d6e9;
  font: 600 12px/1.5 var(--display);
  text-align: left;
  text-decoration: none;
}

.child-menu-links a:hover,
.child-menu-links button:hover,
.child-menu-links [aria-current="page"] {
  background: #223b43;
  color: var(--cyan);
}

.child-menu-links [aria-current="page"] {
  box-shadow: inset 3px 0 var(--cyan);
}

.child-shell #main-content.trail-main {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.adventure-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--child-header-height));
  min-height: calc(100svh - var(--child-header-height));
  overflow: hidden;
  background: #253c50;
}

.adventure-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
}

.adventure-background img,
img.adventure-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}

.adventure-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, #061522d6 0%, #081b2aa8 28%, #0a1d2b38 59%, transparent 83%),
    linear-gradient(0deg, #07121f6e, transparent 30%, transparent 74%, #07121f26);
  content: "";
  pointer-events: none;
}

.adventure-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px clamp(28px, 6vw, 88px);
}

.tamer-identity {
  --tamer-avatar-size:168px;
  display: grid;
  grid-template-columns:var(--tamer-avatar-size) minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items: center;
  gap:24px;
  max-width:1000px;
}

.tamer-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column:1;
  grid-row:1 / span 2;
  align-self:stretch;
  width:100%;
  height:100%;
  min-height:var(--tamer-avatar-size);
  padding: 7px;
  border: 2px solid #b0d7dd;
  border-radius: 3px;
  background: #0d2438d9;
  box-shadow: 4px 4px 0 #06132180;
}

.tamer-avatar-edit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--profile-color,var(--cyan));
  border-radius: 2px;
  background: #0a1322;
  color: var(--profile-color,var(--cyan));
  box-shadow: 2px 2px 0 #06132180;
  opacity: 0;
  pointer-events: none;
}

.tamer-avatar:is(:hover,:focus-visible) .tamer-avatar-edit { opacity: 1; }

.tamer-avatar .creature-art,
.tamer-avatar .pixel-creature {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tamer-heading {
  grid-column:2;
  grid-row:1;
  min-width: 0;
  max-width:none;
  text-shadow: 0 2px 0 #061522, 0 3px 16px #061522b3;
}

.tamer-heading .eyebrow {
  margin-bottom: 9px;
  color: #a1fff0;
  font-size: 12px;
  letter-spacing: 1.9px;
}

.tamer-heading h1 {
  margin: 0;
  color: #f5f8ff;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -1.4px;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.tamer-energy {
  flex: 0 0 auto;
  min-height:46px;
  padding: 9px 12px;
  border: 1px solid #89ac656e;
  border-radius: 2px;
  background: #142c29bf;
  color: var(--lime);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 1px 0 #071522;
}

.tamer-energy strong {
  font-variant-numeric: tabular-nums;
}

.tamer-energy > span {
  display: inline;
}

.adventure-actions {
  grid-column:2;
  grid-row:2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  margin-top:0;
}

.adventure-secondary-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}

.adventure-actions .primary {
  min-height: 58px;
  padding: 16px 24px;
  font-size: 15px;
  box-shadow: 4px 4px 0 #526936;
}

.adventure-actions .secondary {
  min-height: 46px;
  padding: 12px 16px;
  border-color: #a0ccd2;
  background: #102b3bde;
  color: #e0fff7;
  font-size: 12px;
  box-shadow: 3px 3px 0 #061521a6;
}

.adventure-actions .secondary:hover {
  background: #1b414b;
  border-color: var(--cyan);
}

.trail-details {
  max-width: 1360px;
  padding: 40px 42px 32px;
  margin: 0 auto;
}

.trail-details .dashboard-grid {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .tamer-heading h1 {
    font-size: clamp(32px, 4.2vw, 44px);
  }

  .trail-details {
    padding: 32px 28px;
  }
}

@media (max-width: 800px) {
  .adventure-content {
    padding: 60px 32px;
  }

  .adventure-hero::after {
    background:
      linear-gradient(90deg, #061522c7, #081b2a8c 47%, #0a1d2b1f),
      linear-gradient(0deg, #07121f73, transparent 32%, transparent 77%, #07121f26);
  }

  .tamer-identity {
    gap: 17px;
  }

  .tamer-heading {
    max-width: calc(100% - 105px);
  }

  .tamer-heading h1 {
    font-size: 36px;
  }

  .trail-details {
    padding: 30px 22px;
  }
}

@media (max-width: 560px) {
  .child-shell {
    --child-header-height: 64px;
  }

  .child-header {
    gap: 12px;
    padding: 0 16px;
  }

  .child-header .child-brand {
    gap: 8px;
  }

  .child-header .child-brand > svg {
    width: 32px;
    height: 32px;
  }

  .child-header .child-brand > span {
    font-size: 14px;
  }

  .child-header .child-brand small {
    font-size: 7px;
    letter-spacing: 1.15px;
    margin-top: 4px;
  }

  .child-menu > summary {
    gap: 7px;
    padding: 10px;
    font-size: 11px;
  }

  .child-menu-links {
    max-width: calc(100vw - 32px);
  }

  .adventure-content {
    padding: 52px 24px;
  }

  .tamer-identity {
    --tamer-avatar-size:136px;
    gap:18px;
  }

  .tamer-avatar {
    padding: 5px;
  }

  .tamer-heading {
    max-width:none;
  }

  .tamer-heading .eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 1.4px;
  }

  .tamer-heading h1 {
    font-size: clamp(26px, 7.3vw, 34px);
    letter-spacing: -.8px;
  }

  .tamer-energy {
    padding: 7px 10px;
    font-size: 12px;
  }

  .adventure-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-top:0;
  }

  .adventure-actions .primary {
    width: 100%;
    max-width: 320px;
    min-height: 56px;
    padding: 15px 19px;
    font-size: 14px;
  }

  .adventure-actions .secondary {
    min-height: 44px;
  }

  .trail-details {
    padding: 28px 16px;
  }
}

@media (max-width: 560px) {
  .tamer-identity { --tamer-avatar-size:128px; gap:16px; }
  .adventure-actions { display:contents; }
  .adventure-actions>.primary { grid-column:2; grid-row:2; max-width:none; padding:12px; font-size:12px; }
  .adventure-secondary-actions { grid-column:1 / -1; grid-row:3; gap:12px; }
  .adventure-secondary-actions .secondary { padding:10px 12px; font-size:11px; }
  .trail-details .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .trail-details .today-card,
  .trail-details .companion-card {
    min-width: 0;
  }

  .trail-details .steps-row .step {
    flex: 1 1 0;
    min-width: 0;
  }

  .trail-details .step > span {
    text-align: center;
    overflow-wrap: anywhere;
  }

  .trail-details .step-line {
    flex: 0 1 12px;
    margin-inline: 4px;
  }
}

/* Full-canvas layers share the original landscape coordinates, including its bridge. */
.floating-world { container-type: size; }
.world-scene {
  position: absolute;
  width: max(100cqw, 177.684cqh);
  height: max(100cqh, 56.28cqw);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.world-scene > div,
.castle-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.world-scene img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
  user-select: none;
}
.depth-sky { z-index: 0; }
.distant-island {
  z-index: 2;
  animation: distant-drift var(--drift-duration, 26s) ease-in-out var(--drift-delay, -6s) infinite;
  --drift-x: 5px;
  --drift-y: 11px;
}
.drift-1 { clip-path: inset(23% 51% 61% 40%); --drift-duration: 31s; --drift-delay: -12s; --drift-y: 7px; }
.drift-2 { clip-path: inset(0); --drift-duration: 23s; --drift-delay: -3s; }
.drift-3 { clip-path: polygon(31% 63%,41% 63%,41% 68%,44% 68%,44% 63%,46% 63%,46% 91%,31% 91%); --drift-duration: 28s; --drift-delay: -15s; --drift-y: 13px; }
.drift-4 { clip-path: inset(72% 46% 13% 46%); --drift-duration: 35s; --drift-delay: -20s; --drift-y: 6px; }
.drift-5 { clip-path: inset(0); --drift-duration: 27s; --drift-delay: -19s; --drift-y: 9px; }
.drift-6 { clip-path: inset(0); --drift-duration: 24s; --drift-delay: -11s; --drift-y: 10px; }
.drift-7 { clip-path: polygon(68% 73%,74% 73.5%,77% 76.2%,82% 76.2%,82% 91%,68% 91%); --drift-duration: 30s; --drift-delay: -25s; --drift-y: 12px; }
@keyframes distant-drift {
  0%,100% { transform: translate3d(calc(0px - var(--drift-x)),calc(0px - var(--drift-y)),0); }
  50% { transform: translate3d(var(--drift-x),var(--drift-y),0); }
}
.castle-assembly { z-index: 4; animation: castle-drift 18s ease-in-out -8s infinite; }
.castle-art { transform: scale(.94); transform-origin: right top; }
@keyframes castle-drift {
  0%,100% { transform: translate3d(-6px,-18px,0); }
  50% { transform: translate3d(6px,18px,0); }
}
.cloud-bank { animation: cloud-bank-drift 44s ease-in-out -13s infinite; }
.cloud-bank-middle { z-index: 3; opacity: .2; }
.cloud-bank-front { z-index: 3; opacity: .52; animation-duration: 36s; animation-delay: -23s; }
@keyframes cloud-bank-drift {
  0%,100% { transform: translate3d(-14px,5px,0) scale(1.025); }
  50% { transform: translate3d(14px,-5px,0) scale(1.045); }
}
/* Continuous opaque cloud floor hides water endings throughout each island cycle. */
.foreground-clouds { z-index: 6; transform: translateY(12%); }
.foreground-ledge { z-index: 7; animation: foreground-drift 33s ease-in-out -9s infinite; }
.ledge-left { clip-path: inset(0 60% 0 0); }
.ledge-right { clip-path: inset(0 0 0 70%); animation-duration: 39s; animation-delay: -25s; animation-direction: reverse; }
@keyframes foreground-drift {
  0%,100% { transform: translate3d(-2px,-2px,0) scale(1.012); }
  50% { transform: translate3d(2px,2px,0) scale(1.012); }
}
.castle-water {
  position: absolute;
  overflow: hidden;
  left: 60.8%; top: 44%; width: 2.5%; height: 50%;
  opacity: .42;
  mask-image: linear-gradient(transparent,#000 8%,#000 90%,transparent);
}
.water-left { left: 48.6%; top: 59%; width: 2.4%; height: 31%; }
.water-right { left: 94.6%; top: 56%; width: 2.5%; height: 44%; }
.castle-water::before {
  content: '';
  position: absolute; inset: -160px 0 0;
  /* Narrow, staggered vertical highlights travel with the water, never across it. */
  background-image:
    linear-gradient(transparent 12%,#e5ffffcc 12% 46%,transparent 46%),
    linear-gradient(transparent 43%,#bdfbffb0 43% 88%,transparent 88%),
    linear-gradient(transparent 25%,#efffffcc 25% 62%,transparent 62%),
    linear-gradient(transparent 5%,#bdfbff99 5% 30%,transparent 30%);
  background-size: 2px 160px,3px 160px,2px 160px,2px 160px;
  background-position: 12% 0,40% 0,69% 0,91% 0;
  background-repeat: repeat-y;
  animation: depth-water-fall 2.8s linear infinite;
}
.water-left::before { animation-duration: 3.2s; animation-delay: -1.1s; }
.water-right::before { animation-duration: 2.5s; animation-delay: -.6s; }
@keyframes depth-water-fall { to { transform: translateY(160px); } }
.floating-world[data-motion="paused"] .world-scene *,
.floating-world[data-motion="paused"] .world-scene *::before { animation-play-state: paused; }
.floating-world[data-motion="off"] .world-scene *,
.floating-world[data-motion="off"] .world-scene *::before { animation: none; }
@media (max-width: 800px) {
  /* Crop the same connected world toward its castle; no alternate scene removes islands. */
  .world-scene { left: 66%; transform: translate(-64%,-50%); }
  .cloud-bank-front { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .world-scene *, .world-scene *::before { animation: none !important; }
}

/* The supplied logo includes its wordmark. Crop only its transparent canvas margin. */
.brand > .brand-logo, .welcome-brand > .brand-logo {
  display: block; flex: 0 1 auto; width: 190px; height: auto;
  max-width: 100%; padding: 0; background: none; border-radius: 0;
}
.family-header .brand > .brand-logo { width: 250px; height: auto; padding: 0; background: none; }
.child-header .child-brand > .brand-logo { width: 190px; height: auto; }
.session-brand .brand-logo { width: 145px; height: auto; }
@media (max-width: 560px) {
  .family-header .brand > .brand-logo { width: 165px; height: auto; }
  .child-header .child-brand > .brand-logo { width: 150px; height: auto; }
}


/* Mushroom Forest: local effects follow the same full-canvas crop as the artwork. */
.mushroom-world { container-type: size; }
.mushroom-scene .forest-leaves {
  clip-path: polygon(0 0,22% 0,21% 9%,15% 12%,11% 14%,7% 20%,0 26%);
  transform-origin: 2% 5%;
  animation: forest-leaf-rustle 16s ease-in-out -6s infinite;
}
@keyframes forest-leaf-rustle {
  0%,72%,100% { transform: translate(0,0) rotate(0); }
  78%,90% { transform: translate(1px,.5px) rotate(.16deg); }
  84%,96% { transform: translate(-1px,-.5px) rotate(-.12deg); }
}
.forest-fall { opacity: .36; }
.forest-fall-upper { left:91.6%;top:36.5%;width:3.2%;height:11%; }
.forest-fall-middle { left:85.9%;top:53.2%;width:3.4%;height:9%; }
.forest-fall-lower { left:90.4%;top:70%;width:4.6%;height:10.2%; }
.forest-fall-distant { left:37.9%;top:58.8%;width:1.2%;height:10.7%;opacity:.22; }
.forest-fall-middle::before { animation-duration:2.5s;animation-delay:-.9s; }
.forest-fall-lower::before { animation-duration:3.1s;animation-delay:-1.8s; }
.pond-ripple {
  position:absolute; width:7%;height:2%;
  left:77.1%;top:87.6%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  mask-image:linear-gradient(transparent 0 20%,#000 45%);
}
.ripple-rock-small { left:71.6%;top:89.1%;width:4.3%;height:1.3%; }
.pond-ripple::before,.pond-ripple::after {
  content:'';position:absolute;inset:0;
  border:2px solid #d1faff;border-radius:50%;
  animation: forest-pond-ripple 5.5s ease-out infinite;
}
.pond-ripple::after { animation-delay:-2.75s; }
.ripple-rock-small::before { animation-delay:-1.4s; }
.ripple-rock-small::after { animation-delay:-4.15s; }
@keyframes forest-pond-ripple {
  0% { transform:scale(.55);opacity:0; }
  15% { opacity:.5; }
  100% { transform:scale(1.65);opacity:0; }
}
.mushroom-world[data-motion="paused"] .mushroom-scene *,
.mushroom-world[data-motion="paused"] .mushroom-scene *::before,
.mushroom-world[data-motion="paused"] .mushroom-scene *::after { animation-play-state:paused; }
.mushroom-world[data-motion="off"] .mushroom-scene *,
.mushroom-world[data-motion="off"] .mushroom-scene *::before,
.mushroom-world[data-motion="off"] .mushroom-scene *::after { animation:none; }
.mushroom-world[data-motion="off"] .pond-ripple { display:none; }
@media(max-width:800px) {
  .mushroom-scene { left:75%;transform:translate(-75%,-50%); }
}
@media(prefers-reduced-motion:reduce) {
  .mushroom-scene *, .mushroom-scene *::before,.mushroom-scene *::after { animation:none!important; }
  .mushroom-scene .pond-ripple { display:none; }
}


/* Crystal Cave: stronger streams, impact spray and staggered facet shines. */
.crystal-world { container-type:size; }
.cave-fall { opacity:.8; }
.cave-fall-front { left:48.6%;top:54%;width:3%;height:16%; }
.cave-fall-right { left:90.4%;top:55%;width:4%;height:15%; }
.cave-fall-middle { left:32.2%;top:38%;width:2%;height:24%;opacity:.22; }
.cave-fall-left { left:11.2%;top:46.7%;width:1.4%;height:11%;opacity:.2; }
.cave-fall-far { left:39.4%;top:28.7%;width:1.2%;height:9%;opacity:.18; }
.cave-fall-right::before { animation-duration:1.55s;animation-delay:-1.3s; }
.cave-fall-middle::before { animation-duration:3.6s;animation-delay:-2s; }
.cave-ripple-near { left:41.9%;top:82.5%;width:4%;height:1.4%; }
.cave-ripple-right { left:75.1%;top:81.7%;width:4.5%;height:1.5%; }
.cave-ripple-back { left:27.1%;top:68.1%;width:3.4%;height:1%; }
.cave-ripple-right::before { animation-delay:-1.3s; }
.cave-ripple-right::after { animation-delay:-4.05s; }
.cave-ripple-back::before { animation-delay:-2.1s; }
.cave-ripple-back::after { animation-delay:-4.85s; }
.crystal-glint {
  position:absolute;width:clamp(14px,2cqw,30px);height:clamp(20px,2.8cqw,42px);
  background:#eeffff;pointer-events:none;opacity:0;
  clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);
  filter:drop-shadow(0 0 5px #a2eaff);
  animation:cave-crystal-shine var(--glint-duration) ease-in-out var(--glint-delay) infinite;
}
@keyframes cave-crystal-shine {
  0%,25%,65%,100% { opacity:0;transform:translate(-50%,-50%) scale(.3); }
  43% { opacity:1;transform:translate(-50%,-50%) scale(1); }
  54% { opacity:.45;transform:translate(-50%,-50%) scale(.65); }
}
.crystal-world[data-motion="paused"] .crystal-scene *,
.crystal-world[data-motion="paused"] .crystal-scene *::before,
.crystal-world[data-motion="paused"] .crystal-scene *::after { animation-play-state:paused; }
.crystal-world[data-motion="off"] .crystal-scene *,
.crystal-world[data-motion="off"] .crystal-scene *::before,
.crystal-world[data-motion="off"] .crystal-scene *::after { animation:none; }
.crystal-world[data-motion="off"] .pond-ripple,
.crystal-world[data-motion="off"] .crystal-glint,
.crystal-world[data-motion="off"] .crystal-shimmer,
.crystal-world[data-motion="off"] .cave-spray { display:none; }
@media(max-width:800px) {
  .crystal-scene { left:75%;transform:translate(-75%,-50%); }
}
@media(prefers-reduced-motion:reduce) {
  .crystal-scene *, .crystal-scene *::before,.crystal-scene *::after { animation:none!important; }
  .crystal-scene .pond-ripple,.crystal-scene .crystal-glint,
  .crystal-scene .crystal-shimmer,.crystal-scene .cave-spray { display:none; }
}


/* Underwater ambience: beams and caustics move slowly; bubbles rise independently. */
.aquatic-world { container-type:size; }
/* Discrete strips form visible shafts that fan and brighten independently. */
.ocean-rays { mix-blend-mode:screen;pointer-events:none; }
.ocean-rays svg { width:100%;height:100%; }
.ocean-beam {
  transform-box:fill-box;transform-origin:50% 0;
  animation:ocean-beam-refract var(--ray-duration) steps(24,end) var(--ray-delay) infinite;
}
@keyframes ocean-beam-refract {
  0%,100% { transform:skewX(-2deg) scaleX(.85);opacity:.55; }
  35% { transform:skewX(1deg) scaleX(1.12);opacity:1; }
  65% { transform:skewX(3deg) scaleX(1.3);opacity:.8; }
}
.sand-caustics {
  background:url('/public/backgrounds/aquatic-caustics.svg') repeat;
  background-size:240px 140px;
  clip-path:polygon(22% 66%,36% 65%,41% 73%,45% 81%,47% 87%,52% 100%,27% 100%,20% 85%,24% 79%);
  opacity:.18;mix-blend-mode:screen;
  animation:ocean-sand-light 22s linear infinite;
}
@keyframes ocean-sand-light {
  to { background-position:240px 140px; }
}
.seaweed { animation:seaweed-current 7s ease-in-out -3s infinite; }
.seaweed-left { clip-path:polygon(0 25%,13% 25%,13% 81%,0 81%);transform-origin:6% 79%; }
.seaweed-small { clip-path:polygon(14% 62%,21% 62%,21% 84%,14% 84%);transform-origin:17% 83%;animation-duration:8s;animation-delay:-6s; }
.seaweed-middle { clip-path:polygon(54% 59%,61% 59%,61% 86%,54% 86%);transform-origin:57% 84%;animation-duration:7.5s;animation-delay:-4s; }
.seaweed-front { clip-path:polygon(57% 78%,71% 78%,71% 100%,57% 100%);transform-origin:64% 99%;animation-duration:9s;animation-delay:-5s; }
.seaweed-right { clip-path:polygon(91% 39%,100% 39%,100% 89%,91% 89%);transform-origin:96% 87%;animation-duration:8.5s;animation-delay:-1s; }
.seaweed-low-left { clip-path:polygon(15% 88%,31% 88%,31% 100%,15% 100%);transform-origin:23% 100%;animation-duration:8s;animation-delay:-2s; }
@keyframes seaweed-current {
  0%,100% { transform:skewX(-2deg); }
  50% { transform:skewX(2deg); }
}
.sea-bubble svg { width:100%;height:100%; }
.sea-bubble {
  position:absolute;bottom:-5%;width:var(--bubble-size);height:var(--bubble-size);
  image-rendering:pixelated;
  pointer-events:none;opacity:0;
  animation:ocean-bubble-rise var(--bubble-duration) linear var(--bubble-delay) infinite;
}
@keyframes ocean-bubble-rise {
  0% { transform:translate3d(0,0,0);opacity:0; }
  8% { opacity:.95; }
  45% { transform:translate3d(var(--bubble-drift),calc(0px - max(55cqh,30.955cqw)),0);opacity:.85; }
  90% { opacity:.7; }
  100% { transform:translate3d(0,calc(0px - max(110cqh,61.91cqw)),0);opacity:0; }
}
.aquatic-world[data-motion="paused"] .aquatic-scene * { animation-play-state:paused; }
.aquatic-world[data-motion="off"] .aquatic-scene * { animation:none; }
.aquatic-world[data-motion="off"] .sea-bubble { display:none; }
@media(max-width:800px) {
  .aquatic-scene { left:75%;transform:translate(-75%,-50%); }
}
@media(prefers-reduced-motion:reduce) {
  .aquatic-scene * { animation:none!important; }
  .aquatic-scene .sea-bubble { display:none; }
}


/* Local cave refinements leave other worlds' waterfall strengths unchanged. */
.cave-fall-front::before { animation-duration:1.35s; }
.cave-fall-front::before,.cave-fall-right::before {
  background-size:3px 160px,4px 160px,3px 160px,3px 160px;
}
.cave-fall-front::after,.cave-fall-right::after {
  content:'';position:absolute;inset:-96px 0 0;
  background-image:linear-gradient(transparent 10%,#f3ffff 10% 45%,transparent 45%),linear-gradient(transparent 52%,#dcffff 52% 88%,transparent 88%),linear-gradient(transparent 28%,#f3ffff 28% 60%,transparent 60%);
  background-size:3px 96px,2px 96px,3px 96px;
  background-position:25% 0,56% 0,88% 0;background-repeat:repeat-y;opacity:.65;
  animation:cave-fast-water 1.05s linear -.4s infinite;
}
.cave-fall-right::after { animation-duration:1.2s;animation-delay:-.8s; }
@keyframes cave-fast-water { to { transform:translateY(96px); } }
.crystal-scene .cave-spray {
  position:absolute;inset:auto;width:5.8%;height:3.2%;
  transform:translate(-50%,-50%);pointer-events:none;
}
.crystal-scene .spray-right { width:7%; }
.spray-drop {
  position:absolute;left:50%;bottom:30%;width:3px;height:5px;
  background:#e3ffff;border-radius:1px;opacity:0;
  animation:cave-water-spray var(--drop-duration) ease-out var(--drop-delay) infinite;
}
@keyframes cave-water-spray {
  0% { transform:translate(0,0) scale(.6);opacity:0; }
  15% { opacity:.85; }
  50% { transform:translate(var(--drop-x),calc(0px - var(--drop-height))) scale(1);opacity:.75; }
  100% { transform:translate(calc(var(--drop-x) * 1.8),5px) scale(.4);opacity:0; }
}
.spray-foam {
  position:absolute;left:0;bottom:6%;width:100%;height:30%;
  background:radial-gradient(ellipse,#d8ffffaa,transparent 70%);
  animation:cave-impact-foam 2.2s ease-in-out -.6s infinite;
}
@keyframes cave-impact-foam {
  0%,100% { transform:scaleX(.8);opacity:.45; }
  50% { transform:scaleX(1.15);opacity:.85; }
}
.crystal-shimmer {
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  clip-path:polygon(50% 0,95% 22%,85% 80%,50% 100%,5% 77%,10% 20%);
  background:linear-gradient(115deg,transparent 38%,#eaffff99 48%,#fff 50%,#eaffff77 52%,transparent 62%);
  background-size:350% 100%;opacity:0;mix-blend-mode:screen;
  animation:cave-facet-sheen var(--shine-duration) ease-in-out var(--shine-delay) infinite;
}
@keyframes cave-facet-sheen {
  0%,20% { background-position:100% 0;opacity:0; }
  30% { opacity:.6; }
  55% { background-position:0 0;opacity:.6; }
  65%,100% { background-position:0 0;opacity:0; }
}

/* More visible water rings, with independent phases along the stepping path. */
.mushroom-scene .pond-ripple::before,.mushroom-scene .pond-ripple::after,
.crystal-scene .pond-ripple::before,.crystal-scene .pond-ripple::after {
  border:3px solid #e0ffff;
  box-shadow:0 0 3px #a5edff88;
  animation-name:scene-visible-ripple;
  animation-duration:4.4s;
}
@keyframes scene-visible-ripple {
  0% { transform:scale(.8);opacity:0; }
  16% { opacity:.85; }
  50% { opacity:.5; }
  100% { transform:scale(1.5);opacity:0; }
}
.forest-fall { opacity:.8; }
.forest-fall::before { animation-duration:1.6s; background-size:3px 160px,4px 160px,3px 160px,3px 160px; }
.forest-fall-middle::before { animation-duration:1.4s; }
.forest-fall-lower::before { animation-duration:1.8s; }
.forest-fall-distant { opacity:.35; }
.mushroom-scene .forest-spray {
  position:absolute;inset:auto;width:6%;height:3%;
  transform:translate(-50%,-50%);pointer-events:none;
}
.mushroom-glow {
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse,#ffe5a5aa 0,#ffad4877 28%,transparent 70%);
  mix-blend-mode:screen;opacity:.2;
  animation:forest-mushroom-glow var(--glow-duration) ease-in-out var(--glow-delay) infinite;
}
@keyframes forest-mushroom-glow {
  0%,100% { opacity:.03;filter:brightness(.7);transform:translate(-50%,-50%) scale(.8); }
  45%,55% { opacity:1;filter:brightness(1.65);transform:translate(-50%,-50%) scale(1.15); }
}
.forest-pool-water {
  pointer-events:none;
  /* Full-art coordinates: exclude the rocky right bank and foreground plants. */
  clip-path:polygon(27% 72%,35% 69%,40% 71%,42% 74%,42% 76%,40% 78%,36% 80%,30% 78%);
}
.mushroom-world[data-motion="off"] .forest-spray { display:none; }
@media(prefers-reduced-motion:reduce) {
  .mushroom-scene .forest-spray { display:none; }
}

.forest-pool-ripple { left:42.2%;top:77.5%;width:7%;height:1.6%; }
.forest-pool-ripple-back { left:37.8%;top:73.8%;width:4.5%;height:1%; }
.forest-pool-ripple::before { animation-delay:-1s; }
.forest-pool-ripple::after { animation-delay:-3.2s; }
.forest-pool-ripple-back::before { animation-delay:-1.7s; }
.forest-pool-ripple-back::after { animation-delay:-3.9s; }

/* Small pixel arcs originate beside each stone's right waterline corner. */
.pixel-corner-ripple {
  position:absolute;width:4.8%;height:2%;pointer-events:none;
  transform:translateY(-35%);
}
.pixel-corner-ripple svg { width:100%;height:100%;overflow:visible; }
.corner-wave {
  fill:none;stroke:#d9ffff;stroke-width:2;opacity:0;
  animation:cave-corner-wave 3.2s steps(6,end) var(--corner-delay) infinite;
}
.corner-wave-second { animation-delay:calc(var(--corner-delay) - 1.6s); }
@keyframes cave-corner-wave {
  0% { transform:translate(0,0);opacity:0; }
  16% { opacity:.8; }
  50% { opacity:.5; }
  100% { transform:translate(24px,3px);opacity:0; }
}
.crystal-world[data-motion="off"] .pixel-corner-ripple { display:none; }
@media(prefers-reduced-motion:reduce) {
  .crystal-scene .pixel-corner-ripple { display:none; }
}

.pixel-corner-ripple.ripple-left { transform:translate(-100%,-35%) scaleX(-1); }
.forest-fall-distant {
  left:38.35%;width:1.05%;
  clip-path:polygon(25% 0,95% 0,100% 74%,85% 94%,55% 100%,35% 95%,35% 82%,12% 74%,20% 42%);
}
.mushroom-world[data-motion="off"] .pixel-corner-ripple { display:none; }
@media(prefers-reduced-motion:reduce) {
  .mushroom-scene .pixel-corner-ripple { display:none; }
}