/* The O'Bryans' Halloween Trivia (2026-10-31): night purple and pumpkin orange, the Creepster font,
   a moon in the corner and fog along the bottom. Loaded after the engine's styles, so anything here wins. */
@font-face {
  font-family: 'Creepster';
  src: url('/halloween-2026/fonts/creepster.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #0c0614;
  --bg2: #1a0b2e;
  --card: rgba(28, 14, 46, 0.86);
  --card-solid: rgba(24, 11, 40, 0.95);
  --card2: rgba(44, 22, 70, 0.9);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f6efff;
  --muted: #b9a7d4;
  --accent: #ff7a18;
  --accent-rgb: 255, 122, 24;
  --accent2: #ffb347;
  --accent2-rgb: 255, 179, 71;
  --accent-ink: #2a1000;
  --accent-deep: #9a3d00;
  --title-shadow: #4a1d00;
  --glow-rgb: 139, 92, 246;
  --toast: #2b1140;
  --qr-title: #c2410c;
  --qr-url: #4b2a6b;
  --good: #a3e635;
  --bad: #f43f5e;
  --display: 'Creepster', 'Chiller', 'Papyrus', fantasy;
  --display-weight: 400;
}

/* the moon (.deco-a) and the drifting fog (.deco-b) */
.deco-a {
  top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff7d6, #ffd27a 55%, #c98b2b 100%);
  box-shadow: 0 0 80px 30px rgba(255, 196, 92, 0.25);
  opacity: 0.55;
}
.deco-b {
  left: -50%; right: -50%; bottom: -40px; height: 220px;
  background: radial-gradient(ellipse at center, rgba(200, 180, 255, 0.10), transparent 70%);
  animation: fog 40s linear infinite alternate;
}
@keyframes fog { from { transform: translateX(-10%); } to { transform: translateX(10%); } }
@media (prefers-reduced-motion: reduce) { .deco-b { animation: none; } }
@media (max-width: 700px) { .deco-a { width: 160px; height: 160px; top: -70px; right: -50px; opacity: 0.3; } }
.tvbody .deco-a { width: 22vw; height: 22vw; top: -6vw; right: -6vw; opacity: 0.6; }