:root {
  --hc-overlay: rgba(3, 7, 8, 0.72);
  --hc-panel: rgba(6, 15, 13, 0.86);
  --hc-panel-solid: #0B1211;
  --hc-line: rgba(220, 230, 220, 0.12);
  --hc-line-strong: rgba(199, 176, 106, 0.22);
}

/* ═══ Scenes ═══ */
.hc-scene {
  position: relative;
  overflow: hidden;
  background-color: var(--hc-panel-solid);
  background-size: cover;
  background-position: center center;
  /* NOT `fixed`: a full-viewport fixed background forces the compositor to
     re-raster a 1920x1080 image on every scroll frame, which is the single
     biggest source of scroll lag on this page. */
  background-attachment: scroll;
  border-bottom: 1px solid var(--ryven-border-dim);
}

.hc-scene--features,
.hc-scene--wiki,
.hc-scene--world {
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(45, 107, 71, 0.16), transparent 70%),
    linear-gradient(180deg, #070B0A 0%, #050807 100%);
}

.hc-scene__overlay,
.hc-scene__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hc-scene__overlay {
  background: linear-gradient(
    90deg,
    rgba(3, 7, 8, 0.93) 0%,
    rgba(3, 7, 8, 0.66) 44%,
    rgba(3, 7, 8, 0.28) 76%,
    rgba(3, 7, 8, 0.7) 100%
  );
  z-index: 1;
}

.hc-scene--features .hc-scene__overlay,
.hc-scene--wiki .hc-scene__overlay,
.hc-scene--world .hc-scene__overlay {
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(3, 7, 8, 0.7), rgba(3, 7, 8, 0.92));
}

.hc-scene__overlay--rankings {
  background: linear-gradient(
    90deg,
    rgba(3, 7, 8, 0.95) 0%,
    rgba(3, 7, 8, 0.8) 50%,
    rgba(3, 7, 8, 0.58) 100%
  );
}

.hc-scene__overlay--news {
  background: linear-gradient(
    180deg,
    rgba(3, 7, 8, 0.86) 0%,
    rgba(3, 7, 8, 0.5) 40%,
    rgba(3, 7, 8, 0.88) 100%
  );
}

.hc-scene__overlay--community {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(3, 7, 8, 0.68), rgba(3, 7, 8, 0.92));
}

.hc-scene__vignette {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(3, 7, 8, 0.58) 100%);
  z-index: 2;
}

.hc-scene__content {
  position: relative;
  z-index: 3;
  max-width: 1380px;
  margin: 0 auto;
  padding: clamp(88px, 11vh, 140px) 6% clamp(80px, 10vh, 120px);
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hc-scene__content--center {
  text-align: center;
  align-items: center;
}

.hc-scene__content--center .hc-lead {
  margin-left: auto;
  margin-right: auto;
}

/* ═══ Section headers ═══ */
.hc-section-head {
  max-width: 720px;
  margin-bottom: clamp(var(--ryven-space-xl), 4vw, var(--ryven-space-2xl));
}

.hc-section-head .hc-title {
  margin-bottom: var(--ryven-space-sm);
}

.hc-section-foot {
  margin-top: clamp(var(--ryven-space-xl), 4vw, var(--ryven-space-2xl));
  display: flex;
  justify-content: center;
}

/* ═══ Typography ═══ */
.hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ryven-space-sm);
  margin-bottom: var(--ryven-space-md);
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ryven-relic-emerald);
}

.hc-title {
  margin: 0 0 var(--ryven-space-md);
  font-family: var(--ryven-font-display);
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: var(--ryven-weight-bold);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--ryven-bone);
  text-wrap: balance;
}

.hc-title--small {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.hc-lead {
  max-width: 52ch;
  margin: 0 0 var(--ryven-space-lg);
  font-size: var(--ryven-text-lg);
  color: var(--ryven-bone-muted);
  line-height: 1.65;
}

.hc-lead--wide {
  max-width: 68ch;
}

/* ═══ Discord button ═══ */
.btn-discord {
  background: #5865F2;
  border: 1px solid #7986F5;
  color: #FFFFFF;
}

.btn-discord:hover {
  background: #4752C4;
  border-color: #8E99F7;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-discord:active {
  background: #3C46A8;
  transform: translateY(0);
}

.btn-discord i {
  font-size: 1.05em;
}

/* ═══ System showcase — full-bleed art wall ═══
   No grid, no cards, no captions. Each poster is shown at the full viewport,
   one after another, exactly as authored. */

.hc-world-head {
  max-width: 780px;
  margin: 0 auto clamp(var(--ryven-space-2xl), 4.5vw, var(--ryven-space-3xl));
  text-align: center;
}

.hc-world-head .hc-title {
  margin-bottom: var(--ryven-space-md);
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ryven-upgrade-gold);
  text-shadow: 0 4px 36px rgba(199, 176, 106, 0.2);
}

