/* Tidepool V192: mineral strata, tidal margins and attached shore ecology.
   Wide generated environments remain at their native proportions, never rails. */
body[data-world-family='tidepool'] { --ui-control-radius: 9px; --tide-depth: 1; }
body[data-world-family='tidepool'] .editor-scroll {
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--nw-ink) 2.5%, transparent) 3px 4px), radial-gradient(ellipse at 12% 0, color-mix(in srgb, #e7eee0 34%, transparent), transparent 62%);
  background-size: auto;
}
body[data-world-family='tidepool'][data-world-motif='kelp-forest'] .editor-scroll {
  background-image: linear-gradient(94deg, color-mix(in srgb, #4d6d4f 17%, transparent), transparent 25%, transparent 78%, color-mix(in srgb, #3b6e62 10%, transparent)), repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--nw-ink) 3%, transparent) 3px 4px);
}
body[data-world-family='tidepool'][data-world-motif='coral-study'] .editor-scroll {
  background-image: repeating-linear-gradient(175deg, transparent 0 46px, color-mix(in srgb, var(--nw-ink) 6%, transparent) 46px 47px, transparent 47px 73px), linear-gradient(100deg, color-mix(in srgb, #dcae93 18%, transparent), transparent 60%);
}
body[data-world-family='tidepool'] .ink-stage { margin-top: 44px; margin-bottom: 137px; }
body[data-world-family='tidepool'] .world-surround {
  clip-path: polygon(evenodd, -500px -500px, calc(100% + 500px) -500px, calc(100% + 500px) calc(100% + 500px), -500px calc(100% + 500px), -500px -500px, 0 0, 0 100%, 100% 100%, 100% 0, 0 0);
}
body[data-world-family='tidepool'] :is(.world-surround-left,.world-surround-right) {
  top: 9px; bottom: 0; width: 61px;
  background: var(--tide-contour) center top / 88px 500px repeat-y;
  opacity: .58;
}
body[data-world-family='tidepool'] .world-surround-left { left: -61px; }
body[data-world-family='tidepool'] .world-surround-right { right: -61px; transform: rotate(180deg); }
body[data-world-family='tidepool'] .world-surround-upper {
  top: -28px; right: 7%; width: 150px; height: 24px;
  border-top: 1px solid color-mix(in srgb, var(--nw-rule) 75%, transparent);
  border-radius: 70% 15% 0 0;
  transform: rotate(-3deg);
}
body[data-world-family='tidepool'] .world-surround-upper::after {
  content: ''; position: absolute; inset: 5px -18px 0 -27px; border-top: 1px solid color-mix(in srgb, var(--nw-rule) 50%, transparent); border-radius: 70% 15% 0 0;
}
body[data-world-family='tidepool'] .world-surround-lower {
  left: calc((100% - 100cqw) / 2 + 6px); right: calc((100% - 100cqw) / 2 + 6px); bottom: -114px; height: auto; aspect-ratio: 1616 / 539;
  background: var(--tide-shore) center bottom / 100% auto no-repeat;
  filter: drop-shadow(0 4px 2px rgb(35 56 46 / .13));
}
body[data-world-family='tidepool'][data-world-motif='kelp-forest'] .world-surround-lower { aspect-ratio: 1616 / 808; bottom: -105px; left: 50%; right: auto; width: calc(100cqw - 12px); max-width: 1400px; transform: translateX(-50%); }
body[data-world-family='tidepool'][data-world-motif='coral-study'] .world-surround-lower { aspect-ratio: 1616 / 539; bottom: -107px; }
body[data-world-family='tidepool'] .world-night-light {
  left: -60px; right: -60px; bottom: -90px; height: 190px;
  background: var(--tide-ripple) center bottom / 100% 95px repeat-x;
  opacity: 0;
}
body[data-world-family='tidepool'][data-theme='dark'] .editor-scroll {
  background-image: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, #325e62 26%, transparent), transparent 58%), linear-gradient(90deg, rgb(0 9 22 / .14), transparent 25%, transparent 76%, rgb(0 9 22 / .18));
}
body[data-world-family='tidepool'][data-theme='dark'] .world-surround-lower {
  filter: brightness(.63) saturate(.7) drop-shadow(-1px -1px 0 rgb(162 221 211 / .65)) drop-shadow(0 5px 3px rgb(0 8 17 / .28));
}
body[data-world-family='tidepool'][data-world-motif='kelp-forest'][data-theme='dark'] .world-surround-lower {
  filter: brightness(.56) saturate(.76) drop-shadow(-1px -1px 0 rgb(158 199 164 / .58));
}
body[data-world-family='tidepool'][data-theme='dark'] .world-night-light { opacity: .82; }
body[data-world-family='tidepool'][data-theme='dark'] :is(.world-surround-left,.world-surround-right) { opacity: .88; filter: brightness(1.55); }
body[data-world-family='tidepool'][data-theme='dark'] .theme-frame { filter: drop-shadow(0 -1px 1px rgb(158 216 214 / .32)); }
body[data-world-family='tidepool'] .note-editor {
  background-image: var(--wr-margin); background-repeat: repeat-y; background-size: 28px 160px; background-position: 3px 0;
}
body[data-world-family='tidepool'][data-paper='blank'] .note-editor {
  background-image: var(--wr-edge), var(--wr-margin); background-size: 120px 120px, 28px 160px; background-repeat: no-repeat, repeat-y; background-position: right bottom, 3px 0;
}
body[data-world-family='tidepool'][data-paper='ruled'] .note-editor {
  background-image: var(--wr-margin), linear-gradient(90deg, transparent 53px, color-mix(in srgb, var(--world-rule) 46%, transparent) 53px 54px, transparent 54px), repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--world-rule) 34%, transparent) 31px 32px);
  background-size: 28px 160px, 100% 100%, 100% 32px; background-repeat: repeat-y, no-repeat, repeat; background-position: 3px 26px, 0 0, 0 26px;
}
body[data-world-family='tidepool'][data-paper='dots'] .note-editor {
  background-image: var(--wr-dots), var(--wr-margin); background-size: 24px 24px, 28px 160px; background-repeat: repeat, repeat-y; background-position: 0 0, 3px 0;
}
body[data-world-family='tidepool'][data-paper='grid'] .note-editor {
  background-image: var(--wr-margin), linear-gradient(180deg, color-mix(in srgb, var(--world-rule) 21%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--world-rule) 21%, transparent) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--world-rule) 40%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--world-rule) 40%, transparent) 1px, transparent 1px);
  background-size: 28px 160px, 24px 24px, 24px 24px, 96px 96px, 96px 96px; background-position: 3px 0, 0 0, 0 0, 0 0, 0 0; background-repeat: repeat-y, repeat, repeat, repeat, repeat;
}
body[data-world-family='tidepool'][data-paper='chalkboard'] .note-editor {
  background-image: var(--wr-edge), radial-gradient(ellipse at 0 96%, rgb(191 212 202 / .075), transparent 47%); background-position: right bottom, 0 0; background-repeat: no-repeat; background-size: 160px 160px, 100% 100%;
}
body[data-world-family='tidepool'] .theme-material-grain { opacity: .23; }
body[data-world-family='tidepool'][data-paper='chalkboard'] .theme-material-grain { opacity: .37; }
@container world-desk (max-width: 700px) {
  body[data-world-family='tidepool'] .ink-stage { margin-top: 38px; margin-bottom: 100px; }
  body[data-world-family='tidepool'] :is(.world-surround-left,.world-surround-right) { width: 28px; background-size: 65px 370px; background-position: right top; }
  body[data-world-family='tidepool'] .world-surround-left { left: -29px; }
  body[data-world-family='tidepool'] .world-surround-right { right: -29px; }
  body[data-world-family='tidepool'] .world-surround-upper { top: -21px; left: calc((100% - 100cqw) / 2); right: calc((100% - 100cqw) / 2); width: auto; overflow: hidden; }
  body[data-world-family='tidepool'] .world-surround-lower { left: -64px; right: -64px; bottom: -76px; height: auto; aspect-ratio: 1616 / 539; background-image: var(--tide-mobile); background-size: 100% auto; background-position: center bottom; }
  body[data-world-family='tidepool'][data-world-motif='kelp-forest'] .world-surround-lower { aspect-ratio: 1616 / 808; bottom: -74px; left: 50%; right: auto; width: calc(100% + 128px); background-image: var(--tide-shore); }
  body[data-world-family='tidepool'][data-world-motif='coral-study'] .world-surround-lower { aspect-ratio: 1616 / 539; bottom: -74px; }
  body[data-world-family='tidepool'] .world-night-light { left: -28px; right: -28px; bottom: -74px; height: 85px; background-size: 540px 85px; }
  /* Mobile margin column narrows; every rule stays the same weight (no
     every-fourth-line darkening, unlike some other worlds). */
  body[data-world-family='tidepool'][data-paper='ruled'] .note-editor {
    background-image: var(--wr-margin), linear-gradient(90deg, transparent 40px, color-mix(in srgb, var(--world-rule) 46%, transparent) 40px 41px, transparent 41px), repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--world-rule) 34%, transparent) 31px 32px);
  }
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body[data-world-family='tidepool'][data-paper='ruled'] .note-editor { background-position: 0 18px, 0 0, 0 18px; }
}
@media print {
  body[data-world-family='tidepool'] .world-surround { display: none !important; }
  body[data-world-family='tidepool'] .note-editor { background-image: none !important; }
}

/* Small material grip; board resize interaction remains shared. */
body[data-world-family="tidepool"] .board-resize-handle {
  background: var(--tide-handle) center / contain no-repeat;
}

/* One night light event; approved artwork and mounting stay stationary. */
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  @keyframes tidepool-shore-drift {
    0%, 100% { transform: translateX(0); opacity: .4; }
    50% { transform: translateX(6px); opacity: 1; }
  }
  body[data-world-family='tidepool'][data-theme='dark']:not([data-readability='high']) .world-night-light {
    animation: tidepool-shore-drift 8s ease-in-out infinite;
  }
}