/* ConquestReborn - the site theme.
   Single committed dark theme. The design tokens below are the launcher's, so the site and the
   app read as one product; if you change a colour here, change it there too.
   Palette: ink #0a0d16 ground, #101524 opaque cards, parchment #e9e4d6 text (never white), and
   gold as the only accent. Cinzel for headings, Alegreya Sans for body. */

:root {
  /* These are the LAUNCHER's tokens. The site and the app are one design system and must not
     drift apart; nothing here is rounded or "improved" - match the app exactly. */
  --bg: #0a0d16;                              /* window ground */
  --bg-panel: #101524;                        /* opaque card fill */
  --bg-raise: rgba(16, 21, 36, 0.533);        /* translucent panel: the rune shows through */
  --bg-field: #0b0f1c;                        /* input well */
  --bg-deep: #0b0f1c;
  --ink: #e9e4d6;                             /* parchment, never white */
  --muted: #9aa0b4;
  --muted-2: #9aa0b4;
  --gold: #c8a95e;
  --gold-bright: #f0d489;                     /* lit / hover / active */
  --gold-foot: #a8883f;                       /* the gradient foot, used once */
  --gold-deep: #8a6d2e;                       /* pressed */
  --gold-wash: rgba(200, 169, 94, 0.133);     /* every hover fill, and the progress track */
  --line: rgba(200, 169, 94, 0.22);           /* EVERY border in the product */
  --line-faint: rgba(200, 169, 94, 0.1);
  --line-hair: rgba(200, 169, 94, 0.22);
  --line-hair-2: rgba(200, 169, 94, 0.22);
  --discord: #5865f2;
  --discord-border: #6d78f4;
  --discord-press: #4752c4;
  --good: #57b26a;
  --bad: #d0655c;
  --unknown: #8a8f9f;
  --disabled-fill: #2a2d3a;
  --disabled-border: #3a3f52;
  --disabled-ink: #6d7286;
  --shadow: none;                             /* the launcher has no drop shadows at all */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Alegreya Sans", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; }
a { color: var(--gold-bright); }

h1, h2, h3, .logo-word {
  font-family: Cinzel, "Times New Roman", serif;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

code {
  font-family: Consolas, "IBM Plex Mono", monospace;
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
  padding: 1px 7px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-align: center;
  padding: 12px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  color: #241b06;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 6px 18px rgba(200, 169, 94, 0.25);
}
.btn-gold:hover { box-shadow: 0 0 0 1px var(--gold-bright), 0 6px 24px rgba(240, 212, 137, 0.4); }

.btn-ghost {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.03);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }

.btn-line {
  color: var(--gold-bright);
  border-color: var(--gold-deep);
  background: transparent;
}
.btn-line:hover { background: rgba(200, 169, 94, 0.1); }

.btn-big { font-size: 0.95rem; padding: 16px 38px; }

.btn-discord {
  background: var(--discord);
  color: #fff;
  border-color: #6d78f4;
}
.btn-discord:hover { box-shadow: 0 6px 20px rgba(88, 101, 242, 0.45); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 32px;
  background: rgba(10, 13, 22, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-faint);
}
.nav.scrolled { background: rgba(10, 13, 22, 0.96); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  text-decoration: none;
}
.logo-word { font-size: 1.02rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.logo-word em { font-style: normal; color: var(--gold); }

.nav-links {
  display: flex;
  gap: 26px;
  margin: 0 auto;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  transition: color 0.12s ease;
}
.nav-links a:hover { color: var(--gold-bright); }

/* The FEATURES dropdown. Markup: .nav-drop > button.nav-drop-btn + ul.nav-drop-menu (see FOUNDATION.md). js/main.js
   toggles .is-open and aria-expanded; without JS (html has no .js class) the menu opens on hover and keyboard focus.
   Up to the burger breakpoint the button is only a label and the five entries are always listed (see below). */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: Cinzel, Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: inherit;
  transition: color 0.12s ease;
}
.nav-drop-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.12s ease;
}
.nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn, .nav-drop:has([aria-current]) .nav-drop-btn { color: var(--gold-bright); }
.nav-drop.is-open .nav-drop-btn::after { transform: translateY(1px) rotate(225deg); }
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  z-index: 60;
  min-width: 310px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* hover bridge */
