/* ═══════════════════════════════════════════════════════
   INVENTAR v3 — RPG CHARACTER SHEET
   Inspired by WoW / Diablo IV / Dark Souls equipment UI
═══════════════════════════════════════════════════════ */

/* Animations */
@keyframes invOpen{from{opacity:0;transform:scale(.93) translateY(18px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes invItemIn{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);}}
@keyframes slotPulse{0%,100%{box-shadow:0 0 0 1px rgba(160,80,255,.15),inset 0 0 8px rgba(0,0,0,.5);}50%{box-shadow:0 0 0 1px rgba(180,100,255,.35),inset 0 0 12px rgba(0,0,0,.6);}}
@keyframes legendaryGlow{0%,100%{box-shadow:0 0 8px rgba(255,180,0,.4),0 0 0 1px rgba(255,180,0,.35);}50%{box-shadow:0 0 18px rgba(255,180,0,.65),0 0 0 1px rgba(255,190,0,.6);}}
@keyframes epicGlow{0%,100%{box-shadow:0 0 8px rgba(190,50,255,.4),0 0 0 1px rgba(190,50,255,.35);}50%{box-shadow:0 0 18px rgba(200,60,255,.6),0 0 0 1px rgba(200,60,255,.55);}}
@keyframes charFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes scanLine{0%{top:-10%;}100%{top:110%;}}
@keyframes borderRun{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}

/* ── OVERLAY ── */
#inventoryModal{
  display:none;position:fixed;inset:0;z-index:9000;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(14px) saturate(1.15);
}
#inventoryModal.show{display:flex;}

/* ── OUTER PANEL ── */
.inv-panel{
  position:relative;
  width:min(960px,98vw);
  max-height:92vh;
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(10,5,24,.98) 0%,rgba(6,2,16,.99) 55%,rgba(13,5,28,.98) 100%);
  border:1px solid rgba(140,70,220,.22);
  border-radius:7px;
  box-shadow:0 0 0 1px rgba(100,40,180,.07),0 40px 100px rgba(0,0,0,.98),inset 0 1px 0 rgba(200,140,255,.1);
  overflow:hidden;
  animation:invOpen .4s cubic-bezier(.22,1.2,.36,1) forwards;
}
.inv-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:10;
  background:linear-gradient(90deg,transparent,rgba(160,80,255,.35) 20%,rgba(220,160,255,.9) 50%,rgba(160,80,255,.35) 80%,transparent);
  background-size:200%;animation:borderRun 5s linear infinite;
}

/* ── HEADER ── */
.inv-header{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:13px 18px 11px;
  background:linear-gradient(90deg,rgba(110,35,210,.08),transparent 60%);
  border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;z-index:2;
}
.inv-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(140,55,220,.55),rgba(200,120,255,.75) 40%,rgba(140,55,220,.55));}
.inv-av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,rgba(160,60,240,.25),rgba(90,15,170,.18));
  border:2px solid rgba(170,75,255,.38);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 0 16px rgba(150,55,230,.2);
}
.inv-hdr-txt{flex:1;}
.inv-hdr-nm{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:900;color:rgba(222,192,255,.95);letter-spacing:.06em;text-shadow:0 0 18px rgba(170,75,255,.3);}
.inv-hdr-sub{font-family:'Barlow Condensed',sans-serif;font-size:.55rem;color:rgba(150,100,220,.4);letter-spacing:.18em;text-transform:uppercase;margin-top:1px;}
.inv-coins-badge{
  display:flex;align-items:center;gap:5px;padding:5px 11px;
  background:rgba(220,170,40,.06);border:1px solid rgba(220,170,40,.18);border-radius:4px;
  font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:800;
  color:rgba(255,198,70,.92);letter-spacing:.05em;
}
.inv-xbtn{
  width:28px;height:28px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(185,145,255,.42);border-radius:5px;cursor:pointer;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.inv-xbtn:hover{background:rgba(215,46,76,.18);border-color:rgba(215,46,76,.35);color:#ff7090;}

/* ── STATS ROW ── */
.inv-stats-bar{
  flex-shrink:0;display:flex;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.18);
}
.inv-stat{
  flex:1;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:1px;
  border-right:1px solid rgba(255,255,255,.04);cursor:default;transition:background .15s;
}
.inv-stat:last-child{border-right:none;}
.inv-stat:hover{background:rgba(255,255,255,.025);}
.inv-stat-val{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:900;letter-spacing:.03em;}
.inv-stat-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.46rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(150,112,205,.32);}

