.relic-page {
  overflow: clip;
}

.relic-page .relic-hero {
  position: relative;
  min-height: 34rem;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: var(--color-ash-canvas);
}

.relic-page .relic-hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(11, 12, 16, 0.96) 0%, rgba(11, 12, 16, 0.88) 35%, rgba(11, 12, 16, 0.32) 72%, rgba(11, 12, 16, 0.2) 100%), linear-gradient(0deg, rgba(11, 12, 16, 0.82), rgba(11, 12, 16, 0.08)), url('/public/media/relic-vault-hero.webp');
  background-position: center;
  background-size: cover;
}

.relic-page .relic-hero::after,
.relic-page .relic-final__panel::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.07;
  background-image: radial-gradient(circle at 20% 20%, var(--color-spell-cyan) 0 1px, transparent 2px), linear-gradient(45deg, transparent 48%, var(--color-rune-outline) 49%, var(--color-rune-outline) 51%, transparent 52%);
  background-size: 4rem 4rem, 5rem 5rem;
  content: "";
  pointer-events: none;
}

.relic-page .relic-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: center;
  min-height: 34rem;
  padding-block: var(--space-8);
}

.relic-page .relic-hero__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 41.25rem;
  padding: var(--space-5);
  border-left: 2px solid rgba(255, 42, 75, 0.72);
  background: rgba(11, 12, 16, 0.72);
  box-shadow: inset 1px 0 0 rgba(226, 217, 243, 0.09);
}

.relic-page .relic-hero__content > * { margin: 0; min-width: 0; }
.relic-page .relic-hero__content .lead { max-width: 60ch; }
.relic-page .relic-hero__visual-space { min-width: 0; min-height: 1px; }

.relic-page .relic-hero__actions,
.relic-page .relic-final__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.relic-page .relic-hero__actions > *,
.relic-page .relic-final__actions > * { min-width: 0; }
.relic-page .relic-hero__helper,
.relic-page .relic-final__back { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2); font-weight: 700; }

.relic-page .relic-archive-note__box { max-width: 51.25rem; }
.relic-page .relic-archive-note__box > :last-child { margin-bottom: 0; }

.relic-page .relic-discovery__intro { max-width: 45rem; }
.relic-page .relic-discovery__intro > :last-child { margin-bottom: 0; }

.relic-page .relic-filters {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(max-content, 1fr);
  gap: var(--space-5);
  align-items: end;
  margin-top: var(--space-6);
  padding: var(--space-5);
}

.relic-page .relic-filters > * { min-width: 0; }
.relic-page .relic-filters__search { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.relic-page .relic-filters__search label { margin: 0; }
.relic-page .relic-filters__help { margin: 0; color: var(--color-muted-text); font-size: var(--text-small); line-height: 1.45; }
.relic-page .relic-filters__roles { min-width: 0; padding: 0; border: 0; }
.relic-page .relic-filters__roles legend { padding: 0; margin-bottom: var(--space-2); }
.relic-page .relic-filters__buttons { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); }
.relic-page .relic-filter { min-width: max-content; min-height: 2.75rem; border: var(--border-default); border-radius: var(--radius-pill); padding: 0.55rem 0.75rem; background: var(--color-basalt-raised); color: var(--color-muted-text); font-size: var(--text-small); font-weight: 700; }
.relic-page .relic-filter:hover { border-color: var(--color-spell-cyan); color: var(--color-arcane-text); }
.relic-page .relic-filter.is-selected { border-color: var(--color-ember-scarlet); background: rgba(255, 42, 75, 0.12); color: var(--color-arcane-text); box-shadow: inset 0 0 0 1px rgba(255, 42, 75, 0.26); }
.relic-page .relic-filters__reset-wrap { display: flex; min-width: 0; justify-content: flex-end; }
.relic-page .relic-filters__reset { white-space: nowrap; }
.relic-page .relic-results-status { margin: var(--space-3) 0 0; color: var(--color-muted-text); font-size: var(--text-small); }

.relic-page .relic-catalogue__layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-5);
  align-items: start;
}

.relic-page .relic-catalogue__main,
.relic-page .relic-catalogue__rail { min-width: 0; }
.relic-page .relic-catalogue__intro { max-width: 68ch; }
.relic-page .relic-catalogue__rail { position: sticky; top: var(--space-6); }
.relic-page .relic-catalogue__rail > :last-child { margin-bottom: 0; }

