/* Crowd Stats — overlay base + palette + shared tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Bebas+Neue&family=Oswald:wght@300;400;500;600;700&display=swap');

:root {
  --cs-bg: #0f172a;
  --cs-primary: #0891b2;
  --cs-bright: #22d3ee;
  --cs-accent: #22d3ee;
  --cs-accent-border: rgba(34, 211, 238, 0.35);
  --cs-accent-soft: rgba(34, 211, 238, 0.14);
  --cs-accent-faint: rgba(34, 211, 238, 0.06);
  --cs-accent-glow: rgba(34, 211, 238, 0.45);
  --cs-pop: #f0abfc;
  --cs-surface: #16213a;
  --cs-surface-raised: #1b2a47;
  --cs-ink: #e7eefb;
  --cs-muted: #8499b8;
  --cs-rule: rgba(34, 211, 238, 0.18);
  --cs-success: #34d399;
  --cs-warning: #fbbf24;
  --cs-error: #f87171;
}

html, body {
  margin: 0;
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--cs-ink);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Connection indicator (hidden in OBS, surfaced via customizer preview) */
.connection-indicator {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--cs-rule);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--cs-ink);
  z-index: 9999;
  white-space: nowrap;
}
.connection-indicator.text-red-500 i { color: var(--cs-error); }
.connection-indicator.text-green-500 i { color: var(--cs-success); }

/* Board root rendered by the active theme */
#crowd-stats-root {
  width: 100%;
  height: 100%;
}

/* Shared visibility — toggled via URL params → root classes */
#crowd-stats-root.cs-hide-messages [data-section="messages"],
#crowd-stats-root.cs-hide-active [data-section="active"],
#crowd-stats-root.cs-hide-wpm [data-section="wpm"],
#crowd-stats-root.cs-hide-mpm [data-section="mpm"],
#crowd-stats-root.cs-hide-peaks [data-section="peaks"],
#crowd-stats-root.cs-hide-top [data-section="top"],
#crowd-stats-root.cs-hide-platforms [data-section="platforms"],
#crowd-stats-root.cs-hide-session [data-section="session"],
#crowd-stats-root.cs-hide-twitch [data-platform="twitch"],
#crowd-stats-root.cs-hide-youtube [data-platform="youtube"],
#crowd-stats-root.cs-hide-kick [data-platform="kick"] {
  display: none !important;
}

/* Brand logo colours — disable mono cyan filters on platform images */
#crowd-stats-root.cs-brand-logos img[src*="platform/twitch"],
#crowd-stats-root.cs-brand-logos img[src*="platform/youtube"],
#crowd-stats-root.cs-brand-logos img[src*="platform/kick"],
#crowd-stats-root.cs-brand-logos .cs-plat-ico {
  filter: none !important;
}