/* UI 017.3C C.5-C.7 — Bag Item Sheet / Compare / actions.
   Scoped to accepted Inventory root. Presentation only. */

#i173c-inventory-layer.i173c57-sheet-open .i173c-scroll{
  overflow-y:hidden !important;
  touch-action:none;
}

#i173c-inventory-layer .i173c57-overlay{
  position:absolute;
  inset:0;
  z-index:2700060;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  isolation:isolate;
  transition:opacity .20s ease;
}

#i173c-inventory-layer .i173c57-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

#i173c-inventory-layer .i173c57-overlay.is-closing{
  pointer-events:none;
}

#i173c-inventory-layer .i173c57-backdrop{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  margin:0;
  background:rgba(3,2,7,.58);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  appearance:none;
}

#i173c-inventory-layer .i173c57-sheet{
  --c57-accent:#d4ad62;
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  width:min(calc(100% - 12px),448px);
  max-height:min(84%,760px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--c57-accent) 52%,transparent);
  border-bottom:0;
  border-radius:28px 28px 0 0;
  background:
    radial-gradient(76% 38% at 12% 0%,rgba(126,41,143,.25),transparent 72%),
    radial-gradient(42% 28% at 92% 5%,color-mix(in srgb,var(--c57-accent) 12%,transparent),transparent 74%),
    linear-gradient(180deg,rgba(26,15,34,.995),rgba(8,6,13,.998) 58%,rgba(5,4,9,.999));
  box-shadow:0 -28px 70px rgba(0,0,0,.62),inset 0 1px rgba(255,230,171,.06);
  transform:translate3d(-50%,106%,0);
  transition:transform .27s cubic-bezier(.18,.82,.22,1);
  will-change:transform;
}

#i173c-inventory-layer .i173c57-overlay.is-open .i173c57-sheet{
  transform:translate3d(-50%,0,0);
}

#i173c-inventory-layer .i173c57-sheet.is-dragging{transition:none}

#i173c-inventory-layer .i173c57-sheet.q-uncommon{--c57-accent:#69c894}
#i173c-inventory-layer .i173c57-sheet.q-rare{--c57-accent:#69aae7}
#i173c-inventory-layer .i173c57-sheet.q-epic{--c57-accent:#b16be2}
#i173c-inventory-layer .i173c57-sheet.q-legendary{--c57-accent:#e4bd5c}
#i173c-inventory-layer .i173c57-sheet.q-cursed{--c57-accent:#e16579}

#i173c-inventory-layer .i173c57-handle-zone{
  flex:0 0 auto;
  padding:10px 18px 4px;
  touch-action:none;
  cursor:grab;
}

#i173c-inventory-layer .i173c57-handle{
  width:52px;
  height:5px;
  margin:0 auto;
  border-radius:999px;
  background:rgba(231,211,179,.34);
  box-shadow:0 0 13px color-mix(in srgb,var(--c57-accent) 12%,transparent);
}

#i173c-inventory-layer .i173c57-head{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 48px;
  align-items:center;
  gap:13px;
  padding:9px 16px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--c57-accent) 18%,transparent);
}

#i173c-inventory-layer .i173c57-icon{
  position:relative;
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--c57-accent) 58%,transparent);
  border-radius:20px;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.13),transparent 42%),
    linear-gradient(145deg,rgba(48,29,58,.96),rgba(13,9,19,.98));
  box-shadow:inset 0 0 22px rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.32),0 0 24px color-mix(in srgb,var(--c57-accent) 12%,transparent);
  color:#f0d492;
  font-size:36px;
}

#i173c-inventory-layer .i173c57-icon img{
  width:88%;
  height:88%;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.48));
  pointer-events:none;
}

#i173c-inventory-layer .i173c57-icon > b{
  position:absolute;
  right:-7px;
  top:-7px;
  min-width:29px;
  height:27px;
  display:grid;
  place-items:center;
  padding:0 7px;
  border:1px solid rgba(225,190,112,.34);
  border-radius:999px;
  background:#0b0810;
  color:#f1deaf;
  font-size:11px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(0,0,0,.35);
}

#i173c-inventory-layer .i173c57-head-copy{min-width:0}