.hc-world-head .hc-lead {
  max-width: 48ch;
  margin: 0 auto;
  font-size: var(--ryven-text-lg);
  color: var(--ryven-bone-muted);
  text-wrap: balance;
}

.hc-world-head::after {
  content: '';
  display: block;
  width: 92px;
  height: 1px;
  margin: var(--ryven-space-lg) auto 0;
  background: linear-gradient(90deg, transparent, var(--ryven-relic-emerald), transparent);
}

/* Art wall: each poster scales to ~86% of the viewport, height follows the
   image's own ratio, everything centred. */
.hc-system-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2vw, 32px);
  width: 100%;
}

.hc-system-frame {
  display: block;
  line-height: 0;
  width: min(86vw, 1440px);
}

.hc-system-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Weak hardware, and phones, get the same reveal as a plain fade — no
   per-frame repaint. The artwork still arrives; it just arrives without
   the wipe. */
/* Infinite loops idle while they are off screen */
.hc-mist-off .hero-mist,
.hc-pulse-off .hc-realm__dot {
  animation-play-state: paused;
}

/* ═══ The Realm Today ═══ */
/* Section runs wider than the other scenes so the leaderboards get real space */
.hc-scene__content--realm {
  max-width: 1400px;
  padding-inline: 24px;
}

/* Three balanced areas: intro 1.05fr, then two equal leaderboards */
.hc-realm {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(340px, 1fr) minmax(340px, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
}

.hc-realm__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--hc-line);
  border-radius: var(--ryven-radius-lg);
  background: linear-gradient(165deg, rgba(11, 22, 20, 0.92), rgba(4, 9, 8, 0.96));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.44);
}

.hc-realm__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--ryven-space-lg);
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(71, 164, 114, 0.34);
  border-radius: 999px;
  background: rgba(71, 164, 114, 0.08);
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ryven-relic-emerald);
}

.hc-realm__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ryven-relic-emerald);
  box-shadow: 0 0 0 0 rgba(71, 164, 114, 0.55);
  animation: realmPulse 2.6s var(--ryven-ease-out-quart) infinite;
}

@keyframes realmPulse {
  0% { box-shadow: 0 0 0 0 rgba(71, 164, 114, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(71, 164, 114, 0); }
  100% { box-shadow: 0 0 0 0 rgba(71, 164, 114, 0); }
}

.hc-title--realm {
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  margin-bottom: var(--ryven-space-md);
}

/* Stats read as two framed blocks, so a zero looks intentional */
.hc-server-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-bottom: var(--ryven-space-lg);
}

.hc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px 16px;
  border: 1px solid var(--hc-line-strong);
  border-radius: var(--ryven-radius-md);
  background: rgba(3, 8, 7, 0.5);
}

.hc-stat__value {
  font-family: var(--ryven-font-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-upgrade-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hc-stat__label {
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ryven-bone-muted);
  text-align: center;
  line-height: 1.4;
}

.hc-realm__cta {
  margin-top: auto;
  align-self: stretch;
}

.hc-realm__cta i {
  transition: transform 240ms var(--ryven-ease-out-quart);
}

.hc-realm__cta:hover i,
.hc-realm__cta:focus-visible i {
  transform: translateX(5px);
}

/* ─── Leaderboard panels ─── */
.hc-rankings-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(180deg, rgba(9, 18, 16, 0.94), rgba(4, 9, 8, 0.96));
  border: 1px solid var(--ryven-radius-lg);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.44);
  overflow: hidden;
}

.hc-rankings-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--hc-line);
  background: rgba(255, 255, 255, 0.015);
}

.hc-rankings-panel h3 {
  margin: 0;
  font-family: var(--ryven-font-display);
  font-size: var(--ryven-text-lg);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-bone);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}

.hc-rankings-panel h3 i {
  color: var(--ryven-relic-emerald);
}

