/* Good Call "LAST QUESTION": the count-in before the final question of a game, on the TV and on phones.
   Sized in container units: the host must have container-type: size (#tv-stage already does).
   Fire Stick brief: the 3D letters, glows, bell, spotlights and digits are baked into fx/*.webp; only transform and
   opacity animate; no filter, blur, box-shadow, text-shadow, clip-path or blend modes anywhere in this file.
   Colours are tokens in web_shared/shared.css (the --lq-* block). */
.lq { position: absolute; inset: 0; overflow: hidden; z-index: 60; font-family: var(--font-display, "Segoe UI", Inter, Roboto, system-ui, sans-serif); color: var(--on-brand); pointer-events: none; }
.lq img { display: block; position: absolute; }
.lq-dark { position: absolute; inset: 0; background: rgb(var(--lq-night)); opacity: 0; }
.lq-glow { left: 50%; top: 46%; width: 150cqw; height: 150cqh; margin: -75cqh 0 0 -75cqw; opacity: 0; }
.lq-spot { top: -10cqh; width: 40cqw; height: 130cqh; margin-left: -20cqw; transform-origin: 50% 0; opacity: 0; }
.lq-slit { position: absolute; left: 0; right: 0; top: 50%; height: .5cqh; margin-top: -.25cqh; background: linear-gradient(90deg, rgba(var(--lq-gold),0), var(--lq-gold-lit) 20%, var(--lq-gold-hot) 50%, var(--lq-gold-lit) 80%, rgba(var(--lq-gold),0)); opacity: 0; }
.lq-bar { position: absolute; left: 0; right: 0; height: 52cqh; background: rgb(var(--lq-night)); opacity: 0; }
.lq-bar.t { top: 0; } .lq-bar.b { bottom: 0; }
.lq-bell { left: 50%; top: 2.56cqh; width: 20.9cqh; height: 24.4cqh; margin-left: -10.45cqh; transform-origin: 50% 9.5%; opacity: 0; }
.lq-ring { left: 50%; top: 18cqh; width: 34cqh; height: 34cqh; margin: -17cqh 0 0 -17cqh; opacity: 0; }
/* LAST: four baked 3D letters; each image carries padding for its extrusion, which the negative margins take back */
.lq-last { position: absolute; left: 0; right: 0; top: 27.2cqh; height: 40.2cqh; display: flex; justify-content: center; transform-origin: 50% 60%; }
.lq-last img { position: relative; height: 40.2cqh; width: auto; margin: 0 -4.7cqh 0 -2.8cqh; transform-origin: 50% 80%; opacity: 0; }
.lq-q { position: absolute; left: 50%; top: 60.2cqh; width: 85.2cqh; height: 16cqh; margin-left: -42.6cqh; opacity: 0; }
.lq-q img { position: static; width: 100%; height: 100%; }
.lq-q i { position: absolute; top: 15%; bottom: 25%; width: 16%; left: 0; background: linear-gradient(90deg, rgba(var(--lq-shine),0), rgba(var(--lq-shine),.5), rgba(var(--lq-shine),0)); opacity: 0; }
.lq-meta { position: absolute; left: 0; right: 0; top: 76cqh; display: flex; justify-content: center; gap: 2.4cqh; opacity: 0; }
.lq-meta span { padding: 1cqh 2.6cqh; border-radius: var(--r-pill); font-weight: 900; font-size: 3.2cqh; letter-spacing: .08em; white-space: nowrap; }
.lq-cat { background: rgba(var(--lq-chip),.92); border: .3cqh solid rgba(var(--lq-chip-edge),.7); color: var(--lq-chip-text); }
.lq-num { background: rgba(var(--lq-gold),.16); border: .3cqh solid rgba(var(--lq-gold),.75); color: var(--lq-gold-lit); }
.lq-count { position: absolute; left: 50%; top: 89cqh; width: 0; height: 0; }
.lq-count img { left: 0; top: 0; height: 22.4cqh; width: auto; opacity: 0; }
.lq-ember { position: absolute; left: 0; top: 0; width: .8cqh; height: .8cqh; border-radius: 50%; background: var(--lq-ember); opacity: 0; }
/* the phone's taller frame */
.lq.portrait .lq-bell { top: 8.96cqh; width: 15.13cqh; height: 17.7cqh; margin-left: -7.57cqh; }
.lq.portrait .lq-ring { top: 20cqh; width: 27cqh; height: 27cqh; margin: -13.5cqh 0 0 -13.5cqh; }
.lq.portrait .lq-last { top: calc(34cqh - 1.94cqw); height: 28.1cqw; }
.lq.portrait .lq-last img { height: 28.1cqw; margin: 0 -3.3cqw 0 -1.95cqw; }
.lq.portrait .lq-q { top: calc(47cqh - 1.44cqw); width: 66cqw; height: 12.4cqw; margin-left: -33cqw; }
.lq.portrait .lq-meta { top: 57cqh; flex-direction: column; align-items: center; gap: 1.4cqh; }
.lq.portrait .lq-meta span { font-size: 2.4cqh; }
.lq.portrait .lq-count { top: 74cqh; }
.lq.portrait .lq-count img { height: 14.9cqh; }