/* =======================================================================
   Classic Fraggers - site stylesheet
   Palette: forest camo / olive, adopted site-wide in place of the
   original forum-matched blue-on-slate theme:
     body bg #1B2016 / panel bg #262E1C / body text #D9D9D2 (light grey)
     headings #F5F5F0 / accent (khaki) #C3B26A / hairline borders a warm
     light-tinted rgba so panel edges read olive, not neutral grey
     body font Verdana, Helvetica, Arial, sans-serif
     heading font "Trebuchet MS", Arial, Helvetica, sans-serif
   Warning (amber #FFB000) and danger (red #FF3C3C) are deliberately left
   untouched from the original palette - the HUD corner brackets, status
   badges, glows and killfeed ticker now read in khaki instead of blue,
   but every other accent/status color keeps its original meaning.
   ======================================================================= */

:root {
    /* -- forest camo / olive base -- */
    --bg: #1b2016;
    --bg-deep: #12160e;
    --panel: #262e1c;
    --panel-alt: #1e2516;
    --border: rgba(228, 228, 210, 0.08);
    --border-soft: rgba(228, 228, 210, 0.05);
    --text: #d9d9d2;
    --text-dim: #a4a598;
    --text-bright: #f5f5f0;
    --link: #c3b26a;
    --link-hover: #ddcd8c;

    /* -- HUD accent palette: khaki/tan, replacing the old forum blue -- */
    --accent: #c3b26a;      /* khaki accent */
    --accent-dim: #7d6f3d;  /* darker, unhovered khaki */
    --accent-amber: #ffb000;
    --accent-danger: #ff3c3c;
    --accent-info: #31c4d1;    /* Round 29: cyan already used for the forum's Moderator/Veteran badges - reused here as a distinct "record/stat" accent (footer Community widget's "Most ever online") rather than inventing a new hue */

    --font-body: Verdana, Helvetica, Arial, sans-serif;
    --font-heading: "Trebuchet MS", Arial, Helvetica, sans-serif;
    --font-mono: "Courier New", Courier, monospace;

    --wrap: 1180px;
    --radius: 3px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Round 39: site-wide scrollbar recolored to match the khaki/olive HUD
   theme instead of the browser default. Firefox uses the two-value
   scrollbar-color shorthand (thumb, track); WebKit/Blink (Chrome, Edge,
   Safari) needs the ::-webkit-scrollbar-* pseudo-elements instead - both
   are declared so every major browser gets the themed look. */
html {
    scrollbar-color: var(--accent-dim) var(--bg-deep);
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 2px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg-deep); }

body {
    margin: 0;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at top, rgba(195, 178, 106, 0.06), transparent 55%),
        linear-gradient(var(--bg), var(--bg-deep));
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.cf-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Visually-hidden until focused - lets keyboard/screen-reader users jump
   straight past the header/nav to the page content. */
.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 1000;
    background: var(--accent);
    color: var(--bg-deep);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 10px 18px;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-bright);
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: 0.02em;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 14px; }

ul, ol { padding-left: 22px; }

/* subtle full-page CRT scanline texture - decorative, kept faint so it
   never competes with text contrast */
.crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.018) 0px,
        rgba(255, 255, 255, 0.018) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
}

/* =======================================================================
   Top bar: logo + HUD datapoints
   ======================================================================= */
.cf-topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border-soft);
}
.cf-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px;
}

.cf-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-bright);
}
.cf-logo:hover { color: var(--text-bright); text-decoration: none; }
.cf-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-deep);
    border: 1px solid var(--accent-dim);
    border-radius: 6px;
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(195, 178, 106, 0.45));
    flex-shrink: 0;
}
.cf-logo--footer .cf-logo__mark { width: 28px; height: 28px; border-radius: 5px; filter: none; }
.cf-logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.cf-logo__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.cf-logo__tagline {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim);
}
.cf-logo--footer { gap: 8px; }
.cf-logo--footer .cf-logo__title { font-size: 15px; }

.cf-hud {
    display: flex;
    align-items: center;
    gap: 22px;
}
.cf-hud__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}
.cf-hud__label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
}
.cf-hud__value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 17px;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(195, 178, 106, 0.35);
}
.cf-hud__value-sep { color: var(--text-dim); padding: 0 2px; font-weight: 400; }
.cf-hud__stat--links { flex-direction: row; align-items: center; gap: 10px; }
.cf-hud__icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
.cf-hud__icon-link:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    text-decoration: none;
}

/* Round 25: small inline icon + text link, used wherever a Discord link
   appears as plain text rather than the boxed HUD icon above (footer,
   forum footer, Contact page) - a small icon svg sibling inside the <a>,
   sized/aligned via this wrapper rather than a dedicated icon-link box. */
.cf-inline-icon-link { display: inline-flex; align-items: center; gap: 6px; }
.cf-inline-icon-link svg { flex-shrink: 0; }