/* Content-driven height — never a forced tall column */
.hc-rankings-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hc-rankings-list li {
  display: grid;
  grid-template-columns: 40px 60px 1fr;
  grid-template-rows: auto auto;
  gap: 3px 16px;
  align-items: center;
  min-height: 68px;
  padding: 10px 14px;
  border-radius: var(--ryven-radius-md);
  border: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms var(--ryven-ease-out-quart);
}

.hc-rankings-list li + li {
  margin-top: 4px;
}

.hc-rankings-list li:hover {
  background: rgba(71, 164, 114, 0.09);
  border-color: rgba(71, 164, 114, 0.34);
  transform: translateX(3px);
}

.hc-rankings-list__empty {
  display: block !important;
  min-height: 0 !important;
  padding: var(--ryven-space-xl) 8px !important;
  font-size: var(--ryven-text-sm);
  color: var(--ryven-aged-iron);
  text-align: center;
}

/* Zero-padded gold numeral, no "#" noise */
.hc-rankings-list__rank {
  grid-row: 1 / 3;
  font-family: var(--ryven-font-display);
  font-size: var(--ryven-text-lg);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-upgrade-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Dedicated sprite area so nothing vanishes into a black square */
.hc-rankings-list__crest {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--hc-line);
  border-radius: var(--ryven-radius-md);
  background: radial-gradient(circle at 50% 30%, rgba(45, 107, 71, 0.16), rgba(0, 0, 0, 0.4) 72%);
  transition: transform 260ms var(--ryven-ease-out-quart);
}

.hc-rankings-list li:hover .hc-rankings-list__crest {
  transform: scale(1.06);
}

.hc-rankings-list__outfit,
.hc-rankings-list__logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}

.hc-rankings-list__medal {
  font-size: 1.6rem;
}

.hc-rankings-list__medal--gold { color: #FFD700; }
.hc-rankings-list__medal--silver { color: #C0C0C0; }
.hc-rankings-list__medal--bronze { color: #CD7F32; }

.hc-rankings-list__name {
  grid-column: 3;
  align-self: end;
  font-family: var(--ryven-font-display);
  font-size: var(--ryven-text-lg);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-bone);
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color 200ms ease;
}

.hc-rankings-list__name:hover,
.hc-rankings-list li:hover .hc-rankings-list__name {
  color: var(--ryven-relic-emerald);
}

.hc-rankings-list__meta {
  grid-column: 3;
  align-self: start;
  font-size: var(--ryven-text-sm);
  color: var(--ryven-bone-muted);
  line-height: 1.4;
}

/* The leaderboard fills in as a list. Opacity only, so it never fights the
   row hover transform. */
.hc-anim .hc-rankings-list li {
  opacity: 0;
  transition: opacity 380ms ease-out;
}

.hc-anim .hc-rankings-panel.is-visible .hc-rankings-list li {
  opacity: 1;
}

.hc-anim .hc-rankings-list li:nth-child(1) { transition-delay: 60ms; }
.hc-anim .hc-rankings-list li:nth-child(2) { transition-delay: 120ms; }
.hc-anim .hc-rankings-list li:nth-child(3) { transition-delay: 180ms; }
.hc-anim .hc-rankings-list li:nth-child(4) { transition-delay: 240ms; }
.hc-anim .hc-rankings-list li:nth-child(n + 5) { transition-delay: 300ms; }

.hc-rankings-panel__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ryven-relic-emerald);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease, gap 240ms var(--ryven-ease-out-quart);
}

.hc-rankings-panel__more:hover,
.hc-rankings-panel__more:focus-visible {
  color: var(--ryven-bone);
  gap: 12px;
}

/* ═══ The Chronicles ═══ */
.hc-latest {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--hc-line-strong);
  border-radius: var(--ryven-radius-xl);
  overflow: hidden;
  background: var(--hc-panel-solid);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}

.hc-latest__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hc-latest__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 800ms var(--ryven-ease-out-quart);
}

.hc-latest:hover .hc-latest__media img {
  transform: scale(1.035);
}

.hc-latest__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 9, 8, 0.2) 0%,
    rgba(4, 9, 8, 0.5) 42%,
    rgba(4, 9, 8, 0.96) 100%
  );
}

.hc-latest__body {
  position: relative;
  z-index: 1;
  padding: clamp(var(--ryven-space-lg), 3.5vw, var(--ryven-space-2xl));
}

.hc-latest .hc-title {
  margin-bottom: var(--ryven-space-sm);
}