/* ── MAIN BODY (character + bag) ── */
.inv-body{flex:1;display:flex;min-height:0;overflow:hidden;}

/* ── LEFT: CHARACTER PANEL ── */
.inv-char-panel{
  width:280px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.12);
  position:relative;overflow:hidden;
}
/* subtle scan line effect on char panel */
.inv-char-panel::after{
  content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(160,80,255,.08),transparent);
  animation:scanLine 8s linear infinite;pointer-events:none;z-index:0;
}

.inv-char-title{
  padding:8px 12px 6px;
  font-family:'Barlow Condensed',sans-serif;font-size:.55rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(160,110,240,.35);
  border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0;
}

/* Equipment slots grid — WoW/Diablo layout */
.inv-equip-grid{
  flex:1;display:grid;
  grid-template-areas:
    "helm    char   amul"
    "should  char   ring1"
    "chest   char   ring2"
    "hands   char   boots"
    "legs    weap   offh";
  grid-template-columns:64px 1fr 64px;
  grid-template-rows:repeat(5, 56px);
  gap:4px;padding:8px;
  position:relative;z-index:1;
}

/* Character silhouette in center */
.inv-char-figure{
  grid-area:char;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  background:radial-gradient(ellipse 70% 80% at 50% 45%,rgba(120,50,200,.08) 0%,transparent 70%);
}
.inv-char-svg{
  width:90px;height:200px;
  opacity:.7;
  filter:drop-shadow(0 0 12px rgba(140,70,220,.25));
  animation:charFloat 5s ease-in-out infinite;
}

/* Individual equipment slots */
.inv-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:rgba(255,255,255,.024);
  border:1px solid rgba(255,255,255,.07);
  border-radius:5px;cursor:pointer;
  transition:all .18s;
  position:relative;overflow:hidden;
  animation:slotPulse 3s ease-in-out infinite;
}
.inv-slot::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 60%);
}
.inv-slot:hover{
  background:rgba(160,70,255,.12);
  border-color:rgba(180,90,255,.35);
  box-shadow:0 0 14px rgba(140,55,220,.18);
  transform:scale(1.04);
}
.inv-slot.has-item{
  background:rgba(255,255,255,.04);
  border-color:rgba(160,80,255,.25);
}
.inv-slot.has-item.rarity-legendary{animation:legendaryGlow 2.5s ease-in-out infinite;}
.inv-slot.has-item.rarity-epic{animation:epicGlow 2.5s ease-in-out infinite;}
.inv-slot-emoji{font-size:1.3rem;line-height:1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7));}
.inv-slot-icon{font-size:.95rem;opacity:.22;line-height:1;}
.inv-slot-icon-img{width:28px;height:28px;opacity:.35;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.inv-slot-equipped-icon{width:30px;height:30px;filter:drop-shadow(0 1px 5px rgba(0,0,0,.8));}
.inv-slot-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.38rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(150,110,210,.35);}
.inv-slot-name{font-family:'Barlow Condensed',sans-serif;font-size:.4rem;font-weight:700;color:rgba(210,185,245,.7);text-align:center;line-height:1.2;padding:0 2px;}

