/* BuildCoins — wallet, marketplace, inventory */

.bc-screen { padding-bottom: 100px; }
.bc-hero {
  padding: calc(var(--nav-h, 72px) + 28px) var(--page-px, 24px) 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.bc-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 52px);
  margin: 0 0 8px;
  color: var(--text);
}
.bc-hero p { color: var(--text-dim); max-width: 560px; margin: 0; line-height: 1.6; }

.bc-wallet-card {
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 20% 0%, oklch(0.45 0.14 85 / 0.25), transparent 50%),
    var(--bg-raised);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) {
  .bc-wallet-card { grid-template-columns: 1fr; margin-left: var(--page-px); margin-right: var(--page-px); }
}
.bc-balance {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 8vw, 72px);
  color: var(--amber);
  line-height: 1;
}
.bc-balance span {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-faint);
  display: block;
  margin-bottom: 6px;
}
.bc-stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bc-stat {
  flex: 1;
  min-width: 110px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: oklch(0.14 0.02 295 / 0.5);
}
.bc-stat .v { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--lime); }
.bc-stat .l { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; }

.bc-disclaimer {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--text-faint);
  line-height: 1.5;
  margin-top: 12px;
}

.bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--page-px, 24px) 40px;
}
.bc-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-raised);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.bc-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.bc-card img { width: 100%; height: 140px; object-fit: cover; background: oklch(0.2 0.03 295); }
.bc-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bc-card-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.bc-card-meta {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bc-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--amber);
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════
   Marketplace asset card (.bc-card--asset)
   Scoped so the AI, spotlight and wallet-package variants that
   share .bc-card keep their own layout.

   The pack art is authored 1024x1024; the shared `.bc-card img`
   rule cropped it to a 140px letterbox, beheading every render.
   The media box is square so the art is shown as drawn.
   ═══════════════════════════════════════════════════════════ */
.bc-card--asset { border-radius: 20px; }

/* ── Media ───────────────────────────────────────────────── */
.bc-card--asset .bc-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 19px 19px 0 0;
  background:
    radial-gradient(120% 90% at 50% 10%, oklch(0.30 0.10 288 / 0.50), transparent 62%),
    oklch(0.11 0.028 272);
  box-shadow: inset 0 -1px 0 oklch(1 0 0 / 0.07);
}
.bc-card--asset .bc-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: scale 0.5s var(--smooth);
}
.bc-card--asset:hover .bc-card-media img { scale: 1.05; }

/* grounding scrim so the art sits on the body instead of floating */
.bc-card--asset .bc-card-media::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, oklch(0.10 0.025 272 / 0.80));
}

/* Shine lives on the media, not the card: .bc-card::after (gamefx)
   and .imm-card::after (immersive) already collide on the card box. */
.bc-card--asset .bc-card-media::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / 0.16), transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.bc-card--asset:hover .bc-card-media::after { animation: gfx-shine-sweep 0.8s ease-out; }
.bc-card--asset.gfx-legendary .bc-card-media::after {
  animation: gfx-shine-sweep 3.4s ease-in-out 1.2s infinite;
}
/* the card-level sweep is the colliding one — let the media own it.
   Needs .bc-card.bc-card--asset to outrank gamefx's .bc-card:hover::after,
   which sits in a stylesheet loaded after this one. */
.bc-card.bc-card--asset::after,
.bc-card.bc-card--asset:hover::after,
.bc-card.bc-card--asset.gfx-legendary::after { animation: none; }

/* ── Chips ───────────────────────────────────────────────── */
.bc-card--asset .bc-chip {
  position: absolute;
  top: 10px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 999px;
  font-family: var(--font-labels, 'DM Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bc-card--asset .bc-chip--kind {
  left: 10px;
  color: oklch(0.88 0.01 270);
  background: oklch(0.10 0.03 270 / 0.55);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.16);
}
.bc-card--asset .bc-chip--rare {
  right: 10px;
  font-weight: 600;
  color: oklch(0.18 0.03 60);
  background: linear-gradient(135deg, oklch(0.84 0.17 82), oklch(0.72 0.16 52));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.45),
    0 4px 14px oklch(0.80 0.18 70 / 0.40);
}

