/* cynicrust.com — tokens and primitives shared by both surfaces.
   Direction: depth-led glass over real art (the panels the Rust interface
   itself is made of), with catalogue density in the list body. Radii stay at
   3px because the game's UI is square; anything softer stops reading as Rust. */

:root {
  color-scheme: dark;

  /* Warm neutral ladder — the cast comes from the accent, which is the orange
     lifted out of the Cynic mark (#F85820). */
  --bg: #100D0C;
  --bg-2: #161211;
  --panel: #1B1615;
  --panel-2: #241D1B;
  --raised: #2E2523;
  --line: rgba(255, 229, 214, .10);
  --line-2: rgba(255, 229, 214, .18);

  --ink: #F4EEEA;
  --ink-2: #B5AAA3;
  --ink-3: #8B7F78;

  --acc: #F85820;
  --acc-hi: #FF7442;
  --acc-ink: #150A04;
  --acc-wash: rgba(248, 88, 32, .13);

  --ok: #54C26B;
  --warn: #E4A33C;
  --bad: #DE4A3C;

  /* Glass sits at .82 alpha: measured against the brightest frame of the hero
     art (the orange sky), that is what keeps secondary text above 4.5:1. Only
     --ink and --ink-2 are allowed inside a glass panel for this reason. */
  --glass: rgba(14, 11, 10, .82);
  --glass-line: rgba(255, 229, 214, .14);
  --glass-edge: inset 0 1px 0 rgba(255, 229, 214, .13);

  --r: 3px;
  --r-2: 5px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --sans: 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  letter-spacing: .002em;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: .012em; }
p { margin: 0 0 var(--sp-3); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--acc-hi);
  outline-offset: 2px;
}

/* ── Text roles ───────────────────────────────────────────── */

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ── Surfaces ─────────────────────────────────────────────── */

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-2);
  box-shadow: var(--glass-edge), 0 24px 48px -28px rgba(0, 0, 0, .95);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--ink);
  font: 700 13px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}
.btn:hover { background: var(--raised); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }

.btn--go { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn--go:hover { background: var(--acc-hi); border-color: var(--acc-hi); }

.btn--ghost { background: transparent; }
.btn--sm { min-height: 34px; padding: 0 var(--sp-3); font-size: 12px; letter-spacing: .1em; }

/* ── Status vocabulary — one set of meanings, reused everywhere ── */

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}
.dot--up { background: var(--ok); box-shadow: 0 0 0 3px rgba(84, 194, 107, .16); }
.dot.is-live { animation: dot-pulse 2.6s ease-out infinite; }
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(84, 194, 107, .40); }
  60%  { box-shadow: 0 0 0 7px rgba(84, 194, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(84, 194, 107, 0); }
}
.dot--down { background: var(--bad); }
.dot--soon { background: var(--warn); box-shadow: 0 0 0 3px rgba(228, 163, 60, .16); }

.tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 6px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: rgba(255, 229, 214, .04);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--rate { border-color: rgba(248, 88, 32, .5); background: var(--acc-wash); color: var(--acc-hi); }
.tag--fresh { border-color: rgba(84, 194, 107, .45); background: rgba(84, 194, 107, .12); color: var(--ok); }
.tag--soon { border-color: rgba(228, 163, 60, .45); background: rgba(228, 163, 60, .12); color: var(--warn); }
.tag--est { border-color: var(--line); background: transparent; color: var(--ink-2); letter-spacing: .1em; }
.tag--tbc { border-style: dashed; border-color: var(--line); background: transparent; color: var(--ink-2); }
.tag--region { border-color: var(--line); background: transparent; color: var(--ink-2); }

/* ── Live network pill ────────────────────────────────────── */

.live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255, 229, 214, .03);
  font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap;
}
.live .num { color: var(--ink); font-weight: 700; }
.live__cap { color: var(--ink-2); }
.live__div { width: 1px; height: 14px; background: var(--line-2); margin: 0 2px; }

/* ── Player count: the one number the browser exists to show ── */

.count { font-weight: 700; font-variant-numeric: tabular-nums; }
.count b { font-size: 20px; font-weight: 700; }
.count span { color: var(--ink-3); font-size: 13px; }
.count--zero b { color: var(--ink-2); }
.count b.is-bump { animation: count-bump 900ms ease-out; }
@keyframes count-bump {
  0%   { color: var(--acc-hi); transform: translateY(-2px); }
  100% { color: inherit; transform: none; }
}

.meter { height: 3px; background: rgba(255, 229, 214, .10); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--acc); transition: width 600ms ease-out; }

/* ── The force-wipe clock ─────────────────────────────────────
   Split-flap counter: each digit is a 0-9 strip that translates by whole cells,
   with a seam across the middle and a light catch on the upper half. Everything
   is sized in em off .clock's font-size, so shrinking the whole clock on scroll
   is a single property. */

.clock { --flap-w: 1.02em; --flap-h: 1.32em; font-size: 38px; text-align: center; }
.clock--tight { font-size: 26px; }

.clock__label {
  margin: 0 0 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--acc);
}
.clock__row { display: flex; align-items: flex-start; justify-content: center; gap: .12em; }

.unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.unit__flaps { display: flex; gap: .06em; }
.unit__cap {
  font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
}

.clock__sep {
  align-self: flex-start;
  line-height: var(--flap-h);
  font-size: .62em; font-weight: 700;
  color: var(--ink-3);
  padding-inline: .04em;
}

.flap {
  position: relative;
  display: block;
  width: var(--flap-w); height: var(--flap-h);
  overflow: hidden;
  background: linear-gradient(180deg, #2C2523 0 50%, #1C1817 50% 100%);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 229, 214, .10);
}
/* the split-flap seam */
.flap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0, 0, 0, .62);
  z-index: 2;
}
.flap__strip {
  display: block;
  transform: translateY(calc(var(--d, 0) * var(--flap-h) * -1));
  transition: transform 380ms cubic-bezier(.25, .9, .3, 1);
  will-change: transform;
}
.flap__strip.no-anim { transition: none; }
.flap__strip b {
  display: block;
  height: var(--flap-h); line-height: var(--flap-h);
  font-weight: 700; font-size: 1em;
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* the analogue half: a tick gauge filling across the force-wipe cycle */
.clock__gauge {
  display: flex; justify-content: center; gap: 2px;
  margin: 9px 0 6px;
}
.clock__gauge i {
  width: 3px; height: 8px;
  background: rgba(255, 229, 214, .13);
  transition: background 400ms ease-out;
}
.clock__gauge i.on { background: var(--acc); }
.clock__gauge i.on:last-of-type { background: var(--acc-hi); }

.clock__sub { margin: 0; font-size: 11.5px; color: var(--ink-2); }
.clock--tight .clock__gauge, .clock--tight .clock__sub, .clock--tight .unit__cap { display: none; }
.clock--tight .clock__label { margin-bottom: 4px; }

/* ── Brand mark ───────────────────────────────────────────── */

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 30px; height: 30px; display: block; }
.brand__words { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.brand b { font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.brand em {
  font-style: normal;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acc);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--sp-4); top: var(--sp-4);
  z-index: 50;
  padding: var(--sp-2) var(--sp-3);
  background: var(--acc);
  color: var(--acc-ink);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}