/* PIANO ARMY · the live partial's bar (web/army-pbar.css; army-stage.js paintHud): in the HUD, both modes, the sheet
   music shown or not; its name and how much of it is played over a bar filling green (the card's played notes'
   colour), full and flashing gold when it is played to its end */
#hud .pbar { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 96px; max-width: 400px; }
#hud .pbar .lbl { flex: none; }
/* (narrower, the label goes, so the HUD keeps to one row down to about 1280 wide; the bar names the partial itself) */
@media (max-width: 1400px) { #hud .pbar .lbl { display: none; } }
/* (and down to about 1180, an iPad on its side, the HUD's gaps and the cards' meter a little tighter) */
@media (max-width: 1240px) { #stage:not([data-orient="portrait"]) #hud { gap: 9px; } #stage:not([data-orient="portrait"]) #hud .spoils .track { width: 60px; } }
#hud .ptrack { position: relative; flex: 1 1 auto; min-width: 0; height: 22px; border-radius: 6px; background: #0b0e15; border: 1px solid var(--line); overflow: hidden; }
#hud .pfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #1f7a3f, #2f9e55); transition: width .2s; }
#hud .ptext { position: relative; display: flex; padding: 0 8px; font: 600 13.5px/20px "Barlow Condensed", Barlow, sans-serif; letter-spacing: .2px; color: #e8ecf5;
  white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#hud .ptext b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; color: #fff; }
#hud .ptext span { flex: none; white-space: pre; }
#hud .ptext i { font-style: normal; font-weight: 800; color: #ffd34a; }
#hud .ptrack.done { border-color: #f0cf85; animation: pbar-flash .4s ease-in-out 3 alternate; }
#hud .ptrack.done .pfill { background: linear-gradient(90deg, #b07d1e, #f0cf85); }
#hud .ptrack.done .ptext, #hud .ptrack.done .ptext b { color: #241a06; text-shadow: none; }
#hud .ptrack.done .ptext i { color: #7a2a00; }
@keyframes pbar-flash { from { box-shadow: 0 0 0 0 rgba(240, 207, 133, 0); } to { box-shadow: 0 0 12px 2px rgba(240, 207, 133, .9); } }
/* portrait: a row of its own under the two, the whole width */
#stage[data-orient="portrait"] #hud { grid-template-rows: 30px 24px 20px; grid-template-areas: "gold timer vs btns" "squad squad spoils spoils" "pbar pbar pbar pbar"; }
#stage[data-orient="portrait"] #hud .pbar { grid-area: pbar; max-width: none; min-width: 0; }
#stage[data-orient="portrait"] #hud .pbar .lbl { display: none; }
#stage[data-orient="portrait"] #hud .ptrack { height: 18px; }
#stage[data-orient="portrait"] #hud .ptext { font-size: 12px; line-height: 16px; }