/* Inventory composition only. Generated materials, rarity and animated item
   outlines remain owned by the shared skin and enhancement styles. */
#game #inventoryOverlay .inventory-header {
  padding: var(--ui-space-3) var(--ui-gutter);
}
#game #inventoryOverlay .inventory-scroll {
  padding: var(--ui-space-3) var(--ui-gutter) max(var(--ui-space-4), env(safe-area-inset-bottom));
  scroll-padding-top: var(--ui-space-3);
}
#game #inventoryOverlay .inventory-summary {
  display: grid;
  grid-template-columns: minmax(74px, .8fr) minmax(0, 2fr);
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
  padding: var(--ui-space-2);
}
#game #inventoryOverlay .inventory-wallet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--ui-space-1);
  padding: 0;
  min-width: 0;
  align-content: center;
  border: 0;
  background: transparent;
}
#game #inventoryOverlay .inventory-wallet > span { grid-column: 1; grid-row: 1; font-size: var(--ui-subheading); }
#game #inventoryOverlay .inventory-wallet strong {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--ui-subheading);
  line-height: 1.2;
  color: var(--ui-gold);
}
#game #inventoryOverlay .inventory-wallet small {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--ui-meta);
  text-align: left;
  white-space: normal;
  overflow: visible;
  color: var(--ui-muted);
  letter-spacing: 0;
  text-transform: none;
}
#game #inventoryOverlay .equipment-bonuses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-1); }
#game #inventoryOverlay .equipment-bonuses span { padding: var(--ui-space-1); gap: 0; font-size: var(--ui-meta); }
#game #inventoryOverlay .equipment-bonuses strong { font-size: var(--ui-small); }
#game #inventoryOverlay .inventory-section-heading {
  align-items: center;
  margin-bottom: var(--ui-space-2);
  gap: var(--ui-space-2);
}
#game #inventoryOverlay .inventory-section-heading h3 { margin: 0; font-size: var(--ui-subheading); }
#game #inventoryOverlay .inventory-section-heading > small {
  max-width: 155px;
  font-size: var(--ui-meta);
  line-height: 1.35;
  text-align: right;
}
#game #inventoryOverlay .inventory-loadout { margin-bottom: var(--ui-space-4); }
#game #inventoryOverlay .inventory-equipped {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-2);
}
#game #inventoryOverlay .loadout-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 48px minmax(32px, auto) auto;
  align-content: start;
  align-items: center;
  justify-items: center;
  gap: var(--ui-space-1);
  min-width: 0;
  min-height: 0;
  padding: var(--ui-space-2);
  text-align: center;
}
#game #inventoryOverlay .loadout-slot-label {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--ui-meta);
  color: var(--ui-muted);
  letter-spacing: .03em;
  text-align: center;
}
#game #inventoryOverlay :is(.loadout-slot-visual, .loadout-empty-glyph) { grid-column: 1; grid-row: 2; width: 48px; height: 48px; }
#game #inventoryOverlay .loadout-slot-visual > .item-art { width: 40px; height: 40px; }
#game #inventoryOverlay .loadout-slot strong {
  grid-column: 1;
  grid-row: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  font-size: var(--ui-small);
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}
#game #inventoryOverlay .loadout-slot small {
  grid-column: 1;
  grid-row: 4;
  font-size: var(--ui-meta);
  line-height: 1.3;
  color: var(--item-rarity, var(--ui-muted));
  text-align: center;
  white-space: normal;
  overflow: visible;
}
#game #inventoryOverlay .inventory-backpack-heading { margin-bottom: var(--ui-space-2); }
#game #inventoryOverlay .inventory-toolbar { gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
#game #inventoryOverlay .inventory-filters { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
#game #inventoryOverlay .inventory-filter { min-width: 0; min-height: var(--ui-control-height); font-size: var(--ui-small); }
#game #inventoryOverlay .inventory-utility-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-2); align-items: start; }
#game #inventoryOverlay .inventory-sort-control { flex-wrap: wrap; align-content: center; padding: 0 var(--ui-space-2); gap: 0 var(--ui-space-1); }
#game #inventoryOverlay .inventory-sort-control > span { font-size: var(--ui-meta); }
#game #inventoryOverlay .inventory-sort-control select { min-width: 0; width: auto; min-height: var(--ui-control-height); flex: 1; padding: 0 var(--ui-space-1); font-size: var(--ui-small); }
#game #inventoryOverlay .inventory-options { min-width: 0; }
#game #inventoryOverlay .inventory-options > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  min-height: var(--ui-control-height);
  padding: var(--ui-space-1) var(--ui-space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-ink);
  background: var(--ui-surface);
  list-style: none;
  cursor: pointer;
}
#game #inventoryOverlay .inventory-options > summary::-webkit-details-marker { display: none; }
#game #inventoryOverlay .inventory-options > summary > span { font-size: var(--ui-small); }
#game #inventoryOverlay .inventory-options > summary::after { content: "+"; grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--ui-cyan); }
#game #inventoryOverlay .inventory-options[open] { grid-column: 1 / -1; }
#game #inventoryOverlay .inventory-options[open] > summary::after { content: "−"; }
#game #inventoryOverlay .inventory-options > summary small { font-size: var(--ui-meta); color: var(--ui-muted); white-space: normal; }
#game #inventoryOverlay .inventory-options.quick-mode > summary small { color: var(--ui-danger); }
#game #inventoryOverlay .inventory-options-panel { padding: var(--ui-space-2); border: 1px solid var(--ui-line); border-top: 0; background: var(--ui-surface); }
#game #inventoryOverlay .inventory-options-panel p { margin: var(--ui-space-2) 0 0; color: var(--ui-muted); font-size: var(--ui-small); line-height: 1.5; }
#game #inventoryOverlay .quick-dismantle-toggle { min-width: 0; width: 100%; min-height: var(--ui-control-height); }
#game #inventoryOverlay .inventory-insights { gap: var(--ui-space-2); margin: 0 0 var(--ui-space-2); }
#game #inventoryOverlay .inventory-insights > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--ui-space-1); padding: var(--ui-space-1) 0; background: transparent; border: 0; }
#game #inventoryOverlay .inventory-insights b { font-size: var(--ui-small); }
#game #inventoryOverlay .inventory-insights small { font-size: var(--ui-meta); }
#game #inventoryOverlay .inventory-list { gap: var(--ui-space-3); }
#game #inventoryOverlay .inventory-item { padding: var(--ui-space-3); gap: var(--ui-space-2); }
#game #inventoryOverlay .inventory-card-top { grid-template-columns: 56px minmax(0, 1fr); gap: var(--ui-space-2); }
#game #inventoryOverlay .inventory-card-visual { width: 56px; height: 56px; }
#game #inventoryOverlay .inventory-card-visual > .item-art { width: 48px; height: 48px; }
#game #inventoryOverlay .inventory-item-copy { gap: var(--ui-space-1); }
#game #inventoryOverlay .inventory-item-heading strong { font-size: 16px; line-height: 1.35; }
#game #inventoryOverlay .inventory-item-comparison { padding: var(--ui-space-1) var(--ui-space-2); }
#game #inventoryOverlay .item-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--ui-space-2); }
#game #inventoryOverlay .item-actions button { min-width: 0; min-height: var(--ui-control-height); overflow: visible; white-space: normal; }
#game #inventoryOverlay .item-actions .dismantle-button { grid-column: auto; width: auto; min-width: 64px; padding-inline: var(--ui-space-2); }

