/* css/inventory.css */

:root{
  --inv-panel:#161920;
  --inv-panel-2:#1c2028;
  --inv-slot:rgba(10, 12, 16, .4);
  --inv-line:#2a2f3a;
  --inv-line-soft:rgba(255, 255, 255, .06);
  --inv-text:#e7e9ee;
  --inv-muted:#8b93a3;
  --inv-accent:#5eead4;
  --inv-accent-dim:#2e6d63;
  --inv-danger:#e2574c;
  --inv-warn:#f5c26b;
  --inv-side:186px;
}

/* A tela do jogo ocupa tudo; as colunas de janelas ficam por cima dela, sem
   fundo: o mapa aparece atrás e o clique fora das janelas vai pro mapa. */
#gameCanvas{ position:fixed; top:0; left:0; width:100%; height:100%; touch-action:none; }

.inv-column{
  position:fixed; top:0; bottom:0; width:var(--inv-side); box-sizing:border-box; padding:8px;
  display:flex; flex-direction:column; gap:8px; overflow-y:auto; scrollbar-width:none;
  background:transparent; pointer-events:none; z-index:1;
  font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:12px; color:var(--inv-text);
}
.inv-column > *{ pointer-events:auto; }
.inv-column::-webkit-scrollbar{ display:none; }
#invLeft{ left:0; }
#invRight{ right:0; }

