/* ===========================================================================
   Hero art: the 832x588 key-art scene upscaled 4x with Real-ESRGAN (x4plus)
   to 3328x2352; dwarf-1920.jpg is the same image area-averaged down.

   L2PEARL — site redesign preview (same approach as L2GVE.ORG)

   One dark world: the dwarf's cave sets the palette — deep teal-navy stone,
   lantern gold, the pearl's warm white and the amethyst of his apron.
   The hero is the key art brought to life in layers: a slow camera drift,
   mouse parallax, a breathing pearl, runes that catch the light, the water
   circle pulsing and motes drifting up. Everything stops for reduced motion.
   Every live panel falls back to sample data on its own, so one dead
   endpoint never blanks the page.
   =========================================================================== */

:root {
  --ink:       #06090F;
  --ink-2:     #0A0F18;
  --surface:   #0F1724;
  --surface-2: #142033;
  --edge:      #22314A;
  --edge-soft: #182436;

  --bone:   #EEE9DD;
  --muted:  #98A3B6;
  --faint:  #62718A;

  --gold:    #E2B25A;
  --gold-2:  #F6DA9A;
  --gold-deep: #6B4E17;
  --pearl:   #F3EEF8;
  --amethyst:#9A68D6;
  --amethyst-deep:#2A1740;
  --teal:    #56C7C9;
  --teal-deep:#0C2A33;

  --live: #46D69A;
  --down: #E0566B;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --label:   "Barlow Condensed", "Arial Narrow", sans-serif;

  --gutter: clamp(16px, 4.5vw, 56px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .26em;
  font-size: .78rem; font-weight: 600; color: var(--gold);
}

/* ---------------------------------------------------------------- ambient */
#atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .6; }
.veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 8% 30%, color-mix(in srgb, var(--teal-deep) 70%, transparent), transparent 62%),
    radial-gradient(60% 80% at 92% 75%, color-mix(in srgb, var(--amethyst-deep) 75%, transparent), transparent 62%);
}
.page { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- top bar */
.bar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink) 74%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge-soft);
}
.bar__row { display: flex; align-items: center; gap: 10px; min-height: 66px; flex-wrap: wrap; padding-block: 8px; }
.sigil {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: 1.1rem;
  letter-spacing: .18em; margin-inline-end: 18px; white-space: nowrap;
  color: var(--gold-2);
}
.sigil img {
  width: auto; height: 42px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(245, 184, 58, .22));
}
/* Two-tone wordmark: L2 in pearl silver, the name in gold. */
.sigil__word { display: inline-flex; }
.sigil__l2 { background: linear-gradient(180deg, #FFFFFF, #AEB8CC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sigil__name { background: linear-gradient(180deg, #FFE08A, #D98E17); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.menu a {
  padding: 9px 14px; text-decoration: none;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .16em;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  border: 1px solid transparent; transition: color .18s, border-color .18s, background .18s;
}
.menu a:hover { color: var(--bone); border-color: var(--edge); background: rgba(238,233,221,.04); }
.bar__cta { margin-inline-start: auto; display: flex; gap: 10px; }

/* Angular beveled button */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; font-size: .95rem; padding: 15px 34px;
  border: 0; cursor: pointer; text-decoration: none; color: var(--bone);
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: transform .16s, filter .16s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn--gold { background: linear-gradient(180deg, #F1CE7E, #C8923A); color: #1A1206; }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 250% 100%; animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.btn--ghost { background: color-mix(in srgb, var(--surface-2) 80%, transparent); box-shadow: inset 0 0 0 1px var(--edge); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.btn--sm { padding: 10px 22px; font-size: .82rem; clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative; min-height: min(94vh, 920px); display: grid; overflow: hidden;
  border-bottom: 1px solid var(--edge);
  background: radial-gradient(80% 80% at 60% 40%, #10283A, var(--ink) 70%);
}
.stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* The art box keeps the image's aspect so every glow layer can be placed in
   image percentages and stay on the pearl, the runes and the water circle at
   any window size. On wide screens the whole painting sits to the right, a
   little taller than the hero, and dissolves into the dark under the text;
   phones get a full-bleed crop (see the 760px query). */
.art {
  position: absolute; top: 50%; right: -3%;
  height: 108%; aspect-ratio: 1664 / 1176;
  transform: translateY(-50%) translate(var(--px, 0px), var(--py, 0px));
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
/* The camera drifts by translation only. Animating scale (a Ken Burns zoom) makes the browser
   rasterise the painting once and stretch that bitmap for as long as the animation runs, which
   is what made the UHD art look soft; a pure translate is drawn pixel for pixel. */
.art__drift { position: absolute; inset: 0; animation: drift 34s ease-in-out infinite alternate; }
@keyframes drift {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(-.9%, .5%); }
  70%  { transform: translate(-1.6%, -.2%); }
  100% { transform: translate(-.6%, -.7%); }
}
.art__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* WebGL layer: the same painting re-drawn every frame by a shader (moving water, pearl light,
   god rays, rune glow, shockwaves). It covers the <img>, which stays as the fallback. */
.art__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art.gl-on .lit, .art.gl-on .glow--flora { display: none; }
.art.surging .glow--pearl { animation: surge-flare 1.8s ease-out; }
.art.surging .rays { animation-duration: 70s, 1.8s; }
@keyframes surge-flare {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(2.6); }
  100% { opacity: .55; transform: translate(-50%, -50%) scale(.9); }
}

/* Brightened copies of the art, clipped to one feature and screened back on
   top: the runes and the water circle light up without touching the rest. */
.lit {
  position: absolute; inset: 0; background: url("dwarf-3328.jpg") 0 0 / 100% 100%;
  mix-blend-mode: screen; pointer-events: none;
}
.lit--runes {
  clip-path: polygon(78% 0, 100% 0, 100% 36%, 80% 36%);
  filter: brightness(1.5) contrast(1.6) saturate(1.4);
  -webkit-mask-image: linear-gradient(100deg, transparent 0 38%, #000 50%, transparent 62% 100%);
  mask-image: linear-gradient(100deg, transparent 0 38%, #000 50%, transparent 62% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  animation: runesweep 4.8s ease-in-out infinite;
}
@keyframes runesweep {
  0%   { -webkit-mask-position: 120% 0; mask-position: 120% 0; opacity: .0; }
  15%  { opacity: .9; }
  70%  { opacity: .9; }
  100% { -webkit-mask-position: -20% 0; mask-position: -20% 0; opacity: 0; }
}
.lit--circle {
  clip-path: ellipse(33% 11% at 52% 89%);
  filter: brightness(1.7) contrast(1.5) saturate(1.3);
  animation: circle 5.5s ease-in-out infinite;
}
@keyframes circle { 0%, 100% { opacity: .05; } 50% { opacity: .75; } }

.glow { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; transform: translate(-50%, -50%); }
.glow--pearl {
  left: var(--pearl-x, 73.6%); top: var(--pearl-y, 22.6%); width: 13%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,246,220,.95) 0 14%, rgba(255,214,140,.55) 30%, rgba(255,180,90,.18) 52%, transparent 70%);
  animation: breathe 4.2s ease-in-out infinite;
}
.glow--halo {
  left: var(--pearl-x, 73.6%); top: var(--pearl-y, 22.6%); width: 44%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,210,130,.22), rgba(255,190,110,.06) 45%, transparent 70%);
  animation: breathe 4.2s ease-in-out infinite reverse;
}
@keyframes breathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.9); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
.glow--flora {
  width: 9%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(120,230,255,.5), rgba(90,200,240,.12) 45%, transparent 70%);
  animation: flora 6s ease-in-out infinite;
}
.glow--flora.f1 { left: 4%;  top: 73%; }
.glow--flora.f2 { left: 13%; top: 58%; animation-delay: -2s; }
.glow--flora.f3 { left: 93%; top: 71%; animation-delay: -4s; }
.glow--flora.f4 { left: 97%; top: 81%; animation-delay: -1s; }
@keyframes flora { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }

