/* UI 017.3B.1.4 — 15 real equipment slots around hero.
   Scope: isolated Character layer only. No shared-nav/Battle selectors. */

#i173a-character-layer .i173a-stage{
  overflow:hidden;
}

#i173a-character-layer .i173a-art-zone{
  z-index:2;
}

/* A.1 deliberately re-appends its stylesheet at runtime. Use the live-equipment
   state class to give B.1 geometry a stronger scoped selector, so face clearance
   no longer depends on stylesheet order. */
#i173a-character-layer.i173b-has-live-equipment .i173a-art-zone .i173a-hero-art{
  max-width:74%;
  height:396px;
  max-height:89%;
  transform:translate3d(0,34px,0)!important;
}

/* Keep the stage title/subtitle as a clean header band. The slot canvas starts
   below it, so the top three slots never sit on top of the typography. */
#i173a-character-layer .i173b-equipment-layer{
  position:absolute;
  z-index:7;
  inset:100px 10px 61px;
  pointer-events:none;
}

#i173a-character-layer .i173b-slot{
  --slot-size:46px;
  position:absolute;
  width:var(--slot-size);
  min-width:var(--slot-size);
  height:auto;
  min-height:var(--slot-size);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  padding:0;
  border:0;
  background:transparent;
  color:#c8b996;
  appearance:none;
  pointer-events:auto;
  touch-action:manipulation;
  transform:translate(-50%,-50%);
  -webkit-tap-highlight-color:transparent;
}

#i173a-character-layer .i173b-slot-frame{
  position:relative;
  width:var(--slot-size);
  height:var(--slot-size);
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(214,176,91,.32);
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 32%,rgba(154,73,177,.17),transparent 72%),
    linear-gradient(180deg,rgba(28,18,36,.96),rgba(9,7,13,.99));
  box-shadow:
    inset 0 0 0 1px rgba(255,233,181,.035),
    0 7px 17px rgba(0,0,0,.31);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}

#i173a-character-layer .i173b-slot.is-empty .i173b-slot-frame{
  border:1px dashed rgba(190,161,121,.28);
  background:
    radial-gradient(circle at 50% 42%,rgba(127,77,137,.10),transparent 70%),
    rgba(8,6,12,.76);
  box-shadow:inset 0 0 16px rgba(154,98,162,.035);
}

#i173a-character-layer .i173b-slot-emoji{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:23px;
  line-height:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.58));
}

#i173a-character-layer .i173b-slot.is-empty .i173b-slot-emoji{
  color:#a5927d;
  font-size:22px;
  font-weight:300;
  opacity:.72;
  filter:none;
}

#i173a-character-layer .i173b-slot img{
  width:84%;
  height:84%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.52));
}

#i173a-character-layer .i173b-quality-mark{
  position:absolute;
  right:2px;
  bottom:2px;
  display:grid;
  place-items:center;
  width:13px;
  height:13px;
  overflow:hidden;
  border-radius:50%;
  background:rgba(4,3,8,.84);
  font-size:8px;
  line-height:1;
}

#i173a-character-layer .i173b-slot-caption{
  display:block;
  width:68px;
  overflow:hidden;
  color:#aa9c8c;
  font-size:7.2px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:.055em;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 4px #000,0 0 7px rgba(0,0,0,.72);
  opacity:.96;
}

/* The head slot must never cover the character face. Its label lives above the
   frame and the whole control sits higher than the neighboring top slots. */
#i173a-character-layer .i173b-slot.pos-top-center .i173b-slot-caption{
  position:absolute;
  left:50%;
  top:-13px;
  transform:translateX(-50%);
  pointer-events:none;
}

#i173a-character-layer .i173b-slot.is-filled .i173b-slot-caption{
  color:#d1bd8a;
}

#i173a-character-layer .i173b-slot.is-selected .i173b-slot-frame,
#i173a-character-layer .i173b-slot:active .i173b-slot-frame{
  transform:scale(.94);
  border-color:rgba(255,218,124,.82);
  box-shadow:
    0 0 0 2px rgba(176,89,192,.20),
    0 0 18px rgba(176,89,192,.34),
    inset 0 0 16px rgba(215,164,80,.08);
}

