/* ============================================================================
 * Inventory skin v3 — the Diablo II spread: two dark stone pages side by side,
 * sunken stone sockets, thin beveled edges, muted gold lettering. Flat CSS —
 * the only image is the kit's dark cracked-stone tile (--img-panel-tex from
 * assets/ui/emberbound/kit.css) as the page surface.
 *
 * Scoping: shell rules key on .box[data-tab="inventory"], content rules on
 * #itemsPaneInv (exists only in that pane). The other tabs keep the old chrome.
 * Loaded after skin-sheet.css so equal-specificity overrides win here.
 * ========================================================================= */

#itemsWin{
  --d2-ink:#e8d9ae;                /* cream lettering */
  --d2-gold:#c0a262;               /* gold labels / trims */
  --d2-faint:#77694a;
  --d2-stone:#1c1b19;              /* page base under the tile */
  --d2-sunk:#111013;               /* socket / cell recess */
  --d2-line:#3c382e;               /* bevel light line */
  --d2-serif:Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  /* the classic sunken-stone recess */
  --d2-inset:inset 0 2px 6px #000d, inset 0 0 0 1px #000,
             0 1px 0 #4b453733, 1px 0 0 #4b453722, -1px 0 0 #00000088;
}

/* ------------------------------------------------------------ shell takeover */
#itemsWin .box[data-tab="inventory"]{
  width:min(96vw, 1460px);
  height:min(94vh, 950px);
  background:none;border:none;border-image:none;box-shadow:none;border-radius:0;
  overflow:visible;top:50%;transform:translate(-50%,-50%);
}
#itemsWin .box[data-tab="inventory"] .winbar,
#itemsWin .box[data-tab="inventory"] .invtabs{display:none}
#itemsWin .box[data-tab="inventory"] .winbody{overflow:visible}
#itemsWin #itemsPaneInv{padding:0;gap:0}

/* ------------------------------------------------------------ the two pages */
#itemsPaneInv .orn2{
  display:flex;gap:6px;height:100%;min-height:0;
  align-items:stretch;justify-content:center;
  filter:drop-shadow(0 16px 24px #000d);
}
#itemsPaneInv .ornpanel{display:flex;flex-direction:column;min-height:0;min-width:0}
#itemsPaneInv .ornchar{flex:none;width:clamp(340px, 30%, 430px)}
#itemsPaneInv .orninv{flex:1;min-width:340px}

/* small gold title strip, D2-style — no banner art */
#itemsPaneInv .ornhdr{flex:none;position:relative;z-index:2;height:34px;
  display:grid;place-items:center}
#itemsPaneInv .orntitle{
  font:700 17px/1 var(--d2-serif);letter-spacing:.3em;text-transform:uppercase;
  padding-left:.3em;color:var(--d2-gold);
  text-shadow:0 1px 0 #000, 0 0 10px #000}
#itemsPaneInv .ornx{position:absolute;right:2px;top:2px;width:28px;height:28px;
  display:grid;place-items:center;background:linear-gradient(#7a221565, #4a120c);
  border:1px solid #000;box-shadow:inset 0 1px 0 #a5443255, 0 1px 0 #000;
  color:#e8c090;cursor:pointer;font-size:14px;line-height:1;z-index:3}
#itemsPaneInv .ornx:hover{color:#fff;background:linear-gradient(#96301f, #5c1810)}

/* ------------------------------------------------------------ page body
 * Dark cracked stone with a double beveled edge: black outer line, faint
 * raised trim, sunken interior shadowing at the rim. */
#itemsPaneInv .ornbody{
  flex:1;min-height:0;position:relative;display:flex;flex-direction:column;
  border:2px solid #000;
  background:var(--d2-stone) var(--img-panel-tex);
  box-shadow:inset 0 0 0 1px var(--d2-line), inset 0 0 0 2px #0a0908,
             inset 0 0 60px #000c;
  padding:14px 12px 10px;
}

/* ------------------------------------------------------------ character page
 * Anatomical paperdoll: the live character preview fills the page behind a
 * 3-column rack of sockets — armour down the centre of the body, accessories
 * and hands flanking it (Diablo's arrangement). */
#itemsPaneInv .charbody{position:relative}
#itemsPaneInv .dollgrid{flex:1;position:relative;display:flex;gap:8px;
  min-height:0;align-items:stretch;justify-content:space-between;padding-top:14px}
#itemsPaneInv .ornportrait{position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 55% at 50% 42%, #26221c, transparent 85%);
  border:none;box-shadow:none}
#itemsPaneInv .ornportrait canvas{position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated}
#itemsPaneInv .dcol{flex:none;position:relative;z-index:1;display:flex;flex-direction:column;gap:0;
  justify-content:space-between;width:62px}
