/* Rust Host Finder — one-page server catalog.
   Palette: night ops on the island — black-blue field, cold electric light.
   Everything raised carries a deep drop shadow plus a 1px moonlight edge;
   everything accented emits a blue bloom. Cyan is reserved for live data. */

:root {
  /* Surfaces: near-black with a blue undertone, never warm */
  --bg: #05070d;
  --bg-deep: #070b14;
  --surface: #0b1220;
  --surface-2: #101a2e;
  --surface-3: #16233c;
  --line: rgba(120, 160, 255, .12);
  --line-soft: rgba(120, 160, 255, .07);
  --line-strong: rgba(120, 160, 255, .28);

  /* Ink — dim/faint are still reading roles, so both clear 4.5:1 on --surface */
  --text: #e8eefb;
  --text-dim: #9fb0d0;
  --text-faint: #7f8fb2;

  /* Accents: one electric-blue family; cyan only for live/sync signals */
  --accent: #4d8dff;
  --accent-bright: #7fb0ff;
  --accent-glow: rgba(77, 141, 255, .40);
  --accent-ink: #04070f;
  --cyan: #37e1ff;
  --cyan-glow: rgba(55, 225, 255, .40);

  /* Semantics, tuned cold */
  --online: #2be39b;
  --warn: #ffb84d;
  --bad: #ff6b6b;

  /* Light system: elevation = deep drop + cold inner top highlight */
  --edge: inset 0 1px 0 rgba(160, 190, 255, .08);
  --elev-1: 0 4px 14px rgba(0, 0, 0, .45), var(--edge);
  --elev-2: 0 10px 30px rgba(0, 0, 0, .55), var(--edge);
  --elev-3: 0 18px 44px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(160, 190, 255, .08);

  /* Glows: same blue family, same radii everywhere */
  --glow-sm: 0 0 12px -2px var(--accent-glow);
  --glow-md: 0 6px 22px -6px var(--accent-glow), 0 0 16px -6px var(--accent-glow);
  --glow-lg: 0 10px 30px -6px rgba(77, 141, 255, .55), 0 0 26px -4px var(--accent-glow);
  --focus-ring: 0 0 0 4px rgba(77, 141, 255, .22), 0 0 20px -2px var(--accent-glow);

  /* Type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --wrap: 1240px;
  --gap: 14px;
  --radius: 10px;
  --radius-sm: 6px;

  /* Catalog grid: name | players | region | last wipe | next wipe | ping | actions.
     The actions track fits the star next to the connect button at rest; the
     wider transient "скопировано" state overflows into the ping gutter, as it
     did before the star existed. */
  --cols: minmax(0, 1fr) 108px 96px 118px 178px 88px 124px;
}

* { box-sizing: border-box; }

/* Keep the `hidden` attribute working on elements whose class sets a display
   (`.banner`, `.btn`, …) — author rules would otherwise beat the UA default. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  /* Cold haze from above plus a barely-there hatch, and depth toward the fold */
  background-image:
    repeating-linear-gradient(115deg, rgba(150, 190, 255, .012) 0 2px, transparent 2px 9px),
    radial-gradient(1200px 560px at 50% -8%, rgba(77, 141, 255, .10), transparent 70%),
    linear-gradient(180deg, rgba(5, 7, 13, 0) 40%, rgba(7, 11, 20, .9) 100%);
  background-attachment: fixed;
}

