/* ══════════════════════════════════════════════════════════════════════════
   Zayron — gold and sapphire, for Zayron Conquer.

   Built on the Mortals component set (same markup contract, same widgets),
   re-cut to the Zayron logo: a deep navy night, forged gold as the one accent
   that means "this matters", and sapphire as the light that means "this is
   live" — status dots, the market feed, focus rings, the dragon's glow.

   Discipline carried over from Mortals:
     · Gold is the only call-to-action colour. Sapphire never sits on a button.
     · Depth from bevel, not blur: a 1px specular top edge reads as metal.
     · Rules fade out at their ends instead of boxing content in.
     · Numbers are monospaced and tabular, so live counters never jitter.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* True near-black, a touch cool so the ember reads as warm against it. */
  --surface:    #050a1a;
  --surface-1:  #0a1228;
  --surface-2:  #0f1a36;
  --surface-3:  #172448;

  /* Ink. The faint step is as dark as it can go and still clear 4.5:1 on the
     card surface — it labels stat tiles and menu items, so it is text, not
     decoration, and a dimmer value fails AA. */
  --ink:        #eef2fb;
  --ink-dim:    #9fabc8;
  --ink-faint:  #7d8aab;

  /* The one accent ramp. `dim` carries small text (event countdowns, tags),
     so like --ink-faint it is pinned at the darkest value that still clears
     4.5:1 on a card rather than at whatever looked good on its own. */
  --ember-hi:   #f7d98b;
  --ember:      #d9ab45;
  --ember-dim:  #c99a3a;
  --ember-deep: #5c4314;
  --ember-ink:  #1b1204;   /* text ON ember */

  --line:       #18264a;
  --outline:    #2c3d6b;

  /* Amber, not red: the accent is already red, and a form error has to read as
     a different thing at a glance rather than as more branding. */
  --danger:     #ff8f80;
  --success:    #4fc08d;
  /* "Server down" is the one place that has to be red no matter what the brand
     is — it is the convention everyone already reads. Pushed pink-ward and
     lighter than the ember accent (47 units away in RGB) so it cannot be
     mistaken for a highlight. */
  --offline:    #ff5a5f;

  /* Sapphire: the "live" light. Status, focus, the market feed. Never a CTA. */
  --sapphire-hi:   #8ec5ff;
  --sapphire:      #3d8bff;
  --sapphire-dim:  #2563eb;
  --sapphire-deep: #0b2a6b;

  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-sans:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --radius: 2px;

  /* Forged-metal vocabulary. */
  --specular: inset 0 1px 0 rgb(255 232 175 / 0.22);
  --engrave:  inset 0 1px 2px rgb(0 0 0 / 0.8);
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
  --elev-2: 0 2px 4px rgb(0 0 0 / 0.55), 0 8px 20px rgb(0 0 0 / 0.45);
  --elev-3: 0 4px 8px rgb(0 0 0 / 0.6), 0 18px 44px rgb(0 0 0 / 0.5);

  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --shell: 1180px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The browser's own [hidden] rule loses to any author rule that sets display,
   so `.field { display: grid }` was keeping the login captcha on screen for
   everyone even with the attribute set. Two components had already been
   patched one at a time; this fixes the class of bug instead. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: rgb(217 171 69 / 0.22); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1rem; letter-spacing: 0.06em; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ember-dim);
}
.lead { font-size: 1.0625rem; color: var(--ink-dim); line-height: 1.7; max-width: 46ch; }
.muted { color: var(--ink-dim); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Shell ────────────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.5rem; }
.row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.stack { display: grid; gap: 1rem; }

/* Section rules that die into the page instead of boxing it in. */
.band {
  border-block: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent) 1;
  background: rgb(10 18 40 / 0.55);
}
section { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* Modo compacto (site.compactLanding -> html[data-compact], igual que data-launch
   y data-auth). Solo recorta AIRE: alto del hero, padding entre secciones y los
   margenes de los encabezados. No esconde ninguna seccion — para eso estan los
   toggles de cada feature. El objetivo es que la info entre en la primera
   pantalla sin scrollear. */
html[data-compact] section { padding-block: clamp(1.25rem, 3vw, 2.25rem); }
html[data-compact] .section-head { margin-bottom: 1.25rem; }
html[data-compact] .hero { padding-block: clamp(1rem, 2.5vw, 1.75rem); }
html[data-compact] .hero.has-bg { min-height: 20rem; }
html[data-compact] .hero h1 { margin-bottom: 0.75rem; }
html[data-compact] .hero .eyebrow { margin-bottom: 0.5rem; }

.section-head { margin-bottom: 2.5rem; }
.section-head .eyebrow { margin-bottom: 0.5rem; }
.section-head h2 { margin-bottom: 0.5rem; }
/* One-sided fade: anchors the heading to the left margin without drawing a box. */
.section-head::after {
  content: "";
  display: block;
  height: 1px;
  width: 5rem;
  margin-top: 1rem;
  background: linear-gradient(90deg, var(--ember), transparent);
}

/* ── Notice strip + stage badge (injected server-side) ────────────────── */
.site-notice {
  padding: 0.5rem 1.5rem;
  background: rgb(217 171 69 / 0.07);
  border-bottom: 1px solid rgb(217 171 69 / 0.18);
  color: var(--ink-dim);
  font-size: 0.8125rem;
  text-align: center;
  text-wrap: balance;
}
.site-notice strong { color: var(--ember); font-weight: 600; }
.site-notice a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.site-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.375rem;
  border: 1px solid rgb(217 171 69 / 0.38);
  border-radius: var(--radius);
  color: var(--ember);
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(5 10 26 / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Wider than the content shell on purpose: the nav carries a logo, seven
   items and four controls, and squeezing that into the text measure is what
   makes a header feel cramped. The content below stays at --shell. */
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 4rem;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

#server_logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
#server_logo .logo-img {
  display: block;
  height: 3.75rem;
  width: auto;
  transition: filter 0.15s;
}
#server_logo:hover .logo-img { filter: brightness(1.12); }

#top_menu { display: flex; align-items: center; gap: 0.125rem; flex: 1 1 auto; }
#top_menu li { display: block; }
#top_menu li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 2rem;
  padding-inline: 0.6875rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.15s, background-color 0.15s;
}
#top_menu li a:hover { color: var(--ember); background: rgb(217 171 69 / 0.07); }
/* Text only in the horizontal bar. The config carries an icon per item for the
   sidebar, where it aids scanning; repeated across a single row of seven wide
   uppercase labels it costs ~140px and buys nothing. */
#top_menu li a i { display: none; }
#top_menu .menu-sep { width: 1px; height: 1rem; background: var(--line); margin-inline: 0.375rem; }

.header-aside { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; }

/* The header used to carry a live player-count pill. It moved into the
   standings strip, where it is always visible instead of being the first thing
   dropped when the nav ran out of room. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Language switcher ────────────────────────────────────────────────── */
.lang-switch { display: flex; align-items: center; gap: 0.3125rem; }
.lang-switch button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  /* Dimmed rather than greyed: a desaturated flag stops being recognisable,
     which is the only thing the flag is here to do. */
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.15s var(--ease-out);
}
.lang-switch button:hover { opacity: 0.85; }
.lang-switch button[aria-current="true"] { opacity: 1; }

.lang-switch svg {
  display: block;
  width: 1.3125rem;
  height: 0.875rem;
  border-radius: 1px;
  /* Hairline ring: Spain's yellow and the Philippine white run straight into a
     black header without one, and the flags stop reading as objects. */
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22);
}
.lang-switch button:hover svg { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.4); }
.lang-switch button[aria-current="true"] svg {
  box-shadow: 0 0 0 1px var(--ember), 0 0 0 3px rgb(217 171 69 / 0.22);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.375rem;
  padding-inline: 1.125rem;
  /* A <button> carries the browser's grey ButtonFace by default and an <a> does
     not, so `.btn` on a button came out light-on-light while the same class on
     a link looked right. Neutral here; .btn-ember paints over it below. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  /* Sans and not the display serif: Cormorant is a hairline-contrast face, and
     at 12-13px uppercase its thin strokes disappear over the ember fill. The
     colour was never the problem - 5.18:1 on --ember - the stroke weight was. */
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn i { font-size: 0.8125rem; }

.btn-ember {
  background: linear-gradient(180deg, var(--ember-hi) 0%, var(--ember) 42%, var(--ember-dim) 100%);
  color: var(--ember-ink);
  box-shadow: var(--specular), var(--elev-1);
}
.btn-ember:hover { filter: brightness(1.07); }
.btn-ember:active { filter: brightness(0.95); box-shadow: var(--engrave); }

.btn-outline { border-color: var(--outline); color: var(--ink); }
.btn-outline:hover { border-color: var(--ember-dim); color: var(--ember); background: rgb(217 171 69 / 0.06); }

.btn-ghost { color: var(--ink-dim); }
.btn-ghost:hover { color: var(--ember); }

.btn-lg { height: 2.875rem; padding-inline: 1.75rem; font-size: 0.8125rem; }
.btn-sm { height: 2rem; padding-inline: 0.75rem; font-size: 0.6875rem; }
.btn-block { width: 100%; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* Tighter than a typical marketing hero on purpose: before launch the
   countdown is the most important thing on the site, and it has to be visible
   without scrolling on a laptop. */
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 5vw, 3.5rem); }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26rem;
  gap: 3rem;
  align-items: center;
}
.hero-visual { position: relative; }

/* The art slot. Sized by aspect-ratio rather than a fixed height so dropping in
   a taller or shorter render never breaks the row. */
.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
/* Ember floor glow behind whatever sits in the slot, so a cut-out render never
   looks pasted onto the page. */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% -12% -6%;
  background: radial-gradient(58% 46% at 50% 72%, rgb(217 171 69 / 0.20), transparent 70%);
  pointer-events: none;
}

/* ── Hero with a full-bleed backdrop ──────────────────────────────────── */
/* A landscape key-art is the hero, so the side slot has nothing left to do and
   the copy needs a dark bed to sit on rather than a column to sit beside. Set
   by app.js when launch.bgImage is configured and no separate subject art is. */
.hero.has-bg { min-height: 36rem; display: grid; align-items: center; }
.hero.has-bg .hero-visual { display: none; }
.hero.has-bg .hero-grid { grid-template-columns: minmax(0, 33rem); }

.hero.has-bg .hero-bg {
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
.hero.has-bg .hero-bg::after {
  /* Three jobs, one stack.
     1. Left-weighted wash so the copy has near-black under it while the
        characters on the right stay worth looking at.
     2. A heavier top band. Stock key-art carries its own logo across the top,
        and this page already has a wordmark in the header plus an h1 below —
        three titles in one screen. Cropping the band out is not an option: the
        artwork's title sits at exactly the height of the tallest characters'
        heads, so removing one beheads the other. Dimming is the compromise;
        the real fix is art delivered without text on it.
     3. A floor that dies into the page background instead of ending on a seam. */
  background:
    linear-gradient(180deg,
      rgb(5 10 26 / 0.92) 0%, rgb(5 10 26 / 0.72) 9%,
      rgb(5 10 26 / 0.18) 26%, rgb(5 10 26 / 0.12) 58%, var(--surface) 100%),
    linear-gradient(90deg,
      var(--surface) 0%, rgb(5 10 26 / 0.95) 30%, rgb(5 10 26 / 0.78) 52%,
      rgb(5 10 26 / 0.25) 78%, rgb(5 10 26 / 0.40) 100%);
}

/* Over artwork the two faintest colours in the palette stop being readable.
   Both are tuned for flat near-black, and the brightest pixels behind this copy
   are near-white armour. Measured, not eyeballed: with the scrim above, ember-dim
   on the labels lands at 1.57:1 and ink-faint on the zone rows at 3.35:1, well
   under the 4.5:1 floor. One step up the ramp each clears it at 6.08 and 6.85
   without needing a heavier scrim that would bury the art. */
.hero.has-bg .eyebrow,
.hero.has-bg .countdown-label { color: var(--ember-hi); }
.hero.has-bg .lz-row { color: var(--ink-dim); }
.hero.has-bg .lz-row .lz-time { color: var(--ember-hi); }

/* Two stacked scrims: a warm off-centre glow, then a floor gradient that
   hands the eye down into the first section instead of stopping at an edge. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 72% 30%, rgb(217 171 69 / 0.10) 0%, transparent 55%),
    radial-gradient(90% 70% at 20% 10%, rgb(40 100 230 / 0.18) 0%, transparent 60%),
    linear-gradient(180deg, transparent 40%, var(--surface) 98%);
  pointer-events: none;
}
.hero-bg::after {
  /* Vignette. Keeps the corners from feeling like an unfinished screenshot. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 45%, rgb(0 0 0 / 0.55) 100%);
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 0.75rem; }
.hero h1 { margin-bottom: 1.5rem; text-wrap: balance; }
.hero h1 .ember {
  background: linear-gradient(180deg, var(--ember-hi), var(--ember-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead { margin-bottom: 1.75rem; font-size: 1rem; }
.hero-actions { gap: 0.75rem; }

/* ── Countdown ────────────────────────────────────────────────────────── */
.countdown { margin-bottom: 2rem; }
.countdown-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember-dim);
  margin-bottom: 0.875rem;
}
.countdown-cells { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.cd-cell {
  min-width: 5rem;
  padding: 0.875rem 0.75rem 0.6875rem;
  text-align: center;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--specular), var(--elev-1);
}
.cd-cell .cd-value {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ember);
}
.cd-cell .cd-unit {
  display: block;
  margin-top: 0.4375rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.countdown-at { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--ink-dim); }