/* =======================================================================
   Header account menu - the third HUD glyph (person-silhouette icon),
   sitting to the right of the Forum/Discord icon-links, on both the
   main site header and the unified forum header. A zero-dependency
   click-to-open dropdown (toggled by assets/js/main.js): guests see
   Log In / Create Account, logged-in members see their identity + rank,
   an Account link, Mod Queue (moderators/admins only) and Log Out. This
   replaces the forum's old separate .board-user-menu block entirely, now
   that the header is shared verbatim between the main site and the
   forum.
   ======================================================================= */
.cf-account-menu { position: relative; }
.cf-account-menu__trigger {
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    padding: 0;
    margin: 0;
    /* Round 33: this is a <button>, unlike the plain <a> chat/Discord
       icon-links either side of it - .cf-hud__icon-link alone gives it
       the same box/border, but without an explicit background reset
       here the browser's default button chrome (a light fill) shows
       through underneath that border. The icon itself stays khaki at
       all times (not just on hover/logged-in, like the other two),
       so the account glyph reads as a distinct, always-on accent
       rather than a plain utility icon. */
    color: var(--accent);
}
.cf-account-menu__trigger.is-logged-in { border-color: var(--accent-dim); }
.cf-account-menu__trigger[aria-expanded="true"] { border-color: var(--accent-dim); }
.cf-account-menu__panel {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 220px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    padding: 12px;
    z-index: 700;
}
.cf-account-menu__panel.is-open { display: block; }
.cf-account-menu__identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 2px 6px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}
.cf-account-menu__name { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--text-bright); }
.cf-account-menu__links { display: flex; flex-direction: column; gap: 2px; }
.cf-account-menu__links a {
    display: block;
    padding: 9px 8px;
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text);
}
.cf-account-menu__links a:hover {
    background: rgba(195, 178, 106, 0.08);
    color: var(--accent);
    text-decoration: none;
}
.cf-account-menu__guest {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px;
}
.cf-account-menu__guest .btn { justify-content: center; }
@media (max-width: 400px) {
    .cf-account-menu__panel { right: -46px; width: 200px; }
}

/* =======================================================================
   Horizontal nav
   ======================================================================= */
.cf-nav {
    background: var(--panel-alt);
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.cf-nav__inner { position: relative; }
.cf-nav__toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    color: var(--text-bright);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    padding: 14px 4px;
    cursor: pointer;
}
.cf-nav__toggle span:not(.cf-nav__toggle-label) {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--accent);
}
.cf-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.cf-nav__item { border-right: 1px solid var(--border-soft); }
.cf-nav__item:first-child { border-left: 1px solid var(--border-soft); }
.cf-nav__link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 18px;
    color: var(--text);
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cf-nav__link:hover {
    color: var(--text-bright);
    border-bottom-color: var(--accent-dim);
    background: rgba(195, 178, 106, 0.04);
    text-decoration: none;
}
.cf-nav__link.is-active {
    /* Round 26: the active/current-page nav link is now the site's
       orange accent (both the text and the underline), so it's
       immediately obvious which page you're on - previously it used
       the khaki accent, which read too close to the default link
       color and the hover state to stand out at a glance. */
    color: var(--accent-amber);
    border-bottom-color: var(--accent-amber);
    background: rgba(255, 176, 0, 0.06);
}
.cf-nav__item--donate {
    /* Round 33: the Donate link is a permanent, always-orange nav item
       (see DONATION_ENABLED/DONATION_URL in config.php) pinned to the far
       right of the nav bar - margin-left:auto eats the row's remaining
       flex space so it sits apart from the regular editable nav items. */
    margin-left: auto;
}
.cf-nav__item--donate .cf-nav__link { color: var(--accent-amber); }
.cf-nav__item--donate .cf-nav__link:hover {
    border-bottom-color: var(--accent-amber);
    background: rgba(255, 176, 0, 0.08);
}
.cf-ext-tag { font-style: normal; font-size: 11px; opacity: 0.6; }
.cf-tbd-tag {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    color: var(--bg-deep);
    background: var(--accent-amber);
    border-radius: 2px;
    padding: 1px 4px;
    letter-spacing: 0.02em;
}

@media (max-width: 860px) {
    .cf-nav__toggle { display: flex; }
    .cf-nav__list {
        display: none;
        flex-direction: column;
        border-top: 1px solid var(--border-soft);
    }
    .cf-nav__list.is-open { display: flex; }
    .cf-nav__item { border-right: 0; border-bottom: 1px solid var(--border-soft); }
    .cf-nav__item:first-child { border-left: 0; }
    .cf-nav__item--donate { margin-left: 0; }
    .cf-nav__link { padding: 14px 4px; } /* keep >=44px tap target on touch screens */
}

/* Small phones (~600px and down): tighten the top bar so the logo and
   HUD stats never fight each other for space. */
@media (max-width: 600px) {
    .cf-topbar__inner { padding: 14px 16px; gap: 10px; }
    .cf-logo__mark svg { width: 32px; height: 32px; }
    .cf-logo__title { font-size: 18px; }
    .cf-hud { gap: 14px; }
    .cf-hud__label { font-size: 8px; }
    .cf-hud__value { font-size: 15px; }
    .page-hero { padding: 28px 0 4px; }
    .page-hero h1 { font-size: 24px; }
    .panel { padding: 18px 16px; }
}