::selection { background: rgba(77, 141, 255, .32); color: var(--text); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
ul, dl, dd, dt { margin: 0; padding: 0; }
li { list-style: none; }
button, input, select { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; transition: color .15s ease, text-shadow .15s ease; }
a:hover { color: var(--accent-bright); text-decoration: underline; text-shadow: 0 0 14px var(--accent-glow); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
  box-shadow: var(--glow-lg);
}
.skip-link:focus { left: 0; }
.skip-link:hover { color: var(--accent-ink); text-decoration: none; }

/* Focus is louder than anything else on the page: ring plus bloom. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: var(--focus-ring);
}

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 600; font-size: 14px; letter-spacing: .01em;
  box-shadow: var(--elev-1);
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .18s ease, transform .1s ease;
}
.btn:hover {
  background: var(--surface-3); border-color: var(--line-strong); text-decoration: none;
  box-shadow: var(--elev-2), var(--glow-sm);
}
.btn:active { transform: translateY(1px); box-shadow: var(--elev-1); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: var(--edge); filter: saturate(.6); }
.btn[disabled]:hover { background: var(--surface-2); border-color: var(--line); box-shadow: var(--edge); }

/* The primary CTA is a light source: dark ink on electric blue, always blooming. */
.btn--accent {
  background: linear-gradient(180deg, #6ba0ff, #3f7def);
  border-color: rgba(150, 190, 255, .45); color: var(--accent-ink);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--glow-md);
}
.btn--accent:hover {
  background: linear-gradient(180deg, #86b4ff, #4d8dff);
  border-color: rgba(190, 215, 255, .6); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--glow-lg);
}
.btn--accent:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--glow-sm); }

.btn--ghost { background: transparent; color: var(--text-dim); box-shadow: none; }
.btn--ghost:hover { color: var(--text); background: var(--surface-2); box-shadow: var(--elev-1); }

.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--lg { padding: 14px 26px; font-size: 15px; }
.btn--wide { width: 100%; max-width: 340px; }

/* ── Topbar ──────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 7, 13, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 12px 34px -24px #000;
}
.topbar__inner { display: flex; align-items: center; gap: 20px; min-height: 60px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; color: var(--text); text-shadow: none; }
.brand__mark {
  color: var(--accent); display: inline-flex;
  filter: drop-shadow(0 0 9px var(--accent-glow));
  transition: filter .18s ease;
}
.brand:hover .brand__mark { filter: drop-shadow(0 0 14px rgba(77, 141, 255, .65)); }
.brand__text { font-weight: 900; letter-spacing: -.02em; font-size: 15px; text-transform: uppercase; }

.stats { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.stats__item { display: flex; flex-direction: column; line-height: 1.25; }
.stats dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint);
}
.stats dd { font-size: 14px; font-weight: 600; }
/* The sync clock is the one live-data readout in the bar, so it takes the cyan. */
.stats__item--sync dd { color: var(--cyan); text-shadow: 0 0 14px var(--cyan-glow); }

.topbar__cta { flex: none; }

/* Language switcher: same materials as the filter selects, sized for the bar. */
.lang-select {
  flex: none; height: 32px; max-width: 150px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--surface); color: var(--text-dim);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .01em;
  cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  box-shadow: var(--elev-1);
  transition: color .15s ease, border-color .15s ease, box-shadow .18s ease;
}
.lang-select:hover { color: var(--text); border-color: var(--line-strong); box-shadow: var(--elev-1), var(--glow-sm); }
.lang-select:focus-visible { border-color: var(--accent); }
.lang-select option { background: var(--surface); color: var(--text); }