.countdown-at .num { color: var(--ink); }

/* Launch time per region.
   "20:00" means nothing to a player in Manila, and asking them to convert is
   how you lose the ones who show up an hour late. Their own zone is resolved
   from the browser and pinned first; the rest are the places this playerbase
   actually lives. The row matching the chosen language is highlighted. */
.launch-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.125rem 1.25rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}
.lz-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.1875rem 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.lz-row .lz-place { letter-spacing: 0.04em; }
.lz-row .lz-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lz-row.is-yours .lz-place,
.lz-row.is-locale .lz-place { color: var(--ink-dim); }
.lz-row.is-yours .lz-time,
.lz-row.is-locale .lz-time { color: var(--ember); }
.lz-row.is-yours .lz-place::before {
  content: "▸";
  margin-right: 0.375rem;
  color: var(--ember-dim);
}

/* Launch state is a data attribute on <html> set once from /api/site, so the
   whole page can switch without every component knowing about the gate. */
/* Only ever hide the branch that does not apply — never set a positive display
   on the one that does.
   The first version used `display: revert` to show, which reverts the property
   all the way past the author styles: a .btn is inline-flex precisely so its
   label centres, and reverting turned the pre-register button into a block with
   the text jammed against the top. Hiding-only leaves every element with the
   layout mode its own rules gave it. */
/* Signed-in state, driven exactly like the launch gate above: one attribute on
   <html>, CSS does the hiding. Hidden before the attribute exists so a page
   never flashes "Sign in" at someone who already is. The session lives in
   storage and reads synchronously, so that gap is not a real frame. */
html:not([data-auth])       [data-auth-when]             { display: none; }
html[data-auth="guest"]     [data-auth-when="user"]      { display: none; }
html[data-auth="user"]      [data-auth-when="guest"]     { display: none; }

.header-me {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; color: var(--ink); text-decoration: none;
  padding-inline: 0.25rem;
}
.header-me i { color: var(--ember); }
.header-me img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface);
}
.header-me:hover { color: var(--ember); }

html:not([data-launch])     [data-launch-when]           { display: none; }
html[data-launch="open"]    [data-launch-when="pending"] { display: none; }
html[data-launch="pending"] [data-launch-when="open"]    { display: none; }

/* ── Inner page layout ────────────────────────────────────────────────── */
.page { padding-block: clamp(2rem, 5vw, 3.5rem); }
.page-head { margin-bottom: 2rem; }
.page-head .eyebrow { margin-bottom: 0.5rem; }
.page-head h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.page-head::after {
  content: "";
  display: block;
  height: 1px;
  width: 5rem;
  margin-top: 1rem;
  background: linear-gradient(90deg, var(--ember), transparent);
}
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.5rem;
  align-items: start;
}
.page-main, .page-side { display: grid; gap: 1.25rem; min-width: 0; }
.prose p { margin-bottom: 0.875rem; color: var(--ink-dim); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin: 1.25rem 0 0.5rem; color: var(--ink); }
.prose h3:first-child { margin-top: 0; }
.prose ul { display: grid; gap: 0.4375rem; }
.prose ul li { padding-left: 1rem; position: relative; color: var(--ink-dim); font-size: 0.875rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6875rem; width: 5px; height: 1px; background: var(--ember-dim); }

#left_menu li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.375rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: color 0.15s;
}
#left_menu li:last-child a { border-bottom: 0; }
#left_menu li a:hover { color: var(--ember); }
#left_menu li a i { width: 1rem; text-align: center; color: var(--ember-deep); font-size: 0.75rem; }

.stat-big { text-align: center; padding-block: 0.5rem; }
.stat-big .value {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ember);
}
.stat-big .label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dl-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.375rem; border-bottom: 1px solid var(--line); }
.dl-item:last-child { border-bottom: 0; }
.dl-item .dl-size { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); }

table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
th, td { padding: 0.5625rem 0.625rem; text-align: left; border-bottom: 1px solid var(--line); }
th {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
td { color: var(--ink-dim); }
.table-wrap { overflow-x: auto; }

.empty-note { padding: 1.5rem 0.5rem; text-align: center; font-size: 0.8125rem; color: var(--ink-faint); }

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

/* Art drops below the copy rather than shrinking into a stamp. */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { order: -1; max-width: 20rem; margin-inline: auto; }
  .hero .lead { max-width: none; }
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  transition: border-color 0.2s, transform 0.2s var(--ease-out);
}
.card:hover { border-color: var(--outline); }
.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.card-header i { color: var(--ember-dim); font-size: 0.8125rem; }
.card-content { padding: 1.125rem; }
.card-content.tight { padding: 0.5rem 0.75rem; }

/* Stat tile — the rules strip: level cap, compose cap, reborns, classes. */
.stat-tile { padding: 1.375rem 1.25rem; text-align: left; }
.stat-tile > i {
  display: block;
  font-size: 1rem;
  color: var(--ember-dim);
  margin-bottom: 0.875rem;
}
.stat-tile .stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.375rem;
}
.stat-tile .stat-value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ember);
  margin-bottom: 0.4375rem;
}
.stat-tile .stat-note { font-size: 0.75rem; color: var(--ink-dim); }

/* Feature card */
.feature { padding: 1.5rem 1.375rem; }
.feature > i {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ember);
  font-size: 0.9375rem;
}
.feature h3 { margin-bottom: 0.5rem; color: var(--ink); }
.feature p { font-size: 0.875rem; color: var(--ink-dim); }

/* ── Data lists (news / events / rankings / status) ───────────────────── */
.data-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5625rem 0.375rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--line);
}
.data-list li:last-child { border-bottom: 0; }
.data-list .score, .data-list .evt-when { font-family: var(--font-mono); color: var(--ember-dim); font-variant-numeric: tabular-nums; }
.data-list .rank { color: var(--ink-faint); min-width: 1.5rem; }
/* MountServerStatus emits `.status-pill.up` / `.status-pill.down`, not the
   `.status-on` / `.status-off` this theme was guessing at — so the state never
   got a colour and every row rendered the same pale grey whether the server was
   up or down, which is the one thing the widget exists to tell you. */
.data-list .status-name { flex: 1 1 auto; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
/* A dot as well as the colour: red/green alone is invisible to the ~8% of men
   with a red-green deficiency, and this is a binary they need to read. */
.status-pill::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}
.status-pill.up   { color: var(--success); }
.status-pill.down { color: var(--offline); }

/* ── Standings strip ──────────────────────────────────────────────────────
   A single line under the header holding six-plus facts. It scrolls sideways
   rather than wrapping: wrapped, it becomes a block that pushes the hero and
   the countdown below the fold on a laptop, which is the one thing that must
   not happen before launch. */
.standings-bar {
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.standings-bar[hidden] { display: none; }
.standings-bar::-webkit-scrollbar { display: none; }

/* Fades out at the right edge when there is more to scroll to. The scrollbar is
   hidden (it would sit across the strip like a scar), so without this the extra
   cells are simply invisible — the reader has no reason to think anything is
   there. Toggled from JS because CSS cannot test for overflow. */
.standings-bar[data-overflow="1"] .standings-inner {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}

.standings-inner {
  display: flex;
  align-items: center;
  /* `safe` matters: plain `center` in a scroll container pushes the overflow off
     the LEFT edge, where it can never be scrolled back into view. With safe, it
     centres while it fits and falls back to left-aligned once it does not. */
  justify-content: center;
  justify-content: safe center;
  /* Tight enough that nine cells clear a 1352px strip before scrolling starts. */
  gap: 1.25rem;
  width: max-content;
  min-width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: 0.5rem 1.5rem;
}

.st-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4375rem;
  white-space: nowrap;
  font-size: 0.75rem;
}
.st-key {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.st-val { color: var(--ink); font-weight: 500; }
/* Online is the one figure that moves minute to minute and the one a visitor
   weighs before downloading, so it gets the accent and a live dot while the
   rest of the strip stays quiet. */
.st-cell.is-online .st-key { color: var(--ember-dim); }
.st-cell.is-online::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--success);
  align-self: center;
}
.st-strong { color: var(--ember) !important; font-weight: 600; font-size: 0.8125rem; }

/* ── CityWar popover ──────────────────────────────────────────────────────
   Five cities in one cell. The trigger is a button so it answers to keyboard
   and touch, not only to a mouse that a phone does not have. */
button.st-cell {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.st-pop-host { position: relative; }
.st-pop-host::after {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  margin-left: 0.125rem;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg) translate(-1px, -2px);
}
.st-pop-host:hover .st-key,
.st-pop-host:focus-visible .st-key { color: var(--ember-dim); }

.st-pop {
  /* Fixed, with coordinates set from JS: the strip scrolls horizontally, and an
     overflow container clips anything absolutely positioned inside it. */
  position: fixed;
  z-index: 60;
  display: none;
  min-width: 12rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--elev-3);
  text-align: left;
}
.st-pop-host:hover .st-pop,
.st-pop-host:focus-within .st-pop { display: block; }

.pop-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.1875rem 0;
  font-size: 0.75rem;
  white-space: nowrap;
}
.pop-city { color: var(--ink-faint); letter-spacing: 0.04em; }
.pop-guild { color: var(--ink); font-weight: 500; }
/* The tally sits behind the name: the reader wants who, then how many. */
.st-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ember-dim);
}

@media (max-width: 768px) {
  .standings-inner { gap: 1.25rem; padding-inline: 1rem; }
}

/* ── Live arena bar ───────────────────────────────────────────────────────
   Sits above the PvP cards and only exists while the game server is reporting.
   Loud on purpose: an event that is happening *right now* is the one thing on
   this page a player can act on in the next ten minutes. */
.live-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid rgb(217 171 69 / 0.32);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgb(217 171 69 / 0.13), rgb(217 171 69 / 0.03) 60%, transparent);
  box-shadow: var(--specular);
}
.live-bar[hidden] { display: none; }

.live-now { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.live-state {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.live-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ember);
  flex: 0 0 auto;
}
/* The pulse is reserved for "running". Signups-open and idle get the same dot
   holding still, so motion on this page always means a fight is in progress. */
html[data-arena="running"] .live-dot { animation: livePulse 1.6s var(--ease-out) infinite; }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgb(217 171 69 / 0.65); }
  70%  { box-shadow: 0 0 0 0.5rem rgb(217 171 69 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(217 171 69 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-arena="running"] .live-dot { animation: none; }
}

/* ── Today's results ──────────────────────────────────────────────────── */
.res-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5625rem 0.375rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.res-list li:last-child { border-bottom: 0; }
.res-text { color: var(--ink-dim); min-width: 0; }
.res-ago {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.res-empty { padding: 1.25rem 0.375rem; text-align: center; color: var(--ink-faint); font-size: 0.8125rem; }

/* ── Guild War card ───────────────────────────────────────────────────── */
.gw-card { border-color: rgb(217 171 69 / 0.22); }
.gw-when {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.5rem;
}
.gw-note { font-size: 0.8125rem; color: var(--ink-dim); }

/* ── Event rows ───────────────────────────────────────────────────────────
   MountEvents in shared/api.js builds a <button> per row so the schedule can
   expand into per-region times. A button carries the UA's own chrome — light
   grey fill, border, system font — and none of it was being reset here, so
   every event rendered as a pale box with unreadable text on this dark theme.
   Any theme that mounts events has to own these classes. */
.data-list li.evt-item { display: block; padding: 0; }

.evt-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5625rem 0.375rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}
.evt-head:hover { color: var(--ember); }
.data-list .evt-name { flex: 1 1 auto; font-size: 0.8125rem; }
.data-list .evt-when {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--ember-dim);
}
.evt-head:hover .evt-when { color: var(--ember); }

