/* tool_planner_panel.css: the equipment panel (lane TOOL-PLANNER), drawn like the game's inventory screen.
   Layout and sprites: ext_tool_planner.py "equipment panel" and pipeline/make_planner_sprites.py (each sprite with
   its code line). Slots are the game's 52 px slot backs at 1x; the gap is 56 - 52 = 4 px (Main.cs: 56 px apart);
   coin and ammo slots use the game's 0.6 scale. Item icons are never enlarged: an icon over 32 px shrinks to 32
   (ItemSlot.cs:2984-2987). Tokens and atoms from theme.css only. */

.eqp { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin: 0 0 var(--sp-3); }
.eqp ol, .eqp ul { list-style: none; margin: 0; padding: 0; }
/* buffs top-left, then the hotbar, the 4 inventory rows and, right of them, the coin and ammo columns */
.eqp-inv { min-width: 0; max-width: 100%; overflow-x: auto; }
.eqp-buffs { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; margin: 0 0 var(--sp-2); }
.eqp-grid { display: flex; align-items: flex-start; gap: var(--sp-3); width: max-content; }
.eqp-main { display: grid; gap: 4px; }
.eqp-hotbar-row, .eqp-bag-rows { display: grid; grid-template-columns: repeat(10, 52px); gap: 4px; }
.eqp-side { display: grid; grid-template-columns: repeat(2, 31px); gap: 0 4px; margin-top: 56px; }  /* level with inventory row 1 */
.eqp-coins, .eqp-ammo { display: grid; grid-template-rows: repeat(4, 31px); gap: 2px; }

.eqp-slot {
  width: 52px; height: 52px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: center / 52px 52px no-repeat;
  image-rendering: pixelated;
}
.eqp-hotbar { background-image: url("../tool_planner/slot-hotbar.png"); }
.eqp-bag { background-image: url("../tool_planner/slot-plain.png"); opacity: 0.7; }
.eqp-held { background-image: url("../tool_planner/slot-held.png"); }
.eqp-equip { background-image: url("../tool_planner/slot-equip.png"); }
.eqp-small { width: 31px; height: 31px; background-image: url("../tool_planner/slot-plain.png"); background-size: 31px 31px; image-rendering: auto; }
.eqp-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.eqp-equip-col { display: grid; gap: 4px; }
.eqp-equip-col > .eqp-gap { margin-top: 4px; }        /* Main.cs: num35 = 4 between armor and accessories */

.eqp-item, .eqp-btn {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.eqp-ico { display: block; width: auto; height: auto; max-width: 32px; max-height: 32px; image-rendering: pixelated; }
.eqp-small .eqp-ico { max-width: 19px; max-height: 19px; }
.eqp-empty { display: block; width: 32px; height: 32px; background: center / 32px 32px no-repeat; image-rendering: pixelated; }
.eqp-empty-head { background-image: url("../tool_planner/empty-head.png"); }
.eqp-empty-body { background-image: url("../tool_planner/empty-body.png"); }
.eqp-empty-legs { background-image: url("../tool_planner/empty-legs.png"); }
.eqp-empty-acc { background-image: url("../tool_planner/empty-acc.png"); }

.eqp-buff { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.eqp-buff-add .eqp-btn { font-size: var(--fs-1); border: 2px dashed var(--c-line); }

/* defense: the game's shield (Extra_58, one frame per mode) with the number on it */
.eqp-def {
  width: 52px; height: 48px; margin: 0; display: flex; align-items: center; justify-content: center;
  background: center / 52px 48px no-repeat; image-rendering: pixelated;
  font-variant-numeric: tabular-nums; color: var(--c-ink); text-shadow: var(--outline);
}
.eqp-def-classic, .eqp-def-journey { background-image: url("../tool_planner/defense-classic.png"); }
.eqp-def-expert { background-image: url("../tool_planner/defense-expert.png"); }
.eqp-def-master { background-image: url("../tool_planner/defense-master.png"); }

/* editable (builder): a chosen slot shows the game's selected frame */
.eqp-edit .eqp-btn:hover, .eqp-edit .eqp-btn[aria-pressed="true"] { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* phones: the inventory keeps the game's 10 columns and scrolls inside its own box; the equipment column wraps below */

/* compact (default for read-only pages, and the builder under 720 px): only what the build fills, the equipment
   column right next to it, as wide as its content */
.eqp.eqp-compact { display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; gap: var(--sp-3); max-width: 100%; }
.eqp-compact .eqp-inv { overflow: visible; }
.eqp-compact .eqp-hotbar-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 52px; }
.eqp-compact .eqp-side { margin-top: 0; }
.eqp-compact .eqp-buffs:empty { display: none; }
/* compact: the inventory part is as narrow as its hotbar and ammo, the buff row wraps inside it, so the
   equipment column sits right next to the weapons */
.eqp-compact .eqp-inv { width: min-content; }
.eqp.eqp-compact { gap: var(--sp-2); }
.eqp-compact .eqp-grid { gap: 4px; }
.eqp-compact .eqp-side { grid-template-columns: 31px; }