/* ================================================================
   Hall of Relics — 27A Stitch source of truth
   Geometry/tokens from assets/reliquias/stitch_no_perry_relic_system
   Art only from assets/reliquias/
   ================================================================ */

#hall-of-fame.np-hall-relics-27a {
  --relic-card-w: 224px;
  --relic-card-h: 360px;
  --relic-gap: 20px;
  --relic-art-h: 118px;
  --relic-pad: 16px;
  --relic-bg: #131314;
  --relic-on: #e5e2e3;
  --relic-on-var: #d3c4af;
  --relic-outline: #9c8f7b;
  --relic-outline-var: #4f4535;
  --relic-bronze: #556b2f;
  --relic-primary: #f7bd48;
  --relic-gold: #b8860b;
  --relic-hunter: #fb5945;
  --relic-survivor: #8ec8fe;
  --relic-ascendant: #d3c4af;
  background: #131314 !important;
  color: var(--relic-on);
  padding: 5.5rem 1.25rem 6rem !important;
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

#hall-of-fame.np-hall-relics-27a.np-world-lite::before {
  display: none !important;
}

#hall-of-fame.np-hall-relics-27a .container {
  max-width: 1240px !important;
  width: 100%;
  padding-left: 20px !important;
  padding-right: 20px !important;
  overflow: visible;
}

#hall-of-fame.np-hall-relics-27a .np-relics__head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 64px;
}

#hall-of-fame.np-hall-relics-27a .np-relics__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-title, Cinzel, 'Noto Serif', serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--relic-primary);
  text-shadow: 0 4px 12px rgba(247, 189, 72, 0.2);
}

#hall-of-fame.np-hall-relics-27a .np-relics__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-title, Cinzel, serif);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--relic-on-var);
  opacity: 0.8;
}

#hall-of-fame.np-hall-relics-27a .np-relics__sub {
  margin: 0 auto;
  max-width: 36rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--relic-outline-var);
  position: relative;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--relic-outline);
}

#hall-of-fame.np-hall-relics-27a .np-relics__sub::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--relic-outline-var);
}

#hall-of-fame.np-hall-relics-27a .np-relics__hall {
  list-style: none;
  margin: 0 auto;
  padding: 16px 0 0;
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--relic-gap);
  width: 1200px;
  max-width: 100%;
  overflow: visible !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  grid-template-columns: none !important;
}

@media (max-width: 1279px) {
  #hall-of-fame.np-hall-relics-27a .np-relics__hall {
    flex-wrap: wrap;
    width: auto;
  }
}

#hall-of-fame.np-hall-relics-27a .np-relics__niche,
#hall-of-fame.np-hall-relics-27a .np-relics__niche.is-throne,
#hall-of-fame.np-hall-relics-27a .np-relics__niche.is-dominant {
  flex: 0 0 auto;
  width: var(--relic-card-w);
  height: var(--relic-card-h);
  transform: none !important;
  z-index: 1;
}

#hall-of-fame.np-hall-relics-27a .np-relics__niche.is-throne {
  z-index: 2;
}

#hall-of-fame.np-hall-relics-27a .np-relic,
#hall-of-fame.np-hall-relics-27a .np-relic--throne,
#hall-of-fame.np-hall-relics-27a .np-relic--blade,
#hall-of-fame.np-hall-relics-27a .np-relic--hunter,
#hall-of-fame.np-hall-relics-27a .np-relic--survivor,
#hall-of-fame.np-hall-relics-27a .np-relic--ascendant {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--relic-card-w);
  height: var(--relic-card-h);
  min-height: var(--relic-card-h);
  padding: 0;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  clip-path: none !important;
  border: 2px solid var(--relic-bronze);
  border-radius: 0.25rem;
  background: linear-gradient(180deg, #1a1a1c 0%, #0a0a0b 100%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

#hall-of-fame.np-hall-relics-27a .np-relic::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

#hall-of-fame.np-hall-relics-27a .np-relic__sheen {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: skewX(-20deg);
  animation: np-relic-sweep 8s infinite linear;
}

#hall-of-fame.np-hall-relics-27a .np-relic--hunter .np-relic__sheen { animation-delay: 2s; }
#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__sheen { animation-delay: 4s; animation-duration: 6s; }
#hall-of-fame.np-hall-relics-27a .np-relic--survivor .np-relic__sheen { animation-delay: 6s; }
#hall-of-fame.np-hall-relics-27a .np-relic--ascendant .np-relic__sheen { animation-delay: 1s; }

