/* Kampvuur: een warme nachtstijl voor een decemberdag. Inktzwart als basis, gloeiend oranje
   voor wie onderweg is, ijsblauw voor rust. Kleur = status; elke status heeft ook een icoon
   en een woord. Cijfers altijd in mono, zodat een tikkende timer niet heen en weer springt. */
:root {
  --ink: #0E0D0B;       /* achtergrond */
  --coal: #181613;      /* vlakken */
  --coal2: #221F1B;     /* vlak in een vlak */
  --edge: #2E2A25;      /* randen */
  --chalk: #F5EFE6;     /* tekst */
  --chalk2: #CFC6B8;    /* zachte tekst */
  --ash: #A39A8D;       /* bijtekst */
  --ash2: #6E665B;      /* nog zachter */
  --off: #5E574F;
  --glow: #FF6A2B;      /* onderweg / accent */
  --glow2: #FF8A5B;
  --glowbg: #3A1E10;
  --ice: #8EC5FF;       /* rust */
  --icebg: #16263A;
  --gold: #F2C94C;      /* record, volbracht */
  --goldbg: #3A3010;
  --signal: #FF4D6D;    /* laatste minuut, uit */

  /* Oude namen, zodat bestaande pagina's de nieuwe kleuren krijgen. */
  --bg: var(--ink);
  --bg2: #141311;
  --panel: var(--coal);
  --line: var(--edge);
  --text: var(--chalk);
  --muted: var(--ash);
  --lime: var(--glow);
  --orange: var(--glow2);
  --red: var(--signal);
  --cyan: var(--ice);

  --display: 'Archivo', system-ui, sans-serif; /* altijd met font-stretch ±70% en gewicht 800 */
  --body: 'Archivo', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cap { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ico { display: inline-block; flex: none; vertical-align: middle; }

/* Terug naar het keuzescherm (deelnemer / volgen). */
.back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 36px; padding: 0 14px 0 10px; border-radius: 999px;
        background: var(--coal); border: 1px solid var(--edge); color: var(--chalk2); text-decoration: none; font-size: 14px; font-weight: 700; }
.back:hover { color: var(--chalk); border-color: var(--ash2); }

/* Avatar: initialen of foto in een ring in de eigen kleur van de loper. */
.avatar {
  --c: var(--glow);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--coal2);
  border: 2.5px solid var(--c);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 80%;
  color: var(--chalk);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.dot {
  display: inline-block;
  width: .6em; height: .6em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.dot.live { animation: pulse 1.6s infinite; }