/* Light rays turning slowly around the pearl. */
.rays {
  position: absolute; left: var(--pearl-x, 73.6%); top: var(--pearl-y, 22.6%); width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 224, 160, .16) 0deg 3deg, transparent 3deg 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, rgba(0,0,0,.55) 22%, transparent 58%);
  mask-image: radial-gradient(circle, #000 6%, rgba(0,0,0,.55) 22%, transparent 58%);
  mix-blend-mode: screen; pointer-events: none; animation: rays 70s linear infinite, rayfade 4.2s ease-in-out infinite;
}
.rays--back { width: 80%; animation: rays 110s linear infinite reverse, rayfade 4.2s ease-in-out infinite reverse; opacity: .6; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rayfade { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* A slow pulse wave leaving the pearl. */
.wave {
  position: absolute; left: var(--pearl-x, 73.6%); top: var(--pearl-y, 22.6%); width: 8%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255, 226, 170, .55); box-shadow: 0 0 24px rgba(255, 210, 140, .5), inset 0 0 18px rgba(255, 210, 140, .35);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; mix-blend-mode: screen; pointer-events: none;
  animation: wave 6s ease-out infinite;
}
.wave--2 { animation-delay: 3s; }
@keyframes wave {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  10%  { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}

/* Mist rolling over the water. */
.mist {
  position: absolute; left: -20%; right: -20%; bottom: -4%; height: 42%; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(28% 40% at 20% 60%, rgba(170, 215, 235, .16), transparent 70%),
    radial-gradient(24% 36% at 55% 70%, rgba(190, 225, 240, .14), transparent 70%),
    radial-gradient(30% 42% at 85% 55%, rgba(160, 210, 230, .15), transparent 70%);
  filter: blur(6px); animation: mist 46s linear infinite alternate;
}
.mist--2 { bottom: 4%; height: 34%; opacity: .8; animation-duration: 64s; animation-direction: alternate-reverse; }
@keyframes mist { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

#motes { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 34%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 70%, transparent) 0%, transparent 18%),
    linear-gradient(0deg, var(--ink) 0%, transparent 30%);
}
.hero__inner {
  position: relative; z-index: 2; display: grid; align-content: center; gap: 22px;
  padding-block: clamp(48px, 9vw, 110px); max-width: 1240px;
}
.hero__copy { max-width: 540px; display: grid; gap: 20px; }
.hero__tag { font-family: var(--label); text-transform: uppercase; letter-spacing: .34em; font-size: clamp(.74rem, 2vw, .92rem); color: var(--gold); }
.hero__title {
  font-size: clamp(3rem, 9vw, 6.2rem); font-weight: 900; line-height: .9; letter-spacing: .05em;
  background: linear-gradient(100deg, var(--gold-2) 0%, var(--pearl) 45%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 26px rgba(0,0,0,.9));
}
.hero__lede { color: #CCD3DF; font-size: 1.08rem; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.hero__lede strong { color: var(--bone); font-weight: 600; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.status {
  display: flex; flex-wrap: wrap; width: fit-content;
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ink) 70%, transparent); backdrop-filter: blur(8px);
}
.status__cell { padding: 11px 18px; border-inline-end: 1px solid var(--edge); display: grid; gap: 2px; min-width: 110px; }
.status__cell:last-child { border-inline-end: 0; }
.status__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .17em; font-size: .7rem; color: var(--faint); }
.status__v { font-size: 1.08rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pulse { display: inline-flex; align-items: center; gap: 8px; }
.pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 2.4s ease-out infinite; }
.pulse[data-state="down"]::before { background: var(--down); animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 65%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%);
  font-family: var(--label); letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--faint);
  text-decoration: none; display: grid; justify-items: center; gap: 6px;
}
.scroll-cue::after { content: ""; width: 1px; height: 28px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }

/* ------------------------------------------------------------------ rates */
.rates { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--edge); }
.rate {
  position: relative; padding: clamp(22px, 3vw, 34px) var(--gutter); text-align: center;
  border-inline-end: 1px solid var(--edge-soft); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--ink-2) 90%, transparent));
}
.rate:last-child { border-inline-end: 0; }
.rate::before {
  content: ""; position: absolute; left: 50%; top: -60%; width: 70%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%);
}
.rate__k { position: relative; font-family: var(--label); text-transform: uppercase; letter-spacing: .24em; font-size: .78rem; color: var(--muted); }
.rate__v { position: relative; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; color: var(--gold-2); }
.rate__v small { font-size: .45em; color: var(--gold); margin-right: 2px; }

/* --------------------------------------------------------------- sections */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid var(--edge-soft); }
.section__head { display: grid; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 720px; }
.section__title { font-size: clamp(1.8rem, 4.4vw, 2.8rem); letter-spacing: .03em; }
.section__lede { color: var(--muted); }

