/* ==========================================================================
   Ashfall: dark, burnt. Material: charred paper and blackened iron.
   Signature: drifting smoke over the hero, lit from below by the fire.
   Shape: the elongated hexagon (pointed at both ends, like a forged plate) on buttons, tags and inputs.
   The hanging feature banners keep their pennant notch: they are banners.
   Seams between sections are burnt edges with an ember rim.
   core.css (shared) is drawn with the --gold-* family, which here means ember.
   ========================================================================== */

:root {
  /* accent family. "gold" is only a name: here it is ember orange */
  --gold: #e8642a;
  --gold-deep: #a63d12;
  --gold-text: #ff9a4d;
  --gold-h1: #ff8a45;
  --gold-light: #ff9a4d;
  --gold-warm: #ffb070;
  --gold-shine: #ffc58f;
  --gold-pale: #ffe2c8;
  --gold-bronze: #c2521c;
  --gold-bronze-dark: #7d2d0b;
  --gold-rgb: 232, 100, 42;
  --gold-h1-rgb: 255, 138, 69;
  --gold-deep-rgb: 166, 61, 18;
  --gold-light-rgb: 255, 154, 77;

  --char: #0d0b0a;        /* page */
  --char-2: #15110f;      /* raised panels */
  --char-3: #1d1815;
  --bone: #f0e6da;        /* headings */
  --ash: #c9beb4;         /* body text */
  --ash-dim: #8f857c;

  /* tokens core.css reads */
  --header-bg: #1a1512;
  --panel-line: rgba(255, 138, 69, 0.28);
  --ink: #f0e6da;
  --ink-dim: #cfc4b9;

  --font-display: "IM Fell English SC", ui-serif, Georgia, serif;
  --font-numeral: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;

  --container: 1200px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --tail: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--char); }
body { margin: 0; background: var(--char); color: var(--ash); font-family: var(--font-body); font-size: 1.02rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; line-height: 1.1; color: var(--bone); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold-h1); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- hexagon buttons ---------- */
.btn-gold-sm, .btn-gold-lg, .btn-ghost-sm, .btn-ghost-lg {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font: 700 0.84rem var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%);
}
.btn-gold-sm, .btn-ghost-sm { --tail: 9px; min-height: 40px; padding: 0 calc(20px + var(--tail)); }
.btn-gold-lg, .btn-ghost-lg { min-height: 56px; padding: 0 calc(30px + var(--tail)); font-size: 0.92rem; }
.btn-gold-sm svg, .btn-gold-lg svg { width: 16px; height: 16px; }
.btn-gold-sm, .btn-gold-lg {
  color: #1a0c04;
  background: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold-h1) 48%, var(--gold-deep) 100%);
  background-size: 220% 100%;
  transition: background-position 0.45s var(--ease-out);
}
/* primary buttons carry a double frame: an outer ember line, a dark gap, then the gold plate */
.btn-gold-lg {
  --tail: 17px;
  min-height: 60px;
  padding: 0 calc(34px + var(--tail));
  background: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold-shine) 50%, var(--gold-deep) 100%);   /* the outer line */
}
.btn-gold-lg::before, .btn-gold-lg::after { content: ""; position: absolute; z-index: -1; }
.btn-gold-lg::before { inset: 2px; background: #120c08; clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%); }
.btn-gold-lg::after {
  inset: 5px;
  --tail: 13px;
  background: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold-h1) 48%, var(--gold-deep) 100%);
  background-size: 220% 100%;
  clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%);
  transition: background-position 0.45s var(--ease-out);
}
.btn-ghost-sm, .btn-ghost-lg { color: var(--bone); background: rgba(var(--gold-h1-rgb), 0.55); }
.btn-ghost-sm::before, .btn-ghost-lg::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: rgba(13, 11, 10, 0.94);
  clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%);
  transition: background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-gold-sm:hover { background-position: 100% 0; }
  .btn-gold-lg:hover::after { background-position: 100% 0; }
  .btn-ghost-sm:hover::before, .btn-ghost-lg:hover::before { background: rgba(var(--gold-deep-rgb), 0.35); }
}
.eyebrow {
  --tail: 9px;
  display: inline-block;
  padding: 6px calc(16px + var(--tail));
  margin-bottom: 18px;
  font: 700 0.7rem var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(var(--gold-deep-rgb), 0.34);
  clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%);
}