/* ── Hero ────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
  text-shadow: 0 0 16px var(--accent-glow);
}

.hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 46px);
}
/* Signature element: one cold searchlight crossing the hero at ~8°, with a
   defined core so it reads as a beam rather than as ambient haze. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -70%; left: -6%; width: 62%; height: 240%;
  background: linear-gradient(90deg,
    rgba(77, 141, 255, 0) 0%,
    rgba(77, 141, 255, .035) 24%,
    rgba(120, 180, 255, .10) 43%,
    rgba(170, 210, 255, .18) 50%,
    rgba(120, 180, 255, .10) 57%,
    rgba(55, 225, 255, .05) 74%,
    rgba(77, 141, 255, 0) 100%);
  filter: blur(20px);
  transform: translate3d(-3%, 0, 0) rotate(8deg);
  animation: beam-drift 34s ease-in-out infinite;
}
/* Edge vignette: the beam fades into the dark instead of hitting a hard edge. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(122% 96% at 46% 26%, rgba(5, 7, 13, 0) 48%, rgba(3, 5, 10, .6) 100%);
}
.hero__inner { position: relative; z-index: 1; max-width: 900px; }

@keyframes beam-drift {
  0%   { transform: translate3d(-3%, 0, 0) rotate(8deg); opacity: .78; }
  50%  { transform: translate3d(7%, 0, 0) rotate(8deg); opacity: 1; }
  100% { transform: translate3d(-3%, 0, 0) rotate(8deg); opacity: .78; }
}

.hero__title {
  font-size: clamp(2.3rem, 6.4vw, 4.3rem);
  font-weight: 900;
  line-height: .97;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
/* The accent word slants like the emblem's wordmark and carries the cyan bloom. */
.hero__title em {
  font-style: italic;
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(55, 225, 255, .45), 0 0 64px rgba(55, 225, 255, .25);
}
.hero__lede {
  margin-top: 20px; max-width: 60ch;
  color: var(--text-dim); font-size: clamp(15px, 1.6vw, 17px);
}
.hero__lede .mono { color: var(--text); }

.notice {
  margin-top: 20px; padding: 12px 16px; border: 1px solid rgba(77, 141, 255, .3);
  border-radius: var(--radius-sm); background: rgba(77, 141, 255, .09); color: var(--text);
  box-shadow: var(--elev-1);
}

/* ── Section headers ─────────────────────────────────────── */

.section-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.section-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.section-note { font-size: 12.5px; color: var(--text-faint); }

/* Catalog / favourites switch — carries the weight of a section title. */
.tabs { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--text-faint); cursor: pointer;
  font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em;
  transition: color .15s ease, border-color .15s ease, box-shadow .18s ease;
}
.tab:hover { color: var(--text-dim); }
/* The active indicator bleeds light downward, like a lit strip. */
.tab--active {
  color: var(--accent); border-bottom-color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
  box-shadow: 0 5px 16px -6px var(--accent-glow);
}
.tab--active:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.tab__count {
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-dim);
}
.tab--active .tab__count {
  border-color: rgba(77, 141, 255, .45); background: rgba(77, 141, 255, .16);
  color: var(--accent-bright); text-shadow: none;
}

/* ── Showcase: paid server slots (signature) ─────────────── */

.showcase { padding: 18px 0 8px; }
/* The CTA is a button among baseline-aligned text, so this head centres instead. */
.section-head--showcase { align-items: center; }
.section-head__cta { margin-left: auto; flex: none; }
.showcase__scroll {
  margin: 0 -20px; padding: 0 20px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: rgba(120, 160, 255, .28) transparent;
}
.showcase__scroll::-webkit-scrollbar { height: 8px; }
.showcase__scroll::-webkit-scrollbar-track { background: transparent; }
.showcase__scroll::-webkit-scrollbar-thumb { background: rgba(120, 160, 255, .22); border-radius: 999px; }
.showcase__scroll::-webkit-scrollbar-thumb:hover { background: rgba(120, 160, 255, .38); }
.showcase__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: var(--gap); padding-bottom: 6px;
}

.slot {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px 16px 14px; border-radius: var(--radius);
  min-height: 150px; scroll-snap-align: start;
}

/* Vacant slots stay unlit: dashed hairline, no bloom until hovered. */
.slot--free {
  border: 1px dashed var(--line); background: rgba(11, 18, 32, .55);
  box-shadow: var(--edge);
  transition: border-color .15s ease, background .15s ease, box-shadow .18s ease;
}
.slot--free:hover {
  border-color: rgba(77, 141, 255, .38); background: var(--surface);
  box-shadow: var(--elev-2), var(--glow-sm);
}
/* stencil crate number in the corner */
.slot--free::after {
  content: attr(data-num); position: absolute; right: 10px; bottom: -16px;
  font-family: var(--font-mono); font-size: 64px; font-weight: 700; letter-spacing: -.06em;
  color: rgba(140, 175, 235, .07); pointer-events: none;
}
.slot__state {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint);
}
.slot__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 8px 1px var(--accent-glow);
  animation: pulse 2.2s ease-in-out infinite;
}
.slot__title { margin-top: 10px; font-size: 15.5px; }
.slot__pitch { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); max-width: 36ch; }
.slot__link { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; }

