/* zhell.nu: Nocturne design system (tokens + component classes) with the light-blue zhell override, then the
   site's own layout classes. No inline styles anywhere: the CSP allows style only from this file. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../vendor/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../vendor/fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --color-bg: #0b1522;
  --color-surface: #152130;
  --color-text: #e9e9ed;
  --color-accent: #2ab0ee;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-danger: #f0616d;
  --color-ok: #3fd18a;

  --color-neutral-100: #f3f5fe; --color-neutral-200: #e4e7f5; --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca; --color-neutral-500: #9397ab; --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c; --color-neutral-800: #3f424d; --color-neutral-900: #292b31;

  --color-accent-100: #eaf7fe; --color-accent-200: #c9ebfb; --color-accent-300: #97d8f7;
  --color-accent-400: #5fc4f2; --color-accent-500: #2ab0ee; --color-accent-600: #1590cc;
  --color-accent-700: #0f6fa3; --color-accent-800: #0d5178; --color-accent-900: #0b344f;
  --color-section: #0f7cb8;
  --z-turq: #4cc9f0;
  --z-sky: #5fc4f2;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,.65);
  --fade-rule: linear-gradient(90deg, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
  color-scheme: dark;
}

/* — base — */
/* Page changes: site.js swaps <main> inside a view transition (cross-fade; the header stays put). The canvas is
   dark before any CSS paints thanks to <meta name="color-scheme" content="dark">. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: ease-out; }
.site-header { view-transition-name: site-header; }
html { background: var(--color-bg); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
  font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }
a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
code { font-family: var(--font-mono); color: var(--color-accent-300); }
.ph { font-size: 16px; line-height: 1; }

/* — buttons — */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  text-decoration: none; white-space: nowrap; flex-shrink: 0; font-family: var(--font-heading); font-weight: 500;
  font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent;
  border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); }
.btn:hover { color: var(--color-text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
/* Connect: green, the counterpart of the red "Coming soon" below (same tinted look). */
.btn-connect { color: var(--color-ok); border-color: color-mix(in srgb, var(--color-ok) 70%, transparent);
  background: color-mix(in srgb, var(--color-ok) 10%, transparent); }
.btn-connect:hover { color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 18%, transparent); }
.btn-connect:active { background: color-mix(in srgb, var(--color-ok) 26%, transparent); }
.btn-sm { font-size: 12px; padding: 4px 9px; }
[hidden] { display: none !important; }
/* A server that isn't open yet: a red, non-clickable stand-in for Connect. */
.btn-soon { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 70%, transparent);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent); cursor: default; }