#i173c-inventory-layer .i173c57-quality{
  display:block;
  color:var(--c57-accent);
  font-size:10px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
}

#i173c-inventory-layer .i173c57-head h2{
  margin:4px 0 0;
  overflow-wrap:anywhere;
  color:#fff1d3;
  font:700 25px/1.02 Georgia,"Times New Roman",serif;
  text-shadow:0 2px 18px rgba(147,66,166,.14);
}

#i173c-inventory-layer .i173c57-head-copy > p{
  margin:6px 0 0;
  overflow:hidden;
  color:#afa198;
  font-size:11px;
  font-weight:760;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#i173c-inventory-layer .i173c57-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}

#i173c-inventory-layer .i173c57-tags span{
  padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--c57-accent) 24%,rgba(255,255,255,.06));
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#cbbda9;
  font-size:9px;
  font-weight:850;
  line-height:1;
}

#i173c-inventory-layer .i173c57-close{
  position:relative;
  width:48px;
  height:48px;
  border:1px solid rgba(226,184,92,.32);
  border-radius:50%;
  background:rgba(7,5,11,.73);
  appearance:none;
  touch-action:manipulation;
}

#i173c-inventory-layer .i173c57-close::before,
#i173c-inventory-layer .i173c57-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#efd799;
  transform-origin:center;
}
#i173c-inventory-layer .i173c57-close::before{transform:translate(-50%,-50%) rotate(45deg)}
#i173c-inventory-layer .i173c57-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

#i173c-inventory-layer .i173c57-body{
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:15px 16px 18px;
  scrollbar-width:none;
  touch-action:pan-y;
}
#i173c-inventory-layer .i173c57-body::-webkit-scrollbar{display:none;width:0;height:0}

#i173c-inventory-layer .i173c57-section{margin-top:16px}
#i173c-inventory-layer .i173c57-section:first-child{margin-top:0}

#i173c-inventory-layer .i173c57-section-title{
  margin-bottom:9px;
  color:#c7ab73;
  font-size:10px;
  font-weight:950;
  letter-spacing:.15em;
  text-transform:uppercase;
}

#i173c-inventory-layer .i173c57-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

#i173c-inventory-layer .i173c57-stat{
  min-width:0;
  min-height:67px;
  padding:11px 12px;
  border:1px solid rgba(211,169,84,.16);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(31,20,39,.76),rgba(9,7,14,.84));
}

#i173c-inventory-layer .i173c57-stat span{
  display:block;
  color:#9c9190;
  font-size:10px;
  font-weight:800;
  line-height:1.18;
}

#i173c-inventory-layer .i173c57-stat strong{
  display:block;
  margin-top:6px;
  overflow-wrap:anywhere;
  color:#f2ddb0;
  font-size:18px;
  font-weight:950;
  line-height:1.05;
}
#i173c-inventory-layer .i173c57-stat.is-positive strong{color:#79dfb0}
#i173c-inventory-layer .i173c57-stat.is-negative strong{color:#ef899a}

#i173c-inventory-layer .i173c57-detail{
  padding:12px 13px;
  border:1px solid rgba(201,157,72,.14);
  border-radius:14px;
  background:rgba(6,5,11,.52);
  color:#c9bbb0;
  font-size:12px;
  line-height:1.48;
}
#i173c-inventory-layer .i173c57-detail b{color:#efdbab}
#i173c-inventory-layer .i173c57-detail p{margin:7px 0 0}
#i173c-inventory-layer .i173c57-detail p.is-warning{color:#ee99a6}

#i173c-inventory-layer .i173c57-lore{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
}
#i173c-inventory-layer .i173c57-lore > span{color:#6aa9e5;font-size:17px}
#i173c-inventory-layer .i173c57-lore p{margin:0}

#i173c-inventory-layer .i173c57-req{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.055);
}
#i173c-inventory-layer .i173c57-req small{display:block;margin-top:3px;color:#918a89;font-size:10px;line-height:1.3}
#i173c-inventory-layer .i173c57-req.is-ok > strong{color:#73dfad}
#i173c-inventory-layer .i173c57-req.is-bad > strong{color:#ef8ca0}

