/* Streak reward overlay. Shared by the game and the editor preview so what you
   see while authoring is what actually fires.

   Escalation is driven by data-level="1".."9" setting custom properties, so
   there is one set of keyframes rather than nine hand-written ones.

   Note on the CRT: heavy glow blooms over composite. That mostly looks great -
   it's why arcade cabinets did it - but if the top tiers smear into a white
   blob, pull --glow-spread down rather than removing the effect. */

.reward {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  z-index: 20;
  pointer-events: none;
}
.reward.on { display: flex; }

/* ---------- per-tier tuning ---------- */

.reward {
  --glow:        #6FA8FF;
  --glow-2:      #6FA8FF;
  --glow-spread: 10px;
  --rings:       2px;
  --pop:         1.00;
  --amp:         0px;
  --spin:        0deg;
  --pulse:       1.1s;
}

.reward[data-level="1"] { --glow:#6FA8FF; --glow-2:#3D6FD0; --glow-spread:9px;  --rings:2px; --pop:1.00; --amp:0px;   --spin:0deg;   --pulse:1.2s; }
.reward[data-level="2"] { --glow:#57D6D0; --glow-2:#2A9C97; --glow-spread:13px; --rings:3px; --pop:1.04; --amp:0px;   --spin:0deg;   --pulse:1.0s; }
.reward[data-level="3"] { --glow:#5FD46B; --glow-2:#2A8F3A; --glow-spread:17px; --rings:3px; --pop:1.08; --amp:1px;   --spin:0.6deg; --pulse:.85s; }
.reward[data-level="4"] { --glow:#D8C63A; --glow-2:#9A8A16; --glow-spread:21px; --rings:4px; --pop:1.12; --amp:2px;   --spin:1deg;   --pulse:.72s; }
.reward[data-level="5"] { --glow:#EE8B26; --glow-2:#B35C0C; --glow-spread:25px; --rings:4px; --pop:1.16; --amp:2.5px; --spin:1.4deg; --pulse:.62s; }
.reward[data-level="6"] { --glow:#EE5340; --glow-2:#A82A1C; --glow-spread:30px; --rings:5px; --pop:1.20; --amp:3px;   --spin:1.8deg; --pulse:.54s; }
.reward[data-level="7"] { --glow:#E152C8; --glow-2:#9B248A; --glow-spread:35px; --rings:5px; --pop:1.24; --amp:4px;   --spin:2.2deg; --pulse:.46s; }
.reward[data-level="8"] { --glow:#A971FF; --glow-2:#6A2FD6; --glow-spread:41px; --rings:6px; --pop:1.29; --amp:5px;   --spin:1.8deg; --pulse:.38s; }
.reward[data-level="9"] { --glow:#FFD34D; --glow-2:#E08A12; --glow-spread:48px; --rings:7px; --pop:1.35; --amp:7px;   --spin:2.2deg; --pulse:.30s; }

/* ---------- the picture ---------- */

.reward .art {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation:
    rw-in 420ms cubic-bezier(.2, 1.7, .35, 1) both,
    rw-float var(--pulse) ease-in-out 420ms infinite alternate;
}
.reward .art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;      /* discord emoji are tiny; keep them crunchy */
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 calc(var(--glow-spread) * .5) var(--glow));
}

/* glow ring sits behind the art so transparent PNGs still read as framed */
.reward .art::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: var(--rings) solid var(--glow);
  box-shadow:
    0 0 var(--glow-spread) var(--glow),
    0 0 calc(var(--glow-spread) * 2.2) var(--glow-2),
    inset 0 0 var(--glow-spread) var(--glow);
  animation: rw-pulse var(--pulse) ease-in-out infinite alternate;
  z-index: 1;
}

/* Burst rays, level 6+.
   Circular and radially feathered. The first version was a square box holding a
   conic gradient, so you could watch the corners sweep past and the hard edge
   clip - it read as a spinning rectangle rather than light. */
.reward.rays .art::before {
  content: "";
  position: absolute;
  inset: -76px;
  z-index: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    var(--glow) 0deg 5deg, transparent 5deg 19deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent 76%);
          mask-image: radial-gradient(closest-side, #000 38%, transparent 76%);
  opacity: .22;
  animation: rw-spin 11s linear infinite;
}

/* hue cycling, level 8+ */
.reward.cycle .art { animation:
    rw-in 420ms cubic-bezier(.2,1.7,.35,1) both,
    rw-float var(--pulse) ease-in-out 420ms infinite alternate,
    rw-hue 1.6s linear 420ms infinite; }

/* ---------- caption ---------- */

.reward .cap {
  font-size: 34px;
  letter-spacing: 4px;
  color: var(--glow);
  text-shadow: 3px 3px 0 #04060A, 0 0 calc(var(--glow-spread) * .8) var(--glow-2);
  animation: rw-cap 380ms cubic-bezier(.2, 1.6, .35, 1) 120ms both;
  text-align: center;
  padding: 0 20px;
}
.reward .who {
  font-size: 20px;
  letter-spacing: 2px;
  color: #F6F4EC;
  background: rgba(6, 8, 12, 0.86);
  padding: 6px 18px;
  text-shadow: var(--shadow-sm, 2px 2px 0 #04060A);
  animation: rw-cap 380ms ease-out 220ms both;
}

/* ---------- screen-level effects ---------- */

/* white flash, level 7+ */
.reward.flash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glow);
  animation: rw-flash 340ms ease-out both;
}

/* whole-stage shake, level 8+. Applied to #stage by the game. */
#stage.rw-shake { animation: rw-stageshake 340ms ease-in-out 2; }

/* ---------- keyframes ---------- */

@keyframes rw-in {
  0%   { transform: scale(.28) rotate(calc(var(--spin) * -3)); opacity: 0; }
  100% { transform: scale(var(--pop)) rotate(0deg); opacity: 1; }
}

@keyframes rw-float {
  0%   { transform: scale(var(--pop)) translate(calc(var(--amp) * -1), 0) rotate(calc(var(--spin) * -1)); }
  100% { transform: scale(calc(var(--pop) * 1.05)) translate(var(--amp), calc(var(--amp) * -1)) rotate(var(--spin)); }
}

@keyframes rw-pulse {
  0%   { opacity: .55; inset: -6px; }
  100% { opacity: 1;   inset: -11px; }
}

@keyframes rw-spin { to { transform: rotate(360deg); } }

@keyframes rw-hue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes rw-cap {
  0%   { transform: scale(.5) translateY(14px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes rw-flash {
  0%   { opacity: .72; }
  100% { opacity: 0; }
}

@keyframes rw-stageshake {
  0%, 100% { transform: var(--fit) translate(0, 0); }
  20%  { transform: var(--fit) translate(-5px, 3px); }
  40%  { transform: var(--fit) translate(5px, -3px); }
  60%  { transform: var(--fit) translate(-4px, -2px); }
  80%  { transform: var(--fit) translate(4px, 2px); }
}

/* ---------------- dim the game behind a reward ----------------
   The play column plus the player strip plus a photo plus the reward all at
   once was unreadable. Fade the game right back while the reward is up. The
   reward is deliberately sequenced AFTER the plain reveal, so nothing is
   hidden while the correct answer is on screen. */

#stage #play,
#stage #players {
  transition: opacity 280ms ease-out;
}
#stage.rw-dim #play,
#stage.rw-dim #players {
  opacity: var(--reward-dim, 0.06);
}