#itemsPaneInv .dcol.dmid{width:72px}
#itemsPaneInv .dcol .slotcell{margin-top:15px}
#itemsPaneInv .dcol .slab{
  position:absolute;top:-13px;left:-8px;right:-8px;bottom:auto;text-align:center;
  white-space:nowrap;overflow:hidden;
  font:700 9.5px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--d2-faint);text-shadow:0 1px 0 #000;pointer-events:none}
/* the sockets float over the preview, so they stay glassy-dark, not opaque */
#itemsPaneInv .dollgrid .slotcell{background:#111013d9}
#itemsPaneInv .ornplate{position:relative;z-index:1}
#itemsPaneInv .ornbtns{position:relative;z-index:1}

/* the stat readout — D2's framed rows */
#itemsPaneInv .ornplate{flex:none;background:#141310;border:1px solid #000;
  box-shadow:inset 0 0 0 1px var(--d2-line);padding:6px 8px;margin:0 2px}
#itemsPaneInv .gearstats{max-height:150px;overflow:auto;border:none;padding:0 4px 0 0;
  display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;
  scrollbar-color:#5a4e36 #141310}
#itemsPaneInv .gstat{display:flex;justify-content:space-between;align-items:baseline;
  background:var(--d2-sunk);border:1px solid #000;box-shadow:0 1px 0 #4b453722;
  padding:3px 8px;font:600 11.5px/1.3 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--d2-gold)}
#itemsPaneInv .gstat b{color:var(--d2-ink);font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #000}
#itemsPaneInv .gstat.big{font-size:12.5px}
#itemsPaneInv .gstat.big b{color:#ffe9b0;font-size:14px}
#itemsPaneInv .gsep{flex:none;height:2px;margin:3px 0;background:none}
#itemsPaneInv .gearlvl{font:700 12px/1.7 var(--d2-serif);letter-spacing:.16em;
  text-transform:uppercase;color:var(--d2-ink);text-align:center;text-shadow:0 1px 0 #000}

/* bottom buttons — beveled stone plates */
#itemsPaneInv .ornbtns{flex:none;display:flex;gap:6px;padding:10px 2px 2px;justify-content:center}
#itemsPaneInv .ornbtn{
  flex:1;min-width:0;height:34px;cursor:pointer;padding:0 4px;
  background:linear-gradient(#2a2723, #191713);
  border:1px solid #000;box-shadow:inset 0 1px 0 #57503f55, 0 1px 0 #00000088;
  white-space:nowrap;overflow:hidden;
  font:700 11.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--d2-gold);text-shadow:0 1px 0 #000}
#itemsPaneInv .ornbtn:hover{color:var(--d2-ink);background:linear-gradient(#332f29, #1e1b16)}
#itemsPaneInv .ornbtn:active{box-shadow:inset 0 2px 5px #000c}

/* ------------------------------------------------------------ sockets */
#itemsPaneInv .slotcell{
  aspect-ratio:1;width:100%;height:auto;flex:none;margin:0;border-radius:0;
  background:var(--d2-sunk);border:1px solid #000;box-shadow:var(--d2-inset);
  font-size:20px}
#itemsPaneInv .slotcell:hover{background:#1c1a20;box-shadow:var(--d2-inset), inset 0 0 12px #6a5a3055}
#itemsPaneInv .slotcell.empty{background:var(--d2-sunk);border:1px solid #000;border-style:solid}
#itemsPaneInv .slotcell .ph-icon{opacity:.25;filter:grayscale(.6)}
#itemsPaneInv .slotcell img{image-rendering:pixelated}
#itemsPaneInv .slotcell .q{right:4px;bottom:3px;font-size:11px;color:var(--d2-ink);
  text-shadow:0 1px 0 #000, 0 0 4px #000}
#itemsPaneInv .slotcell .rr{border-radius:0}

/* ------------------------------------------------------------ container tabs
 * The stash's segmented bar: equal-width plates, spaced small-caps serif. */
#itemsPaneInv .containertabs{flex:none;display:flex;gap:2px;min-height:0;
  overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
#itemsPaneInv .containertab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:max-content;height:34px;padding:0 12px;cursor:pointer;border-radius:0;
  background:#131210;border:1px solid #000;
  box-shadow:inset 0 1px 0 #57503f33;
  font:600 12px/1 var(--d2-serif);letter-spacing:.22em;text-transform:uppercase;
  color:var(--d2-faint);text-shadow:0 1px 0 #000}
#itemsPaneInv .containertab img{width:18px;height:18px;image-rendering:pixelated;opacity:.75}
#itemsPaneInv .containertab em{font-style:normal;font:600 10px/1 var(--ui);
  color:var(--d2-faint);letter-spacing:.04em}
#itemsPaneInv .containertab:hover{color:var(--d2-gold)}
#itemsPaneInv .containertab.on{color:#f5ecd8;background:#22201c;
  box-shadow:inset 0 1px 0 #6a5f4655, inset 0 -2px 0 #c0a26244}
#itemsPaneInv .containertab.on em{color:var(--d2-gold)}

/* ------------------------------------------------------------ the board
 * A sunken stone tray; the cells are thin-lined squares like D2's grid. */