/* Chronicle cards: maximum 2 per row */
.hc-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.hc-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hc-line);
  border-radius: var(--ryven-radius-lg);
  overflow: hidden;
  background: var(--hc-panel);
  transition: transform 400ms var(--ryven-ease-out-quart), border-color 300ms ease, box-shadow 400ms var(--ryven-ease-out-quart);
}

.hc-news-card:hover,
.hc-news-card:focus-within {
  transform: translateY(-5px);
  border-color: var(--hc-line-strong);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
}

.hc-news-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050807;
}

.hc-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 800ms var(--ryven-ease-out-quart);
}

.hc-news-card:hover .hc-news-card__media img {
  transform: scale(1.05);
}

.hc-news-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 9, 8, 0.75));
}

.hc-news-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.hc-news-card__meta {
  margin: 0 0 8px;
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ryven-relic-emerald);
}

.hc-news-card__title {
  margin: 0 0 8px;
  font-family: var(--ryven-font-display);
  font-size: var(--ryven-text-xl);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-bone);
  line-height: 1.22;
  letter-spacing: 0.02em;
}

.hc-news-card__excerpt {
  flex: 1;
  margin: 0 0 var(--ryven-space-md);
  font-size: var(--ryven-text-sm);
  color: var(--ryven-bone-muted);
  line-height: 1.62;
}

.hc-news-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ryven-relic-emerald);
  transition: gap 200ms ease;
}

.hc-news-card:hover .hc-news-card__cta {
  gap: 12px;
}

/* ═══ The Wiki (max 2 per row) ═══ */
.hc-wiki-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.hc-wiki-card {
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--hc-line);
  border-radius: var(--ryven-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--hc-panel);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.4);
  transition: transform 420ms var(--ryven-ease-out-quart), border-color 300ms ease, box-shadow 420ms var(--ryven-ease-out-quart);
}

.hc-wiki-card:hover,
.hc-wiki-card:focus-visible {
  transform: translateY(-6px) scale(1.006);
  border-color: var(--ryven-relic-emerald-dim);
  box-shadow: 0 32px 76px rgba(0, 0, 0, 0.56);
}

.hc-wiki-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hc-wiki-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 900ms var(--ryven-ease-out-quart);
}

.hc-wiki-card:hover .hc-wiki-card__media img,
.hc-wiki-card:focus-visible .hc-wiki-card__media img {
  transform: scale(1.06);
}

.hc-wiki-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(178deg, rgba(4, 9, 8, 0.12) 0%, rgba(4, 9, 8, 0.62) 45%, rgba(4, 9, 8, 0.96) 100%);
}

.hc-wiki-card__body {
  position: relative;
  z-index: 1;
  padding: 26px 28px 28px;
}

.hc-wiki-card__title {
  margin: 0 0 8px;
  font-family: var(--ryven-font-display);
  font-size: var(--ryven-text-2xl);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-bone);
  letter-spacing: 0.03em;
}

.hc-wiki-card__desc {
  margin: 0 0 var(--ryven-space-md);
  max-width: 46ch;
  font-size: var(--ryven-text-sm);
  color: var(--ryven-bone-muted);
  line-height: 1.62;
}

.hc-wiki-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ryven-relic-emerald);
  transition: gap 200ms ease;
}

.hc-wiki-card:hover .hc-wiki-card__cta {
  gap: 12px;
}

/* ═══ Community ═══ */
.hc-community-emblem {
  width: 112px;
  height: 112px;
  margin-bottom: var(--ryven-space-lg);
  opacity: 0.94;
}

.hc-community-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--ryven-space-md);
}

/* ═══ Reveal animations ═══ */
.hc-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 680ms var(--ryven-ease-out-quart), transform 680ms var(--ryven-ease-out-quart);
}

.hc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hc-wiki-card.hc-reveal {
  transition-delay: calc(var(--i) * 80ms);
}

/* ═══ Performance ═══
   The homepage is a very long scroll. content-visibility lets the browser skip
   layout and paint for any scene that is off screen, which is most of the page
   at any moment. The intrinsic size keeps scrollbar length stable. */