@keyframes np-relic-sweep {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne {
  border-color: var(--relic-gold);
  box-shadow: inset 0 0 15px rgba(184, 134, 11, 0.2), 0 8px 15px -3px rgba(0, 0, 0, 0.8);
  transform: translateY(-16px);
}

#hall-of-fame.np-hall-relics-27a .np-relic:hover,
#hall-of-fame.np-hall-relics-27a .np-relic:focus-visible {
  transform: scale(1.02);
  border-color: var(--relic-primary);
  outline: none;
  filter: none;
  box-shadow: 0 0 20px rgba(247, 189, 72, 0.3), inset 0 0 20px rgba(247, 189, 72, 0.1);
  z-index: 5;
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne:hover,
#hall-of-fame.np-hall-relics-27a .np-relic--throne:focus-visible {
  transform: translateY(-16px) scale(1.02);
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), inset 0 0 30px rgba(255, 215, 0, 0.2);
}

#hall-of-fame.np-hall-relics-27a .np-relic__forge,
#hall-of-fame.np-hall-relics-27a .np-relic__chassis {
  display: none !important;
}

#hall-of-fame.np-hall-relics-27a .np-relic__art {
  position: relative;
  display: block;
  height: var(--relic-art-h);
  flex: 0 0 var(--relic-art-h);
  overflow: hidden;
  background: #1c1b1c;
  border-bottom: 1px solid var(--relic-bronze);
}

#hall-of-fame.np-hall-relics-27a .np-relic__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.8;
  mix-blend-mode: luminosity;
  filter: none;
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__art img {
  opacity: 0.9;
}

#hall-of-fame.np-hall-relics-27a .np-relic__art::after {
  content: none;
}

#hall-of-fame.np-hall-relics-27a .np-relic:hover .np-relic__art::after,
#hall-of-fame.np-hall-relics-27a .np-relic:focus-visible .np-relic__art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

#hall-of-fame.np-hall-relics-27a .np-relic__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(2.8em, auto) minmax(1.35em, auto) minmax(2.4em, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    'medallion'
    'title'
    'name'
    'explain'
    'space'
    'metric';
  align-items: start;
  justify-items: center;
  text-align: center;
  height: calc(var(--relic-card-h) - var(--relic-art-h));
  min-height: 0;
  padding: var(--relic-pad);
  overflow: visible;
}

#hall-of-fame.np-hall-relics-27a .np-relic__medallion {
  grid-area: medallion;
  position: relative;
  width: 56px;
  height: 56px;
  margin: -36px 0 8px;
  border-radius: 50%;
  border: 2px solid var(--relic-outline);
  background: #131314;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  flex: 0 0 auto;
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__medallion {
  width: 64px;
  height: 64px;
  margin-top: -40px;
  border-color: var(--relic-primary);
}

#hall-of-fame.np-hall-relics-27a .np-relic--hunter .np-relic__medallion { border-color: var(--relic-hunter); }
#hall-of-fame.np-hall-relics-27a .np-relic--survivor .np-relic__medallion { border-color: var(--relic-survivor); }
#hall-of-fame.np-hall-relics-27a .np-relic--ascendant .np-relic__medallion { border-color: var(--relic-ascendant); }

#hall-of-fame.np-hall-relics-27a .np-relic__medallion.is-empty {
  background: #131314;
}

#hall-of-fame.np-hall-relics-27a .np-relic__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: none;
}

#hall-of-fame.np-hall-relics-27a .np-relic__ring {
  display: none;
}

#hall-of-fame.np-hall-relics-27a .np-relic__slot {
  grid-area: title;
  margin: 0;
  min-height: 2.8em;
  font-family: var(--font-title, Cinzel, serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--relic-primary);
  opacity: 0.85;
  overflow: visible;
  transition: opacity 200ms ease, text-shadow 200ms ease;
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__slot {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(247, 189, 72, 0.5);
}

#hall-of-fame.np-hall-relics-27a .np-relic--hunter .np-relic__slot { color: var(--relic-hunter); }
#hall-of-fame.np-hall-relics-27a .np-relic--survivor .np-relic__slot { color: var(--relic-survivor); }
#hall-of-fame.np-hall-relics-27a .np-relic--ascendant .np-relic__slot { color: var(--relic-on-var); }

