@font-face {
  font-family: 'VCRosd';
  src: url('/VCRosdNEUE.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@media (max-width: 1200px) {
  .index-shell-game .filters-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .index-shell-game .filters-grid > label:nth-of-type(1) { grid-column: span 4; }
  .index-shell-game .filters-grid > label:nth-of-type(2) { grid-column: span 2; }
  .index-shell-game .filters-grid > label:nth-of-type(3) { grid-column: span 2; }

  .index-shell-game .filters-grid > label:nth-of-type(4) { grid-column: span 2; }
  .index-shell-game .filters-grid > label:nth-of-type(5) { grid-column: span 2; }
  .index-shell-game .filters-grid > label:nth-of-type(6) { grid-column: span 4; }

  .index-shell-game .filters-grid > label:nth-of-type(7) { grid-column: span 4; }
  .index-shell-game .filters-grid > label:nth-of-type(8) { grid-column: span 4; }

  .index-shell-game .filters-grid > label:nth-of-type(9) { grid-column: span 4; }
  .index-shell-game .filters-grid > label:nth-of-type(10) { grid-column: span 2; }
  .index-shell-game .filters-grid > label:nth-of-type(11) { grid-column: span 2; }
}

@media (max-width: 820px) {
  .index-shell-game .filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .index-shell-game .filters-grid > label:nth-of-type(n),
  .index-shell-game .filters-actions {
    grid-column: span 2;
  }

  .index-shell-game .filters-actions {
    justify-content: stretch;
  }

  .index-shell-game .filters-actions button {
    flex: 1 1 0;
    min-width: 0;
  }
}


.service-nav { position: sticky; top: 0; z-index: 12; backdrop-filter: blur(12px); background: rgba(0, 0, 0, 0.88); border-bottom: 2px solid var(--border-soft); }
.service-nav__inner { width: min(1440px, calc(100% - 24px)); margin: 0 auto; padding: 16px 0; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.service-brand { color: var(--accent-strong); text-decoration:none; text-transform:uppercase; letter-spacing:.14em; }
.service-nav__links { display:flex; flex-wrap:wrap; gap:10px; }
.service-nav__link { color: var(--text); text-decoration:none; padding:10px 14px; border:2px solid var(--border); background: linear-gradient(180deg, rgba(28,28,28,0.95), rgba(3,3,3,0.98)); text-transform: uppercase; }
.service-nav__link.is-active { background: linear-gradient(180deg, #8b1010, #560707); }

:root {
  color-scheme: dark;
  --bg: #040404;
  --panel: rgba(14, 21, 42, 0.92);
  --panel-alt: rgba(15, 15, 15, 0.96);
  --border: rgba(255, 255, 255, 0.84);
  --border-soft: rgba(255, 255, 255, 0.28);
  --text: #f6f2dd;
  --muted: #bfb9a4;
  --accent: #8b1010;
  --accent-strong: #d6c88c;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --rarity-common: #cfd6e6;
  --rarity-uncommon: #62da9a;
  --rarity-rare: #7ca3ff;
  --rarity-epic: #c487ff;
  --rarity-legendary: #ffcb75;
  --border-soft: rgba(255, 255, 255, 0.28);
  font-family: 'VCRosd', monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(68, 89, 173, 0.25), transparent 38%),
    linear-gradient(180deg, #0a1020 0%, #08101a 100%);
  color: var(--text);
}

.page-shell {
  width: min(1440px, calc(100% - 24px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(12px);
}

.hero, .results-header, .filters-actions, .detail-hero, .actions-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.hero { margin-bottom: 24px; }
.hero h1, .results-header h2, .card h2 { margin: 0 0 8px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-strong);
  font-size: 0.75rem;
  margin: 0 0 12px;
}
.lede, .muted { color: var(--muted); }
.hero-badges, .stack-tags, .entity-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-badges span, .pill, .stack-tags span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(140, 166, 255, 0.12);
  border: 1px solid rgba(140, 166, 255, 0.24);
  color: var(--accent-strong);
  font-size: 0.9rem;
}
.filters { margin-bottom: 24px; }
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
label span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}
input, button, .button-link {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(5, 10, 22, 0.65);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
}
button, .button-link {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #7f97ff, #657ef5);
  border: none;
  color: white;
  font-weight: 600;
}
button.secondary, .button-link.secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
}
.filters-actions{ align-self: end; }
.results-grid, .detail-grid {
  display: grid;
  gap: 20px;
}
.results-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.detail-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 20px; }
.build-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.build-card-header, .row-between, .tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.build-card h3, .tooltip-card h3, .stat-card h3 { margin: 0; }
.build-card a { color: inherit; text-decoration: none; }
.kv-grid, .slot-grid, .stats-list {
  display: grid;
  gap: 12px;
}
.slot-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stack-list { display: grid; gap: 12px; }
.slot-card, .stat-card, .tooltip-card {
  border-radius: 16px;
  padding: 16px;
  background: var(--panel-alt);
  border: 1px solid rgba(255,255,255,0.06);
}
.slot-label { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.value-lines { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.stats-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.empty-state { margin-top: 20px; text-align: center; }
.hidden { display: none; }
.back-link {
  color: var(--accent-strong);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 16px;
}
.section-heading { margin-bottom: 16px; }
.results-meta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pagination-controls button {
  width: auto;
  min-width: 110px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.active-filters {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modifier-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.modifier-card {
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
}
.stat-group {
  display: grid;
  gap: 10px;
}
.grouped-stats {
  margin-bottom: 12px;
}
.entity-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.05);
}
.entity-pill img, .tooltip-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
}
.tooltip-icon-frame {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.tooltip-icon {
  width: 52px;
  height: 52px;
}
.build-card-section {
  display: grid;
  gap: 8px;
}
.tooltip-card {
  display: grid;
  gap: 12px;
}
.rarity-text { text-shadow: 0 0 18px rgba(255,255,255,0.08); }
.tooltip-card.rarity-default { border-color: rgba(255,255,255,0.08); }
.tooltip-card.rarity-common { border-color: color-mix(in srgb, var(--rarity-common) 32%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.tooltip-card.rarity-uncommon { border-color: color-mix(in srgb, var(--rarity-uncommon) 35%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-uncommon) 12%, transparent); }
.tooltip-card.rarity-rare { border-color: color-mix(in srgb, var(--rarity-rare) 42%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-rare) 12%, transparent); }
.tooltip-card.rarity-epic { border-color: color-mix(in srgb, var(--rarity-epic) 42%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-epic) 12%, transparent); }
.tooltip-card.rarity-legendary { border-color: color-mix(in srgb, var(--rarity-legendary) 45%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-legendary) 12%, transparent); }
.tooltip-icon-frame.rarity-common { background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-common) 26%, rgba(18, 25, 48, 0.96)), rgba(14, 21, 42, 0.96)); border-color: color-mix(in srgb, var(--rarity-common) 38%, transparent); }
.tooltip-icon-frame.rarity-uncommon { background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-uncommon) 26%, rgba(18, 25, 48, 0.96)), rgba(14, 21, 42, 0.96)); border-color: color-mix(in srgb, var(--rarity-uncommon) 40%, transparent); }
.tooltip-icon-frame.rarity-rare { background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-rare) 26%, rgba(18, 25, 48, 0.96)), rgba(14, 21, 42, 0.96)); border-color: color-mix(in srgb, var(--rarity-rare) 40%, transparent); }
.tooltip-icon-frame.rarity-epic { background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-epic) 26%, rgba(18, 25, 48, 0.96)), rgba(14, 21, 42, 0.96)); border-color: color-mix(in srgb, var(--rarity-epic) 40%, transparent); }
.tooltip-icon-frame.rarity-legendary { background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-legendary) 28%, rgba(18, 25, 48, 0.96)), rgba(14, 21, 42, 0.96)); border-color: color-mix(in srgb, var(--rarity-legendary) 42%, transparent); }
.rarity-text.rarity-common { color: var(--rarity-common); }
.rarity-text.rarity-uncommon { color: var(--rarity-uncommon); }
.rarity-text.rarity-rare { color: var(--rarity-rare); }
.rarity-text.rarity-epic { color: var(--rarity-epic); }
.rarity-text.rarity-legendary { color: var(--rarity-legendary); }
.tooltip-block {
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .service-nav__inner { width: min(100% - 20px, 1200px); }
  .service-nav__inner { flex-direction: column; align-items: stretch; }
  .hero, .results-header, .filters-actions, .detail-hero, .actions-card, .tooltip-header, .build-card-header, .row-between {
    flex-direction: column;
    align-items: stretch;
  }
  .page-shell { width: min(100% - 20px, 1200px); }
}


