/* ---------- inventario y equipo (módulo INV) ---------- */
#inv .card { max-width: 1040px; gap: 18px; max-height: calc(100vh - 32px); overflow-y: auto; }
/* 2 jugadores: panel más chico arriba, del lado de quien lo abrió, sin oscurecer; la partida se sigue viendo y jugando detrás */
#inv.duo { background: transparent; align-items: flex-start; justify-content: flex-start; padding: 10px 16px; pointer-events: none; }
#inv.duo.der { justify-content: flex-end; }
#inv.duo .card { pointer-events: auto; transform: scale(.62); transform-origin: top left; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#inv.duo.der .card { transform-origin: top right; }
#inv .invHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#inv .invHead span { color: #E0B2B2; font-weight: 700; }
.invBody { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 24px; align-items: stretch; }
.invMid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* consumibles (3) y accesos rápidos (9) con celdas del mismo tamaño */
.invQuick { display: grid; grid-template-columns: 3fr 9fr; gap: 16px; }
.invUse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.invHot { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.invUse .invCell { width: 100%; height: auto; aspect-ratio: 1; }
.invHot .invCell { width: 100%; height: auto; aspect-ratio: 1; }
.invUse .invCell svg, .invHot .invCell svg { width: 60%; height: 60%; }
.invCell .num { position: absolute; left: 4px; top: 2px; font-size: 11px; font-weight: 800; color: #E0B2B2; }
.invCell .cnt { position: absolute; right: 4px; bottom: 1px; font-size: 12px; font-weight: 800; color: #F2ECEC; }
.invCell.dim svg { opacity: .35; }
.invCell.dragging { opacity: .4; }
.invCell.over, .invCell.over:hover { border-color: #FFD98A; border-style: dashed; background: #2A2020; }
.invCell.picked, .invCell.picked:hover { border-color: #FF8D71; background: #2A2020; }
.invHot.target .invCell { border-style: dashed; border-color: #5E4A4A; }
.invHot.target .invCell.sel { border-color: #FFD98A; border-style: solid; }
.invModel { position: relative; flex: 1; min-height: 240px; border-radius: 12px; background: radial-gradient(ellipse at 50% 55%, #2A1414 0%, #111111 70%); border: 1px solid #2E2525; overflow: hidden; }
.invModel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.invModel canvas:active { cursor: grabbing; }
.invModelHead { position: absolute; z-index: 1; top: 0; left: 0; right: 0; min-height: 42px; padding: 11px 13px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; justify-content: space-between; background: linear-gradient(180deg, rgba(17,17,17,.94), rgba(17,17,17,0)); pointer-events: none; }
.invModelLabel { min-width: 0; color: #E0B2B2; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invModelRarity { flex: none; border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #111111; }
.invModel.itemPreview { border-color: #5E3E3A; box-shadow: inset 0 0 28px rgba(156,35,21,.12); }
/* set completo legendario: el vikingo brilla dorado */
.invModel.gold canvas { animation: invGold 1.6s ease-in-out infinite; }
@keyframes invGold { 0%, 100% { filter: drop-shadow(0 0 6px rgba(245,165,36,.55)); } 50% { filter: drop-shadow(0 0 18px rgba(255,217,138,.9)); } }
.invCol h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #E0B2B2; }
.invSlots { display: grid; grid-template-columns: repeat(1, 64px); gap: 8px; }
.invBag { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; }
.invCell { position: relative; width: 64px; height: 64px; min-height: 0; padding: 0; border-radius: 10px; background: #211919; border: 2px solid #2E2525; display: flex; align-items: center; justify-content: center; }
.invCell:hover { background: #2A2020; border-color: #3A3030; }
.invCell.sel, .invCell.sel:hover { border-color: var(--rarity, #FFD98A); background: #2A2020; box-shadow: inset 0 -4px 0 var(--rarity, #FFD98A), 0 0 12px color-mix(in srgb, var(--rarity, #FFD98A) 35%, transparent); }
.invCell svg { width: 40px; height: 40px; }
/* el clic siempre cae en el botón (si no, el doble clic se pierde cuando se redibuja el ícono) */
.invCell > * { pointer-events: none; }
.invCell .ghost { fill: #3A3030; }
.invCell[data-r="comun"] { --rarity: #E0B2B2; box-shadow: inset 0 -4px 0 #E0B2B2; }
.invCell[data-r="rara"] { --rarity: #FF8D71; box-shadow: inset 0 -4px 0 #FF8D71; }
.invCell[data-r="epica"] { --rarity: #FFD98A; box-shadow: inset 0 -4px 0 #FFD98A; }
.invCell[data-r="legendaria"] { --rarity: #F5A524; box-shadow: inset 0 -4px 0 #F5A524, 0 0 10px rgba(245,165,36,.45); }
.invDetail { display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 280px; }
/* alto fijo: el panel no cambia de tamaño al mirar distintas piezas */
.invItem { background: linear-gradient(135deg, #171212, #111111 65%); border: 1px solid #2E2525; border-radius: 12px; padding: 14px 16px; height: 208px; box-sizing: border-box; overflow: hidden; flex: none; transition: border-color .18s ease, box-shadow .18s ease; }
.invItem.hasItem { border-color: color-mix(in srgb, var(--item-color) 55%, #2E2525); box-shadow: inset 4px 0 0 var(--item-color), 0 10px 28px rgba(0,0,0,.18); }
.invItem h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.invItem .meta { margin: 2px 0 10px; font-size: 13px; color: #E0B2B2; }
.invItem ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 15px; }
.invItem .up { color: #7BC86C; }
.invItem .down { color: #FF8D71; }
.invItem .empty { color: #8A7272; }
/* extra de estadísticas y rango que da la herrería (js/tienda.js, forge) */
.forja { color: #F5A524; }
.invStats { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; font-size: 15px; }
.invStats span:nth-child(odd) { color: #E0B2B2; }
.invStats span:nth-child(even) { font-weight: 700; text-align: right; }
.invHelp { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: #E0B2B2; }
.invHelp kbd { font-family: inherit; font-weight: 700; font-size: 12px; background: #2A2020; border: 1px solid #3A3030; border-bottom-width: 3px; border-radius: 6px; padding: 2px 7px; color: #F2ECEC; margin-right: 5px; }
.invMsg { min-height: 20px; margin: 0; font-size: 14px; color: #FF8D71; }
@media (max-width: 760px) { .invQuick { grid-template-columns: 1fr; } .invUse { grid-template-columns: repeat(3, 40px); } .invHot { grid-template-columns: repeat(9, minmax(0, 40px)); gap: 4px; } .invBody { grid-template-columns: 1fr; } .invModel { min-height: 240px; } .invDetail { width: auto; } .invSlots { grid-template-columns: repeat(5, 52px); } .invCol:first-child { grid-column: 1 / -1; } .invCell { width: 52px; height: 52px; } .invBag { grid-template-columns: repeat(4, 52px); } }
/* pieza recién forjada: punto dorado hasta que se cierra el inventario */
.invCell.nuevo::before { content: ''; position: absolute; top: 5px; left: 5px; width: 9px; height: 9px; border-radius: 50%; background: #FFD98A; box-shadow: 0 0 0 2px #111111; }
/* rango de la herrería (+1 a +4) en la esquina de la pieza */
.invCell .forjaNum { position: absolute; right: 3px; top: 2px; font-size: 11px; font-weight: 800; color: #F5A524; text-shadow: 0 1px 0 #111111; }
.nuevoTag { display: inline-block; background: #FFD98A; color: #111111; font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; border-radius: 5px; padding: 1px 6px; margin-right: 4px; }