/* PIANO ARMY · the square map (web/army-bigmap.css; the menu's Map: Square): on the field, the ground canvas the whole
   square's size (panned by the camera, army-stage.js setCam), the field's canvas taking drags (no page scroll), and
   the small map in the arena's top right corner. */
#stage[data-map="square"] #ground { inset: auto; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#stage[data-map="square"] #field { touch-action: none; cursor: grab; }
#stage[data-map="square"] #field.dragging { cursor: grabbing; }
/* (admin mode's Horde squad panel, in the same corner, just under the small map in either orientation: Lionel, 10-18:
   "the mini map and the horde selection is blocking each other, move the horde selection underneath the minimap") */
#stage[data-map="square"] #arena .hadmin { top: 8px; }
#minimap { position: absolute; right: 8px; top: 8px; z-index: 3; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; background: #2c3a22;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); cursor: pointer; touch-action: none; opacity: 0.92; }
/* the small map at the field's bottom right since 10-22 (Lionel: "we need to move the minimap to the bottom right of the
   screen, like in league of legends"), every mode: above his hero's bar where that bar stands in the corner (2D); the
   3D view's bar is at the top, the corner its own */
#minimap { top: auto; bottom: 52px; }
#stage.rendering-3d #minimap { bottom: 8px; }
/* (the 3D view's frame readout, there before it, above the small map now) */
#stage.rendering-3d .live-3d-stats { bottom: calc(var(--mini, 120px) + 16px); }
/* his hero's bar (the square map: army-stage.js paintHero): its name and whose it is, its two spells with their keys and
   the seconds left on each (a shade while it cools), Move and Auto; the field's bottom right corner (in portrait its top
   left); a spell or Move waiting for a click on the field lit, the field's cursor a crosshair */
.herobar { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 10px;
  background: rgba(14, 18, 34, 0.86); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); font: 600 12px/1 "Barlow Condensed", Barlow, sans-serif; color: #e8ecf8; }
.herobar[hidden] { display: none; }
.herobar .hh { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.herobar .hh span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #9fb2d8; }
.herobar .hh span.yours { color: #ffd34a; }
.herobar .hh span.down { color: #ff8a7a; }
.herobar button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px; background: rgba(255, 255, 255, 0.07); color: inherit; font: inherit; cursor: pointer; }
.herobar button:hover { background: rgba(255, 255, 255, 0.14); }
.herobar button:disabled { opacity: .4; cursor: default; }
.herobar button.aim { border-color: #ffd34a; box-shadow: 0 0 0 1px #ffd34a inset; }
.herobar button.cd { color: #8b93a8; }
.herobar button i { font-style: normal; color: #ffd34a; min-width: 0; }
.herobar kbd { padding: 1px 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); font: 700 10px/1.2 Barlow, sans-serif; }
/* (in portrait the field's top left corner: over the squad strip it met admin's tall Horde squad panel and the docked
   cards) */
#stage[data-orient="portrait"] .herobar { left: 4px; right: auto; top: 6px; bottom: auto; flex-wrap: wrap; max-width: 214px; }
#field.aiming { cursor: crosshair; }