/* ------------------------------------------------------------- timeline */
.road { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; }
.road::before {
  content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px;
  background: linear-gradient(90deg, var(--gold) var(--done, 0%), var(--edge) var(--done, 0%));
}
.stop { position: relative; padding-top: 58px; padding-inline-end: 14px; }
.stop::before {
  content: ""; position: absolute; top: 14px; left: 0; width: 20px; height: 20px; transform: rotate(45deg);
  background: var(--ink); border: 2px solid var(--edge);
}
.stop[data-state="past"]::before { background: var(--gold-deep); border-color: var(--gold); }
.stop[data-state="next"]::before { background: var(--gold); border-color: var(--gold-2); box-shadow: 0 0 18px var(--gold); animation: beacon 2s ease-in-out infinite; }
@keyframes beacon { 50% { box-shadow: 0 0 34px var(--gold); } }
.stop__date { font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--gold); }
.stop__title { font-size: 1.12rem; margin: 4px 0 6px; }
.stop__text { color: var(--muted); font-size: .92rem; }
.stop[data-state="past"] .stop__title, .stop[data-state="past"] .stop__text { opacity: .6; }
.countdown {
  margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: 20px 24px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 85%, transparent);
}
.countdown__label { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); font-size: .85rem; }
.countdown__label strong { color: var(--gold-2); font-weight: 700; }
.countdown__clock { display: flex; gap: 10px; }
.cd { min-width: 70px; padding: 8px 10px; text-align: center; background: var(--surface-2); border: 1px solid var(--edge); }
.cd b { display: block; font-family: var(--display); font-size: 1.8rem; line-height: 1.1; color: var(--pearl); font-variant-numeric: tabular-nums; }
.cd span { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: .66rem; color: var(--faint); }

/* ------------------------------------------------------------ spec sheet */
.sheet { display: grid; grid-template-columns: 260px 1fr; border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.sheet__tabs { display: grid; align-content: start; border-inline-end: 1px solid var(--edge); background: var(--ink-2); }
.sheet__tab {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px; text-align: start; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--edge-soft);
  font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-size: .92rem; color: var(--muted);
  transition: color .18s, background .18s;
}
.sheet__tab:hover { color: var(--bone); background: rgba(238,233,221,.03); }
.sheet__tab[aria-selected="true"] { color: var(--gold-2); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent); box-shadow: inset 3px 0 0 var(--gold); }
.sheet__tab svg { width: 18px; height: 18px; flex: none; }
.panel { padding: clamp(22px, 3vw, 36px); }
.panel__intro { color: var(--muted); margin-bottom: 22px; max-width: 64ch; }
.rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--edge-soft); }
.row__k { color: var(--muted); }
.row__v { font-weight: 600; text-align: end; color: var(--bone); }
.row__v em { font-style: normal; color: var(--gold-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card { padding: 18px 20px; border: 1px solid var(--edge); background: var(--surface-2); display: grid; gap: 6px; align-content: start; }
.card__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--gold); }
.card__t { font-family: var(--display); font-size: 1.08rem; }
.card__p { color: var(--muted); font-size: .92rem; }
.cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 22px; margin-top: 18px; }
.cmd { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--edge-soft); }
.cmd code { font-family: ui-monospace, Consolas, monospace; color: var(--gold-2); min-width: 86px; }
.cmd span { color: var(--muted); font-size: .92rem; }

/* ---------------------------------------------------------------- ladders */
.ladders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ladder { border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 88%, transparent); display: flex; flex-direction: column; }
.ladder__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--edge); background: var(--surface-2); }
.ladder__title { font-family: var(--label); text-transform: uppercase; letter-spacing: .17em; font-size: .9rem; font-weight: 700; }
.ladder__unit { font-family: var(--label); letter-spacing: .13em; font-size: .72rem; color: var(--faint); text-transform: uppercase; }
table.lt { width: 100%; border-collapse: collapse; font-size: .94rem; }
.lt td { padding: 10px 18px; border-bottom: 1px solid var(--edge-soft); white-space: nowrap; }
.lt tr:last-child td { border-bottom: 0; }
.lt tbody tr:hover { background: rgba(238,233,221,.035); }
.lt .rank { color: var(--faint); width: 1%; font-variant-numeric: tabular-nums; }
.lt tr:nth-child(1) .rank { color: var(--gold-2); }
.lt tr:nth-child(2) .rank { color: #D6DCE6; }
.lt tr:nth-child(3) .rank { color: #D69A5E; }
.lt .who { display: grid; }
.lt .who small { color: var(--faint); font-size: .78rem; }
.lt .val { text-align: end; font-variant-numeric: tabular-nums; color: var(--gold-2); font-weight: 600; }
.ladder__empty { padding: 26px 18px; color: var(--faint); text-align: center; }
.sample-note { margin-top: 12px; color: var(--faint); font-size: .82rem; }

/* ------------------------------------------------------------------ world */
.world { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.castles, .bosses { border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.castle { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 18px; border-bottom: 1px solid var(--edge-soft); }
.castle:last-child { border-bottom: 0; }
.castle__name { font-family: var(--display); font-size: 1.02rem; }
.castle__owner { color: var(--muted); font-size: .9rem; }
.castle__siege { grid-row: span 2; align-self: center; text-align: end; font-family: var(--label); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--faint); }
.castle__siege b { display: block; color: var(--gold-2); font-size: .95rem; letter-spacing: .06em; }
.boss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--edge-soft); }
.boss:last-child { border-bottom: 0; }
.boss__name { font-family: var(--display); }
.boss__meta { color: var(--faint); font-size: .85rem; }
.tag { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; padding: 4px 10px; border: 1px solid; white-space: nowrap; }
.tag--alive { color: var(--live); border-color: color-mix(in srgb, var(--live) 50%, transparent); background: color-mix(in srgb, var(--live) 10%, transparent); }
.tag--dead  { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); background: color-mix(in srgb, var(--down) 10%, transparent); }

/* -------------------------------------------------------------- community */
.community { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: stretch; }
.discord {
  position: relative; overflow: hidden; padding: clamp(26px, 4vw, 40px); border: 1px solid var(--edge);
  background: radial-gradient(90% 120% at 100% 0%, rgba(88,101,242,.28), transparent 60%), var(--surface);
  display: grid; gap: 14px; align-content: center;
}
.discord h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.discord p { color: var(--muted); max-width: 44ch; }
.votes { border: 1px solid var(--edge); background: var(--surface); padding: 22px; display: grid; gap: 12px; align-content: start; }
.votes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.votes a {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; text-decoration: none;
  border: 1px solid var(--edge); background: var(--surface-2); font-family: var(--label); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem;
  transition: border-color .18s, color .18s;
}
.votes a:hover { border-color: var(--gold); color: var(--gold-2); }

/* ----------------------------------------------------------------- footer */
.footer { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-block: 34px; border-top: 1px solid var(--edge); color: var(--faint); font-size: .88rem; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--bone); }
.preview-flag {
  position: fixed; right: 14px; bottom: 14px; z-index: 80; padding: 8px 14px;
  font-family: var(--label); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem;
  background: var(--amethyst); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* A tab with a screenshot: the in-game window beside its cards. */
.panel__split { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.panel__shot {
  padding: 14px; border: 1px solid var(--edge); cursor: zoom-in;
  background: radial-gradient(80% 90% at 50% 40%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%), var(--ink-2);
}
.panel__shot img { display: block; width: 280px; max-width: 100%; height: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); transition: transform .3s; }
.panel__shot:hover img { transform: translateY(-3px); }
.panel__split .cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 760px) { .panel__split { grid-template-columns: 1fr; } .panel__shot { justify-self: center; } }