/* download popup buttons take the template shape */
.dl-go { --tail: 9px; padding: 0 calc(16px + var(--tail)); border-radius: 0; clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%); }
.dl-badge { border-radius: 0; padding: 3px 12px; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }

/* ---------- header: nav left, logo centre, account right ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 104px; }
.main-nav { grid-column: 1; grid-row: 1; justify-self: start; display: flex; gap: 26px; }
.main-nav a, .main-nav .nav-menu-btn { position: relative; padding: 6px 0; font: 600 0.82rem var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); text-shadow: 0 1px 8px rgba(0,0,0,0.9); transition: color 0.15s ease; }
.main-nav a::after, .main-nav .nav-menu-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-h1); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.main-nav a:hover, .main-nav .nav-menu-btn:hover, .main-nav .nav-item.is-open .nav-menu-btn { color: var(--bone); }
.main-nav a:hover::after { transform: scaleX(1); }
.brand { grid-column: 2; grid-row: 1; }
.brand-logo { height: 84px; width: auto; filter: brightness(1.35) contrast(1.05) drop-shadow(0 0 14px rgba(var(--gold-h1-rgb), 0.35)) drop-shadow(0 2px 10px rgba(0,0,0,0.8)); }
.header-right { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 12px; }
.account-switch { display: flex; gap: 10px; }
@media (max-width: 980px) {
  .header-inner { display: flex; justify-content: space-between; height: 76px; }
  .brand { order: -1; }
  .brand-logo { height: 58px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .header-inner { height: 64px; }
  .brand-logo { height: 48px; }
}

/* ---------- hero: text left, character right ---------- */
.hero { position: relative; overflow: hidden; min-height: min(100vh, 960px); display: flex; align-items: center; padding: 150px 0 250px; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(13,11,10,0.92) 0, rgba(13,11,10,0.55) 110px, rgba(13,11,10,0) 300px),
    linear-gradient(0deg, var(--char) 0, rgba(13,11,10,0.85) 110px, rgba(13,11,10,0) 360px),
    linear-gradient(90deg, rgba(13,11,10,0.94) 0, rgba(13,11,10,0.72) 36%, rgba(13,11,10,0.12) 68%, rgba(13,11,10,0) 100%);
}
.hero-grid { position: relative; z-index: 4; }
.hero-left { max-width: 640px; }
.hero-left h1 { margin-bottom: 26px; }
.h1-pre { display: block; margin-bottom: 4px; font-size: clamp(1rem, 1.8vw, 1.4rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-warm); }
.h1-main {
  display: block;
  font-size: clamp(3.4rem, 8.5vw, 7rem);
  margin-left: -0.04em;   /* optical alignment: the slanted A reads as indented next to the R above it */
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--bone) 0%, var(--gold-shine) 40%, var(--gold-h1) 72%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.6));
}
.hero-lede { max-width: 48ch; margin: 0 0 36px; font-size: 1.12rem; color: #ddd2c7; text-shadow: 0 1px 14px rgba(0,0,0,0.8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* the signature: three baked smoke layers drifting at different speeds, lit from below */
.smoke { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; z-index: 3; overflow: hidden; pointer-events: none; }
.smoke i { position: absolute; top: 0; left: 0; height: 100%; width: 200%; background-repeat: repeat-x; background-size: 50% 100%; will-change: transform; }
.smoke-a { background-image: url("assets/smoke-a.webp"); opacity: 0.85; animation: smoke-drift 140s linear infinite; }
.smoke-b { background-image: url("assets/smoke-b.webp"); opacity: 0.7; animation: smoke-drift 90s linear infinite reverse; }
.smoke-c { background-image: url("assets/smoke-c.webp"); opacity: 0.9; animation: smoke-drift 60s linear infinite; }
@keyframes smoke-drift { to { transform: translateX(-50%); } }
.hero.is-offscreen .smoke i { animation-play-state: paused; }
/* embers rising off the burning castle: a small canvas drawn from one pre-rendered glow sprite (see script.js) */
.sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sparks { display: none; } }
@media (prefers-reduced-motion: reduce) { .smoke i { animation: none; } }