/* Very small phones (~400px and down): logo tagline and HUD labels get
   crowded - drop the tagline and shrink stat labels further rather than
   let anything wrap or overflow. */
@media (max-width: 400px) {
    .cf-logo__tagline { display: none; }
    .cf-hud { gap: 10px; }
    .cf-hud__label { display: none; }
    .cf-hud__icon-link { width: 28px; height: 28px; }
}

/* =======================================================================
   Layout / panels (mirrors the forum's boxed "forabg" panel look)
   ======================================================================= */
.cf-main { padding: 34px 0 50px; }

.panel {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 24px;
}
.panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}
.panel__header h2 { margin: 0; }
.panel__header .panel__meta { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* HUD reticle corner brackets - decorative framing on key panels */
.hud-frame::before,
.hud-frame::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent-dim);
    opacity: 0.8;
    pointer-events: none;
}
.hud-frame::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.hud-frame::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

.page-hero {
    padding: 40px 0 8px;
}
.page-hero h1 {
    text-transform: uppercase;
    font-size: 30px;
}
.page-hero__lede {
    /* Round 25: was capped at max-width:760px, which left the homepage
       intro paragraph noticeably narrower than the rest of the page's
       content width - removed so it spans the full .cf-wrap content
       width like every other section, matching the user's explicit
       "align across the entire width of the website" ask. This class is
       shared by every page-hero across the site (Home, Servers, Staff,
       Downloads, Wiki, Contact, the forum's register/forum/topic-split
       pages, and the generic CMS page renderer), so the fix applies
       everywhere consistently rather than as a homepage-only override. */
    color: var(--text);
    font-size: 15px;
}
.page-hero__crumb {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-dim);
    margin-bottom: 10px;
}

.cf-grid { display: grid; gap: 24px; }
/* minmax(0, Nfr) rather than bare Nfr - a fr track's implicit minimum
   is its content's min-content size, which lets a wide child (a table,
   a long unbreakable string) blow the whole grid out to the side rather
   than scrolling inside itself. minmax(0, ...) lets tracks actually
   shrink to the available width. */
.cf-grid--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .cf-grid--2, .cf-grid--3, .cf-grid--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 901px) and (max-width: 1080px) {
    .cf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =======================================================================
   Buttons - retro arcade cabinet styling
   ======================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 11px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-alt);
    color: var(--text-bright);
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn:hover { text-decoration: none; border-color: var(--accent-dim); color: var(--text-bright); }
.btn--primary {
    background: linear-gradient(180deg, rgba(195, 178, 106,0.16), rgba(195, 178, 106,0.05));
    border-color: var(--accent-dim);
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn--primary:hover {
    background: linear-gradient(180deg, rgba(195, 178, 106,0.28), rgba(195, 178, 106,0.08));
    color: var(--text-bright);
    box-shadow: 0 0 16px rgba(195, 178, 106, 0.3);
    cursor: crosshair;
}
.btn--ghost { background: transparent; }
.btn--block { display: flex; justify-content: center; width: 100%; }
.btn--sm { padding: 7px 12px; font-size: 11px; }

/* Orange/amber theme - the account (Log In / Create Account) buttons on
   the home page hero and forum header, and the Donate nav link, all use
   this instead of --accent (khaki) so they stand out as a distinct,
   consistent "do this" call to action wherever they appear. Same
   gradient-panel construction as .btn--primary, just re-themed to
   --accent-amber. */
.btn--amber {
    background: linear-gradient(180deg, rgba(255, 176, 0, 0.18), rgba(255, 176, 0, 0.05));
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn--amber:hover {
    background: linear-gradient(180deg, rgba(255, 176, 0, 0.32), rgba(255, 176, 0, 0.1));
    color: var(--text-bright);
    box-shadow: 0 0 16px rgba(255, 176, 0, 0.35);
    cursor: crosshair;
}
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* =======================================================================
   Status badges + capacity bars (server HUD widgets)
   ======================================================================= */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid var(--border);
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-dim);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
/* Round 26: ONLINE recolored from khaki to orange, LOCKED from orange
   to red - so the two "busy" states (actively playable vs. password-
   locked) read as clearly distinct HUD colors instead of both being
   a shade of amber. */
.status-badge.is-online { color: var(--accent-amber); border-color: var(--accent-amber); }
.status-badge.is-online .status-dot { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber); animation: cf-pulse 1.6s infinite; }
.status-badge.is-offline { color: var(--text-dim); }
.status-badge.is-offline .status-dot { background: var(--text-dim); }
.status-badge.is-locked { color: var(--accent-danger); border-color: var(--accent-danger); }
.status-badge.is-locked .status-dot { background: var(--accent-danger); }
/* Round 26: footer "All systems nominal" ping-dot recolored from
   khaki to orange to match the is-online status color above. */
.status-dot.is-online-dot { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber); display: inline-block; margin-right: 4px; animation: cf-pulse 1.6s infinite; }