/* Vote banners — the listing sites' own buttons, lined up at one height like the live site. */
.vote-banners { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vote-banner {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; text-decoration: none;
  border: 1px solid var(--edge); background: var(--surface-2); transition: border-color .18s, transform .18s, box-shadow .18s;
}
.vote-banner:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 22%, transparent); }
.vote-banner img { display: block; height: 52px; width: auto; max-width: 190px; }
.vote-banner--card img { height: 34px; }
.vote-banner--card span { font-family: var(--label); letter-spacing: .14em; font-weight: 700; padding-right: 4px; }

/* Four ladders in a 2 x 2 grid. */
.ladders--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lt .val .sub { color: var(--faint); font-weight: 500; }

/* ------------------------------------------------------------- sound toggle */
/* Same behaviour as the live site: muted until the first click anywhere, then the theme plays
   unless the visitor turned it off before (remembered in localStorage). */
.sound {
  position: fixed; left: 18px; bottom: 18px; z-index: 70; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--gold-2);
  background: color-mix(in srgb, var(--ink) 80%, transparent); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 18px color-mix(in srgb, var(--gold) 20%, transparent);
  transition: transform .18s, border-color .18s;
}
.sound:hover { transform: scale(1.06); border-color: var(--gold); }
.sound svg { width: 22px; height: 22px; }
.sound .icon-off { display: none; }
.sound.muted .icon-on { display: none; }
.sound.muted .icon-off { display: block; color: var(--muted); }
.sound__pulse { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); animation: sound-pulse 2.2s ease-out infinite; pointer-events: none; }
.sound.muted .sound__pulse { display: none; }
@keyframes sound-pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.sound__bars { position: absolute; bottom: -2px; right: -2px; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.sound__bars i { width: 3px; background: var(--gold); animation: eq 1s ease-in-out infinite; }
.sound__bars i:nth-child(2) { animation-delay: -.3s; } .sound__bars i:nth-child(3) { animation-delay: -.6s; }
.sound.muted .sound__bars { display: none; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* --------------------------------------------------------------- showcase */
/* In-game screenshots, shown at their own size or smaller — never stretched,
   so the client's pixel art stays crisp. */
.showcase { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.shot { margin: 0; display: grid; grid-template-rows: 1fr auto; border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.shot__frame {
  position: relative; display: grid; place-items: center; padding: 22px; border: 0; cursor: zoom-in;
  background: radial-gradient(80% 90% at 50% 40%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%), var(--ink-2);
  border-bottom: 1px solid var(--edge);
}
.shot__frame img {
  display: block; max-width: 100%; height: auto; image-rendering: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
  transition: transform .3s ease, box-shadow .3s ease;
}
.shot__frame:hover img { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0, 0, 0, .7), 0 0 0 1px var(--gold), 0 0 34px color-mix(in srgb, var(--gold) 22%, transparent); }
.shot__frame--npc img { max-width: min(100%, 320px); }
.shot figcaption { display: grid; gap: 4px; padding: 18px 22px 20px; }
.shot__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; color: var(--gold); }
.shot__t { font-family: var(--display); font-size: 1.25rem; }
.shot__p { color: var(--muted); font-size: .94rem; }

.lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: rgba(3, 5, 9, .9); backdrop-filter: blur(6px); cursor: zoom-out; }
.lightbox img { max-width: min(100%, 1180px); max-height: 88vh; width: auto; height: auto; box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.lightbox__close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--bone); font-size: 2rem; cursor: pointer; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .ladders, .ladders--four { grid-template-columns: 1fr; }
  .world, .community, .showcase { grid-template-columns: 1fr; }
  .road { grid-template-columns: repeat(4, 1fr); row-gap: 20px; }
  .road::before { display: none; }
}
@media (max-width: 760px) {
  .menu { display: none; }
  .hero { min-height: 88vh; }
  .art { right: auto; left: 50%; height: 100%; transform: translate(-63%, -50%) translate(var(--px, 0px), var(--py, 0px)); -webkit-mask-image: none; mask-image: none; }
  .scroll-cue { display: none; }
  .status { width: 100%; flex-wrap: nowrap; }
  .status__cell { padding: 9px 12px; }
  .hero__scrim { background: linear-gradient(0deg, var(--ink) 8%, color-mix(in srgb, var(--ink) 70%, transparent) 50%, color-mix(in srgb, var(--ink) 40%, transparent) 100%); }
  .hero__inner { align-content: end; }
  .rates { grid-template-columns: repeat(2, 1fr); }
  .rate:nth-child(2) { border-inline-end: 0; }
  .rate:nth-child(-n+2) { border-bottom: 1px solid var(--edge-soft); }
  .sheet { grid-template-columns: 1fr; }
  .sheet__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--edge); }
  .sheet__tab { border-bottom: 0; border-inline-end: 1px solid var(--edge-soft); }
  .sheet__tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--gold); }
  .rows { grid-template-columns: 1fr; }
  .road { grid-template-columns: 1fr 1fr; }
  .status__cell { min-width: 0; flex: 1 1 0; }
  .bar__cta .btn--ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #motes, #atmos { display: none; }
}
.showcase--one { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: auto; }

/* ============================================================ rankings page */
.menu a[aria-current="page"] { color: var(--gold-2); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.rk-hero .acct-hero__inner { align-items: flex-end; padding-block: 56px 38px; }
.rk { display: grid; gap: 22px; padding-block: 34px 90px; }
.rk > *, .rk-table > * { min-width: 0; }
.rk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--edge); background: var(--surface); }
.rk-tab {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 12px; cursor: pointer;
  background: transparent; border: 0; border-inline-end: 1px solid var(--edge-soft);
  font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: .92rem; color: var(--muted);
  transition: color .18s, background .18s;
}
.rk-tab:last-child { border-inline-end: 0; }
.rk-tab:hover { color: var(--bone); background: rgba(238, 233, 221, .03); }
.rk-tab[aria-selected="true"] { color: var(--gold-2); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, transparent), transparent); box-shadow: inset 0 -3px 0 var(--gold); }
.rk-tab svg { width: 18px; height: 18px; flex: none; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.pod {
  --medal: #D6DCE6; position: relative; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 26px 16px 20px; border: 1px solid color-mix(in srgb, var(--medal) 45%, transparent);
  background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--medal) 18%, transparent), transparent 70%), var(--surface);
}
.pod--1 { --medal: #F2CF7A; padding-block: 40px 26px; box-shadow: 0 0 36px color-mix(in srgb, var(--gold) 20%, transparent); }
.pod--3 { --medal: #D69A5E; }
.pod__medal {
  width: 44px; height: 44px; display: grid; place-items: center; transform: rotate(45deg); margin-bottom: 10px;
  border: 2px solid var(--medal); color: var(--medal); font-family: var(--display); font-weight: 900; font-size: 1.1rem;
  background: color-mix(in srgb, var(--medal) 12%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--medal) 35%, transparent);
}
.pod__medal span { display: block; transform: rotate(-45deg); line-height: 1; }
.pod__name { font-family: var(--display); font-size: 1.35rem; }
.pod--1 .pod__name { font-size: 1.65rem; color: var(--gold-2); }
.pod__sub { color: var(--muted); font-size: .88rem; min-height: 1.3em; }
.pod__value { margin-top: 6px; font-family: var(--label); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--medal); }

