/* CommunityGames.IO brand tokens and faces. Fonts are served from this site so an OBS browser source
   never depends on a font CDN. Files are the Latin subsets, SIL Open Font License (see fonts/OFL.txt). */
@font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/russo-one-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/chakra-petch-500.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/chakra-petch-700.woff2') format('woff2'); }
@font-face { font-family: 'Blinker'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/blinker-700.woff2') format('woff2'); }

:root {
  --bg: #070810;
  --bg-2: #0c0d1a;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 255, 255, 0.16);
  --yellow: #ffcd1b;
  --yellow-dim: rgba(255, 205, 27, 0.12);
  --yellow-glow: rgba(255, 205, 27, 0.3);
  --cyan: #00f0d4;
  --cyan-dim: rgba(0, 240, 212, 0.12);
  --cyan-glow: rgba(0, 240, 212, 0.3);
  --red: #ff3e5e;
  --red-dim: rgba(255, 62, 94, 0.12);
  --violet: #9b5de5;
  --violet-dim: rgba(155, 93, 229, 0.12);
  --text: #eaedf5;
  --muted: #616880;
  --subtle: #3b3f54;
  --primary: var(--yellow);
  --accent: var(--cyan);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --display: 'Russo One', system-ui, sans-serif;
  --body: 'Chakra Petch', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; }

.glass {
  background: rgba(7, 8, 16, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tag.accent { background: var(--cyan-dim); color: var(--cyan); }
.tag.primary { background: var(--yellow-dim); color: var(--yellow); }
.tag.red { background: var(--red-dim); color: var(--red); }