/* PIANO ARMY · the HUD holds still (web/army-hud.css). Lionel, 10-17: "show the 10 army unit selection first, because
   right now every time the top bar changes the place you have to click changes and it messes with the commander unit
   comp selection (keeps shifting from left to right)". The squad first (leftmost; in portrait, the first row), and
   every part after it a fixed width with its figures all one width, so a number growing (the gold into debt and back,
   the timer past 9:59, the counts to three digits, the wave, the spoils) moves nothing: the debt's bar keeps its room
   in Priced units when out of debt; a line longer than its room is cut ("…"), never pushing. */
#hud { font-variant-numeric: tabular-nums; }
#hud > * { flex: none; }
#hud > .pbar { flex: 1 1 0; }
#hud .gold { position: relative; }
#hud .gold b { width: 5ch; min-width: 0; }
#hud .gold > .dim { display: inline-block; width: 7.5ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud.econ .gold > .dim { width: 13.5ch; }
#hud .gold .debt.off { visibility: hidden; }
#hud .timer b { width: 4.6ch; min-width: 0; }
#hud .vs b { display: inline-block; width: 3ch; }
#hud .vs .army b { text-align: left; }
#hud .vs .horde b { text-align: right; }
#hud .wave { width: 12.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .spoils > .dim { display: inline-block; width: 7ch; }
/* (and a little tighter, for the room the fixed widths take: the gaps, the meters, the timer's word under 1600) */
#stage:not([data-orient="portrait"]) #hud { gap: 10px; }
#stage:not([data-orient="portrait"]) #hud .spoils .track { width: 70px; }
/* (landscape: the debt's bar a thin line under the gold's figures, taking no room in the row; the red gold and the
   toast say the rest) */
#stage:not([data-orient="portrait"]) #hud .gold .debt { position: absolute; left: 34px; top: calc(50% + 14px); margin: 0; }
#stage:not([data-orient="portrait"]) #hud .gold .debt .lock { display: none; }
#stage:not([data-orient="portrait"]) #hud .gold .debt .track { width: 60px; height: 4px; }
#stage:not([data-orient="portrait"]) #hud .wave { width: 11.2em; }
@media (max-width: 1600px) { #stage:not([data-orient="portrait"]) #hud .timer .lbl span { display: none; } }

/* portrait: the squad and the buttons; the gold, the timer, the armies and the cards; the partial's bar */
#stage[data-orient="portrait"] #hud { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: 26px 26px 20px;
  grid-template-areas: "squad squad squad btns" "gold timer vs spoils" "pbar pbar pbar pbar"; }
#stage[data-orient="portrait"] #hud .squad { justify-self: start; }
#stage[data-orient="portrait"] #hud .gold b { width: 4.2ch; }
#stage[data-orient="portrait"] #hud .timer b { width: 4.6ch; }
#stage[data-orient="portrait"] #hud .vs b { width: 3ch; }
#stage[data-orient="portrait"] #hud .spoils { justify-content: flex-start; }
#stage[data-orient="portrait"] #hud .spoils .track { width: 40px; }
#stage[data-orient="portrait"] #hud .spoils > .dim { width: 7ch; }
/* (under 1300 wide: the cards meter without its word, the wave narrower, the squad's slots 22 wide: one row down to 1280) */
@media (max-width: 1300px) { #stage:not([data-orient="portrait"]) #hud .spoils > span:first-child { display: none; } #stage:not([data-orient="portrait"]) #hud .wave { width: 10em; } #stage:not([data-orient="portrait"]) #hud .squad i { width: 22px; } }