/* hud-roster.css — Phase 91 (2026-06-02).
 *
 * Floating "ROSTER" box at the right of the centered bottom infobox.
 * Sticks to the right side of .apex-tile-info-stack the same way the
 * minimap sticks to its left side — symmetric flanking elements that
 * read as one cluster with the centered selection/actions panels.
 *
 * Size + chrome match the other tile-info boxes (.apex-selection-info,
 * .apex-build-options): 240px wide, 150px tall (matching the grid's
 * `grid-template-rows: auto 150px` selected row), same dark monospace
 * card with a white-stripe inset accent.
 *
 * Layout: a header ("ROSTER") in row 1 spanning full width, then chips
 * wrap into the remaining space as a flex grid. Chips remain clickable
 * (camera-pan + select) and TAB cycling is owned by move.js.
 *
 * Position history (2026-06-02 visibility debug): an earlier pass had
 * the widget at `position: absolute; right: 12px` inside #map-viewport,
 * which placed it under #hud-right-panel — elementsFromPoint() confirmed
 * the right panel as the topmost element at the widget's center, hence
 * invisible. Now `position: fixed` with `left: calc(50% + 340px + 8px)`
 * mirrors the minimap's anchoring math (50vw center + 340px half-width
 * of the wide infobox + 8px gutter) so the box flanks the infobox
 * regardless of viewport size.
 */

#map-viewport .apex-hud-roster {
  /* Anchor — mirror of minimap. */
  position: fixed;
  left: calc(50% + 340px + 8px);
  bottom: calc(var(--apex-footer-h, 24px) + var(--apex-action-bar-h, 40px) + 10px);
  z-index: 45;

  /* Size — match the other infoboxes' grid cell (240x150). The 150px
     height matches .apex-tile-info-stack's `grid-template-rows: auto
     150px` selected/actions row so all three bottom boxes share a
     baseline AND a top edge. */
  width: 240px;
  height: 150px;
  box-sizing: border-box;

  /* Chrome — match the minimap's border exactly per Maurice's note
     2026-06-02 ("use the same border thickness we have for the
     minimap"). 1px white-22% border, 4px radius, same dark
     monospace card. The earlier 3-sided inset-stripe accent (left +
     top + right, 2px each) read too "heavy" against the minimap's
     plain 1px outline; dropped here so the two flanking boxes share
     the same visual weight. */
  padding: 7px 11px 7px 11px;
  background: rgba(10, 12, 18, 0.78);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.02em;
  line-height: 1.35;
  pointer-events: auto;

  /* Layout — wrap chips into rows below the header. align-content:
     flex-start keeps the chip rows pinned to the top instead of
     centring vertically in the leftover space. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}
#map-viewport .apex-hud-roster[hidden] { display: none; }

/* No header label — the icons + counts are self-evident. Dropped the
   "Roster" ::before pseudo-element on 2026-06-02 per Maurice's note
   ("no need to label roster, it's straightforward"). Chips fill the
   box from the top, anchored by align-content: flex-start above. */

#map-viewport .apex-hud-roster-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 4px;
  /* Plain transparent chip — the player-color shape glyph carries
     the visual weight, no need for a chip-level pill background.
     Hover still gives a faint backdrop for click affordance. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#map-viewport .apex-hud-roster-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 1);
}
#map-viewport .apex-hud-roster-chip:focus-visible {
  outline: 1px solid var(--apex-accent, #4dd0c5);
  outline-offset: 1px;
}

/* Stacked glyph: kind-shape SVG behind, Phosphor icon overlaid on top.
   The wrapper is `position: relative` so the icon can absolutely
   center inside the shape's bounding box. Bumped 22→26 + icon 14→18
   on 2026-06-02 per Maurice's note ("increase the size a bit for the
   icons") — the inner Phosphor glyphs now read at the same physical
   scale as the build-menu shape glyphs, while the shape's stroke
   outline still has room to register around the icon. */
#map-viewport .apex-hud-roster-chip-glyph {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
/* Shape SVG fills the wrapper. svgShape() emits a sized <svg> so we
   just make it stretch into the 22px slot. */
#map-viewport .apex-hud-roster-chip-shape,
#map-viewport .apex-hud-roster-chip-shape > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Phosphor icon overlay — small enough that the shape's outline
   reads cleanly around it. Dark fill via currentColor so the duotone
   layers (opacity:0.2 + currentColor strokes) both tint dark — works
   against every player color in the palette (teal / yellow / green /
   orange are all mid-light, where white washes out; red / blue /
   purple are mid-tones where dark still reads cleanly). Dropped the
   earlier `color: #ffffff` after the white-on-teal contrast was too
   low to read at 14px (Maurice's note 2026-06-02). */
#map-viewport .apex-hud-roster-chip-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
  color: #0a0c12;
  /* Soft white halo so the dark icon stays legible on the darker
     player colors (blue, purple) where dark-on-medium contrast is
     still acceptable but a touch of light halo polishes it. */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.55));
}
#map-viewport .apex-hud-roster-chip-count {
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  font-variant-numeric: tabular-nums;
  min-width: 0.8em;
  text-align: right;
}