/* ============================================================
   EHODRAN  //  network operations console
   ----------------------------------------------------------------
   Design system: tactical dossier.
   Everything reads like a wasteland terminal — coordinate badges,
   monospaced metadata, hairline rules, occasional big neon moments.
   Cyan is SYSTEM. Magenta is the PLAYER. Yellow is WARN. Red is
   DANGER. 90% of every page is mid-greys + near-black; the neon
   accents are focal, not chrome paint.
   ============================================================ */

/* ---------- palette + tokens ---------- */
:root {
    /* Backgrounds — five steps from absolute black to a barely-blue mid. */
    --bg-0: #04050a;          /* page */
    --bg-1: #080b14;          /* surface */
    --bg-2: #0c1220;          /* elevated surface */
    --bg-3: #121a2b;          /* card / well */
    --bg-4: #1a2438;          /* hover, divider stripe */

    /* Foregrounds. */
    --fg:        #e7f1fa;     /* primary text */
    --fg-mid:    #93a8ba;     /* secondary text */
    --fg-dim:    #5a6f84;     /* metadata, captions */
    --fg-faint:  #36495d;     /* hairline rule colour */

    /* Accents. */
    --cy:        #00f0ff;     /* cyan — SYSTEM */
    --cy-soft:   #008a9c;
    --cy-bright: #5cf6ff;
    --cy-glow:        rgba(0, 240, 255, 0.55);
    --cy-glow-soft:   rgba(0, 240, 255, 0.16);
    --cy-tint:        rgba(0, 240, 255, 0.06);

    --mg:        #ff2bd6;     /* magenta — PLAYER */
    --mg-soft:   rgba(255, 43, 214, 0.55);
    --mg-glow:   rgba(255, 43, 214, 0.22);
    --mg-tint:   rgba(255, 43, 214, 0.06);

    --warn:      #ffd23f;
    --danger:    #ff3b5c;

    /* Legacy alias names — every page on the site still references these.
       Keeping the cyan->accent / hot->magenta mapping so old class names
       (.btn-primary, .news-card, .rank-1 etc.) automatically pick up the
       new palette without any Razor template edits. */
    --bg: var(--bg-0);
    --bg-elev: var(--bg-1);
    --bg-elev-2: var(--bg-2);
    --line: var(--fg-faint);
    --line-soft: var(--bg-4);
    --text: var(--fg);
    --text-dim: var(--fg-dim);
    --accent: var(--cy);
    --accent-soft: var(--cy-soft);
    --accent-bright: var(--cy-bright);
    --accent-glow: var(--cy-glow);
    --accent-glow-soft: var(--cy-glow-soft);
    --hot: var(--mg);
    --hot-soft: var(--mg-soft);
    --hot-glow: var(--mg-glow);

    /* Typography. */
    --display: "Orbitron", "Rajdhani", sans-serif;
    --body:    "Rajdhani", system-ui, sans-serif;
    --mono:    "JetBrains Mono", "Fira Code", "Consolas", ui-monospace, monospace;

    /* Motion. */
    --ease:      cubic-bezier(.2, .8, .25, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);

    /* Layout. */
    --max-w: 1280px;
    --rail-w: 48px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { background: var(--bg-0); color-scheme: dark; }

body {
    color: var(--fg);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;

    /* Layered backdrop:
       1. magenta glow top-right + cyan glow top-left (player/system
          accents bleeding through the upper corners)
       2. faint structural grid that drifts behind everything
       3. solid base */
    background-color: var(--bg-0);
    background-image:
        radial-gradient(ellipse 900px 500px at 92% -8%,  rgba(255, 43, 214, 0.10), transparent 70%),
        radial-gradient(ellipse 1100px 600px at  8% 4%,  rgba(0,  240, 255, 0.08), transparent 75%),
        linear-gradient(rgba(0, 240, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.022) 1px, transparent 1px),
        linear-gradient(180deg, var(--bg-0) 0%, #020308 100%);
    background-size: auto, auto, 56px 56px, 56px 56px, auto;
    background-attachment: fixed;
}

/* CRT scanline overlay — kept very subtle to read as "screen", not "filter". */
body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 240, 255, 0.020) 0,
        rgba(0, 240, 255, 0.020) 1px,
        transparent 1px,
        transparent 4px
    );
    mix-blend-mode: overlay;
}
/* Edge vignette — darkens the corners so the centre feels CRT-lit. */
body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* ---------- entrance ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink  { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.3; } }
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 56px 56px; } }
@keyframes scanSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 var(--cy-glow); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}
main > * { animation: riseIn 0.6s var(--ease-out) both; }

/* ---------- side rail (fixed, rotated id strip) ----------
   Floor-to-ceiling vertical band on the left edge of the viewport. Only
   appears on wider screens — on narrow viewports it'd steal precious
   width. Reads as the frame of a HUD: subtle hairline, a single line of
   rotated mono text, and a couple of tick marks. */
.frame-rail {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--rail-w);
    z-index: 5;
    pointer-events: none;
    border-right: 1px solid var(--fg-faint);
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.04), transparent 30%, transparent 70%, rgba(255, 43, 214, 0.04));
    display: none;
}
.frame-rail-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.62em;
    text-transform: uppercase;
    color: var(--fg-dim);
}
.frame-rail-text .pip { color: var(--cy); margin: 0 6px; }
.frame-rail-tick {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--fg-faint);
}
.frame-rail-tick.t-top    { top: 84px;  }
.frame-rail-tick.t-bottom { bottom: 84px; }
.frame-rail-cap {
    position: absolute;
    left: 8px; right: 8px;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--fg-dim);
    text-align: center;
}
.frame-rail-cap.c-top    { top: 18px; }
.frame-rail-cap.c-bottom { bottom: 18px; }
.frame-rail-cap .dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--cy);
    box-shadow: 0 0 8px var(--cy-glow);
    margin-bottom: 6px;
    animation: blink 2.4s steps(1) infinite;
}

@media (min-width: 1100px) {
    .frame-rail { display: block; }
    body { padding-left: var(--rail-w); }
}

/* ---------- terminal status strip ---------- */
.term-strip {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--fg-dim);
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.04), transparent);
    border-bottom: 1px solid var(--bg-4);
    padding: 7px 28px;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 6;
}
.term-strip .ok    { color: var(--cy);  text-shadow: 0 0 8px var(--cy-glow-soft); }
.term-strip .warn  { color: var(--warn);text-shadow: 0 0 8px rgba(255, 210, 63, 0.4); }
.term-strip .sep   { color: var(--fg-faint); }
.term-strip .label { color: var(--fg-faint); }
.term-strip .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cy);
    box-shadow: 0 0 10px var(--cy-glow);
    margin-right: 6px;
    animation: blink 2s steps(1) infinite;
}