.hc-scene {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ═══ Responsive ═══ */
/* System grid: cell size shrinks, spans are preserved */
@media (max-width: 1199px) {
  .hc-realm {
    grid-template-columns: 1fr 1fr;
  }

  .hc-realm__intro {
    grid-column: 1 / -1;
  }

  .hc-realm__cta {
    align-self: flex-start;
  }
}

@media (max-width: 860px) {
  .hc-realm {
    grid-template-columns: 1fr;
  }

  .hc-realm__intro {
    grid-column: auto;
  }
}

@media (max-width: 991px) {
  .hc-scene {
    background-attachment: scroll;
  }

  .hc-latest {
    min-height: 400px;
  }
}

@media (max-width: 767px) {
  .hc-scene__content {
    padding: 84px 5% 68px;
  }

  .hc-title {
    font-size: clamp(2rem, 8.4vw, 2.75rem);
  }

  .hc-news-grid,
  .hc-wiki-grid {
    grid-template-columns: 1fr;
  }

  .hc-wiki-card {
    min-height: 280px;
  }

  /* Art wall: a touch wider on small screens, where 86% leaves thin slivers */
  .hc-system-wall {
    gap: 18px;
  }

  .hc-system-frame {
    width: 94vw;
  }

  .hc-news-card__media {
    aspect-ratio: 16 / 10;
  }

  .hc-latest {
    min-height: 340px;
  }

  .hc-scene__content--realm {
    padding-inline: 16px;
  }

  .hc-realm__intro {
    padding: var(--ryven-space-lg) var(--ryven-space-md);
  }

  .hc-rankings-list li {
    grid-template-columns: 34px 54px 1fr;
    gap: 2px 12px;
    min-height: 62px;
    padding: 8px 10px;
  }

  .hc-rankings-list__crest {
    width: 54px;
    height: 54px;
  }

  .hc-rankings-list__outfit,
  .hc-rankings-list__logo {
    width: 46px;
    height: 46px;
  }

  .hc-rankings-list__name {
    font-size: var(--ryven-text-base);
  }

  .hc-rankings-panel__head {
    padding: 16px 16px 14px;
  }

  .hc-community-emblem {
    width: 84px;
    height: 84px;
  }

  .hc-community-actions {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }

  .hc-community-actions .btn {
    width: 100%;
  }
}

/* ═══ No-JS fallback ═══ */
@media (scripting: none) {
  .hc-reveal,
  .hc-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══ First Release — launch slideshow ═══ */
.hc-scene--launch {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(59, 143, 99, 0.08), transparent 60%),
    radial-gradient(900px 500px at 50% 115%, rgba(199, 176, 106, 0.06), transparent 60%),
    var(--ryven-void-black, #050807);
}

.hc-scene--launch .hc-section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hc-eyebrow--gold {
  color: var(--ryven-gold);
}

.hc-scene--launch .hc-section-foot {
  gap: var(--ryven-space-md);
  flex-wrap: wrap;
}

.hc-slider {
  position: relative;
  width: min(760px, 100%);
  margin: 0 auto;
}

.hc-slider__viewport {
  position: relative;
  border-radius: var(--ryven-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ryven-border-dim);
  box-shadow: var(--ryven-shadow-inset), var(--ryven-shadow-lg);
  background: var(--ryven-shadow-green);
}

.hc-slide {
  margin: 0;
  position: relative;
}

.hc-slide[hidden] {
  display: none;
}

.hc-slide__media {
  display: block;
  line-height: 0;
}

.hc-slide__media img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.hc-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(14px, 3vw, 26px);
  background: linear-gradient(to top, rgba(5, 8, 7, 0.92) 0%, rgba(5, 8, 7, 0.55) 55%, transparent 100%);
  text-align: left;
  pointer-events: none;
}

.hc-slide__count {
  font-size: var(--ryven-text-xs);
  letter-spacing: 0.18em;
  color: var(--ryven-gold);
  font-variant-numeric: tabular-nums;
}

.hc-slide__title {
  font-family: var(--ryven-font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.04em;
  color: #fff;
}

.hc-slide__desc {
  font-size: var(--ryven-text-sm);
  color: var(--ryven-bone-muted);
  max-width: 46ch;
}

.hc-slide__cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 18px;
  background: var(--ryven-relic-emerald-dim);
  border: 1px solid var(--ryven-relic-emerald);
  border-radius: var(--ryven-radius-md);
  color: var(--ryven-bone);
  font-size: var(--ryven-text-sm);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform var(--ryven-transition-fast), box-shadow var(--ryven-transition-fast), background var(--ryven-transition-fast);
}

.hc-slide__cta:hover {
  background: var(--ryven-relic-emerald);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(59, 143, 99, 0.45);
}

.hc-slide__cta:focus-visible {
  outline: 2px solid var(--ryven-relic-emerald);
  outline-offset: 3px;
}

/* Standalone First Release poster (after the slideshow) */
.hc-launch-poster {
  position: relative;
  width: min(760px, 100%);
  margin: var(--ryven-space-xl) auto 0;
  border-radius: var(--ryven-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ryven-border-dim);
  box-shadow: var(--ryven-shadow-inset), var(--ryven-shadow-lg);
  background: var(--ryven-shadow-green);
}

.hc-launch-poster img {
  display: block;
  width: 100%;
  height: auto;
}

.hc-launch-poster__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(12px, 2.5vw, 20px);
  background: linear-gradient(to top, rgba(5, 8, 7, 0.92) 0%, rgba(5, 8, 7, 0.5) 60%, transparent 100%);
  font-family: var(--ryven-font-display);
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.06em;
  color: var(--ryven-gold);
  text-align: center;
}

