/* inventory page styles */
.inventory-page {
  display: grid;
  gap: var(--s5);
}

.inventory-hero {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
  isolation: isolate;
}

.inventory-hero-art {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) brightness(0.72);
  transform: scale(1.01);
}

.inventory-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.18) 0%, rgba(10, 10, 12, 0.52) 45%, rgba(10, 10, 12, 0.82) 100%),
    linear-gradient(90deg, rgba(10, 10, 12, 0.74) 0%, rgba(10, 10, 12, 0.18) 58%, rgba(10, 10, 12, 0.5) 100%);
}

.inventory-hero-copy {
  position: absolute;
  left: var(--s5);
  right: var(--s5);
  bottom: var(--s5);
  display: grid;
  gap: var(--s2);
  max-width: 540px;
  z-index: 1;
}

.inventory-hero-kicker {
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
}

.inventory-hero-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.inventory-hero-subtitle {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.inventory-grid {
  gap: var(--s5);
}

.inventory-panel {
  padding: var(--s5);
}

.inventory-page .panel h3.inventory-panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

.inventory-panel-meta {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.inventory-set-source {
  margin-bottom: var(--s2);
  font-size: var(--fs-cap);
}

.inventory-synergy {
  margin-top: var(--s3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.inventory-synergy-active {
  color: var(--good);
}

.inventory-equip-row {
  padding: var(--s4) 0;
}

.inventory-player-name {
  color: var(--text);
  font-weight: 600;
}

.inventory-player-pos {
  font-size: var(--fs-cap);
}

.inventory-page .equip-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 720px) {
  .inventory-hero-copy {
    left: var(--s4);
    right: var(--s4);
    bottom: var(--s4);
  }

  .inventory-page .panel h3.inventory-panel-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------- tabs ---- */

.inv-tabs {
  display: inline-flex;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

.inv-tab {
  padding: var(--s2) var(--s5);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.inv-tab:hover { color: var(--text); }

.inv-tab.active {
  background: var(--gold);
  color: #1a1206;
}

/* --------------------------------------------------------------- codex ---- */

.codex {
  display: grid;
  gap: var(--s5);
}

.codex-rules {
  margin: 0;
  padding-left: var(--s4);
  display: grid;
  gap: var(--s3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.codex-rules li::marker { color: var(--gold); }
.codex-rules b { color: var(--text); font-weight: 650; }
.codex-overcap { color: var(--rar-legendary) !important; text-shadow: 0 0 8px rgba(255, 149, 85, 0.4); }

.codex-note {
  margin: var(--s4) 0 0;
  font-size: var(--fs-cap);
  line-height: 1.5;
}

/* captain's-armband codex entries */
.codex-band-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}
.codex-band {
  display: flex;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.codex-band-art {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border-radius: var(--r-md);
  object-fit: cover;
  border: 1px solid var(--line);
  align-self: flex-start;
}
.codex-band-body {
  min-width: 0;
  flex: 1;
}
.codex-band-head {
  font-size: var(--fs-sm);
  margin-bottom: var(--s1);
}
.codex-band-how {
  font-size: var(--fs-cap);
  color: var(--text-2);
  line-height: 1.45;
  margin-bottom: var(--s2);
}
.codex-band-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-cap);
}
.codex-band-table td {
  padding: 0.12rem 0;
  vertical-align: baseline;
}
.codex-band-mag {
  font-weight: 700;
  text-align: right;
  padding-right: var(--s2) !important;
  white-space: nowrap;
}

/* gear slots */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
}

.slot-card {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.slot-name {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.slot-blurb {
  margin: var(--s1) 0 var(--s3);
  font-size: var(--fs-cap);
  line-height: 1.45;
}

.slot-affinity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
}

.slot-affinity-label {
  margin-right: var(--s1);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.attr-chip {
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 10px;
}

/* tables */
.codex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.codex-table th {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.codex-table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}

.codex-table tr:last-child td { border-bottom: 0; }
.codex-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.codex-table th.num { text-align: right; }

.rar-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--s2);
  border-radius: 50%;
  vertical-align: middle;
}

/* Scope rarity tints to the codex's own classes — never the armory's
   .item-card.rar-* swatches (which would get a full colour fill otherwise). */
.rar-name { font-weight: 650; }
.rar-name.rar-common { color: var(--rar-common); }
.rar-name.rar-magic { color: var(--rar-magic); }
.rar-name.rar-rare { color: var(--rar-rare); }
.rar-name.rar-epic { color: var(--rar-epic); }
.rar-name.rar-legendary { color: var(--rar-legendary); }
.rar-dot.rar-common { background: var(--rar-common); }
.rar-dot.rar-magic { background: var(--rar-magic); }
.rar-dot.rar-rare { background: var(--rar-rare); }
.rar-dot.rar-epic { background: var(--rar-epic); }
.rar-dot.rar-legendary { background: var(--rar-legendary); }

/* special effects */
.codex-special-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s3);
}

.codex-special {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-cap);
  line-height: 1.5;
}

.codex-special-name {
  margin-bottom: var(--s1);
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* item sets */
.codex-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s3);
}

.codex-set-card {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid rgba(124, 232, 168, 0.22);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-cap);
  overflow: hidden;
}