/* ── Body ────────────────────────────────────────────────── */
.bc-card--asset .bc-card-body { padding: 14px 14px 15px; gap: 7px; }
.bc-card--asset .bc-card-meta { font-size: 9px; letter-spacing: 0.12em; }
.bc-card--asset .bc-card-title {
  font-size: 15px;
  line-height: 1.32;
  /* clamp to 2 lines so price and buttons align across the grid */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.64em;
}

/* ── Price ───────────────────────────────────────────────── */
.bc-card--asset .bc-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: auto;
  padding-top: 4px;
}
.bc-card--asset .bc-price-n {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 26px;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 0 20px oklch(0.80 0.20 68 / 0.32);
}
.bc-card--asset .bc-price-unit {
  font-family: var(--font-labels, 'DM Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: oklch(0.74 0.13 72);
}

/* ── Actions ─────────────────────────────────────────────── */
.bc-card--asset .bc-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.bc-card--asset .bc-card-actions .btn {
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bc-card--asset .bc-buy { flex: 1; }
.bc-card--asset .bc-wish {
  flex: 0 0 42px;
  width: 42px;
  padding: 0;
  font-size: 16px;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
.bc-card--asset .bc-wish:hover { color: oklch(0.72 0.20 15); }
.bc-card--asset .bc-card-actions .btn:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-card--asset .bc-card-media img { transition: none; }
  .bc-card--asset:hover .bc-card-media img { scale: 1; }
  .bc-card--asset .bc-card-media::after { animation: none; }
}

.bc-pkg {
  text-align: center;
  padding: 20px 16px;
}
.bc-pkg .coins {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--amber);
}
/* Marketplace / wallet tabs — visuals in tabs.css */
.bc-tx {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--page-px, 24px) 40px;
}
.bc-tx-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.bc-tx-row .amt.credit { color: var(--lime); }
.bc-tx-row .amt.debit { color: var(--rose); }

/* ═══════════════════════════════════════════════════════════
   PUBG-STYLE OPERATOR INVENTORY
   ═══════════════════════════════════════════════════════════ */

.inv-screen {
  min-height: 100vh;
  padding-bottom: calc(var(--mobile-nav-h, 80px) + 24px);
  background:
    radial-gradient(ellipse at 10% 0%, oklch(0.22 0.06 85 / 0.35), transparent 45%),
    radial-gradient(ellipse at 90% 10%, oklch(0.2 0.08 295 / 0.3), transparent 40%),
    linear-gradient(180deg, oklch(0.09 0.03 270), var(--bg));
}