.detail-shell.page-shell--game {
  width: min(1380px, calc(100% - 24px));
  padding-top: 18px;
}

.detail-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

body:has(.page-shell--game) {
  background:
    radial-gradient(circle at top, rgba(236, 176, 96, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(16, 11, 7, 0.92), rgba(8, 6, 4, 0.98)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 5px);
  color: #f2efe7;
}

.page-shell--game .card,
.page-shell--game .detail-actions {
  border-radius: 0;
  border: 3px solid #8d8d8d;
  box-shadow: inset 0 0 0 2px #111, 0 18px 32px rgba(0,0,0,0.35);
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.97), rgba(5, 5, 5, 0.98));
  backdrop-filter: none;
}

.page-shell--game .button-link.secondary,
.page-shell--game button,
.page-shell--game .detail-actions {
  font-family: inherit;
}

.build-hero-game {
  align-items: flex-start;
  border-color: #939393;
  margin-bottom: 18px;
}

.build-hero-game h1,
.panel-title,
.stage-heading-row h3 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
}

.build-hero-game .eyebrow,
.panel-subtitle,
.page-shell--game .muted,
.page-shell--game .slot-label {
  color: #b9b0a0;
}

.build-hero-game .hero-badges span {
  background: #242424;
  border: 2px solid #555;
  color: #f0cb69;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(700px, 1fr);
  gap: 18px;
  align-items: start;
}