/* grid slot assignments */
.inv-slot[data-slot="helm"]   {grid-area:helm;}
.inv-slot[data-slot="should"] {grid-area:should;}
.inv-slot[data-slot="chest"]  {grid-area:chest;}
.inv-slot[data-slot="hands"]  {grid-area:hands;}
.inv-slot[data-slot="legs"]   {grid-area:legs;}
.inv-slot[data-slot="amul"]   {grid-area:amul;}
.inv-slot[data-slot="ring1"]  {grid-area:ring1;}
.inv-slot[data-slot="ring2"]  {grid-area:ring2;}
.inv-slot[data-slot="boots"]  {grid-area:boots;}
.inv-slot[data-slot="weap"]   {grid-area:weap;}
.inv-slot[data-slot="offh"]   {grid-area:offh;}

/* ── RIGHT: BAG / ITEM GRID ── */
.inv-bag-panel{
  flex:1;display:flex;flex-direction:column;min-width:0;
}

/* filter row */
.inv-filters{
  flex-shrink:0;display:flex;gap:3px;padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(0,0,0,.12);overflow-x:auto;scrollbar-width:none;
}
.inv-filters::-webkit-scrollbar{display:none;}
.inv-filter-btn{
  flex-shrink:0;padding:4px 11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:3px;
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(170,130,255,.45);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.inv-filter-btn:hover{background:rgba(150,55,230,.12);border-color:rgba(175,75,255,.28);color:rgba(208,172,255,.78);}
.inv-filter-btn.active{background:linear-gradient(135deg,rgba(135,45,235,.35),rgba(95,15,185,.25));border-color:rgba(178,78,255,.52);color:rgba(220,185,255,.96);box-shadow:0 0 10px rgba(135,45,215,.18);}
.inv-filter-btn[data-filter="legendary"].active{background:linear-gradient(135deg,rgba(195,130,0,.3),rgba(155,90,0,.2));border-color:rgba(250,182,0,.44);color:rgba(255,210,90,.96);}
.inv-filter-btn[data-filter="epic"].active{background:linear-gradient(135deg,rgba(155,25,225,.35),rgba(115,0,195,.25));border-color:rgba(198,55,252,.45);color:rgba(218,126,255,.96);}
.inv-filter-btn[data-filter="rare"].active{background:linear-gradient(135deg,rgba(25,72,225,.3),rgba(15,42,185,.2));border-color:rgba(74,134,255,.4);color:rgba(135,184,255,.96);}
.inv-filter-btn[data-filter="uncommon"].active{background:linear-gradient(135deg,rgba(25,152,72,.25),rgba(15,112,52,.18));border-color:rgba(55,192,92,.35);color:rgba(115,225,142,.92);}

/* item grid */
.inv-grid-wrap{flex:1;overflow-y:auto;padding:10px 12px;scrollbar-width:thin;scrollbar-color:rgba(130,55,210,.2) transparent;}
.inv-grid-wrap::-webkit-scrollbar{width:4px;}
.inv-grid-wrap::-webkit-scrollbar-thumb{background:rgba(130,55,210,.22);border-radius:2px;}
#invGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;}

/* ── ITEM CARD ── */
.inv-item{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:10px 6px 8px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.07);border-radius:5px;
  cursor:pointer;transition:all .18s;
  animation:invItemIn .28s ease-out backwards;overflow:hidden;
}
.inv-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ic,rgba(155,115,255,.4));}
.inv-item::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 55%);opacity:0;transition:opacity .18s;}
.inv-item:hover{transform:translateY(-3px) scale(1.02);border-color:var(--ic,rgba(175,95,255,.32));box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 14px color-mix(in srgb,var(--ic) 28%,transparent);}
.inv-item:hover::after{opacity:1;}
.inv-item.rarity-legendary{--ic:rgba(255,185,0,.7);background:linear-gradient(180deg,rgba(70,38,0,.18),rgba(0,0,0,.08));border-color:rgba(195,132,0,.28);}
.inv-item.rarity-legendary:hover{border-color:rgba(255,185,0,.55);box-shadow:0 8px 24px rgba(0,0,0,.65),0 0 22px rgba(195,132,0,.28);}
.inv-item.rarity-epic{--ic:rgba(185,45,255,.7);background:linear-gradient(180deg,rgba(55,5,75,.18),rgba(0,0,0,.08));border-color:rgba(148,26,215,.25);}
.inv-item.rarity-rare{--ic:rgba(55,115,255,.7);background:linear-gradient(180deg,rgba(5,18,58,.18),rgba(0,0,0,.08));border-color:rgba(38,86,196,.25);}
.inv-item.rarity-uncommon{--ic:rgba(45,175,85,.6);border-color:rgba(38,145,65,.22);}
.inv-item.rarity-common{--ic:rgba(155,138,122,.45);}
.inv-item-emoji{font-size:1.75rem;line-height:1;margin-bottom:5px;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));}
.inv-item-icon{width:38px;height:38px;display:block;margin:0 auto 5px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));}
.inv-emoji-icon{width:auto;height:auto;font-size:1.75rem;line-height:1;text-align:center;}
.inv-slot-equipped-icon.inv-emoji-icon{font-size:1.4rem;}
.tt-icon-img.inv-emoji-icon{width:auto;height:auto;font-size:2rem;}
.rarity-legendary .inv-item-emoji,.rarity-legendary .inv-item-icon{filter:drop-shadow(0 0 7px rgba(255,175,0,.52));}
.rarity-epic .inv-item-emoji,.rarity-epic .inv-item-icon{filter:drop-shadow(0 0 7px rgba(185,45,255,.42));}
.rarity-rare .inv-item-emoji,.rarity-rare .inv-item-icon{filter:drop-shadow(0 0 6px rgba(55,115,255,.4));}
.inv-item-name{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;font-weight:700;color:rgba(208,185,238,.82);text-align:center;line-height:1.2;margin-bottom:4px;display:block;}
.inv-item-rarity{font-family:'Barlow Condensed',sans-serif;font-size:.44rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:1px;}
.inv-item-date{font-family:'Barlow Condensed',sans-serif;font-size:.4rem;color:rgba(140,110,195,.28);display:block;}