/* ---------- header / nav ---------- */
.site-header {
    border-bottom: 1px solid var(--bg-4);
    background: linear-gradient(180deg, rgba(8, 11, 20, 0.92), rgba(8, 11, 20, 0.72));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 7;
}
.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.brand {
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--fg);
    font-size: 1.1rem;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    transition: text-shadow 0.2s var(--ease);
}
.brand:hover { text-shadow: 0 0 14px var(--cy-glow); }
.brand-mark {
    color: var(--cy);
    text-shadow: 0 0 12px var(--cy-glow);
    font-size: 0.95em;
    display: inline-block;
    animation: blink 3s infinite;
}
.brand-tag {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    color: var(--fg-dim);
    padding: 2px 6px;
    border: 1px solid var(--fg-faint);
    margin-left: 6px;
}

.site-nav {
    display: flex;
    /* row-gap × column-gap. Wrap to a second row when the bar can't fit
       every link on one line — happens once there are 3+ admin links on
       top of the regular nav — so admin/user/logout never get clipped off
       the right edge. */
    gap: 10px 22px;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.site-nav a {
    color: var(--fg-mid);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    font-size: 0.78rem;
    position: relative;
    padding: 2px 0 6px 0;
    transition: color 0.15s var(--ease);
    white-space: nowrap;
}
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--cy);
    box-shadow: 0 0 8px var(--cy-glow-soft);
    transition: right 0.28s var(--ease);
}
.site-nav a:hover { color: var(--fg); }
.site-nav a:hover::after { right: 0; }

.site-nav a.nav-user {
    color: var(--mg);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 0 10px var(--mg-soft);
}
.site-nav a.nav-user:hover { color: #ff7be1; }
.site-nav a.nav-user::after { background: var(--mg); box-shadow: 0 0 10px var(--mg-glow); }

.site-nav a.nav-admin {
    color: var(--danger);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 0 10px rgba(255, 59, 92, 0.45);
}
.site-nav a.nav-admin:hover { color: #ff7384; }
.site-nav a.nav-admin::after { background: var(--danger); box-shadow: 0 0 10px rgba(255,59,92,0.4); }

/* Log-out pill — always-visible danger-tinted outline button anchored at the
   far right of the nav. The plain inline link kept getting lost in the long
   nav row + horizontal-scroll, so this gives it a distinct button shape and
   forbids the underline hover the other nav links use. */
.site-nav a.nav-logout {
    color: var(--danger);
    font-weight: 700;
    letter-spacing: 0.10em;
    border: 1px solid rgba(255, 59, 92, 0.55);
    padding: 6px 14px;
    border-radius: 2px;
    background: rgba(255, 59, 92, 0.06);
    text-shadow: 0 0 8px rgba(255, 59, 92, 0.35);
    flex-shrink: 0;
}
.site-nav a.nav-logout:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 0 14px rgba(255, 59, 92, 0.5);
}
.site-nav a.nav-logout::after { display: none; }

/* ---------- container ---------- */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}
main.container { flex: 1; padding-top: 56px; padding-bottom: 80px; }

/* ---------- footer ---------- */
.site-footer {
    border-top: 1px solid var(--bg-4);
    color: var(--fg-dim);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    padding: 22px 0;
    position: relative;
    z-index: 2;
}
.site-footer .container {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.site-footer .footer-sep { color: var(--fg-faint); }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 0.6em 0;
    letter-spacing: 0.04em;
    line-height: 1.05;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2 { font-size: 1.55rem; letter-spacing: 0.06em; }
h3 { font-size: 1.1rem; letter-spacing: 0.08em; }
p  { margin: 0 0 1em 0; }

a { color: var(--cy); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--cy-bright); text-shadow: 0 0 8px var(--cy-glow-soft); }

code, pre { font-family: var(--mono); }
code {
    background: var(--bg-2);
    padding: 2px 7px;
    border: 1px solid var(--fg-faint);
    border-radius: 1px;
    font-size: 0.92em;
    color: var(--cy);
}

/* ---------- eyebrow + coordinate metadata pattern ----------
   The single most repeated component in the design system. Every section
   gets a tiny mono "eyebrow" above the H1 that names the section in
   `// CALLSIGN` form and stamps it with a coordinate. Used by every
   page header. */
.eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cy);
    margin: 0 0 12px 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-shadow: 0 0 10px var(--cy-glow-soft);
}
.eyebrow .coord {
    color: var(--fg-dim);
    text-shadow: none;
    font-weight: 400;
    letter-spacing: 0.18em;
}
.eyebrow .bar {
    display: inline-block;
    width: 36px; height: 1px;
    background: var(--cy);
    box-shadow: 0 0 8px var(--cy-glow);
}
.eyebrow.is-danger          { color: var(--danger); text-shadow: 0 0 10px rgba(255,59,92,0.35); }
.eyebrow.is-danger .bar     { background: var(--danger); box-shadow: 0 0 8px rgba(255,59,92,0.4); }
.eyebrow.is-player          { color: var(--mg); text-shadow: 0 0 10px var(--mg-glow); }
.eyebrow.is-player .bar     { background: var(--mg); box-shadow: 0 0 8px var(--mg-glow); }

/* Section title + lede pattern. Lede sits directly below the H1 and is
   the only block that's allowed wider than the body column. Vertical
   rhythm: 22px eyebrow margin → ~4rem H1 → 24px gap → 1.12rem lede →
   56px gap → page body. Earlier passes had 12px between H1 and lede,
   which was too tight once the .glitch ghosts + text-shadow layered in
   — the title visibly overlapped the lede on most viewports. */
.page-header { margin: 0 0 56px 0; max-width: 760px; }
.page-header .eyebrow { margin-bottom: 22px; }
.page-header h1 {
    margin: 0 0 26px 0;
    /* Slight extra line-height on the page-header H1 specifically; the
       global h1 line-height of 1.05 was crowding the ghost layers. */
    line-height: 1.1;
    /* Scan-reveal entrance: title rises into view from a clipped bottom
       edge on first paint. Pure CSS, one-shot, no JS. */
    animation: titleScan 0.9s var(--ease-out) both;
}
.page-header .lede {
    color: var(--fg-mid);
    font-size: 1.12rem;
    max-width: 60ch;
    margin: 0;
    /* Stagger the lede in a beat after the H1 for header-then-body rhythm. */
    animation: riseIn 0.6s var(--ease-out) 0.28s both;
}
@keyframes titleScan {
    0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(6px); }
    55%  { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
}
/* Tighten the .glitch shadow on non-hero H1s so it doesn't bleed into
   adjacent text. The hero override below restores the bigger glow for
   the landing page. */
.page-header h1.glitch::before,
.page-header h1.glitch::after { text-shadow: 0 0 6px var(--cy-glow-soft); }

/* Legacy `.section-prelude` alias for older templates — same look as .eyebrow. */
.section-prelude { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cy); margin: 0 0 10px 0; display: inline-flex; align-items: center; gap: 6px; text-shadow: 0 0 10px var(--cy-glow-soft); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.section-head h1, .section-head h2 { margin: 0; }
.muted { color: var(--fg-dim); }
.small { font-size: 0.84rem; letter-spacing: 0.04em; }

/* ---------- glitch (chromatic-aberration display text) ----------
   Reserved for ONE moment per page max. Massive abuse-resistant.
   Animation is *off* by default; `.glitch-jitter` opts in. */