/* Brand marks (Simple Icons, CC0) drawn in currentColor. */
.mark { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.mark-discord { --mark: url("../icons/discord.svg"); }
.mark-steam { --mark: url("../icons/steam.svg"); }
.mark-accent { width: 20px; height: 20px; background: var(--color-accent); }

/* — forms — */
.input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text);
  caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.seg { display: inline-flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer;
  color: var(--color-neutral-300); white-space: nowrap; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:hover { color: var(--color-neutral-200); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt.on { background: var(--color-accent-900); color: var(--color-accent-200); }

/* — cards, tags — */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; border-radius: 6px; }
.tag .ph { font-size: 13px; }
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); }
.table td { padding: var(--space-2); vertical-align: middle; }
.table thead tr { background: var(--fade-rule) no-repeat bottom / 100% 1px; }
.table tbody tr { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
  color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
.table tbody tr:hover { background:
  linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent), color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
  linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
  color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
.table-card { padding: 4px 16px; overflow-x: auto; }
.table-wide { min-width: 820px; }
.clickable { cursor: pointer; }

/* — dialog (native <dialog>; backdrop click closes it, see site.js) — */
.dialog { width: min(460px, calc(100% - 32px)); flex-direction: column; gap: 14px; padding: var(--space-8);
  border: 0; border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.dialog[open] { display: flex; }
.dialog::backdrop { background: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.dialog-title { font-family: var(--font-heading); font-weight: 500; font-size: 20px; overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; }
.facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; margin: 0; }
.facts dt { color: var(--color-neutral-500); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* — helpers — */
.wrap { max-width: 1200px; margin: 0 auto; width: 100%; padding-left: 24px; padding-right: 24px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: 12px; }
.muted { color: var(--color-neutral-400); }
.dim { color: var(--color-neutral-500); }
.soft { color: var(--color-neutral-300); }
.accent { color: var(--color-accent); }
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.align-start { align-self: flex-start; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.empty { padding: 24px 0; margin: 0; color: var(--color-neutral-500); font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-neutral-700); }
.dot-on { background: var(--color-ok); box-shadow: 0 0 8px var(--color-ok); }
.dot-off { background: var(--color-danger); }
.dot-live { background: var(--z-turq); }
.bar { display: block; width: 100%; height: 3px; }
.bar-bg { fill: var(--color-neutral-800); }
.bar-fill { fill: var(--color-accent); }

/* — page frame — */
.page { min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(1200px 520px at 12% -10%, var(--color-accent-900), transparent 70%), var(--color-bg); }
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.nav-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--color-text);
  font-family: var(--font-heading); font-weight: 500; font-size: 18px; }
.nav-brand:hover { color: var(--color-text); }
.logo-sm { width: 24px; height: auto; flex-shrink: 0; }
.logo-lg { width: 76px; height: auto; flex-shrink: 0; }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.nav-link { position: relative; padding: 6px 9px; color: var(--color-neutral-400); }
.nav-link:hover { color: var(--color-text); background: transparent; }
.nav-link.on { color: var(--color-text); }
.nav-link::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 1px;
  background: var(--color-accent); opacity: 0; }
.nav-link.on::after { opacity: 1; }
.caret { font-size: 12px; }
.inline { display: inline; margin: 0; }
.me { display: flex; align-items: center; gap: 4px; }
.me-link { display: flex; align-items: center; gap: 8px; color: var(--color-text); font-size: 13px; max-width: 200px; }
.me-link:hover { color: var(--color-accent-300); }
.me-avatar { position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--color-neutral-800); display: grid; place-items: center; font-size: 12px; }
.me-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.me-row { box-shadow: inset 2px 0 0 var(--color-accent); }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 260px; padding: 6px;
  border-radius: 18px; background: var(--color-surface); display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius-md); color: var(--color-text); }
.menu-item:hover, .menu-item.on { background: var(--color-neutral-800); color: var(--color-text); }
.menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-name { font-size: 14px; font-weight: 500; }
.menu-sub { font-size: 12px; color: var(--color-neutral-400); }
.banner { background: var(--color-accent-900); color: var(--color-accent-200); font-size: 12px; }
.banner-row { display: flex; gap: 8px; align-items: center; padding-top: 7px; padding-bottom: 7px; }
.main { flex: 1; padding-bottom: 72px; }
.footer { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 24px; padding-bottom: 24px;
  font-size: 12px; color: var(--color-neutral-500); }

/* — pages — */
.section { padding-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.narrow { max-width: 760px; }
.page-head { display: flex; flex-direction: column; gap: 6px; }
.page-head.narrow { max-width: 620px; }
.h-page { font-size: 32px; }
.h-section { font-size: 20px; }
.h-display { font-size: clamp(44px, 7vw, 72px); line-height: 1; letter-spacing: -.03em; }
.lead { color: var(--color-neutral-400); font-size: 14px; line-height: 1.55; }

.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px;
  padding: 64px 0 56px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 18px; max-width: 540px; }
