/* Two continuous defense bars; effects never alter their authoritative fill. */
#ship-vitals {
  /* Same blue as ship-effects.js shield surface and impact flashes. */
  --vitals-blue: #50d5ff; --vitals-hull: #e8bc88;
  position: absolute; z-index: 5; left: calc(7px * var(--game-scale,1));
  bottom: calc(var(--vitals-safe-bottom,0) * var(--game-scale,1) * 1px + 8px);
  width: min(360px,calc(100% - 24px)); color: #d7f0ef;
  font: 9px/1.1 Arial,sans-serif; pointer-events: none; user-select: none;
}
#ship-vitals[hidden], body:not(.playing) #ship-vitals { display: none; }
.vitals-console { position: relative; padding: 5px 8px; border: 1px solid #58859377; border-radius: 4px; background: linear-gradient(115deg,#102637dc,#091923d9); box-shadow: inset 0 1px #b9edec1c,0 2px 8px #0003; isolation: isolate; }
.vitals-console::before, .vitals-console::after { content: ''; position: absolute; width: 14px; height: 4px; border-color: #8cddd9; border-style: solid; opacity: .8; pointer-events: none; }
.vitals-console::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; border-radius: 4px 0 0; }
.vitals-console::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; border-radius: 0 0 4px; }
.vitals-meters { display: grid; gap: 5px; min-width: 0; }
.vitals-meter { --meter-color: var(--vitals-blue); --hit-color: var(--vitals-blue); --loss-color: #9ceeff; --recovery-color: var(--vitals-blue); display: grid; grid-template-columns: 57px minmax(0,1fr) 30px; column-gap: 5px; align-items: center; min-width: 0; min-height: 16px; }
.vitals-meter[data-vital=hull] { --meter-color: var(--vitals-hull); --hit-color: #ff977c; --loss-color: #ffd29c; --recovery-color: #9ae8cd; }
.vitals-meter[data-vital=hull][data-level=low] { --meter-color: #edc36e; }
.vitals-meter[data-vital=hull][data-level=critical] { --meter-color: #ff8e83; }
.vitals-meter[data-level=absent] { --meter-color: #64838e; }
.vitals-meter-heading { display: contents; color: var(--meter-color); font-size: 8px; font-weight: 600; letter-spacing: .06em; }
.vitals-meter-heading svg { grid-column: 1; grid-row: 1; width: 10px; height: 10px; }
.vitals-meter-heading > span { grid-column: 1; grid-row: 1; padding-left: 14px; white-space: nowrap; }
.vitals-meter-heading strong { grid-column: 3; grid-row: 1; text-align: right; font-size: 11px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vitals-track { grid-column: 2; grid-row: 1; position: relative; height: 9px; overflow: clip; border: 1px solid color-mix(in srgb,var(--meter-color) 45%,transparent); border-radius: 2px; background: #020e15; box-shadow: 0 0 6px color-mix(in srgb,var(--meter-color) 12%,transparent); }
.vitals-fill, .vitals-loss, .vitals-hit-ripple, .vitals-hit-arcs, .vitals-scan { position: absolute; inset: 0; }
.vitals-fill, .vitals-loss { transform-origin: left; }
.vitals-fill { overflow: clip; background: linear-gradient(0deg,color-mix(in srgb,var(--meter-color) 55%,#193b45),var(--meter-color)); box-shadow: inset 0 1px #f4ffff80; }
[data-vital=shield] .vitals-fill { background: linear-gradient(0deg,#1261c4,#219dff 48%,var(--vitals-blue)); box-shadow: inset 0 1px #b7f0ff88; }
.vitals-loss { background: var(--loss-color); opacity: .7; }
.vitals-hit-flash { grid-column: 2; grid-row: 1; position: relative; z-index: 1; width: 100%; height: 9px; border-radius: 2px; background: radial-gradient(ellipse at var(--hit-at,50%) 50%,#f4fbff 0%,var(--hit-color) 24%,color-mix(in srgb,var(--hit-color) 40%,transparent) 55%,transparent 85%); box-shadow: 0 0 5px var(--hit-color),0 0 12px color-mix(in srgb,var(--hit-color) 45%,transparent); opacity: 0; }
.vitals-hit-ripple { width: 32%; background: linear-gradient(90deg,transparent,var(--hit-color) 28%,#efffff 31%,var(--hit-color) 35%,transparent 48%,var(--hit-color) 68%,#efffff 71%,transparent 80%); opacity: 0; }
.vitals-hit-arcs { z-index: 2; width: 100%; height: 100%; fill: none; stroke: var(--hit-color); stroke-width: .8; opacity: 0; transform-origin: center; filter: drop-shadow(0 0 2px var(--hit-color)); }
.vitals-hit-arcs path:last-child { stroke: #e6f8ff; stroke-width: .5; }
.vitals-scan { width: 36%; background: linear-gradient(90deg,transparent,#deffff35,transparent); transform: translateX(-110%); animation: vitals-scan 5s linear infinite; }
.vitals-readout { display: contents; }
.vitals-readout > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vitals-meter[data-level=critical] .vitals-track,
#ship-vitals[data-critical=true] [data-vital=hull] .vitals-track { animation: vitals-warning 1.4s ease-in-out infinite; }
[data-vital=shield][data-level=low] .vitals-track { border-color: #edc36e88; }
[data-vital=shield][data-level=critical] .vitals-track { border-color: #ff8e83aa; }
.vitals-meter[data-recovery=true] .vitals-track { box-shadow: inset 0 0 5px color-mix(in srgb,var(--recovery-color) 45%,transparent),0 0 9px color-mix(in srgb,var(--recovery-color) 40%,transparent); }
.vitals-meter[data-recovery=true] .vitals-scan { background: linear-gradient(90deg,transparent,var(--recovery-color),#e6f8ff,transparent); animation-duration: 1.2s; }
#ship-vitals[data-paused=true] *, #ship-vitals[data-paused=true] *::before, #ship-vitals[data-paused=true] *::after { animation-play-state: paused; }
@keyframes vitals-warning { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes vitals-scan { 0%,25% { transform: translateX(-110%); opacity: 0; } 35%,65% { opacity: .8; } 85%,100% { transform: translateX(380%); opacity: 0; } }
@media (max-width:620px) {
  #ship-vitals { width: clamp(136px,calc(100% - 184px),360px); }
  .vitals-console { padding: 4px 6px; }
  .vitals-meters { gap: 4px; }
  .vitals-meter { grid-template-columns: 42px minmax(0,1fr) 25px; column-gap: 4px; min-height: 14px; }
  .vitals-meter-heading svg { display: none; }
  .vitals-meter-heading > span { padding-left: 0; }
  .vitals-meter-heading strong { font-size: 10px; }
  .vitals-track { height: 8px; }
  .vitals-hit-flash { height: 8px; }
}
@media (prefers-reduced-motion:reduce) { #ship-vitals *, #ship-vitals *::before, #ship-vitals *::after { animation: none !important; } }