.glitch {
    position: relative;
    display: inline-block;
    color: var(--fg);
}
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; width: 100%;
    pointer-events: none;
}
.glitch::before { color: var(--cy); transform: translate(-2px, 0); mix-blend-mode: screen; text-shadow: 0 0 12px var(--cy-glow-soft); }
.glitch::after  { color: var(--mg); transform: translate(2px, 0);  mix-blend-mode: screen; text-shadow: 0 0 12px var(--mg-glow); }
.glitch.glitch-jitter { animation: glitchJitter 6s steps(1) infinite; }
@keyframes glitchJitter {
    0%, 92%, 100% { filter: none; }
    93% { filter: hue-rotate(20deg); transform: translate(1px, 0); }
    94% { filter: hue-rotate(-20deg); transform: translate(-1px, 1px); }
    95%, 97% { filter: none; transform: none; }
    96% { filter: hue-rotate(40deg); transform: translate(2px, -1px); }
}

/* Terminal cursor — used inline after typed text. */
.terminal-cursor {
    display: inline-block;
    width: 0.5em; height: 1em;
    background: var(--cy);
    margin-left: 4px;
    vertical-align: -0.12em;
    box-shadow: 0 0 12px var(--cy-glow);
    animation: blink 1s steps(1) infinite;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    padding: 96px 0 88px;
    margin: -56px 0 64px;
    overflow: hidden;
    border-bottom: 1px solid var(--bg-4);
}
.hero::before {
    content: "";
    position: absolute;
    inset: -60px;
    background-image:
        linear-gradient(rgba(0, 240, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 70% at 25% 60%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 25% 60%, #000 25%, transparent 78%);
    animation: gridDrift 30s linear infinite;
    pointer-events: none;
}
/* Faint scanning bar that traverses the hero left to right. */
.hero::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 200px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.06), transparent);
    pointer-events: none;
    animation: scanSweep 9s linear infinite;
}
.hero-grid {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: 56px;
    align-items: end;
}
.hero h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(3.6rem, 11vw, 8.4rem);
    letter-spacing: 0.04em;
    margin: 0 0 18px 0;
    line-height: 0.92;
    text-shadow: 0 0 32px rgba(0, 240, 255, 0.18);
}
.hero-sub {
    color: var(--fg-mid);
    font-size: 1.18rem;
    max-width: 540px;
    margin: 0 0 32px 0;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Right-side meta panel — the "mission briefing" data block. */
.hero-meta {
    border: 1px solid var(--bg-4);
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    padding: 22px 24px;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    line-height: 1.9;
    color: var(--fg-dim);
    position: relative;
}
.hero-meta::before {
    content: "";
    position: absolute;
    top: -1px; left: 18px;
    width: 60px; height: 2px;
    background: var(--cy);
    box-shadow: 0 0 10px var(--cy-glow);
}
.hero-meta .row { display: flex; justify-content: space-between; gap: 18px; }
.hero-meta .k { color: var(--fg-faint); text-transform: uppercase; }
.hero-meta .v { color: var(--fg); text-align: right; }
.hero-meta .v.cy { color: var(--cy); text-shadow: 0 0 6px var(--cy-glow-soft); }
.hero-meta .v.mg { color: var(--mg); text-shadow: 0 0 6px var(--mg-glow); }

@media (max-width: 880px) {
    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-meta { max-width: 420px; }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    font-family: var(--display);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
                box-shadow 0.18s var(--ease), color 0.18s var(--ease),
                transform 0.15s var(--ease);
    position: relative;
    overflow: hidden;
    background: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid transparent;
    transition: border-color 0.18s var(--ease);
}

.btn-primary {
    background: var(--cy);
    color: #001016;
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--cy-soft) inset, 0 4px 22px rgba(0, 240, 255, 0.30);
}
.btn-primary::before {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transition: left 0.55s var(--ease);
}
.btn-primary:hover { background: var(--cy-bright); box-shadow: 0 0 0 1px var(--cy-bright) inset, 0 0 28px var(--cy-glow); }
.btn-primary:hover::before { left: 120%; }

.btn-ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--fg-faint);
}
.btn-ghost:hover { border-color: var(--cy); color: var(--cy); box-shadow: 0 0 18px var(--cy-glow-soft); }

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: rgba(255, 59, 92, 0.5);
}
.btn-danger:hover { background: rgba(255, 59, 92, 0.1); border-color: var(--danger); box-shadow: 0 0 18px rgba(255, 59, 92, 0.25); }

.btn-small { padding: 8px 16px; font-size: 0.72rem; letter-spacing: 0.12em; }
.btn-large { padding: 16px 36px; font-size: 0.95rem; }

/* "link-arrow" — used by .section-head for "All news →" style links */
.link-arrow {
    color: var(--cy);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: letter-spacing 0.2s var(--ease), color 0.15s var(--ease);
}
.link-arrow:hover { color: var(--cy-bright); letter-spacing: 0.28em; text-shadow: 0 0 8px var(--cy-glow-soft); }

/* ---------- form inputs ---------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea, select {
    background: var(--bg-1);
    border: 1px solid var(--fg-faint);
    color: var(--fg);
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
    border-radius: 1px;
    width: 100%;
    outline: none;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--cy);
    background: var(--bg-2);
    box-shadow: 0 0 0 1px var(--cy) inset, 0 0 20px var(--cy-glow-soft);
}
input::placeholder, textarea::placeholder { color: var(--fg-dim); opacity: 0.7; }
.form-row { display: block; margin-bottom: 18px; }
.form-row label {
    display: block;
    margin-bottom: 8px;
    color: var(--fg-dim);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.form-row label::before { content: "› "; color: var(--cy); }
.field-error { color: var(--danger); font-size: 0.84rem; font-family: var(--mono); }
.form-error {
    border: 1px solid var(--danger);
    background: rgba(255, 59, 92, 0.08);
    color: var(--danger);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 0.9rem;
    position: relative;
}
.form-error::before { content: "!!  "; font-weight: 700; }
.form-success {
    border: 1px solid var(--cy);
    background: rgba(0, 240, 255, 0.06);
    color: var(--cy);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 0.9rem;
}

::selection { background: var(--mg); color: #04050a; }

/* ---------- panels ----------
   `.panel` is the new general-purpose surface. Cleaner than the prior
   .auth-card / .stat-card sprawl. Class names like .auth-card still
   exist below as aliases so old templates render correctly. */
.panel {
    position: relative;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 120%);
    border: 1px solid var(--bg-4);
    padding: 32px 32px;
    animation: riseIn 0.6s var(--ease-out) both;
}
.panel::before {
    content: "";
    position: absolute;
    top: -1px; left: 24px;
    width: 72px; height: 2px;
    background: var(--cy);
    box-shadow: 0 0 10px var(--cy-glow);
}
.panel.panel-mg::before { background: var(--mg); box-shadow: 0 0 10px var(--mg-glow); }
.panel.panel-danger { border-color: rgba(255, 59, 92, 0.4); }
.panel.panel-danger::before { background: var(--danger); box-shadow: 0 0 10px rgba(255,59,92,0.4); }