/* empty state */
.inv-empty{grid-column:1/-1;text-align:center;padding:44px 16px;display:flex;flex-direction:column;gap:7px;}
.inv-empty-icon{font-size:2.2rem;opacity:.18;}
.inv-empty-txt{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.08em;color:rgba(145,105,205,.3);}
.inv-empty-sub{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;color:rgba(120,85,180,.2);letter-spacing:.1em;}

/* ── USERNAME NAV HOVER ── */
#navUsername{cursor:pointer;transition:color .2s,text-shadow .2s;}
#navUsername:hover{color:#e0b060 !important;text-shadow:0 0 14px rgba(200,148,38,.55);}

/* ── DRAG & DROP + EQUIP ── */
.inv-item.dragging{opacity:.35;transform:scale(.92);box-shadow:none;}
.inv-item[draggable="true"]{cursor:grab;}
.inv-item[draggable="true"]:active{cursor:grabbing;}

.inv-slot.drag-over{
  background:rgba(160,80,255,.22)!important;
  border-color:rgba(200,120,255,.7)!important;
  box-shadow:0 0 22px rgba(160,70,255,.4),inset 0 0 10px rgba(160,70,255,.15)!important;
  transform:scale(1.06);
}
.inv-slot.equipped{
  background:rgba(255,255,255,.055);
  border-color:rgba(180,90,255,.38);
}
.inv-slot.equipped .inv-slot-icon{display:none;}
.inv-slot.equipped .inv-slot-lbl{display:none;}
.inv-slot-equipped-emoji{font-size:1.4rem;line-height:1;filter:drop-shadow(0 1px 5px rgba(0,0,0,.8));}
.inv-slot.equipped .inv-slot-icon-img{display:none;}
.inv-slot-equipped-name{font-family:'Barlow Condensed',sans-serif;font-size:.36rem;font-weight:700;color:rgba(210,185,245,.75);text-align:center;line-height:1.2;padding:0 3px;margin-top:2px;}
.inv-slot-unequip{
  position:absolute;top:2px;right:2px;
  width:13px;height:13px;
  background:rgba(220,50,80,.7);border:none;border-radius:2px;
  color:#fff;font-size:.5rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;z-index:5;
  line-height:1;
}
.inv-slot:hover .inv-slot-unequip{opacity:1;}