#itemsPaneInv .gridinset{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  background:var(--d2-sunk);border:1px solid #000;box-shadow:var(--d2-inset);
  padding:8px;
  scrollbar-width:thin;scrollbar-color:#5a4e36 var(--d2-sunk)}
#itemsPaneInv .gridinset::-webkit-scrollbar{width:12px}
#itemsPaneInv .gridinset::-webkit-scrollbar-track{background:var(--d2-sunk)}
#itemsPaneInv .gridinset::-webkit-scrollbar-thumb{background:linear-gradient(#5a4e36,#3a3226);
  border:2px solid var(--d2-sunk)}
#itemsPaneInv .invgrid2{
  display:grid;grid-template-columns:repeat(var(--cols,6),var(--cell,64px));
  grid-auto-rows:var(--cell,64px);gap:0;justify-content:center;align-content:start;
  height:auto;min-height:calc(var(--rows,4) * var(--cell,64px))}
#itemsPaneInv .gridcell{
  background:#16151a;border:1px solid #2e2b25;border-radius:0;
  box-shadow:inset 0 0 6px #0009;margin:0 -1px -1px 0}
#itemsPaneInv .gridcell.fp-ok{background:#1c2a16;border-color:#4a7a38;box-shadow:inset 0 0 8px #3a6a2888}
#itemsPaneInv .gridcell.fp-bad{background:#2a1614;border-color:#7a3a30;box-shadow:inset 0 0 8px #6a281e88}
#itemsPaneInv .is2{
  width:auto;height:auto;aspect-ratio:auto;border-radius:0;font-size:20px;
  background:#2b1a15d9;border:1px solid #52362a;outline:none;
  box-shadow:inset 0 0 10px #000c}
#itemsPaneInv .is2:hover{filter:brightness(1.3)}
#itemsPaneInv .is2 img{width:100%;height:100%;object-fit:contain;padding:6%;
  image-rendering:pixelated}

/* overflow strip keeps its warning colour */
#itemsPaneInv .invoverflow{border-top:1px solid #7a4a3a;margin:10px 2px 0;padding-top:8px}
#itemsPaneInv .ovtitle{font-size:10px;color:#e09a6a;letter-spacing:.08em}
#itemsPaneInv .ovgrid{display:grid;grid-template-columns:repeat(auto-fill,var(--cell,64px));
  grid-auto-rows:var(--cell,64px);gap:2px;justify-content:start}

/* ------------------------------------------------------------ field kit + foot */
#itemsPaneInv .fieldkit{flex:none;border:none;padding:10px 4px 0}
#itemsPaneInv .fieldkit-title{color:var(--d2-gold);font-size:10px;letter-spacing:.14em;margin-bottom:5px}
#itemsPaneInv .fieldkit-title span{color:var(--d2-faint);font-size:10px}
#itemsPaneInv .fieldkit-grid{display:grid;grid-template-columns:repeat(7,minmax(0,50px));
  gap:5px;justify-content:start;align-items:start}
#itemsPaneInv .toolslot{font-size:15px}
#itemsPaneInv .toolslot .ph-icon img{width:60%;height:60%;opacity:.3}
#itemsPaneInv .toolslot .slab{font-size:8px;color:var(--d2-faint);bottom:1px}

#itemsPaneInv .ornfoot{flex:none;display:flex;align-items:flex-end;gap:14px;padding:10px 6px 2px}
#itemsPaneInv .invinfo{flex:1;min-width:0;border:none;padding:0}
#itemsPaneInv .ii-title{font-size:13px;color:var(--d2-ink);margin-bottom:2px;
  font-family:var(--d2-serif);letter-spacing:.04em;text-shadow:0 1px 0 #000}
#itemsPaneInv .ii-text{font-size:11px;color:var(--d2-gold);line-height:1.45}
#itemsPaneInv .ii-text b{color:var(--d2-ink)}
/* the stash's gold plaque */
#itemsPaneInv .currencies{flex:none;display:flex;gap:10px;padding:5px 14px;
  background:#0d0c0a;border:1px solid #000;
  box-shadow:inset 0 0 0 1px var(--d2-line), inset 0 2px 6px #000c}
#itemsPaneInv .curr{font:600 13px/1.4 var(--d2-serif);letter-spacing:.14em;
  color:var(--d2-ink);text-shadow:0 1px 0 #000}
#itemsPaneInv .curr .coin{width:13px;height:13px}
#itemsPaneInv .curr .cl{font-size:10px;color:var(--d2-gold)}

/* the empty-bag note, readable on stone */
#itemsPaneInv .empty-note{color:var(--d2-gold)}
#itemsPaneInv .empty-note b{color:var(--d2-ink)}

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 980px){
  #itemsPaneInv .orn2{flex-direction:column;overflow-y:auto}
  #itemsPaneInv .ornchar{width:100%}
  #itemsWin .box[data-tab="inventory"]{width:98vw;height:94vh}
}