/* Corner brackets — pure CSS framing detail. Applied via .has-brackets. */
.has-brackets {
    position: relative;
}
.has-brackets::before, .has-brackets::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    border: 1px solid var(--cy);
    pointer-events: none;
    opacity: 0.85;
}
.has-brackets::before { top: -1px; left: -1px;  border-right: none; border-bottom: none; }
.has-brackets::after  { bottom: -1px; right: -1px; border-left: none;  border-top: none; }

/* ---------- auth pages ---------- */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    margin-top: 24px;
}
.auth-shell .auth-card { margin: 0; max-width: none; }
.auth-shell .auth-pitch {
    border-left: 1px solid var(--bg-4);
    padding: 20px 0 20px 48px;
    font-family: var(--body);
    color: var(--fg-mid);
}
.auth-shell .auth-pitch h2 {
    font-family: var(--display);
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    color: var(--fg);
    margin: 0 0 16px 0;
}
.auth-shell .auth-pitch ul {
    list-style: none; padding: 0; margin: 0 0 18px 0;
    font-family: var(--mono);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    line-height: 2;
    color: var(--fg-mid);
}
.auth-shell .auth-pitch li::before {
    content: "▸ ";
    color: var(--cy);
    margin-right: 4px;
}
@media (max-width: 820px) {
    .auth-shell { grid-template-columns: 1fr; gap: 32px; }
    .auth-shell .auth-pitch { border-left: none; padding-left: 0; border-top: 1px solid var(--bg-4); padding-top: 32px; }
}

.auth-card {
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 120%);
    border: 1px solid var(--bg-4);
    padding: 36px 36px 32px 36px;
    max-width: 480px;
    margin: 24px auto;
    position: relative;
    animation: riseIn 0.6s var(--ease-out) both;
}
.auth-card::before {
    content: "";
    position: absolute;
    top: -1px; left: 24px;
    width: 64px; height: 2px;
    background: var(--cy);
    box-shadow: 0 0 10px var(--cy-glow);
}
.auth-card--deny { border-color: rgba(255, 59, 92, 0.45); }
.auth-card--deny::before { background: var(--danger); box-shadow: 0 0 10px rgba(255,59,92,0.4); }
.auth-card h1 { font-size: 2rem; margin: 0 0 14px 0; }
.auth-prelude {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--cy);
    margin: 0 0 14px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--cy-glow-soft);
}
.auth-tag { margin: 0 0 24px 0; color: var(--fg-mid); }

/* ---------- news / dispatches ---------- */
.news-list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    gap: 20px;
}
.news-card {
    position: relative;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy);
    padding: 26px 28px;
    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
                box-shadow 0.2s var(--ease);
    animation: riseIn 0.5s var(--ease-out) both;
}
.news-card:nth-child(2) { animation-delay: 0.06s; }
.news-card:nth-child(3) { animation-delay: 0.12s; }
.news-card:nth-child(4) { animation-delay: 0.18s; }
.news-card:nth-child(5) { animation-delay: 0.24s; }
.news-card::before {
    /* tiny index number floating in the top-right of every card */
    content: counter(news-counter, decimal-leading-zero);
    counter-increment: news-counter;
    position: absolute;
    top: 16px; right: 22px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--fg-faint);
}
.news-list { counter-reset: news-counter; }
.news-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--cy-bright);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 26px var(--cy-glow-soft);
}
.news-card a { color: var(--fg); display: block; text-decoration: none; }
.news-card h3 {
    font-family: var(--display);
    font-size: 1.25rem;
    margin: 0 0 8px 0;
    color: var(--fg);
    transition: color 0.2s var(--ease);
}
.news-card:hover h3 { color: var(--cy-bright); }
.news-meta {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    color: var(--fg-dim);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.news-card p { color: var(--fg-mid); margin: 6px 0 0 0; }

.news-detail { animation: riseIn 0.6s var(--ease-out) both; max-width: 760px; margin: 0 auto; }
.news-detail header {
    margin-bottom: 36px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--bg-4);
}
.news-detail header h1 { margin: 12px 0 12px 0; }
.markdown-body { line-height: 1.75; color: var(--fg); font-size: 1.06rem; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 1.5em; }
.markdown-body p { margin: 0 0 1em 0; }
/* Inline patch-notes screenshots / GIFs (markdown ![]() images). DisableHtml strips
   <figure>/<img>, so styling targets rendered <img>; captions use an *italic* line. */
.markdown-body img {
    display: block;
    width: 100%;             /* span the text column edge-to-edge (left & right align with text) */
    height: auto;
    margin: 1.6em 0 0.6em 0;
    border-radius: 10px;
    border: 1px solid var(--bg-4);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
/* An italic line immediately under an image reads as its caption. */
.markdown-body img + em,
.markdown-body p > img:only-child + em {
    display: block;
    text-align: center;
    color: var(--fg-mid);
    font-size: 0.9em;
    margin: 0 0 1.6em 0;
}
/* The /patch-notes changelog feed renders full bodies inline; hide the
   screenshots/GIFs (and their captions) there so they only appear on each
   patch's own detail page (.markdown-body without .patch-body). */
.markdown-body.patch-body img,
.markdown-body.patch-body img + em {
    display: none;
}
.markdown-body a { color: var(--cy); border-bottom: 1px dotted var(--cy-soft); }
.markdown-body a:hover { border-bottom-color: var(--cy-bright); }
.markdown-body code {
    background: var(--bg-2);
    padding: 2px 7px;
    font-size: 0.92em;
}
.markdown-body pre {
    background: var(--bg-2);
    padding: 16px 18px;
    border-left: 2px solid var(--cy-soft);
    overflow-x: auto;
    font-size: 0.92em;
}
.markdown-body pre code { background: transparent; padding: 0; border: none; }
.markdown-body blockquote {
    margin: 0 0 1em 0;
    padding: 8px 16px;
    border-left: 2px solid var(--cy);
    color: var(--fg-mid);
    font-style: italic;
}
.markdown-body img { max-width: 100%; height: auto; border: 1px solid var(--bg-4); }

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--bg-4);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
}
.pager-info { color: var(--fg-dim); }

/* ---------- live events strip ---------- */
.live-events {
    margin: 0 0 36px 0;
    padding: 18px 22px;
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy);
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.06) 0%, transparent 60%);
    position: relative;
}
.live-events-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.live-events-head h2 {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cy);
    margin: 0;
}
.live-events-count {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--fg-dim);
}
.live-events-list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.live-event-card {
    position: relative;
    border: 1px solid var(--bg-4);
    background: var(--bg-1);
    padding: 14px 16px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.live-event-card a { color: var(--fg); display: block; }
.live-event-card a:hover { text-decoration: none; }
.live-event-card::before {
    content: ""; position: absolute;
    top: 0; left: 0;
    width: 2px; height: 100%;
    background: var(--mg);
    transition: width 0.2s var(--ease);
}
.live-event-card:hover { border-color: var(--mg-soft); box-shadow: 0 0 22px var(--mg-glow); }
.live-event-card:hover::before { width: 4px; }
.live-event-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cy);
    border: 1px solid var(--cy-soft);
    padding: 2px 8px;
    margin-bottom: 6px;
}
.live-event-title { font-weight: 600; color: var(--fg); }
.live-event-meta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--fg-dim); margin-top: 6px; text-transform: uppercase; }
.live-event-countdown { font-family: var(--mono); color: var(--cy); }
.live-event-countdown .countdown-label { color: var(--fg-dim); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; }
.live-event-countdown .countdown-value { font-size: 1.1rem; }
.live-event-countdown.ended .countdown-value { color: var(--fg-dim); }
.live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--cy);
    box-shadow: 0 0 10px var(--cy-glow);
    margin-right: 8px;
    animation: blink 2s steps(1) infinite;
}

