/* Plunder streak chip under the cargo bar (js/plunder.js): green while it builds, brass once it is capped. */
.streak { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 18px; padding: 0 7px; border-radius: 3px;
  background: rgba(8,34,45,.75); border: 1px solid rgba(134,196,111,.6); color: #bfe8b0; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums;
  animation: streak-in .25s ease-out; }
.streak.max { border-color: var(--brass); color: #f0c766; box-shadow: 0 0 0 2px rgba(192,143,46,.35); }
@keyframes streak-in { from { transform: scale(1.15); } to { transform: none; } }
/* a streak worth banking on a failing hull: red, pulsing (js/juice-ui.js); the reduced-motion form stays red, still */
.streak.risk { border-color: #e2553f; color: #ffd0c4; background: rgba(110,24,14,.85); animation: streak-risk .7s ease-in-out infinite alternate; }
@keyframes streak-risk { from { box-shadow: 0 0 0 0 rgba(226,85,63,.0); } to { box-shadow: 0 0 0 4px rgba(226,85,63,.55); background: rgba(170,38,22,.92); } }
@media (prefers-reduced-motion: reduce) { .streak, .streak.risk { animation: none; } }

/* the crew is patching the hull (js/repair.js): a soft green glow on the hull bar */
.bar.hp.mend { border-color: #9fe0a0; box-shadow: 0 0 8px 1px rgba(159,224,160,.55); animation: mend-glow 1.4s ease-in-out infinite; }
@keyframes mend-glow { 50% { box-shadow: 0 0 12px 3px rgba(159,224,160,.85); } }
@media (prefers-reduced-motion: reduce) { .bar.hp.mend { animation: none; } }
/* the escorts' hull under the Ship Lv label, in the chart's own column (js/escort-hud.js): a slim bar each, green to red, grey once sunk */
#escHud { display: grid; gap: 3px; width: var(--mini-w, 124px); justify-self: end; }
#escHud[hidden] { display: none; }
.eh { position: relative; height: calc(15px * var(--ts, 1)); overflow: hidden; border-radius: 3px; background: rgba(8,34,45,.75); border: 1px solid rgba(246,241,227,.25);
  display: flex; justify-content: space-between; align-items: center; padding: 0 5px; box-sizing: border-box; font-size: calc(10px * var(--ts, 1)); font-weight: 700; letter-spacing: .03em;
  line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.eh i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#6fbf68, #3f8a45); opacity: .85; transition: width .2s; }
.eh span, .eh b { position: relative; }
.eh.low i { background: linear-gradient(#e8745a, #b3321f); }
.eh.low { border-color: #e2553f; }
.eh.hit { border-color: #ffd24a; animation: ehHit .6s ease-in-out infinite alternate; }
@keyframes ehHit { to { box-shadow: 0 0 6px 1px #ffd24a; } }
.eh.sunk { opacity: .6; }
.eh.sunk i { width: 0 !important; }
@media (prefers-reduced-motion: reduce) { .eh i { transition: none; } .eh.hit { animation: none; } }
/* the captain's masts (js/masts.js): one small mast per mast of the hull, in the hull bar between its label and its figure; gold while it stands, grey once it is shot away */
.mast-ind { display: inline-flex; align-items: center; gap: 2px; font-style: normal; }
.mast-ind[hidden] { display: none; }
.mast-ind svg { height: min(calc(14px * var(--ts, 1)), 7.5cqw); width: auto; aspect-ratio: 10 / 14; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #000); }
.mast-ind svg.up { stroke: #f0c766; } .mast-ind svg.up .cl { fill: rgba(246,241,227,.85); stroke: none; }
.mast-ind svg.down { stroke: rgba(246,241,227,.4); } .mast-ind svg.down .cl { stroke: rgba(246,241,227,.4); }
.mast-ind.hurt svg.down { stroke: #e2553f; } .mast-ind.hurt svg.down .cl { stroke: #e2553f; }