/* Chevron, drawn from two borders rather than an icon font so the row does not
   depend on Font Awesome having loaded. */
.evt-head::after {
  content: "";
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.125rem;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s var(--ease-out);
}
.evt-item.open .evt-head::after { transform: rotate(-135deg) translate(-1px, -1px); }

.evt-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.125rem 1rem;
  margin: 0 0.375rem 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--engrave);
}
.evt-zone {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.1875rem 0;
  font-size: 0.75rem;
}
.ez-label { color: var(--ink-faint); }
.ez-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-dim);
}
.evt-zone.is-local .ez-label { color: var(--ink-dim); }
.evt-zone.is-local .ez-time { color: var(--ember); }

.news-item { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); transition: opacity 0.15s; }
.news-item:last-child { border-bottom: 0; }
.news-item:hover { opacity: 0.82; }
.news-item .news-tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid rgb(217 171 69 / 0.3);
  border-radius: var(--radius);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-dim);
}
.news-item .news-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.news-item .news-date { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-faint); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 0.375rem; margin-bottom: 0.875rem; }
.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
input[type=text], input[type=password], input[type=email], select, textarea {
  width: 100%;
  height: 2.375rem;
  padding-inline: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--engrave);
  transition: border-color 0.15s;
}
/* Autofill is painted by the browser, and `background` does not override it.
   An inset shadow the full height of the box is the one hook that does, and
   -webkit-text-fill-color is what actually colours autofilled text. Without
   this the e-mail field came back pale blue in the middle of a dark form. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
  box-shadow: 0 0 0 100px var(--surface) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  /* the delay outlasts the browser's own repaint, which lands after ours */
  transition: background-color 600000s 0s, color 600000s 0s;
}
input::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ember-dim); }
.error { display: block; min-height: 1rem; font-size: 0.75rem; color: var(--danger); }
/* The bind helpers stamp these on whatever element carries the message. Without
   them a successful signup printed in the error colour, which reads as a failure
   even when the words say otherwise. */
.status-ok  { color: var(--success) !important; }
.status-err { color: var(--danger) !important; }
.signed-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.signed-actions .btn { flex: 1 1 8rem; }
.captcha-row { display: flex; gap: 0.625rem; align-items: center; }
.captcha-row img { border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }

