/* PIANO ARMY · the buildings' upgrades (army-unit-upgrades-ui.js): a panel of their own left of the factory panel,
   over the factory row's right end (8px above it); a row each, its name and level, what its next level changes, its price; a moved rare in gold.
   In 2D the small map stands 52px up at the right, so there both panels clear it (army-bigmap.css). On a narrow
   screen the upgrades sit at the field's left */
#stage.bases-map:not(.rendering-3d) .bases-panel { bottom: max(164px, calc(var(--mini, 120px) + 62px)); }
.unit-upgrades { position: absolute; z-index: 8; right: 350px; bottom: 172px; width: 270px; max-height: calc(100% - 180px); overflow-y: auto;
  padding: 10px; color: #e9eef5; background: #101b29f5; border: 1px solid #c5a56a; border-radius: 10px; box-shadow: 0 8px 24px #0006; font: 12px system-ui;
  display: grid; gap: 5px; }
#stage.bases-map:not(.rendering-3d) .unit-upgrades { bottom: max(172px, calc(var(--mini, 120px) + 62px)); }
.unit-upgrades[hidden] { display: none; }
.unit-upgrades header { display: flex; align-items: baseline; gap: 8px; color: #ffdb87; }
.unit-upgrades header small { color: #b5c2d1; }
.unit-upgrades article { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; border: 1px solid #2f4258; border-radius: 6px; background: #16243a; }
.unit-upgrades article.rare { border-color: #9b7a3c; background: #2a2416; }
.unit-upgrades article > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.unit-upgrades article b small { font-weight: 600; color: #ffdb87; margin-left: 4px; }
.unit-upgrades .up-change { font-size: 11px; color: #d5e1ee; }
.unit-upgrades [data-up-status] { font-size: 10px; color: #f2d596; }
.unit-upgrades [data-up-status]:empty { display: none; }
.unit-upgrades button { min-width: 62px; padding: 6px 8px; border: 1px solid #586c80; border-radius: 5px; background: #253548; color: #eef4ff; font: 700 11px system-ui; cursor: pointer; }
.unit-upgrades button:disabled { opacity: .45; cursor: not-allowed; }
.unit-upgrades footer { font-size: 10px; color: #8fa1b5; }
@media(max-width:780px) { .unit-upgrades, #stage.bases-map:not(.rendering-3d) .unit-upgrades { right: auto; left: 6px; width: 250px; bottom: 8px; max-height: calc(100% - 16px); } }