/* Self-hosted, latin subset, the three faces the page uses. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format("woff2"); }

/* Plague Fest MOTD tokens.
   Derived in OKLCH (cool greys on hue ~255 to agree with the logo blue),
   shipped as hex: the in-game panel is Steam's embedded Chromium, which
   predates oklch(). */
:root {
  --bg-0: #0d1015;   /* canvas */
  --bg-1: #141820;   /* surface */
  --bg-2: #1b202a;   /* raised */
  --line: #293039;   /* solid dark-mode border, does not glow */
  --line-2: #37404c;
  --text-1: #edf0f4;
  --text-reading: #d6dbe3; /* long-form body, between text-1 and text-2 */
  --text-2: #aeb6c2;
  --text-3: #7f8896;       /* 5.3:1 on canvas, captions only */
  --blue: #4c8be3;         /* logo blue, chroma reduced ~25% for dark; display text only */
  --blue-fill: #2f6cc4;    /* button fill, white text 5.2:1 */
  --blue-fill-hover: #2a60ad;
  --blue-text: #8fbaf3;    /* links, ~7:1 on canvas */
  --green: #a8c877;        /* BadServers */
  --live: #ee6a5f;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-ui: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  /* Small-label floor: rem scales with the panel, but never under 12px. */
  --text-caption: max(12px, 0.85rem);
  --text-label: max(12px, 0.75rem);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a {
  color: var(--blue-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  touch-action: manipulation;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
::selection { background: rgba(76, 139, 227, 0.35); }

/* Primary action: one per page. */
.btn {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 16px;
  border: 0; border-radius: 6px;
  background: var(--blue-fill); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.btn:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--blue-fill-hover); }
}

/* Secondary text links in a row. */
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.links a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--text-2); text-decoration: none;
  transition: color 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .links a:not(.btn):hover { color: var(--text-1); text-decoration: underline; }
}

.eyebrow {
  font-size: var(--text-label); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
}
.num { font-variant-numeric: tabular-nums; }

/* Live state: schedule.js sets body[data-live] during the Friday window. */
.live { display: none; }
body[data-live] .idle { display: none; }
body[data-live] .live { display: inline; }
.live-dot::before { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-right: 0.3em; border-radius: 50%; background: var(--live); vertical-align: 0.1em; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

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