.inv-topbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--nav-h, 72px) + 20px) var(--page-px, 24px) 16px;
}
.inv-topbar-title { flex: 1; min-width: 200px; }
.inv-topbar-title h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 4.5vw, 48px);
  letter-spacing: .06em;
  margin: 0;
  color: var(--text);
  text-shadow: 0 0 40px oklch(0.8 0.2 68 / 0.35);
}
.inv-topbar-title p {
  margin: 4px 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.inv-topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.inv-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 14px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--page-px, 24px) 40px;
  align-items: start;
}
@media (max-width: 1100px) {
  .inv-layout { grid-template-columns: 1fr 280px; }
  .inv-loadout { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .inv-layout { grid-template-columns: 1fr; gap: 12px; }
  .inv-inspect { min-height: 0; }
  .inv-inspect-art { height: 128px; }
  .inv-inspect-stage { padding: 12px 12px 22px; }
  .inv-stat-strip { gap: 6px; }
  .inv-mini-stat span { font-size: 24px; }
}
@media (max-width: 420px) {
  /* Two bars side by side get too narrow for "Compatibility: AI + AR". */
  .inv-inspect-bars { grid-template-columns: 1fr; gap: 10px; }
}

/* Rarity tokens */
.inv-r-common    { --r-color: #9ca3af; --r-glow: oklch(0.7 0.02 270 / 0.35); --r-grad: linear-gradient(160deg, #4b5563, #1f2937); }
.inv-r-uncommon  { --r-color: #34d399; --r-glow: oklch(0.78 0.18 155 / 0.45); --r-grad: linear-gradient(160deg, #065f46, #022c22); }
.inv-r-rare      { --r-color: #60a5fa; --r-glow: oklch(0.72 0.16 250 / 0.5);  --r-grad: linear-gradient(160deg, #1e3a8a, #0c1a3a); }
.inv-r-epic      { --r-color: #c084fc; --r-glow: oklch(0.7 0.24 300 / 0.55);  --r-grad: linear-gradient(160deg, #581c87, #1e0b33); }
.inv-r-legendary { --r-color: #fbbf24; --r-glow: oklch(0.82 0.2 85 / 0.6);    --r-grad: linear-gradient(160deg, #92400e, #3b1f05); }

/* Loadout panel */
.inv-loadout {
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, oklch(0.14 0.03 270 / 0.95), oklch(0.1 0.025 270 / 0.98));
  padding: 16px;
  position: sticky;
  top: calc(var(--nav-h, 72px) + 12px);
}
.inv-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.inv-avatar {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, var(--amber), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-weight: 700; font-size: 16px;
  color: var(--bg); box-shadow: 0 0 24px var(--amber-dim);
}
.inv-profile-name { font-weight: 700; font-size: 15px; color: var(--text); }
.inv-profile-meta {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
}
.inv-stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px;
}
.inv-mini-stat {
  text-align: center; padding: 12px 4px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: oklch(0.12 0.02 270 / 0.8);
  font-family: 'DM Mono', monospace; font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05);
}
.inv-mini-stat span {
  display: block; font-family: 'Bebas Neue', sans-serif; font-size: 28px;
  color: var(--amber); letter-spacing: .02em; line-height: 1; margin-bottom: 4px;
  text-shadow: 0 0 18px oklch(0.8 0.2 68 / 0.4);
}
.inv-rarity-bar {
  display: flex; height: 7px; border-radius: 99px;
  margin-bottom: 18px; gap: 5px; background: transparent;
}
.inv-rarity-seg {
  min-width: 10px; border-radius: 99px;
  box-shadow: 0 0 10px currentColor;
}
.inv-rarity-seg.inv-r-common { background: #9ca3af; }
.inv-rarity-seg.inv-r-uncommon { background: #34d399; }
.inv-rarity-seg.inv-r-rare { background: #60a5fa; }
.inv-rarity-seg.inv-r-epic { background: #c084fc; }
.inv-rarity-seg.inv-r-legendary { background: #fbbf24; }

.inv-loadout-title {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 10px;
}
.inv-mannequin {
  position: relative;
  min-height: 340px;
  border-radius: 14px;
  border: 1px dashed oklch(0.35 0.04 270 / 0.5);
  background:
    radial-gradient(ellipse at 50% 40%, oklch(0.2 0.04 270 / 0.5), transparent 65%),
    oklch(0.11 0.025 270);
  padding: 10px;
}
.inv-body-silhouette {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  width: 72px; height: 180px;
  background:
    linear-gradient(180deg, oklch(0.28 0.03 270 / 0.35), oklch(0.18 0.02 270 / 0.15));
  border-radius: 36px 36px 20px 20px;
  opacity: .55;
  pointer-events: none;
  box-shadow: inset 0 0 30px oklch(0 0 0 / 0.4);
}
.inv-body-silhouette::before {
  content: '';
  position: absolute;
  top: -28px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: oklch(0.28 0.03 270 / 0.4);
}

.inv-equip-slot {
  position: absolute;
  width: 88px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: oklch(0.13 0.025 270 / 0.92);
  color: var(--text);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .15s var(--snappy), border-color .15s, box-shadow .2s;
  z-index: 2;
}
.inv-equip-slot:hover {
  transform: scale(1.04);
  border-color: var(--r-color, var(--amber));
  box-shadow: 0 0 18px var(--r-glow, var(--amber-dim));
}
.inv-equip-slot.filled {
  border-color: var(--r-color);
  background: var(--r-grad);
  box-shadow: 0 0 16px var(--r-glow);
}
.inv-equip-icon { font-size: 18px; line-height: 1; }
.inv-equip-icon.dim, .inv-equip-name.dim { opacity: .45; }
.inv-equip-name {
  font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .04em;
  text-transform: uppercase; text-align: center; line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-slot-helmet { top: 12px; left: 50%; transform: translateX(-50%); }
.inv-slot-helmet:hover { transform: translateX(-50%) scale(1.04); }
.inv-slot-vest { top: 100px; left: 12px; }
.inv-slot-backpack { top: 100px; right: 12px; }
.inv-slot-main { top: 190px; left: 12px; }
.inv-slot-side { top: 190px; right: 12px; }
.inv-slot-melee { bottom: 14px; left: 50%; transform: translateX(-50%); }
.inv-slot-melee:hover { transform: translateX(-50%) scale(1.04); }

.inv-loadout-hint {
  margin: 10px 0 0;
  font-family: 'DM Mono', monospace; font-size: 8px;
  color: var(--text-faint); letter-spacing: .04em; line-height: 1.4;
}

/* Crate / grid */
.inv-crate {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: oklch(0.11 0.025 270 / 0.9);
  padding: 14px;
  min-height: 640px;
}
.inv-crate-toolbar { margin-bottom: 12px; }
/* Inventory tabs — visuals in tabs.css */
.inv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-search, .inv-sort {
  flex: 1; min-width: 140px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border);
  background: oklch(0.09 0.02 270); color: var(--text);
  font: inherit; font-size: 13px;
}
.inv-sort { flex: 0 0 auto; min-width: 140px; cursor: pointer; }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.35 0.04 270) transparent;
}

.inv-slot {
  position: relative;
  aspect-ratio: 1 / 1.15;
  border-radius: 10px;
  border: 1px solid color-mix(in oklch, var(--r-color, #6b7280) 55%, transparent);
  background: var(--r-grad, linear-gradient(160deg, #374151, #111827));
  padding: 8px 6px 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  color: var(--text);
  transition: transform .15s var(--snappy), box-shadow .2s, border-color .15s;
  text-align: center;
}
.inv-slot.empty {
  background: oklch(0.12 0.02 270 / 0.5);
  border: 1px dashed oklch(0.28 0.02 270 / 0.6);
  pointer-events: none;
  min-height: 110px;
  aspect-ratio: 1 / 1.15;
}
.inv-slot:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px var(--r-glow), inset 0 0 20px oklch(0 0 0 / 0.2);
  border-color: var(--r-color);
}
.inv-slot.selected {
  outline: 2px solid var(--r-color);
  outline-offset: 1px;
  box-shadow: 0 0 28px var(--r-glow), 0 0 0 1px var(--r-color);
  transform: translateY(-2px);
}
.inv-slot.equipped::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--lime);
  border-radius: 10px;
  pointer-events: none;
  opacity: .7;
}
.inv-slot-glow {
  position: absolute; inset: -20% -20% auto;
  height: 60%;
  background: radial-gradient(ellipse, var(--r-glow), transparent 70%);
  pointer-events: none; opacity: .7;
}
.inv-slot-rarity {
  position: absolute; top: 5px; left: 6px;
  font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--r-color);
  text-shadow: 0 0 8px var(--r-glow);
  z-index: 2;
}
.inv-slot-eq {
  position: absolute; top: 5px; right: 6px;
  font-family: 'DM Mono', monospace; font-size: 7px; font-weight: 700;
  letter-spacing: .06em; color: var(--bg); background: var(--lime);
  padding: 1px 4px; border-radius: 3px; z-index: 2;
}
.inv-slot-art {
  flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  margin: 14px 0 4px; position: relative; z-index: 1;
}
.inv-slot-art img {
  width: 72%; height: 56%; object-fit: cover; border-radius: 6px;
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.45);
}
.inv-slot-emoji { font-size: 32px; filter: drop-shadow(0 4px 8px oklch(0 0 0 / 0.5)); }
.inv-slot-name {
  font-size: 11px; font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; width: 100%; z-index: 1;
}
.inv-slot-meta {
  font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .04em;
  text-transform: uppercase; color: oklch(0.85 0.02 270 / 0.65);
  margin-top: 3px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  z-index: 1;
}

.inv-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 48px 20px; color: var(--text-dim);
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em;
}
.inv-empty-icon { font-size: 40px; margin-bottom: 10px; opacity: .5; }

.inv-send-panel {
  max-width: 420px; padding: 8px 4px 24px;
}

/* Inspector */
.inv-inspect {
  border: 1px solid color-mix(in oklch, var(--r-color, var(--border)) 50%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--r-color, transparent) 12%, oklch(0.12 0.025 270)), oklch(0.1 0.025 270));
  padding: 16px;
  position: sticky;
  top: calc(var(--nav-h, 72px) + 12px);
  min-height: 420px;
  box-shadow: 0 0 40px var(--r-glow, transparent);
}
.inv-inspect-rarity {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--r-color); margin-bottom: 10px;
  text-shadow: 0 0 12px var(--r-glow);
}
.inv-inspect-stage {
  position: relative;
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--r-color) 35%, transparent);
  background:
    radial-gradient(ellipse at 50% 88%, color-mix(in oklch, var(--r-color) 30%, transparent), transparent 62%),
    var(--r-grad);
  padding: 14px 14px 26px;
  margin-bottom: 16px;
  overflow: hidden;
}
.inv-inspect-stage .inv-inspect-rarity { margin-bottom: 8px; }