#hall-of-fame.np-hall-relics-27a .np-relic:hover .np-relic__slot,
#hall-of-fame.np-hall-relics-27a .np-relic:focus-visible .np-relic__slot {
  opacity: 1;
  text-shadow: 0 0 8px currentColor;
}

#hall-of-fame.np-hall-relics-27a .np-relic__name {
  grid-area: name;
  margin: 0;
  min-height: 1.35em;
  max-width: 100%;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--relic-on-var);
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__name {
  color: #f7bd48;
  font-weight: 700;
}

#hall-of-fame.np-hall-relics-27a .np-relic__explain {
  grid-area: explain;
  margin: 0;
  min-height: 2.6em;
  max-height: none;
  max-width: 100%;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--relic-outline);
  opacity: 1;
  overflow: visible;
}

#hall-of-fame.np-hall-relics-27a .np-relic.is-vacant .np-relic__name {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--relic-outline);
}

#hall-of-fame.np-hall-relics-27a .np-relic__badge {
  grid-area: metric;
  align-self: stretch;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 4px 12px;
  border: 1px solid var(--relic-outline-var);
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__badge {
  border-color: var(--relic-primary);
  background: #271900;
}

#hall-of-fame.np-hall-relics-27a .np-relic__metric {
  margin: 0;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #ffdea6;
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__metric {
  font-size: 1.5rem;
  color: var(--relic-primary);
}

#hall-of-fame.np-hall-relics-27a .np-relic--ascendant .np-relic__metric {
  color: #e5e2e3;
}

#hall-of-fame.np-hall-relics-27a .np-relic__metric-label {
  margin: 0;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--relic-outline);
}

#hall-of-fame.np-hall-relics-27a .np-relic--throne .np-relic__metric-label {
  color: #ffdea6;
  letter-spacing: 0.16em;
}

#hall-of-fame.np-hall-relics-27a .np-relics__empty {
  text-align: center;
  color: var(--relic-outline);
  padding: 2rem;
}

#hall-of-fame.np-hall-relics-27a .np-feats__archive-wrap {
  margin-top: 2.5rem;
}

@media (max-width: 1199px) {
  #hall-of-fame.np-hall-relics-27a .np-relic--throne,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:hover,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:focus-visible {
    transform: none;
  }
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:hover,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:focus-visible {
    transform: scale(1.02);
  }
}

/* DESIGN.md mobile: single-column, 90% width, locked 224:360 aspect */
@media (max-width: 699px) {
  #hall-of-fame.np-hall-relics-27a {
    padding: 3.5rem 0.85rem 4.5rem !important;
  }

  #hall-of-fame.np-hall-relics-27a .np-relics__head {
    margin-bottom: 2rem;
  }

  #hall-of-fame.np-hall-relics-27a .np-relics__hall {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }

  #hall-of-fame.np-hall-relics-27a .np-relics__niche,
  #hall-of-fame.np-hall-relics-27a .np-relics__niche.is-throne,
  #hall-of-fame.np-hall-relics-27a .np-relics__niche.is-dominant,
  #hall-of-fame.np-hall-relics-27a .np-relic,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne,
  #hall-of-fame.np-hall-relics-27a .np-relic--blade,
  #hall-of-fame.np-hall-relics-27a .np-relic--hunter,
  #hall-of-fame.np-hall-relics-27a .np-relic--survivor,
  #hall-of-fame.np-hall-relics-27a .np-relic--ascendant {
    width: 90vw;
    max-width: min(360px, calc(100% - 8px));
    height: auto;
    min-height: 0;
    aspect-ratio: 224 / 360;
  }

  #hall-of-fame.np-hall-relics-27a .np-relic__art {
    height: 32.8%;
    flex: 0 0 32.8%;
  }

  #hall-of-fame.np-hall-relics-27a .np-relic__body {
    height: 67.2%;
  }

  #hall-of-fame.np-hall-relics-27a .np-relic--throne,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:hover,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:focus-visible {
    transform: none;
  }

  #hall-of-fame.np-hall-relics-27a .np-relic:hover,
  #hall-of-fame.np-hall-relics-27a .np-relic:focus-visible,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:hover,
  #hall-of-fame.np-hall-relics-27a .np-relic--throne:focus-visible {
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hall-of-fame.np-hall-relics-27a .np-relic,
  #hall-of-fame.np-hall-relics-27a .np-relic__sheen,
  #hall-of-fame.np-hall-relics-27a .np-relic__slot {
    transition: none;
    animation: none !important;
  }
}