/* A sold slot is lit: premium border glow plus the accent strip on its edge. */
.slot--ad {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(77, 141, 255, .34);
  box-shadow: var(--elev-2), 0 0 30px -10px var(--accent-glow);
}
.slot--ad::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--accent));
  box-shadow: 0 0 16px 1px var(--accent-glow);
}
.slot__ad-mark {
  font-size: 10px; font-style: italic; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent-bright);
  border: 1px solid rgba(77, 141, 255, .38); background: rgba(77, 141, 255, .12);
  border-radius: 4px; padding: 2px 6px;
}
.slot__name {
  margin-top: 10px; font-size: 15px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot__meta {
  margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-faint);
}
.slot__site { font-weight: 600; }
.slot__actions { margin-top: auto; padding-top: 12px; display: flex; gap: 10px; align-items: center; }

/* ── Controls ────────────────────────────────────────────── */

.controls {
  position: sticky; top: 60px; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 0 14px;
  background: linear-gradient(180deg, var(--bg) 76%, rgba(5, 7, 13, 0));
}

.control { position: relative; display: flex; align-items: center; }
.control--search { flex: 1 1 260px; min-width: 0; }
.control__icon { position: absolute; left: 12px; color: var(--text-faint); pointer-events: none; z-index: 1; }

.controls input[type="search"],
.controls select {
  height: 40px; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0 12px;
  color: var(--text); font-size: 14px;
  box-shadow: var(--elev-1);
  transition: border-color .15s ease, box-shadow .18s ease;
}
.controls input[type="search"] { padding-left: 36px; }
.controls input[type="search"]::placeholder { color: var(--text-faint); }
.controls select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.controls select:hover, .controls input[type="search"]:hover {
  border-color: var(--line-strong); box-shadow: var(--elev-1), var(--glow-sm);
}
.controls select:focus-visible, .controls input[type="search"]:focus-visible { border-color: var(--accent); }
.controls select option { background: var(--surface); color: var(--text); }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; padding: 0 4px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The hidden input must not paint the global focus bloom on its 0×0 box. */
.switch input:focus-visible { outline: none; box-shadow: none; }
.switch__box {
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
  transition: background .15s ease, border-color .15s ease, box-shadow .18s ease;
}
.switch__box::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--text-faint); transition: transform .15s ease, background .15s ease, box-shadow .18s ease;
}
.switch input:checked + .switch__box {
  background: rgba(43, 227, 155, .18); border-color: rgba(43, 227, 155, .45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 14px -4px rgba(43, 227, 155, .7);
}
.switch input:checked + .switch__box::after {
  transform: translateX(14px); background: var(--online);
  box-shadow: 0 0 8px 1px rgba(43, 227, 155, .6);
}
.switch input:focus-visible + .switch__box { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--focus-ring); }
.switch__text { font-size: 13.5px; color: var(--text-dim); }

/* ── Banner ──────────────────────────────────────────────── */

.banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--elev-2);
  font-size: 13.5px;
}
.banner--offline {
  border-color: rgba(255, 107, 107, .35); background: rgba(255, 107, 107, .10);
  box-shadow: var(--elev-2), 0 0 24px -12px rgba(255, 107, 107, .6);
}
.banner__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none;
  box-shadow: 0 0 8px 1px rgba(255, 107, 107, .65);
  animation: pulse 1.8s ease-in-out infinite;
}
.banner__text { flex: 1 1 220px; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Catalog ─────────────────────────────────────────────── */

.finder { padding: 26px 0 44px; }

.row-grid {
  display: grid; grid-template-columns: var(--cols);
  gap: 12px; align-items: center;
}
.row-grid > * { min-width: 0; }

.list-head {
  padding: 0 16px 10px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint);
}