#i173c-inventory-layer .i173c57-compare{
  margin-top:17px;
  overflow:hidden;
  border:1px solid rgba(174,104,202,.22);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(43,23,53,.52),rgba(8,6,13,.72));
}

#i173c-inventory-layer .i173c57-compare-toggle{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border:0;
  background:transparent;
  color:#f2dfb7;
  text-align:left;
  appearance:none;
  touch-action:manipulation;
}
#i173c-inventory-layer .i173c57-compare-toggle small{display:block;color:#b57ad0;font-size:9px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
#i173c-inventory-layer .i173c57-compare-toggle strong{display:block;margin-top:4px;font-size:14px;line-height:1.15}
#i173c-inventory-layer .i173c57-compare-toggle > i{width:10px;height:10px;border-right:2px solid #caa260;border-bottom:2px solid #caa260;transform:rotate(45deg);transition:transform .18s ease}
#i173c-inventory-layer .i173c57-compare.is-open .i173c57-compare-toggle > i{transform:rotate(225deg)}

#i173c-inventory-layer .i173c57-compare-content{padding:0 12px 13px;border-top:1px solid rgba(255,255,255,.05)}

#i173c-inventory-layer .i173c57-versus{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  gap:7px;
  align-items:stretch;
  padding:12px 0;
}
#i173c-inventory-layer .i173c57-versus > div{padding:9px 10px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.025)}
#i173c-inventory-layer .i173c57-versus small{display:block;color:#8f8587;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
#i173c-inventory-layer .i173c57-versus strong{display:block;margin-top:4px;color:#eee0c5;font-size:12px;line-height:1.25;overflow-wrap:anywhere}
#i173c-inventory-layer .i173c57-versus > span{display:grid;place-items:center;color:#c7a35e;font-size:19px}

#i173c-inventory-layer .i173c57-compare-list{display:grid;gap:7px}
#i173c-inventory-layer .i173c57-compare-row{
  min-width:0;
  min-height:52px;
  display:grid;
  grid-template-columns:minmax(84px,.8fr) minmax(0,1.2fr);
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
#i173c-inventory-layer .i173c57-compare-row > span{color:#b9ada4;font-size:11px;font-weight:800;line-height:1.15}
#i173c-inventory-layer .i173c57-compare-row > span small{display:block;margin-top:2px;color:#7e7477;font-size:8px;text-transform:uppercase}
#i173c-inventory-layer .i173c57-compare-row > div{display:grid;grid-template-columns:auto 14px auto auto;gap:5px;align-items:center;justify-content:end;min-width:0}
#i173c-inventory-layer .i173c57-compare-row em{color:#91888a;font-style:normal;font-size:12px}
#i173c-inventory-layer .i173c57-compare-row i{color:#b89a61;font-style:normal;text-align:center}
#i173c-inventory-layer .i173c57-compare-row strong{color:#f0e4cd;font-size:14px}
#i173c-inventory-layer .i173c57-compare-row b{min-width:38px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.05);color:#c2b7ae;font-size:10px;text-align:center}
#i173c-inventory-layer .i173c57-compare-row.is-positive b{background:rgba(44,117,81,.22);color:#88dfac}
#i173c-inventory-layer .i173c57-compare-row.is-negative b{background:rgba(122,43,57,.24);color:#ee9aa7}
#i173c-inventory-layer .i173c57-nochange{padding:12px;color:#aaa09a;font-size:11px;text-align:center}
#i173c-inventory-layer .i173c57-compare-note{margin:10px 2px 0;color:#837b7d;font-size:9px;line-height:1.4}

#i173c-inventory-layer .i173c57-footer{
  flex:0 0 auto;
  padding:10px 16px calc(env(safe-area-inset-bottom) + 11px);
  border-top:1px solid rgba(204,157,72,.17);
  background:linear-gradient(180deg,rgba(13,9,18,.93),rgba(5,4,9,.995) 40%);
}

#i173c-inventory-layer .i173c57-action-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
#i173c-inventory-layer .i173c57-action-status strong{font-size:11px}
#i173c-inventory-layer .i173c57-action-status span{color:#9c9290;font-size:9px;line-height:1.25;text-align:right}
#i173c-inventory-layer .i173c57-action-status.is-ok strong{color:#81dfac}
#i173c-inventory-layer .i173c57-action-status.is-locked strong{color:#e9bc7f}