.inv-inspect-art {
  position: relative;
  height: 150px; border-radius: 10px; overflow: hidden;
  background: transparent; margin: 0 auto;
  border: none;
}

/* The lit plinth the item stands on, straight from the reference. */
.inv-inspect-pedestal {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: 58%; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in oklch, var(--r-color) 70%, transparent), transparent 70%);
  filter: blur(1px);
  box-shadow: 0 0 26px var(--r-glow, transparent);
  pointer-events: none;
}
.inv-inspect-art img { width: 100%; height: 100%; object-fit: cover; }
.inv-inspect-emoji {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 64px; filter: drop-shadow(0 8px 20px oklch(0 0 0 / 0.5));
}
.inv-inspect-shine {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, oklch(1 0 0 / 0.12) 48%, transparent 62%);
  animation: inv-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes inv-shine {
  0%, 100% { transform: translateX(-40%); opacity: 0; }
  40% { opacity: 1; }
  70% { transform: translateX(40%); opacity: 0; }
}
.inv-inspect-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px;
}
.inv-inspect-head .inv-inspect-title { flex: 1; min-width: 0; margin: 0; }
.inv-inspect-level {
  flex-shrink: 0;
  font-family: 'DM Mono', monospace; font-size: 11.5px; font-weight: 600;
  color: var(--lime);
}
.inv-inspect-level b { font-weight: 400; margin-right: 1px; }