.game-panel {
  padding: 0;
  overflow: hidden;
}

.panel-title-wrap,
.equipment-panel-header,
.stage-heading-row {
  padding: 10px 12px;
  border-bottom: 3px solid #555;
  background: linear-gradient(180deg, #111, #070707);
}

.panel-subtitle {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

.stats-board {
  display: grid;
  gap: 14px;
  padding: 10px;
}

.stat-group-game {
  display: grid;
  gap: 6px;
}

.stat-group-game-title {
  color: #f3f0e7;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stat-row-game {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  background: #2b2b2b;
  border-left: 3px solid #565656;
  text-transform: uppercase;
}

.stat-row-game-value { color: #faf5dc; }
.stat-row-game:nth-child(even) {
  background: #151515;
}

.build-stage-column {
  display: grid;
  gap: 18px;
}

.game-hover-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  pointer-events: none;
  width: min(420px, calc(100vw - 24px));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.08s linear, transform 0.08s linear;
}

.game-hover-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.game-hover-tooltip.hidden {
  display: none;
}

.game-hover-tooltip .tooltip-card {
  border-radius: 0;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.98), rgba(5, 5, 5, 0.99));
  box-shadow: inset 0 0 0 2px #111, 0 18px 32px rgba(0,0,0,0.45);
}

@media (max-width: 720px) {
  .game-hover-tooltip {
    width: min(360px, calc(100vw - 16px));
  }
}

.game-tooltip-preview {
  min-height: 290px;
  padding: 0;
  position: sticky;
  top: 16px;
}

.game-tooltip-preview.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.game-tooltip-preview .tooltip-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px;
}

.build-stage-grid {
  display: grid;
  grid-template-columns: 150px minmax(360px, 1fr) 150px;
  gap: 14px;
  padding: 12px;
  align-items: start;
}

.equipment-stage-block {
  display: grid;
  align-content: start;
  gap: 10px;
}

.equipment-stage-block--inventory {
  justify-items: center;
}