.list { display: flex; flex-direction: column; gap: 6px; }

.server {
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  transition: border-color .15s ease, background .15s ease, box-shadow .18s ease;
}
.server:hover {
  border-color: var(--line); background: var(--surface-2);
  box-shadow: var(--elev-2), 0 0 0 1px rgba(77, 141, 255, .10);
}
/* An offline server is simply unlit — the text stays readable. */
.server--offline { opacity: .88; background: rgba(11, 18, 32, .6); box-shadow: var(--edge); }
.server--offline:hover { box-shadow: var(--elev-1); }
.server--offline .srv-name { color: var(--text-dim); }

/* Column labels stay in the DOM for screen readers; they become visible when
   the catalog collapses into cards. */
.cell-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Cells are plain grid items; the modifiers are the hooks the card breakpoint
   and the alignment rules below hang off. */
.cell { min-width: 0; }
.cell--region, .cell--last-wipe, .cell--next-wipe { line-height: 1.35; }
.cell--players, .cell--ping { text-align: right; }
.cell--players {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px;
}
.players__value { white-space: nowrap; }
.srv-name__text { overflow-wrap: anywhere; }

.srv-name {
  display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14.5px;
  overflow-wrap: anywhere;
}
.srv-name__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
.srv-name__dot--on {
  background: var(--online);
  box-shadow: 0 0 0 3px rgba(43, 227, 155, .12), 0 0 8px 1px rgba(43, 227, 155, .6);
}
.srv-sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 5px; font-size: 12px; color: var(--text-faint);
}
.srv-sub .mono { color: var(--text-dim); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 11px; letter-spacing: .02em; color: var(--text-dim); white-space: nowrap;
}
.badge--provider { border-color: rgba(77, 141, 255, .34); color: #a9c6ff; background: rgba(77, 141, 255, .14); }
.badge--official { border-color: rgba(55, 225, 255, .28); color: #8fe3ff; background: rgba(55, 225, 255, .10); }
.badge--modded { border-color: rgba(255, 184, 77, .28); color: #ffd79a; background: rgba(255, 184, 77, .10); }
a.badge:hover {
  text-decoration: none; border-color: var(--accent); color: var(--accent-bright);
  box-shadow: var(--glow-sm); text-shadow: none;
}

.players__max { color: var(--text-faint); }
.players__queue { display: block; font-size: 11px; color: var(--warn); font-family: var(--font-ui); }

.region { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); }
.region__flag { font-size: 15px; line-height: 1; font-family: var(--font-mono); letter-spacing: 0; }

.wipe-past { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.wipe-next { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.wipe-next__time { display: block; font-family: var(--font-mono); color: var(--text); }
/* "Soon" is common enough to stay quiet: colour only, no bloom. */
.wipe-next--soon .wipe-next__time { color: var(--warn); }
/* Urgent countdowns breathe; the pulse is switched off under reduced motion. */
.wipe-next--urgent .wipe-next__time {
  color: var(--bad); font-weight: 700;
  animation: urgent-glow 2.4s ease-in-out infinite;
}
.wipe-next__kind { font-size: 11px; color: var(--text-faint); }

@keyframes urgent-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 107, 107, .3); }
  50% { text-shadow: 0 0 20px rgba(255, 107, 107, .75), 0 0 34px rgba(255, 107, 107, .35); }
}

.ping { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ping--good { color: var(--online); }
.ping--ok { color: var(--warn); }
.ping--bad { color: var(--bad); }
.ping--none { color: var(--text-faint); }
.ping--pending { color: var(--text-faint); }
/* Geodistance estimate ("~N мс"): keeps its quality colour but reads softer than a real measurement. */
.ping--estimate { opacity: .82; }

.cell--actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.fav-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-faint); cursor: pointer;
  box-shadow: var(--edge);
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .18s ease;
}
.fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.fav-btn:hover { color: var(--accent-bright); border-color: var(--line-strong); box-shadow: var(--glow-sm); }
/* A starred server glows: the star is lit, not just filled. */
.fav-btn[aria-pressed="true"] {
  color: var(--accent-bright); border-color: rgba(77, 141, 255, .45);
  background: rgba(77, 141, 255, .14);
  box-shadow: var(--edge), 0 0 14px -3px var(--accent-glow);
}
.fav-btn[aria-pressed="true"] svg { fill: currentColor; filter: drop-shadow(0 0 5px var(--accent-glow)); }
.fav-btn[aria-pressed="true"]:hover { background: rgba(77, 141, 255, .2); box-shadow: var(--edge), var(--glow-md); }