/* war strip: servers, next siege, countdown */
.war-wrap { position: absolute; left: 0; right: 0; bottom: 60px; z-index: 5; margin: 0 auto; }
.war-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(24,19,16,0.9), rgba(13,11,10,0.94));
  border: 1px solid rgba(var(--gold-h1-rgb), 0.24);
  border-top: 2px solid var(--gold-h1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.war-strip .realm-servers { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; flex-direction: column; justify-content: center; padding: 8px 8px 8px 0; }
.war-strip .realm-server { padding: 8px 28px; }
.war-strip .realm-server + .realm-server::before { left: 28px; right: 28px; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-light-rgb), 0.5), transparent); }
.war-event { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 32px; border-left: 1px solid rgba(var(--gold-h1-rgb), 0.18); }
.war-label { font: 600 0.7rem var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash-dim); }
.war-value { font: 600 1.5rem/1.1 var(--font-numeral); letter-spacing: 0.04em; color: var(--bone); }
.countdown-wrap { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 32px; border-left: 1px solid rgba(var(--gold-h1-rgb), 0.18); }
.countdown { display: flex; gap: 22px; }
.unit { display: flex; flex-direction: column; align-items: flex-start; }
.num { font: 600 2.6rem/1 var(--font-numeral); font-variant-numeric: tabular-nums lining-nums; color: var(--gold-warm); }
.unit-label { font: 600 0.62rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash-dim); }
.num.is-flipping { animation: num-roll 0.45s var(--ease-out); }
@keyframes num-roll { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .num.is-flipping { animation: none; } }
@media (max-width: 980px) {
  /* small screens: text on top, the character in the clear band in the middle, the war strip under him */
  .hero { display: block; min-height: 0; padding: 120px 0 36px; }
  .hero-media img { object-position: 76% center; }
  .hero-scrim { background:
    linear-gradient(180deg, rgba(13,11,10,0.92) 0, rgba(13,11,10,0.84) 36%, rgba(13,11,10,0.2) 52%, rgba(13,11,10,0.18) 68%, rgba(13,11,10,0.94) 100%); }
  .war-wrap { position: relative; left: auto; right: auto; bottom: auto; margin-top: 270px; }
  .war-strip { grid-template-columns: 1fr; }
  .war-strip .realm-servers { flex-direction: row; padding: 4px; }
  .war-strip .realm-server + .realm-server::before { left: 0; top: 10px; bottom: 10px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(var(--gold-light-rgb), 0.5), transparent); }
  .war-event, .countdown-wrap { border-left: 0; border-top: 1px solid rgba(var(--gold-h1-rgb), 0.18); padding: 14px 20px; }
}
@media (max-width: 640px) {
  .hero { padding: 96px 0 30px; }
  .war-wrap { margin-top: 240px; }
  .war-strip .realm-servers { flex-direction: column; }
  .war-strip .realm-server + .realm-server::before { left: 16px; right: 16px; top: 0; bottom: auto; width: auto; height: 1px; }
  .num { font-size: 2.1rem; }
  .countdown { gap: 16px; }
  .hero-actions .btn-gold-lg, .hero-actions .btn-ghost-lg { flex: 1 1 100%; }
}

/* ---------- seams: burnt edges ---------- */
.burn { position: absolute; left: 0; right: 0; top: -62px; height: 120px; z-index: 6; pointer-events: none; background: url("assets/burnt-top.png") repeat-x; background-size: 1600px 80px; background-position: 0 20px; }
.features, .news, .roadmap, .rankings, .site-footer { position: relative; }

/* ---------- sections ---------- */
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); text-transform: uppercase; letter-spacing: 0.03em; }
.section-head p { margin: 16px 0 0; color: var(--ash); font-size: 1.06rem; }

