/* ---------- inventory (display shelf) ---------- */
.invgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* products float directly on the shelf environment — no card box */
.invitem{--pg:#5b6cff;--pg2:#cdd2f5;position:relative;cursor:pointer;padding:8px 6px 12px;transition:transform .16s ease}
.invitem:hover{transform:translateY(-3px)}
.invitem .disp{position:relative;height:146px;display:flex;align-items:flex-end;justify-content:center}
.invitem .glow{position:absolute;top:-8%;left:50%;transform:translateX(-50%);width:100%;height:86%;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--pg),transparent 62%);opacity:.34;filter:blur(22px)}
.invitem .prodwrap{position:relative;z-index:2;height:126px;display:flex;align-items:flex-end;justify-content:center;
  transition:transform .18s ease}
.invitem:hover .prodwrap{transform:translateY(-4px)}
.invitem .prodwrap .pv{height:126px;width:auto}
.invitem .prodwrap .wrapimg{max-height:126px;filter:drop-shadow(0 13px 16px rgba(0,0,0,.6))}
.invitem .pshadow{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:72px;height:13px;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);filter:blur(2.5px);transition:width .18s ease,opacity .18s ease}
.invitem:hover .pshadow{width:58px;opacity:.72}
.invitem .info{position:relative;z-index:2;text-align:center;margin-top:9px;padding:5px 6px 3px}
/* soft readability halo behind the label — no hard edges */
.invitem .info::before{content:'';position:absolute;inset:-2px 0 0;z-index:-1;
  background:radial-gradient(ellipse at 50% 42%,rgba(3,5,12,.5),transparent 76%)}
