/* 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; } }