/* Boss (4-piece) sets read as legendary: amber rim + ember glow. */
.codex-set-card.is-boss {
  border-color: color-mix(in srgb, var(--rar-legendary) 45%, transparent);
  box-shadow: var(--shadow-1), var(--glow-legendary);
}

.codex-set-card.is-boss .codex-set-name { color: var(--rar-legendary); }

/* Full-bleed set art banner across the top of the card. */
.codex-set-art {
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
  height: 150px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}

.codex-set-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
}

/* If the art is missing, drop the banner entirely (no empty box). */
.codex-set-art.no-art { display: none; }

/* armory set-collection card header with thumbnail */
.set-card-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.set-art-thumb {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.set-card-head-text { min-width: 0; }
.set-card-head-text .inventory-set-source { margin-bottom: 0; }

.codex-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.codex-set-name {
  color: #7ce8a8;
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.boss-tag {
  padding: 2px 8px;
  background: color-mix(in srgb, var(--rar-legendary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rar-legendary) 45%, transparent);
  border-radius: var(--r-pill);
  color: var(--rar-legendary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.codex-set-pc {
  color: var(--text-3);
  font-size: 10px;
}

.codex-set-source {
  margin: var(--s1) 0 var(--s3);
  font-size: 10px;
}

.codex-set-pieces {
  display: grid;
  gap: 2px;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.codex-set-piece { color: var(--text); }

.codex-piece-slot {
  display: inline-block;
  min-width: 64px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.codex-set-block { padding-top: var(--s3); }

.codex-set-block-title {
  margin-bottom: var(--s2);
  color: var(--text-3);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.codex-tier {
  padding: var(--s1) 0;
  color: var(--text-2);
  line-height: 1.5;
}

.codex-tier b { color: var(--text); }

.codex-tier-foot {
  margin-top: var(--s1);
  font-size: 9px;
  font-style: italic;
}

.codex-syn-detail {
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.4;
}

.sector-chip {
  display: inline-block;
  margin: 1px 2px 1px 0;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--steel) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--steel) 30%, transparent);
  border-radius: var(--r-pill);
  color: var(--steel);
  font-size: 10px;
  white-space: nowrap;
}

/* where loot drops */
.codex-tier-list {
  display: grid;
  gap: var(--s3);
}

.codex-tier-row {
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.codex-tier-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  font-size: var(--fs-cap);
}

.codex-tier-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.codex-tier-name.tier-bronze { color: #cd9b6a; }
.codex-tier-name.tier-silver { color: #c9d2dc; }
.codex-tier-name.tier-gold { color: var(--gold); }
.codex-tier-name.tier-mythic { color: var(--rar-epic); }

.codex-tier-risk { margin-left: auto; color: var(--text-3); }

.rarity-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.rarity-bar-seg { height: 100%; }
.rar-bg-common { background: var(--rar-common); }
.rar-bg-magic { background: var(--rar-magic); }
.rar-bg-rare { background: var(--rar-rare); }
.rar-bg-epic { background: var(--rar-epic); }
.rar-bg-legendary { background: var(--rar-legendary); }

.rarity-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin-top: var(--s2);
  font-size: 10px;
}

.rarity-bar-legend .rar-name { background: none; font-weight: 600; }