.hc-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ryven-border-dim);
  background: rgba(5, 8, 7, 0.72);
  color: var(--ryven-bone);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--ryven-transition-fast), box-shadow var(--ryven-transition-fast), transform var(--ryven-transition-fast);
}

.hc-slider__arrow:hover {
  background: rgba(5, 8, 7, 0.95);
  box-shadow: 0 0 18px rgba(59, 143, 99, 0.35);
}

.hc-slider__arrow--prev { left: 12px; }
.hc-slider__arrow--next { right: 12px; }

.hc-slider__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--ryven-space-md);
}

.hc-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ryven-border-active, rgba(201, 168, 106, 0.5));
  background: transparent;
  cursor: pointer;
  transition: background var(--ryven-transition-fast), transform var(--ryven-transition-fast);
}

.hc-slider__dot:hover { transform: scale(1.25); }

.hc-slider__dot.is-active {
  background: var(--ryven-gold);
  border-color: var(--ryven-gold);
}

.hc-slider__arrow:focus-visible,
.hc-slider__dot:focus-visible {
  outline: 2px solid var(--ryven-relic-emerald);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .hc-slider__arrow {
    width: 38px;
    height: 38px;
  }
  .hc-slider__arrow--prev { left: 8px; }
  .hc-slider__arrow--next { right: 8px; }
  .hc-slide__desc { display: none; }
}

/* ═══ First Release — announcement article ═══ */
.hc-scene--article {
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(59, 143, 99, 0.06), transparent 60%),
    var(--ryven-void-black, #050807);
}

.hc-scene__content--article {
  max-width: 860px;
  margin: 0 auto;
}

.fr-article {
  text-align: center;
  line-height: 1.75;
  color: var(--ryven-bone);
  font-size: var(--ryven-text-base);
}