/* Tooltip */
.inv-tooltip{
  position:fixed;z-index:99999;pointer-events:none;
  background:linear-gradient(160deg,rgba(12,5,28,.97),rgba(7,2,18,.99));
  border:1px solid rgba(160,80,255,.3);
  border-radius:6px;padding:10px 13px;
  box-shadow:0 8px 30px rgba(0,0,0,.85),0 0 0 1px rgba(120,50,200,.08);
  min-width:130px;max-width:190px;
  animation:invItemIn .15s ease-out;
  display:none;
}
.inv-tooltip::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(180,90,255,.6),transparent);}
.inv-tt-emoji{font-size:1.7rem;text-align:center;display:block;margin-bottom:6px;filter:drop-shadow(0 0 6px rgba(0,0,0,.6));}
.tt-icon-img{width:40px;height:40px;display:block;margin:0 auto 6px;filter:drop-shadow(0 0 6px rgba(0,0,0,.6));}
.inv-tt-name{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:800;color:rgba(222,195,255,.95);letter-spacing:.04em;margin-bottom:4px;}
.inv-tt-rar{font-family:'Barlow Condensed',sans-serif;font-size:.52rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;}
.inv-tt-tip{font-family:'Barlow Condensed',sans-serif;font-size:.58rem;color:rgba(150,110,215,.5);letter-spacing:.04em;border-top:1px solid rgba(255,255,255,.05);padding-top:6px;margin-top:2px;}

/* Equip flash on slot */
@keyframes equipFlash{0%{box-shadow:0 0 0 rgba(200,120,255,0);}40%{box-shadow:0 0 28px rgba(200,120,255,.65);}100%{box-shadow:0 0 0 rgba(200,120,255,0);}}
.inv-slot.equip-flash{animation:equipFlash .5s ease-out!important;}

/* item count badge */
.inv-bag-title{
  padding:7px 12px 5px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-family:'Barlow Condensed',sans-serif;font-size:.55rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(155,108,235,.35);
}
.inv-bag-count{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:3px;padding:2px 7px;
  font-size:.52rem;color:rgba(180,150,255,.45);
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 900px) {
  .inv-panel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .inv-body {
    flex-direction: column;
    overflow-y: auto;
  }
  .inv-char-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .inv-equip-grid {
    grid-template-columns: 56px 1fr 56px;
    grid-template-rows: repeat(5, 48px);
    gap: 3px;
    padding: 6px;
  }
  .inv-char-svg { width: 70px; height: 160px; }
  #invGrid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; }
  .inv-header { padding: 10px 12px 8px; gap: 8px; }
  .inv-hdr-nm { font-size: 0.85rem; }
  .inv-stats-bar { flex-wrap: wrap; }
  .inv-stat { padding: 6px 8px; }
  .inv-stat-val { font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .inv-equip-grid {
    grid-template-columns: 48px 1fr 48px;
    grid-template-rows: repeat(5, 42px);
  }
  .inv-char-svg { width: 55px; height: 130px; }
  #invGrid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .inv-item-emoji,.inv-item-icon { font-size: 1.4rem; }
  .inv-item-icon { width: 30px; height: 30px; }
  .inv-item-name { font-size: 0.5rem; }
}