/* Blue water belongs to the aquarium; the execution surfaces keep their charcoal. */
#fih-arena .tank-stage,
#fih-arena .aquarium > .living-market {
  background:
    radial-gradient(ellipse at 42% 0%, #53bcd627, transparent 64%),
    linear-gradient(180deg, #174b68 0%, #103d5a 36%, #0b2e48 72%, #092337 100%) !important;
}

#fih-arena .tank-stage::before {
  background:
    linear-gradient(111deg, transparent 12%, #a9e9f309 12.3%, #a9e9f303 21%, transparent 21.3%, transparent 64%, #a9e9f307 64.3%, transparent 75%),
    radial-gradient(ellipse at 34% 92%, #76bdce0b, transparent 48%) !important;
  opacity: .8 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none;
}

#fih-arena .tank-chrome::after {
  content: '';
  position: absolute;
  inset: auto 0 -7px;
  height: 7px;
  border-top: 1px solid #a8e1ed4d;
  background: linear-gradient(180deg, #83d6e714, transparent);
  pointer-events: none;
}

#fih-arena .tank-stage::after {
  background: repeating-linear-gradient(90deg, #536b6955 0 5px, #203f4855 5px 11px, #8a927444 11px 14px) !important;
}

#fih-arena .aquarium-waterline {
  border-top-color: #a8e1ed66;
  background: #83d6e714;
}

#fih-arena .aquarium .living-market::after {
  background: linear-gradient(0deg, #102f36, transparent) !important;
}

/* Keep the habitat below the fish and outside every pointer target. */
#fih-arena .ocean-habitat {
  position: absolute;
  inset: auto 0 0;
  height: 60px;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

#fih-arena .ocean-habitat * { pointer-events: none; }

#fih-arena .ocean-kelp {
  position: absolute;
  left: var(--kelp-x, 5%);
  bottom: 4px;
  width: 28px;
  height: clamp(48px, var(--kelp-height, 60px), 70px);
  color: #4f9878;
  fill: currentColor;
  opacity: .86;
  transform-origin: 50% 100%;
  animation: ocean-kelp-sway 7s ease-in-out var(--kelp-delay, 0s) infinite alternate;
  animation-play-state: paused;
}

#fih-arena .ocean-kelp:nth-of-type(2n) { color: #74aa78; }
#fih-arena .ocean-kelp svg { display: block; width: 100%; height: 100%; }
#fih-arena .ocean-kelp:nth-of-type(3n) { color: #377f70; }
#fih-arena[data-swim-state='swimming'] .ocean-kelp { animation-play-state: running; }

#fih-arena .ocean-pebble {
  position: absolute;
  left: var(--pebble-x, 50%);
  bottom: 3px;
  width: var(--pebble-size, 12px);
  height: 7px;
  border-radius: 65% 55% 30% 35%;
  background: #71837a;
  box-shadow: inset 0 -2px #3d5a5c;
}

#fih-arena .ocean-pebble:nth-of-type(2n) { background: #8a927b; height: 5px; }

#fih-arena .ocean-crab {
  position: absolute;
  left: var(--crab-x, 76%);
  bottom: 7px;
  width: 34px;
  height: 24px;
  color: #c18769;
  fill: currentColor;
}

@keyframes ocean-kelp-sway {
  from { transform: rotate(-2deg) skewX(-1deg); }
  to { transform: rotate(2deg) skewX(1deg); }
}

#fih-arena[data-document-hidden='true'] .ocean-kelp,
#fih-arena[hidden] .ocean-kelp,
#fih-arena [hidden] .ocean-kelp {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #fih-arena .ocean-kelp { animation: none; }
}
@media (max-width: 800px) {
  #fih-arena .ocean-crab { left: 45%; bottom: 0; width: 25px; height: 18px; }
}