/* Quality rings. Numeric quality comes from the legacy item object. */
#i173a-character-layer .i173b-slot.q-1 .i173b-slot-frame{border-color:rgba(190,194,205,.38)}
#i173a-character-layer .i173b-slot.q-2 .i173b-slot-frame{border-color:rgba(91,197,133,.56);box-shadow:0 0 13px rgba(54,156,104,.10),0 7px 17px rgba(0,0,0,.31)}
#i173a-character-layer .i173b-slot.q-3 .i173b-slot-frame{border-color:rgba(79,158,233,.62);box-shadow:0 0 14px rgba(59,132,219,.13),0 7px 17px rgba(0,0,0,.31)}
#i173a-character-layer .i173b-slot.q-4 .i173b-slot-frame{border-color:rgba(174,88,225,.68);box-shadow:0 0 16px rgba(144,64,205,.16),0 7px 17px rgba(0,0,0,.31)}
#i173a-character-layer .i173b-slot.q-5 .i173b-slot-frame{border-color:rgba(241,195,78,.78);box-shadow:0 0 17px rgba(224,166,58,.18),0 7px 17px rgba(0,0,0,.31)}
#i173a-character-layer .i173b-slot.q-6 .i173b-slot-frame{border-color:rgba(233,83,106,.76);box-shadow:0 0 18px rgba(215,58,92,.18),0 7px 17px rgba(0,0,0,.31)}

/* 3 top + 5 left + 5 right + 2 bottom = 15 slots. */
#i173a-character-layer .i173b-slot.pos-top-left{left:22%;top:3%}
#i173a-character-layer .i173b-slot.pos-top-center{left:50%;top:-4%}
#i173a-character-layer .i173b-slot.pos-top-right{left:78%;top:3%}

#i173a-character-layer .i173b-slot.pos-left-1{left:9.5%;top:20%}
#i173a-character-layer .i173b-slot.pos-left-2{left:9.5%;top:37%}
#i173a-character-layer .i173b-slot.pos-left-3{left:9.5%;top:54%}
#i173a-character-layer .i173b-slot.pos-left-4{left:9.5%;top:71%}
#i173a-character-layer .i173b-slot.pos-left-5{left:9.5%;top:87%}

#i173a-character-layer .i173b-slot.pos-right-1{left:90.5%;top:20%}
#i173a-character-layer .i173b-slot.pos-right-2{left:90.5%;top:37%}
#i173a-character-layer .i173b-slot.pos-right-3{left:90.5%;top:54%}
#i173a-character-layer .i173b-slot.pos-right-4{left:90.5%;top:71%}
#i173a-character-layer .i173b-slot.pos-right-5{left:90.5%;top:87%}

#i173a-character-layer .i173b-slot.pos-bottom-left{left:39.5%;top:94%}
#i173a-character-layer .i173b-slot.pos-bottom-right{left:60.5%;top:94%}

#i173a-character-layer.i173b-has-live-equipment .i173a-stage-foot{
  color:#d8c083;
  border-color:rgba(207,157,67,.38);
  background:linear-gradient(180deg,rgba(50,24,55,.88),rgba(18,10,23,.94));
}

@media (max-width:380px){
  #i173a-character-layer.i173b-has-live-equipment .i173a-art-zone .i173a-hero-art{
    max-width:72%;
    height:380px;
    max-height:88%;
    transform:translate3d(0,34px,0)!important;
  }
  #i173a-character-layer .i173b-equipment-layer{inset:96px 6px 60px}
  #i173a-character-layer .i173b-slot{--slot-size:43px}
  #i173a-character-layer .i173b-slot-caption{width:60px;font-size:6.6px}
  #i173a-character-layer .i173b-slot.pos-top-center{top:-4%}
  #i173a-character-layer .i173b-slot.pos-left-1,
  #i173a-character-layer .i173b-slot.pos-left-2,
  #i173a-character-layer .i173b-slot.pos-left-3,
  #i173a-character-layer .i173b-slot.pos-left-4,
  #i173a-character-layer .i173b-slot.pos-left-5{left:9%}
  #i173a-character-layer .i173b-slot.pos-right-1,
  #i173a-character-layer .i173b-slot.pos-right-2,
  #i173a-character-layer .i173b-slot.pos-right-3,
  #i173a-character-layer .i173b-slot.pos-right-4,
  #i173a-character-layer .i173b-slot.pos-right-5{left:91%}
}

@media (prefers-reduced-motion:reduce){
  #i173a-character-layer .i173b-slot-frame{transition:none}
}