/* Ship health: a gold-rimmed glass tube of bright, slowly moving elixir. */
.ship-health-layer{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.ship-health-layer[hidden],.ship-health[hidden]{display:none}
.ship-health{position:absolute;left:0;top:0;width:var(--bar-width,140px);will-change:transform}
.ship-health-name{margin:0 0 4px;text-align:center;font:italic 11px Georgia,'Times New Roman',serif;letter-spacing:.05em;
  color:#f2e8d1;text-shadow:0 1px 2px #000,0 0 6px #000c,0 0 12px #0009;white-space:nowrap}
.ship-health-tube{position:relative;height:var(--bar-height,9px);border:1px solid #d9c18b;border-radius:6px;overflow:hidden;
  background:linear-gradient(#0b1716e6,#172522e6);
  box-shadow:0 0 0 1px #0009,0 2px 8px #0008,0 0 10px #d8b45926,inset 0 1px 2px #000c}
/* Glass sheen over the whole tube, above the liquid. */
.ship-health-tube::after{content:'';position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background:linear-gradient(#ffffff38,#ffffff08 45%,#0000 55%,#ffffff12)}
/* Pale trail of recently lost health. */
.ship-health-ghost{position:absolute;left:1px;top:1px;bottom:1px;width:calc(var(--ghost,100%) - 2px);border-radius:4px;
  background:linear-gradient(#fff6dccc,#f3dfaa99)}
.ship-health-fill{position:absolute;left:1px;top:1px;bottom:1px;width:calc(var(--health,100%) - 2px);border-radius:4px;overflow:hidden;
  background:linear-gradient(100deg,var(--deep),var(--bright) 30%,var(--deep) 55%,var(--bright) 80%,var(--deep));
  background-size:220% 100%;animation:elixir-flow 4.8s linear infinite;
  box-shadow:0 0 7px var(--glow),inset 0 -2px 2px #0005;
  filter:brightness(calc(1 + var(--flash,0) * .9)) saturate(1.15)}
/* Gloss on the liquid, and a soft light band drifting through it. */
.ship-health-fill::before{content:'';position:absolute;left:0;right:0;top:0;height:45%;border-radius:4px 4px 2px 2px;
  background:linear-gradient(#ffffffa6,#ffffff22)}
.ship-health-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,#0000 35%,#ffffff55 48%,#0000 60%);background-size:300% 100%;
  animation:elixir-shine 3.6s ease-in-out infinite}
/* The liquid's surface edge: a faint jelly wobble. */
.ship-health-fill i{position:absolute;right:-1px;top:-1px;bottom:-1px;width:4px;border-radius:50%;
  background:radial-gradient(circle at 30% 40%,#ffffffcc,var(--bright) 60%,#0000 75%);
  animation:elixir-wave 1.9s ease-in-out infinite}
.ship-health.low .ship-health-fill{animation:elixir-flow 4.8s linear infinite,elixir-blink 1.05s ease-in-out infinite}
.ship-health.critical .ship-health-fill{animation:elixir-flow 4.8s linear infinite,elixir-blink .48s ease-in-out infinite}
.ship-health.critical .ship-health-tube{box-shadow:0 0 0 1px #0009,0 2px 8px #0008,0 0 12px #ff304866,inset 0 1px 2px #000c}
@keyframes elixir-flow{from{background-position:0 0}to{background-position:-220% 0}}
@keyframes elixir-shine{0%,15%{background-position:120% 0}85%,100%{background-position:-120% 0}}
@keyframes elixir-wave{0%,100%{transform:scaleY(1) translateX(0)}50%{transform:scaleY(.86) translateX(-1px)}}
@keyframes elixir-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.ship-health-fill,.ship-health-fill::after,.ship-health-fill i{animation:none!important}}
/* White flag of surrender above the bar: rises up its pole, then flutters gently. */
.ship-health-flag{height:0;overflow:visible;display:flex;justify-content:center;opacity:0;transition:opacity .6s ease}
.ship-health-flag svg{width:30px;height:28px;margin-top:-30px;overflow:visible;filter:drop-shadow(0 1px 2px #000b)}
.ship-health.surrendered .ship-health-flag{height:30px;opacity:1}
.ship-health.surrendered .ship-health-flag svg{margin-top:0}
.ship-health-flag .pole{stroke:#d9c18b;stroke-width:1.6;stroke-linecap:round}
.ship-health-flag .finial{fill:#e9d2a2}
.ship-health-flag .cloth{fill:#f8f6ef;stroke:#ffffff;stroke-width:.5;transform-box:fill-box;transform-origin:0 50%}
.ship-health.surrendered .ship-health-flag .cloth{animation:flag-raise 1.6s cubic-bezier(.2,.7,.2,1) both,flag-wave 2.4s ease-in-out 1.6s infinite}
@keyframes flag-raise{from{transform:translateY(22px) scaleX(.4);opacity:.2}to{transform:none;opacity:1}}
@keyframes flag-wave{0%,100%{transform:skewY(0) scaleX(1)}30%{transform:skewY(-3deg) scaleX(.95)}65%{transform:skewY(2.5deg) scaleX(.98)}}
@media(prefers-reduced-motion:reduce){.ship-health.surrendered .ship-health-flag .cloth{animation:none}}
/* The Wanderer's bar sits in the vessel card, under the speed readout. */
.ship-health.player-health{position:relative;left:auto;top:auto;width:100%;margin-top:10px;transform:none;--bar-height:9px}
.player-health-label{margin-top:5px;font:italic 11px Georgia,'Times New Roman',serif;letter-spacing:.04em;color:#e9d2a2cc}
.player-health.critical .player-health-label{color:#ff9a8f}
/* Hostile marker: gold ring, red elixir orb with a warning mark, a slow red ripple. */
.ship-health-hostile{position:relative;height:0;display:flex;justify-content:center;align-items:flex-end;opacity:0;transform:scale(.4);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.6,.4,1),height .3s ease}
.ship-health.hostile .ship-health-hostile{height:34px;opacity:1;transform:none}
.hostile-ring{position:relative;width:24px;height:24px;margin-bottom:5px;border-radius:50%;border:1.5px solid #d9c18b;
  background:radial-gradient(circle at 50% 45%,#1b2b2be6,#0b1716f2);
  box-shadow:0 0 0 1px #0009,0 2px 6px #000a,0 0 9px #d8b45940,inset 0 1px 2px #000c}
.hostile-core{position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffc2b4 0,#ff4a3a 38%,#c8101f 70%,#6e070d 100%);
  box-shadow:0 0 8px #ff3048cc,inset 0 -2px 3px #0006;animation:hostile-pulse 1.3s ease-in-out infinite}
/* Gloss and the warning mark on the orb. */
.hostile-core::before{content:'';position:absolute;left:18%;top:10%;width:52%;height:30%;border-radius:50%;background:linear-gradient(#ffffffb0,#ffffff10)}
.hostile-core::after{content:'!';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 12px Georgia,'Times New Roman',serif;color:#fff4dc;text-shadow:0 1px 1px #5a0007,0 0 3px #fff4dc66}
.hostile-ripple{position:absolute;left:50%;bottom:5px;width:24px;height:24px;margin-left:-12px;border-radius:50%;
  border:1.5px solid #ff5a4a;opacity:0;pointer-events:none}
.ship-health.hostile .hostile-ripple{animation:hostile-ripple 1.9s ease-out infinite}
@keyframes hostile-pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(.9);filter:brightness(1.35)}}
@keyframes hostile-ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.hostile-core,.ship-health.hostile .hostile-ripple{animation:none}}