/* ==========================================================================
   Silverkeep: cold, moonlit. Material: brushed steel plate and polished silver.
   Signature: a band of light sweeping across the steel plates, baked in assets/sheen.webp (only transform moves).
   Shape: the riveted plate: a rectangle with a small radius, a bright top edge and a rivet in each corner.
   core.css (shared) is drawn with the --gold-* family, which here means ice blue.
   ========================================================================== */

:root {
  /* accent family. "gold" is only a name: here it is ice blue */
  --gold: #4f9fe0;
  --gold-deep: #1f5a94;
  --gold-text: #8cc8ff;
  --gold-h1: #6ab7f5;
  --gold-light: #9ad0ff;
  --gold-warm: #c4e2ff;
  --gold-shine: #e2f1ff;
  --gold-pale: #f0f8ff;
  --gold-bronze: #3f7fb8;
  --gold-bronze-dark: #1c4a78;
  --gold-rgb: 79, 159, 224;
  --gold-h1-rgb: 106, 183, 245;
  --gold-deep-rgb: 31, 90, 148;
  --gold-light-rgb: 154, 208, 255;

  --navy: #070d18;        /* page */
  --navy-2: #0c1526;      /* raised panels */
  --navy-3: #12203a;
  --frost: #eaf2fb;       /* headings */
  --steel: #b7c6d8;       /* body text */
  --steel-dim: #7f92a9;

  /* tokens core.css reads */
  --header-bg: #0a1220;
  --panel-line: rgba(154, 208, 255, 0.28);
  --ink: #eaf2fb;
  --ink-dim: #c3d0df;
  --bar-bg: rgba(7, 13, 24, 0.97);

  --font-display: "Marcellus SC", ui-serif, Georgia, serif;
  --font-numeral: "Oxanium", "Arial Narrow", sans-serif;
  --font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;

  --container: 1200px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --edge: rgba(200, 228, 255, 0.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); }
body { margin: 0; background: var(--navy); color: var(--steel); 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.03em; line-height: 1.1; color: var(--frost); }
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; } }