.rk-tt td, .rk-tt th { padding: 12px 14px; }
.rk-rank { width: 1%; color: var(--faint); font-family: var(--display); font-weight: 700; }
.rk-tt tr.top1 .rk-rank { color: #F2CF7A; }
.rk-tt tr.top2 .rk-rank { color: #D6DCE6; }
.rk-tt tr.top3 .rk-rank { color: #D69A5E; }
.rk-tt tr.top1 { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%); }
.rk-name { font-weight: 600; color: var(--bone); }
.rk-none { color: var(--faint); }
.rk-tt tbody tr:hover { background: rgba(238, 233, 221, .035); }
@media (max-width: 760px) {
  .rk-tabs { grid-template-columns: 1fr 1fr; }
  .rk-tab:nth-child(2) { border-inline-end: 0; }
  .rk-tab:nth-child(-n+2) { border-bottom: 1px solid var(--edge-soft); }
  .podium { grid-template-columns: 1fr; }
  .pod--1 { order: -1; }
}

/* ------------------------------------------------------------- seasons */
.seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.season {
  position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start;
  padding: 28px 26px 30px; border: 1px solid var(--edge);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface) 85%, transparent));
}
.season p { color: var(--muted); }
.season__no {
  position: absolute; right: 18px; top: 6px; font-family: var(--display); font-weight: 900; font-size: 5.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--gold) 35%, transparent); pointer-events: none;
}
.season__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; font-weight: 700; color: var(--gold); }
.season__date { font-size: 1.45rem; color: var(--bone); }
.season--now { border-color: color-mix(in srgb, var(--gold) 55%, var(--edge)); box-shadow: inset 0 3px 0 var(--gold), 0 0 40px color-mix(in srgb, var(--gold) 10%, transparent); }
@media (max-width: 860px) { .seasons { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- legal */
.legal { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); max-width: 920px; }
.legal__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.legal__tabs a {
  padding: 9px 16px; text-decoration: none; border: 1px solid var(--edge);
  font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; font-weight: 600; color: var(--muted);
}
.legal__tabs a:hover { color: var(--bone); background: rgba(238,233,221,.04); }
.legal__tabs a[aria-current="page"] { color: var(--gold-2); border-color: color-mix(in srgb, var(--gold) 60%, var(--edge)); box-shadow: inset 0 -2px 0 var(--gold); }
.legal__body {
  display: grid; gap: 14px; padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: color-mix(in srgb, var(--bone) 88%, var(--muted)); max-width: 100%; min-width: 0;
}
.legal__body > * { max-width: 72ch; }
.legal__body h2 { font-size: 1.2rem; color: var(--gold-2); margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--edge-soft); }
.legal__body h2:first-of-type { margin-top: 4px; }
.legal__body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal__body li::marker { color: var(--gold); }
.legal__body strong { color: var(--bone); }
.legal__body a { color: var(--gold-2); text-underline-offset: 3px; }
.legal-updated { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: var(--faint); }

/* ------------------------------------------------------ language switch */
[data-lang-switcher] { display: flex; }
.lang-switch { position: relative; }
.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 38px; padding: 0 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge); color: var(--muted);
  font-family: var(--label); font-weight: 700; letter-spacing: .14em; font-size: .85rem;
}
.lang-switch-btn:hover, .lang-switch.is-open .lang-switch-btn { color: var(--bone); border-color: color-mix(in srgb, var(--gold) 45%, var(--edge)); }
.lang-switch-globe { width: 16px; height: 16px; }
.lang-switch-caret { width: 12px; height: 12px; transition: transform .18s; }
.lang-switch.is-open .lang-switch-caret { transform: rotate(180deg); }
.lang-switch-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px; display: none;
  padding: 6px; border: 1px solid var(--edge); background: var(--ink-2); box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.lang-switch.is-open .lang-switch-menu { display: grid; }
.lang-switch-menu button {
  text-align: start; padding: 9px 12px; cursor: pointer; background: transparent; border: 0; color: var(--muted);
  font-family: var(--body); font-size: .95rem;
}
.lang-switch-menu button:hover { background: rgba(238,233,221,.05); color: var(--bone); }
.lang-switch-menu button[aria-current="true"] { color: var(--gold-2); }
.lang-switch-menu button[aria-current="true"]::before { content: "◆ "; font-size: .7em; }

/* ----------------------------------------------------------------- news */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.news-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 90%, transparent);
  transition: border-color .18s, transform .18s;
}
.news-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--edge)); transform: translateY(-3px); }
.news-card__hit { position: absolute; inset: 0; z-index: 2; background: transparent; border: 0; cursor: pointer; }
.news-card__hit:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.news-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.news-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.news-card__body p { color: var(--muted); font-size: .95rem; }
.news-card__meta { font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--gold); }
.news-card__title { font-size: 1.2rem; }
.news-card__more { margin-top: auto; padding-top: 6px; font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; font-weight: 700; color: var(--gold-2); }
.news-card__more::after { content: " →"; }
@media (max-width: 960px) { .news { grid-template-columns: 1fr; max-width: 620px; } }