.mini-slot-grid,
.weapon-slot-grid {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.slot-icon-button {
  appearance: none;
  width: 100%;
  border: 2px solid #575757;
  background: #101010;
  padding: 6px;
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: start;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #1d1d1d;
}

.slot-icon-button.is-empty {
  opacity: 0.5;
}

.slot-icon-button:hover,
.slot-icon-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #1d1d1d, 0 0 0 2px rgba(213,181,90,0.35);
}

.slot-icon-button img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #1d1d1d;
  border: 2px solid #373737;
}

.slot-icon-button--spell,
.slot-icon-button--weapon {
  min-height: 108px;
}

.slot-icon-button--equipment {
  min-height: 108px;
}

.slot-icon-button--spell img,
.slot-icon-button--weapon img {
  width: 80px;
  height: 80px;
}

.slot-icon-meta {
  width: 100%;
  display: grid;
  gap: 2px;
  justify-items: start;
}

.slot-icon-title,
.slot-icon-subtitle,
.slot-icon-count {
  font-size: 0.72rem;
  line-height: 1.1;
  text-align: left;
}

.slot-icon-title {
  color: #f5efda;
  font-weight: 700;
  text-transform: uppercase;
}

.slot-icon-subtitle { color: #8ec7ff; }
.slot-icon-count { color: #f0cb69; }

.equipment-matrix {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 12px;
  min-height: 380px;
  justify-content: center;
}

.equipment-cell {
  min-height: 108px;
  width: 150px;
}

.equipment-cell[data-slot-key="head"] { grid-column: 2; }
.equipment-cell[data-slot-key="body"] { grid-column: 2; grid-row: 2; }
.equipment-cell[data-slot-key="legs"] { grid-column: 2; grid-row: 4; }
.equipment-cell[data-slot-key="boots"] { grid-column: 2; grid-row: 5; }
.equipment-cell[data-slot-key="belt"] { grid-column: 2; grid-row: 3; }
.equipment-cell[data-slot-key="amulet"] { grid-column: 1; grid-row: 1; }
.equipment-cell[data-slot-key="trinket"] { grid-column: 3; grid-row: 1; }
.equipment-cell[data-slot-key="pet"] { grid-column: 1 / span 3; grid-row: 5; max-width: 136px; }

.equipment-cell .slot-icon-button {
  min-height: 100%;
}

.spell-slot,
.weapon-slot {
  width: 100%;
}

.spell-slot .slot-icon-button,
.weapon-slot .slot-icon-button {
  min-height: 108px;
}

.tooltip-card {
  color: #f2efe7;
}

.page-shell--game .tooltip-header {
  align-items: flex-start;
}

.page-shell--game .tooltip-icon-frame {
  width: 120px;
  height: 120px;
  border-radius: 0;
  padding: 3px;
  border: 2px solid #666;
  background: #1a1a1a;
}

.page-shell--game .tooltip-icon {
  width: 100px;
  height: 100px;
  border-radius: 0;
  image-rendering: pixelated;
}

.page-shell--game .tooltip-card h3 {
  font-size: 1.45rem;
  text-transform: uppercase;
}

.page-shell--game .stack-tags span,
.page-shell--game .entity-pill,
.page-shell--game .modifier-card {
  border-radius: 0;
  background: #202020;
  border: 1px solid #4c4c4c;
}

.page-shell--game .value-lines,
.page-shell--game .tooltip-block,
.page-shell--game .modifier-card,
.page-shell--game #diagnosticsList {
  color: #d5cec1;
}

.page-shell--game .detail-actions {
  padding: 6px;
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  width: auto;
}

.page-shell--game button,
.page-shell--game .button-link {
  width: auto;
  min-width: 148px;
  border-radius: 0;
  border: 2px solid #6c180f;
  background: linear-gradient(180deg, #c3362c, #8d140f);
  text-transform: uppercase;
  padding: 10px 14px;
}

.page-shell--game .button-link.secondary {
  border-color: #5e5e5e;
  background: linear-gradient(180deg, #303030, #161616);
}

.page-shell--game .back-link {
  margin: 0;
  color: #efe3af;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .game-tooltip-preview {
    position: static;
  }
}

@media (max-width: 900px) {
  .build-stage-grid {
    grid-template-columns: 1fr;
  }

  .equipment-stage-block--inventory {
    justify-items: stretch;
  }

  .equipment-matrix {
    grid-template-columns: repeat(2, minmax(110px, 112px));
    justify-content: start;
  }

  .equipment-cell[data-slot-key] {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
  }
}

@media (max-width: 720px) {
  .detail-topbar,
  .page-shell--game .detail-actions {
    grid-auto-flow: row;
    width: 100%;
  }

  .detail-topbar {
    align-items: stretch;
  }

  .page-shell--game button,
  .page-shell--game .button-link {
    width: 100%;
  }
}

.slot-icon-button.rarity-default {
  border-color: #575757;
}

.slot-icon-button.rarity-common {
  border-color: var(--rarity-common);
  box-shadow: inset 0 0 0 2px #1d1d1d, 0 0 10px rgba(207, 214, 230, 0.12);
}

.slot-icon-button.rarity-uncommon {
  border-color: var(--rarity-uncommon);
  box-shadow: inset 0 0 0 2px #1d1d1d, 0 0 10px rgba(98, 218, 154, 0.16);
}

.slot-icon-button.rarity-rare {
  border-color: var(--rarity-rare);
  box-shadow: inset 0 0 0 2px #1d1d1d, 0 0 10px rgba(124, 163, 255, 0.18);
}

.slot-icon-button.rarity-epic {
  border-color: var(--rarity-epic);
  box-shadow: inset 0 0 0 2px #1d1d1d, 0 0 12px rgba(196, 135, 255, 0.2);
}

.slot-icon-button.rarity-legendary {
  border-color: var(--rarity-legendary);
  box-shadow: inset 0 0 0 2px #1d1d1d, 0 0 14px rgba(255, 203, 117, 0.22);
}

.slot-icon-button.rarity-common img {
  border-color: color-mix(in srgb, var(--rarity-common) 65%, #373737);
}

.slot-icon-button.rarity-uncommon img {
  border-color: color-mix(in srgb, var(--rarity-uncommon) 65%, #373737);
}

.slot-icon-button.rarity-rare img {
  border-color: color-mix(in srgb, var(--rarity-rare) 65%, #373737);
}

.slot-icon-button.rarity-epic img {
  border-color: color-mix(in srgb, var(--rarity-epic) 65%, #373737);
}

.slot-icon-button.rarity-legendary img {
  border-color: color-mix(in srgb, var(--rarity-legendary) 65%, #373737);
}

.slot-icon-subtitle.rarity-common {
  color: var(--rarity-common);
}

.slot-icon-subtitle.rarity-uncommon {
  color: var(--rarity-uncommon);
}

.slot-icon-subtitle.rarity-rare {
  color: var(--rarity-rare);
}

.slot-icon-subtitle.rarity-epic {
  color: var(--rarity-epic);
}

.slot-icon-subtitle.rarity-legendary {
  color: var(--rarity-legendary);
}

.slot-icon-subtitle {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.slot-icon-button.rarity-legendary .slot-icon-subtitle {
  text-shadow: 0 0 6px rgba(255, 203, 117, 0.4);
}

.index-shell-game {
  width: min(1380px, calc(100% - 24px));
  padding-top: 18px;
}

.index-shell-game .card,
.index-shell-game .results-header {
  border-radius: 0;
  border: 3px solid #8d8d8d;
  box-shadow: inset 0 0 0 2px #111, 0 18px 32px rgba(0,0,0,0.35);
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.97), rgba(5, 5, 5, 0.98));
  backdrop-filter: none;
}

.index-shell-game .hero,
.index-shell-game .filters,
.index-shell-game #emptyState {
  margin-bottom: 18px;
}

.index-shell-game .hero {
  align-items: flex-start;
  border-color: #939393;
}

.index-shell-game .hero h1,
.index-shell-game .results-header h2,
.index-shell-game .card h2 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
}

.index-shell-game .eyebrow,
.index-shell-game .lede,
.index-shell-game .muted,
.index-shell-game label span,
.index-shell-game #pageIndicator,
.index-shell-game #resultsMeta {
  color: #b9b0a0;
}

.index-shell-game .hero-badges span,
.index-shell-game .pill {
  background: #242424;
  border: 2px solid #555;
  color: #f0cb69;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.index-shell-game .row-between.section-heading,
.index-shell-game .results-header {
  padding: 10px 12px;
  border: 3px solid #8d8d8d;
  border-bottom-color: #555;
  background: linear-gradient(180deg, #111, #070707);
  box-shadow: inset 0 0 0 2px #111, 0 18px 32px rgba(0,0,0,0.35);
}

.index-shell-game .filters {
  padding: 0;
  overflow: hidden;
}

.index-shell-game .filters-grid,
.index-shell-game .active-filters {
  padding: 12px;
}

.index-shell-game input,
.index-shell-game button,
.index-shell-game .button-link {
  border-radius: 0;
  font-family: inherit;
}

.index-shell-game input {
  border: 2px solid #5e5e5e;
  background: linear-gradient(180deg, #161616, #0f0f0f);
  color: #f2efe7;
}

.index-shell-game input::placeholder {
  color: #8f8577;
}

.index-shell-game button,
.index-shell-game .button-link {
  border: 2px solid #6c180f;
  background: linear-gradient(180deg, #c3362c, #8d140f);
  color: #fff4de;
  text-transform: uppercase;
}

.index-shell-game button.secondary,
.index-shell-game .button-link.secondary {
  border-color: #5e5e5e;
  background: linear-gradient(180deg, #303030, #161616);
}

.index-shell-game .pagination-controls {
  gap: 8px;
}

.index-shell-game .pagination-controls button {
  min-width: 120px;
}

.index-shell-game .active-filters {
  gap: 8px;
}

.index-shell-game .active-filters .pill,
.index-shell-game .active-filters > * {
  border-radius: 0;
}

.index-shell-game .results-grid {
  gap: 18px;
}

.index-shell-game .filters-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 12px;
  align-items: end;
}

.index-shell-game .filters-grid > label,
.index-shell-game .filters-grid > div {
  min-width: 0;
}

/* Row 1 */
.index-shell-game .filters-grid > label:nth-of-type(1) { grid-column: span 5; } /* Search */
.index-shell-game .filters-grid > label:nth-of-type(2) { grid-column: span 3; } /* Class */
.index-shell-game .filters-grid > label:nth-of-type(3) { grid-column: span 4; } /* Archetype */

/* Row 2 */
.index-shell-game .filters-grid > label:nth-of-type(4) { grid-column: span 2; } /* Min Level */
.index-shell-game .filters-grid > label:nth-of-type(5) { grid-column: span 2; } /* Max Level */
.index-shell-game .filters-grid > label:nth-of-type(6) { grid-column: span 4; } /* Equipment */
.index-shell-game .filters-grid > label:nth-of-type(7) { grid-column: span 4; } /* Weapons */

/* Row 3 */
.index-shell-game .filters-grid > label:nth-of-type(8) { grid-column: span 4; } /* Spells */
.index-shell-game .filters-grid > label:nth-of-type(9) { grid-column: span 3; } /* Stat */
.index-shell-game .filters-grid > label:nth-of-type(10) { grid-column: span 2; } /* Stat min */
.index-shell-game .filters-grid > label:nth-of-type(11) { grid-column: span 3; } /* Stat max */

.index-shell-game .filters-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}

.index-shell-game .filters-actions button {
  width: auto;
  min-width: 180px;
}

.index-shell-game .filters-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.index-shell-game .filters-actions button {
  width: auto;
  min-width: 180px;
}

.index-shell-game .filters-grid > label,
.index-shell-game .filters-grid > div {
  min-width: 0;
}

.index-shell-game input,
.index-shell-game select,
.index-shell-game button {
  min-width: 0;
}