.nav-links .nav-drop-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 4px;
  color: var(--ink);
  font-family: "Alegreya Sans", "Segoe UI", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.nav-links .nav-drop-menu a:hover, .nav-links .nav-drop-menu a:focus-visible { background: var(--gold-wash); color: var(--gold-bright); text-decoration: none; }
.nav-links .nav-drop-menu a[aria-current="page"] { color: var(--gold-bright); }
.nav-drop.is-open .nav-drop-menu,
html:not(.js) .nav-drop:hover .nav-drop-menu,
html:not(.js) .nav-drop:focus-within .nav-drop-menu { display: block; }

/* Skip link: first thing in <body>, visible on focus only. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--bg);
  border-radius: 4px;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--bg); }

.nav-ctas { display: flex; gap: 12px; }
/* The signed-in account button (auth.js swaps LOG IN for the account name, up to 16 characters) is capped, so a
   long name can never push the one-row nav past the burger breakpoint. */
.nav-ctas .btn-ghost:not([data-auth]) {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-burger span { width: 24px; height: 2px; background: var(--gold); }

/* The burger menu up to 1200px. Measured 2026-10-09 with FEATURES, NEWS, ROADMAP, CHANGELOG, STATUS, LOG IN and
   PLAY FREE: the one-row nav needs 1007px signed out and 1057px signed in with the web fonts, 1040px and 1090px
   signed in without them (the account button is capped above), plus a desktop scrollbar of up to 17px; 1200px leaves
   about 90px for a wider fallback font. Narrower, it would wrap the buttons and then scroll sideways. The same number
   is BURGER_MAX in js/main.js: change both together, and re-measure when an entry is added to the nav. */
@media (max-width: 1200px) {
  .nav { flex-wrap: wrap; gap: 14px; padding: 12px 18px; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 14px;
    padding: 10px 4px 6px;
    border-top: 1px solid var(--line-faint);
  }
  .nav.open .nav-links { display: flex; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; }
  /* FEATURES is a plain label in the burger menu and its five entries are always listed under it. */
  .nav-drop { width: 100%; }
  .nav-drop-btn { color: var(--gold); cursor: default; pointer-events: none; }
  .nav-drop-btn::after { display: none; }
  .nav-drop .nav-drop-menu {
    display: block;
    position: static;
    min-width: 0;
    margin: 8px 0 0 4px;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-left: 1px solid var(--line-faint);
    border-radius: 0;
  }
  .nav-drop-menu::before { display: none; }
  .nav-links .nav-drop-menu a { padding: 8px 10px; }
  /* The open menu drops below the logo / PLAY FREE / burger row instead of pushing them down. */
  .nav-ctas { order: 2; margin-left: auto; }
  .nav-burger { order: 3; }
  .nav-links { order: 4; }
  .nav-burger { display: flex; }
}
/* LOG IN inside the open burger menu, phones only (the first row has no room for it there). main.js hides it once
   signed in, because the account button in the first row has then replaced LOG IN. */
.nav-login-m { display: none; }
@media (max-width: 559px) {
  .nav-links a.nav-login-m { display: block; color: var(--gold); }
  .nav-links a.nav-login-m[hidden] { display: none; }
}
/* On a phone the first row only has room for PLAY FREE and the burger, so LOG IN goes (the sign-in window's own tab
   and the home page's "Already have an account? Log in" line stay). The account button that replaces LOG IN once
   signed in always stays: auth.js drops data-auth on that swap. */
@media (max-width: 559px) {
  .nav-ctas .btn-ghost[data-auth] { display: none; }
  /* ... and the logo, PLAY FREE and the burger share one row down to 360px. */
  .nav { gap: 8px; }
  .logo-word { font-size: 0.92rem; }
  .nav-ctas .btn { padding: 8px 14px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 86vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-art {
  position: absolute;
  inset: 0;
  /* Hero mood: layered night-sky gradient. */
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(200, 169, 94, 0.28), transparent 55%),
    radial-gradient(70% 55% at 18% 20%, rgba(47, 76, 138, 0.35), transparent 70%),
    radial-gradient(60% 45% at 84% 14%, rgba(96, 52, 120, 0.28), transparent 70%),
    linear-gradient(180deg, #0d1120, #0a0d16 70%);
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 45%, transparent 40%, rgba(6, 8, 14, 0.75) 100%);
}
.hero-inner { position: relative; max-width: 860px; padding: 96px 24px; }
.hero-kicker {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  margin: 0 0 18px;
}
.hero-title {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 22px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.hero-sub {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 56ch;
  margin: 0 auto 34px;
}
.hero-ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero-note { margin-top: 26px; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; }

/* ---------- Community strip ---------- */
.strip { border-block: 1px solid var(--line-faint); background: var(--bg-panel); }
.strip-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.strip-text { margin: 0; color: var(--muted); }
.strip-text strong { color: var(--ink); }

/* ---------- Feature panels ---------- */
.features { max-width: 1160px; margin: 0 auto; padding: 40px 24px 20px; }

.panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  padding: 56px 0;
}
.panel-flip .panel-copy { order: 2; }
.panel-flip .panel-art { order: 1; }

.panel-kicker {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  margin: 0 0 10px;
}
.panel h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 16px; }
.panel p { color: var(--muted); margin: 0 0 24px; max-width: 54ch; }

/* This week's affixes, filled from the live realm status service. */
.affix-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
/* An author `display` beats the user-agent [hidden] rule, so the strip would
   stay visible with the attribute set. index.html has no [hidden] reset of its
   own, which is exactly where this bites. */
.affix-strip[hidden] { display: none; }

.preview-notice {
  margin: 0;
  padding: 9px 20px;
  text-align: center;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: #2a1d05;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-bottom: 1px solid var(--gold-deep);
}

.panel-note {
  color: var(--muted) !important;
  font-size: 0.88rem !important;
  font-style: italic;
  border-left: 2px solid var(--line);
  padding-left: 12px;
}
.affix-chip {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(200, 169, 94, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
}
.weekly-reset {
  color: var(--muted) !important;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin: 0 0 20px !important;
}
.weekly-reset:empty { display: none; }

.panel-art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  place-items: end start;
}

/* Placeholder art moods (replace with captures) */
.art-promise {
  background:
    radial-gradient(80% 90% at 70% 20%, rgba(200,169,94,0.13), transparent 60%),
    radial-gradient(100% 80% at 15% 100%, rgba(16,21,36,0.95), transparent 70%),
    linear-gradient(160deg, #101524, #0a0d16);
}
.art-advancement {
  background:
    radial-gradient(90% 80% at 30% 15%, rgba(200,169,94,0.16), transparent 60%),
    radial-gradient(80% 70% at 85% 90%, rgba(27,33,57,0.9), transparent 70%),
    linear-gradient(160deg, #141a2c, #0a0d16);
}
.art-client {
  background:
    radial-gradient(70% 60% at 20% 25%, rgba(240,212,137,0.12), transparent 65%),
    radial-gradient(90% 90% at 90% 85%, rgba(27,33,57,0.85), transparent 70%),
    linear-gradient(200deg, #131829, #0a0d16);
}
.art-honest {
  background:
    radial-gradient(85% 75% at 50% 10%, rgba(200,169,94,0.10), transparent 62%),
    radial-gradient(80% 80% at 10% 95%, rgba(16,21,36,0.9), transparent 70%),
    linear-gradient(140deg, #0f1422, #0a0d16);
}

@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; }
  .panel-flip .panel-copy { order: 1; }
  .panel-flip .panel-art { order: 2; }
}

/* ---------- Play block ---------- */
.play {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(200, 169, 94, 0.1), transparent 60%),
    var(--bg-panel);
  border-block: 1px solid var(--line-faint);
  text-align: center;
}
.play-inner { max-width: 1060px; margin: 0 auto; padding: 72px 24px; }
.play-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 6px; }
.play-sub { color: var(--gold); letter-spacing: 0.22em; font-size: 0.82rem; font-weight: 700; margin: 0 0 44px; }

.play-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
  margin: 0 0 40px;
  text-align: left;
}
.play-steps li {
  background: rgba(10, 13, 22, 0.6);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  padding: 22px 20px;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  color: var(--gold-bright);
  font-family: Cinzel, serif;
  font-weight: 700;
  margin-bottom: 12px;
}
.play-steps h3 { font-size: 1rem; margin: 0 0 8px; }
.play-steps p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.play-legal { color: var(--muted); font-size: 0.8rem; margin-top: 18px; }
.play-legal a { color: var(--muted); }