.article .article__panel {
  width: min(760px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; gap: 12px; padding: 0 0 30px;
}
.article__img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.article__panel > .news-card__meta, .article__title, .article__body { margin-inline: clamp(20px, 4vw, 36px); }
.article__title { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.article__body { display: grid; gap: 12px; color: color-mix(in srgb, var(--bone) 88%, var(--muted)); }
.article__body h4 { font-family: var(--display); font-size: 1.05rem; color: var(--gold-2); margin: 8px 0 0; }
.article__body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.article__body li::marker { color: var(--gold); }
.article__body strong { color: var(--bone); }
.article__closing { padding-top: 12px; border-top: 1px solid var(--edge-soft); color: var(--gold-2); }
.article .modal__close { z-index: 3; background: rgba(6, 9, 15, .7); }
.news-card--featured { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.news-card--featured .news-card__img { height: 100%; aspect-ratio: auto; min-height: 280px; }
.news-card--featured .news-card__body { justify-content: center; padding: clamp(22px, 3vw, 40px); gap: 12px; }
.news-card--featured .news-card__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.news-card--featured .news-card__more { margin-top: 8px; }
@media (max-width: 960px) {
  .news-card--featured { grid-template-columns: 1fr; }
  .news-card--featured .news-card__img { aspect-ratio: 16 / 9; min-height: 0; }
}

/* Social links under the Discord card: brand logos, in order Discord, Facebook, Instagram, TikTok. */
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; text-decoration: none;
  border: 1px solid var(--edge); background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--bone); font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; font-weight: 600;
  transition: border-color .18s, background .18s, transform .18s;
}
.social svg { width: 22px; height: 22px; flex: none; }
.social--discord svg { color: #5865F2; }
.social--facebook svg { color: #1877F2; }
.social--instagram svg { color: #E4405F; }
.social--tiktok svg { color: #F2F2F2; filter: drop-shadow(1.5px 1px 0 #FE2C55) drop-shadow(-1.5px -1px 0 #25F4EE); }
.social:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--edge)); background: rgba(238, 233, 221, .05); transform: translateY(-2px); }

/* ------------------------------------------------------- Discord popup */
.dpop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.dpop__backdrop { position: absolute; inset: 0; background: rgba(3, 5, 9, .72); backdrop-filter: blur(5px); opacity: 0; transition: opacity .22s; }
.dpop__panel {
  position: relative; width: min(400px, 100%); display: grid; gap: 8px; justify-items: center; text-align: center; padding: 30px 26px 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--edge);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent);
  opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .22s, transform .22s;
}
.dpop__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.dpop.is-open .dpop__backdrop { opacity: 1; }
.dpop.is-open .dpop__panel { opacity: 1; transform: none; }
.dpop__timer { position: absolute; top: 12px; left: 14px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--edge); font-family: var(--label); font-weight: 700; color: var(--gold-2); }
.dpop__seal { height: 58px; filter: drop-shadow(0 0 14px rgba(245, 184, 58, .35)); }
.dpop__title { font-size: 1.45rem; }
.dpop__sub { color: var(--muted); font-size: .92rem; }
.dpop__card { width: 100%; display: grid; gap: 6px; margin-top: 6px; padding: 16px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--ink) 60%, transparent); }
.dpop__badges { display: flex; justify-content: center; gap: 6px; }
.dpop__badges span { padding: 3px 9px; border: 1px solid var(--edge); font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--muted); }
.dpop__badges .hot { color: #1A1206; background: var(--gold); border-color: var(--gold); }
.dpop__big { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--gold-2); }
.dpop__date { color: var(--bone); font-size: .92rem; }
.dpop__card ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; color: var(--muted); font-size: .9rem; }
.dpop__join { width: 100%; margin-top: 8px; }

/* The Finder explanation spans the full row under the three PvP events. */
#panel-events .card:nth-child(4) { grid-column: 1 / -1; }
#panel-events .card:nth-child(4) .card__p { max-width: 70ch; }

