.underwater-dive-hud {
  position: fixed;
  inset: 0;
  z-index: 34;
  width: auto;
  color: #eafaff;
  pointer-events: none;
}

.underwater-dive-hud.hidden { display: none; }

.underwater-dive-hud-energy {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 47px;
  transform: translateX(-50%);
}

.underwater-dive-hud.no-energy-readout .underwater-dive-hud-energy { display: none; }

.underwater-dive-hud-pearls {
  position: relative;
  width: 131px;
  min-height: 31px;
}

.underwater-dive-hud-pearl {
  --pearl-scale: 1;
  --pearl-opacity: 1;
  --pearl-pop-scale: 1.12;
  --pearl-squash-scale: 0.76;
  --pearl-stretch-scale: 1.08;
  --pearl-settle-x: 0.94;
  --pearl-delay: 0ms;
  position: absolute;
  top: 1px;
  left: 51px;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 255, 255, 0.98) 0 8%, rgba(206, 251, 255, 0.86) 9% 19%, transparent 20%),
    radial-gradient(circle at 42% 38%, #c9f9ff 0 12%, #58d7f3 39%, #138bc5 72%, #075f91 100%);
  box-shadow:
    inset -3px -4px 7px rgba(0, 44, 91, 0.44),
    inset 2px 2px 4px rgba(255, 255, 255, 0.52),
    0 0 10px rgba(70, 219, 255, 0.72),
    0 3px 8px rgba(0, 30, 58, 0.38);
  opacity: var(--pearl-opacity);
  transform: scale(var(--pearl-scale));
  transition: transform 220ms cubic-bezier(0.18, 0.82, 0.26, 1.2), opacity 180ms ease, filter 150ms ease;
  animation: underwater-dive-pearl-grow 520ms cubic-bezier(0.16, 0.86, 0.28, 1.24) var(--pearl-delay) both;
}

.underwater-dive-hud-pearl::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(230, 253, 255, 0.4);
  border-radius: inherit;
  content: "";
}

.underwater-dive-hud-pearl.is-partial {
  filter: saturate(0.86) brightness(0.92);
}

.underwater-dive-hud.boost-active .underwater-dive-hud-pearl {
  filter: brightness(1.2) saturate(1.12);
}

.underwater-dive-hud-energy > strong {
  color: #ffd861;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: 0.045em;
  opacity: 0;
  text-shadow: 0 1px 2px rgba(55, 32, 0, 0.9), 0 0 8px rgba(255, 205, 65, 0.34);
}

.underwater-dive-hud-energy > strong.is-visible {
  animation: underwater-dive-entry-speed 2.45s ease-out both;
}

.underwater-dive-hud-pearl.is-spent {
  animation: underwater-dive-pearl-spend 420ms cubic-bezier(0.48, 0, 0.8, 0.34) both;
}

@keyframes underwater-dive-pearl-grow {
  0% {
    opacity: 0;
    transform: scale(0.08, 0.05);
  }
  38% {
    opacity: var(--pearl-opacity);
    transform: scale(var(--pearl-pop-scale), var(--pearl-squash-scale));
  }
  64% {
    opacity: var(--pearl-opacity);
    transform: scale(var(--pearl-settle-x), var(--pearl-stretch-scale));
  }
  82% {
    opacity: var(--pearl-opacity);
    transform: scale(var(--pearl-stretch-scale), var(--pearl-settle-x));
  }
  100% {
    opacity: var(--pearl-opacity);
    transform: scale(var(--pearl-scale));
  }
}

@keyframes underwater-dive-pearl-spend {
  0% {
    opacity: var(--pearl-opacity);
    transform: scale(var(--pearl-scale));
  }
  32% {
    opacity: var(--pearl-opacity);
    transform: scale(var(--pearl-stretch-scale), var(--pearl-squash-scale));
  }
  100% {
    opacity: 0;
    filter: brightness(1.4) blur(1px);
    transform: scale(0.08, 0.18);
  }
}

@keyframes underwater-dive-entry-speed {
  0% { opacity: 0; transform: translateY(-3px) scale(0.94); }
  14%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(3px) scale(0.98); }
}
.underwater-dive-launch-status {
  position: absolute;
  top: 47%;
  left: calc(50% + clamp(86px, 19vw, 150px));
  display: grid;
  grid-template-rows: 126px auto;
  justify-items: center;
  justify-self: center;
  row-gap: 5px;
  width: 116px;
  min-height: 148px;
  padding: 0;
  color: #eafaff;
  transform: translate(-50%, -50%);
}