.relic-page .relic-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.relic-page .relic-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  border: var(--border-default);
  border-left: 3px solid var(--color-relic-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--color-basalt-panel);
  box-shadow: inset 0 1px 0 rgba(226, 217, 243, 0.045);
}

.relic-page .relic-card:nth-child(1) { border-left-color: var(--color-ember-scarlet); }
.relic-page .relic-card:nth-child(2) { border-left-color: var(--color-boss-red); }
.relic-page .relic-card:nth-child(3) { border-left-color: var(--color-spell-cyan); }
.relic-page .relic-card:nth-child(5) { border-left-color: var(--color-spell-cyan); }
.relic-page .relic-card > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.relic-page .relic-card h3 { font-size: 1.28rem; }
.relic-page .relic-card__role { color: var(--color-relic-gold); font-size: var(--text-meta); font-weight: 800; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; }
.relic-page .relic-card__tags { margin-top: auto; }
.relic-page .relic-card__link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2); font-weight: 700; }
.relic-page .relic-no-results { margin-top: var(--space-5); border-left: 3px solid var(--color-spell-cyan); padding: var(--space-4); background: var(--color-basalt-panel); }
.relic-page .relic-no-results p { margin: 0; }
.relic-page .relic-inline-reset { border: 0; padding: 0; background: transparent; color: var(--color-spell-cyan); text-decoration: underline; text-decoration-color: rgba(0, 240, 255, 0.42); }

.relic-page .relic-role-map__intro { max-width: 45rem; }
.relic-page .relic-role-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.relic-page .relic-role-panel { min-width: 0; border: var(--border-default); border-left: 3px solid var(--color-rune-outline); border-radius: var(--radius-sm); padding: var(--space-5); background: var(--color-basalt-panel); }
.relic-page .relic-role-panel > :last-child { margin-bottom: 0; }
.relic-page .relic-role-panel--damage { border-left-color: var(--color-ember-scarlet); }
.relic-page .relic-role-panel--defense { border-left-color: var(--color-boss-red); }
.relic-page .relic-role-panel--mobility { border-left-color: var(--color-spell-cyan); }
.relic-page .relic-role-panel--resources { border-left-color: var(--color-relic-gold); }
.relic-page .relic-detail-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.relic-page .relic-detail-list > li { position: relative; min-width: 0; padding-left: var(--space-4); overflow-wrap: anywhere; }
.relic-page .relic-detail-list > li::before { position: absolute; top: 0.7em; left: 0; width: 0.4rem; height: 0.4rem; background: currentColor; content: ""; transform: rotate(45deg); }

.relic-page .relic-synergy__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; }
.relic-page .relic-synergy__copy { min-width: 0; max-width: 47.5rem; }
.relic-page .relic-synergy__copy .lead { max-width: 68ch; }
.relic-page .relic-synergy__figure { min-width: 0; }
.relic-page .relic-synergy__figure img { width: 100%; aspect-ratio: 3 / 2; border: var(--border-default); border-radius: var(--radius-sm); object-fit: cover; }
.relic-page .relic-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.relic-page .relic-steps > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.relic-page .relic-steps__number { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--color-relic-gold); color: var(--color-relic-gold); font-size: var(--text-small); font-weight: 800; }

.relic-page .relic-route-table__intro { max-width: 43.75rem; }
.relic-page .relic-route-table__desktop { max-width: 65rem; margin-top: var(--space-5); }
.relic-page .relic-route-table__desktop th:nth-child(1) { width: 31%; }
.relic-page .relic-route-table__desktop th:nth-child(2) { width: 18%; }
.relic-page .relic-route-table__desktop th:nth-child(3) { width: 30%; }
.relic-page .relic-route-table__desktop th:nth-child(4) { width: 21%; }
.relic-page .relic-route-records { display: none; }

.relic-page .relic-faq__intro { max-width: 42.5rem; }
.relic-page .relic-accordion { display: grid; width: min(100%, 48.75rem); gap: var(--space-3); }
.relic-page .relic-accordion__item { min-width: 0; border: var(--border-default); background: var(--color-basalt-panel); }
.relic-page .relic-accordion__item h3 { margin: 0; }
.relic-page .relic-accordion__item button { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-4); background: transparent; color: var(--color-arcane-text); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-align: left; }
.relic-page .relic-accordion__item button span { flex: 0 0 auto; color: var(--color-spell-cyan); font-family: var(--font-body); font-size: 1.4rem; transition: transform var(--transition-fast); }
.relic-page .relic-accordion__item button[aria-expanded="true"] span { transform: rotate(45deg); }
.relic-page .relic-accordion__panel { padding: 0 var(--space-4) var(--space-4); }
.relic-page .relic-accordion__panel > :last-child { margin-bottom: 0; }