/* Creator invite (referral.js): a card at the bottom of the home page. */
.refbar {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(620px, calc(100% - 32px));
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 18px;
  padding: 14px 44px 14px 18px; background: color-mix(in srgb, var(--ink-2) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.refbar__k { margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.refbar__name { margin: 2px 0 0; font-family: var(--display, inherit); font-size: 1.15rem; color: var(--gold-2); }
.refbar__t { margin: 0; font-size: .88rem; color: color-mix(in srgb, var(--bone) 85%, var(--muted)); line-height: 1.45; }
.refbar__x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.refbar__x:hover { color: var(--bone); }
@media (max-width: 640px) {
  /* Clear of the sound toggle in the bottom-left corner. */
  .refbar { grid-template-columns: 1fr; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .refbar .btn { justify-self: start; }
}

/* Manual client download under the hero buttons (shown from 9 Oct 17:00) */
.manual { margin-top: 18px; max-width: 560px; text-align: left; border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.manual > summary { cursor: pointer; padding: 12px 16px; color: var(--gold-2); font-size: .92rem; list-style-position: inside; }
.manual > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.manual__body { padding: 2px 16px 14px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.manual__body strong { color: var(--bone); font-weight: 600; }
.manual__files { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.manual__files li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--edge); font-variant-numeric: tabular-nums; }
.manual__files a { color: var(--gold-2); text-decoration: none; overflow-wrap: anywhere; }
.manual__files a:hover { text-decoration: underline; }
.manual__note { margin: 0; color: var(--faint); font-size: .85rem; }

/* -------------------------------------------------------------- servers (x5 + x45, 2026-10-23) */
.menu a[aria-current="page"] { color: var(--gold-2); }
.servers { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.servers__head { display: grid; gap: 10px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.realms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.realm {
  position: relative; display: grid; grid-template-rows: 220px auto; overflow: hidden; border: 1px solid var(--edge);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
}
.realm--live { border-color: color-mix(in srgb, var(--gold) 55%, var(--edge)); box-shadow: inset 0 3px 0 var(--gold), 0 0 44px color-mix(in srgb, var(--gold) 10%, transparent); }
.realm--soon { box-shadow: inset 0 3px 0 var(--amethyst), 0 0 44px color-mix(in srgb, var(--amethyst) 10%, transparent); }
.realm__art { position: relative; overflow: hidden; }
.realm__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .6s ease; }
.realm:hover .realm__art img { transform: scale(1.04); }
.realm__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface-2) 96%, transparent)); }
.realm__body { display: grid; gap: 14px; align-content: start; padding: 4px clamp(20px, 3vw, 32px) clamp(24px, 3vw, 32px); margin-top: -34px; position: relative; }
.realm__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.realm__state {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ink) 70%, transparent); font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--bone);
}
.realm__state--soon { color: #d7c3f5; border-color: color-mix(in srgb, var(--amethyst) 55%, var(--edge)); }
.realm__online { font-family: var(--label); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; color: var(--live); }
.realm__name { font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: .04em; }
.realm__name em { font-style: normal; color: var(--gold-2); }
.realm--soon .realm__name em { color: #c9a8f2; }
.realm__line { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; color: var(--gold); margin-top: -8px; }
.realm--soon .realm__line { color: #b38be6; }
.realm__text { color: var(--muted); }
.realm__text strong { color: var(--bone); }
.realm__rates { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--edge-soft); }
.realm__rates div { display: grid; gap: 2px; justify-items: center; padding: 12px 6px; border-inline-end: 1px solid var(--edge-soft); text-align: center; }
.realm__rates div:last-child { border-inline-end: 0; }
.realm__rates b { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; color: var(--gold-2); }
.realm__rates b small { font-size: .55em; color: var(--gold); margin-right: 1px; }
.realm--soon .realm__rates b { color: var(--gold-2); }
.realm__rates span { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--faint); }
.realm__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.realm__list li { position: relative; padding-left: 20px; color: color-mix(in srgb, var(--bone) 86%, var(--muted)); }
.realm__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.realm--soon .realm__list li::before { background: var(--amethyst); }
.realm__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.compare { margin-top: clamp(56px, 8vw, 96px); }
.compare__table { border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.compare__row { display: grid; grid-template-columns: 180px 1fr 1fr; border-bottom: 1px solid var(--edge-soft); }
.compare__row:last-child { border-bottom: 0; }
.compare__row span { padding: 13px 18px; border-inline-end: 1px solid var(--edge-soft); color: color-mix(in srgb, var(--bone) 88%, var(--muted)); }
.compare__row span:last-child { border-inline-end: 0; }
.compare__row span[role="rowheader"] { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: var(--muted); }
.compare__row--head span { font-family: var(--display); font-weight: 700; color: var(--gold-2); }
.compare__row--head span:last-child { color: #c9a8f2; }
.compare__note { color: var(--faint); margin-top: 14px; font-size: .92rem; }
@media (max-width: 900px) {
  .realms { grid-template-columns: 1fr; }
  .compare__row { grid-template-columns: 110px 1fr 1fr; }
  .compare__row span { padding: 11px 10px; font-size: .92rem; }
}
@media (max-width: 520px) { .realm__rates { grid-template-columns: repeat(2, 1fr); } .realm__rates div:nth-child(2) { border-inline-end: 0; } .realm__rates div:nth-child(-n+2) { border-bottom: 1px solid var(--edge-soft); } }

/* feature guide (features.js, 2026-10-23): big buttons on the left, details on the right */
.fx { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.fx__nav { display: grid; gap: 8px; }
.fx__btn {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 12px 18px; text-align: start; cursor: pointer;
  background: linear-gradient(180deg, var(--surface-2), var(--ink-2)); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--edge));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(238,233,221,.05);
  font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .95rem; color: var(--bone);
  transition: color .18s, border-color .18s, background .18s;
}
.fx__btn svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.fx__btn span { flex: 1; }
.fx__btn:hover { border-color: var(--gold); color: var(--gold-2); }
.fx__btn[aria-current="true"], .fx__group.is-current > .fx__btn--group {
  color: var(--gold-2); border-color: var(--gold);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 20%, var(--ink-2)), var(--ink-2));
}
.fx__chev { width: 18px !important; height: 18px !important; transition: transform .2s; }
.fx__btn--group[aria-expanded="true"] .fx__chev { transform: rotate(180deg); }
.fx__sub { display: grid; gap: 6px; padding: 8px 0 4px 26px; border-inline-start: 1px solid var(--edge); margin-inline-start: 28px; }
.fx__btn--sub { min-height: 42px; padding: 9px 16px; font-size: .84rem; letter-spacing: .12em; background: var(--ink-2); border-color: var(--edge); }
.fx__panels { border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--edge)); background: color-mix(in srgb, var(--surface) 90%, transparent); position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.fx__panel { padding: clamp(22px, 3vw, 36px); scroll-margin-top: 90px; }
.fx__title { font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--pearl); margin-bottom: 10px; }
.fx__intro { color: var(--muted); margin-bottom: 22px; max-width: 64ch; }
.fx__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 34px; }
.fx__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--edge-soft); }
.fx__k { color: var(--muted); }
.fx__v { font-weight: 600; text-align: end; color: var(--bone); }
.fx__v em { font-style: normal; color: var(--gold-2); }
.fx__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fx__card { padding: 18px 20px; border: 1px solid var(--edge); background: var(--surface-2); display: grid; gap: 6px; align-content: start; }
.fx__ck { font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--gold); }
.fx__ct { font-family: var(--display); font-size: 1.08rem; }
.fx__cp { color: var(--muted); font-size: .92rem; }
.fx__list { display: grid; gap: 10px; padding: 0; list-style: none; }
.fx__list li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--edge-soft); }
.fx__list li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); }
.fx__cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 22px; }
.fx__cmd { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--edge-soft); }
.fx__cmd code { font-family: ui-monospace, Consolas, monospace; color: var(--gold-2); min-width: 110px; }
.fx__cmd span { color: var(--muted); font-size: .92rem; }
.fx__note { margin-top: 20px; padding: 12px 16px; border-inline-start: 3px solid var(--gold); background: var(--surface-2); color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) {
  .fx { grid-template-columns: 1fr; }
  .fx__nav { grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; }
  .fx__group { grid-column: 1 / -1; }
  .fx__btn { min-height: 48px; padding: 10px 12px; gap: 10px; font-size: .8rem; letter-spacing: .1em; }
  .fx__btn svg { width: 18px; height: 18px; }
  .fx__sub { grid-template-columns: 1fr 1fr; padding-inline-start: 12px; margin-inline-start: 12px; }
  .fx__panels { position: static; max-height: none; overflow: visible; }
  .fx__rows { grid-template-columns: 1fr; }
}
.realms--one { grid-template-columns: 1fr; max-width: 900px; padding-top: 30px; }
.features-page { padding-block: 40px 70px; }
.features-page .section__head { margin-bottom: 28px; }
/* server switch above the feature guide */
.fx-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 620px; margin: 0 0 22px; }
.fx-switch a { display: grid; gap: 2px; padding: 14px 20px; text-align: center; text-decoration: none; border: 1px solid var(--edge); background: var(--ink-2); color: var(--muted); transition: color .18s, border-color .18s; }
.fx-switch a b { font-family: var(--display); font-size: 1.15rem; color: inherit; }
.fx-switch a small { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--faint); }
.fx-switch a:hover { color: var(--bone); border-color: var(--gold); }
.fx-switch a[aria-current="page"] { color: var(--gold-2); border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 18%, var(--ink-2)), var(--ink-2)); box-shadow: inset 0 -3px 0 var(--gold); }
.fx__shot { display: block; width: 100%; max-width: 800px; margin: 0 0 22px; padding: 0; border: 1px solid var(--edge); background: #000; cursor: zoom-in; }
.fx__shot img { display: block; width: 100%; height: auto; }
.fx__shot--narrow { width: auto; max-width: 100%; }
.fx__shot--narrow img { width: auto; max-height: 340px; }
.fx-zoom { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(3,5,9,.92); cursor: zoom-out; }
.fx-zoom img { max-width: 100%; max-height: 100%; border: 1px solid var(--edge); }
/* three servers (H5 added 2026-10-23) */
.realms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.realms--one { grid-template-columns: 1fr; }
.compare__row { grid-template-columns: 160px 1fr 1fr 1fr; }
.compare__row--head span:nth-child(3) { color: #c9a8f2; }
.compare__row--head span:last-child { color: #9fd3c7; }
.fx-switch { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
@media (max-width: 1100px) { .realms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .realms { grid-template-columns: 1fr; }
  .compare__table { overflow-x: auto; }
  .compare__row { grid-template-columns: 100px repeat(3, minmax(120px, 1fr)); min-width: 480px; }
}
@media (max-width: 560px) { .fx-switch { grid-template-columns: 1fr; } }
/* server buttons on the rankings and account pages (2026-10-23) */
.srv-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 900px; margin-top: 28px; margin-bottom: 8px; }
.srv-pick button, .srv-opt { display: grid; gap: 2px; padding: 12px 16px; text-align: center; cursor: pointer; border: 1px solid var(--edge); background: var(--ink-2); color: var(--muted); font: inherit; transition: color .18s, border-color .18s; }
.srv-pick b, .srv-opt b { font-family: var(--display); font-size: 1.08rem; color: inherit; }
.srv-pick small, .srv-opt small { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--faint); }
.srv-pick button:hover, .srv-opt:hover { color: var(--bone); border-color: var(--gold); }
.srv-pick button[aria-current="true"], .srv-opt:has(input:checked) { color: var(--gold-2); border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 18%, var(--ink-2)), var(--ink-2)); box-shadow: inset 0 -3px 0 var(--gold); }
.rk-soon { margin-block: 26px 60px; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--edge); background: color-mix(in srgb, var(--surface) 88%, transparent); text-align: center; }
.rk-soon__t { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--pearl); margin-bottom: 10px; }
.rk-soon p { color: var(--muted); max-width: 60ch; margin-inline: auto; }
.rk-soon strong { color: var(--gold-2); }
.srv-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.srv-opt { position: relative; }
.srv-opt input { position: absolute; opacity: 0; pointer-events: none; }
.srv-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.acc__server { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--gold); }
@media (max-width: 640px) { .srv-pick, .srv-opts { grid-template-columns: 1fr; } }
/* top menu, style F (owner, 2026-10-23): engraved gold serif letters, ornament under the active item */
.menu { gap: 26px; }
.menu a {
  position: relative; padding: 6px 0; border: 0; background: none;
  font-family: var(--display); text-transform: none; letter-spacing: .08em; font-size: 1rem; font-weight: 700; color: #8f97a6;
}
.menu a:hover, .menu a[aria-current="page"] {
  border: 0; background: linear-gradient(180deg, #FFF1C4, #E2B25A 55%, #9C7330); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 46px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #E2B25A, transparent);
}
.menu a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; bottom: -11px; width: 6px; height: 6px; background: #E2B25A; transform: translateX(-50%) rotate(45deg);
}
/* whole server card is clickable (servers.html) */
.realm[data-href] { cursor: pointer; transition: border-color .2s, transform .2s; }
.realm[data-href]:hover { border-color: var(--gold); transform: translateY(-3px); }
/* server buttons carry the server's picture behind a dark veil (owner, 2026-10-24) */
.srv-pick button[style*="--srv-bg"], .srv-opt[style*="--srv-bg"] {
  padding-block: 18px; color: #C9C3B8;
  background: linear-gradient(180deg, rgba(6,9,15,.62), rgba(6,9,15,.88)), var(--srv-bg) center 30% / cover no-repeat;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.srv-pick button[style*="--srv-bg"] small, .srv-opt[style*="--srv-bg"] small { color: #A9B1BF; }
.srv-pick button[style*="--srv-bg"][aria-current="true"], .srv-opt[style*="--srv-bg"]:has(input:checked) {
  color: var(--gold-2);
  background: linear-gradient(180deg, rgba(43,35,18,.45), rgba(6,9,15,.82)), var(--srv-bg) center 30% / cover no-repeat;
}
/* Discord pop-up: the three servers (2026-10-24) */
.dpop__servers { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.dpop__servers li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--edge-soft); text-align: start; }
.dpop__servers li:last-child { border-bottom: 0; }
.dpop__servers b { font-family: var(--display); color: var(--pearl); font-size: 1.02rem; white-space: nowrap; }
.dpop__servers span { color: var(--muted); font-size: .9rem; text-align: end; }
.dpop__servers span.live { color: var(--live); }
/* home hero: the three worlds (owner, 2026-10-24) */
.worlds { display: grid; gap: 10px; margin-top: 4px; }
.worlds__k { font-family: var(--label); text-transform: uppercase; letter-spacing: .26em; font-size: .74rem; color: var(--gold); }
.worlds__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wcard { position: relative; display: grid; align-content: end; gap: 3px; min-height: 92px; padding: 12px 14px; text-decoration: none; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--edge));
  background: linear-gradient(180deg, rgba(6,9,15,.25), rgba(6,9,15,.92) 75%), var(--w-bg) center 30% / cover no-repeat;
  box-shadow: 0 10px 26px rgba(0,0,0,.45); transition: transform .2s, border-color .2s, box-shadow .2s; }