.fr-article .fr-hero {
  width: 100%;
  max-width: 620px;
  border-radius: var(--ryven-radius-lg);
  border: 1px solid var(--ryven-border-dim);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.fr-article .fr-img {
  display: block;
  width: auto;
  max-width: min(560px, 100%);
  border-radius: var(--ryven-radius-md);
  border: 1px solid var(--ryven-border-dim);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  margin: var(--ryven-space-md) auto 0;
}

.fr-article .fr-img--wide {
  max-width: min(680px, 100%);
}

.fr-article .fr-title {
  font-family: var(--ryven-font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: var(--ryven-weight-black);
  letter-spacing: 0.08em;
  margin: var(--ryven-space-md) 0 0;
  color: var(--ryven-gold);
}

.fr-article .fr-tagline {
  font-size: var(--ryven-text-sm);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.05em;
  margin: var(--ryven-space-xs) 0;
  color: var(--ryven-bone);
}

.fr-article .fr-pillars {
  font-size: var(--ryven-text-base);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-relic-emerald);
  margin: var(--ryven-space-sm) 0;
  letter-spacing: 0.04em;
}

.fr-article .fr-date {
  font-size: var(--ryven-text-base);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-blood-red, #C0392B);
  margin: var(--ryven-space-sm) 0;
}

.fr-article .fr-links {
  margin: var(--ryven-space-md) 0 var(--ryven-space-lg);
}

.fr-article .fr-link-gold {
  font-size: 1.25em;
  font-weight: var(--ryven-weight-black);
  color: var(--ryven-gold);
  text-decoration: none;
}

.fr-article .fr-link-discord {
  font-weight: var(--ryven-weight-bold);
  color: #5865F2;
  text-decoration: none;
}

.fr-article .fr-link-gold:hover,
.fr-article .fr-link-discord:hover {
  text-decoration: underline;
}

.fr-article .fr-hr {
  border: 0;
  border-top: 1px solid var(--ryven-border-dim);
  margin: clamp(2rem, 5vw, 3.5rem) 0;
}

.fr-article .fr-h2 {
  font-family: var(--ryven-font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: var(--ryven-weight-bold);
  color: var(--ryven-gold);
  letter-spacing: 0.05em;
  margin: var(--ryven-space-lg) 0 var(--ryven-space-md);
}

.fr-article .fr-p {
  text-align: left;
  color: var(--ryven-bone-muted);
  margin: var(--ryven-space-sm) auto;
  max-width: 68ch;
}

.fr-article .fr-p strong {
  color: var(--ryven-bone);
}

.fr-article .fr-list {
  text-align: left;
  display: inline-block;
  margin: var(--ryven-space-sm) auto;
  padding-left: 1.4em;
  font-weight: var(--ryven-weight-semibold);
}

.fr-article .fr-list li {
  margin: 4px 0;
}

.fr-article .fr-green { color: var(--ryven-relic-emerald); }
.fr-article .fr-red { color: #d0625a; }
.fr-article .fr-purple { color: #b07fd4; }
.fr-article .fr-gold { color: var(--ryven-gold); }

/* ═══ First Release — in-game screenshots grid ═══ */
.fr-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ryven-space-lg);
  margin-top: var(--ryven-space-lg);
  text-align: left;
}

.fr-shot {
  margin: 0;
  background: var(--ryven-shadow-green);
  border: 1px solid var(--ryven-border-dim);
  border-radius: var(--ryven-radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.fr-shot--wide {
  grid-column: 1 / -1;
}

.fr-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.fr-shot figcaption {
  padding: 10px 14px;
  font-size: var(--ryven-text-sm);
  color: var(--ryven-bone-muted);
  line-height: 1.5;
  border-top: 1px solid var(--ryven-border-dim);
}

.fr-shot figcaption strong {
  letter-spacing: 0.03em;
}

/* ═══ First Release — inline section media (screenshots & animated GIFs) ═══ */
.fr-article .fr-media {
  margin: var(--ryven-space-lg) auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(560px, 100%);
  background: var(--ryven-shadow-green);
  border: 1px solid var(--ryven-border-dim);
  border-radius: var(--ryven-radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.fr-article .fr-media--wide {
  max-width: min(680px, 100%);
}

.fr-article .fr-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.fr-article .fr-media figcaption {
  padding: 10px 14px;
  font-size: var(--ryven-text-sm);
  color: var(--ryven-bone-muted);
  line-height: 1.5;
  border-top: 1px solid var(--ryven-border-dim);
  text-align: center;
}

.fr-article .fr-media figcaption strong {
  letter-spacing: 0.03em;
}

.fr-article .fr-media .fr-anim {
  display: inline-block;
  font-size: 0.72em;
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.08em;
  color: var(--ryven-gold);
  border: 1px solid var(--ryven-gold);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 6px;
  vertical-align: 1px;
}

@media (max-width: 640px) {
  .fr-shots {
    grid-template-columns: 1fr;
  }
}

.fr-article .fr-statement {
  font-size: 1.1em;
  font-weight: var(--ryven-weight-bold);
  margin: var(--ryven-space-md) auto;
  max-width: 46ch;
}

.fr-article .fr-more {
  line-height: 1.9;
}

.fr-article .fr-closer {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: var(--ryven-weight-black);
  color: #d0625a;
  line-height: 1.6;
  margin: var(--ryven-space-lg) 0;
}

.fr-article .fr-bigdate {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: var(--ryven-weight-black);
  margin: var(--ryven-space-xs) 0;
  color: var(--ryven-bone);
}

.fr-article .fr-bigtime {
  font-size: 1.15em;
  font-weight: var(--ryven-weight-bold);
  margin: var(--ryven-space-xs) 0;
  color: var(--ryven-bone);
}

.fr-article .fr-welcome {
  font-family: var(--ryven-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: var(--ryven-weight-black);
  color: var(--ryven-gold);
  letter-spacing: 0.06em;
  margin-top: var(--ryven-space-lg);
}

@media (max-width: 640px) {
  .fr-article .fr-p {
    text-align: center;
  }
  .fr-article .fr-list {
    display: block;
    text-align: center;
    list-style-position: inside;
    padding-left: 0;
  }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .hc-scene {
    background-attachment: scroll !important;
  }

  .hc-slider__arrow,
  .hc-slider__dot {
    transition: none !important;
  }

  .hc-reveal,
  .hc-reveal.is-visible,
  .hc-wiki-card,
  .hc-wiki-card:hover,
  .hc-news-card,
  .hc-news-card:hover,
  .hc-latest__media img,
  .hc-latest:hover .hc-latest__media img,
  .hc-wiki-card__media img,
  .countdown__value.is-ticking {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ═══ Progression features: Stage System & Catch-Up EXP ═══ */
.hc-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--ryven-space-md), 2.4vw, var(--ryven-space-xl));
}

.hc-feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hc-panel);
  border: 1px solid var(--hc-line);
  border-top: 2px solid var(--ryven-relic-emerald);
  border-radius: var(--ryven-radius-md);
  box-shadow: var(--ryven-shadow-md);
}

.hc-feature__media {
  position: relative;
  height: clamp(150px, 16vw, 210px);
  border-bottom: 1px solid var(--hc-line);
  background: #050807;
}

.hc-feature__media--art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.88;
}

.hc-feature__media--chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--ryven-space-sm);
  padding: var(--ryven-space-lg) var(--ryven-space-xl) var(--ryven-space-md);
  background: radial-gradient(ellipse 70% 90% at 15% 100%, rgba(59, 143, 99, 0.2), transparent 70%), #050807;
}

.hc-catchup-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  border-bottom: 1px solid var(--hc-line-strong);
}