/* ── Final CTA ────────────────────────────────────────────────────────── */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 50% 100%, rgb(217 171 69 / 0.10), transparent 70%);
  pointer-events: none;
}
.cta-final .shell { position: relative; }
.cta-final h2 { margin-bottom: 1rem; }
.cta-final .lead { margin-inline: auto; margin-bottom: 2rem; }
.cta-final .row { justify-content: center; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  padding-block: 2.5rem 2rem;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 2rem; margin-bottom: 2rem; }
.footer-brand .eyebrow { margin-bottom: 0.625rem; }
.footer-brand p { font-size: 0.8125rem; color: var(--ink-dim); max-width: 34ch; }
.footer-col h3 { font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--ink-faint); margin-bottom: 0.75rem; }
.footer-col li { margin-bottom: 0.4375rem; }
.footer-col a { font-size: 0.8125rem; color: var(--ink-dim); transition: color 0.15s; }
.footer-col a:hover { color: var(--ember); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* ── Mobile nav ───────────────────────────────────────────────────────── */
.site-nav-toggle { display: none; }
.site-nav-hamburger { display: none; }

/* Menu labels tighten before the hamburger takes over: the header is
   capped at 1400 and the row has no slack. */
@media (max-width: 1320px) {
  #top_menu li a { padding-inline: 0.5rem; font-size: 0.6875rem; }
}

/* Collapse early. Seven uppercase menu items plus the four language buttons and
   two CTAs stop fitting well before the usual tablet breakpoint, and nothing in
   that row is allowed to shrink. */
@media (max-width: 1080px) {
  .site-header-inner { flex-wrap: wrap; height: auto; padding-block: 0.625rem; gap: 0.75rem; }

  .site-nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .site-nav-hamburger span {
    display: block;
    width: 0.875rem;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.2s, opacity 0.2s;
  }
  /* The server injects the checkbox + label immediately before #top_menu, so
     all three are siblings here and `~` reaches them. */
  .site-nav-toggle:checked ~ .site-nav-hamburger span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
  .site-nav-toggle:checked ~ .site-nav-hamburger span:nth-child(2) { opacity: 0; }
  .site-nav-toggle:checked ~ .site-nav-hamburger span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

  .site-header-inner #top_menu {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-bottom: 0.5rem;
  }
  .site-header-inner .site-nav-toggle:checked ~ #top_menu { display: flex; }
  #top_menu li a { height: 2.25rem; font-size: 0.8125rem; }
  #top_menu .menu-sep { width: 100%; height: 1px; margin: 0.375rem 0; }

  .header-aside { order: 2; margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Below ~520 the two CTAs and the four language buttons stop fitting on one
   line even with the menu already behind the hamburger. Let them wrap rather
   than shrink the tap targets. */
@media (max-width: 520px) {
  .header-aside { flex-wrap: wrap; gap: 0.5rem; }
  .header-aside .btn { flex: 1 1 8rem; min-width: 0; }
}

@media (max-width: 768px) {
  .shell { padding-inline: 1rem; }
  .site-header-inner { padding-inline: 1rem; }
  .site-notice { padding: 0.5rem 1rem; font-size: 0.75rem; }
  .cd-cell { min-width: 4rem; padding: 0.6875rem 0.5rem 0.5625rem; }
  .cd-cell .cd-value { font-size: 1.375rem; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ── Character profile ─────────────────────────────────────────────────── */
.prof-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.prof-tab {
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.prof-tab.is-on { border-color: var(--ember-dim); color: var(--ink); }

.prof-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.prof-face {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  object-fit: cover;
  background: var(--surface);
}
.prof-id h2 { font-size: 1.375rem; line-height: 1.2; }
.prof-id p { font-size: 0.8125rem; margin-top: 0.25rem; }

.prof-stats {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  list-style: none; padding: 0.75rem 0; margin: 0 0 0.5rem;
  border-block: 1px solid var(--line);
}
.prof-stats li { display: flex; align-items: baseline; gap: 0.4rem; }

.prof-gear-title {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 1rem 0 0.75rem;
}

/* Three columns so the slots read as a body, not a list. It collapses to a
   plain wrap on narrow screens -- a 3-wide grid of 64px tiles does not fit a
   phone, and squeezing it would make the icons unreadable. */
.paperdoll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
@media (max-width: 30rem) {
  .paperdoll { grid-template-columns: repeat(2, 1fr); }
}
.doll-col { display: grid; gap: 0.625rem; align-content: start; }

.slot {
  position: relative;
  display: grid; place-items: center; gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  min-height: 5.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.slot img { width: 48px; height: 48px; image-rendering: auto; }
.slot-tag {
  font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center;
}
/* An empty slot stays visible but recedes: the shape of the gap is the point. */
.slot.is-empty { border-style: dashed; opacity: 0.45; }
.slot.is-empty::before {
  content: ""; width: 48px; height: 48px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--line) 45%, transparent);
}
.slot-plus {
  position: absolute; top: 0.25rem; right: 0.375rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem; color: var(--ember);
}
.slot-gem {
  position: absolute; bottom: 0.25rem; right: 0.375rem;
  font-size: 0.5625rem; color: var(--ink-faint); letter-spacing: -0.05em;
}

/* Quality tiers, taken from the client's own QualityColorD
   (Loader/ui/improve_ui_dx9.cpp) so the border here matches the name colour
   the player sees in game. */
.slot[data-q="R"] { border-color: rgb(100, 180, 255); }
.slot[data-q="U"] { border-color: rgb( 90, 220,  90); }
.slot[data-q="E"] { border-color: rgb(200, 120, 240); }
.slot[data-q="S"] { border-color: rgb(240, 170, 110); }

/* Stat tiles. Fixed minimum so the grid keeps its shape as numbers grow --
   a row that reflows every time someone gains a level is hard to read twice. */
.tiles {
  display: grid; gap: 0.625rem; list-style: none; padding: 0; margin: 0 0 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.tiles .tile {
  display: grid; gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tile-key {
  font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.tile-val { font-size: 1.25rem; line-height: 1.1; color: var(--ink); }

.prof-state {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem; font-weight: 600;
}
/* The dot carries the same meaning as the colour, for anyone the colour alone
   does not reach. */
.prof-state::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: currentColor;
}
.prof-state.is-on  { color: var(--success); }
.prof-state.is-off { color: var(--offline, var(--danger)); }
.prof-seen { font-size: 0.75rem; margin-top: 0.125rem; }

/* ── Account dashboard ─────────────────────────────────────────────────── */
.dash { display: grid; grid-template-columns: 13rem 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 48rem) { .dash { grid-template-columns: 1fr; } }

.dash-links { display: grid; gap: 0.25rem; }
.dash-link {
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%; padding: 0.5rem 0.75rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink-dim); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
}
.dash-link i { width: 1rem; text-align: center; color: var(--ink-faint); }
.dash-link:hover { color: var(--ink); background: var(--surface); }
.dash-link.is-on { color: var(--ink); background: var(--surface); border-color: var(--line); }
.dash-link.is-on i { color: var(--ember); }
.dash-link.is-out { margin-top: 0.5rem; color: var(--ink-faint); }

/* Wide content gets its own scroller so the page body never scrolls sideways. */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th {
  text-align: left; padding: 0.5rem 0.75rem;
  font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table td.num { font-family: var(--font-mono, monospace); white-space: nowrap; }
.ord-st { display: block; font-weight: 600; font-size: 0.8125rem; }
.ord-st.is-ok { color: var(--success); }
.ord-st.is-wait { color: var(--danger); }
.ord-sub { display: block; font-size: 0.6875rem; }

/* ── Trade log ─────────────────────────────────────────────────────────── */
.trade-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.tr-row {
  padding: 0.75rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tr-head {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline;
  padding-bottom: 0.5rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.tr-when { font-family: var(--font-mono, monospace); color: var(--ink-dim); }
.tr-side { display: grid; grid-template-columns: 5rem 1fr; gap: 0.5rem; padding: 0.25rem 0; }
@media (max-width: 30rem) { .tr-side { grid-template-columns: 1fr; } }
.tr-lbl {
  font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 0.375rem;
}
.tr-goods { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.tr-item {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 0.75rem;
}
.tr-item img { width: 22px; height: 22px; }
.tr-x, .tr-plus { font-family: var(--font-mono, monospace); color: var(--ember); }
.tr-cash {
  padding: 0.25rem 0.5rem; font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-dim);
}
/* Same five tiers as the paperdoll, same colours as the game client. */
.tr-item[data-q="R"] { border-color: rgb(100, 180, 255); }
.tr-item[data-q="U"] { border-color: rgb( 90, 220,  90); }
.tr-item[data-q="E"] { border-color: rgb(200, 120, 240); }
.tr-item[data-q="S"] { border-color: rgb(240, 170, 110); }

/* ── Pilot Mode ────────────────────────────────────────────────────────── */
.tile-val.is-hot { color: var(--ember); }
.pi-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.375rem; }
.pi-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 0.8125rem;
}
.pi-act { font-weight: 600; }
.pi-st { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pi-st.is-pending { color: var(--danger); }
.pi-st.is-done    { color: var(--success); }
.pi-st.is-failed  { color: var(--offline, var(--danger)); }
.pi-st.is-expired { color: var(--ink-faint); }
.pi-when { font-family: var(--font-mono, monospace); font-size: 0.6875rem; }
/* The reason a request was refused is the useful part; give it the full row. */
.pi-res { flex-basis: 100%; font-size: 0.75rem; }

/* ── Linked accounts ───────────────────────────────────────────────────── */
.link-list { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.375rem; }
.ln-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.ln-name { font-size: 0.875rem; }
.ln-del {
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-faint); font: inherit; font-size: 0.75rem;
  padding: 0.2rem 0.55rem; cursor: pointer;
}
.ln-del:hover { color: var(--danger); border-color: var(--danger); }

/* ── Item slots, matched to the in-game improve window ─────────────────── */
/* Above +3 the plus band takes over the border, the way QualityColorD is
   overridden in Loader/ui/improve_ui_dx9.cpp. */
.slot[data-plus="mid"] { border-color: rgb(255, 205,   0); }
.slot[data-plus="hi"]  { border-color: rgb(255,  90,   0); }

/* The halo the client draws behind rare items. It breathes rather than sits
   still, because in game it is an animated glow and a flat wash reads as a
   rendering mistake. */
.slot[data-q="U"] img, .slot[data-q="E"] img, .slot[data-q="S"] img { position: relative; z-index: 1; }
.slot[data-q="U"]::after,
.slot[data-q="E"]::after,
.slot[data-q="S"]::after {
  content: "";
  position: absolute; inset: 0.5rem;
  border-radius: 50%;
  filter: blur(9px);
  animation: slot-breathe 2.8s ease-in-out infinite;
  pointer-events: none;
}
.slot[data-q="U"]::after { background: rgba( 30, 220,  90, 0.30); }
.slot[data-q="E"]::after { background: rgba(140,  30, 240, 0.34); }
.slot[data-q="S"]::after { background: rgba(255,  50,  50, 0.34); }
@keyframes slot-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
/* Someone who asked not to see motion gets the glow without the pulse. */
@media (prefers-reduced-motion: reduce) {
  .slot[data-q="U"]::after, .slot[data-q="E"]::after, .slot[data-q="S"]::after {
    animation: none; opacity: 0.7;
  }
}

.slot-dura {
  position: absolute; bottom: 0.25rem; left: 0.375rem;
  font-family: var(--font-mono, monospace); font-size: 0.5625rem;
  color: var(--ink-faint);
}
.slot-dura.is-worn { color: rgb(255, 100, 100); }

/* ── Item card ─────────────────────────────────────────────────────────── */
.item-tip {
  position: absolute; left: 50%; bottom: calc(100% + 0.4rem);
  transform: translateX(-50%);
  display: none; z-index: 40;
  min-width: 11rem; max-width: 15rem;
  padding: 0.5rem 0.625rem;
  background: var(--bg, #050a1a);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  text-align: left;
  /* Never let a hovered card swallow the pointer -- it sits over its own slot,
     and a card that eats the mouse makes the slot un-clickable. */
  pointer-events: none;
}
.slot:hover .item-tip, .slot:focus-within .item-tip { display: block; }
.tip-h { display: block; font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.3rem; }
.tip-h[data-q="N"] { color: rgb(235, 235, 235); }
.tip-h[data-q="R"] { color: rgb(100, 180, 255); }
.tip-h[data-q="U"] { color: rgb( 90, 220,  90); }
.tip-h[data-q="E"] { color: rgb(200, 120, 240); }
.tip-h[data-q="S"] { color: rgb(240, 170, 110); }
.tip-l { display: block; font-size: 0.6875rem; line-height: 1.5; color: var(--ink-dim); }
/* Same three accents the client uses: violet for compose, orange for bless,
   yellow for enchant. */
.tip-l.is-plus  { color: rgb(190, 150, 255); }
.tip-l.is-bless { color: rgb(255, 140,  40); }
.tip-l.is-ench  { color: rgb(255, 218,  50); }
.tip-l.is-sock  { color: var(--ink-faint); }


.store-banner {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d9ab45;
  border-radius: 6px;
  background: rgba(217, 171, 69, 0.08);
  font-size: 0.875rem;
}
.store-item {
  padding: 0.875rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  margin-bottom: 0.75rem;
}
.store-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.store-item-head strong { font-size: 1rem; }
.store-price {
  font-family: "IBM Plex Mono", monospace;
  color: #d9ab45;
  white-space: nowrap;
}
.store-desc {
  margin: 0.375rem 0 0.625rem;
  font-size: 0.8125rem;
  color: #9fabc8;
  line-height: 1.5;
}
.store-actions { display: flex; gap: 0.5rem; }


.store-item { display: flex; gap: 0.875rem; align-items: flex-start; }
.store-item-img { border-radius: 6px; background: rgba(0,0,0,0.25); flex: 0 0 auto; }
.store-item-body { flex: 1 1 auto; min-width: 0; }
.store-closed { margin: 0 0 0.75rem; }


/* Ranking page: index sidebar + podium + tables */
.rank-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .rank-layout { grid-template-columns: 1fr; } }
.rank-index { position: sticky; top: 5.5rem; }
.rank-index-title {
  font-family: var(--font-display);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0.875rem 1rem 0.5rem;
}
.rank-nav { display: flex; flex-direction: column; padding: 0 0.5rem 0.75rem; }
.rank-nav a {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5625rem 0.75rem; margin: 0.125rem 0;
  border-radius: 6px; text-decoration: none;
  color: var(--ink-dim, #9fabc8); font-size: 0.875rem; font-weight: 500;
}
.rank-nav a i { width: 1.125rem; text-align: center; opacity: 0.8; }
.rank-nav a:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.rank-nav a.is-on { background: rgba(217, 171, 69, 0.12); color: var(--ember, #d9ab45); }
.rank-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 700px) { .rank-podium { grid-template-columns: 1fr; } }
.pod-card {
  position: relative; padding: 1.5rem 1rem 1rem;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  background: rgba(0,0,0,0.18); text-align: center;
}
.pod-card.pod-1 { border-color: rgba(255, 200, 60, 0.5); background: rgba(255, 200, 60, 0.05); }
.pod-medal {
  position: absolute; top: 0.625rem; left: 0.625rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
}
.pod-1 { color: #ffc83c; }
.pod-2 { color: #c8ccd4; }
.pod-3 { color: #cd8a53; }
.pod-name { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.pod-sub { font-size: 0.75rem; color: var(--ink-dim, #9fabc8); margin-top: 0.25rem; }
.pod-score {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 600;
  color: var(--ember, #d9ab45); margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.rank-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rank-table th {
  text-align: left; padding: 0.5rem 0.75rem;
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rank-table td { padding: 0.5625rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.rank-table tr:last-child td { border-bottom: 0; }
.rank-table .rk-num { font-family: var(--font-mono); color: var(--ink-faint); width: 2.5rem; }
.rank-table .rk-main { font-weight: 600; color: var(--ink); }
.rank-table .rk-sub { color: var(--ink-dim, #9fabc8); }
.rank-table .rk-score {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ember, #d9ab45); text-align: right; font-weight: 600;
}
.rank-table .rk-empty { text-align: center; color: var(--ink-faint); padding: 1.25rem; }


/* Ranking podium with the client face art */
.pod-face { border-radius: 8px; background: rgba(0,0,0,0.3); margin: 0.5rem auto 0.625rem; display: block; }
.rk-face { border-radius: 4px; background: rgba(0,0,0,0.3); margin-right: 0.5rem; vertical-align: middle; }
.rk-main { display: flex; align-items: center; }
.rk-mid { font-family: var(--font-mono); color: var(--ink-dim, #9fabc8); }


.rank-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; margin: 0.875rem 0 1.25rem;
}
.rk-page { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-dim, #9fabc8); }


/* ══════════════════════════════════════════════════════════════════════════
   ZAYRON LAYER
   Everything below is new for Zayron Conquer. It overrides a handful of
   Mortals rules (header, hero, cards) and adds the widgets Mortals never had:
   live status bar, Hall of Legends, Live Market, dropdown menu, news page.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  background:
    radial-gradient(1400px 700px at 50% -12%, rgb(37 99 235 / 0.12), transparent 70%),
    var(--surface);
}
::selection { background: rgb(61 139 255 / 0.30); }
:focus-visible { outline-color: var(--sapphire); }

/* Cinzel is drawn in capitals already; it needs less tracking than Cormorant
   did and one step more weight to hold up on navy. */
h1, h2, h3, .display { font-weight: 700; letter-spacing: 0.035em; }
h2 { color: var(--ink); }
.eyebrow { color: var(--sapphire-hi); font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.3em; }
.gold-text {
  background: linear-gradient(180deg, #fff1c7 0%, var(--ember-hi) 30%, var(--ember) 62%, #9a6f22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  background: rgb(5 10 26 / 0.84);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgb(217 171 69 / 0.5) 30%, rgb(61 139 255 / 0.45) 70%, transparent) 1;
}
@media (min-width: 1081px) { .site-header-inner { height: 4.5rem; } }
#server_logo .logo-img { height: 3.1rem; width: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.6)); }
#server_logo:hover .logo-img { filter: drop-shadow(0 0 10px rgb(217 171 69 / 0.35)) brightness(1.06); }

#top_menu li a {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}
#top_menu li a:hover,
#top_menu li a[aria-current="page"] { color: var(--ember-hi); background: rgb(217 171 69 / 0.08); }
#top_menu li a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ember); }

/* Dropdown (rendered server-side by src/menu.ts from menu.items[].children). */
#top_menu li.has-sub { position: relative; }
#top_menu li.has-sub > a::after {
  content: "";
  width: 0; height: 0;
  margin-left: 0.125rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  opacity: 0.7;
}
#top_menu .sub-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 60;
  display: none;
  min-width: 13.5rem;
  padding: 0.375rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-top: 2px solid var(--ember);
  border-radius: var(--radius);
  box-shadow: var(--elev-3);
}
/* Invisible bridge so the pointer can travel from the label to the panel. */
#top_menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
#top_menu li.has-sub:hover > .sub-menu,
#top_menu li.has-sub:focus-within > .sub-menu { display: block; }
#top_menu .sub-menu li a {
  display: flex;
  width: 100%;
  height: 2.25rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
#top_menu .sub-menu li a i { display: inline-block; width: 1.1rem; text-align: center; color: var(--sapphire-hi); font-size: 0.8125rem; }

@media (max-width: 1080px) {
  #top_menu .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 0 1rem;
    background: none;
    border: 0;
    box-shadow: none;
  }
  #top_menu .sub-menu::before { display: none; }
  #top_menu li.has-sub > a::after { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-ember {
  background: linear-gradient(180deg, #fbe7ae 0%, var(--ember-hi) 18%, var(--ember) 55%, #a87a26 100%);
  border-color: rgb(255 230 170 / 0.25);
}
.btn-outline:hover { border-color: var(--ember); color: var(--ember-hi); background: rgb(217 171 69 / 0.07); }
.btn-sapphire {
  background: linear-gradient(180deg, #5aa2ff 0%, var(--sapphire) 50%, var(--sapphire-dim) 100%);
  color: #fff;
  box-shadow: var(--specular), var(--elev-1);
}
.btn-sapphire:hover { filter: brightness(1.08); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, rgb(15 26 54 / 0.96), rgb(10 18 40 / 0.96));
  box-shadow: var(--specular), var(--elev-1);
}
.card::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(217 171 69 / 0.55), transparent);
  pointer-events: none;
}
.card:hover { border-color: #2c3d6b; }
.card-header i { color: var(--ember); }
.feature > i { color: var(--ember-hi); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border-color: rgb(217 171 69 / 0.3); }
.feature:hover { transform: translateY(-2px); }

/* Centered section head with the logo's ornament: rule, sapphire diamond, rule. */
.zr-head { text-align: center; }
.zr-head .lead { margin-inline: auto; }
.zr-head::after {
  width: 13rem;
  height: 12px;
  margin: 1rem auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 9 6 6 12 3 6Z' fill='%233d8bff'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    linear-gradient(90deg, transparent, var(--ember) 40%, transparent 44%, transparent 56%, var(--ember) 60%, transparent) center / 100% 1px no-repeat;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.zr-hero {
  min-height: 42rem;
  padding-block: 2.5rem 7rem;
  display: grid;
  align-items: center;
  text-align: center;
}
.zr-hero.has-bg { min-height: 42rem; }
.hero.has-bg.zr-hero .hero-bg { background-position: center 30%; }
.hero.has-bg.zr-hero .hero-bg::after {
  background:
    radial-gradient(60% 55% at 50% 42%, rgb(5 10 26 / 0.45) 0%, rgb(5 10 26 / 0.82) 75%, rgb(5 10 26 / 0.92) 100%),
    linear-gradient(180deg, rgb(5 10 26 / 0.75) 0%, rgb(5 10 26 / 0.25) 30%, rgb(5 10 26 / 0.45) 70%, var(--surface) 100%);
}
/* Sapphire mist rising behind the emblem. */
.zr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(38% 34% at 50% 34%, rgb(61 139 255 / 0.22), transparent 70%);
  pointer-events: none;
}
.zr-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.zr-emblem {
  width: min(25rem, 76vw);
  height: auto;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 0 36px rgb(61 139 255 / 0.32)) drop-shadow(0 12px 28px rgb(0 0 0 / 0.65));
  animation: zr-float 7s ease-in-out infinite;
}
@keyframes zr-float { 50% { transform: translateY(-8px); } }
.zr-hero .eyebrow { margin-bottom: 0.75rem; }
.zr-hero h1 { font-size: clamp(1.5rem, 3.6vw, 2.5rem); margin-bottom: 1rem; }
.zr-hero .lead { margin: 0 auto 1.75rem; max-width: 56ch; color: #c3cde3; }
.zr-hero .hero-actions { justify-content: center; }
.zr-hero .countdown { margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .zr-emblem { animation: none; } }

/* ── Live status bar ─────────────────────────────────────────────────── */
.zr-status-wrap { position: relative; z-index: 3; margin-top: -4.5rem; padding-block: 0; }
.zr-status {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: linear-gradient(180deg, rgb(19 32 66 / 0.94), rgb(10 18 40 / 0.96));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--specular), var(--elev-3);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.zr-stat { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem; min-width: 0; }
.zr-stat + .zr-stat { border-left: 1px solid var(--line); }
.zr-stat > i { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: rgb(217 171 69 / 0.1); color: var(--ember-hi); font-size: 0.9375rem; }
.zr-stat-label { display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.zr-stat-value { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zr-stat-value small { font-size: 0.6875rem; color: var(--ink-faint); font-weight: 500; margin-left: 0.25rem; }
.zr-dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--ink-faint); vertical-align: middle; }
.zr-dot.is-up { background: var(--success); animation: zr-pulse 2.2s infinite; }
.zr-dot.is-down { background: var(--offline); }
.zr-dot.is-live { background: var(--sapphire); animation: zr-pulse-blue 2.2s infinite; }
@keyframes zr-pulse { 0% { box-shadow: 0 0 0 0 rgb(79 192 141 / 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgb(79 192 141 / 0); } }
@keyframes zr-pulse-blue { 0% { box-shadow: 0 0 0 0 rgb(61 139 255 / 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgb(61 139 255 / 0); } }
@media (prefers-reduced-motion: reduce) { .zr-dot.is-up, .zr-dot.is-live { animation: none; } }
@media (max-width: 1000px) {
  .zr-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zr-stat:nth-child(4) { border-left: 0; }
  .zr-stat:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .zr-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zr-stat { padding: 0.875rem 1rem; gap: 0.625rem; }
  .zr-stat:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .zr-stat:nth-child(-n+2) { border-top: 0; }
  .zr-stat:nth-child(even) { border-left: 1px solid var(--line); }
  .zr-stat:last-child { grid-column: 1 / -1; border-left: 0; }
  .zr-stat > i { display: none; }
}

/* ── Hall of Legends ─────────────────────────────────────────────────── */
.zr-legends {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1.25rem;
  align-items: end;
  max-width: 56rem;
  margin-inline: auto;
}
.zr-legend {
  position: relative;
  padding: 2rem 1rem 1.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgb(23 36 72 / 0.92), rgb(10 18 40 / 0.96));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--specular), var(--elev-2);
  transition: transform 0.25s var(--ease-out), border-color 0.25s;
}
.zr-legend:hover { transform: translateY(-3px); border-color: rgb(217 171 69 / 0.45); }
.zr-legend.is-1 { order: 2; padding-top: 2.5rem; border-color: rgb(217 171 69 / 0.55); box-shadow: var(--specular), var(--elev-3), 0 0 40px rgb(217 171 69 / 0.12); }
.zr-legend.is-2 { order: 1; }
.zr-legend.is-3 { order: 3; }
.zr-legend-rank {
  position: absolute;
  top: -1.125rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  color: #1b1204;
  box-shadow: var(--specular), var(--elev-1);
}
.is-1 .zr-legend-rank { background: linear-gradient(180deg, #ffe9a8, #d9ab45 60%, #9a6f22); width: 2.5rem; height: 2.5rem; top: -1.25rem; }
.is-2 .zr-legend-rank { background: linear-gradient(180deg, #f4f6fb, #b9c1d3 60%, #7d879c); }
.is-3 .zr-legend-rank { background: linear-gradient(180deg, #f3c9a0, #c98a53 60%, #8a5428); }
.zr-legend-face {
  display: block;
  width: 5.25rem;
  height: 5.25rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
  border: 2px solid var(--outline);
}
.zr-legend-face.is-blank { display: grid; place-items: center; color: var(--ink-faint); font-size: 1.75rem; }
.is-1 .zr-legend-face { width: 6.75rem; height: 6.75rem; border-color: var(--ember); box-shadow: 0 0 26px rgb(217 171 69 / 0.35); }
.zr-legend-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.is-1 .zr-legend-name { font-size: 1.25rem; }
.zr-legend-meta { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--ink-dim); }
.zr-legend-score { margin-top: 0.625rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--ember-hi); }
.zr-legends-more { display: flex; justify-content: center; margin-top: 1.75rem; }
@media (max-width: 700px) {
  .zr-legends { grid-template-columns: 1fr; max-width: 22rem; gap: 1.75rem; }
  .zr-legend.is-1, .zr-legend.is-2, .zr-legend.is-3 { order: 0; }
}

/* ── Quality colours (same values the client paints) ─────────────────── */
[data-q="N"] { --q: rgb(235 235 235); }
[data-q="R"] { --q: rgb(100 180 255); }
[data-q="U"] { --q: rgb(90 220 90); }
[data-q="E"] { --q: rgb(200 120 240); }
[data-q="S"] { --q: rgb(240 170 110); }

/* ── Live Market: shared bits ────────────────────────────────────────── */
.mk-icon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: radial-gradient(circle at 50% 40%, var(--surface-3), var(--surface));
  border: 1px solid var(--q, var(--outline));
  border-radius: 3px;
}
.mk-icon img { width: 100%; height: 100%; object-fit: contain; }
.mk-icon i { color: var(--ink-faint); font-size: 0.9rem; }
.mk-name { font-weight: 600; color: var(--q, var(--ink)); overflow-wrap: anywhere; }
.mk-plus { color: rgb(190 150 255); font-family: var(--font-mono); font-weight: 600; }
.mk-bless { color: rgb(255 140 40); font-family: var(--font-mono); }
.mk-sub { display: block; font-size: 0.6875rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.mk-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ember-hi); white-space: nowrap; font-weight: 600; }
.mk-cur { margin-left: 0.3rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; }
.mk-cur.is-cps { color: var(--sapphire-hi); }
.mk-seller { color: var(--ink-dim); white-space: nowrap; }
.mk-seller .fa-moon { color: var(--sapphire-hi); font-size: 0.6875rem; margin-left: 0.25rem; }
.mk-gems { display: inline-flex; gap: 0.25rem; }
.mk-gem {
  width: 0.75rem; height: 0.75rem;
  transform: rotate(45deg);
  border: 1px solid var(--outline);
  background: var(--surface);
}
.mk-gem.is-gem { border-color: var(--sapphire-hi); background: linear-gradient(135deg, var(--sapphire-hi), var(--sapphire-dim)); }
.mk-live-tag { display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sapphire-hi); }

/* Home teaser: newest listings as small cards. */
.zr-mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.875rem; }
.zr-mk-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: linear-gradient(180deg, rgb(15 26 54 / 0.9), rgb(10 18 40 / 0.9));
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.2s, transform 0.2s var(--ease-out);
  min-width: 0;
}
.zr-mk-card:hover { border-color: var(--q, var(--outline)); transform: translateY(-2px); }
.zr-mk-card .mk-body { min-width: 0; flex: 1 1 auto; }
.zr-mk-card .mk-name { display: block; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zr-mk-card .mk-line { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.125rem; font-size: 0.75rem; }
.zr-mk-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-faint); font-size: 0.875rem; border: 1px dashed var(--line); border-radius: 4px; }
.zr-mk-foot { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── Live Market page ────────────────────────────────────────────────── */
.mk-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.mk-stat { padding: 0.875rem 1rem; }
.mk-stat .zr-stat-label { margin-bottom: 0.25rem; }
.mk-stat .zr-stat-value { font-size: 1.125rem; }
.mk-layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.mk-filters { position: sticky; top: 5.5rem; }
.mk-filters .card-content { display: grid; gap: 0.75rem; }
.mk-filters .field { margin: 0; }
.mk-filters .field label { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.mk-filters select, .mk-filters input,
.mk-toolbar select, .mk-toolbar input {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.625rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.8125rem;
}
.mk-filters select:focus, .mk-filters input:focus,
.mk-toolbar select:focus, .mk-toolbar input:focus { border-color: var(--sapphire); outline: none; box-shadow: 0 0 0 3px rgb(61 139 255 / 0.18); }
.mk-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.mk-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.25rem; }
.mk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--line); }
.mk-search { position: relative; flex: 1 1 16rem; }
.mk-search i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.8125rem; pointer-events: none; }
.mk-toolbar .mk-search input { padding-left: 2.125rem; }
.mk-toolbar .mk-sort { flex: 0 0 11rem; }
.mk-auto { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--ink-dim); cursor: pointer; user-select: none; }
.mk-auto input { width: auto; height: auto; accent-color: var(--sapphire); }
.mk-count { padding: 0.625rem 1.125rem; font-size: 0.75rem; color: var(--ink-faint); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mk-table { font-size: 0.8125rem; }
.mk-table th { white-space: nowrap; }
.mk-table td { color: var(--ink-dim); vertical-align: middle; }
.mk-table tbody tr { transition: background-color 0.15s; }
.mk-table tbody tr:hover { background: rgb(61 139 255 / 0.06); }
.mk-table .mk-num { text-align: right; }
.mk-item { position: relative; display: flex; align-items: center; gap: 0.625rem; min-width: 12rem; }
.mk-item:focus { outline: none; }
.mk-item:hover .item-tip, .mk-item:focus-within .item-tip, .mk-item:focus .item-tip { display: block; }
.mk-item .item-tip { left: 0; transform: none; bottom: calc(100% + 0.4rem); }
.mk-loc { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }
.mk-empty { padding: 3rem 1rem; text-align: center; color: var(--ink-dim); }
.mk-empty i { display: block; font-size: 1.75rem; color: var(--sapphire); margin-bottom: 0.75rem; opacity: 0.8; }
.mk-more { display: flex; justify-content: center; padding: 1rem; }
.mk-history { margin-top: 1.25rem; }
.mk-when { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }
.mk-filters-toggle { display: none; }
@media (max-width: 1100px) {
  .mk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .mk-layout { grid-template-columns: 1fr; }
  .mk-filters { position: static; }
  .mk-filters-toggle { display: inline-flex; }
  .mk-filters:not(.is-open) .card-content { display: none; }
}
@media (max-width: 720px) {
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-col-opt { display: none; }
  .mk-toolbar .mk-sort { flex: 1 1 100%; }
}

/* ── News page ───────────────────────────────────────────────────────── */
.news-full { display: grid; gap: 1rem; }
.news-full article { padding: 1.25rem 1.375rem; scroll-margin-top: 6rem; }
.news-full article:target { border-color: var(--ember); }
.news-full .news-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; font-size: 0.75rem; color: var(--ink-faint); }
.news-tag { padding: 0.125rem 0.5rem; border: 1px solid rgb(61 139 255 / 0.45); border-radius: 2px; color: var(--sapphire-hi); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; }
.news-full h3 { font-size: 1.125rem; margin-bottom: 0.5rem; text-transform: none; letter-spacing: 0.02em; }
.news-full p { color: var(--ink-dim); font-size: 0.9rem; }
.data-list li a.news-link { display: contents; color: inherit; }
.data-list h4 { font-weight: 500; font-size: 0.875rem; color: var(--ink); }
.data-list .news-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }

/* ── Community band + footer ─────────────────────────────────────────── */
.zr-community {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(60% 120% at 50% 100%, rgb(61 139 255 / 0.16), transparent 70%),
    linear-gradient(180deg, transparent, rgb(10 18 40 / 0.6));
  border-block: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1;
}
.zr-community .lead { margin: 0 auto 1.75rem; }
.zr-community .row { justify-content: center; }
.btn-discord { background: #5865f2; color: #fff; box-shadow: var(--specular), var(--elev-1); }
.btn-discord:hover { filter: brightness(1.08); }

footer { background: linear-gradient(180deg, var(--surface-1), #040817); }
.footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-brand img { height: 3rem; width: auto; margin-bottom: 0.75rem; }
.zr-disclaimer { margin-top: 1rem; font-size: 0.6875rem; line-height: 1.6; color: var(--ink-faint); max-width: 80ch; }
.grid.zr-top { align-items: start; }
#news-list li h4 { flex: 1 1 auto; min-width: 0; }
#news-list li h4 a:hover { color: var(--ember-hi); }
#news-list .news-bullet { flex: 0 0 auto; width: 6px; height: 6px; background: var(--sapphire); transform: rotate(45deg); }
/* The item card hangs above its row; a scrolling wrapper would clip it on the
   first rows. Wide screens fit the whole table, so the wrapper can let it out. */
@media (min-width: 721px) { .mk-wrap { overflow: visible; } }

/* Grid children default to min-width:auto, which lets a wide table push the
   whole column past the viewport on phones. */
.mk-layout > * { min-width: 0; }
@media (max-width: 960px) { .mk-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .mk-table th, .mk-table td { padding: 0.5rem 0.4rem; }
  .mk-item { min-width: 0; gap: 0.5rem; }
  .mk-item .mk-icon { width: 2.125rem; height: 2.125rem; }
  .mk-table .mk-cur { display: block; margin-left: 0; }
  .mk-count { padding-inline: 0.75rem; }
  .mk-toolbar { padding: 0.75rem; }
}

/* Ranking podium in the Zayron card treatment. */
.pod-card { background: linear-gradient(180deg, rgb(23 36 72 / 0.9), rgb(10 18 40 / 0.96)); border-color: var(--line); box-shadow: var(--specular), var(--elev-1); }
.pod-card.pod-1 { border-color: rgb(217 171 69 / 0.55); background: linear-gradient(180deg, rgb(60 48 20 / 0.35), rgb(10 18 40 / 0.96)); }
.pod-face { border-radius: 50%; border: 2px solid var(--outline); }
.pod-1 .pod-face { border-color: var(--ember); }

/* ══ Header v2 — Zephyr-style navigation ════════════════════════════════
   Title-case sans labels, a pill on the current page, dropdowns for Game /
   Community / Account, and the two big actions (Download, Discord) on the
   right. Overrides the uppercase Cinzel nav above. */
#top_menu { justify-content: center; gap: 0.25rem; }
#top_menu li a {
  height: 2.5rem;
  padding-inline: 0.9rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
#top_menu li a:hover { color: var(--ember-hi); background: rgb(255 255 255 / 0.045); }
#top_menu li a[aria-current="page"] {
  color: var(--ember-hi);
  background: rgb(23 36 72 / 0.9);
  box-shadow: inset 0 0 0 1px var(--line);
}
#top_menu .sub-menu li a[aria-current="page"] { background: rgb(217 171 69 / 0.1); box-shadow: none; }
#top_menu .sub-menu li a:hover { background: rgb(255 255 255 / 0.05); }
#top_menu li.has-sub > a::after { margin-left: 0.25rem; }

.zr-nav-btn {
  height: 2.75rem;
  padding-inline: 1.375rem;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.zr-nav-btn i { font-size: 0.9375rem; }
.btn-sapphire.zr-nav-btn { background: linear-gradient(180deg, #3aa8ff 0%, #2386f0 55%, #1b63d6 100%); box-shadow: 0 6px 18px rgb(29 111 224 / 0.35), var(--specular); }
.btn-discord.zr-nav-btn  { background: linear-gradient(180deg, #8274ff 0%, #6a55f2 55%, #5541dc 100%); box-shadow: 0 6px 18px rgb(90 67 224 / 0.35), var(--specular); }
.zr-nav-btn:hover { filter: brightness(1.1); }

@media (max-width: 1440px) {
  #top_menu li a { padding-inline: 0.7rem; font-size: 0.875rem; }
  .zr-nav-btn { padding-inline: 1rem; }
}
@media (max-width: 1260px) {
  #top_menu li a { padding-inline: 0.5rem; font-size: 0.8125rem; }
  .zr-nav-btn { height: 2.375rem; padding-inline: 0.75rem; font-size: 0.75rem; }
  .zr-nav-btn span { display: none; }
}
@media (max-width: 1080px) {
  .zr-nav-btn span { display: inline; }
  #top_menu li a { height: 2.5rem; font-size: 0.9375rem; padding-inline: 0.75rem; }
  #top_menu { justify-content: flex-start; }
}

/* ══ Live Market v2 — three columns with the market map ═════════════════ */
.mk-page .shell { max-width: 1560px; }
.mk-layout {
  grid-template-columns: 15.5rem minmax(0, 1fr) 19.5rem;
  grid-template-areas: "filters main map";
}
.mk-filters { grid-area: filters; }
.mk-main { grid-area: main; }
.mk-map-card { grid-area: map; position: sticky; top: 5.5rem; }
.mk-map {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: radial-gradient(80% 80% at 50% 45%, #10204a, #060c1e 75%);
}
.mk-map-svg { display: block; width: 100%; height: 100%; }
.mk-map-ground { fill: rgb(61 139 255 / 0.06); stroke: rgb(61 139 255 / 0.35); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.mk-map-grid line { stroke: rgb(142 197 255 / 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-booth { cursor: pointer; }
.mk-booth-dot { fill: var(--ember); stroke: #1b1204; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 0.15s; }
.mk-booth-ring { fill: transparent; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mk-booth:hover .mk-booth-dot { fill: var(--ember-hi); }
.mk-booth.is-offline .mk-booth-dot { fill: var(--sapphire-hi); }
.mk-booth.is-current .mk-booth-dot { fill: #ff4d5a; }
.mk-booth.is-current .mk-booth-ring {
  stroke: #ff4d5a;
  fill: rgb(255 77 90 / 0.18);
  transform-box: fill-box;
  transform-origin: center;
  animation: mk-ping 1.6s ease-out infinite;
}
@keyframes mk-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-booth.is-current .mk-booth-ring { animation: none; } }
.mk-map-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--ink-dim); }
.mk-map-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.mk-map-key { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ember); }
.mk-map-key.is-current { background: #ff4d5a; box-shadow: 0 0 0 3px rgb(255 77 90 / 0.25); }
.mk-map-key.is-offline { background: var(--sapphire-hi); }
.mk-map-info { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--ink-dim); min-height: 2.5em; }
.mk-map-info strong { color: var(--ink); }
.mk-map-note { margin-top: 0.5rem; font-size: 0.6875rem; color: var(--ink-faint); }

@media (max-width: 1320px) {
  .mk-layout { grid-template-columns: 16rem minmax(0, 1fr); grid-template-areas: "filters main" "map main"; }
  .mk-filters, .mk-map-card { position: static; align-self: start; }
}
@media (max-width: 960px) {
  .mk-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "filters" "map" "main"; }
  .mk-map { max-width: 26rem; margin-inline: auto; }
}

/* Header: labels never wrap; the signed-in name yields first when tight. */
#top_menu li a { white-space: nowrap; }
@media (max-width: 1500px) and (min-width: 1081px) { .header-me #header-name { display: none; } }
/* Without artwork the isometric diamond is twice as wide as it is tall. */
.mk-map.is-schematic { aspect-ratio: 16 / 10; }
/* Neighbouring booths stand 2-3 tiles apart: only the dot takes the click. */
.mk-booth-ring { pointer-events: none; }

/* ══ Header v3 — Zayron's own look ══════════════════════════════════════
   No pill, no big coloured buttons on the right: the current page is marked
   the Zayron way — gold label over a gold rule with the logo's sapphire
   diamond in the middle. */
#top_menu li a[aria-current="page"],
#top_menu li a:hover { background: none; box-shadow: none; }
#top_menu > li > a { position: relative; }
#top_menu > li > a::before {
  content: "";
  position: absolute;
  left: 0.6rem; right: 0.6rem; bottom: 0.1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember) 30%, var(--ember) 70%, transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
#top_menu > li > a:hover::before { opacity: 0.6; transform: scaleX(1); }
#top_menu > li > a[aria-current="page"]::before {
  opacity: 1;
  transform: scaleX(1);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0 6 4 4 8 2 4Z' fill='%233d8bff'/%3E%3C/svg%3E") center / 7px 7px no-repeat,
    linear-gradient(90deg, transparent, var(--ember) 25%, transparent 46%, transparent 54%, var(--ember) 75%, transparent) center / 100% 1px no-repeat;
  height: 7px;
  bottom: -0.05rem;
}
#top_menu > li > a[aria-current="page"] { color: var(--ember-hi); text-shadow: 0 0 18px rgb(217 171 69 / 0.35); }
#top_menu .sub-menu li a[aria-current="page"] { background: rgb(217 171 69 / 0.1); }
#top_menu .sub-menu li a:hover { background: rgb(255 255 255 / 0.05); }
@media (max-width: 1080px) {
  #top_menu > li > a::before { display: none; }
  #top_menu > li > a[aria-current="page"] { background: rgb(217 171 69 / 0.08); }
}

/* Social links are drawn only once the config says they exist, so nothing
   flashes on reload and then disappears. app.js sets data-social-ready. */
html:not([data-social-ready]) [data-social] { display: none !important; }

/* ── Floating Discord ────────────────────────────────────────────────── */
.zr-discord-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.125rem 0.5rem 0.5rem;
  border-radius: 999px;
  color: var(--ink);
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(135deg, var(--ember-hi), #5865f2 55%, var(--sapphire)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.55), 0 0 26px rgb(88 101 242 / 0.25);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.zr-discord-fab:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgb(0 0 0 / 0.6), 0 0 34px rgb(88 101 242 / 0.45); }
.zr-fab-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8b95ff, #5865f2 60%, #3b44c4);
  color: #fff;
  font-size: 1.25rem;
}
.zr-fab-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgb(88 101 242 / 0.6);
  animation: zr-fab-ring 2.4s ease-out infinite;
}
@keyframes zr-fab-ring { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.zr-fab-text { display: grid; line-height: 1.15; }
.zr-fab-text strong { font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0.06em; }
.zr-fab-text small { font-size: 0.6875rem; color: var(--ink-dim); }
@media (max-width: 720px) {
  .zr-discord-fab { padding: 0.375rem; right: 0.875rem; bottom: 0.875rem; }
  .zr-fab-text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .zr-fab-icon::after { animation: none; } }

/* Market map with the real artwork: booths are 4 tiles apart on the strips. */
.mk-map-svg.has-image .mk-booth-dot { stroke-width: 1.5; }
/* Off the home page the Discord button folds to its icon (it floats over
   content there) and opens on hover; on the home page it stays open. */
.zr-fab-text { max-width: 12rem; overflow: hidden; white-space: nowrap; transition: max-width 0.3s var(--ease-out), opacity 0.2s; }
body:not(:has(.zr-hero)) .zr-discord-fab { gap: 0; padding-right: 0.5rem; }
body:not(:has(.zr-hero)) .zr-fab-text { max-width: 0; opacity: 0; }
body:not(:has(.zr-hero)) .zr-discord-fab:hover,
body:not(:has(.zr-hero)) .zr-discord-fab:focus-visible { gap: 0.75rem; padding-right: 1.125rem; }
body:not(:has(.zr-hero)) .zr-discord-fab:hover .zr-fab-text,
body:not(:has(.zr-hero)) .zr-discord-fab:focus-visible .zr-fab-text { max-width: 12rem; opacity: 1; }


/* ══ Live Market v3 — cart, item card, gem colours ═══════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Right column: cart above the map, sticky together on wide screens. */
.mk-side { grid-area: map; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; position: sticky; top: 5.5rem; min-width: 0; }
.mk-side .mk-map-card { position: static; }
@media (max-width: 1320px) { .mk-side { position: static; } }

/* Buy column */
.mk-table .mk-buy { width: 2.75rem; padding-left: 0.25rem; text-align: center; }
.mk-table.no-cart .mk-buy { display: none; }
.mk-add {
  display: inline-grid; place-items: center;
  width: 2.125rem; height: 2.125rem;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgb(212 165 55 / 0.06);
  color: var(--ember-hi);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease-out);
}
.mk-add:hover:not(:disabled) { border-color: var(--ember); background: rgb(212 165 55 / 0.16); transform: scale(1.06); }
.mk-add:focus-visible { outline: 2px solid var(--sapphire-hi); outline-offset: 2px; }
.mk-add.is-in { border-color: #3ecf8e; background: rgb(62 207 142 / 0.16); color: #57e3a3; }
.mk-add:disabled { opacity: 0.35; cursor: not-allowed; }
.mk-table tbody tr:has(.mk-add.is-in) { background: rgb(62 207 142 / 0.05); }

/* Cart card */
.mk-cart .card-header { gap: 0.5rem; }
.mk-cart-count {
  margin-left: auto; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--ember); color: #1b1204;
  font-size: 0.75rem; font-weight: 800; font-family: var(--font-mono);
}
.mk-cart .card-content { display: grid; gap: 0.75rem; }
.mk-cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-height: 19rem; overflow-y: auto; overscroll-behavior: contain; }
.mk-cart-list:empty { display: none; }
.mk-cart-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 1px solid var(--line); border-radius: 4px;
  background: linear-gradient(180deg, rgb(15 26 54 / 0.7), rgb(10 18 40 / 0.7));
}
.mk-cart-item .mk-icon { width: 2.5rem; height: 2.5rem; }
.mk-cart-item.is-blocked { opacity: 0.6; }
.mk-cart-item.is-blocked .mk-name { text-decoration: line-through; text-decoration-color: rgb(255 77 90 / 0.7); }
.mk-cart-body { min-width: 0; display: grid; gap: 0.125rem; }
.mk-cart-body .mk-name { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cart-line { font-size: 0.8125rem; }
.mk-cart-seller { font-size: 0.6875rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cart-seller i { margin-right: 0.3rem; font-size: 0.625rem; }
.mk-cart-flag { font-size: 0.6875rem; font-weight: 600; color: #ff8a8f; }
.mk-cart-flag.is-price { color: #ffb44d; }
.mk-cart-x {
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer;
}
.mk-cart-x:hover { background: rgb(255 77 90 / 0.14); color: #ff8a8f; }
.mk-cart-empty { margin: 0; font-size: 0.8125rem; color: var(--ink-faint); text-align: center; padding: 0.75rem 0.25rem; border: 1px dashed var(--line); border-radius: 4px; }
.mk-cart-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--line);
  font-family: var(--font-display, inherit); font-size: 0.875rem; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.mk-cart-total[hidden] { display: none; }
.mk-cart-sums { display: grid; justify-items: end; gap: 0.125rem; text-transform: none; letter-spacing: 0; }
.mk-cart-sums .mk-price { font-size: 1.0625rem; }
.mk-cart-buyer { display: grid; gap: 0.5rem; }
.mk-cart-buyer:empty { display: none; }
.mk-cart-as { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; font-size: 0.75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.mk-cart-as strong { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
.mk-cart-as select {
  flex: 1 1 auto; max-width: 12rem; height: 2rem; padding: 0 0.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-size: 0.8125rem; text-transform: none; letter-spacing: 0;
}
.mk-wallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; margin: 0; }
.mk-wallet div:first-child { grid-column: 1 / -1; }
.mk-wallet div { padding: 0.375rem 0.5rem; border: 1px solid var(--line); border-radius: 4px; background: rgb(5 10 26 / 0.5); min-width: 0; }
.mk-wallet dt { font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.mk-wallet dd { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ember-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-wallet dd.is-cps { color: var(--sapphire-hi); }
.mk-cart-off { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; font-size: 0.75rem; color: #ffb44d; }
.mk-cart-off .zr-dot { margin-top: 0.3rem; background: #ffb44d; box-shadow: none; }
.mk-cart-dim { font-size: 0.8125rem; color: var(--ink-faint); }
.mk-cart-login { width: 100%; justify-content: center; }
.mk-cart-why { margin: 0; font-size: 0.75rem; color: #ff8a8f; }
.mk-cart-why[hidden] { display: none; }
.mk-cart-actions { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; }
.mk-cart-actions .btn { justify-content: center; }
.mk-cart.is-busy #mk-cart-checkout { cursor: progress; }
.mk-cart-actions .btn:disabled { opacity: 0.4; filter: saturate(0.4); cursor: not-allowed; box-shadow: none; }
.mk-cart-msg { font-size: 0.8125rem; padding: 0.625rem 0.75rem; border-radius: 4px; border: 1px solid var(--line); background: rgb(5 10 26 / 0.6); color: var(--ink-dim); }
.mk-cart-msg[hidden] { display: none; }
.mk-cart-msg.is-ok { border-color: rgb(62 207 142 / 0.5); }
.mk-cart-msg.is-bad { border-color: rgb(255 77 90 / 0.5); color: #ffb3b6; }
.mk-cart-msg.is-mixed, .mk-cart-msg.is-warn { border-color: rgb(255 180 77 / 0.5); }
.mk-cart-msg strong { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.375rem; }
.mk-cart-msg strong.is-ok { color: #57e3a3; }
.mk-cart-msg strong.is-bad { color: #ff8a8f; }
.mk-cart-msg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.mk-cart-msg li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.4rem; font-size: 0.75rem; }
.mk-cart-msg li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.mk-cart-msg li em { grid-column: 2; font-style: normal; color: var(--ink-faint); }
.mk-cart-msg li.is-ok i { color: #57e3a3; }
.mk-cart-msg li.is-bad i { color: #ff8a8f; }
.mk-cart-msg li.is-bad em { color: #ffb3b6; }
.mk-spin {
  display: inline-block; width: 0.875rem; height: 0.875rem; margin-right: 0.5rem; vertical-align: -0.125rem;
  border: 2px solid rgb(212 165 55 / 0.25); border-top-color: var(--ember-hi); border-radius: 50%;
  animation: mk-spin 0.8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mk-spin { animation-duration: 2.4s; } }
.mk-cart-hint { margin: 0; font-size: 0.6875rem; color: var(--ink-faint); line-height: 1.5; }

/* Gems coloured by kind, brighter with the grade. */
.mk-gem.is-gem { --gem: var(--sapphire-hi); border-color: var(--gem); background: radial-gradient(circle at 35% 30%, #fff8 0 18%, transparent 40%), var(--gem); box-shadow: 0 0 6px color-mix(in srgb, var(--gem) 55%, transparent); }
.mk-gem.is-gem[data-grade="1"] { opacity: 0.55; box-shadow: none; }
.mk-gem.is-gem[data-grade="2"] { opacity: 0.8; }
.mk-gem[data-g="0"] { --gem: #ff7a3d; }   /* Phoenix */
.mk-gem[data-g="1"] { --gem: #3d9bff; }   /* Dragon */
.mk-gem[data-g="2"] { --gem: #ff4d5a; }   /* Fury */
.mk-gem[data-g="3"] { --gem: #c46bff; background: conic-gradient(#ff4d5a, #ffd34d, #3ecf8e, #3d9bff, #c46bff, #ff4d5a); }   /* Rainbow */
.mk-gem[data-g="4"] { --gem: #e9edf5; }   /* Kylin */
.mk-gem[data-g="5"] { --gem: #a970ff; }   /* Violet */
.mk-gem[data-g="6"] { --gem: #9fd8ff; }   /* Moon */
.mk-gem[data-g="7"] { --gem: #3ecf8e; }   /* Tortoise */
.mk-gem[data-g="10"] { --gem: #ffd34d; }  /* Thunder */
.mk-gem[data-g="12"] { --gem: #ffe9a8; }  /* Glory */

/* Item card, closer to the in-game one: bigger, gold edge, icon in the title,
   hanging under the item name instead of over the row above. */
.item-tip {
  min-width: 13.5rem; max-width: 17rem;
  padding: 0.75rem 0.875rem;
  background: linear-gradient(180deg, rgb(13 20 40 / 0.98), rgb(6 10 24 / 0.98));
  border: 1px solid rgb(212 165 55 / 0.55);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.tip-h { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.tip-h[data-q="S"] { color: #f2c14e; }
.tip-icon { width: 2rem; height: 2rem; flex: 0 0 auto; object-fit: contain; }
.tip-l { font-size: 0.8125rem; line-height: 1.55; color: #e8ebf3; }
.tip-l.is-plus  { color: #c58cff; }
.tip-l.is-sockh { margin-top: 0.25rem; }
.tip-l.is-sock  { color: #5ee07a; }
.tip-l.is-sock.is-empty { color: var(--ink-faint); }
.tip-l.is-bless { color: #ff9b3d; }
.tip-l.is-ench  { color: #ffd84d; }
.mk-item .item-tip { left: 1.5rem; top: calc(100% + 0.25rem); bottom: auto; z-index: 60; }


/* ══ Pre-launch (launch.comingSoon / countdown) ══════════════════════════ */
.zr-pre-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem; padding: 0.375rem 0.875rem;
  border: 1px solid rgb(212 165 55 / 0.45); border-radius: 999px;
  background: rgb(212 165 55 / 0.1);
  color: var(--ember-hi); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.zr-pre-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1rem 0 0; font-size: 0.875rem; }
.zr-hero .zr-pre-links { justify-content: center; }
.zr-pre-links a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-dim); text-decoration: none; border-bottom: 1px dashed transparent; }
.zr-pre-links a:hover { color: var(--ember-hi); border-bottom-color: currentColor; }
.countdown.is-soon .countdown-cells { justify-content: center; }
.cd-soon {
  display: inline-block; padding: 0.625rem 1.75rem;
  font-family: var(--font-display, "Cinzel", serif); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffe7a3, var(--ember) 60%, #a8781c); -webkit-background-clip: text; background-clip: text; color: transparent;
  border-block: 1px solid rgb(212 165 55 / 0.35);
}
.zr-pre-note {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.875rem 0 0; padding: 0.625rem 0.875rem;
  border: 1px solid rgb(212 165 55 / 0.35); border-radius: var(--radius); background: rgb(212 165 55 / 0.08);
  color: var(--ember-hi); font-size: 0.875rem;
}

/* How it works: four steps */
.zr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.zr-step { position: relative; padding: 1.75rem 1.25rem 1.25rem; text-align: center; }
.zr-step > i { font-size: 1.75rem; color: var(--ember-hi); margin-bottom: 0.75rem; display: block; }
.zr-step h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.zr-step p { margin: 0; font-size: 0.875rem; color: var(--ink-dim); line-height: 1.6; }
.zr-step-n {
  position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ember); color: #1b1204; font-weight: 800; font-size: 0.8125rem; box-shadow: 0 0 0 4px var(--bg, #050a1a);
}
@media (max-width: 1000px) { .zr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; } }
@media (max-width: 560px) { .zr-steps { grid-template-columns: minmax(0, 1fr); } }

/* Trailer */
.zr-trailer-wrap[hidden] { display: none; }
.zr-trailer {
  position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9;
  border: 1px solid rgb(212 165 55 / 0.4); border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55), 0 0 0 6px rgb(212 165 55 / 0.06);
}
.zr-trailer iframe, .zr-trailer video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Referral rewards */
.zr-referral { display: grid; gap: 1rem; }
.zr-ref-banner { display: block; width: 100%; max-width: 1100px; margin: 0 auto; height: auto; border-radius: 10px; border: 1px solid rgb(212 165 55 / 0.35); }
.zr-ref-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.zr-ref-tier { display: grid; justify-items: center; gap: 0.375rem; padding: 1.5rem 1rem; text-align: center; border-color: rgb(212 165 55 / 0.35); background: linear-gradient(180deg, rgb(212 165 55 / 0.1), transparent 60%), var(--surface); }
.zr-ref-rank { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ember); color: var(--ember-hi); font-weight: 800; }
.zr-ref-goal { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.zr-ref-reward { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.zr-ref-soon { display: grid; justify-items: center; gap: 0.875rem; padding: 2rem 1.25rem; text-align: center; max-width: 40rem; margin: 0 auto; }
.zr-ref-soon > i { font-size: 2.25rem; color: var(--ember-hi); }
.zr-ref-soon p { margin: 0; color: var(--ink-dim); }
.zr-ref-note { margin: 0; text-align: center; font-size: 0.8125rem; color: var(--ink-faint); }

/* Streamers */
.zr-streamers { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
.zr-streamers-copy h2 { margin: 0.25rem 0 0.75rem; }
.zr-st-points { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.zr-st-points li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.375rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; color: var(--ink-dim); }
.zr-st-points .fa-twitch { color: #a970ff; }
.zr-st-points .fa-youtube { color: #ff4d4d; }
.zr-st-points .fa-kickstarter-k { color: #53fc18; }
.zr-st-points .fa-tiktok { color: #e9edf5; }
.zr-st-note { margin: 0; font-size: 0.8125rem; color: var(--ink-faint); }
.zr-st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.875rem; }
.zr-st-grid .zr-st-wide { grid-column: 1 / -1; }
.zr-st-form textarea { height: auto; min-height: 5rem; padding-block: 0.5rem; resize: vertical; }
.zr-st-form .captcha-row img { max-width: 100%; height: auto; }
.zr-st-status { margin: 0 0 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-dim); }
.zr-st-status[hidden] { display: none; }
.zr-st-status.is-ok { border-color: rgb(62 207 142 / 0.5); color: #57e3a3; }
.zr-st-status.is-bad { border-color: rgb(255 77 90 / 0.5); color: #ffb3b6; }
#st-submit { width: 100%; justify-content: center; }
@media (max-width: 900px) { .zr-streamers { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
@media (max-width: 520px) { .zr-st-grid { grid-template-columns: minmax(0, 1fr); } }

/* Captcha slot keeps its size but shows nothing until the image arrives. */
.zr-st-form .captcha-row img:not([src]) { visibility: hidden; }
.zr-st-form .captcha-row { background: transparent; }


/* ══ Hero v4 — fits the first screen, animated emblem ════════════════════ */
/* The whole call to action (title, countdown, buttons) has to be visible
   without scrolling on a 1366x768 laptop. The emblem takes whatever height is
   left after the text, between a floor and a ceiling. */
.zr-hero, .zr-hero.has-bg {
  min-height: calc(100svh - 4.5rem);
  padding-block: clamp(0.75rem, 2.5vh, 2rem) clamp(1.25rem, 4vh, 3rem);
}
html[data-launch="open"] .zr-hero { padding-bottom: 6.5rem; }   /* room for the status bar */
.zr-emblem-wrap {
  --emblem-h: clamp(7.5rem, calc(100svh - 32rem), 21rem);
  position: relative;
  height: var(--emblem-h);
  aspect-ratio: 720 / 688;
  max-width: 80vw;
  margin-bottom: clamp(0.25rem, 1vh, 0.75rem);
  animation: zr-emblem-in 1.3s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.zr-emblem-float { position: absolute; inset: 0; animation: zr-emblem-float 7s ease-in-out 1.3s infinite; }
.zr-emblem-wrap .zr-emblem {
  width: 100%; height: 100%; margin: 0; object-fit: contain;
  animation: none;
  filter: drop-shadow(0 0 28px rgb(61 139 255 / 0.35)) drop-shadow(0 10px 24px rgb(0 0 0 / 0.6));
}
/* Breathing light behind: sapphire core, gold rim. */
.zr-emblem-glow {
  position: absolute; inset: -18% -22%;
  background:
    radial-gradient(closest-side, rgb(61 139 255 / 0.5), rgb(61 139 255 / 0.16) 55%, transparent 72%),
    radial-gradient(closest-side, transparent 56%, rgb(212 165 55 / 0.22) 68%, transparent 80%);
  filter: blur(6px);
  animation: zr-emblem-glow 4.8s ease-in-out infinite;
  pointer-events: none;
}
/* A thin gold ring slowly turning, like a seal behind the dragon. */
.zr-emblem-ring {
  position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgb(242 196 92 / 0.95) 20%, transparent 30% 50%, rgb(120 180 255 / 0.9) 62%, transparent 72% 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px rgb(242 196 92 / 0.6));
  opacity: 0.85;
  animation: zr-emblem-spin 18s linear infinite;
  pointer-events: none;
}
/* Light sweeping across the metal, cut to the emblem's own shape. */
.zr-emblem-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgb(255 240 200 / 0.35) 46%, rgb(255 255 255 / 0.62) 50%, rgb(255 240 200 / 0.3) 54%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  -webkit-mask: url("/assets/img/emblem.webp") center / contain no-repeat;
          mask: url("/assets/img/emblem.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: zr-emblem-shine 6.5s ease-in-out 1.6s infinite;
  pointer-events: none;
}
/* Embers drifting up out of the emblem. */
.zr-embers { position: absolute; inset: 10% 8% 0; pointer-events: none; }
.zr-embers i {
  position: absolute; bottom: 8%; left: var(--x, 50%);
  width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0, #f2b84b 45%, rgb(242 184 75 / 0) 70%);
  box-shadow: 0 0 6px 1px rgb(242 184 75 / 0.6);
  opacity: 0;
  animation: zr-ember var(--d, 6s) linear var(--w, 0s) infinite;
}
.zr-embers i:nth-child(3n) { background: radial-gradient(circle, #e6f0ff 0, #5aa0ff 45%, rgb(90 160 255 / 0) 70%); box-shadow: 0 0 6px 1px rgb(90 160 255 / 0.6); }
.zr-embers i:nth-child(1)  { --x: 12%; --s: 4px; --d: 6.5s; --w: 0.2s; --dx: -18px; }
.zr-embers i:nth-child(2)  { --x: 24%; --s: 3px; --d: 7.5s; --w: 1.9s; --dx: 14px; }
.zr-embers i:nth-child(3)  { --x: 33%; --s: 5px; --d: 5.8s; --w: 3.1s; --dx: -10px; }
.zr-embers i:nth-child(4)  { --x: 41%; --s: 3px; --d: 8.2s; --w: 0.9s; --dx: 22px; }
.zr-embers i:nth-child(5)  { --x: 50%; --s: 4px; --d: 6.9s; --w: 4.4s; --dx: -16px; }
.zr-embers i:nth-child(6)  { --x: 58%; --s: 3px; --d: 7.1s; --w: 2.6s; --dx: 12px; }
.zr-embers i:nth-child(7)  { --x: 66%; --s: 5px; --d: 6.2s; --w: 5.3s; --dx: -20px; }
.zr-embers i:nth-child(8)  { --x: 75%; --s: 3px; --d: 8.6s; --w: 1.4s; --dx: 16px; }
.zr-embers i:nth-child(9)  { --x: 86%; --s: 4px; --d: 6.7s; --w: 3.8s; --dx: -12px; }
.zr-embers i:nth-child(10) { --x: 18%; --s: 2px; --d: 9.1s; --w: 6.0s; --dx: 24px; }
.zr-embers i:nth-child(11) { --x: 46%; --s: 2px; --d: 7.8s; --w: 6.8s; --dx: -22px; }
.zr-embers i:nth-child(12) { --x: 71%; --s: 2px; --d: 8.9s; --w: 0.5s; --dx: 18px; }
.zr-embers i:nth-child(13) { --x: 29%; --s: 4px; --d: 6.1s; --w: 7.4s; --dx: 10px; }
.zr-embers i:nth-child(14) { --x: 62%; --s: 3px; --d: 7.3s; --w: 8.1s; --dx: -14px; }

@keyframes zr-emblem-in {
  0%   { opacity: 0; scale: 0.82; filter: blur(10px) brightness(1.8); }
  60%  { opacity: 1; filter: blur(0) brightness(1.25); }
  100% { opacity: 1; scale: 1; filter: none; }
}
@keyframes zr-emblem-float { 50% { translate: 0 -8px; } }
@keyframes zr-emblem-glow { 50% { opacity: 0.6; scale: 0.94; } }
@keyframes zr-emblem-spin { to { rotate: 360deg; } }
@keyframes zr-emblem-shine {
  0%, 62% { background-position: 160% 0; }
  88%, 100% { background-position: -60% 0; }
}
@keyframes zr-ember {
  0%   { opacity: 0; translate: 0 0; }
  12%  { opacity: 1; }
  70%  { opacity: 0.8; }
  100% { opacity: 0; translate: var(--dx, 0) calc(-1 * var(--emblem-h, 18rem) * 0.95); }
}
@media (prefers-reduced-motion: reduce) {
  /* Nothing travels, spins or zooms; light that brightens in place stays. */
  .zr-emblem-wrap, .zr-emblem-float, .zr-emblem-ring { animation: none; }
  .zr-emblem-glow { animation-duration: 7s; }
  .zr-embers { display: none; }
}

/* Tighter vertical rhythm so the buttons stay above the fold. */
.zr-hero .eyebrow { margin-bottom: clamp(0.25rem, 0.8vh, 0.5rem); }
html[data-launch="pending"] .zr-hero .eyebrow { display: none; }   /* the pre-launch tag takes its place */
.zr-pre-tag { margin-bottom: clamp(0.5rem, 1.4vh, 1rem); }
.zr-hero h1 { margin-bottom: clamp(0.5rem, 1.6vh, 1rem); }
.zr-hero .countdown { margin-bottom: clamp(0.625rem, 1.8vh, 1.75rem); }
.zr-hero .countdown-label { margin-bottom: clamp(0.375rem, 1vh, 0.875rem); }
.zr-hero .cd-soon { padding-block: clamp(0.125rem, 0.8vh, 0.625rem); font-size: clamp(1.5rem, 4.6vh, 2.75rem); }
.zr-hero .lead { max-width: 66ch; margin-bottom: clamp(0.75rem, 2vh, 1.75rem); }
/* The launch time per region: only "your time" on short screens. */
@media (max-height: 880px), (max-width: 900px) { .zr-hero .lz-row:not(.is-yours) { display: none; } }
/* A real countdown (cells + launch time) is taller than "coming soon": give
   the difference back from the emblem. */
.zr-hero:has(.cd-cell) .zr-emblem-wrap { --emblem-h: clamp(7rem, calc(100svh - 35rem), 19rem); }
.zr-hero .cd-cell { padding-block: clamp(0.5rem, 1.4vh, 0.875rem) clamp(0.4rem, 1vh, 0.6875rem); }
.zr-hero .launch-zones { margin-top: clamp(0.375rem, 1vh, 0.875rem); }

@media (max-width: 640px) {
  .zr-emblem-wrap { --emblem-h: clamp(6rem, calc(100svh - 33rem), 15rem); }
  .zr-hero .lead { font-size: 0.9375rem; }
  .zr-hero .hero-actions .btn-lg { padding-block: 0.75rem; }
  .zr-pre-links { margin-top: 0.75rem; gap: 0.5rem 1rem; font-size: 0.8125rem; }
}
/* Short phones: the description repeats further down the page; the buttons
   matter more up here. */
@media (max-width: 640px) and (max-height: 720px) { .zr-hero .lead { display: none; } }
@media (max-height: 600px) and (min-width: 641px) { .zr-hero .lead { display: none; } }

@media (max-width: 640px) { .zr-hero:has(.cd-cell) .zr-emblem-wrap { --emblem-h: clamp(6rem, calc(100svh - 34rem), 14rem); } }


/* ══ Emblem FX (WebGL layer, app.js FnMountEmblemFx) ═════════════════════ */
/* The canvas is larger than the emblem by the shader's margin (M = 0.16 of
   the canvas on each side) so the flame aura has room to climb. */
.zr-emblem-fx {
  position: absolute;
  /* A canvas is a replaced element: insets alone do not stretch it. */
  left: -23.53%; top: -23.53%;
  width: 147.06%; height: 147.06%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.zr-emblem-wrap.has-fx .zr-emblem-fx { opacity: 1; }
.zr-emblem-wrap.has-fx .zr-emblem { opacity: 0; transition: opacity 0.6s ease; }
.zr-emblem-wrap.has-fx .zr-emblem-shine { display: none; }   /* the shader does its own sweep */

/* Light rays turning slowly behind everything. */
.zr-emblem-rays {
  position: absolute; left: 50%; top: 45%;
  width: 190%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg,
    rgb(242 196 92 / 0.16) 0deg 2.5deg, transparent 2.5deg 14deg,
    rgb(110 170 255 / 0.18) 14deg 17deg, transparent 17deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, rgb(0 0 0 / 0.55) 38%, transparent 72%);
          mask: radial-gradient(closest-side, #000 12%, rgb(0 0 0 / 0.55) 38%, transparent 72%);
  mix-blend-mode: screen;
  animation: zr-emblem-spin 60s linear infinite;
  pointer-events: none;
}
.zr-embers i { width: calc(var(--s, 4px) + 1px); height: calc(var(--s, 4px) + 1px); }
@media (prefers-reduced-motion: reduce) { .zr-emblem-rays { animation: none; } }