/* Janelas soltas: em qualquer lugar da tela, por cima das colunas. */
.inv-free{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:12px; color:var(--inv-text);
}
.inv-free > .inv-win{ position:absolute; width:calc(var(--inv-side) - 16px); pointer-events:auto; }
.inv-free > .inv-win.inv-book{ width:300px; }
.inv-book-text{ max-height:60vh; overflow-y:auto; padding:10px 12px; white-space:pre-wrap; line-height:1.5; font-size:13px; color:var(--inv-text); }
.inv-minimap-canvas{ display:block; width:calc(100% - 12px); height:auto; margin:6px; image-rendering:pixelated; background:#000; touch-action:none; cursor:grab; }

/* Janelas levemente transparentes: o mapa aparece por trás delas. */
.inv-win{ flex-shrink:0; background:rgba(22, 25, 32, .82); border-radius:8px; overflow:hidden; }
.inv-win.flash{ animation:inv-flash .7s ease-out; }
@keyframes inv-flash{ 0%{ box-shadow:0 0 0 2px var(--inv-accent); } 100%{ box-shadow:0 0 0 0 transparent; } }
.inv-win.moving{ position:fixed; z-index:60; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.inv-head{
  display:flex; align-items:center; gap:6px; padding:5px 6px 5px 7px; background:rgba(28, 32, 40, .82);
  border-bottom:1px solid var(--inv-line); user-select:none; touch-action:none;
}
.inv-win.min .inv-head{ border-bottom:none; }
.inv-win.min .inv-body, .inv-win.min .inv-resize{ display:none; }
.inv-title{ flex:1; min-width:0; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-title em{ font-style:normal; color:var(--inv-muted); font-weight:400; }
.inv-cap{ font:500 10px 'IBM Plex Mono', ui-monospace, monospace; color:var(--inv-muted); font-variant-numeric:tabular-nums; }
.inv-cap.full{ color:var(--inv-warn); }
.inv-btn{
  width:18px; height:18px; display:grid; place-items:center; padding:0; border-radius:4px; background:transparent;
  border:none; color:var(--inv-muted); font-size:12px; line-height:1;
}
.inv-btn svg{ display:block; }
.inv-btn:hover{ color:var(--inv-text); background:rgba(255, 255, 255, .08); }
.inv-btn.danger:hover{ color:var(--inv-danger); }

.inv-body{ position:relative; }
.inv-body::before, .inv-body::after{
  content:''; position:absolute; left:0; right:0; height:14px; pointer-events:none; opacity:0; transition:opacity .15s; z-index:1;
}
.inv-body::before{ top:0; background:linear-gradient(var(--inv-panel), transparent); }
.inv-body::after{ bottom:0; background:linear-gradient(transparent, var(--inv-panel)); }
.inv-body.more-up::before, .inv-body.more-down::after{ opacity:1; }
.inv-scroller{ overflow-y:auto; scrollbar-width:none; padding:6px; box-sizing:border-box; }
.inv-scroller::-webkit-scrollbar{ display:none; }
.inv-resize{ height:7px; touch-action:none; display:grid; place-items:center; }
.inv-resize::after{ content:''; width:28px; height:2px; border-radius:2px; background:var(--inv-line); }
.inv-resize:hover::after{ background:var(--inv-accent-dim); }

.inv-grid{ display:grid; grid-template-columns:repeat(4, 36px); gap:4px; justify-content:center; }
.inv-doll{ display:flex; gap:4px; justify-content:center; padding:8px 6px 6px; }
.inv-dollcol{ display:flex; flex-direction:column; justify-content:flex-end; gap:4px; }
.inv-slot{
  width:36px; height:36px; position:relative; display:grid; place-items:center; box-sizing:border-box;
  background:var(--inv-slot); border:1px solid var(--inv-line-soft); border-radius:4px; touch-action:none; user-select:none;
}
.inv-slot.filled:hover{ border-color:var(--inv-accent-dim); }
.inv-slot.source{ opacity:.35; }
.inv-slot.can-drop{ border-color:var(--inv-accent-dim); background:#14211f; }
.inv-slot.over{ border-color:#3fb68b; box-shadow:0 0 0 1px #3fb68b; }
.inv-slot.over.reject{ border-color:var(--inv-danger); box-shadow:0 0 0 1px var(--inv-danger); }
.inv-hint{ color:#343a47; }
.inv-count{ position:absolute; right:2px; bottom:0; font:600 10px 'IBM Plex Mono', ui-monospace, monospace; text-shadow:0 1px 0 #000, 0 0 3px #000; }
.inv-spr{ width:32px; height:32px; display:block; pointer-events:none; image-rendering:pixelated; background-repeat:no-repeat; }
.inv-icon{ width:16px; height:16px; flex-shrink:0; overflow:hidden; }
.inv-icon .inv-spr{ transform:scale(.5); transform-origin:0 0; }
.inv-spr.missing{ background:repeating-linear-gradient(45deg, #2a2f3a 0 4px, transparent 4px 8px); border-radius:3px; }

.inv-capbox{
  width:36px; height:16px; box-sizing:border-box; display:grid; place-items:center; border-radius:4px;
  background:var(--inv-slot); border:1px solid var(--inv-line-soft); color:var(--inv-text);
  font:500 10px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
}
.inv-capbox.heavy{ color:var(--inv-warn); }
.inv-skills{ padding:6px 12px 8px; font-size:11px; font-variant-numeric:tabular-nums; }
.inv-skrow{ display:flex; justify-content:space-between; gap:8px; line-height:14px; margin-top:3px; color:var(--inv-muted); }
.inv-skrow b{ color:var(--inv-text); font-weight:500; }
.inv-skbar{ height:3px; margin-top:2px; border-radius:2px; background:#030405; overflow:hidden; }
.inv-skbar i{ display:block; height:100%; background:#3fb68b; }
.inv-skbar.hp i{ background:#22c55e; }
.inv-skbar.hp.mid i{ background:#eab308; }
.inv-skbar.hp.low i{ background:#ef4444; }
.inv-skbar.mp i{ background:#4c8dff; }
.inv-skbar.cap i{ background:#f5c26b; }
.inv-skbar.speed i{ background:#a78bfa; }
.inv-skline.toggles{ cursor:default; }
.inv-skline.toggles:hover .inv-skrow span{ color:var(--inv-text); }
.inv-skbonus{ font-style:normal; color:var(--inv-accent); }
.inv-vitals{ gap:6px; padding:7px 8px; border-bottom:none; }
.inv-vbar{ position:relative; flex:1; height:16px; border-radius:3px; background:var(--inv-slot); border:1px solid var(--inv-line); overflow:hidden; }
.inv-vbar i{ display:block; height:100%; transition:width .2s; }
.inv-vbar span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; text-shadow:0 0 2px #000, 0 1px 1px #000; white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums; }
.inv-vbar.hp i{ background:linear-gradient(180deg, #4fcf9f, #3fb68b); }
.inv-vbar.mana i{ background:linear-gradient(180deg, #6fa3ff, #4c8dff); }
.inv-sksep{ height:1px; margin:7px -12px 4px; background:var(--inv-line-soft); }

.inv-dropline{ flex-shrink:0; height:2px; border-radius:1px; background:#ccff33; }
.inv-ghost{ position:fixed; z-index:50; pointer-events:none; width:24px; height:24px; }
.inv-ghost .inv-spr{ transform:scale(.75); transform-origin:0 0; }
.inv-ghost .inv-count{ right:-4px; bottom:-6px; font-size:9px; }

.inv-qty{
  position:fixed; z-index:60; width:220px; padding:12px; border-radius:8px; background:var(--inv-panel-2); box-sizing:border-box;
  border:1px solid var(--inv-accent); box-shadow:0 12px 30px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:10px;
  font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:12px; color:var(--inv-text);
}
.inv-qty .row{ display:flex; align-items:center; gap:8px; }
.inv-qty input[type=range]{ flex:1; accent-color:var(--inv-accent); }
.inv-qty input[type=number]{ width:56px; padding:4px 6px; border-radius:5px; border:1px solid var(--inv-line); background:#0d0f13; color:var(--inv-text); font:500 12px 'IBM Plex Mono', monospace; text-align:right; }
.inv-qty button{ flex:1; padding:6px; border-radius:5px; border:1px solid var(--inv-line); background:#0d0f13; color:var(--inv-text); font:inherit; }
.inv-qty button.primary{ background:var(--inv-accent); color:#0b1512; border:none; font-weight:600; }

@media (prefers-reduced-motion: reduce){ .inv-win.flash{ animation:none; } }
.inv-modes{ display:flex; gap:4px; }
.inv-follow{
  width:16px; height:16px; box-sizing:border-box; display:grid; place-items:center; padding:0; border-radius:4px;
  background:transparent; border:1px solid var(--inv-line); color:var(--inv-muted);
}
.inv-follow:hover{ border-color:var(--inv-accent-dim); }
.inv-modes.right{ justify-content:flex-end; }
.inv-follow.on{ color:#4ade80; }
.inv-follow.on.pvp{ color:#ef4444; }
.inv-follow.off{ color:var(--inv-muted); }
.inv-battle{ padding:5px 6px 6px; display:flex; flex-direction:column; gap:3px; }
.inv-battle-row{ padding:3px 6px 4px; border:1px solid transparent; border-radius:4px; cursor:default; }
.inv-battle-row:hover{ border-color:var(--inv-accent-dim); }
.inv-battle-row.target{ border-color:#ef4444; background:rgba(239, 68, 68, .1); }
.inv-battle-name{ display:block; font-size:11px; line-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-battle-hp{ height:3px; margin-top:2px; border-radius:2px; background:var(--inv-slot); overflow:hidden; }
.inv-battle-hp i{ display:block; height:100%; background:#22c55e; }
.inv-battle-hp.mid i{ background:#eab308; }
.inv-battle-hp.low i{ background:#ef4444; }
.inv-battle-empty{ padding:4px 2px; color:var(--inv-muted); font-size:11px; }
.inv-aiming, .inv-aiming *{ cursor:crosshair !important; }


/* Item animado (tocha acesa, fogo…): passa pelos quadros da folha. */
@keyframes inv-anim{ from{ background-position-x:var(--x0); } to{ background-position-x:var(--x1); } }

.player-menu{ position:fixed; z-index:60; min-width:150px; padding:4px; border-radius:6px; background:var(--inv-panel); border:1px solid var(--inv-line); box-shadow:0 6px 18px rgba(0,0,0,.5); display:flex; flex-direction:column; font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:12px; }
.player-menu-title{ padding:4px 8px 6px; font-weight:700; color:var(--inv-text); border-bottom:1px solid var(--inv-line-soft); margin-bottom:2px; }
.player-menu button{ all:unset; padding:5px 8px; border-radius:4px; color:var(--inv-text); cursor:pointer; }
.player-menu button:hover{ background:var(--inv-panel-2); color:var(--inv-accent); }

.inv-social-head{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--inv-muted); }
.inv-social-line{ display:flex; align-items:center; justify-content:space-between; gap:4px; padding:2px 6px; font-size:11px; }
.inv-social-acts{ display:flex; gap:2px; }
.inv-text-btn{ width:auto; min-width:18px; padding:0 6px; font-size:11px; background:rgba(255, 255, 255, .06); }
.inv-vip{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-vip::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--inv-muted); vertical-align:middle; }
.inv-vip.on::before{ background:#22c55e; }
.inv-vip.off{ color:var(--inv-muted); }
.inv-battle-hp.mana i{ background:#4c8dff; }
.inv-trade{ width:260px; }
.inv-trade-row{ display:flex; gap:8px; padding:8px; }
.inv-trade-side{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.inv-trade-who{ font-size:11px; font-weight:700; }
.inv-tslot{ position:relative; width:36px; height:36px; border-radius:4px; background:var(--inv-slot); border:1px solid var(--inv-line); display:flex; align-items:center; justify-content:center; }
.inv-tslot.mine{ border-style:dashed; border-color:var(--inv-accent-dim); }
.inv-trade-name{ font-size:10px; color:var(--inv-muted); }
.inv-trade-btns{ display:flex; justify-content:flex-end; gap:6px; padding:0 8px 8px; }
.inv-text-btn.primary{ background:var(--inv-accent-dim); color:var(--inv-text); }