/* The island is the main view. Open the phone for status, inventory and apps. */
#hud .control-hint,
#hud #movement-status,
#hud .vital[data-level="ok"] {
  display: none;
}

#hud .vitals:not(:has(.vital[data-level="low"], .vital[data-level="critical"])) {
  display: none;
}

#hud .vitals {
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  background: #142e34a8;
  backdrop-filter: none;
}

#hud .hud-actions button {
  min-width: 44px;
  min-height: 44px;
  border-color: #e5eee52b;
  border-radius: 8px;
  background: #142e348c;
  box-shadow: none;
}

/* Brief feedback stays near the edge, clear of the view and interaction prompt. */
#hud .toast {
  top: auto;
  bottom: 78px;
  left: 24px;
  transform: none;
  max-width: min(340px, calc(100vw - 48px));
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: #142e34d9;
  box-shadow: none;
}

@media (min-width: 651px) and (pointer: fine) {
  #hud:has(#warning:not([hidden])) .toast { bottom: 154px; }
  #hud:has(#swim-status:not([hidden])) .toast { top: 76px; bottom: auto; }
}

@media (max-width: 650px), (pointer: coarse) {
  #hud .toast {
    top: 76px;
    bottom: auto;
    left: 12px;
    max-width: min(320px, calc(100vw - 24px));
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hud .vital .vital-icon { animation: none; }
}

@media (pointer: coarse) and (max-height: 500px) {
  #hud .toast {
    left: auto;
    right: 12px;
    max-width: min(320px, calc(100vw - 230px));
  }
}