/* Round 37: homepage Connect box - the SAME small badge-box construction
   (padding/border/font/radius) as the ONLINE/OFFLINE/LOCKED badge above
   it, just khaki instead of a status color, so the two stack as a
   matching pair of identically-sized boxes. This is deliberately NOT the
   taller/wider generic .btn/.btn--sm button used for Connect on the
   Servers Roster page's card footer - here it needs to sit directly
   under, and visually pair with, the compact status badge instead. */
.status-badge.is-connect { color: var(--accent); border-color: var(--accent-dim); cursor: pointer; }
.status-badge.is-connect:hover { border-color: var(--accent); color: var(--text-bright); box-shadow: 0 0 6px rgba(195, 178, 106, 0.4); }
.status-badge.is-connect[aria-disabled="true"] { opacity: 0.4; pointer-events: none; cursor: default; }

@keyframes cf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.capacity-bar {
    height: 6px;
    background: var(--bg-deep);
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}
.capacity-bar__fill {
    /* Round 25: was a dull khaki-to-khaki gradient by default, only
       switching to orange-to-red via the .is-hot modifier once a server
       hit 85% capacity. User asked for every server status bar to use
       the orange-to-red gradient outright, so that's now the only/base
       look - .is-hot is kept as a harmless alias (still applied by
       index.php/servers.php's near-capacity check) rather than touching
       the PHP that adds it, in case a future round wants to bring back a
       distinct "hot" state. */
    height: 100%;
    background: linear-gradient(90deg, var(--accent-amber), var(--accent-danger));
}

/* =======================================================================
   Server cards
   ======================================================================= */
.server-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.server-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.server-card__name { font-family: var(--font-heading); font-weight: 700; color: var(--text-bright); font-size: 14.5px; }
.server-card__game { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.server-card__description { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.server-card__row { display: flex; justify-content: space-between; font-size: 12.5px; }
.server-card__row dt { color: var(--text-dim); }
.server-card__row dd { margin: 0; font-family: var(--font-mono); color: var(--text); }
.server-card__players { font-family: var(--font-mono); font-size: 20px; color: var(--text-bright); font-weight: 700; }
.server-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; flex-wrap: wrap; gap: 10px; }

/* Round 38: label close to its value instead of stretched to the card's
   full width - used on the Servers page's Hostname/Current map/Address
   rows. */
.server-card__row--tight { justify-content: flex-start; gap: 10px; }

/* Round 38: a tighter-gap column for the map/address/player-capacity
   sequence specifically (both the homepage widget and the Servers page
   use this), separate from the card's normal 10px gap between its
   bigger sections (name block, action row, description, footer). */
.server-card__stats { display: flex; flex-direction: column; gap: 4px; }

/* Round 38: homepage Server Status widget - Connect (far left) and the
   status badge (far right) share a full-width row under the server
   name, instead of stacking to one side of it. Both use .status-badge's
   box construction (see Round 37), so giving them a shared min-width +
   centered text here makes the two ends of the row read as a matching
   same-size pair despite "Connect" and "ONLINE"/"OFFLINE"/"LOCKED"
   being different lengths. */
.server-card__action-row { display: flex; justify-content: space-between; align-items: center; }
.server-card__action-row .status-badge { min-width: 84px; justify-content: center; }

/* Hotlinked map thumbnail (DiscordGSM/Map-Thumbnails) - quietly removes
   itself via onerror if the map isn't in that dataset, so a miss never
   leaves a broken-image icon or placeholder graphic behind. */
.server-card__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--border-soft);
    background: var(--bg-deep);
}

/* Round 32 follow-up: the game icon chip - replaces the old tiny
   10px .game-badge text pill with something genuinely visible. Used
   via cf_game_icon_html() (includes/functions.php) wherever a game
   icon appears: server cards on the Servers page, the Live Stats
   per-server tabs, and a stats server page's header. Two content
   modes share the same chip shell: a real pictorial glyph (.game-icon
   svg, from includes/sprites.svg's #cf-icon-* symbols) for the game
   families with a strong enough visual identity to earn one, or an
   enlarged monogram (.game-icon--text) for every other game - see
   includes/query/registry.php's 'icon' field doc comment. */
.game-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    /* Sits right before the server/game title everywhere it's used (see
       cf_game_icon_html() call sites), so the gap goes on the right,
       between the icon and the text that follows it. */
    margin-right: 8px;
    /* Every game icon now reads as one consistent khaki accent regardless
       of that game's own badge_color - see includes/functions.php's
       cf_game_icon_html() doc comment for why badge_color is still kept
       in the registry (used elsewhere, e.g. the server card's ONLINE/
       OFFLINE status dot) even though this chip itself no longer varies. */
    border: 1.5px solid var(--accent);
    border-radius: 7px;
    background: var(--bg-deep);
    color: var(--accent);
    vertical-align: middle;
}
.game-icon svg { width: 17px; height: 17px; }
.game-icon--text {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    padding: 2px;
    word-break: break-word;
}
.game-icon--sm { width: 19px; height: 19px; border-radius: 5px; margin-right: 6px; }
.game-icon--sm svg { width: 11px; height: 11px; }
.game-icon--sm.game-icon--text { font-size: 6.5px; padding: 1px; }