.hc-catchup-bars > span {
  flex: 1;
  height: var(--h, 0);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--ryven-relic-emerald), rgba(59, 143, 99, 0.35));
}

.hc-catchup-bars > span.is-off {
  height: 2px;
  background: var(--ryven-aged-iron);
}

.hc-catchup-axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--ryven-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ryven-aged-iron);
}

.hc-feature__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(var(--ryven-space-lg), 2.6vw, var(--ryven-space-xl));
}

.hc-feature__kicker {
  margin: 0 0 var(--ryven-space-xs);
  font-size: var(--ryven-text-xs);
  font-weight: var(--ryven-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ryven-upgrade-gold);
}

.hc-feature__title {
  margin: 0 0 var(--ryven-space-sm);
  font-family: var(--ryven-font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: var(--ryven-weight-bold);
  line-height: 1.1;
  color: var(--ryven-bone);
}

.hc-feature__desc {
  margin: 0 0 var(--ryven-space-md);
  max-width: 60ch;
  color: var(--ryven-bone-muted);
  line-height: 1.6;
}

.hc-feature__list {
  flex: 1;
  margin: 0 0 var(--ryven-space-lg);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--ryven-space-sm);
}

.hc-feature__list li {
  position: relative;
  padding-left: 1.4em;
  color: var(--ryven-bone-muted);
  line-height: 1.55;
}

.hc-feature__list li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--ryven-relic-emerald);
}

.hc-feature__list strong {
  color: var(--ryven-bone);
}

.hc-systems-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ryven-space-sm);
  margin: clamp(var(--ryven-space-xl), 4vw, var(--ryven-space-2xl)) 0 0;
  padding: 0;
  list-style: none;
}

.hc-systems-list__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ryven-space-sm);
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--hc-line);
  border-radius: 999px;
  background: rgba(6, 15, 13, 0.7);
  color: var(--ryven-bone);
  font-size: var(--ryven-text-sm);
  font-weight: var(--ryven-weight-semibold);
  text-decoration: none;
  transition: border-color var(--ryven-transition-fast), color var(--ryven-transition-fast);
}

.hc-systems-list__item i {
  color: var(--ryven-relic-emerald);
}

a.hc-systems-list__item:hover,
a.hc-systems-list__item:focus-visible {
  border-color: var(--ryven-relic-emerald);
  color: var(--ryven-bone);
}

@media (max-width: 860px) {
  .hc-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hc-systems-list {
    justify-content: flex-start;
  }

  .hc-feature__body .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-systems-list__item {
    transition: none;
  }
}

/* Single feature card (Catch-Up EXP card hidden): keep it centred, not half-width. */
.hc-feature-grid--single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}