#i173c-inventory-layer .i173c57-actions{display:grid;grid-template-columns:.82fr 1.18fr;gap:8px}
#i173c-inventory-layer .i173c57-actions.no-sale{grid-template-columns:1fr}
#i173c-inventory-layer .i173c57-action{
  min-height:50px;
  border:1px solid rgba(218,177,86,.34);
  border-radius:14px;
  color:#f5dfa9;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  appearance:none;
  touch-action:manipulation;
}
#i173c-inventory-layer .i173c57-action.secondary{background:linear-gradient(180deg,rgba(69,28,79,.87),rgba(39,16,47,.96))}
#i173c-inventory-layer .i173c57-action.primary{border-color:rgba(238,199,104,.58);background:linear-gradient(180deg,#922fae,#601d77);box-shadow:inset 0 0 0 1px rgba(255,230,164,.11),0 8px 22px rgba(95,28,116,.22)}
#i173c-inventory-layer .i173c57-action:disabled{opacity:.46;filter:saturate(.65)}

#i173c-inventory-layer .i173c57-sale-confirm{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:60px;
  padding:9px 10px;
  border:1px solid rgba(202,77,96,.30);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(77,25,38,.32),rgba(23,8,13,.58));
}
#i173c-inventory-layer .i173c57-sale-confirm > div:first-child{min-width:0}
#i173c-inventory-layer .i173c57-sale-confirm strong{display:block;color:#f0b2bc;font-size:12px}
#i173c-inventory-layer .i173c57-sale-confirm span{display:block;margin-top:3px;overflow:hidden;color:#a99a98;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
#i173c-inventory-layer .i173c57-sale-confirm > div:last-child{display:flex;gap:6px}
#i173c-inventory-layer .i173c57-sale-confirm button{min-height:40px;padding:0 11px;border:1px solid rgba(255,255,255,.10);border-radius:11px;background:rgba(255,255,255,.045);color:#d9cfc4;font-size:10px;font-weight:900;appearance:none}
#i173c-inventory-layer .i173c57-sale-confirm button.danger{border-color:rgba(218,92,111,.35);background:rgba(125,38,55,.34);color:#f0a6b3}

#i173c-inventory-layer .i173c57-close:active,
#i173c-inventory-layer .i173c57-action:active,
#i173c-inventory-layer .i173c57-compare-toggle:active,
#i173c-inventory-layer .i173c57-sale-confirm button:active{transform:scale(.98)}

@media (max-width:380px){
  #i173c-inventory-layer .i173c57-sheet{width:calc(100% - 8px);max-height:86%}
  #i173c-inventory-layer .i173c57-head{grid-template-columns:66px minmax(0,1fr) 44px;gap:10px;padding-left:12px;padding-right:12px}
  #i173c-inventory-layer .i173c57-icon{width:66px;height:66px;border-radius:18px}
  #i173c-inventory-layer .i173c57-head h2{font-size:22px}
  #i173c-inventory-layer .i173c57-close{width:44px;height:44px}
  #i173c-inventory-layer .i173c57-body{padding-left:12px;padding-right:12px}
  #i173c-inventory-layer .i173c57-footer{padding-left:12px;padding-right:12px}
  #i173c-inventory-layer .i173c57-compare-row{grid-template-columns:minmax(72px,.75fr) minmax(0,1.25fr);padding-left:8px;padding-right:8px}
  #i173c-inventory-layer .i173c57-compare-row > div{gap:3px}
  #i173c-inventory-layer .i173c57-compare-row b{min-width:32px;padding-left:5px;padding-right:5px}
}

html.arena-cool-mode #i173c-inventory-layer .i173c57-backdrop,
html[data-performance="cool"] #i173c-inventory-layer .i173c57-backdrop{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

html.arena-cool-mode #i173c-inventory-layer .i173c57-overlay,
html[data-performance="cool"] #i173c-inventory-layer .i173c57-overlay,
@media (prefers-reduced-motion:reduce){
  #i173c-inventory-layer .i173c57-overlay,
  #i173c-inventory-layer .i173c57-sheet,
  #i173c-inventory-layer .i173c57-compare-toggle > i{transition:none}
}