.hero-title { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.hero-title h1 { font-size: clamp(48px, 8vw, 84px); line-height: .95; letter-spacing: -.03em; }
.hero-intro { font-size: 16px; line-height: 1.55; color: var(--color-neutral-300); text-wrap: pretty; }
.server-card { padding: 18px; gap: 6px; }
.server-card > .row-between { padding-bottom: 6px; }
.server-line { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 72px; gap: 12px; align-items: center; padding: 9px 0; }
.server-line-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--color-text); }
.server-line-text:hover { color: var(--color-accent-300); }
.server-line-action { display: flex; justify-content: flex-end; }
.home-lower { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; padding-bottom: 24px; align-items: start; }
.link-card { padding: 4px 16px; gap: 0; }
.link-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; color: var(--color-text); }
.link-row:hover { color: var(--color-accent-300); }
.link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.link-icon { font-size: 20px; color: var(--color-accent); }

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-neutral-300); white-space: nowrap; }
.copy { font-size: 12px; color: var(--color-neutral-500); padding: 0; gap: 4px; font-family: var(--font-mono); }
.copy .ph { font-size: 12px; }
.col-players { width: 140px; }
.players { display: flex; flex-direction: column; gap: 5px; }
.players-toggle { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.players-toggle .caret { font-size: 11px; color: var(--color-neutral-500); transition: transform .15s; }
tr.open .players-toggle .caret { transform: rotate(180deg); }
.player-row > td { padding: 0 var(--space-2) 12px 34px; }
.player-list .empty { padding: 8px 0; }
.table-inner { font-size: 13px; }
.table-inner th { padding-top: 2px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.search { position: relative; flex: 1; min-width: 220px; max-width: 360px; margin: 0; }
.search .ph { position: absolute; left: 10px; top: 10px; color: var(--color-neutral-500); }
.search .input { padding-left: 32px; }
.search-field { display: block; max-width: none; min-width: 0; }
.kind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

.rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.rule { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; align-items: baseline;
  background: var(--fade-rule) bottom / 100% 1px no-repeat; }
.rule-n { font-size: 13px; font-weight: 500; color: var(--color-accent); }
.rule-text { display: flex; flex-direction: column; gap: 4px; }
.rule-title { font-size: 15px; }

.soon { padding: clamp(56px, 10vw, 120px) 0 24px; display: flex; flex-direction: column; gap: 18px; max-width: 620px; }

/* — news — */
.news-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.news-card { padding: 16px; color: var(--color-text); }
.news-card:hover { color: var(--color-text); box-shadow: var(--shadow-md); }
.news-list { display: flex; flex-direction: column; }
.news-item { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; background: var(--fade-rule) bottom / 100% 1px no-repeat; }
.news-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.news-link { display: flex; flex-direction: column; gap: 8px; color: var(--color-text); }
.news-link:hover { color: var(--color-accent-300); }
.h-news { font-size: 22px; }
.news-excerpt { font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.post { gap: 28px; padding-top: 40px; }
.h-post { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; text-wrap: balance; }
.post-body { display: flex; flex-direction: column; gap: 14px; color: var(--color-neutral-200); font-size: 16px; line-height: 1.7; }
.post-body p { white-space: pre-line; text-wrap: pretty; overflow-wrap: anywhere; }

/* — stats section — */
.strong { color: var(--color-text); }
.tiny { font-size: 11px; }
.right { text-align: right; }
.minw0 { min-width: 0; }
.grow { flex: 1; }
.span-2 { grid-column: span 2; min-width: 0; }
.accent-soft { color: var(--color-accent-300); }
.chat-rank { color: var(--rank, var(--color-accent-300)); }
/* chat ranks in their in-game colours (zChat colour tags; CS2 kept CS:GO's chat colours) */
.tag-rank { border: 1px solid var(--rank, var(--color-accent)); color: var(--rank, var(--color-accent)); }
.rank-c-normal { --rank: var(--color-neutral-100); }
.rank-c-darkred { --rank: #ff3b3b; }
.rank-c-pink { --rank: #ba81f0; }
.rank-c-green { --rank: #40ff40; }
.rank-c-lightgreen { --rank: #bfff90; }
.rank-c-lime { --rank: #a2ff47; }
.rank-c-red { --rank: #ff6060; }
.rank-c-grey { --rank: #8f969e; }  /* dimmer than in game, so it stands apart from silver */
.rank-c-olive { --rank: #ede47a; }
.rank-c-a { --rank: #b0c2d8; }
.rank-c-lightblue { --rank: #5e98d9; }
.rank-c-blue { --rank: #6b85ff; }
.rank-c-purple { --rank: #d32ce6; }
.rank-c-darkorange { --rank: #eb4b4b; }
.rank-c-orange { --rank: #e4ae39; }
.plain { color: var(--color-text); }
.plain:hover { color: var(--color-accent-300); }
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.stack-tight { display: flex; flex-direction: column; gap: 2px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }
.btn-block { width: 100%; margin-top: 4px; }
.flag { display: inline-block; width: 18px; height: 13px; border-radius: 2px; flex-shrink: 0; box-shadow: var(--shadow-sm); object-fit: cover; }
.flag-lg { width: 26px; height: 19px; border-radius: 3px; }
.who { display: inline-flex; gap: 6px; align-items: center; }
.time-lg { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.time-md { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.time-sm { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.h-sub { font-size: 18px; }
.heading-link { color: var(--color-text); display: inline-flex; align-items: baseline; gap: 6px; }
.heading-link:hover { color: var(--color-accent-300); }
.heading-link .ph { font-size: 14px; align-self: center; color: var(--color-accent); }
.h-stats { font-size: clamp(36px, 5vw, 52px); line-height: 1; letter-spacing: -.02em; }
.narrow-lg { max-width: 860px; }
.narrow-xl { max-width: 980px; }
.section-tail { padding-bottom: 24px; }

.stats-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; }
.stats-game { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.hero-stats { padding: 32px 0 48px; }
.totals { display: flex; gap: 8px 24px; flex-wrap: wrap; padding-top: 4px; font-size: 13px; color: var(--color-neutral-400); }
.totals > span { white-space: nowrap; }
.live-card { padding: 18px; gap: 14px; }
.live-map { font: 500 22px var(--font-mono); color: var(--color-text); overflow-wrap: anywhere; }
a.live-map:hover { color: var(--color-accent-300); }
.live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.live-grid .label { letter-spacing: 0; text-transform: none; }
.live-num { font-size: 18px; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.list-card { padding: 4px 16px; gap: 0; }
.recent-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0;
  background: var(--fade-rule) bottom / 100% 1px no-repeat; }
.recent-row:last-child, .top-row:last-child, .wr-line:last-child { background: none; }
.recent-result { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.result-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-neutral-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-kind .ph { font-size: 12px; }
.result-kind.kind-wr { color: var(--color-accent); font-weight: 500; }
.result-kind.kind-top10 { color: var(--color-accent-300); }
/* times set on the old CS:GO server: a quiet outlined label */
.era { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border: 1px solid var(--color-neutral-700); border-radius: 4px;
  font: 500 9.5px/1 var(--font-body); letter-spacing: .06em; color: var(--color-neutral-500); vertical-align: middle; cursor: help; }
.recent-line { display: flex; gap: 6px; align-items: center; font-size: 14px; flex-wrap: wrap; min-width: 0; }
.top-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0;
  color: var(--color-text); background: var(--fade-rule) bottom / 100% 1px no-repeat; }
.top-row:hover { color: var(--color-accent-300); }
.link-card-big { padding: 16px; gap: 8px; color: var(--color-text); }
.link-card-big:hover { color: var(--color-text); box-shadow: var(--shadow-md); }
.mark-lg { width: 22px; height: 22px; }
.wr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.wr-card { padding: 14px; gap: 6px; color: var(--color-text); }
.wr-card:hover { color: var(--color-text); box-shadow: var(--shadow-md); }

.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.map-card { padding: 0; gap: 0; overflow: hidden; color: var(--color-text); }
.map-card:hover { color: var(--color-text); box-shadow: var(--shadow-md); }
.map-thumb { aspect-ratio: 16 / 9; background:
  repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--color-text) 3%, transparent) 10px 11px),
  linear-gradient(160deg, var(--color-accent-900), var(--color-neutral-900)); }
.map-thumb img { width: 100%; height: 100%; object-fit: cover; }
.map-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.map-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.h-map { font-size: clamp(24px, 4vw, 36px); letter-spacing: -.02em; word-break: break-all; }
/* the middle half of the 16:9 Workshop preview: a 32:9 strip centred on the image's vertical middle */
.map-banner { position: relative; aspect-ratio: 32 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-surface); box-shadow: var(--shadow-sm); }
.map-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.map-cell { display: inline-flex; align-items: center; gap: 10px; }
.map-cell:hover .mono { color: var(--color-accent-300); }
.map-mini { width: 64px; aspect-ratio: 16 / 9; flex-shrink: 0; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-sm);
  background: linear-gradient(160deg, var(--color-accent-900), var(--color-neutral-900)); }
.map-mini img { width: 100%; height: 100%; object-fit: cover; }
.style-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.style-tab { color: var(--color-neutral-400); padding: 6px 10px; }
.style-tab.on { color: var(--color-accent-200); background: var(--color-accent-900); }
.table-board { min-width: 760px; }
.col-rank { width: 44px; }
.table-foot { padding: 12px 0 8px; margin: 0; font-size: 13px; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.field > span { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.field-wide { min-width: 260px; }
.records-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: start; }
.table-records { min-width: 680px; }
.timeline { display: flex; flex-direction: column; padding-left: 14px;
  background: linear-gradient(180deg, var(--color-accent-700), transparent) left / 1px 100% no-repeat; }
.timeline-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; position: relative; min-width: 0; }
.timeline-dot { position: absolute; left: -17px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-neutral-700); }
.timeline-dot.wr { background: var(--color-accent); }
.timeline-dot.top10 { background: var(--color-accent-700); }

.table-lb { min-width: 560px; }
.lb-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lb-value .bar { width: 120px; }
.lb-value .num { min-width: 44px; }
.clickable-link { cursor: pointer; }
.search-wide { max-width: 380px; }
.table-players { min-width: 680px; }
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.profile { gap: 28px; }
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.avatar { position: relative; width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-accent-800);
  display: grid; place-items: center; font-size: 32px; color: var(--color-accent-300); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-name { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat-card { padding: 14px; gap: 4px; }
.stat-card .label { letter-spacing: .06em; }
.stat-value { font-size: 22px; }
.profile-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: start; }
.bars-card { padding: 16px; gap: 10px; }
.style-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; }
.style-bar .bar { height: 4px; }
.wr-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; color: var(--color-text);
  background: var(--fade-rule) bottom / 100% 1px no-repeat; }
.wr-line:hover { color: var(--color-accent-300); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ach { padding: 12px; gap: 4px; }
.ach.locked { opacity: .5; }
.ach-icon { font-size: 20px; color: var(--color-accent); }
.ach.locked .ach-icon { color: var(--color-neutral-600); }

.info { gap: 48px; padding-top: 32px; }
.h-info { font-size: 22px; }
.body { font-size: 14px; line-height: 1.6; }
.rank-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.rank-card { padding: 14px; gap: 6px; border-radius: 18px; }
.rank-card.first { background: linear-gradient(135deg, var(--z-sky), var(--z-turq)); color: var(--color-bg); }
.rank-n { font: 500 24px/1 var(--font-heading); color: var(--color-neutral-400); }
.rank-card.first .rank-n { color: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.rank-card .tag-rank, .special-card .tag-rank { font-size: 13px; }
.rank-card.first .tag-rank { background: var(--color-bg); }
.band-row { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 88px; gap: 14px; align-items: center; padding: 9px 0;
  background: var(--fade-rule) bottom / 100% 1px no-repeat; }
.band-row:last-child { background: none; }
.range { display: block; width: 100%; height: 4px; }
.special { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.special-card { padding: 14px; gap: 4px; }

@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .section { padding-top: 32px; }
  .hero { padding: 40px 0 40px; gap: 32px; }
  .nav-links { order: 3; width: 100%; margin-left: -9px; }
  .rule { grid-template-columns: 28px minmax(0, 1fr); }
  .rule .tag { grid-column: 2; justify-self: start; }
  .nav-links { position: relative; }
  .menu { position: static; }
  .menu-panel { left: 0; right: 0; min-width: 0; }
  .hide-sm { display: none; }
  .span-2 { grid-column: auto; }
  .recent-row { grid-template-columns: minmax(0, 1fr) auto; }
  .recent-row > .map-mini { display: none; }
  .live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}