/* features: four hanging banners */
.features { padding: 120px 0 110px; background: linear-gradient(180deg, var(--char) 0, #130f0d 50%, var(--char) 100%); }
.banners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.banner {
  position: relative;
  aspect-ratio: 3 / 4.3;
  background: var(--char-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
  overflow: hidden;
}
.banner-art, .banner-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-art { transition: transform 0.7s var(--ease-out); }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(13,11,10,0.97) 0, rgba(13,11,10,0.82) 36%, rgba(13,11,10,0.1) 68%, rgba(13,11,10,0.25) 100%); }
.banner::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--gold-deep), var(--gold-h1), var(--gold-deep)); }
.banner-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 24px 46px; }
.banner-body h3 { font-size: 1.55rem; margin-bottom: 10px; text-transform: uppercase; }
.banner-body p { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--ash); }
@media (hover: hover) and (pointer: fine) { .banner:hover .banner-art { transform: scale(1.06); } }
@media (max-width: 1080px) { .banners { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .banners { grid-template-columns: 1fr; } .banner { aspect-ratio: 4 / 4.4; } }

/* news: one lead story, two beside it */
.news { padding: 120px 0 120px; background: linear-gradient(180deg, var(--char) 0, #130f0d 50%, var(--char) 100%); }
.news-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 22px; }
.news-card { position: relative; display: grid; grid-template-columns: 200px 1fr; background: var(--char-2); border: 1px solid rgba(var(--gold-h1-rgb), 0.16); transition: border-color 0.2s ease; }
.news-card.is-lead { grid-row: 1 / 3; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.news-media { display: block; overflow: hidden; }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.news-card.is-lead .news-media { aspect-ratio: 16 / 9; }
.news-body { display: flex; flex-direction: column; padding: 22px 26px 24px; }
.news-date { --tail: 8px; align-self: flex-start; margin-bottom: 12px; padding: 3px calc(12px + var(--tail)); font: 600 0.78rem var(--font-numeral); letter-spacing: 0.14em; text-transform: uppercase; color: #1a0c04; background: linear-gradient(115deg, var(--gold-deep), var(--gold-h1)); clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%); }
.news-body h3 { font-size: 1.35rem; margin-bottom: 10px; }
.news-card.is-lead .news-body h3 { font-size: 2rem; text-transform: uppercase; }
.news-body h3 a { transition: color 0.15s ease; }
.news-body p { flex: 1; margin: 0 0 16px; font-size: 0.95rem; color: var(--ash); }
.news-more, .news-all { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 700 0.76rem var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }
.news-more svg, .news-all svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease-out); }
.news-all { margin-top: 30px; }
@media (hover: hover) and (pointer: fine) {
  .news-card:hover { border-color: rgba(var(--gold-h1-rgb), 0.5); }
  .news-card:hover .news-media img { transform: scale(1.05); }
  .news-body h3 a:hover { color: var(--gold-light); }
  .news-more:hover svg, .news-all:hover svg { transform: translateX(4px); }
}
@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .news-card.is-lead { grid-row: auto; }
}
@media (max-width: 560px) { .news-card { grid-template-columns: 1fr; } .news-media { aspect-ratio: 16 / 9; } }

/* roadmap: a campaign line across the page */
.roadmap { padding: 120px 0 130px; background: var(--char); }   /* no overflow:hidden here: it would clip the burnt seam that hangs above the section */
.roadmap-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.roadmap-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) hue-rotate(-12deg); }
.roadmap-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--char) 0, rgba(13,11,10,0.86) 30%, rgba(13,11,10,0.9) 70%, var(--char) 100%); }
.roadmap-inner { position: relative; z-index: 1; }

/* The campaign line is built from short segments, one per stage: each runs from its own medallion to the next,
   behind the medallions, and burns across when its stage lights. Nothing sticks out before the first stage or
   after the last one, and nothing is drawn over the art. */
.stages { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stage { position: relative; }
.stage:not(:last-child)::before,
.stage:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 66px;                        /* the medallion's centre */
  top: 65px;
  width: calc(100% + 28px);          /* to the next medallion's centre: column + gap */
  height: 2px;
}
.stage:not(:last-child)::before { background: repeating-linear-gradient(90deg, rgba(var(--gold-h1-rgb), 0.3) 0 6px, transparent 6px 12px); }
.stage:not(:last-child)::after {
  z-index: 1;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-h1), var(--gold-shine));
  box-shadow: 0 0 12px rgba(var(--gold-h1-rgb), 0.65);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-out 0.25s;
}
.stage.is-lit:not(:last-child)::after { transform: scaleX(1); }