.inv-inspect-sub {
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px;
}

/* Stat bars — 2x2, label above a track, value right-aligned. */
.inv-inspect-bars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
  margin-bottom: 16px;
}
.inv-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: baseline; }
.inv-bar-label {
  font-family: 'DM Mono', monospace; font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.inv-bar-val {
  font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 600;
  color: var(--text); text-align: right; white-space: nowrap;
}
.inv-bar i {
  grid-column: 1 / -1;
  display: block; height: 4px; border-radius: 99px; margin-top: 4px;
  background: oklch(0.26 0.02 270);
  position: relative; overflow: hidden;
}
.inv-bar i::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%); border-radius: 99px;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--r-color) 70%, oklch(0.6 0.16 250)), var(--r-color));
  box-shadow: 0 0 10px var(--r-glow, transparent);
}
.inv-bar i.inv-bar-full::after { opacity: .55; }

.inv-inspect-section {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 0 0 6px;
}

/* Stacked full-width CTAs, matching the reference's button geometry. */
.inv-cta {
  display: block; width: 100%;
  min-height: 46px; padding: 0 18px; border-radius: 99px;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  cursor: none; border: none;
  transition: filter .18s ease, box-shadow .2s ease, transform .18s ease, background .2s ease;
}
.inv-cta + .inv-cta { margin-top: 8px; }
.inv-cta--primary {
  color: #fff;
  background: linear-gradient(135deg, oklch(0.68 0.28 295), oklch(0.60 0.26 288));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 4px 16px oklch(0.68 0.28 295 / 0.38);
}
.inv-cta--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.inv-cta--ghost {
  color: var(--text-dim);
  background: oklch(1 0 0 / 0.05);
  box-shadow: inset 0 0 0 1px var(--border);
}
.inv-cta--ghost:hover { background: oklch(1 0 0 / 0.1); color: var(--text); }
.inv-inspect-actions { display: block; }

