/* ==========================================================================
   ROUND 35 (owner item 8) — THE PASSIVE ROW.

   "Add 3 passive effects slots more similar to survivor!.io that has 6
   passive and 6 active weapon slots... make those 3 only for passive
   effects." Six weapon slots and three passive slots (data/weapons.js
   RUN_SLOTS / slotUsage(run, kind)), drawn as two rows in three places:

     - the in-run HUD rack (ui/hud.js mount(): `hud-slots` then
       `hud-passive-slots`, class `.pb-hud__rack--passives`);
     - the Weapon Stage overlay's loadout strip (ui/hud.js
       buildLoadoutStrip(): `levelup-loadout-slots` then
       `levelup-loadout-passive-slots`);
     - the pause strip (ui/menus.js buildPauseLoadout(): `pause-slots` then
       `pause-passive-slots`).

   Every rule here is scoped to the passive row or to a new class. Nothing
   touches the `.pb-hud__slot` / `.pb-hud__pslot` rules the weapon row reads
   (styles.css 4.12). Without this file (before index.html links it) the
   passive row still renders with the existing rack and strip styles: the
   empty passive tile is then a solid ring with a "+" instead of a dashed
   one, and the rows sit at the base gaps.
   ========================================================================== */

/* HUD rack: a passive tile wears two corner marks wider than itself — the
   "Rank N" badge spills 5px past its right edge, and the EVO badge of a
   passive that partners two weapons (two icons and an "or" pill, pinned
   top-left) measured 42px wide on a 24px tile at 375x812. At the weapon
   row's 6px gap that badge ran 4px into the next passive tile and 8px into
   the next tile's own EVO badge. 22px keeps every badge off its neighbour
   (the row is three tiles, 116px wide on a phone, so the room is there). */
.pb-hud__rack--passives { gap: 22px; }

/* An empty passive slot: the same dashed "promise" outline an empty weapon
   slot wears (`.pb-hud__slot--empty`), on the passive's round tile. Needed as
   its own class because `.pb-hud__pslot`'s `border` shorthand is declared
   after `.pb-hud__slot--empty` in styles.css and would win the tie. */
.pb-hud__pslot--empty {
  background: rgba(8,11,6,.42);
  border-style: dashed; border-color: rgba(242,232,208,.28);
}
.pb-hud__pslot--empty .pb-slot__plus { font-size: 12px; }

/* Level-up strip and pause strip: the passive row sits under the weapon row.
   Its tiles are the strip's existing round passive tile
   (`.pb-loadout-strip__slot--passive`). The weapon row keeps its label on a
   line of its own (round 13: six tiles need the full width), but three
   passive tiles leave room beside their label, so row 2 puts the label on
   the left and saves that line of height over the Weapon Stage cards. */
.pb-loadout-strip__row--passives { flex-direction: row; align-items: center; gap: 8px; }
.pb-loadout-strip__row--passives > .pb-loadout-strip__label { width: auto; flex: 0 0 auto; }
.pb-loadout-strip__slots--passives { gap: 8px; padding-top: 2px; }

/* Phone: the level-up strip already shrinks every tile to 48px here
   (styles.css "MOBILE: compress, don't clip"). The passive row's round tiles
   drop to 40px so the second row costs as little height above the cards as
   it can while the icon (22px) stays the same size. */
@media (max-width: 480px) {
  .pb-loadout-strip__slots--passives { gap: 6px; }
  .pb-loadout-strip__slots--passives .pb-loadout-strip__slot--passive { width: 40px; height: 40px; }
}