.relic-page .relic-next__intro { max-width: 45rem; }
.relic-page .relic-next__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.relic-page .relic-next-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--color-basalt-panel); color: var(--color-arcane-text); text-decoration: none; }
.relic-page .relic-next-card > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.relic-page .relic-next-card > .eyebrow { color: var(--color-relic-gold); }
.relic-page .relic-next-card > span:last-child { display: flex; min-height: 2.75rem; align-items: end; margin-top: auto; color: var(--color-spell-cyan); font-weight: 700; }
.relic-page .relic-next-card:hover { border-color: var(--color-spell-cyan); box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.18); color: var(--color-arcane-text); }

.relic-page .relic-final__panel { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); overflow: hidden; padding: var(--space-6); }
.relic-page .relic-final__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 43.75rem; }
.relic-page .relic-final__copy > * { min-width: 0; margin: 0; }
.relic-page .relic-final__copy p { max-width: 64ch; }
.relic-page .relic-final__rune { display: grid; min-width: 0; place-items: center; color: rgba(255, 183, 3, 0.55); font-family: var(--font-heading); font-size: clamp(5rem, 13vw, 10rem); }

@media (max-width: 68.75rem) {
  .relic-page .relic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 63.75rem) {
  .relic-page .relic-filters { grid-template-columns: minmax(0, 1fr); }
  .relic-page .relic-filters__reset-wrap { justify-content: flex-start; }
  .relic-page .relic-next__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 56.25rem) {
  .relic-page .relic-hero { min-height: 26.25rem; }
  .relic-page .relic-hero__media { background-image: linear-gradient(0deg, rgba(11, 12, 16, 0.96) 0%, rgba(11, 12, 16, 0.78) 58%, rgba(11, 12, 16, 0.34) 100%), url('/public/media/relic-vault-hero.webp'); background-position: 66% center; }
  .relic-page .relic-hero__container { grid-template-columns: minmax(0, 1fr); min-height: 26.25rem; padding-block: var(--space-6); }
  .relic-page .relic-hero__content { max-width: 35rem; }
  .relic-page .relic-hero__visual-space { display: none; }
  .relic-page .relic-catalogue__layout { grid-template-columns: minmax(0, 1fr); }
  .relic-page .relic-catalogue__rail { position: static; max-width: none; }
  .relic-page .relic-role-panels { grid-template-columns: minmax(0, 1fr); }
  .relic-page .relic-synergy__layout { grid-template-columns: minmax(0, 1fr); }
  .relic-page .relic-synergy__figure { order: -1; }
  .relic-page .relic-synergy__copy { max-width: none; }
  .relic-page .relic-steps { grid-template-columns: minmax(0, 1fr); }
  .relic-page .relic-route-table__desktop { display: none; }
  .relic-page .relic-route-records { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
  .relic-page .relic-route-records > article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); border: var(--border-default); border-left: 3px solid var(--color-rune-outline); padding: var(--space-4); background: var(--color-basalt-panel); }
  .relic-page .relic-route-records p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
  .relic-page .relic-route-records .meta { font-size: var(--text-meta); }
  .relic-page .relic-route-records a { display: flex; min-height: 2.75rem; align-items: center; margin-top: var(--space-2); font-weight: 700; }
  .relic-page .relic-accordion { width: 100%; }
}

@media (max-width: 45rem) {
  .relic-page .relic-hero__content { padding: var(--space-4); }
  .relic-page .relic-hero__actions,
  .relic-page .relic-final__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .relic-page .relic-hero__actions > .button,
  .relic-page .relic-final__actions > .button { width: 100%; }
  .relic-page .relic-hero__helper,
  .relic-page .relic-final__back { justify-content: center; }
  .relic-page .relic-filters { padding: var(--space-4); }
  .relic-page .relic-filters__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relic-page .relic-filter { min-width: 0; }
  .relic-page .relic-cards { grid-template-columns: minmax(0, 1fr); }
  .relic-page .relic-card { padding: var(--space-5); }
  .relic-page .relic-next__cards { grid-template-columns: minmax(0, 1fr); }
  .relic-page .relic-next-card { min-height: 0; }
  .relic-page .relic-final__panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
  .relic-page .relic-final__rune { display: none; }
}

@media (max-width: 24.375rem) {
  .relic-page .relic-filters__buttons { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .relic-page .relic-accordion__item button span { transition: none; }
}