/* a diamond frame around the round medallion, with a node on each corner. The frame is a 132px box centred on the medallion. */
.stage-frame { position: absolute; left: 0; top: 0; width: 132px; height: 132px; z-index: 1; pointer-events: none; }
.stage-frame::before {
  content: "";
  position: absolute;
  left: 19px; top: 19px;
  width: 94px; height: 94px;
  border: 2px solid rgba(var(--gold-h1-rgb), 0.32);
  transform: rotate(45deg);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.stage-frame i {
  position: absolute;
  width: 10px; height: 10px;
  background: #1a1210;
  border: 2px solid rgba(var(--gold-h1-rgb), 0.5);
  transform: rotate(45deg);
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}
.stage-frame i:nth-child(1) { left: 61px; top: -5px; }
.stage-frame i:nth-child(2) { left: 127px; top: 61px; }
.stage-frame i:nth-child(3) { left: 61px; top: 127px; }
.stage-frame i:nth-child(4) { left: -5px; top: 61px; }
.stage.is-lit .stage-frame::before { border-color: var(--gold-h1); box-shadow: 0 0 16px rgba(var(--gold-h1-rgb), 0.35), inset 0 0 16px rgba(var(--gold-h1-rgb), 0.18); }
.stage.is-lit .stage-frame i { background: var(--gold-shine); border-color: var(--gold-h1); box-shadow: 0 0 10px rgba(var(--gold-h1-rgb), 0.8); }

.stage-marker { position: relative; z-index: 2; width: 88px; height: 88px; margin: 22px 0 46px 22px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #3a2c24, #150f0b 72%); border: 2px solid rgba(var(--gold-h1-rgb), 0.3); overflow: hidden; }
.stage-marker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-marker::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(13,11,10,0.78); transition: opacity 0.6s ease; }
.stage.is-lit .stage-marker { border-color: var(--gold-h1); box-shadow: 0 0 0 4px rgba(var(--gold-h1-rgb), 0.14), 0 0 26px rgba(var(--gold-h1-rgb), 0.45); }
.stage.is-lit .stage-marker::after { opacity: 0; }
.stage-num { display: block; margin-bottom: 8px; font: 600 0.9rem var(--font-numeral); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); }
.stage h3 { font-size: 1.5rem; margin-bottom: 10px; text-transform: uppercase; }
.stage p { margin: 0; font-size: 0.95rem; color: var(--ash); }
@media (prefers-reduced-motion: reduce) { .stage:not(:last-child)::after { transition: none; } }
@media (max-width: 900px) {
  .stages { grid-template-columns: 1fr; gap: 20px; }
  .stage { display: grid; grid-template-columns: 132px 1fr; column-gap: 20px; align-content: start; }
  .stage-marker { grid-row: 1 / 4; }
  .stage > :not(.stage-marker):not(.stage-frame) { grid-column: 2; }
  .stage-num { align-self: end; margin-top: 30px; }
  /* segments turn vertical: from this medallion's centre down to the next one */
  .stage:not(:last-child)::before,
  .stage:not(:last-child)::after { left: 65px; top: 66px; width: 2px; height: calc(100% + 20px); }
  .stage:not(:last-child)::before { background: repeating-linear-gradient(180deg, rgba(var(--gold-h1-rgb), 0.3) 0 6px, transparent 6px 12px); }
  .stage:not(:last-child)::after { transform: scaleY(0); transform-origin: top; }
  .stage.is-lit:not(:last-child)::after { transform: scaleY(1); }
}