.invitem .kick{font-size:8.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--pg2);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.invitem .iset{font-size:14px;font-weight:800;color:#fff;margin-top:2px;line-height:1.15;text-shadow:0 1px 5px rgba(0,0,0,.8)}
.invitem .count{display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  background:rgba(10,13,26,.62);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(3px);
  color:#eef0ff;font-weight:800;font-size:11px;border-radius:99px;padding:3px 11px 3px 7px}
/* ---------- shelf theme environments ---------- */
.shelfroom{position:relative;border-radius:20px;padding:16px 12px 14px;overflow:hidden;isolation:isolate;transition:background .35s ease}
.shelfroom>.env{position:absolute;inset:0;z-index:0;pointer-events:none}
.shelfroom>.invgrid,.shelfroom>.emptystate{position:relative;z-index:2}
/* Cardboard Box (starter) */
.theme-cardboard{background:linear-gradient(180deg,#c49a63,#a9814d);box-shadow:inset 0 0 70px rgba(80,45,15,.45)}
.theme-cardboard .env{background:repeating-linear-gradient(90deg,rgba(120,80,40,.16) 0 1px,transparent 1px 22px)}
.theme-cardboard .env::before{content:'';position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(180deg,rgba(255,240,210,.45),transparent)}
.theme-cardboard .env::after{content:'';position:absolute;top:7px;left:24%;right:24%;height:15px;border-radius:3px;background:rgba(228,218,192,.6);box-shadow:0 2px 6px rgba(0,0,0,.18);transform:rotate(-.6deg)}
/* Busted Shelf */
.theme-busted{background:linear-gradient(180deg,#1a1712,#0c0a07);box-shadow:inset 0 0 90px #000}
.theme-busted .env{background:radial-gradient(120% 60% at 50% -12%,rgba(255,205,130,.13),transparent 62%)}
.theme-busted .env::before{content:'';position:absolute;left:4%;right:4%;bottom:13px;height:11px;border-radius:2px;background:linear-gradient(180deg,#5a4428,#2c2012);transform:rotate(-1.4deg);box-shadow:0 7px 13px rgba(0,0,0,.6)}
.theme-busted .env::after{content:'';position:absolute;left:46%;bottom:12px;width:3px;height:16px;background:#080605;transform:rotate(11deg)}
/* Pine Shelf */
.theme-pine{background:linear-gradient(180deg,#7a5230,#4c3216);box-shadow:inset 0 0 80px rgba(30,15,5,.5)}
.theme-pine .env{background:repeating-linear-gradient(90deg,rgba(40,22,8,.2) 0 2px,transparent 2px 30px),radial-gradient(120% 50% at 50% -12%,rgba(255,225,170,.16),transparent 60%)}
.theme-pine .env::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:12px;background:linear-gradient(180deg,#8a5f36,#5c3d1f);box-shadow:0 6px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,220,170,.3)}
/* Glass Cabinet */
.theme-glass{background:linear-gradient(180deg,#0f1526,#0a0f1c)}
.theme-glass .env{background:radial-gradient(90% 42% at 50% -8%,rgba(150,190,255,.22),transparent 60%)}
.theme-glass .env::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(180,210,255,.08) 46%,transparent 52%,transparent 66%,rgba(180,210,255,.06) 70%,transparent 74%)}
.theme-glass .env::after{content:'';position:absolute;left:6%;right:6%;bottom:12px;height:2px;background:linear-gradient(90deg,transparent,rgba(200,225,255,.6),transparent);box-shadow:0 0 16px rgba(150,190,255,.4)}
/* Neon Arcade */
.theme-neon{background:linear-gradient(180deg,#160a2b 0%,#20103e 55%,#060010 100%)}
.theme-neon .env{background:radial-gradient(80% 30% at 50% 44%,rgba(255,60,200,.16),transparent 60%),radial-gradient(60% 20% at 50% 46%,rgba(60,220,255,.14),transparent 60%)}
.theme-neon .env::before{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;background:repeating-linear-gradient(90deg,rgba(90,230,255,.34) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(90,230,255,.28) 0 1px,transparent 1px 26px);transform:perspective(180px) rotateX(62deg);transform-origin:bottom;-webkit-mask:linear-gradient(180deg,transparent,#000);mask:linear-gradient(180deg,transparent,#000);opacity:.6}
.theme-neon .env::after{content:'';position:absolute;left:0;right:0;bottom:46%;height:2px;background:linear-gradient(90deg,transparent,#ff4dd8,#4de6ff,transparent);box-shadow:0 0 20px #ff4dd8,0 0 30px #4de6ff}
.theme-neon .invitem .iset{color:#ffe8ff}
.theme-neon .invitem .kick{color:#7df3ff}
/* Champion's Vault */
.theme-vault{background:radial-gradient(120% 90% at 50% 0%,#20222e,#0a0a0f 70%)}
.theme-vault .env{background:radial-gradient(60% 34% at 30% -8%,rgba(255,220,140,.15),transparent 60%),radial-gradient(60% 34% at 70% -8%,rgba(255,220,140,.15),transparent 60%)}
.theme-vault .env::before{content:'';position:absolute;inset:6px;border-radius:15px;pointer-events:none;border:2px solid transparent;background:linear-gradient(135deg,#f4d27a,#a97c2b,#f4d27a) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.theme-vault .env::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:12px;background:linear-gradient(180deg,#2a2c38,#14151d);border-top:2px solid #d9b25a;box-shadow:0 -1px 10px rgba(217,178,90,.4)}
.theme-vault .invitem .kick{color:#f0cd80}
/* Prismatic Chamber (mythic) */
.theme-holo{background:linear-gradient(125deg,#3a1a5e,#1a3a6e,#1a6e5a,#6e5a1a,#6e1a4a,#3a1a5e);background-size:400% 400%;animation:holoshift 13s ease infinite}
@keyframes holoshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.theme-holo>.env{background:radial-gradient(80% 50% at 50% 0%,rgba(255,255,255,.22),transparent 60%)}
.theme-holo>.env::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.1) 0 8px,transparent 8px 26px);mix-blend-mode:overlay;opacity:.5}