/* Big banner used on linked-event news detail */
.event-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--mg);
    background: linear-gradient(90deg, rgba(255, 43, 214, 0.06), transparent 70%);
    margin-bottom: 24px;
}
.event-banner::before { content: none; }
.event-banner.ended { border-left-color: var(--fg-faint); }
.event-banner-left { display: flex; align-items: center; gap: 10px; }
.event-banner-right { text-align: right; }
.event-banner-right .countdown-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--fg-dim); text-transform: uppercase; }
.countdown-value-large { font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.08em; color: var(--cy); }
.event-banner.ended .countdown-value-large { color: var(--fg-dim); }

/* ---------- latest-patch callout (Index + Download) ---------- */
.latest-patch {
    border: 1px solid var(--bg-4);
    padding: 24px 26px;
    margin: 0 0 36px 0;
    position: relative;
    background: linear-gradient(180deg, var(--bg-1), transparent);
}
.latest-patch::before {
    content: ""; position: absolute;
    top: -1px; left: 24px;
    width: 60px; height: 2px;
    background: var(--mg);
    box-shadow: 0 0 10px var(--mg-glow);
}
.latest-patch-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.latest-patch-all { margin-left: auto; }
.latest-patch-link { display: block; color: var(--fg); text-decoration: none; }
.latest-patch-link h3 { font-size: 1.35rem; margin: 0 0 6px 0; color: var(--fg); }
.latest-patch-link:hover h3 { color: var(--cy-bright); }
.patch-version {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    color: var(--cy);
    border: 1px solid var(--cy-soft);
    padding: 2px 10px;
    text-shadow: 0 0 6px var(--cy-glow-soft);
}

/* ---------- news-feed section ---------- */
.news-feed { margin-top: 12px; }

/* ---------- leaderboards ---------- */
.board-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.board {
    position: relative;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border: 1px solid var(--bg-4);
    padding: 22px 24px 12px 24px;
}
.board::before {
    content: ""; position: absolute;
    top: -1px; left: 22px;
    width: 60px; height: 2px;
    background: var(--cy);
    box-shadow: 0 0 10px var(--cy-glow);
}
.board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bg-4);
}
.board-head h2 {
    font-family: var(--display);
    font-size: 1.12rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    color: var(--fg);
}
.board-list {
    list-style: none; padding: 0; margin: 0;
}
.board-list li {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--bg-4);
    font-family: var(--mono);
    font-size: 0.9rem;
}
.board-list li:last-child { border-bottom: none; }
.board-list li:hover { background: var(--cy-tint); }
.rank-num { color: var(--fg-dim); text-align: right; font-variant-numeric: tabular-nums; }
.player-name { color: var(--fg); letter-spacing: 0.04em; }
.player-name .alliance-tag { color: var(--cy); margin-right: 6px; font-size: 0.8em; }
.player-name .player-lvl { color: var(--fg-dim); margin-left: 6px; font-size: 0.84em; }
.board-value { color: var(--cy); font-variant-numeric: tabular-nums; text-shadow: 0 0 6px var(--cy-glow-soft); }

.rank-1 { background: linear-gradient(90deg, rgba(255, 214, 107, 0.08), transparent 70%); }
.rank-1 .rank-num { color: #ffd66b; text-shadow: 0 0 8px rgba(255, 214, 107, 0.55); font-size: 1.05rem; font-weight: 700; }
.rank-1 .board-value { font-size: 1.05rem; }
.rank-2 { background: linear-gradient(90deg, rgba(208, 214, 219, 0.05), transparent 70%); }
.rank-2 .rank-num { color: #d0d6db; }
.rank-3 { background: linear-gradient(90deg, rgba(210, 147, 96, 0.05), transparent 70%); }
.rank-3 .rank-num { color: #d29360; }

/* Pure-CSS tabs (radio-driven) for Leaderboards */
.cyber-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--bg-4);
    margin: 0 0 28px 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cy-soft) transparent;
    /* Right-edge cyan fade signals "more tabs scroll-right" when content
       overflows. Pure CSS, no JS — the gradient is part of the element's
       own background and only reads as a fade because the underlying tabs
       blend into it when they reach the right edge. */
    background:
        linear-gradient(90deg, transparent calc(100% - 48px), var(--bg-0)) right center / 100% 100% no-repeat;
    /* Compensate the right padding so the last tab isn't pre-clipped by
       the fade gradient — there's always space to scroll-through-to-end. */
    padding-right: 32px;
    position: relative;
}
.cyber-tabs::-webkit-scrollbar { height: 4px; }
.cyber-tabs::-webkit-scrollbar-track { background: transparent; }
.cyber-tabs::-webkit-scrollbar-thumb { background: var(--cy-soft); border-radius: 2px; }
.cyber-tabs::-webkit-scrollbar-thumb:hover { background: var(--cy); }
/* Right-edge "more →" chip — pure CSS hint that the row keeps going. It
   sits absolute inside the tab strip, only visible on small screens
   where overflow actually happens. */