.live-indicator { color: var(--accent-amber); font-size: 10.5px; }
.live-indicator::before { content: '\25CF'; margin-right: 3px; font-size: 8px; animation: cf-pulse 1.6s infinite; }

.server-card__players-list { margin-top: 4px; font-size: 12px; }
.server-card__players-list summary { cursor: pointer; color: var(--text-dim); user-select: none; }
.server-card__players-list summary:hover { color: var(--text-bright); }
.server-card__players-list table { margin-top: 6px; }
.server-card__players-list th, .server-card__players-list td { padding: 5px 8px; font-size: 12px; }

/* =======================================================================
   News / announcements list
   ======================================================================= */
.news-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-soft);
}
.news-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.news-item:first-child { padding-top: 0; }
.news-item__date {
    /* Round 25: was --accent-dim (a low-contrast dark khaki that was hard
       to read against the panel background) - switched to the site's
       orange accent (--accent-amber, the same color already used for
       warnings/locked badges/the killfeed weapon text) per the user's
       explicit ask. */
    flex: 0 0 64px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-amber);
    text-transform: uppercase;
    padding-top: 3px;
}
.news-item__title { margin: 0 0 4px; font-size: 15px; }
.news-item__meta { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.news-item__tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--accent-amber);
    margin-right: 6px;
    text-transform: uppercase;
}

/* =======================================================================
   Killfeed ticker - scrolling marquee strip (homepage flavor)
   ======================================================================= */
.killfeed {
    background: var(--bg-deep);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
/* Round 32 follow-up: the LIVE badge only renders when killfeed.php
   actually has real Live Stats frags to show (data-live="1") - a
   ticker of sample names never gets to claim to be live. */
.killfeed::before {
    content: "LIVE";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    display: none;
    align-items: center;
    padding: 0 12px;
    background: var(--bg-deep);
    color: var(--accent-danger);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    z-index: 2;
    border-right: 1px solid var(--border-soft);
    box-shadow: 12px 0 12px -6px var(--bg-deep);
}
.killfeed[data-live="1"]::before { display: flex; }
.killfeed__track {
    display: inline-block;
    padding-left: 100%;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    padding-top: 9px;
    padding-bottom: 9px;
    animation: cf-marquee 32s linear infinite;
}
.killfeed__track span { color: var(--accent); }
.killfeed__track .frag-weapon { color: var(--accent-amber); }
@keyframes cf-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .killfeed__track { animation: none; padding-left: 60px; }
}

/* =======================================================================
   Tables (rules / staff / downloads use these)
   ======================================================================= */