/* ---------- the plate: steel with a bright top edge, rivets in the corners, a sheen that passes over it ---------- */
.plate {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 36, 64, 0.5), rgba(7, 13, 24, 0.66)), url("assets/steel.jpg");
  border: 1px solid rgba(154, 208, 255, 0.2);
  border-top-color: var(--edge);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 38px rgba(0, 0, 0, 0.5);
}
.rivets::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, #e8f1fb 0 1px, #8194ad 2.2px, #2f3e54 4px, transparent 4.6px),
    radial-gradient(circle at 50% 38%, #e8f1fb 0 1px, #8194ad 2.2px, #2f3e54 4px, transparent 4.6px),
    radial-gradient(circle at 50% 38%, #e8f1fb 0 1px, #8194ad 2.2px, #2f3e54 4px, transparent 4.6px),
    radial-gradient(circle at 50% 38%, #e8f1fb 0 1px, #8194ad 2.2px, #2f3e54 4px, transparent 4.6px);
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: left 8px top 8px, right 8px top 8px, left 8px bottom 8px, right 8px bottom 8px;
}
/* the sweep: one soft band, on a slow loop, only while the plate is on screen. Its gradient is baked into the image. */
.plate::after {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  width: 70%;
  height: 120%;
  z-index: 4;
  pointer-events: none;
  background: url("assets/sheen.webp") center / 100% 100% no-repeat;
  opacity: 0;
  transform: translate3d(-130%, 0, 0);
  will-change: transform;
}
.plate.in-view::after { animation: sheen 11s linear infinite var(--sheen-delay, 0s); }
@keyframes sheen {
  0%   { transform: translate3d(-130%, 0, 0); opacity: 0.7; }
  20%  { transform: translate3d(190%, 0, 0);  opacity: 0.7; }
  21%, 100% { transform: translate3d(190%, 0, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .plate.in-view::after { animation: none; } }

/* ---------- buttons: riveted plates ---------- */
.btn-gold-sm, .btn-gold-lg, .btn-ghost-sm, .btn-ghost-lg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font: 700 0.82rem var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.btn-gold-lg, .btn-ghost-lg { min-height: 56px; padding: 0 36px; font-size: 0.9rem; }
.btn-gold-sm svg, .btn-gold-lg svg { width: 16px; height: 16px; }
.btn-gold-sm, .btn-gold-lg {
  color: #06121f;
  background: linear-gradient(180deg, #b6dcff 0%, #6ab7f5 46%, #3f86c8 100%);
  border-color: #d3eaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(10, 40, 80, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.btn-ghost-sm, .btn-ghost-lg { color: var(--frost); background: rgba(7, 13, 24, 0.6); border-color: rgba(154, 208, 255, 0.45); }
/* a rivet at each end of the larger buttons */
.btn-gold-lg::before, .btn-gold-lg::after, .btn-ghost-lg::before, .btn-ghost-lg::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f3f9ff, #6f86a3 60%, #2b3b52);
  opacity: 0.85;
}
.btn-gold-lg::before, .btn-ghost-lg::before { left: 12px; }
.btn-gold-lg::after, .btn-ghost-lg::after { right: 12px; }
@media (hover: hover) and (pointer: fine) {
  .btn-gold-sm:hover, .btn-gold-lg:hover { background: linear-gradient(180deg, #e2f1ff 0%, #9ad0ff 46%, #5aa5e6 100%); box-shadow: inset 0 1px 0 #fff, 0 0 26px rgba(var(--gold-h1-rgb), 0.45), 0 6px 18px rgba(0, 0, 0, 0.4); }
  .btn-ghost-sm:hover, .btn-ghost-lg:hover { background: rgba(var(--gold-deep-rgb), 0.4); border-color: var(--gold-light); }
}
.eyebrow {
  display: inline-block;
  padding: 5px 14px;
  margin-bottom: 18px;
  font: 700 0.7rem var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(var(--gold-deep-rgb), 0.3);
  border: 1px solid rgba(var(--gold-light-rgb), 0.35);
  border-radius: 2px;
}

/* download popup buttons take the template shape */
.dl-go { border-radius: 3px; }
.dl-badge { border-radius: 2px; }

/* ---------- header: logo left, nav centre, account right ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; background: linear-gradient(180deg, rgba(7, 13, 24, 0.94), rgba(7, 13, 24, 0)); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-light-rgb), 0.4) 20%, rgba(var(--gold-light-rgb), 0.4) 80%, transparent); }
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; height: 100px; }
.brand { grid-column: 1; grid-row: 1; }
.brand-logo { height: 76px; width: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8)); }
.main-nav { grid-column: 2; grid-row: 1; justify-self: center; display: flex; gap: 30px; }
.main-nav a, .main-nav .nav-menu-btn { position: relative; padding: 6px 0; font: 700 0.8rem var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); 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(--frost); }
.main-nav a:hover::after { transform: scaleX(1); }
.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-logo { height: 56px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .header-inner { height: 64px; }
  .brand-logo { height: 46px; }
}

/* ---------- hero: two layers of depth, text on a plate, a status bar along the bottom ---------- */
.chapter { position: relative; background: var(--navy); }
.hero { display: flex; align-items: center; min-height: 100vh; padding: 130px 0 150px; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform-origin: 60% 40%; will-change: transform; }
/* both layers are the same picture cut in two (background with the knight painted out, and the knight alone),
   so they line up exactly; each drifts at its own speed while you scroll (data-parallax, core.js) */
.hero-media .layer { position: absolute; left: 0; width: 100%; top: -12%; height: 124%; object-fit: cover; object-position: 78% center; }
.hero-media .layer-knight { z-index: 1; }
.knight-group { position: absolute; z-index: 1; left: 0; width: 100%; top: -12%; height: 124%; }
.knight-group .layer { top: 0; height: 100%; }
/* the outer half of the cloak is drawn again on this canvas, row by row, swaying outwards and back (script.js).
   It stays hidden until the first frame, and never shows with reduced motion: the still picture already has the cloak. */
.cloak { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.cloak.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cloak { display: none; } }
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 13, 24, 0.9) 0, rgba(7, 13, 24, 0.5) 110px, rgba(7, 13, 24, 0) 300px),
    linear-gradient(0deg, rgba(7, 13, 24, 0.9) 0, rgba(7, 13, 24, 0) 220px),
    linear-gradient(90deg, rgba(7, 13, 24, 0.78) 0, rgba(7, 13, 24, 0.4) 40%, rgba(7, 13, 24, 0) 70%);
}
/* while the next chapter slides over the hero, this layer darkens (opacity only, driven by script.js) */
.hero-cover { position: absolute; inset: 0; z-index: 3; background: var(--navy); opacity: 0; pointer-events: none; }
.hero-grid { position: relative; z-index: 4; width: 100%; }
.hero-left { max-width: 640px; padding: 38px 44px 42px; }
.hero-left > * { position: relative; z-index: 2; }
.hero-left h1 { margin-bottom: 22px; }
.h1-pre { display: block; margin-bottom: 8px; font-size: clamp(0.9rem, 1.5vw, 1.15rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-light); }
.h1-main {
  display: block;
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #d6e4f3 42%, #8fa6c0 70%, #d0deee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}
.hero-lede { max-width: 46ch; margin: 0 0 32px; font-size: 1.1rem; color: #d3deeb; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* status bar: servers, first siege, countdown. Edge to edge, docked to the bottom of the hero. */
.war-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.war-strip {
  --pad: max(28px, calc((100vw - var(--container)) / 2 + 28px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(12, 21, 38, 0.9), rgba(7, 13, 24, 0.97));
  border-top: 1px solid var(--edge);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
}
.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: 6px 28px 6px 0; }
.war-strip .realm-server + .realm-server::before { left: 0; right: 28px; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, rgba(var(--gold-light-rgb), 0.5), transparent); }
.war-event { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 32px; border-left: 1px solid rgba(var(--gold-light-rgb), 0.2); }
.war-label { font: 700 0.68rem var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel-dim); }
.war-value { font: 600 1.45rem/1.1 var(--font-numeral); letter-spacing: 0.03em; color: var(--frost); }
.countdown-wrap { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 0 14px 32px; border-left: 1px solid rgba(var(--gold-light-rgb), 0.2); }
.countdown { display: flex; gap: 22px; }
.unit { display: flex; flex-direction: column; align-items: flex-start; }
.num { font: 600 2.4rem/1 var(--font-numeral); font-variant-numeric: tabular-nums lining-nums; color: var(--gold-warm); }
.unit-label { font: 700 0.6rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel-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 knight in the clear band in the middle, the status bar under him */
  .hero { display: block; min-height: 0; padding: 110px 0 0; }
  .hero-media .layer { top: 0; height: 100%; object-position: 76% center; }
  .knight-group { top: 0; height: 100%; }
  .hero-scrim { background: linear-gradient(180deg, rgba(7, 13, 24, 0.92) 0, rgba(7, 13, 24, 0.8) 36%, rgba(7, 13, 24, 0.15) 52%, rgba(7, 13, 24, 0.15) 68%, rgba(7, 13, 24, 0.95) 100%); }
  .hero-left { padding: 28px 26px 30px; }
  .war-wrap { position: relative; margin-top: 270px; }
  .war-strip { grid-template-columns: 1fr; padding: 0 20px; }
  .war-strip .realm-servers { flex-direction: row; padding: 4px 0; }
  .war-strip .realm-server { padding: 8px 18px 8px 0; }
  .war-strip .realm-server + .realm-server::before { left: -10px; 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-light-rgb), 0.2); padding: 14px 0; }
}
@media (max-width: 640px) {
  .hero { padding: 92px 0 0; }
  .hero-left { padding: 24px 20px 26px; }
  .war-wrap { margin-top: 240px; }
  .war-strip .realm-servers { flex-direction: column; }
  .war-strip .realm-server + .realm-server::before { left: 0; 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%; }
}

/* ---------- sections ---------- */
.features, .news, .roadmap, .rankings, .site-footer { position: relative; }
.features::before, .news::before, .rankings::before, .site-footer::before {   /* a hairline of light where sections meet */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-light-rgb), 0.4) 15%, rgba(var(--gold-light-rgb), 0.4) 85%, transparent);
}
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); text-transform: uppercase; letter-spacing: 0.04em; }
.section-head p { margin: 16px 0 0; color: var(--steel); font-size: 1.06rem; }