/* Large-text users get readable rows rather than squeezing long names into
   narrow columns. The same items/actions remain present in either view. */
#game[data-text-size="large"] #inventoryOverlay .inventory-equipped { grid-template-columns: minmax(0, 1fr); }
#game[data-text-size="large"] #inventoryOverlay .loadout-slot { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: start; }
#game[data-text-size="large"] #inventoryOverlay :is(.loadout-slot-visual, .loadout-empty-glyph) { grid-column: 1; grid-row: 1 / 4; }
#game[data-text-size="large"] #inventoryOverlay .loadout-slot :is(.loadout-slot-label, strong, small) { grid-column: 2; text-align: left; }
#game[data-text-size="large"] #inventoryOverlay .loadout-slot strong { grid-row: 2; display: block; overflow: visible; -webkit-line-clamp: unset; }
#game[data-text-size="large"] #inventoryOverlay .loadout-slot small { grid-row: 3; }
@media (max-width: 360px) {
  #game[data-text-size="large"] #inventoryOverlay .inventory-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
  #game #inventoryOverlay .inventory-scroll { padding-inline: var(--ui-space-3); }
  #game #inventoryOverlay .inventory-equipped { gap: var(--ui-space-1); }
  #game #inventoryOverlay .loadout-slot { padding: var(--ui-space-2) var(--ui-space-1); }
  #game #inventoryOverlay .inventory-summary { grid-template-columns: minmax(70px, .8fr) minmax(0, 2fr); }
  #game #inventoryOverlay .inventory-sort-control > span { display: none; }
}