/* === myaac equipment layout === */
.equip-inline .equip__grid {
  display: grid;
  justify-content: center;             /* center the whole block */
  gap: 8px;
  padding: 10px;          /* parchment */
  border: 2px solid #1b1813;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* 3 cols × 4 rows myaac geometry */
.equip--myaac {
  grid-template-columns: repeat(3, 64px);
  grid-auto-rows: 64px;
  grid-template-areas:
    "neck    head    backpack"
    "rhand   armor   lhand"
    "ring    legs    ammo"
    ".       feet    .";
}

/* Map each slot to its area */
.slot--head     { grid-area: head; }
.slot--neck     { grid-area: neck; }
.slot--backpack { grid-area: backpack; }
.slot--rhand    { grid-area: rhand; }
.slot--armor    { grid-area: armor; }
.slot--lhand    { grid-area: lhand; }
.slot--legs     { grid-area: legs; }
.slot--ring     { grid-area: ring; }
.slot--ammo     { grid-area: ammo; }
.slot--feet     { grid-area: feet; }

/* Visuals (reuse your previous styling) */
.equip-inline .slot{
  position:relative;
  width:64px; height:64px;
  border:1px solid #1b1813;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 64px 64px;   /* or 'contain' if you prefer */
  image-rendering: pixelated;   /* optional: crisp up low-res icons */
  border-radius:6px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  /*cursor: pointer;                     /* little hand on hover */
}
.equip-inline .slot.is-empty::after{
  content:"—"; font-size:12px; color:#8a6b3e; opacity:.6;
}

.equip-inline .item{ position:relative; width:48px; height:48px; image-rendering:pixelated; }
.equip-inline .item img{ width:48px; height:48px; display:block; image-rendering:pixelated; }


/* Your existing badge works perfectly with the wrapper */
.equip-inline .item__count{
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #2b241b;
  border: 1px solid #a58a56;
  color: #e8d9b3;
  font: 700 11px/18px Inter,system-ui,sans-serif;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Responsive shrink (optional) */
@media (max-width: 520px){
  .equip--myaac{
    grid-template-columns: repeat(3, 64px);
    grid-auto-rows: 64px;
  }
  .equip-inline .slot{ width:64px; height:64px; }
}

/* Drop columns 1 and 3 by 10px */
.equip--myaac .slot--neck,
.equip--myaac .slot--rhand,
.equip--myaac .slot--ring,
.equip--myaac .slot--backpack,
.equip--myaac .slot--lhand,
.equip--myaac .slot--ammo {
  transform: translateY(40px);
}
/* captions under 64px slots */
.equip--myaac .slot { position: relative; }
.equip--myaac .slot__caption{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-16px;
  font-size:11px;
  line-height:1;
  color:#cfc8b3;
  white-space:nowrap;
  pointer-events:none;
  opacity:.9;
}


/* Optional: smaller offset on narrow screens */
@media (max-width: 520px){
  .equip--myaac .slot--head,
  .equip--myaac .slot--rhand,
  .equip--myaac .slot--legs,
  .equip--myaac .slot--backpack,
  .equip--myaac .slot--lhand,
  .equip--myaac .slot--ammo {
    transform: translateY(30px);
  }
}