@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=IBM+Plex+Mono:wght@400;600;700&family=Outfit:wght@500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Teko:wght@500;600;700&display=swap');

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

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #f5f6ff;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  min-height: 100vh;
}

:root {
  --bg-deep: #070d18;
  --bg-mid: #111a2e;
  --bg-soft: #1b2742;
  --ink: #ecf2ff;
  --ink-dim: #aab8d5;
  --ink-faint: #6b7897;
  --line: rgba(190, 211, 255, 0.16);
  --line-bright: rgba(221, 235, 255, 0.38);
  --accent: #61d1ff;
  --accent-soft: rgba(97, 209, 255, 0.28);
  --accent-glow: rgba(97, 209, 255, 0.64);
  --font-display: 'Outfit', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-body: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-counter-number: 'Black Ops One', 'Teko', 'Outfit', sans-serif;
  --font-challenge-title: 'Teko', 'Bricolage Grotesque', 'Outfit', sans-serif;
  --font-highlight: 'Outfit', 'Space Grotesk', sans-serif;
  --font-social: 'Space Grotesk', 'Outfit', sans-serif;
}

.shader-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.particle-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 60;
}

.glitch-char {
  display: inline-block;
  will-change: transform, text-shadow;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20, 20, 32, 0.7);
  backdrop-filter: blur(6px);
}
.status-pill::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: 0 0 8px currentColor;
}
.status-pill.connected { color: #3affd5; }
.status-pill.connected::before { background: #3affd5; }
.status-pill.connecting,
.status-pill.electing { color: #ffce4a; }
.status-pill.connecting::before,
.status-pill.electing::before { background: #ffce4a; animation: status-blink 1s ease-in-out infinite; }
.status-pill.offline { color: #ff6b6b; }
.status-pill.offline::before { background: #ff6b6b; }
.status-pill.conflict { color: #ff5acb; }
.status-pill.conflict::before { background: #ff5acb; animation: status-blink 0.7s ease-in-out infinite; }

@keyframes status-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}