.cyber-tabs::after {
    content: "MORE  →";
    position: sticky;
    right: 0;
    align-self: center;
    margin-left: auto;
    padding: 0 4px 0 18px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: var(--cy);
    background: linear-gradient(90deg, transparent, var(--bg-0) 28%);
    pointer-events: none;
    opacity: 0.7;
}
.cyber-tab {
    background: transparent;
    border: none;
    color: var(--fg-dim);
    font-family: var(--display);
    font-size: 0.84rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 22px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.18s var(--ease);
}
.cyber-tab:hover { color: var(--fg); }
.cyber-tab::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--cy);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s var(--ease-out);
    box-shadow: 0 0 12px var(--cy-glow);
}
.tab-board { position: relative; }
.tab-board .tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tab-board .tab-panel { display: none; animation: riseIn 0.32s var(--ease-out) both; }
/* 8 tabs — each radio toggles its matching panel + lights up its label. */
.tab-board #lb-level:checked  ~ .tab-panel[data-tab="lb-level"]  { display: block; }
.tab-board #lb-wealth:checked ~ .tab-panel[data-tab="lb-wealth"] { display: block; }
.tab-board #lb-power:checked  ~ .tab-panel[data-tab="lb-power"]  { display: block; }
.tab-board #lb-boss:checked   ~ .tab-panel[data-tab="lb-boss"]   { display: block; }
.tab-board #lb-vet:checked    ~ .tab-panel[data-tab="lb-vet"]    { display: block; }
.tab-board #lb-pop:checked    ~ .tab-panel[data-tab="lb-pop"]    { display: block; }
.tab-board #lb-build:checked  ~ .tab-panel[data-tab="lb-build"]  { display: block; }
.tab-board #lb-ach:checked    ~ .tab-panel[data-tab="lb-ach"]    { display: block; }
.tab-board #lb-level:checked  ~ .cyber-tabs label[for="lb-level"],
.tab-board #lb-wealth:checked ~ .cyber-tabs label[for="lb-wealth"],
.tab-board #lb-power:checked  ~ .cyber-tabs label[for="lb-power"],
.tab-board #lb-boss:checked   ~ .cyber-tabs label[for="lb-boss"],
.tab-board #lb-vet:checked    ~ .cyber-tabs label[for="lb-vet"],
.tab-board #lb-pop:checked    ~ .cyber-tabs label[for="lb-pop"],
.tab-board #lb-build:checked  ~ .cyber-tabs label[for="lb-build"],
.tab-board #lb-ach:checked    ~ .cyber-tabs label[for="lb-ach"] {
    color: var(--cy); text-shadow: 0 0 12px var(--cy-glow-soft);
}
.tab-board #lb-level:checked  ~ .cyber-tabs label[for="lb-level"]::after,
.tab-board #lb-wealth:checked ~ .cyber-tabs label[for="lb-wealth"]::after,
.tab-board #lb-power:checked  ~ .cyber-tabs label[for="lb-power"]::after,
.tab-board #lb-boss:checked   ~ .cyber-tabs label[for="lb-boss"]::after,
.tab-board #lb-vet:checked    ~ .cyber-tabs label[for="lb-vet"]::after,
.tab-board #lb-pop:checked    ~ .cyber-tabs label[for="lb-pop"]::after,
.tab-board #lb-build:checked  ~ .cyber-tabs label[for="lb-build"]::after,
.tab-board #lb-ach:checked    ~ .cyber-tabs label[for="lb-ach"]::after {
    transform: scaleX(1);
}
/* Small leading index numeral inside each tab. Echoes the dispatch
   counter and the 00-prefixed rank numbers — keeps the page visually
   "numbered." */
.cyber-tab .tab-idx {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--fg-faint);
    margin-right: 8px;
    vertical-align: 0.05em;
}
.tab-board .tab-input:checked + .cyber-tabs label .tab-idx,
.cyber-tab:hover .tab-idx { color: var(--cy); }

/* Board metadata strip + per-board eyebrow + footer. */
.board-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 12px 18px;
    margin: 0 0 22px 0;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.board-meta .k { color: var(--fg-faint); margin-right: 6px; }
.board-meta .v { color: var(--fg); }
.board-eyebrow {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    color: var(--cy);
    text-transform: uppercase;
    margin-bottom: 4px;
    text-shadow: 0 0 8px var(--cy-glow-soft);
}
.board-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bg-4);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--fg-faint);
    text-transform: uppercase;
}

/* ---------- account / stats ---------- */
.account-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding: 32px 0;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--bg-4);
}
.account-hero-left h1 { margin: 0 0 12px 0; }
.account-tags { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.account-level {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 14px 22px;
    border: 1px solid var(--bg-4);
    background: var(--bg-1);
    font-family: var(--mono);
}
.account-level-num {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--cy);
    text-shadow: 0 0 14px var(--cy-glow-soft);
    line-height: 1;
}
.account-level-xp {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--fg-dim);
    text-transform: uppercase;
    margin-top: 4px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}
.stat-card {
    position: relative;
    padding: 16px 18px;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.stat-card:hover { border-color: var(--cy-soft); box-shadow: 0 0 18px var(--cy-glow-soft); }
.stat-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 6px;
}
.stat-value {
    display: block;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

/* Time-series graph cards used on /admin/server. Wider than .stat-card and
   anchored at the bottom by an SVG sparkline that stretches to fill the
   card's width. The cyan polyline + faint fill matches the HUD aesthetic
   without pulling in a chart library. */
.graphs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}
.graph-card {
    position: relative;
    padding: 14px 16px 8px 16px;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    overflow: hidden;
}
.graph-card:hover { border-color: var(--cy-soft); box-shadow: 0 0 18px var(--cy-glow-soft); }
.graph-card .stat-label { margin-bottom: 4px; }
.graph-card .stat-value { font-size: 1.35rem; margin-bottom: 6px; }
.graph-card svg.sparkline {
    display: block;
    width: 100%;
    height: 60px;
    /* viewBox is 0 0 200 50; preserveAspectRatio=none stretches X freely
       so the curve fills whatever width the grid hands us. */
}
.graph-card svg.sparkline polyline {
    fill: none;
    stroke: var(--cy);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px var(--cy-glow-soft));
}
.account-section { margin-bottom: 36px; }
.account-section h2 {
    font-family: var(--display);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-4);
    margin-bottom: 16px;
}
.danger-zone {
    border: 1px solid rgba(255, 59, 92, 0.35);
    background: linear-gradient(180deg, rgba(255, 59, 92, 0.04), transparent);
    padding: 24px 26px;
}
.danger-zone h2 { color: var(--danger); border-bottom-color: rgba(255, 59, 92, 0.2); }
.link-danger { color: var(--danger) !important; }

/* ---------- achievements ---------- */
.achievement-category { margin-bottom: 36px; }
.achievement-category h2 {
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-mid);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-4);
    margin-bottom: 16px;
}
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.achievement {
    position: relative;
    padding: 18px 20px;
    background: var(--bg-1);
    border: 1px solid var(--bg-4);
    border-left: 3px solid var(--fg-faint);
    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.achievement:hover { transform: translateY(-2px); }
.achievement h3 { font-size: 1rem; margin: 4px 0 8px 0; color: var(--fg); }
.achievement p { margin: 0 0 10px 0; }
.achievement-tier {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.achievement.tier-bronze   { border-left-color: #c08252; }
.achievement.tier-silver   { border-left-color: #c8d0d6; }
.achievement.tier-gold     { border-left-color: #ffd66b; }
.achievement.tier-platinum { border-left-color: #b6e2ff; }
.tier-bronze   .achievement-tier { color: #d09060; }
.tier-silver   .achievement-tier { color: #d2dadf; }
.tier-gold     .achievement-tier { color: #ffd66b; text-shadow: 0 0 6px rgba(255, 214, 107, 0.4); }
.tier-platinum .achievement-tier { color: #b6e2ff; text-shadow: 0 0 6px rgba(182, 226, 255, 0.4); }
.achievement.locked                    { opacity: 0.6; }
.achievement.locked h3                 { color: var(--fg-dim); }
.achievement.locked .achievement-tier  { color: var(--fg-faint); }
.achievement.unlocked                  { box-shadow: 0 0 18px var(--cy-glow-soft) inset; }
.achievement.unlocked h3               { color: var(--fg); }

.progress-track {
    position: relative;
    height: 4px;
    background: var(--bg-3);
    border: 1px solid var(--bg-4);
    overflow: hidden;
}
.progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--cy-soft), var(--cy));
    box-shadow: 0 0 10px var(--cy-glow);
}
.progress-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--fg-dim);
    margin-top: 6px;
    text-transform: uppercase;
}
.unlock-line {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--cy);
    text-transform: uppercase;
}
.unlock-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--cy-soft);
    color: var(--cy);
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.reward-line { font-family: var(--mono); font-size: 0.82rem; color: var(--fg-mid); margin-top: 4px; }
.reward-line span { color: var(--cy); }

/* ---------- patch notes ---------- */
.patch-list { list-style: none; padding: 0; margin: 0; }
.patch-card {
    position: relative;
    padding: 24px 28px;
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy);
    margin-bottom: 18px;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
}
.patch-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.patch-card h2 { font-size: 1.3rem; letter-spacing: 0.06em; margin: 0 0 12px 0; }
.patch-card h2 a { color: var(--fg); }
.patch-card h2 a:hover { color: var(--cy-bright); text-shadow: 0 0 10px var(--cy-glow-soft); }
.patch-date { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--fg-dim); text-transform: uppercase; }
.patch-body { font-size: 0.96rem; }
.patch-body ul { padding-left: 22px; }

/* ---------- download ---------- */
.download-hero {
    padding: 64px 0 56px;
    text-align: center;
    border-bottom: 1px solid var(--bg-4);
    margin-bottom: 36px;
    position: relative;
}
.download-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 0 0 16px 0; }
.download-hero p.muted { margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; }
.download-meta {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    margin-top: 24px;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    color: var(--fg-dim);
    text-transform: uppercase;
}