.copy-btn {
  padding: 7px 10px; font-size: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim);
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--edge);
  transition: color .15s ease, border-color .15s ease, box-shadow .18s ease;
}
.copy-btn:hover { color: var(--text); border-color: var(--line-strong); box-shadow: var(--edge), var(--glow-sm); }
/* Copied / failed flashes: the button confirms in green, keeps its shape. */
.copy-btn--done {
  color: var(--online); border-color: rgba(43, 227, 155, .45); background: rgba(43, 227, 155, .12);
  box-shadow: var(--edge), 0 0 16px -4px rgba(43, 227, 155, .7);
}
.copy-btn--done:hover { color: var(--online); }

/* Tooltip used by the ping column and the "—" cells */
.hint { position: relative; border-bottom: 1px dotted var(--text-faint); cursor: help; }
.hint:hover { border-bottom-color: var(--accent); }
.hint::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 20;
  width: 244px; padding: 9px 11px;
  background: var(--surface-2); color: var(--text); border: 1px solid rgba(120, 160, 255, .2);
  border-radius: var(--radius-sm); box-shadow: var(--elev-3), 0 0 22px -12px var(--accent-glow);
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0; line-height: 1.45;
  text-align: left; text-transform: none; white-space: normal; font-weight: 400; font-style: normal;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.hint:hover::after, .hint:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Status, skeletons, footer of list ───────────────────── */

.status:empty { display: none; }
.status {
  margin-top: 14px; padding: 22px 18px; text-align: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--elev-2);
}
.status__title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.status__text { font-size: 13.5px; color: var(--text-dim); max-width: 52ch; margin: 0 auto 14px; }

.sk { background: rgba(120, 160, 255, .09); border-radius: 4px; height: 12px; position: relative; overflow: hidden; }
.sk--tall { height: 15px; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(125, 175, 255, .16), transparent);
  transform: translateX(-100%);
  animation: sweep 1.35s ease-in-out infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

.list-foot { display: flex; justify-content: center; margin-top: 18px; }

/* ── Billboard: brand banner above the promo ─────────────── */

/* Sits in the gap between the catalog and the promo band. The catalog's own
   44px tail is the air above the banner, so only the bottom is spelled out. */
.billboard { padding: 8px 0 44px; }
.billboard picture { display: block; }
.billboard__link { display: block; border-radius: var(--radius); }
.billboard__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.billboard__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* Raised like every other surface, with the blue bloom the artwork emits. */
  box-shadow: var(--elev-2), var(--glow-sm);
  transition: border-color .15s ease, box-shadow .18s ease;
}
.billboard__link:hover .billboard__img { border-color: var(--line-strong); box-shadow: var(--elev-2), var(--glow-md); }

/* ── Promo ───────────────────────────────────────────────── */

.promo {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(77, 141, 255, .14), transparent 70%),
    var(--bg-deep);
  padding: clamp(44px, 6vw, 76px) 0;
}
.promo__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.promo__copy { min-width: 0; }
.promo__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: -.035em; }
.promo__lede { margin: 16px 0 24px; color: var(--text-dim); max-width: 46ch; }
.promo__fine { margin-top: 14px; font-size: 12px; color: var(--text-faint); max-width: 44ch; }

