.prestige-page {
  padding: var(--space-8) 0 var(--space-16);
}

.prestige-hero {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

@media (min-width: 900px) {
  .prestige-hero:has(.prestige-hero__media) {
    grid-template-columns: 1fr minmax(12rem, 18rem);
    align-items: center;
  }
}

.prestige-hero__media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  max-width: 18rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-deep);
}

@media (max-width: 899px) {
  .prestige-hero__media {
    max-width: 14rem;
  }
}

.prestige-hero__icon {
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
  transition: border-color var(--transition-fast);
}

.prestige-hero__icon:hover,
.prestige-hero__icon:focus-visible {
  border-color: var(--color-olive);
}

.prestige-hero__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prestige-hero__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber);
}

.prestige-hero h1 {
  margin: 0;
  color: var(--color-text);
}

.prestige-hero__intro {
  margin: var(--space-3) 0 0;
  max-width: 42rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.prestige-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.prestige-hero__stats li {
  min-width: 5.5rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
}

.prestige-hero__stat-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-amber);
}

.prestige-hero__stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.prestige-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
}

.prestige-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.prestige-jump img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.prestige-jump small {
  color: var(--color-amber);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prestige-jump:hover,
.prestige-jump:focus-visible {
  border-color: var(--color-olive);
}

.prestige-hero__updated {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.prestige-section__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber);
}

.prestige-overview {
  margin-bottom: var(--space-10);
}

.prestige-overview__head {
  margin-bottom: var(--space-4);
}

.prestige-overview__head h2 {
  margin: 0;
  color: var(--color-text);
}

.prestige-overview__head p {
  margin: var(--space-2) 0 0;
  max-width: 40rem;
  color: var(--color-text-muted);
}

.prestige-overview__wrap {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.prestige-overview__table {
  margin: 0;
}

.prestige-overview__table th,
.prestige-overview__table td {
  vertical-align: middle;
}

.prestige-overview__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.prestige-overview__link img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-deep);
}

.prestige-overview__link:hover,
.prestige-overview__link:focus-visible {
  color: var(--color-amber);
}

.prestige-list {
  display: grid;
  gap: var(--space-8);
}

.prestige-card {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.prestige-card__head {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  background:
    linear-gradient(180deg, rgb(245 197 66 / 0.05), transparent 65%),
    var(--color-bg-deep);
}

@media (min-width: 860px) {
  .prestige-card__head {
    grid-template-columns: 1fr minmax(11rem, 15rem);
  }
}

.prestige-card__identity {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.prestige-card__icon {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
}

.prestige-card__art {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
}

.prestige-card__kicker {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-amber);
}

.prestige-card__head h2 {
  margin: 0;
  color: var(--color-text);
}

.prestige-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.prestige-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prestige-pill--link a {
  color: var(--color-amber);
  text-decoration: none;
}

.prestige-pill--link a:hover,
.prestige-pill--link a:focus-visible {
  text-decoration: underline;
}

.prestige-card__grid {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}

@media (min-width: 960px) {
  .prestige-card__grid {
    grid-template-columns: 1fr 1fr;
  }

  .prestige-card__section--wide {
    grid-column: 1 / -1;
  }
}

.prestige-card__section h3,
.prestige-reward-group h4,
.prestige-transfer h4 {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.prestige-count {
  margin-left: 0.35rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prestige-cond-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.prestige-cond {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
}

.prestige-cond__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text);
  font-weight: 600;
}

.prestige-cond__body a {
  color: var(--color-amber);
  text-decoration: none;
}

.prestige-cond__body a:hover,
.prestige-cond__body a:focus-visible {
  text-decoration: underline;
}

.prestige-cond__amount {
  color: var(--color-amber);
  font-variant-numeric: tabular-nums;
}

.prestige-cond__optional {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-olive);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prestige-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prestige-badge--level {
  color: var(--color-amber);
  border-color: rgb(245 197 66 / 0.35);
}

.prestige-badge--quest {
  color: #8ec8ff;
  border-color: rgb(142 200 255 / 0.35);
}

.prestige-badge--skill {
  color: #b8e0a0;
  border-color: rgb(184 224 160 / 0.35);
}

.prestige-badge--hideout {
  color: #e0c48a;
  border-color: rgb(224 196 138 / 0.35);
}

.prestige-badge--stash {
  color: #f0b07a;
  border-color: rgb(240 176 122 / 0.35);
}

.prestige-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.prestige-chip-row--dense {
  max-height: 18rem;
  overflow: auto;
  padding-right: var(--space-1);
}

.prestige-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
}

.prestige-chip:hover,
.prestige-chip:focus-visible {
  border-color: var(--color-olive);
}

.prestige-chip img {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.prestige-chip small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.prestige-chip__count {
  color: var(--color-amber);
  font-variant-numeric: tabular-nums;
}

.prestige-chip--compact {
  padding: 0.25rem 0.45rem;
  font-size: var(--text-xs);
}

.prestige-chip--compact img {
  width: 1.35rem;
  height: 1.35rem;
}

.prestige-chip--cat,
.prestige-chip--skill {
  background: var(--color-bg-deep);
}

.prestige-reward-group + .prestige-reward-group {
  margin-top: var(--space-4);
}

.prestige-custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-2);
}

.prestige-custom {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
  text-align: center;
}

.prestige-custom img,
.prestige-custom__ph {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-2);
  object-fit: contain;
}

.prestige-custom__ph {
  border: 1px dashed var(--color-border-subtle);
  background: var(--color-bg-elevated);
}

.prestige-custom figcaption span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.prestige-custom figcaption small {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.prestige-transfer {
  display: grid;
  gap: var(--space-4);
}

.prestige-transfer__head {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
}

@media (min-width: 720px) {
  .prestige-transfer__head {
    grid-template-columns: auto 1fr;
  }
}

.prestige-slot-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), 0.7rem);
  gap: 2px;
  width: max-content;
  padding: 0.35rem;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
}

.prestige-slot-grid span {
  width: 0.7rem;
  height: 0.7rem;
  background: rgb(245 197 66 / 0.35);
  border: 1px solid rgb(245 197 66 / 0.55);
}

.prestige-transfer__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 560px) {
  .prestige-transfer__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.prestige-transfer__stat-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-amber);
}

.prestige-transfer__stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.prestige-transfer__cols {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 860px) {
  .prestige-transfer__cols {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
  }
}

.prestige-transfer__details {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
}

.prestige-transfer__details > summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
}

.prestige-transfer__details > summary::-webkit-details-marker {
  display: none;
}

.prestige-transfer__details[open] > summary {
  border-bottom: 1px solid var(--color-border-subtle);
}

.prestige-transfer__items {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.prestige-transfer__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}

.prestige-transfer__filter {
  flex: 1 1 12rem;
  max-width: 20rem;
}

.prestige-transfer__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.prestige-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.prestige-faq {
  margin-top: var(--space-12);
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.prestige-faq h2 {
  margin: 0 0 var(--space-4);
}

.prestige-faq__list {
  display: grid;
  gap: var(--space-3);
}

.prestige-faq details {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-deep);
}

.prestige-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.prestige-faq details p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .prestige-overview__table thead {
    display: none;
  }

  .prestige-overview__table tr {
    display: grid;
    gap: 0.35rem;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .prestige-overview__table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    border: 0;
    padding: 0;
  }

  .prestige-overview__table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .prestige-overview__level {
    display: block !important;
  }

  .prestige-overview__level::before {
    display: none;
  }
}