/* ---------- admin table ---------- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.9rem;
}
.admin-table th, .admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bg-4);
    text-align: left;
}
.admin-table th {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--cy);
    text-transform: uppercase;
    border-bottom-color: var(--cy-soft);
}
.admin-table tbody tr { transition: background 0.15s var(--ease); }
.admin-table tbody tr:hover { background: var(--cy-tint); }
.row-actions { display: flex; gap: 12px; align-items: center; }
.row-actions form { display: inline; margin: 0; }
.row-actions button {
    background: none; border: none; cursor: pointer;
    color: var(--cy);
    font-family: var(--mono);
    font-size: 0.84rem;
    letter-spacing: 0.1em;
}
.row-actions button:hover { color: var(--cy-bright); text-shadow: 0 0 6px var(--cy-glow-soft); }

.edit-form { max-width: 800px; }

/* ---------- danger / utility ---------- */
.danger-zone { border: 1px solid rgba(227, 90, 90, 0.35); padding: 22px 24px; }
.text-danger, .form-error { color: var(--danger); }

/* ---------- bottom marquee ----------
   Auto-scrolling status line at the very bottom of the viewport. Adds
   ambient "this is a live network" feel without any real telemetry. */
.marquee {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--bg-4);
    background: var(--bg-1);
    color: var(--fg-dim);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 8px 0;
}
.marquee-track {
    display: inline-flex;
    gap: 64px;
    white-space: nowrap;
    animation: marqueeScroll 60s linear infinite;
    will-change: transform;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 8px; }
.marquee-track .ok { color: var(--cy); }
.marquee-track .mg { color: var(--mg); }
.marquee-track .dot {
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--cy);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cy-glow);
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-delay: 0s !important;
        transition-duration: 0.001s !important;
    }
}

/* ============================================================
   ---------- wiki ----------
   Public field manual (/wiki). Single page, JS-driven category
   switching. Reuses the dossier visual language: hairline cards,
   mono stat labels, cyan accents, rarity colour-coding.
   ============================================================ */

/* rarity tokens — reused by commanders + items */
.r-common    { --rar: #93a8ba; }
.r-uncommon  { --rar: #4ade80; }
.r-rare      { --rar: #38bdf8; }
.r-epic      { --rar: #c084fc; }
.r-legendary { --rar: #ffd23f; }

/* ---- landing category grid ---- */
.wiki-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 0 0 44px 0;
}
.wiki-cat-card {
    position: relative;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: inherit;
    transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.wiki-cat-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--cy-bright);
    box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 22px var(--cy-glow-soft);
}
.wiki-cat-label {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    color: var(--fg);
}
.wiki-cat-count {
    font-family: var(--mono);
    font-size: 1.6rem;
    color: var(--cy);
    text-shadow: 0 0 8px var(--cy-glow-soft);
    line-height: 1;
}
.wiki-cat-count em { font-style: normal; font-size: 0.6rem; letter-spacing: 0.22em; color: var(--fg-dim); text-transform: uppercase; }
.wiki-cat-go {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    color: var(--fg-dim);
    transition: color 0.18s var(--ease);
}
.wiki-cat-card:hover .wiki-cat-go { color: var(--cy); }

/* ---- sticky category nav ---- */
.wiki-nav {
    position: sticky;
    top: 64px;
    z-index: 6;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 0 32px 0;
    padding: 8px;
    background: rgba(8, 11, 20, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bg-4);
    border-radius: 2px;
}
.wiki-nav-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-dim);
    font-family: var(--display);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.16s var(--ease), background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.wiki-nav-tab:hover { color: var(--fg); background: var(--cy-tint); }
.wiki-nav-tab.is-on {
    color: var(--cy);
    border-color: var(--cy-soft);
    background: var(--cy-tint);
    text-shadow: 0 0 10px var(--cy-glow-soft);
}
.wiki-nav-num {
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--fg-faint);
    letter-spacing: 0.1em;
}
.wiki-nav-tab.is-on .wiki-nav-num { color: var(--cy-soft); }

/* ---- sections (only the active one shows) ---- */
.wiki-section { display: none; animation: riseIn 0.35s var(--ease-out) both; }
.wiki-section.is-active { display: block; }
.wiki-section-head { margin: 0 0 24px 0; }
.wiki-section-head h2 { margin: 6px 0 8px 0; }
.wiki-section-head .muted { font-size: 0.95rem; max-width: 60ch; }

/* ---- generic stat table ---- */
.wiki-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--bg-4);
    background: var(--bg-1);
    scrollbar-width: thin;
    scrollbar-color: var(--cy-soft) transparent;
}
.wiki-table-wrap::-webkit-scrollbar { height: 6px; }
.wiki-table-wrap::-webkit-scrollbar-thumb { background: var(--cy-soft); border-radius: 3px; }
.wiki-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.8rem;
    white-space: nowrap;
}
.wiki-table thead th {
    text-align: left;
    padding: 11px 14px;
    color: var(--fg-faint);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--bg-4);
    background: var(--bg-2);
    position: sticky;
    top: 0;
}
.wiki-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(26, 36, 56, 0.6);
    color: var(--fg-mid);
    font-variant-numeric: tabular-nums;
}
.wiki-table tbody tr:last-child td { border-bottom: none; }
.wiki-table tbody tr:hover { background: var(--cy-tint); }
.wiki-table .wiki-lvl, .wiki-table .wiki-tier-name { color: var(--cy); }
.wiki-cost-cell { white-space: normal; min-width: 180px; color: var(--fg-dim); }