.inv-inspect-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: .04em;
  margin: 0 0 8px; color: var(--text); line-height: 1.05;
}
.inv-inspect-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.inv-inspect-tags span {
  font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.inv-inspect-desc {
  font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 0 0 14px;
}
.inv-inspect-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
}
.inv-inspect-stats div {
  padding: 10px; border-radius: 10px; border: 1px solid var(--border);
  background: oklch(0.12 0.02 270 / 0.7);
}
.inv-inspect-stats em {
  display: block; font-style: normal; font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.inv-inspect-stats b {
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; font-weight: 400;
  color: var(--r-color, var(--amber));
}
.inv-inspect-gift {
  font-size: 12px; color: var(--text-dim); margin-bottom: 12px;
  padding: 10px; border-radius: 10px; border: 1px solid var(--border);
  background: oklch(0.15 0.04 295 / 0.3);
}
.inv-inspect-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.inv-inspect-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 360px; color: var(--text-faint);
  font-family: 'DM Mono', monospace; font-size: 11px; line-height: 1.6; padding: 20px;
}
.inv-inspect-empty .inv-inspect-emoji { height: auto; margin-bottom: 12px; opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .inv-inspect-shine { animation: none; }
  .inv-slot, .inv-equip-slot { transition: none; }
}

/* ── Generated gamification art (assets/gamification, see assets/MANIFEST.md) ── */
.inv-tab-img { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }

/* Declared after .inv-inspect on purpose: the base rule sets position: sticky
   at the same specificity, so an override in an earlier media block loses.
   Sticky only earns its keep beside a tall scrolling grid — once the panel
   stacks it would pin a 500px card over the content. */
@media (max-width: 1100px) {
  .inv-inspect { position: static; top: auto; }
}

.inv-equip-icon img { width: 26px; height: 26px; object-fit: contain; display: block; }
.inv-equip-icon.dim img { opacity: .9; }

.inv-slot-eq { background: transparent; padding: 0; }
.inv-slot-eq img { width: 18px; height: 18px; display: block; filter: drop-shadow(0 2px 6px oklch(0 0 0 / 0.5)); }

.inv-body-silhouette.has-art {
  width: 150px; height: 272px;
  /* margin-centering: gfx-float owns the transform, so translate(-50%)
     centering would be overridden by the animation */
  transform: none;
  margin: -136px 0 0 -75px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
  opacity: 0.95;
  z-index: 0;
  filter: drop-shadow(0 0 26px oklch(0.82 0.18 200 / 0.28));
  animation: gfx-float 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .inv-body-silhouette.has-art { animation: none; }
}
.inv-body-silhouette.has-art::before { display: none; }

.inv-empty-icon img, .inv-empty-img { width: 76px; height: 76px; object-fit: contain; opacity: .85; }

.bc-coin-img { width: 34px; height: 34px; object-fit: contain; vertical-align: -5px; margin-right: 8px; }

.bc-pkg-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; margin-bottom: 10px;
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.4);
}

.bc-ai-icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 8px; }

.bc-cat-icon { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; margin-right: 5px; }

.bc-spot-grid { margin-bottom: 16px; }
.bc-spot-card {
  cursor: pointer; text-align: center; border: 1px solid var(--border);
  transition: transform .15s var(--snappy), border-color .15s, box-shadow .2s;
}
.bc-spot-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bc-spot-card:hover { transform: translateY(-2px); }
.bc-spot-card.on {
  border-color: var(--amber);
  box-shadow: 0 0 20px oklch(0.75 0.14 75 / 0.35);
}