.cf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-table th, .cf-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.cf-table th {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.cf-table tr:hover td { background: rgba(255,255,255,0.02); }

/* =======================================================================
   Staff cards
   ======================================================================= */
.staff-card { display: flex; gap: 14px; align-items: flex-start; }
.staff-card__avatar {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
}
.staff-card__name { color: var(--text-bright); font-family: var(--font-heading); font-weight: 700; margin-bottom: 1px; }
.staff-card__role { font-size: 11px; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.staff-card__games { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }

/* =======================================================================
   Downloads
   ======================================================================= */
.download-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
}
.download-row:last-child { border-bottom: 0; }
.download-row__title { color: var(--text-bright); font-weight: 700; margin-bottom: 3px; }
.download-row__desc { font-size: 12.5px; }
.download-row__size { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* =======================================================================
   Callouts / notices
   ======================================================================= */
.notice {
    border: 1px dashed var(--border);
    border-left: 3px solid var(--accent-amber);
    background: rgba(255, 176, 0, 0.05);
    padding: 12px 16px;
    font-size: 12.5px;
    border-radius: var(--radius);
    margin-bottom: 20px;
}
.notice strong { color: var(--accent-amber); }

/* Ammo-belt divider strip - decorative */
.ammo-divider {
    height: 8px;
    margin: 30px 0;
    background-image: repeating-linear-gradient(
        135deg,
        var(--panel-alt) 0px, var(--panel-alt) 8px,
        var(--bg-deep) 8px, var(--bg-deep) 16px
    );
    border-radius: 2px;
    opacity: 0.6;
}

/* =======================================================================
   Contact form
   ======================================================================= */
.cf-form { display: grid; gap: 16px; max-width: 560px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
}
.cf-field input,
.cf-field textarea {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-bright);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 10px 12px;
}
.cf-field input:focus,
.cf-field textarea:focus {
    outline: none;
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 3px rgba(195, 178, 106, 0.1);
}
.cf-field textarea { resize: vertical; min-height: 120px; }

/* =======================================================================
   Wiki
   ======================================================================= */
.wiki-search {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: none;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.wiki-search__field { flex: 1 1 260px; }
@media (max-width: 560px) {
    .wiki-search { flex-direction: column; align-items: stretch; }
}

/* =======================================================================
   Footer
   ======================================================================= */
.cf-footer {
    background: var(--panel);
    border-top: 1px solid var(--border-soft);
}
.cf-footer__ammo-belt {
    /* Round 24: a tiled row of side-profile bullet cartridges (brass
       case in --accent-dim, copper ogive head in --accent, a dark rim
       at the case base) instead of the plain diagonal-dash pattern -
       still literally an "ammo belt" across the top of the footer, just
       drawn as actual rounds instead of an abstract stripe. */
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16' width='34' height='16'%3E%3Crect x='1' y='5' width='2' height='6' rx='1' fill='%2312160e'/%3E%3Crect x='3' y='4' width='13' height='8' rx='1.5' fill='%237d6f3d'/%3E%3Crect x='15.5' y='4' width='1' height='8' fill='%2312160e'/%3E%3Cpath d='M17,4 Q26,4 29,8 Q26,12 17,12 Z' fill='%23c3b26a'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 34px 16px;
    opacity: 0.85;
}
.cf-footer__inner {
    /* Round 26: a subtle tiled camo-splotch texture (hand-authored
       organic blob shapes in --bg-deep/--panel-alt/--accent-dim, all
       at low opacity so it reads as a mottled surface texture rather
       than competing with the footer link text) fills the middle
       band of the footer - between the Round 24 ammo-belt divider
       above and the copyright bar below - to match the site's forest
       camo/olive palette (Round 22). Same tiled-SVG-data-URI
       technique as the ammo belt. */
    background-color: var(--panel);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' width='160' height='100'%3E%3Cpath d='M47.5,22.0 C47.6,26.2 51.5,31.8 48.6,34.7 C45.7,37.5 35.3,39.8 30.0,39.2 C24.7,38.6 20.2,34.0 16.6,31.2 C12.9,28.3 8.3,25.2 8.1,22.0 C7.8,18.8 11.2,14.4 14.9,11.7 C18.5,9.0 24.5,6.1 30.0,5.7 C35.5,5.4 45.2,7.0 48.1,9.7 C51.0,12.4 47.4,17.8 47.5,22.0 Z' fill='%2312160e' fill-opacity='0.55'/%3E%3Cpath d='M140.6,18.0 C141.4,21.3 137.7,27.9 133.9,29.5 C130.2,31.1 122.3,28.5 118.0,27.8 C113.7,27.0 111.8,26.7 108.2,25.1 C104.7,23.4 97.4,20.9 96.6,18.0 C95.8,15.1 100.0,10.0 103.6,7.6 C107.2,5.2 113.7,3.4 118.0,3.8 C122.3,4.1 125.6,7.4 129.4,9.8 C133.1,12.2 139.8,14.7 140.6,18.0 Z' fill='%231e2516' fill-opacity='0.5'/%3E%3Cpath d='M92.2,55.0 C91.7,59.4 92.5,64.7 88.8,67.3 C85.1,69.9 76.4,70.7 70.0,70.8 C63.6,70.8 55.2,70.3 50.5,67.7 C45.9,65.1 41.2,58.6 42.2,55.0 C43.1,51.4 51.4,48.0 56.1,45.9 C60.7,43.8 64.0,43.5 70.0,42.6 C76.0,41.8 88.2,38.6 91.9,40.7 C95.6,42.8 92.7,50.6 92.2,55.0 Z' fill='%2312160e' fill-opacity='0.42'/%3E%3Cpath d='M157.0,68.0 C156.1,71.4 153.8,73.9 151.0,76.2 C148.2,78.6 143.7,82.1 140.0,82.1 C136.3,82.2 131.1,78.9 128.6,76.6 C126.1,74.2 125.2,71.1 124.9,68.0 C124.5,64.9 124.1,61.1 126.6,58.0 C129.2,54.9 135.0,49.9 140.0,49.5 C145.0,49.1 153.7,52.5 156.5,55.6 C159.4,58.7 158.0,64.6 157.0,68.0 Z' fill='%237d6f3d' fill-opacity='0.14'/%3E%3Cpath d='M37.1,75.0 C37.4,78.0 35.7,82.3 32.8,84.6 C30.0,87.0 24.5,88.8 20.0,89.0 C15.5,89.1 8.9,87.9 5.9,85.6 C2.9,83.3 1.8,78.5 1.9,75.0 C1.9,71.5 3.0,66.0 6.0,64.5 C9.0,63.0 15.8,65.8 20.0,66.2 C24.2,66.5 28.2,65.2 31.1,66.7 C33.9,68.2 36.8,72.0 37.1,75.0 Z' fill='%231e2516' fill-opacity='0.45'/%3E%3Cpath d='M109.0,12.0 C109.0,14.5 107.3,18.0 105.0,19.5 C102.7,21.0 97.9,21.3 95.0,20.9 C92.1,20.6 89.1,19.0 87.6,17.5 C86.2,16.0 86.7,14.1 86.4,12.0 C86.0,9.9 84.3,6.5 85.7,5.1 C87.2,3.6 91.8,3.2 95.0,3.1 C98.2,3.1 102.4,3.2 104.7,4.7 C107.0,6.2 108.9,9.5 109.0,12.0 Z' fill='%237d6f3d' fill-opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px 100px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 26px;
    padding: 36px 20px 26px;
}
@media (max-width: 760px) {
    .cf-footer__inner { grid-template-columns: 1fr; }
}
.cf-footer__heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-dim);
    margin-bottom: 12px;
}
.cf-footer__tagline { font-size: 12.5px; margin-top: 12px; max-width: 320px; }
.cf-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }

/* Round 29: "Community" widget under the footer's Connect column - live
   who's-online / most-ever-online / total-visits / total-posts / newest-
   member stats (see cf_track_visit()/cf_community_stats() in
   includes/functions.php). Boxed in --bg-deep + a hairline border, the
   same "sits inside a small dark panel" treatment already used for the
   Round 23 logo mark, so it reads as its own live component rather than
   more footer link text. */
.cf-community-widget {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    font-size: 11.5px;
}
.cf-community-widget .cf-footer__heading { margin-bottom: 8px; }
.cf-community-widget__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.cf-community-widget__row + .cf-community-widget__row { border-top: 1px solid var(--border-soft); }
.cf-community-widget__label { color: var(--text-dim); display: flex; align-items: center; }
.cf-community-widget__value { font-family: var(--font-mono); font-weight: 700; color: var(--text-bright); }
/* Color coding: amber = live/online (matches the site's existing ONLINE-
   badge convention), khaki = registered members - both the who's-online
   username list and the Round 30 "Total members" count share this same
   color, since they're the same underlying concept (registered accounts)
   at two different scopes - dim grey = unidentified guests, cyan = the
   "record" stat (reused from the forum's Moderator/Veteran badge color),
   amber again for the newest member as a "fresh" highlight. */
.cf-community-widget__value--online { color: var(--accent-amber); }
.cf-community-widget__value--members { color: var(--accent); }
.cf-community-widget__value--record { color: var(--accent-info); }
.cf-community-widget__value--newest { font-family: inherit; font-weight: 600; color: var(--accent-amber); }
.cf-community-widget__who { margin: 2px 0 0; font-size: 11px; line-height: 1.5; padding-bottom: 5px; border-bottom: 1px solid var(--border-soft); }
.cf-community-widget__members { color: var(--accent); font-weight: 600; }
.cf-community-widget__guests { color: var(--text-dim); }

.cf-footer__legal {
    /* Round 28: reverted the Round 27 khaki-bar experiment - back to the
       main content area's dark-green background (--bg, the same color
       body/main sits on) with the original --text-dim copyright text
       color, per the user's explicit ask. */
    background: var(--bg);
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px 22px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px;
}
.cf-footer__legal p { margin: 0; }
.cf-footer__legal-links a { color: var(--text-dim); }
.cf-footer__legal-links a:hover { color: var(--accent); }
.cf-footer__ping { display: flex; align-items: center; font-family: var(--font-mono); }

/* =======================================================================
   Utility
   ======================================================================= */
.u-muted { color: var(--text-dim); }
.u-accent { color: var(--accent); }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-underline { text-decoration: underline; }
.u-strike { text-decoration: line-through; }
.text-center { text-align: center; }

/* Lets wide tables (server IPs, rule enforcement) scroll horizontally
   on narrow screens instead of overflowing or squashing text. Plain
   .table-responsive shrinks with its column like everything else; add
   .cf-table--wide only on tables whose content (long monospace IPs,
   many columns) genuinely needs a floor width to stay readable. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive .cf-table--wide { min-width: 480px; }

@media (max-width: 600px) {
    /* iOS Safari zooms the viewport on focus of any input under 16px -
       bump form fields up on small screens only, so desktop stays compact. */
    .cf-field input,
    .cf-field textarea { font-size: 16px; }
}

/* =======================================================================
   CMS page content (admin/pages.php WYSIWYG output, rendered via
   includes/page-render.php) - typography for free-form admin-authored
   HTML, kept inside the same .panel look as everything else.
   ======================================================================= */
.cf-prose h1, .cf-prose h2, .cf-prose h3, .cf-prose h4 {
    color: var(--text-bright);
    font-family: var(--font-heading);
    margin: 1.4em 0 0.6em;
}
.cf-prose h1:first-child, .cf-prose h2:first-child, .cf-prose h3:first-child { margin-top: 0; }
.cf-prose h2 { font-size: 19px; }
.cf-prose h3 { font-size: 16px; }
.cf-prose p { margin: 0 0 1em; }
.cf-prose ul, .cf-prose ol { margin: 0 0 1em; padding-left: 22px; }
.cf-prose li { margin-bottom: 4px; }
.cf-prose a { color: var(--link); }
.cf-prose a:hover { color: var(--link-hover); }
.cf-prose img { border-radius: var(--radius); margin: 0.5em 0; }
.cf-prose blockquote {
    margin: 0 0 1em;
    padding: 8px 16px;
    border-left: 3px solid var(--accent);
    background: var(--panel-alt);
    color: var(--text);
}
.cf-prose code {
    font-family: var(--font-mono);
    background: var(--panel-alt);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}