.wcard:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(226,178,90,.35); }
.wcard b { font-family: var(--display); font-size: 1.05rem; color: var(--pearl); text-shadow: 0 2px 8px rgba(0,0,0,.9); white-space: nowrap; }
.wcard b em { font-style: normal; color: var(--gold-2); }
.wcard small { display: flex; align-items: center; gap: 6px; font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: #C9C3B8; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.wcard--live small { color: var(--live); }
.wcard--live small i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); }
@media (max-width: 520px) { .worlds__row { grid-template-columns: 1fr; } .wcard { min-height: 64px; } }
.wcard--live small[data-state="down"] { color: #F59AA8; }
.wcard--live small[data-state="down"] i { background: #E0566B; box-shadow: 0 0 8px #E0566B; animation: none; }
.wcard--live small[data-state="up"] i { animation: wcardPulse 1.8s ease-in-out infinite; }
@keyframes wcardPulse { 50% { box-shadow: 0 0 2px var(--live); opacity: .55; } }
.wcard__n { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: rgba(6,9,15,.78); border: 1px solid color-mix(in srgb, var(--live) 55%, transparent); color: var(--live);
  font-family: var(--label); font-weight: 700; font-size: .74rem; letter-spacing: .06em; }
.wcard__n svg { width: 12px; height: 12px; }