/* Good Call "PERFECT GAME": THE PERFECT RUN. The rarest award in the game, on the TV.
   A spotlight finds the winner; a gold Good Call check stamps round their face for every question (a counter
   ticks with them); the ring completes and the stage ignites; PERFECT ... GAME slam in; fireworks and gold rain;
   the name plate. Sized in container units: the host must have container-type: size (#tv-stage already does).
   Fire Stick brief: all glow, gold and 3D lettering is baked into fx/*.webp; only transform and opacity animate;
   no filter, blur, box-shadow, text-shadow or blend modes anywhere in this file. */
.pg {
  /* The palette is the shared design tokens (web_shared/shared.css); nothing here is a literal colour.
     rgb triples where an alpha is needed. */
  --pg-ink: var(--on-brand);
  --pg-gold: var(--gold);
  --pg-gold-bright: var(--lq-gold-lit);
  --pg-gold-bright-rgb: var(--pg-gold-lit);
  --pg-amber: rgb(var(--lq-gold));
  --pg-cream: var(--lq-gold-hot);
  --pg-violet: var(--brand-bright);
  --pg-night: var(--bg);
  --pg-black: rgb(var(--lq-night));
  --pg-black-rgb: var(--lq-night);
  position: absolute; inset: 0; overflow: hidden; z-index: 41; pointer-events: none; background: var(--pg-black); color: var(--pg-ink); opacity: 0;
  font-family: var(--font-display, "Segoe UI", Inter, Roboto, system-ui, sans-serif); }
.pg img { position: absolute; display: block; }
.pg-stage { position: absolute; inset: 0; opacity: 0; background: var(--pg-night) url("/shared/brand/stage.webp") center / cover no-repeat; }
.pg-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 65% at 50% 52%, rgba(var(--pg-black-rgb),.1), rgba(var(--pg-black-rgb),.7)); }
.pg-flash { position: absolute; inset: 0; background: var(--pg-flash); opacity: 0; }
.pg-spot { left: 50%; top: -6cqh; width: 56cqh; height: 98cqh; margin-left: -28cqh; opacity: 0; }
.pg-burst { opacity: 0; }
.pg-hero { position: absolute; left: 50%; top: 56cqh; width: 0; height: 0; }
.pg-rays { left: -60cqh; top: -60cqh; width: 120cqh; height: 120cqh; opacity: 0; }
.pg-glow { left: -32cqh; top: -32cqh; width: 64cqh; height: 64cqh; opacity: 0; }
.pg-shock { left: -32cqh; top: -32cqh; width: 64cqh; height: 64cqh; opacity: 0; }
.pg-medal { position: absolute; left: -21cqh; top: -21cqh; width: 42cqh; height: 42cqh; opacity: 0; }
.pg-medal img { left: 0; top: 0; width: 100%; height: 100%; }
.pg-face { position: absolute; left: 12.4%; top: 12.4%; width: 75.2%; height: 75.2%; border-radius: 50%; overflow: hidden; }
.pg-face img, .pg-face > * { position: static; width: 100%; height: 100%; object-fit: cover; display: block; }
/* a table's pair: two faces side by side, the right one over the left */
.pg-face > .av-group { display: flex; align-items: center; justify-content: center; }
.pg-face > .av-group > .av-c { flex: 0 0 54%; width: 54%; height: 54%; border-radius: 50%; overflow: hidden; }
.pg-face > .av-group > .av-c + .av-c { margin-left: -8%; position: relative; z-index: 1; }
.pg-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pg-check { left: -4.75cqh; top: -4.75cqh; width: 9.5cqh; height: 9.5cqh; opacity: 0; }
.pg-tick { left: -9cqh; top: -9cqh; width: 18cqh; height: 18cqh; opacity: 0; }
.pg-word { top: 1.5cqh; height: 22cqh; opacity: 0; transform-origin: 50% 60%; }
.pg-word.p { left: calc(50% - 61cqh); width: 68.5cqh; }
.pg-word.g { left: calc(50% + 6cqh); width: 51.1cqh; }
.pg-count, .pg-plate { position: absolute; left: 0; right: 0; top: 89cqh; height: 0; display: flex; justify-content: center; }
.pg-count b { position: absolute; top: 0; transform: translateY(-50%); font-weight: 900; font-size: 7cqh; color: var(--pg-gold-bright); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.pg-count b small { font-size: .55em; color: var(--pg-lavender); margin-left: .25em; }
.pg-plate > div { position: absolute; top: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 2.6cqh; white-space: nowrap;
  padding: 1.6cqh 4.6cqh; border-radius: 6cqh; background: linear-gradient(90deg, var(--pg-purple-deep), var(--pg-purple) 50%, var(--pg-purple-deep)); border: .45cqh solid var(--pg-gold-bright); }
.pg-plate { opacity: 0; }
.pg-nm { font-weight: 900; font-style: italic; font-size: 7.6cqh; line-height: 1; max-width: 62cqw; overflow: hidden; text-overflow: ellipsis; }
.pg-sep { width: .45cqh; height: 6cqh; background: rgba(var(--pg-gold-bright-rgb),.6); }
.pg-ten { font-weight: 900; font-size: 4cqh; letter-spacing: .12em; color: var(--pg-gold-bright); }
.pg-sc { font-weight: 900; font-size: 6.4cqh; line-height: 1; color: var(--pg-ink); font-variant-numeric: tabular-nums; }
.pg-conf i { position: absolute; left: 0; top: 0; width: 1.5cqh; height: .9cqh; border-radius: .2cqh; opacity: 0; }
.pg-conf .pg-c1 { background: var(--pg-gold-bright); }
.pg-conf .pg-c2 { background: var(--pg-amber); }
.pg-conf .pg-c3 { background: var(--pg-cream); }
.pg-conf .pg-c4 { background: var(--pg-violet); }
.pg-conf .pg-c5 { background: var(--pg-ink); }
.pg-conf .pg-c6 { background: var(--pg-gold); }