/* The O'Bryans' Trivia Night: a game-show look. Royal blue stage, gold titles and buttons, a magenta glow,
   two spotlight beams swaying from the top corners, and the Luckiest Guy font (Apache 2.0, licence beside
   the file). Loaded after the engine's styles, so anything here wins. */
@font-face {
  font-family: 'Luckiest Guy';
  src: url('/trivia-night/fonts/luckiest-guy.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #06102a;
  --bg2: #10235c;
  --card: rgba(16, 30, 80, 0.86);
  --card-solid: rgba(12, 24, 66, 0.95);
  --card2: rgba(30, 50, 110, 0.9);
  --line: rgba(255, 255, 255, 0.14);
  --text: #f8fafc;
  --muted: #b6c3e8;
  --accent: #fbbf24;
  --accent-rgb: 251, 191, 36;
  --accent2: #fde68a;
  --accent2-rgb: 253, 230, 138;
  --accent-ink: #2a1a00;
  --accent-deep: #b45309;
  --title-shadow: #7a3b00;
  --glow-rgb: 236, 72, 153;
  --toast: #15285f;
  --qr-title: #1d4ed8;
  --qr-url: #475569;
  --good: #a3e635;
  --bad: #f43f5e;
  --display: 'Luckiest Guy', 'Impact', 'Arial Black', sans-serif;
  --display-weight: 400;
}
/* Luckiest Guy sits a little low on its line; nudge headings so the gold doesn't crowd what's below. */
.display { letter-spacing: 0.02em; }

/* Two spotlight beams (.deco-a from the top-left, .deco-b from the top-right), each a tall soft cone that
   fades out downwards and sideways, slowly swaying. Plain gradients and transforms only, so old TV browsers
   are fine (no clip-path, no masks). */
.deco-a, .deco-b {
  top: -12vh; width: 46vw; height: 150vh;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(253, 230, 138, 0.26), rgba(253, 230, 138, 0.06) 55%, transparent 100%);
  transform-origin: 50% 0;
  opacity: 0.8;
}
.deco-a { left: -8vw; transform: rotate(-22deg); animation: beamA 16s ease-in-out infinite alternate; }
.deco-b { right: -8vw; transform: rotate(22deg); animation: beamB 19s ease-in-out infinite alternate; }
@keyframes beamA { from { transform: rotate(-26deg); } to { transform: rotate(-14deg); } }
@keyframes beamB { from { transform: rotate(26deg); } to { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .deco-a, .deco-b { animation: none; } }
@media (max-width: 700px) { .deco-a, .deco-b { width: 70vw; opacity: 0.5; } }
.tvbody .deco-a, .tvbody .deco-b { width: 34vw; opacity: 0.9; }