.underwater-dive-launch-status > strong {
  max-width: 116px;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0, 20, 28, 0.92);
}

.underwater-dive-launch-status.hidden { display: none; }

.underwater-dive-launch-meter {
  --yellow-angle: 60deg;
  --green-angle: 20deg;
  position: relative;
  width: 112px;
  height: 126px;
}

.underwater-dive-launch-meter::before {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 12px calc(100% - 12px),
    #39dfa4 0 calc(var(--green-angle) - 0.9deg),
    transparent calc(var(--green-angle) - 0.9deg) calc(var(--green-angle) + 0.9deg),
    #ffc857 calc(var(--green-angle) + 0.9deg) calc(var(--yellow-angle) - 0.9deg),
    transparent calc(var(--yellow-angle) - 0.9deg) calc(var(--yellow-angle) + 0.9deg),
    #ff6272 calc(var(--yellow-angle) + 0.9deg) 84deg,
    transparent 84deg 360deg
  );
  content: "";
  filter: drop-shadow(0 2px 1px rgba(0, 24, 32, 0.68));
  -webkit-mask: radial-gradient(
    circle at 12px calc(100% - 12px),
    transparent 0 68px,
    #000 69px 89px,
    transparent 90px
  );
  mask: radial-gradient(
    circle at 12px calc(100% - 12px),
    transparent 0 68px,
    #000 69px 89px,
    transparent 90px
  );
}

.underwater-dive-launch-meter > span {
  --marker-angle: -6deg;
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  width: 79px;
  height: 0;
  transform: rotate(var(--marker-angle));
  transform-origin: left center;
  transition: transform 45ms linear;
}

.underwater-dive-launch-meter > span::after {
  position: absolute;
  top: 0;
  right: -19px;
  width: 38px;
  height: 9px;
  border: 2px solid #092936;
  border-radius: 999px;
  background: linear-gradient(to bottom, #fff 0 45%, #d9f6ff 46% 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
  content: "";
  transform: translateY(-50%);
  transform-origin: center;
}

.underwater-dive-launch-status[data-kind="ready"] .underwater-dive-launch-meter > span::after {
  animation: underwater-dive-launch-marker-ready 440ms ease-in-out infinite alternate;
}

.underwater-dive-launch-status[data-kind="failed"],
.underwater-dive-launch-status[data-zone="red"] {
  color: #ffd4cb;
}

.underwater-dive-launch-status[data-zone="yellow"] {
  color: #fff0a8;
}

.underwater-dive-launch-status[data-zone="green"] {
  color: #caffdd;
}

@keyframes underwater-dive-launch-marker-ready {
  from {
    background: linear-gradient(to bottom, #fff 0 45%, #d9f6ff 46% 100%);
    transform: translateY(-50%) scale(1);
  }
  to {
    background: linear-gradient(to bottom, #fff 0 45%, #d7ffe8 46% 100%);
    transform: translateY(-50%) scale(1.08);
  }
}
.underwater-dive-catch-banner {
  position: fixed;
  left: 50%;
  bottom: max(142px, calc(env(safe-area-inset-bottom) + 120px));
  z-index: 35;
  min-width: 150px;
  padding: 9px 24px 8px;
  border: 1px solid rgba(255, 244, 170, 0.72);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(17, 107, 137, 0.96), rgba(7, 54, 79, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 28px rgba(0, 20, 34, 0.42), 0 0 20px rgba(89, 224, 255, 0.28);
  color: #fff5a8;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 38, 55, 0.65);
  pointer-events: none;
  transform: translateX(-50%);
}

.underwater-dive-catch-banner.hidden { display: none; }

.underwater-dive-catch-banner.pop {
  animation: underwater-dive-catch-pop 1.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes underwater-dive-catch-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.72); }
  14% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  24%, 76% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.96); }
}

@keyframes underwater-dive-energy-pulse {
  from { opacity: 0.82; }
  to { opacity: 1; }
}

@media (max-width: 680px), (pointer: coarse) {
  .underwater-dive-hud-energy {
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 82px));
  }

  .underwater-dive-catch-banner { bottom: max(210px, calc(env(safe-area-inset-bottom) + 194px)); }
}

@media (prefers-reduced-motion: reduce) {
  .underwater-dive-hud-pearl, .underwater-dive-hud-energy > strong.is-visible { transition: none; animation: none; }
  .underwater-dive-catch-banner.pop { animation: none; }
  .underwater-dive-launch-status[data-kind="ready"] { animation: none; }
}