.play-steps-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }
.play-steps p em { color: var(--gold); font-style: normal; font-size: 0.85em; }

.manual-setup {
  max-width: 640px;
  margin: 0 auto 36px;
  text-align: left;
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  background: rgba(10, 13, 22, 0.5);
}
.manual-setup summary {
  cursor: pointer;
  padding: 14px 20px;
  color: var(--muted);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
.manual-setup summary:hover { color: var(--gold-bright); }
.manual-setup ol { margin: 0; padding: 4px 20px 18px 40px; color: var(--muted); font-size: 0.92rem; }
.manual-setup li { margin-bottom: 8px; }

.todo-flash { outline: 1px dashed var(--gold); outline-offset: 3px; }

@media (max-width: 960px) { .play-steps { grid-template-columns: repeat(2, 1fr); } .play-steps-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .play-steps { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
/* The card is a raised panel on a transparent section, so the section itself has to hold it off
   the Play block's bottom rule - with no padding here the card's top edge sat on that line. The
   bottom is smaller: Latest News brings its own 24px. */
.about { padding: 64px 24px 32px; }
.about-inner { max-width: 760px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.about h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 18px; }
.about p { color: var(--muted); margin: 0 0 18px; }
.about .btn { margin-top: 10px; }

/* ---------- News ---------- */
.news { max-width: 1160px; margin: 0 auto; padding: 24px 24px 88px; }
.news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.news-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.news-nav { display: flex; align-items: center; gap: 10px; }
.news-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gold-bright);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.news-btn:hover { background: rgba(200, 169, 94, 0.12); }
.news-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.news-all {
  margin-left: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.news-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(320px, 80vw);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
}
.news-card {
  scroll-snap-align: start;
  background: var(--bg-panel);
  border: 1px solid var(--line-faint);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.news-thumb {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: end start;
  border-bottom: 1px solid var(--line-faint);
}
.news-kind {
  align-self: start;
  margin: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  background: rgba(6, 8, 14, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.news-thumb { align-items: start; }

.news-card time {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding: 14px 18px 0;
  font-variant-numeric: tabular-nums;
}
.news-card h3 { font-size: 1.05rem; margin: 6px 0 0; padding: 0 18px; }
.news-card p { color: var(--muted); font-size: 0.92rem; margin: 10px 0 18px; padding: 0 18px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-faint); background: #080a11; }
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
  grid-template-areas: "links status" "brand brand";
  gap: 40px 56px;
}
.footer-brand { grid-area: brand; color: var(--gold); border-top: 1px solid var(--line-faint); padding-top: 24px; }
.footer-brand p { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; max-width: 78ch; }
.footer-brand .footer-tagline { color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: 0.9rem; letter-spacing: 0.08em; }

.footer-links { grid-area: links; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 32px; }
.footer-status { grid-area: status; }
.footer-links h4, .footer-status h4, .footer-h {
  font-family: Cinzel, serif;
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  margin: 0 0 12px;
}
.footer-links a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.footer-links a:hover { color: var(--gold-bright); }

.footer-status p { color: var(--muted); font-size: 0.92rem; margin: 0 0 8px; }
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 9px;
  background: var(--unknown);
}
.status-dot[data-status="online"] { background: var(--good); box-shadow: 0 0 8px rgba(87, 178, 106, 0.8); }
.status-dot[data-status="offline"] { background: var(--bad); }
.player-count {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid var(--line-faint);
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; grid-template-areas: "links" "status" "brand"; gap: 30px; }
}

/* ==========================================================================
   ConquestReborn additions
   ========================================================================== */

/* ---------- Hero: scroll cue ---------- */
.hero-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
}
.hero-scroll span {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(9px); }
}
.hero-title em {
  font-style: normal;
  color: var(--gold-bright);
  text-shadow: 0 0 34px rgba(240, 212, 137, 0.35);
}

