/* Shadow Realm 3D — assets/inventory.css
 * SR-3D-INVENTORY-UI:v1 — Onyx aesthetic (Cinzel headers, purple/gold) for the
 * server-backed gear inventory modal. Additive; scoped under .sr3d-inv-* so it
 * never collides with the legacy HUD inventory styles. */

.sr3d-inv-modal { position: fixed; inset: 0; z-index: 4000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sr3d-inv-backdrop { position: absolute; inset: 0; background: rgba(10, 6, 20, 0.78); backdrop-filter: blur(4px); }
.sr3d-inv-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(940px, 94vw); max-height: 90vh; overflow: hidden;
  background: linear-gradient(160deg, #221436 0%, #160c26 100%);
  border: 1px solid #6a3aa0; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(106,58,160,0.12);
  color: #e8e2f5; display: flex; flex-direction: column;
}
.sr3d-inv-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid #3a2a55; }
.sr3d-inv-title { font-family: "Cinzel", "Times New Roman", serif; font-weight: 700; font-size: 22px; letter-spacing: 0.06em; margin: 0; color: #f5d98a; text-shadow: 0 0 12px rgba(245,217,138,0.3); }
.sr3d-inv-totals { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.sr3d-inv-pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(106,58,160,0.22); border: 1px solid #4a2f70; color: #d8c8f0; }
.sr3d-inv-close { background: none; border: 1px solid #4a2f70; color: #c7b6e8; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.sr3d-inv-close:hover { background: rgba(106,58,160,0.3); }

.sr3d-inv-body { display: flex; gap: 18px; padding: 18px 20px; overflow: auto; }
.sr3d-inv-left { width: 240px; flex-shrink: 0; }
.sr3d-inv-right { flex: 1; min-width: 0; }

.sr3d-inv-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.sr3d-inv-slot { background: rgba(0,0,0,0.25); border: 2px solid #3a2a55; border-radius: 10px; padding: 8px 4px; text-align: center; cursor: pointer; min-height: 70px; transition: transform .08s; }
.sr3d-inv-slot:hover { transform: translateY(-2px); }
.sr3d-inv-slot-ic { font-size: 22px; }
.sr3d-inv-slot-nm { font-size: 9px; font-weight: 700; line-height: 1.1; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.sr3d-inv-slot-lvl { font-size: 8px; color: #9a86c0; }
.sr3d-inv-slot-empty { font-size: 9px; color: #6a5a85; margin-top: 4px; }

.sr3d-inv-statpanel { background: rgba(0,0,0,0.25); border: 1px solid #3a2a55; border-radius: 10px; padding: 10px 12px; }
.sr3d-inv-stathdr { font-family: "Cinzel", serif; font-size: 13px; font-weight: 700; color: #f5d98a; margin-bottom: 8px; letter-spacing: 0.04em; }
.sr3d-inv-statrow { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(58,42,85,0.4); }
.sr3d-inv-statrow span:last-child { color: #5bc85b; font-weight: 600; }
.sr3d-inv-statrow.dim { opacity: 0.4; }
.sr3d-inv-statrow.dim span:last-child { color: #9a86c0; }

.sr3d-inv-sortbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; color: #9a86c0; }
.sr3d-inv-sortbtn { background: rgba(106,58,160,0.18); border: 1px solid #4a2f70; color: #c7b6e8; padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.sr3d-inv-sortbtn:hover { background: rgba(106,58,160,0.34); }
.sr3d-inv-sortbtn.active { background: #6a3aa0; color: #fff; border-color: #8a5ac0; }

.sr3d-inv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.sr3d-inv-cell { aspect-ratio: 1; background: rgba(0,0,0,0.3); border: 1px solid #2a1d40; border-radius: 8px; position: relative; }
.sr3d-inv-cell.filled { cursor: pointer; border-width: 2px; transition: transform .08s; }
.sr3d-inv-cell.filled:hover { transform: scale(1.08); z-index: 2; }
.sr3d-inv-cell.eq { outline: 2px solid #f5d98a; outline-offset: -2px; }
.sr3d-inv-cell-ic { font-size: 20px; text-align: center; line-height: 1; padding-top: 22%; }
.sr3d-inv-cell-lvl { position: absolute; bottom: 1px; right: 3px; font-size: 8px; font-weight: 700; color: #d8c8f0; text-shadow: 0 0 3px #000; }
.sr3d-inv-cell-eq { position: absolute; top: 1px; left: 3px; font-size: 8px; font-weight: 800; color: #f5d98a; }

.sr3d-inv-tooltip { position: absolute; width: 230px; background: #160c26; border: 1px solid #6a3aa0; border-radius: 10px; padding: 10px 12px; font-size: 12px; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.6); pointer-events: none; }
.sr3d-tt-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 14px; }
.sr3d-tt-sub { font-size: 10px; color: #9a86c0; margin: 2px 0 8px; }
.sr3d-tt-stat { padding: 2px 0; color: #d8c8f0; }
.sr3d-tt-stat .up { color: #5bc85b; font-weight: 700; }
.sr3d-tt-stat .dn { color: #f87171; font-weight: 700; }
.sr3d-tt-src { font-size: 10px; color: #8a7ab0; margin-top: 6px; font-style: italic; }
.sr3d-tt-cmp { font-size: 10px; color: #f5d98a; margin-top: 4px; }
.sr3d-tt-hint { font-size: 9px; color: #6a5a85; margin-top: 6px; border-top: 1px solid #2a1d40; padding-top: 4px; }

/* Touch-friendly item action sheet (tap a grid item) */
.sr3d-inv-sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
.sr3d-sheet-backdrop { position: absolute; inset: 0; background: rgba(8,4,16,0.6); }
.sr3d-sheet-card { position: relative; z-index: 1; width: min(300px, 86%); background: #160c26; border: 2px solid #6a3aa0; border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 44px rgba(0,0,0,0.6); }
.sr3d-sheet-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 16px; }
.sr3d-sheet-sub { font-size: 11px; color: #9a86c0; margin: 3px 0 10px; }
.sr3d-sheet-stat { font-size: 13px; color: #d8c8f0; padding: 3px 0; }
.sr3d-sheet-src { font-size: 11px; color: #8a7ab0; font-style: italic; margin-top: 8px; }
.sr3d-sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sr3d-sheet-btn { width: 100%; padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid #4a2f70; background: rgba(106,58,160,0.22); color: #e8e2f5; }
.sr3d-sheet-btn:active { transform: scale(0.98); }
.sr3d-sheet-btn.primary { background: #6a3aa0; border-color: #8a5ac0; color: #fff; }
.sr3d-sheet-btn.ghost { background: none; color: #9a86c0; font-weight: 600; }

@media (max-width: 640px) {
  .sr3d-inv-body { flex-direction: column; }
  .sr3d-inv-left { width: 100%; }
  .sr3d-inv-grid { grid-template-columns: repeat(6, 1fr); }
}

/* <!-- SR-3D-INVENTORY-OPEN-FIX:start v1 (2026-06-19) — class-collision guard.
 * index.html carries a LEGACY inline `.sr3d-inv-panel { position:fixed; inset:0;
 * display:none; background:rgba(8,5,18,.78) }` rule (the old full-screen
 * loot-review overlay). That inline <style> loads AFTER this file, so at equal
 * specificity (single class) it OVERRODE the modal panel below — forcing
 * display:none + full-bleed positioning. The backdrop still showed (no clash on
 * .sr3d-inv-backdrop), so users saw a darkened screen with no card.
 * FIX: re-assert the real panel box at ID specificity (#id .class > .class), which
 * wins regardless of load order. Also lift the whole modal above every HUD/audio
 * overlay (those sit at 9000–99999; the modal was only 4000). */
.sr3d-inv-modal { z-index: 100001; }
#sr3d-inv-modal .sr3d-inv-panel {
  position: absolute; inset: auto; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(940px, 94vw); max-height: 90vh; overflow: hidden;
  background: linear-gradient(160deg, #221436 0%, #160c26 100%);
  border: 1px solid #6a3aa0; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(106,58,160,0.12);
  color: #e8e2f5; display: flex; flex-direction: column;
}
/* <!-- SR-3D-INVENTORY-OPEN-FIX:end v1 --> */

/* <!-- SR-3D-INV-AESTHETIC:start v1 (2026-06-19) — full-width layout, top stat
 * scroller, smaller item icons (tap a cell → existing equip/salvage sheet).
 * ID-scoped so it overrides both inventory.css base rules and the legacy
 * index.html .sr3d-inv-panel collision regardless of load order. */

/* Full-screen / full-width panel (no centered card). */
#sr3d-inv-modal .sr3d-inv-panel {
  position: absolute; inset: 0; top: 0; left: 0; transform: none;
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  border: none; border-radius: 0;
}

/* Equipped bonuses → horizontal scroller across the top. */
#sr3d-inv-modal .sr3d-inv-statbar {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid #3a2a55;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #4a2f70 transparent;
}
#sr3d-inv-modal .sr3d-inv-statbar::-webkit-scrollbar { height: 6px; }
#sr3d-inv-modal .sr3d-inv-statbar::-webkit-scrollbar-thumb { background: #4a2f70; border-radius: 3px; }
.sr3d-inv-statchip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.28); border: 1px solid #3a2a55;
}
.sr3d-inv-statchip .k { color: #c7b6e8; }
.sr3d-inv-statchip .v { color: #5bc85b; font-weight: 700; }
.sr3d-inv-statchip.dim { opacity: 0.4; }
.sr3d-inv-statchip.dim .v { color: #9a86c0; }
.sr3d-inv-statchip.hdr { background: none; border: none; padding-left: 0; }
.sr3d-inv-statchip.hdr .k { font-family: "Cinzel", serif; font-weight: 700; color: #f5d98a; letter-spacing: 0.04em; }

/* Body uses the full width; grid fills it with smaller, denser cells. */
#sr3d-inv-modal .sr3d-inv-body { flex: 1; }
#sr3d-inv-modal .sr3d-inv-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
#sr3d-inv-modal .sr3d-inv-cell-ic { font-size: 15px; padding-top: 16%; }
#sr3d-inv-modal .sr3d-inv-art { max-width: 100%; max-height: 100%; }

@media (max-width: 640px) {
  #sr3d-inv-modal .sr3d-inv-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
}
/* <!-- SR-3D-INV-AESTHETIC:end v1 --> */

/* <!-- SR-3D-GEAR-CRAFT:start v1 (2026-06-19) — fuse ★ / upgrade +N / sockets /
 * enchant badges + crafting action sheet. */
.sr3d-inv-stars { color: #f5d98a; text-shadow: 0 0 6px rgba(245,217,138,0.6); letter-spacing: -1px; }

/* Grid-cell corner badges. */
.sr3d-inv-cell-up   { position: absolute; top: 1px; right: 3px; font-size: 8px; font-weight: 800; color: #5bc85b; text-shadow: 0 0 3px #000; }
.sr3d-inv-cell-star { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 7px; color: #f5d98a; text-shadow: 0 0 3px #000; letter-spacing: -1px; line-height: 1; }
.sr3d-inv-cell-ench { position: absolute; bottom: 1px; left: 3px; font-size: 9px; color: #c9a6ff; text-shadow: 0 0 4px #8a5ac0; }
.sr3d-inv-cell.starred { box-shadow: inset 0 0 14px rgba(245,217,138,0.25) !important; }

/* Socket pips. */
.sr3d-sock-row { display: inline-flex; gap: 4px; vertical-align: middle; }
.sr3d-sock { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #6a3aa0; background: rgba(0,0,0,0.4); display: inline-block; }
.sr3d-sock.on { background: radial-gradient(circle at 35% 30%, #b98bff, #6a3aa0); border-color: #c9a6ff; box-shadow: 0 0 6px rgba(165,102,255,0.7); }
.sr3d-sheet-sock { font-size: 12px; color: #9a86c0; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.sr3d-ench-tag { color: #c9a6ff; font-weight: 700; }

/* Crafting buttons carry a small cost sub-label. */
.sr3d-sheet-btn { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sr3d-sheet-btn .sr3d-btn-sub { font-size: 10px; font-weight: 600; opacity: 0.75; }
.sr3d-sheet-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.sr3d-sheet-actions { max-height: 56vh; overflow-y: auto; }

/* Fuse feeder picker. */
.sr3d-fuse-list { max-height: 46vh; overflow-y: auto; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.sr3d-fuse-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,0.25); border: 1px solid #3a2a55; cursor: pointer; }
.sr3d-fuse-row:hover { background: rgba(106,58,160,0.25); }
.sr3d-fuse-row input { width: 18px; height: 18px; accent-color: #8a5ac0; flex: 0 0 auto; }
.sr3d-fuse-ic { font-size: 18px; width: 24px; text-align: center; flex: 0 0 auto; }
.sr3d-fuse-ic .sr3d-inv-art { width: 22px; height: 22px; }
.sr3d-fuse-nm { flex: 1; font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr3d-fuse-lv { font-size: 11px; color: #9a86c0; flex: 0 0 auto; }
/* <!-- SR-3D-GEAR-CRAFT:end v1 --> */

/* SR-3D-INV-QUICKACTIONS v1 — one-tap Equip Best + Auto-Fuse */
.sr3d-inv-qa{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(168,120,255,.16)}
.sr3d-inv-qabtn{flex:1;min-height:42px;cursor:pointer;border-radius:10px;font:700 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.02em;color:#f3e9ff;background:linear-gradient(135deg,#3a2364,#160f24);border:1px solid rgba(168,120,255,.5);-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .15s}
.sr3d-inv-qabtn:hover{border-color:rgba(168,120,255,.9)}
.sr3d-inv-qabtn:active{transform:scale(.97)}
.sr3d-inv-toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%) translateY(10px);background:rgba(20,14,32,.96);color:#f3e9ff;border:1px solid rgba(168,120,255,.55);border-radius:999px;padding:9px 18px;font:600 13px/1 "Inter",sans-serif;opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:20;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.sr3d-inv-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* SR-3D-INV-FILTERS + ENCHANT-STONES v1 — mobile-first filter chips + materials */
.sr3d-inv-filterbar{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 4px;scrollbar-width:none}
.sr3d-inv-filterbar::-webkit-scrollbar{display:none}
.sr3d-inv-fbtn{flex:0 0 auto;min-height:40px;padding:8px 14px;cursor:pointer;border-radius:999px;white-space:nowrap;font:600 12.5px/1 "Inter",system-ui,sans-serif;color:#cdbce8;background:rgba(20,14,32,.7);border:1px solid rgba(168,120,255,.28);-webkit-tap-highlight-color:transparent}
.sr3d-inv-fbtn.active{color:#0a0710;background:linear-gradient(90deg,#e8c87a,#d9b3ff);border-color:transparent;font-weight:700}
/* Rune-stone materials list */
.sr3d-mat-head{padding:10px 12px;color:#b9a9d6;font:500 12.5px/1.45 "Inter",sans-serif}
.sr3d-mat-list{display:flex;flex-direction:column;gap:8px;padding:4px 8px 12px}
.sr3d-mat-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,#171022,#100b1a);border:1px solid rgba(168,120,255,.25)}
.sr3d-mat-ic{font-size:22px;flex:0 0 auto}
.sr3d-mat-name{flex:1;font:700 13.5px/1.2 "Cinzel",Georgia,serif}
.sr3d-mat-ct{font:700 14px/1 "JetBrains Mono",monospace;color:#f3e9ff;min-width:42px;text-align:right}
.sr3d-mat-fuse{flex:0 0 auto;min-height:40px;padding:8px 14px;cursor:pointer;border-radius:10px;font:700 12.5px/1 "Inter",sans-serif;color:#f3e9ff;background:linear-gradient(135deg,#3a2364,#160f24);border:1px solid rgba(168,120,255,.5);-webkit-tap-highlight-color:transparent}
.sr3d-mat-fuse:disabled{opacity:.4;cursor:not-allowed}
.sr3d-mat-max{flex:0 0 auto;font:700 11px/1 "Inter",sans-serif;color:#e8c87a;padding:8px 12px}
.sr3d-mat-empty{padding:24px 14px;text-align:center;color:#8b7aa8;font-size:13px}