.promo__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--elev-2); }
.promo__list li { background: var(--surface); padding: 18px 18px 20px; }
.promo__list h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text); margin-bottom: 8px; }
.promo__list h3::before { content: "→ "; color: var(--accent); }
.promo__list p { font-size: 13px; color: var(--text-dim); }

/* ── Footer ──────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line-soft); padding: 24px 0 36px; }
.footer__inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-faint); }
.footer__meta { white-space: nowrap; }

/* ── Responsive ──────────────────────────────────────────── */

/* Narrow band: every track is trimmed to its widest real content (the header
   label is the floor for "Прошлый вайп", the countdown for "Следующий вайп"),
   so the server name keeps the largest share of the row. */
@media (max-width: 1140px) {
  :root { --cols: minmax(0, 1fr) 90px 60px 108px 162px 68px 124px; }
  .stats__item--sync { display: none; }
}

/* The catalog gives up its columns here, not lower: below ~1000px the fixed
   tracks squeeze the server name into an unreadable ribbon. */
@media (max-width: 1000px) {
  .list-head { display: none; }
  .list { gap: 8px; }
  .server {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px; padding: 14px;
  }
  .server > .cell--name,
  .server > .cell--actions { grid-column: 1 / -1; }
  .cell-label {
    position: static; display: block; width: auto; height: auto; margin: 0 0 3px;
    overflow: visible; clip: auto; clip-path: none;
    font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint);
  }
  .cell--players, .cell--ping, .num { text-align: left; }
  /* Star keeps its width, connect takes the rest of the row. */
  .cell--actions { justify-content: stretch; align-items: stretch; gap: 8px; }
  .cell--actions .fav-btn { width: 46px; height: auto; min-height: 40px; }
  .cell--actions .copy-btn { flex: 1 1 auto; width: auto; }
  .copy-btn { width: 100%; text-align: center; padding: 10px; }
  .hint::after { right: auto; left: 0; width: min(244px, 78vw); }
}

@media (max-width: 940px) {
  .topbar__inner { flex-wrap: wrap; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .stats { margin-left: 0; order: 3; width: 100%; gap: 18px; }
  /* The stats drop to their own row, so the switcher takes over pushing the
     pair (switcher + CTA) to the right edge of the first row. */
  .lang-select { margin-left: auto; }
  .topbar__cta { margin-left: 0; }
  .controls { top: 0; }
}

@media (max-width: 860px) {
  .showcase__grid { grid-auto-columns: minmax(224px, 76vw); scroll-snap-type: x mandatory; }
  /* Narrow heads wrap: the CTA drops to its own line, left-aligned under the
     copy, and the title/note fall back to the site-wide baseline alignment. */
  .section-head--showcase { align-items: baseline; }
  .section-head__cta { margin-left: 0; }
  .promo__inner { grid-template-columns: minmax(0, 1fr); }
  /* A narrow hero holds one beam pass; the core stays inside the viewport. */
  .hero::before { left: -4%; width: 84%; filter: blur(18px); }
}

@media (max-width: 540px) {
  .promo__list { grid-template-columns: minmax(0, 1fr); }
  /* Narrow bars: the brand keeps the row, the switcher shrinks instead of
     wrapping the CTA away. */
  .topbar__inner { gap: 10px; }
  .lang-select {
    height: 30px; max-width: 116px; padding: 0 22px 0 8px; font-size: 11.5px;
    background-position: calc(100% - 13px) 13px, calc(100% - 9px) 13px;
  }
  .stats { gap: 14px; }
  .stats dd { font-size: 13px; }
  .controls { gap: 8px; }
  .control { flex: 1 1 46%; }
  .control--search { flex: 1 1 100%; }
  .controls select { width: 100%; }
  .btn--wide { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* The beam holds still and the urgent countdown keeps a steady glow. */
  .hero::before { animation: none !important; opacity: .9; }
  .wipe-next--urgent .wipe-next__time { animation: none !important; text-shadow: 0 0 18px rgba(255, 107, 107, .6); }
  .slot__dot, .banner__dot { animation: none !important; }
  .sk::after { animation: none !important; opacity: .5; }
}