/* ---------- Live realm bar ---------- */
.realmbar {
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  background:
    linear-gradient(180deg, rgba(200, 169, 94, 0.06), transparent 60%),
    var(--bg-panel);
}
/* Flex and centred, not a fixed grid. This was repeat(5, 1fr): five columns for what became
   three items, so they sat in the left-hand columns and the bar looked shifted. Centring the
   items means the count can change again without the layout caring. */
.realmbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 72px;
  text-align: center;
}
.realmbar-item { min-width: 160px; }
.realmbar-item { display: grid; gap: 4px; }
.realmbar-label {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-weight: 700;
}
.realmbar-value {
  font-family: Cinzel, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.realmbar-sub { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
/* On a phone the items wrap to one or two per row on their own; tighten the gap so two still
   fit side by side. (The old grid-column rules that lived here had nothing to act on once the
   bar became flex.) */
@media (max-width: 860px) {
  .realmbar-inner { gap: 16px 36px; }
}

/* ---------- Section heads (shared by class roster) ---------- */
.section-head {
  max-width: 780px;
  margin: 0 auto 46px;
  text-align: center;
  padding: 0 24px;
}
.section-kicker {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  margin: 0 0 12px;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  margin: 0 0 16px;
}
.section-sub { color: var(--muted); margin: 0; }

/* ---------- Class roster ---------- */
.classes { padding: 92px 0 84px; }
/* The archetype carousel.
   One card is the subject at a time; its neighbours sit either side, dimmed and slightly
   smaller, so they read as "there is more" rather than competing for attention.

   Built on scroll-snap rather than transforms, so it still works with JavaScript off: without
   js/main.js the track is simply a horizontal scroller and every card is legible. The active
   class is decoration on top of that, never the thing that makes it usable. */
.class-carousel {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
/* FLEX, not grid. With grid-auto-flow:column every child becomes a column sized by
   grid-auto-columns - including the ::before/::after spacers - so they could not be made
   narrow, and the first card could never reach the centre. Flex lets the card width and the
   end padding be set independently, which is what centring needs. */
.class-track {
  --card-w: min(420px, 74vw);
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Half the track minus half a card, so the FIRST and LAST cards can sit dead centre.
     Without this they stop at the edges and the highlight never lands on them. */
  padding: 26px calc(50% - (var(--card-w) / 2)) 22px;
  scrollbar-width: none;
}
.class-track::-webkit-scrollbar { display: none; }

.class-track > .class-card {
  flex: 0 0 var(--card-w);
  scroll-snap-align: center;
}

/* The de-emphasised state. Applied to every card, then removed from the active one, so a card
   is never left highlighted if the script stops running mid-scroll. */
.class-carousel .class-card {
  opacity: 0.38;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.class-carousel .class-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: var(--class-accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--class-glow);
}
.class-carousel .class-card:hover { transform: scale(0.92); }
.class-carousel .class-card.is-active:hover { transform: scale(1); }

/* Prev/next. Same shape as the news carousel's buttons so the site has one control, not two. */
.class-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  color: var(--gold);
  background: rgba(16, 21, 36, 0.86);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.class-arrow:hover { background: var(--gold-wash); border-color: var(--gold); }
.class-arrow[disabled] { opacity: 0.25; cursor: default; }
.class-arrow-prev { left: 2px; }
.class-arrow-next { right: 2px; }

.class-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.class-dot {
  width: 7px; height: 7px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.class-dot.is-active { background: var(--gold); border-color: var(--gold); }

@media (max-width: 640px) {
  /* Narrower card AND narrower outer padding. At 82vw inside the section's 24px gutters the
     neighbouring card was completely hidden on a 390px phone - the carousel then looks like a
     single static card and nobody swipes it. Checked at 360-640px: the neighbour stays visible. */
  .class-carousel { padding: 0 12px; }
  .class-track { --card-w: 70vw; gap: 12px; }
  .class-arrow { display: none; }   /* swipe is the control on touch */
}
/* Someone who has asked for less motion gets no scaling and no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  .class-carousel .class-card { transition: opacity 0.2s ease; transform: none; }
  .class-carousel .class-card.is-active,
  .class-carousel .class-card:hover { transform: none; }
}
.class-card {
  position: relative;
  padding: 22px 18px 20px;
  border: 1px solid var(--line-faint);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 70%), var(--bg-panel);
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.class-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--class-accent), transparent);
  opacity: 0.65;
}
.class-card:hover {
  transform: translateY(-3px);
  border-color: var(--class-accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--class-glow);
}
.class-emblem {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--class-accent);
  margin-bottom: 12px;
  filter: drop-shadow(0 0 10px var(--class-glow));
}
.class-emblem svg { width: 100%; height: 100%; }
.class-name {
  font-size: 1.06rem;
  margin: 0 0 2px;
  color: var(--class-accent);
}
.class-power {
  margin: 0 0 10px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.class-blurb {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  opacity: 0.82;
  line-height: 1.5;
}
.class-note {
  max-width: 760px;
  margin: 34px auto 0;
  padding: 0 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- Manual-setup details: prose variant ---------- */
.manual-setup p { margin: 10px 0 0; color: var(--muted); }

/* ==========================================================================
   Launcher parity
   Every value below is measured from the launcher's Assets/Theme.xaml and
   MainWindow.xaml so the site and the app read as one product. The launcher
   uses NO drop shadows, NO grey borders, NO pure white text and NO
   text-transform: Cinzel renders lowercase as small capitals by itself, and
   forcing uppercase destroys the cap/small-cap contrast that gives it the
   engraved look.
   ========================================================================== */

/* ---------- The ground: layered gradients + a vignette.
   The launcher's own comment for this is "no artwork" - the whole atmosphere
   is stacked gradients. (A tiled pattern layer between the vignette and
   the glow was removed on 2026-10-09: owner ruling 12, no shape mark.) */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 85% at 50% 45%, transparent 50%, rgba(10, 13, 22, 0.85) 100%),
    radial-gradient(ellipse 55% 70% at 88% 100%, rgba(200, 169, 94, 0.2) 0%, rgba(200, 169, 94, 0.078) 45%, rgba(200, 169, 94, 0) 100%),
    radial-gradient(ellipse 90% 100% at 22% 5%, #1b2139 0%, #101524 50%, #0a0d16 100%);
  background-size: auto, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

/* ---------- Type: Cinzel engraves, Alegreya Sans speaks ---------- */
h1, h2, h3, h4, .logo-word, .btn, .nav-links a,
.section-kicker, .panel-kicker, .hero-kicker, .realmbar-label, .class-power {
  font-family: Cinzel, Georgia, "Times New Roman", serif;
}
h1, h2, h3, h4, .btn, .logo-word, .nav-links a { text-transform: none; }
h1 { color: var(--ink); }
h2, h3, .section-kicker, .panel-kicker, .hero-kicker, .realmbar-label, .field-label, label {
  color: var(--gold);
}
code, pre, .mono { font-family: Consolas, "Courier New", monospace; }

/* ---------- Containers: translucent panel vs opaque card ---------- */
.class-card, .news-card, .play-steps li, .manual-setup {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}
.about-inner, .strip-inner {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.realmbar {
  background: var(--bg-raise);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  padding: 8px 20px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: none; }

.btn-gold {                       /* Theme.xaml ".btn-primary": hover brighter, press darker */
  background: var(--gold);
  border-color: var(--gold-bright);
  color: var(--bg);
  box-shadow: none;
}
.btn-gold:hover { background: var(--gold-bright); color: var(--bg); box-shadow: none; }
.btn-gold:active { background: var(--gold-deep); }

.btn-ghost {                      /* Theme.xaml OutlineButton */
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.btn-ghost:hover { background: var(--gold-wash); color: var(--gold); border-color: var(--gold); }
.btn-ghost:active { background: var(--line); }

.btn-line { border: 1px solid var(--gold); color: var(--gold); background: transparent; }
.btn-line:hover { background: var(--gold-wash); }

.btn-discord {
  background: var(--discord);
  border-color: var(--discord-border);
  color: #fff;
}
.btn-discord:hover { background: var(--discord-border); }
.btn-discord:active { background: var(--discord-press); }

/* The one crescendo: the launcher's PLAY button, halo and all. It is the only
   thing in the whole product that glows - keep the 55% gradient midpoint and
   the 18px blur, they are the button's identity. */
.btn-big {
  font-size: 1.35rem;
  padding: 0 34px;
  height: 64px;
  line-height: 62px;
  border-radius: 6px;
}
.hero-ctas .btn-gold, .play .btn-gold {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-foot) 100%);
  border: 1px solid var(--gold-bright);
  color: var(--bg);
}
.hero-ctas .btn-gold::before, .play .btn-gold::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: var(--gold);
  filter: blur(18px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.15s ease;
}
.hero-ctas .btn-gold:hover::before, .play .btn-gold:hover::before { opacity: 0.45; }
.hero-ctas .btn-gold:active, .play .btn-gold:active { background: var(--gold-deep); }

/* ---------- Focus: the launcher's dashed gold ring, everywhere ---------- */
:is(a, button, .btn, [role="button"], input[type="checkbox"]):focus-visible {
  outline: 1.5px dashed var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--gold);
}

/* ---------- Inputs ---------- */
input, textarea, select {
  background: var(--bg-field);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  caret-color: var(--gold-bright);
}
::selection { background: var(--gold-deep); color: var(--ink); }

/* ---------- Status dot: a 10px circle with a same-colour glow ---------- */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
}
.status-dot[data-status="online"]  { background: var(--good);    box-shadow: 0 0 8px var(--good); }
.status-dot[data-status="offline"] { background: var(--bad);     box-shadow: 0 0 8px var(--bad); }
.status-dot[data-status="unknown"] { background: var(--unknown); box-shadow: none; }

/* ---------- Header rule: a fading gold hairline, not a border ---------- */
.nav {
  background: rgba(10, 13, 22, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 0;
  box-shadow: none;
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  opacity: 0.8;
  background: linear-gradient(90deg, rgba(200, 169, 94, 0) 0%, rgba(200, 169, 94, 0.4) 30%, rgba(200, 169, 94, 0.4) 70%, rgba(200, 169, 94, 0) 100%);
}
.nav.scrolled { box-shadow: none; }
.nav-links a { color: var(--muted); font-weight: 700; }
.nav-links a:hover { color: var(--gold-bright); }

/* ---------- Links ---------- */
a { color: var(--muted); }
a:hover { color: var(--gold-bright); text-decoration: underline; }
.btn:hover, .nav-logo:hover, .news-all:hover { text-decoration: none; }

/* ---------- Hero: gradients only, no art, heavy vignette ---------- */
.hero-art {
  background:
    radial-gradient(ellipse 55% 70% at 88% 100%, rgba(200, 169, 94, 0.2) 0%, rgba(200, 169, 94, 0.078) 45%, rgba(200, 169, 94, 0) 100%),
    radial-gradient(ellipse 90% 100% at 22% 5%, #1b2139 0%, #101524 50%, #0a0d16 100%);
}
.hero-vignette {
  background: radial-gradient(ellipse 80% 85% at 50% 45%, transparent 50%, rgba(10, 13, 22, 0.85) 100%);
}
.hero-title em { color: var(--gold-bright); text-shadow: none; }

/* ---------- Sections use the panel language, not tinted grounds ---------- */
.play {
  background: var(--bg-raise);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about { background: transparent; }

/* ---------- Class emblem: plain box, no clip shape ---------- */
.class-emblem {
  background: none;
  clip-path: none;
  width: 34px;
  height: 34px;
  padding: 0;
  filter: none;
}
.class-emblem svg { background: none; padding: 0; clip-path: none; }

/* ---------- Diamond ornaments are not a launcher motif ---------- */
.panel-copy h2::before, .panel-copy h2::after { display: none; }

/* ---------- Art placeholders: no masks; the launcher ships no artwork ---------- */
.panel-art, .news-thumb, .hero-art { -webkit-mask-image: none; mask-image: none; }

/* ---------- Scrollbar ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
  border: 1px solid transparent;
  background-clip: padding-box;
}