.cf-prose pre {
    font-family: var(--font-mono);
    background: var(--panel-alt);
    padding: 12px 14px;
    border-radius: var(--radius);
    overflow-x: auto;
}
.cf-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 13px; }
.cf-prose th, .cf-prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.cf-prose th { color: var(--text-bright); font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.cf-prose > *:last-child { margin-bottom: 0; }

/* =======================================================================
   Alerts (public-facing equivalent of admin.css's .admin-alert - used by
   the board's register/login/forgot-password/etc. forms and anywhere
   else on the public site that needs a flash message).
   ======================================================================= */
.cf-alert {
    border-left: 3px solid var(--accent);
    background: rgba(195, 178, 106, 0.07);
    padding: 12px 14px;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 13px;
    margin-bottom: 18px;
}
.cf-alert--error { border-left-color: var(--accent-danger); background: rgba(255, 60, 60, 0.08); }
.cf-alert--success { border-left-color: #38c172; background: rgba(56, 193, 114, 0.08); }
.cf-alert--warning { border-left-color: var(--accent-amber); background: rgba(255, 176, 0, 0.07); }
.cf-alert ul { margin: 6px 0 0; padding-left: 18px; }
.cf-alert p:last-child { margin-bottom: 0; }

/* =======================================================================
   Round 32: Live Stats module (stats.php / stats-player.php / stats-server.php)
   Every color here reuses an existing --accent-* token EXCEPT the two
   chart-mark colors (#22a3af / #ff3c3c-via-var), which are deliberately
   NOT the site's stock --accent-amber - see includes/stats/charts.php's
   header comment for why (amber fails the dataviz skill's colorblind
   validator as a line-chart mark, both alone and paired with red).
   ======================================================================= */

.stat-tile { text-align: center; padding: 20px 12px; }
.stat-tile__value { display: block; font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--text-bright); line-height: 1.1; }
.stat-tile__label { display: block; margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }

.stats-server-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.stats-server-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--panel-alt); color: var(--text-dim); font-size: 13px;
}
.stats-server-tab:hover { border-color: var(--accent-dim); color: var(--text); }
.stats-server-tab.is-active { border-color: var(--accent); color: var(--text-bright); background: rgba(195, 178, 106, 0.1); }

.stats-leaderboard { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-leaderboard th {
    text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-dim); border-bottom: 1px solid var(--border);
}
.stats-leaderboard td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); }
.stats-leaderboard tr:last-child td { border-bottom: none; }
.stats-leaderboard tr:hover td { background: rgba(195, 178, 106, 0.04); }

.stats-kill-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.stats-kill-feed__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.stats-kill-feed__row:last-child { border-bottom: none; padding-bottom: 0; }
.stats-kill-feed__time { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.stats-kill-feed__weapon { font-style: normal; color: var(--accent-amber); font-size: 12px; margin-left: 4px; }

.stats-chart { width: 100%; height: auto; display: block; }
.stats-chart__legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.stats-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.stats-chart__legend-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.stats-bar-list { display: flex; flex-direction: column; gap: 10px; }
.stats-bar-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 10px; font-size: 12px; }
.stats-bar-row__label { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-bar-row__track { background: var(--panel-alt); border-radius: 4px; height: 10px; overflow: hidden; }
.stats-bar-row__fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.stats-bar-row__value { text-align: right; color: var(--text-bright); font-family: var(--font-mono); }

.stats-hitbox-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.stats-hitbox-diagram { width: 140px; height: auto; flex-shrink: 0; }
.stats-hitbox-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; flex: 1; min-width: 140px; }
.stats-hitbox-legend__row { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.stats-hitbox-legend__row i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.stats-hitbox-legend__row b { margin-left: auto; color: var(--text-bright); font-family: var(--font-mono); }

/* HLstatsX-style expansion round: clan tags, global-records cards,
   rivalry/achievement panels. Reuses .stats-bar-list/.stats-bar-row
   above as-is for the new server-activity/top-maps/top-clans panels
   on stats.php - no new rules needed for those. */
.stats-clan-tag { display: inline-block; font-size: 13px; padding: 2px 8px; margin-left: 8px; border: 1px solid; border-radius: 4px; vertical-align: middle; font-weight: 600; }
.stats-clan-tag a { color: inherit; }

.page-hero__lede .rank-badge__icon { vertical-align: -2px; margin-right: 3px; color: var(--accent); }

.stats-record-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 14px; }
.stats-record-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.stats-record-card__value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--text-bright); line-height: 1.1; }
.stats-record-card__player { font-size: 12px; }

.stats-rivalry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.stats-rivalry-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.stats-rivalry-list li:last-child { border-bottom: none; padding-bottom: 0; }
.stats-rivalry-list__count { color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }

.stats-achv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stats-achv { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 6px; font-size: 12px; background: var(--panel-alt); cursor: default; }
.stats-achv__icon { width: 15px; height: 15px; flex: none; color: var(--accent-amber); }