/* UI 017.3B.1.6 — compact collision-free equipment labels.
   Additive, presentation-only. Keeps the hero visually dominant and never touches Battle/nav. */

#i173a-character-layer .i173b-slot-caption{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  max-width:48px;
  min-height:14px;
  padding:2px 3px;
  overflow:hidden;
  border:1px solid rgba(203,164,91,.14);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(18,11,22,.74),rgba(7,6,11,.82));
  box-shadow:0 2px 6px rgba(0,0,0,.20);
  color:#b9a98f;
  font-size:6.15px;
  font-weight:900;
  line-height:1.02;
  letter-spacing:.025em;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
  overflow-wrap:normal;
  text-shadow:0 1px 3px #000;
  pointer-events:none;
  opacity:.94;
}

#i173a-character-layer .i173b-slot.is-filled .i173b-slot-caption{
  color:#dbc994;
  border-color:rgba(214,176,91,.19);
}

/* Left column: a short tag sits immediately beside the slot, never as a bar to the hero. */
#i173a-character-layer .i173b-slot.pos-left-1 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-left-2 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-left-3 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-left-4 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-left-5 .i173b-slot-caption{
  left:calc(100% + 3px);
  right:auto;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}

/* Right column mirrors the left. Long names wrap to two compact lines. */
#i173a-character-layer .i173b-slot.pos-right-1 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-right-2 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-right-3 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-right-4 .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-right-5 .i173b-slot-caption{
  right:calc(100% + 3px);
  left:auto;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}

/* Top trio: compact labels directly under the frame. */
#i173a-character-layer .i173b-slot.pos-top-left .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-top-center .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-top-right .i173b-slot-caption{
  left:50%;
  right:auto;
  top:calc(100% + 3px);
  bottom:auto;
  transform:translateX(-50%);
  width:52px;
  max-width:52px;
}

/* Keep the accepted head/face clearance. */
#i173a-character-layer .i173b-slot.pos-top-center{
  top:-2%;
}

/* Bottom pair: small labels above the footer band. */
#i173a-character-layer .i173b-slot.pos-bottom-left .i173b-slot-caption,
#i173a-character-layer .i173b-slot.pos-bottom-right .i173b-slot-caption{
  left:50%;
  right:auto;
  top:calc(100% + 3px);
  bottom:auto;
  transform:translateX(-50%);
  width:50px;
  max-width:50px;
}

#i173a-character-layer .i173b-slot.pos-bottom-left,
#i173a-character-layer .i173b-slot.pos-bottom-right{
  top:91.5%;
}

@media (max-width:380px){
  #i173a-character-layer .i173b-slot-caption{
    width:44px;
    max-width:44px;
    min-height:13px;
    padding:2px 2px;
    font-size:5.8px;
    letter-spacing:.015em;
  }

  #i173a-character-layer .i173b-slot.pos-top-left .i173b-slot-caption,
  #i173a-character-layer .i173b-slot.pos-top-center .i173b-slot-caption,
  #i173a-character-layer .i173b-slot.pos-top-right .i173b-slot-caption,
  #i173a-character-layer .i173b-slot.pos-bottom-left .i173b-slot-caption,
  #i173a-character-layer .i173b-slot.pos-bottom-right .i173b-slot-caption{
    width:47px;
    max-width:47px;
  }
}