/* ============================================================
   QUIZORIA — the stage: a lit arena behind every screen.
   Layers, back to front: gradient sky, canvas particles/rays,
   sweeping beams, reflective floor, vignette, film grain.
   ============================================================ */
.stage {
  position: fixed; inset: 0; z-index: var(--z-stage);
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% -12%, rgba(78,52,180,.55) 0%, rgba(18,24,74,.35) 38%, transparent 68%),
    radial-gradient(80% 60% at 50% 108%, rgba(53,208,255,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--c-abyss) 0%, var(--c-midnight) 45%, var(--c-void) 100%);
  transition: background var(--t-cine) linear;
}

/* Mood shifts drive the whole room's colour — set by JS per screen/state */
.stage[data-mood='suspense'] {
  background:
    radial-gradient(120% 85% at 50% -12%, rgba(120,40,190,.5) 0%, rgba(24,16,70,.4) 40%, transparent 70%),
    linear-gradient(180deg, #0a0620 0%, #120a30 48%, var(--c-void) 100%);
}
.stage[data-mood='correct'] {
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(47,224,138,.34) 0%, rgba(10,50,40,.3) 42%, transparent 72%),
    linear-gradient(180deg, #04120d 0%, #071c18 50%, var(--c-void) 100%);
}
.stage[data-mood='wrong'] {
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,77,94,.30) 0%, rgba(60,10,22,.3) 42%, transparent 72%),
    linear-gradient(180deg, #150409 0%, #1d0710 50%, var(--c-void) 100%);
}
.stage[data-mood='gold'] {
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(243,200,96,.34) 0%, rgba(70,48,10,.3) 44%, transparent 74%),
    linear-gradient(180deg, #100b02 0%, #1a1206 50%, var(--c-void) 100%);
}

.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }

/* --- Sweeping stage beams --- */
.stage__beams { position: absolute; inset: -20% -10% 0 -10%; }
.beam {
  position: absolute;
  top: -18%;
  width: 22vw;
  height: 130vh;
  background: linear-gradient(180deg, rgba(140,110,255,.30) 0%, rgba(90,70,220,.10) 45%, transparent 78%);
  filter: blur(calc(var(--u) * 1.6));
  transform-origin: 50% 0%;
  mix-blend-mode: screen;
  opacity: .7;
}
.beam--1 { left: 6%;  animation: sweepA 17s var(--ease-in-out) infinite; }
.beam--2 { left: 30%; animation: sweepB 21s var(--ease-in-out) infinite; background: linear-gradient(180deg, rgba(53,208,255,.24), transparent 76%); }
.beam--3 { left: 58%; animation: sweepA 19s var(--ease-in-out) infinite reverse; }
.beam--4 { left: 80%; animation: sweepB 25s var(--ease-in-out) infinite reverse; background: linear-gradient(180deg, rgba(243,200,96,.18), transparent 74%); }

@keyframes sweepA {
  0%,100% { transform: rotate(-13deg) scaleY(1);   opacity: .45; }
  50%     { transform: rotate(10deg)  scaleY(1.08); opacity: .8; }
}
@keyframes sweepB {
  0%,100% { transform: rotate(11deg)  scaleY(1.05); opacity: .35; }
  50%     { transform: rotate(-9deg)  scaleY(.95);  opacity: .7; }
}

/* --- Glossy stage floor with reflection --- */
.stage__floor {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(60,80,190,.16) 40%, rgba(10,14,40,.85) 100%),
    repeating-linear-gradient(90deg, rgba(150,180,255,.055) 0 2px, transparent 2px 7vw);
  transform: perspective(60vh) rotateX(62deg);
  transform-origin: bottom center;
  filter: blur(.4px);
  opacity: .8;
}

.stage__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(115% 95% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.88) 100%);
}

.stage__grain {
  position: absolute; inset: -50%;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grainShift 900ms steps(4) infinite;
  pointer-events: none;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 1%); }
}

/* Heartbeat pulse of the room while a question is locked in */
.stage.is-pulsing .stage__beams { animation: roomPulse 1.4s var(--ease-in-out) infinite; }
@keyframes roomPulse { 0%,100% { opacity: .6 } 50% { opacity: 1 } }