/* features: four rows, art and text swapping sides */
.features { padding: 110px 0 110px; background: linear-gradient(180deg, var(--navy) 0, #0a1424 50%, var(--navy) 100%); }
.feature-rows { display: grid; gap: 26px; }
.feature-row { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 300px; }
.feature-row:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.feature-row:nth-child(even) .feature-art { order: 2; border-right: 0; border-left: 1px solid var(--edge); }
.feature-art { position: relative; overflow: hidden; border-right: 1px solid var(--edge); }
.feature-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.feature-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 13, 24, 0) 55%, rgba(7, 13, 24, 0.45)); }
.feature-row:nth-child(even) .feature-art::after { background: linear-gradient(270deg, rgba(7, 13, 24, 0) 55%, rgba(7, 13, 24, 0.45)); }
.feature-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 34px clamp(26px, 4vw, 56px); }
.feature-idx { margin-bottom: 10px; font: 600 0.9rem var(--font-numeral); letter-spacing: 0.24em; color: var(--gold-light); }
.feature-idx::before { content: "0"; }
.feature-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 12px; text-transform: uppercase; }
.feature-body p { margin: 0; max-width: 40ch; font-size: 1rem; line-height: 1.6; color: var(--steel); }
@media (hover: hover) and (pointer: fine) { .feature-row:hover .feature-art img { transform: scale(1.05); } }
@media (max-width: 800px) {
  .feature-row, .feature-row:nth-child(even) { grid-template-columns: 1fr; min-height: 0; }
  .feature-art { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--edge); }
  .feature-row:nth-child(even) .feature-art { order: 0; border-left: 0; }
  .feature-art::after, .feature-row:nth-child(even) .feature-art::after { background: linear-gradient(0deg, rgba(7, 13, 24, 0.5), rgba(7, 13, 24, 0) 50%); }
}

