/* Habitat artwork stays behind the shared journal. */
.ocean-backdrop,.ocean-seafloor { display:none; pointer-events:none; }
#field-journal .fj-scene-controls {
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap;
  flex-basis:100%; gap:4px 12px; padding:16px 0 0; margin-top:8px;
  border-top:1px solid var(--rule); color:var(--soft-ink);
  font:12px/1.4 'DM Sans',sans-serif;
}
#field-journal .fj-scene-controls[hidden] { display:none; }
#field-journal .fj-scene-controls select,
#field-journal .fj-scene-controls .fj-motion-toggle {
  min-height:44px; padding:8px 10px; border:1px solid var(--rule);
  border-radius:3px; background:var(--paper); color:var(--ink); font:inherit;
}
#field-journal .fj-scene-controls .fj-motion-toggle { border-color:transparent; text-decoration:underline; text-underline-offset:4px; }
html[data-scene="underwater"],html[data-scene="underwater"] body { background:#100c30; }
html[data-scene="underwater"] body::before,
html[data-scene="underwater"] body::after { display:none; }
html[data-scene="underwater"] body {
  --ocean-rail:max(19%,calc((100% - 820px) / 2));
  --ocean-unit:clamp(1px,.15625svh,2px);
  --ocean-edge-gap:16px;
}
html[data-scene="underwater"] #field-journal {
  width:62%; max-width:820px; margin:0 auto; position:relative; z-index:1;
  min-height:100svh; box-shadow:0 0 0 1px #08071b40,0 10px 35px #08071b25;
}
html[data-scene="underwater"] .ocean-backdrop {
  display:block; position:fixed; inset:0; z-index:0; overflow:hidden;
  background:#100c30 url('underwater/water.png') center / 100% 100% no-repeat;
  image-rendering:pixelated;
}
.ocean-sprite {
  display:block; position:absolute; background-repeat:no-repeat;
  background-size:400% 300%; background-position:0 0; image-rendering:pixelated;
}
.ocean-creature { display:block; position:absolute; }
.ocean-bubble {
  position:absolute; top:0; left:0; box-sizing:border-box; z-index:0;
  border:1px solid #bfe9f3; border-radius:1px;
  box-shadow:inset 1px 1px 0 #eaffff30;
  pointer-events:none;
}
.ocean-creature > .ocean-sprite { inset:0; width:100%; height:100%; transform-origin:center; }
.ocean-undulation {
  display:block; position:absolute; left:0; width:100%;
  image-rendering:pixelated; pointer-events:none;
}
/* Animals cross the full backdrop; the paper sits above their paths. */
.ocean-backdrop .ocean-creature {
  z-index:1;
  width:min(calc(var(--creature-width) * var(--ocean-unit)),calc(var(--ocean-rail) - var(--ocean-edge-gap)));
  height:auto;
}
.ocean-moray,.ocean-jellyfish {
  left:calc(var(--ocean-rail) / 2); transform:translate(-50%,-50%);
}
.ocean-school,.ocean-yellow-fish,.ocean-deep-fish {
  right:calc(var(--ocean-rail) / 2); transform:translate(50%,-50%);
}
.ocean-moray {
  --creature-width:176; top:10.3125%; aspect-ratio:103 / 31;
}
.ocean-moray > .ocean-sprite { background-image:url('underwater/moray.png'); background-size:100% 100%; }
.ocean-school {
  --creature-width:176; top:25.625%; aspect-ratio:176 / 105;
}
.ocean-school > .ocean-sprite { background-image:url('underwater/school.png?v=da3f72a9e6'); background-size:400% 100%; }
.ocean-jellyfish {
  --creature-width:100; top:41%; aspect-ratio:80 / 90;
}
.ocean-jellyfish-medium { --creature-width:84; }
.ocean-jellyfish-small { --creature-width:70; }
.ocean-jellyfish > .ocean-sprite { background-image:url('underwater/jellyfish.png'); background-size:400% 100%; }
.ocean-yellow-fish {
  --creature-width:50; top:45.9375%; aspect-ratio:135 / 54;
}
.ocean-yellow-fish > .ocean-sprite { transform:scaleX(-1); }
.ocean-yellow-fish > .ocean-sprite {
  background-image:url('underwater/yellow-fish.png'); background-size:100% 100%;
}
.ocean-bottom-fish > .ocean-sprite {
  background-image:url('underwater/bottom-fish.png'); background-size:200% 100%;
}
.ocean-deep-fish {
  --creature-width:262; top:65%; aspect-ratio:279 / 61;
}
.ocean-deep-fish > .ocean-sprite { background-image:url('underwater/deep-fish.png'); background-size:100% 100%; }
html[data-scene="underwater"] .ocean-seafloor {
  --floor-unit:clamp(1px,.277777778vw,3px);
  display:block; position:relative; z-index:0; overflow:hidden;
  height:calc(140 * var(--floor-unit));
  background:#100c30 url('underwater/water.png') bottom / 100% 457.142857% no-repeat;
  image-rendering:pixelated;
}
.ocean-seafloor-art {
  position:relative; width:calc(360 * var(--floor-unit)); height:100%; margin:0 auto;
  background:url('underwater/seafloor.png') center / 100% 100% no-repeat;
}
.ocean-bottom-fish {
  left:20%; top:20%; transform:translate(-50%,-50%);
  /* Extra frame space fits both fin poses at the existing body scale. */
  width:calc(56 * var(--floor-unit)); height:calc(26 * var(--floor-unit));
}
.ocean-vent {
  left:calc(154 * var(--floor-unit)); top:calc(59 * var(--floor-unit));
  width:calc(42 * var(--floor-unit)); height:calc(18 * var(--floor-unit));
  background-image:url('underwater/vent.png');
}
/* Keep useful reading space as the decorative margins get narrower. */
@media (min-width:1100px) {
  html[data-scene="underwater"] #field-journal { padding-left:44px; padding-right:44px; }
}
@media (min-width:581px) and (max-width:1099px) {
  html[data-scene="underwater"] body { --ocean-rail:max(10%,calc((100% - 820px) / 2)); --ocean-edge-gap:24px; }
  html[data-scene="underwater"] #field-journal { width:80%; padding-left:30px; padding-right:30px; }
  html[data-scene="underwater"] #field-journal .fj-top { align-items:flex-start; }
  html[data-scene="underwater"] #field-journal .fj-hero { display:block; }
  html[data-scene="underwater"] #field-journal .fj-art { max-width:430px; margin:20px auto 0; }
  html[data-scene="underwater"] #field-journal .fj-stories { grid-template-columns:1fr; }
}
@media (max-width:580px) {
  html[data-scene="underwater"] body { --ocean-rail:12px; --ocean-unit:1px; }
  html[data-scene="underwater"] #field-journal { width:calc(100% - 24px); padding:20px 18px; }
  #field-journal .fj-scene-controls { justify-content:flex-start; gap:4px 8px; padding-top:12px; }
  #field-journal .fj-scene-controls label { flex-basis:100%; }
  html[data-scene="underwater"] #field-journal .fj-nav { font-size:11px; gap:5px; }
  html[data-scene="underwater"] #field-journal .fj-nav a.fj-submit { padding:8px 7px; }
  /* These rails are too narrow for a whole animal; the seafloor remains animated. */
  .ocean-backdrop .ocean-creature { display:none; }
}