/* rankings: tabs + the war camp */
.rankings { padding: 120px 0 130px; background: linear-gradient(180deg, var(--char) 0, #130f0d 50%, var(--char) 100%); }
.rank-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 26px; align-items: start; }
.rank-panel { background: var(--char-2); border: 1px solid rgba(var(--gold-h1-rgb), 0.2); }
.tab { color: var(--ash-dim); }   /* shared look in core.css; the inactive tab sits a step dimmer here */
.tabpanel { padding: 8px 24px 20px; }
.rank-col-head { display: flex; justify-content: space-between; padding: 14px 4px 10px; font: 600 0.68rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash-dim); border-bottom: 1px solid rgba(255,255,255,0.06); }
.rank-row { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
#panel-clans .rank-row { grid-template-columns: 34px 1fr auto; }
.rank-medal { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 1rem var(--font-numeral); color: var(--ash-dim); background: rgba(255,255,255,0.05); }
.rank-gold .rank-medal { background: linear-gradient(135deg, #ffe58f, #c9922e); color: #2a1a04; }
.rank-silver .rank-medal { background: linear-gradient(135deg, #f0f0f0, #8a8a8a); color: #1b1b1b; }
.rank-bronze .rank-medal { background: linear-gradient(135deg, #e0a06c, #7a4a26); color: #1b1108; }
.rank-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(var(--gold-h1-rgb), 0.4); background: var(--char-3); }
.rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rank-name { display: block; font: 400 1.08rem var(--font-display); color: var(--bone); letter-spacing: 0.04em; }
.rank-clan { display: block; font-size: 0.82rem; color: var(--ash-dim); }
.rank-score { font: 600 1.5rem var(--font-numeral); color: var(--gold-warm); }
.castle-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.castle-seal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--gold-light); border: 1px solid rgba(var(--gold-h1-rgb), 0.4); background: var(--char-3); }
.castle-seal svg { width: 16px; height: 16px; }
.castle-name { font: 400 1.08rem var(--font-display); color: var(--bone); letter-spacing: 0.04em; }
.castle-owner { font: 600 0.92rem var(--font-body); color: var(--gold-light); }
.castle-owner.is-free { color: var(--ash-dim); font-weight: 400; }

.camp { background: var(--char-2); border: 1px solid rgba(var(--gold-h1-rgb), 0.2); overflow: hidden; }
.camp-media img { width: 100%; height: auto; aspect-ratio: 900 / 506; object-fit: cover; }   /* height:auto: the width/height attributes on the tag would otherwise fix the height and crop the sides */
.camp-body { padding: 24px 26px 28px; }
.camp-body h3 { font-size: 1.7rem; text-transform: uppercase; margin-bottom: 4px; }
.camp-sub { display: block; margin-bottom: 14px; font: 600 0.72rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.camp-body p { font-size: 0.96rem; }
.camp-body p strong { color: var(--gold-warm); }
.camp-perks { margin: 0 0 24px; }
.camp-perks li { position: relative; padding: 5px 0 5px 20px; font-size: 0.92rem; }
.camp-perks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; background: var(--gold-h1); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (max-width: 1000px) { .rank-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tabpanel { padding: 6px 14px 16px; } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease var(--reveal-delay, 0ms), transform 0.7s var(--ease-out) var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- footer ---------- */
.site-footer { padding: 110px 0 0; background: linear-gradient(180deg, var(--char) 0, #0a0807 45%); color: var(--ash-dim); }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 40px 44px; margin-bottom: 64px; background: linear-gradient(100deg, rgba(var(--gold-deep-rgb), 0.35), rgba(21,17,15,0.9) 55%); border: 1px solid rgba(var(--gold-h1-rgb), 0.3); border-left: 4px solid var(--gold-h1); }
.footer-cta h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); text-transform: uppercase; margin-bottom: 8px; }
.footer-cta p { margin: 0; max-width: 52ch; color: var(--ash); }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 54px; }
.footer-logo { width: 190px; height: auto; margin-bottom: 18px; }
.footer-brand p { max-width: 34ch; font-size: 0.92rem; }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.social { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ash); border: 1px solid rgba(var(--gold-h1-rgb), 0.3); transition: color 0.15s ease, border-color 0.15s ease; --tail: 9px; clip-path: polygon(var(--tail) 0, calc(100% - var(--tail)) 0, 100% 50%, calc(100% - var(--tail)) 100%, var(--tail) 100%, 0 50%); }
.social svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .social:hover { color: var(--gold-light); border-color: var(--gold-h1); } }
.footer-col h3 { margin-bottom: 16px; font: 700 0.74rem var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.92rem; color: var(--ash); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--bone); }
.footer-status dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-status dl > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-status dt { font-size: 0.86rem; color: var(--ash-dim); }
.footer-status dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--bone); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,0.07); font-size: 0.8rem; }
.footer-bottom p { margin: 0; max-width: 64ch; }
.footer-credit { display: inline-flex; align-items: center; gap: 6px; }
.footer-credit span:nth-child(2) { color: var(--gold-light); font-family: var(--font-display); letter-spacing: 0.06em; }
.footer-credit svg { width: 12px; height: 12px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-cta { padding: 28px 22px; } }