/* units table accents */
.wiki-units-table { white-space: normal; }
.wiki-unit-name { color: var(--fg); font-weight: 500; }
.wiki-unit-type { display: block; font-size: 0.66rem; color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.wiki-stat-atk { color: #ff8a5c; }
.wiki-stat-def { color: #5cc2ff; }
.wiki-stat-hp  { color: #6be59a; }
.wiki-stat-pwr { color: var(--warn); }
.wiki-upkeep { color: var(--fg-dim); }

/* filter chips */
.wiki-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px 0; }
.wiki-chip {
    background: transparent;
    border: 1px solid var(--fg-faint);
    color: var(--fg-dim);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.wiki-chip:hover { color: var(--fg); border-color: var(--cy-soft); }
.wiki-chip.is-on { color: var(--cy); border-color: var(--cy); background: var(--cy-tint); text-shadow: 0 0 8px var(--cy-glow-soft); }

/* ---- building expandable cards ---- */
.wiki-build-list { display: grid; gap: 12px; }
.wiki-build {
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy-soft);
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
}
.wiki-build[open] { border-left-color: var(--cy); box-shadow: 0 0 20px var(--cy-glow-soft); }
.wiki-build-summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.wiki-build-summary::-webkit-details-marker { display: none; }
.wiki-build-head { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.wiki-build-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--fg); letter-spacing: 0.04em; }
.wiki-tag {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cy);
    border: 1px solid var(--cy-soft);
    padding: 2px 8px;
}
.wiki-build-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--fg-mid);
}
.wiki-build-meta em { font-style: normal; color: var(--fg-faint); letter-spacing: 0.12em; margin-right: 5px; }
.wiki-build-cost { color: var(--fg-dim); }
.wiki-build-expand { color: var(--cy); font-size: 0.9rem; transition: transform 0.2s var(--ease); }
.wiki-build[open] .wiki-build-expand { transform: rotate(180deg); }
.wiki-build-desc { padding: 0 20px; color: var(--fg-mid); margin: 0 0 12px 0; }
.wiki-build .wiki-table-wrap { border-left: none; border-right: none; border-bottom: none; }

/* ---- rarity / tab group headers ---- */
.wiki-rarity-head, .wiki-tab-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 14px 0;
    font-family: var(--display);
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-4);
}
.wiki-rarity-head { color: var(--rar, var(--cy)); }
.wiki-rarity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rar, var(--cy));
    box-shadow: 0 0 10px var(--rar, var(--cy-glow));
}
.wiki-rarity-count, .wiki-tab-head .wiki-rarity-count {
    font-family: var(--mono); font-size: 0.7rem; color: var(--fg-dim); letter-spacing: 0.1em; margin-left: 4px;
}
.wiki-tab-head { color: var(--cy); }
.wiki-tier-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    color: var(--fg-faint);
    text-transform: uppercase;
    margin: 16px 0 10px 0;
}

/* ---- commander cards ---- */
.wiki-cmd-grid, .wiki-research-grid, .wiki-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.wiki-cmd {
    position: relative;
    border: 1px solid var(--bg-4);
    border-top: 2px solid var(--rar, var(--cy));
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wiki-cmd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wiki-cmd-top h3 { margin: 0; font-size: 1.15rem; color: var(--fg); }
.wiki-cmd-title { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--rar, var(--cy)); text-transform: uppercase; }
.wiki-cmd-desc { margin: 0; color: var(--fg-mid); font-size: 0.92rem; }
.wiki-cmd-bonuses, .wiki-cmd-foot {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 0.78rem; color: var(--fg);
}
.wiki-cmd-bonuses em, .wiki-cmd-foot em { font-style: normal; color: var(--fg-faint); letter-spacing: 0.1em; margin-right: 5px; }
.wiki-cmd-bonuses { padding: 10px 0; border-top: 1px solid var(--bg-4); border-bottom: 1px solid var(--bg-4); }
.wiki-cmd-foot { color: var(--fg-mid); margin-top: auto; padding-top: 4px; }
.wiki-cmd-abilities { display: grid; gap: 8px; }
.wiki-ability { border-left: 2px solid var(--bg-4); padding: 4px 0 4px 12px; }
.wiki-ability-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.wiki-ability-name { color: var(--cy); font-weight: 600; font-size: 0.92rem; }
.wiki-ability-lvl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--fg-dim); border: 1px solid var(--fg-faint); padding: 1px 7px; }
.wiki-ability-desc { margin: 4px 0 2px; color: var(--fg-mid); font-size: 0.86rem; }
.wiki-ability-stats { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-dim); letter-spacing: 0.04em; }

/* ---- research cards ---- */
.wiki-research {
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy-soft);
    background: var(--bg-1);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wiki-research h3 { margin: 0; font-size: 1.02rem; color: var(--fg); }
.wiki-research-desc { margin: 0; color: var(--fg-mid); font-size: 0.9rem; }
.wiki-kv { font-family: var(--mono); font-size: 0.76rem; color: var(--fg-mid); }
.wiki-kv em { font-style: normal; color: var(--fg-faint); letter-spacing: 0.12em; margin-right: 8px; }
.wiki-kv-unlock { color: var(--cy); }
.wiki-kv-unlock em { color: var(--cy-soft); }
.wiki-kv-prereq { color: var(--warn); }
.wiki-kv-prereq em { color: rgba(255, 210, 63, 0.6); }

/* ---- item cards ---- */
.wiki-item {
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--rar, var(--cy));
    background: var(--bg-1);
    padding: 15px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.wiki-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wiki-item-name { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--fg); letter-spacing: 0.03em; }
.wiki-rarity-pill {
    font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--rar, var(--cy)); border: 1px solid var(--rar, var(--cy-soft)); padding: 2px 8px;
}
.wiki-item-desc { margin: 0; color: var(--fg-mid); font-size: 0.88rem; }
.wiki-item-effect {
    font-family: var(--mono); font-size: 0.78rem; color: var(--cy);
    background: var(--cy-tint); border-left: 2px solid var(--cy-soft);
    padding: 6px 10px;
}

/* ---- world events ---- */
.wiki-event-list { display: grid; gap: 18px; }
.wiki-event {
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--mg);
    background: linear-gradient(90deg, var(--mg-tint), transparent 60%), var(--bg-1);
    padding: 18px 20px;
}
.wiki-event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.wiki-event-head h3 { margin: 0; color: var(--fg); }
.wiki-event-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.74rem; color: var(--fg-mid); }
.wiki-event-meta em { font-style: normal; color: var(--fg-faint); letter-spacing: 0.1em; margin-right: 5px; }
.wiki-event-desc { color: var(--fg-mid); margin: 0 0 12px 0; max-width: 70ch; }
.wiki-event-table .wiki-tier-name { color: var(--mg); }

/* ---- resources ---- */
.wiki-res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.wiki-res {
    border: 1px solid var(--bg-4);
    border-left: 2px solid var(--cy);
    background: var(--bg-1);
    padding: 16px 18px;
}
.wiki-res-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--cy); letter-spacing: 0.05em; display: block; margin-bottom: 6px; text-shadow: 0 0 8px var(--cy-glow-soft); }
.wiki-res-desc { margin: 0; color: var(--fg-mid); font-size: 0.9rem; }

@media (max-width: 720px) {
    .wiki-build-meta { margin-left: 0; width: 100%; gap: 14px; }
    .wiki-nav { top: 56px; }
}