/* news: three equal rows, picture on the left */
.news { padding: 110px 0 110px; background: linear-gradient(180deg, var(--navy) 0, #0a1424 50%, var(--navy) 100%); }
.news-list { display: grid; gap: 22px; }
.news-row { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; transition: border-color 0.2s ease; }
.news-media { display: block; overflow: hidden; border-right: 1px solid var(--edge); }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.news-body { display: flex; flex-direction: column; justify-content: center; padding: 26px 32px; }
.news-date { align-self: flex-start; margin-bottom: 12px; padding: 2px 10px; font: 600 0.78rem var(--font-numeral); letter-spacing: 0.14em; text-transform: uppercase; color: #06121f; background: linear-gradient(180deg, #b6dcff, #5aa5e6); border-radius: 2px; }
.news-body h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: 10px; }
.news-body h3 a { transition: color 0.15s ease; }
.news-body p { margin: 0 0 14px; max-width: 60ch; font-size: 0.97rem; color: var(--steel); }
.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-row:hover { border-color: rgba(var(--gold-light-rgb), 0.55); }
  .news-row: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: 700px) { .news-row { grid-template-columns: 1fr; } .news-media { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--edge); } .news-body { padding: 22px 22px 24px; } }

/* roadmap: a vertical rail down the middle, cards alternating, the rail fills as you scroll through it */
.roadmap { padding: 110px 0 130px; }
.roadmap-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.roadmap-media img { width: 100%; height: 100%; object-fit: cover; }
.roadmap-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy) 0, rgba(7, 13, 24, 0.84) 24%, rgba(7, 13, 24, 0.9) 70%, var(--navy) 100%); }
.roadmap-inner { position: relative; z-index: 1; }
.timeline { position: relative; max-width: 980px; margin: 0 auto; display: grid; gap: 34px; }
.rail { position: absolute; left: 50%; top: 44px; bottom: 44px; width: 4px; margin-left: -2px; border-radius: 2px; background: linear-gradient(90deg, #4a5d76, #26344a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); overflow: hidden; }
.rail i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold-deep), var(--gold-h1), var(--gold-shine)); box-shadow: 0 0 12px rgba(var(--gold-h1-rgb), 0.7); transform: scaleY(var(--fill, 0)); transform-origin: top; will-change: transform; }
.stage { position: relative; display: grid; grid-template-columns: 1fr 88px 1fr; align-items: center; column-gap: 34px; }
.stage-marker {
  grid-column: 2;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  color: #8ea3bd;
  background: radial-gradient(circle at 38% 28%, #2a3b55, #0c1526 72%);
  border: 3px solid #71859f;
  box-shadow: 0 0 0 5px var(--navy), 0 0 0 7px rgba(113, 133, 159, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.18);
  transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.stage-marker svg { width: 40px; height: 40px; }
.stage.is-lit .stage-marker { color: var(--gold-shine); border-color: var(--gold-h1); box-shadow: 0 0 0 5px var(--navy), 0 0 0 7px rgba(var(--gold-h1-rgb), 0.5), 0 0 30px rgba(var(--gold-h1-rgb), 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.25); }
.stage-card { grid-column: 1; grid-row: 1; padding: 24px 28px 26px; opacity: 0.55; transform: translateX(-14px); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); }
.stage:nth-of-type(even) .stage-card { grid-column: 3; transform: translateX(14px); }
.stage.is-lit .stage-card { opacity: 1; transform: none; }
.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.45rem; margin-bottom: 10px; text-transform: uppercase; }
.stage p { margin: 0; font-size: 0.95rem; color: var(--steel); }
@media (prefers-reduced-motion: reduce) { .stage-card, .stage:nth-of-type(even) .stage-card { opacity: 1; transform: none; transition: none; } .rail i { transform: scaleY(1); } }
@media (max-width: 800px) {
  .rail { left: 44px; }
  .stage { grid-template-columns: 88px 1fr; column-gap: 20px; }
  .stage-marker { grid-column: 1; }
  .stage-card, .stage:nth-of-type(even) .stage-card { grid-column: 2; transform: translateX(14px); }
  .stage.is-lit .stage-card { transform: none; }
}

