:root {
  --housing: #0a0f11;
  --amber: #ffb454;
  --ink: #e2ecee;
  --ink-muted: #8fa5ac;
  --hairline: rgba(255, 255, 255, 0.11);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
}

body {
  background: #8ecfdf;
  overflow-x: hidden;
  font-family: "Newsreader", Georgia, serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

#hud {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: var(--housing);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, 0.85);
  padding: 9px max(18px, env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-right));
}

.hud-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

.hud-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hud-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--ink-muted);
}

.hud-value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

/* Worst-case widths in ch, so no cell resizes mid-scroll. */
.hud-value--depth {
  font-size: 24px;
  font-weight: 600;
  color: var(--amber);
  min-width: 7.5ch;
}
.hud-value--pressure {
  min-width: 10.5ch;
}
.hud-value--temp {
  min-width: 8ch;
}
.hud-value--light {
  min-width: 6ch;
}

.ocean {
  position: relative;
  height: 54675px; /* 10935m at 5px per metre */
}

.creature {
  position: absolute;
  z-index: 1;
  animation: drift var(--drift-duration, 12s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
  animation-play-state: paused;
}

.creature.is-onscreen {
  animation-play-state: running;
}

.creature img {
  display: block;
  object-fit: contain;
}

.creature.is-bio img {
  filter: drop-shadow(0 0 6px rgba(180, 240, 255, 0.55))
    drop-shadow(0 0 14px rgba(120, 220, 255, 0.35));
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Opaque housing, so the card is legible at any depth and over any sprite. */
.creature-card {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: min(280px, 74vw);
  padding: 10px 12px 11px;
  background: var(--housing);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.creature[data-side="left"] .creature-card {
  left: 0;
}
.creature[data-side="right"] .creature-card {
  right: 0;
}

.creature:hover .creature-card,
.creature:focus-visible .creature-card,
.creature.is-open .creature-card {
  opacity: 1;
  transform: translateY(0);
}

.creature:hover,
.creature:focus-within,
.creature.is-open {
  z-index: 6;
}

.creature-name {
  display: block;
  margin-bottom: 5px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.creature-fact {
  display: block;
  font-size: 15px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}

.creature-depth {
  display: block;
  margin-top: 7px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* Text on water, nothing behind it. The 200m colour stop is dark enough
   that amber clears 5.6:1 from Twilight down. pointer-events is off so a
   marker never intercepts a tap meant for an animal. */
.zone,
.landmark {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 70px 24px;
  pointer-events: none;
}

.zone-inner,
.landmark-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.zone-depth,
.landmark-depth {
  display: block;
  margin-bottom: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}

/* Negative margin removes the trailing space the last letter carries. */
.zone-letters {
  display: block;
  margin-right: -0.34em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1;
  color: var(--amber);
}

.zone-copy {
  margin-top: 16px;
  max-width: 42ch;
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}

.landmark-inner {
  max-width: 46ch;
}

.landmark p {
  font-size: 20px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}

.landmark p + p {
  margin-top: 1em;
}

.landmark--floor .landmark-inner {
  max-width: 50ch;
}

/* Amber on bright cyan measures 1.02:1. The surface marker runs dark ink. */
.zone[data-ink="dark"] .zone-letters {
  color: #06202a;
}
.zone[data-ink="dark"] .zone-copy {
  color: #06202a;
}
.zone[data-ink="dark"] .zone-depth {
  color: #0d2f3c;
}

@media (max-width: 900px) {
  .zone-letters {
    font-size: 21px;
  }
  .zone-copy,
  .landmark p {
    font-size: 18px;
  }
  .zone,
  .landmark {
    padding: 64px 22px;
  }
}

@media (max-width: 560px) {
  #hud {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .hud-inner {
    gap: 10px;
  }
  .hud-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .hud-value {
    font-size: 12.5px;
  }
  .hud-value--depth {
    font-size: 19px;
  }

  .zone,
  .landmark {
    padding: 54px 18px;
  }
  .zone-letters {
    font-size: 17px;
    letter-spacing: 0.26em;
    margin-right: -0.26em;
  }
  .zone-depth,
  .landmark-depth {
    margin-bottom: 11px;
    font-size: 10px;
  }
  .zone-copy {
    margin-top: 16px;
    font-size: 17px;
  }
  .landmark p {
    font-size: 17px;
  }
  .creature-fact {
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .creature {
    animation: none;
  }
  .creature-card {
    transition: none;
    transform: none;
  }
}