/* UI 017.3C Package 3 — C.8-C.10 final studio polish.
   Scoped to isolated Inventory only. No shared nav/body geometry mutation. */

#i173c-inventory-layer[data-i173c810]{
  --i173c810-focus:rgba(237,201,112,.66);
}

/* C.9 — finger-size controls */
#i173c-inventory-layer[data-i173c810] .i173c-close{
  width:44px;
  height:44px;
  flex-basis:44px;
}
#i173c-inventory-layer[data-i173c810] .i173c-search-clear{
  width:40px;
  height:40px;
  margin:-4px;
}
#i173c-inventory-layer[data-i173c810] .i173c-filters button{
  min-height:44px;
  padding-inline:15px;
}
#i173c-inventory-layer[data-i173c810] .i173c-sort-menu button{
  min-height:46px;
}
#i173c-inventory-layer[data-i173c810] .i173c57-close,
#i173c-inventory-layer[data-i173c810] .i173c57-action,
#i173c-inventory-layer[data-i173c810] .i173c57-sale-confirm button,
#i173c-inventory-layer[data-i173c810] [data-i173c57-compare-toggle]{
  min-height:44px;
}

/* C.10 — card interaction without persistent animation */
#i173c-inventory-layer[data-i173c810] .i173c-item-card{
  outline:none;
  transform:translateZ(0);
  transition:transform .14s ease,border-color .16s ease,box-shadow .16s ease;
}
#i173c-inventory-layer[data-i173c810] .i173c-item-card:active{
  transform:scale(.987);
}
#i173c-inventory-layer[data-i173c810] .i173c-item-card:focus-visible{
  border-color:var(--i173c810-focus);
  box-shadow:0 0 0 2px rgba(238,202,113,.16),0 15px 36px rgba(0,0,0,.34);
}

/* Long names: keep the card readable and avoid destructive single-line clipping. */
#i173c-inventory-layer[data-i173c810] .i173c-item-card h2,
#i173c-inventory-layer[data-i173c810] .i173c-item-card h3,
#i173c-inventory-layer[data-i173c810] .i173c-item-name{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
#i173c-inventory-layer[data-i173c810] .i173c-item-card.i173c810-long-title h2,
#i173c-inventory-layer[data-i173c810] .i173c-item-card.i173c810-long-title h3,
#i173c-inventory-layer[data-i173c810] .i173c-item-card.i173c810-long-title .i173c-item-name{
  line-height:1.18;
  letter-spacing:-.012em;
}

/* Missing art remains clearly intentional instead of looking broken. */
#i173c-inventory-layer[data-i173c810] .i173c-item-visual.i173c810-fallback-art{
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--item-accent,#9d79c7) 14%,transparent),transparent 46%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.04));
}

/* Legendary/cursed get a static premium accent; no idle animation/battery churn. */
#i173c-inventory-layer[data-i173c810] .i173c-item-card.q-legendary{
  box-shadow:inset 0 0 0 1px rgba(229,190,92,.055),0 14px 35px rgba(95,70,17,.12);
}
#i173c-inventory-layer[data-i173c810] .i173c-item-card.q-cursed{
  box-shadow:inset 0 0 0 1px rgba(223,98,119,.06),0 14px 35px rgba(103,26,44,.14);
}

/* Requirement issue is visible but does not pretend the whole item is disabled. */
#i173c-inventory-layer[data-i173c810] .i173c-item-card.i173c810-requirement-locked .i173c-item-status{
  color:#d4a878;
}

/* C.8 — contextual battle lock, inserted only from active server fight lock. */
#i173c-inventory-layer[data-i173c810] .i173c810-battle-lock{
  min-height:54px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:9px;
  margin:2px 2px 10px;
  padding:9px 11px;
  border:1px solid rgba(202,143,75,.22);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(48,31,19,.66),rgba(20,15,16,.72));
  box-shadow:inset 0 1px rgba(255,235,185,.025);
}
#i173c-inventory-layer[data-i173c810] .i173c810-battle-lock>span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#ddb06d;
  background:rgba(129,80,31,.16);
  font-size:14px;
}
#i173c-inventory-layer[data-i173c810] .i173c810-battle-lock>div{
  min-width:0;
  display:grid;
  gap:2px;
}
#i173c-inventory-layer[data-i173c810] .i173c810-battle-lock strong{
  color:#e5c49a;
  font-size:9px;
  font-weight:900;
  letter-spacing:.02em;
}
#i173c-inventory-layer[data-i173c810] .i173c810-battle-lock small{
  color:#a99587;
  font-size:8px;
  line-height:1.35;
}

/* C.8 — distinct empty/no-results states. */
#i173c-inventory-layer[data-i173c810] .i173c-empty[data-i173c810-mode="empty"]{
  border-style:solid;
  border-color:rgba(214,178,92,.13);
  background:radial-gradient(circle at 50% 18%,rgba(130,60,143,.08),transparent 46%),rgba(15,10,18,.42);
}
#i173c-inventory-layer[data-i173c810] .i173c-empty[data-i173c810-mode="empty"] [data-i173c-reset]{
  display:none!important;
}

/* C.8 — mixed positive/negative Compare is explicitly a tradeoff, not a verdict. */
#i173c-inventory-layer[data-i173c810] .i173c810-tradeoff{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin:8px 10px 4px;
  padding:8px 9px;
  border:1px solid rgba(168,137,210,.18);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(69,42,91,.28),rgba(24,18,31,.44));
}
#i173c-inventory-layer[data-i173c810] .i173c810-tradeoff>span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#ceb1e4;
  background:rgba(123,81,158,.16);
  font-size:15px;
  font-weight:900;
}
#i173c-inventory-layer[data-i173c810] .i173c810-tradeoff>div{
  min-width:0;
  display:grid;
  gap:2px;
}
#i173c-inventory-layer[data-i173c810] .i173c810-tradeoff strong{
  color:#e7d7ef;
  font-size:8.5px;
  font-weight:900;
}
#i173c-inventory-layer[data-i173c810] .i173c810-tradeoff small{
  color:#a79bae;
  font-size:7.8px;
  line-height:1.35;
}

/* Narrow iPhone hardening. */
@media (max-width:380px){
  #i173c-inventory-layer[data-i173c810] .i173c810-battle-lock{margin-inline:0;padding-inline:9px}
  #i173c-inventory-layer[data-i173c810] .i173c-filters button{padding-inline:13px}
  #i173c-inventory-layer[data-i173c810] .i173c810-tradeoff{margin-inline:6px}
}

/* Tablet keeps controls comfortable without bloating the grid. */
@media (min-width:600px){
  #i173c-inventory-layer[data-i173c810] .i173c810-battle-lock{max-width:560px}
}

/* Cool mode: completely static finalization layer. */
html.arena-cool-mode #i173c-inventory-layer[data-i173c810] .i173c-item-card,
html[data-performance="cool"] #i173c-inventory-layer[data-i173c810] .i173c-item-card{
  transition:none!important;
  transform:none!important;
}

@media (prefers-reduced-motion:reduce){
  #i173c-inventory-layer[data-i173c810] .i173c-item-card{
    transition:none!important;
    transform:none!important;
  }
}