/* rankings: the table, then the great hall as a wide plate under it */
.rankings { padding: 110px 0 120px; background: linear-gradient(180deg, var(--navy) 0, #0a1424 50%, var(--navy) 100%); }
.rank-layout { display: block; }
.tab { color: var(--steel-dim); }   /* shared look in core.css; the inactive tab sits a step dimmer here */
.tabpanel { position: relative; z-index: 2; padding: 8px 24px 20px; }
.rank-panel .tabs { position: relative; z-index: 2; }
.rank-col-head { display: flex; justify-content: space-between; padding: 14px 4px 10px; font: 700 0.68rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel-dim); border-bottom: 1px solid rgba(154, 208, 255, 0.14); }
.rank-row { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid rgba(154, 208, 255, 0.08); }
#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 0.95rem var(--font-numeral); color: var(--steel-dim); background: rgba(154, 208, 255, 0.08); }
.rank-gold .rank-medal { background: linear-gradient(135deg, #ffe58f, #c9922e); color: #2a1a04; }
.rank-silver .rank-medal { background: linear-gradient(135deg, #f4f7fb, #8a98aa); color: #10161f; }
.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-light-rgb), 0.45); background: var(--navy-3); }
.rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rank-name { display: block; font: 400 1.08rem var(--font-display); color: var(--frost); letter-spacing: 0.05em; }
.rank-clan { display: block; font-size: 0.82rem; color: var(--steel-dim); }
.rank-score { font: 600 1.45rem 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(154, 208, 255, 0.08); }
.castle-seal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--gold-light); border: 1px solid rgba(var(--gold-light-rgb), 0.45); background: var(--navy-3); }
.castle-seal svg { width: 16px; height: 16px; }
.castle-name { font: 400 1.08rem var(--font-display); color: var(--frost); letter-spacing: 0.05em; }
.castle-owner { font: 700 0.92rem var(--font-body); color: var(--gold-light); }
.castle-owner.is-free { color: var(--steel-dim); font-weight: 400; }

.camp { display: grid; grid-template-columns: minmax(260px, 42%) 1fr; margin-top: 26px; overflow: hidden; }
.camp > * { position: relative; z-index: 2; }
.camp-media { border-right: 1px solid var(--edge); }
.camp-media img { width: 100%; height: 100%; object-fit: cover; }
.camp-body { padding: 30px 34px 32px; }
.camp-body h3 { font-size: 1.7rem; text-transform: uppercase; margin-bottom: 4px; }
.camp-sub { display: block; margin-bottom: 14px; font: 700 0.72rem var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.camp-body p { font-size: 0.98rem; }
.camp-body p strong { color: var(--gold-warm); }
.camp-perks { margin: 0 0 24px; columns: 2; column-gap: 28px; }
.camp-perks li { position: relative; padding: 5px 0 5px 20px; font-size: 0.92rem; break-inside: avoid; }
.camp-perks li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3f9ff, #6f86a3 60%, #2b3b52); }
@media (max-width: 800px) { .camp { grid-template-columns: 1fr; } .camp-media { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--edge); } .camp-perks { columns: 1; } }
@media (max-width: 560px) { .tabpanel { padding: 6px 14px 16px; } .camp-body { padding: 22px 22px 26px; } }

/* 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: 100px 0 0; background: linear-gradient(180deg, var(--navy) 0, #050a12 45%); color: var(--steel-dim); }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 40px 48px; margin-bottom: 64px; }
.footer-cta > * { position: relative; z-index: 2; }
.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(--steel); }
.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(--steel); border: 1px solid rgba(var(--gold-light-rgb), 0.35); border-radius: 3px; background: rgba(12, 21, 38, 0.8); transition: color 0.15s ease, border-color 0.15s ease; }
.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(--steel); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--frost); }
.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(154, 208, 255, 0.1); }
.footer-status dt { font-size: 0.86rem; color: var(--steel-dim); }
.footer-status dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 700; color: var(--frost); }
.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(154, 208, 255, 0.12); 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; } }

/* the fixed social dock lives on the left edge: on wide screens the status bar starts after it */
@media (min-width: 1340px) { .war-wrap { left: 84px; } }