/* Good Call "LEAD CHANGE": LIFT-OFF. The new leader rockets up the standings, knocks the old leader off the top
   and bursts into a firework; NEW LEADER slams in under them.
   Sized in container units: the host must have container-type: size (#tv-stage already does).
   Fire Stick brief: every glow, gradient and the 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. */
.lo {
  /* The palette: the shared design tokens where one exists (web_shared/shared.css),
     with the same value as a fallback; rgb triples where an alpha is needed. */
  --lo-ink: var(--on-brand, #ffffff);
  --lo-violet: var(--choice-a, #8b5cf6);
  --lo-cyan: var(--accent, #22d3ee);
  --lo-pink: var(--choice-c, #f472b6);
  --lo-gold: var(--gold, #f5b33c);
  --lo-gold-bright: #ffd56b;
  --lo-gold-bright-rgb: 255, 214, 107;
  --lo-lilac: #e9e3ff;
  --lo-lavender: #c4b5fd;
  --lo-plate: #2b2059;
  --lo-plum: #1a0630;
  --lo-purple: #5b21b6;
  --lo-purple-deep: #3b0d7a;
  --lo-dim-1: 76, 29, 149;
  --lo-dim-2: 24, 8, 58;
  --lo-dim-3: 6, 2, 16;
  position: absolute; inset: 0; overflow: hidden; z-index: 60; pointer-events: none; color: var(--lo-ink);
  font-family: var(--font-display, "Segoe UI", Inter, Roboto, system-ui, sans-serif); }
.lo img { display: block; }
.lo-title img { width: 100%; height: 100%; }
.lo-dim { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(75% 80% at 50% 32%, rgba(var(--lo-dim-1),.94) 0%, rgba(var(--lo-dim-2),.97) 55%, rgba(var(--lo-dim-3),.98) 100%); }
.lo-shake { position: absolute; inset: 0; }
.lo-at { position: absolute; left: 50%; top: 30cqh; width: 0; height: 0; }            /* the #1 spot */
.lo-beam { position: absolute; left: 50%; top: 0; width: 42cqh; height: 100cqh; margin-left: -21cqh; transform-origin: 50% 100%; opacity: 0; }
.lo-rays { position: absolute; left: -50cqh; top: -50cqh; width: 100cqh; height: 100cqh; opacity: 0; }
.lo-glow { position: absolute; left: -30cqh; top: -30cqh; width: 60cqh; height: 60cqh; opacity: 0; }
.lo-shock { position: absolute; left: -30cqh; top: -30cqh; width: 60cqh; height: 60cqh; opacity: 0; }
.lo-medal { position: absolute; left: -15cqh; top: -15cqh; width: 30cqh; height: 30cqh; }
.lo-face { position: absolute; left: 12.4%; top: 12.4%; width: 75.2%; height: 75.2%; border-radius: 50%; overflow: hidden; }
.lo-face img, .lo-face > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-rocket { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.lo-trail { position: absolute; left: -10.5cqh; top: -2cqh; width: 21cqh; height: 49cqh; transform-origin: 50% 0; opacity: 0; }
.lo-old { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.lo-old .lo-medal { left: -11cqh; top: -11cqh; width: 22cqh; height: 22cqh; }
.lo-old-nm { position: absolute; left: -30cqh; width: 60cqh; top: 12cqh; text-align: center; font-weight: 900; font-size: 4.4cqh; white-space: nowrap; color: var(--lo-lilac); }
.lo-old-nm b { color: var(--lo-gold-bright); font-weight: 900; }
.lo-mk { position: absolute; left: 50%; width: 13cqh; height: 8cqh; margin: -4cqh 0 0 -6.5cqh; border-radius: 4cqh; display: grid; place-items: center;
  font-weight: 900; font-size: 4.6cqh; background: var(--lo-plate); border: .45cqh solid var(--lo-cyan); color: var(--lo-ink); opacity: 0; }
.lo-title { position: absolute; left: 50%; top: 62cqh; width: 144.4cqh; height: 27.8cqh; margin: -13.9cqh 0 0 -72.2cqh; opacity: 0; }
.lo-title .p { display: none; }
.lo-plate { position: absolute; left: 50%; top: 85cqh; height: 0; width: 0; opacity: 0; }
.lo-plate > div { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2.4cqh; white-space: nowrap;
  padding: 1.6cqh 4.4cqh; border-radius: 6cqh; background: linear-gradient(90deg, var(--lo-purple-deep), var(--lo-purple) 50%, var(--lo-purple-deep)); border: .45cqh solid var(--lo-gold-bright); }
.lo-nm { font-weight: 900; font-style: italic; font-size: 8.4cqh; line-height: 1; }
.lo-sc { font-weight: 900; font-size: 7cqh; line-height: 1; color: var(--lo-gold-bright); font-variant-numeric: tabular-nums; }
.lo-sub { font-weight: 900; font-size: 3.6cqh; letter-spacing: .12em; color: var(--lo-lavender); }
.lo-sep { width: .45cqh; height: 6.5cqh; background: rgba(var(--lo-gold-bright-rgb),.6); }
.lo-conf i { position: absolute; left: 0; top: 0; width: 1.6cqh; height: .9cqh; border-radius: .2cqh; opacity: 0; }
/* the phone's taller frame */
.lo.portrait .lo-at { top: 25cqh; }
.lo.portrait .lo-beam { width: 40cqw; margin-left: -20cqw; }
.lo.portrait .lo-rays { left: -60cqw; top: -60cqw; width: 120cqw; height: 120cqw; }
.lo.portrait .lo-glow, .lo.portrait .lo-shock { left: -38cqw; top: -38cqw; width: 76cqw; height: 76cqw; }
.lo.portrait .lo-medal { left: -23cqw; top: -23cqw; width: 46cqw; height: 46cqw; }
.lo.portrait .lo-trail { left: -16cqw; top: -3cqw; width: 32cqw; height: 75cqw; }
.lo.portrait .lo-old .lo-medal { left: -16cqw; top: -16cqw; width: 32cqw; height: 32cqw; }
.lo.portrait .lo-old-nm { left: -45cqw; width: 90cqw; top: 17cqw; font-size: 5.6cqw; }
.lo.portrait .lo-mk { width: 18cqw; height: 11cqw; margin: -5.5cqw 0 0 -9cqw; font-size: 6.4cqw; border-radius: 6cqw; }
.lo.portrait .lo-title { top: 52cqh; width: 92cqw; height: 47.84cqw; margin: -23.92cqw 0 0 -46cqw; }
.lo.portrait .lo-title .l { display: none; } .lo.portrait .lo-title .p { display: block; }
.lo.portrait .lo-plate { top: 76cqh; }
.lo.portrait .lo-plate > div { flex-direction: column; gap: 1.6cqw; padding: 3cqw 7cqw; border-radius: 5cqw; }
.lo.portrait .lo-nm { font-size: 10cqw; } .lo.portrait .lo-sc { font-size: 8cqw; } .lo.portrait .lo-sub { font-size: 4.2cqw; }
.lo.portrait .lo-sep { display: none; }
.lo.portrait .lo-conf i { width: 2.6cqw; height: 1.5cqw; }

/* The faces the game passes in (lcAvatar / lcAvatarGroup from avatar.js): one
   face fills the window; a table's pair sit overlapped inside it. Their ring
   and drop shadow come off -- the medallion art is the ring. */
.lo-face { container-type: size; background: var(--lo-plum); }
.lo-face > .tv-lead-face { --av: 100%; border: 0; box-shadow: none; background: var(--av-bg, var(--lo-plum)); }
.lo-face > .tv-lead-face.av-default { background: var(--lo-plum); }
.lo-face > .tv-lead-pair { --av: 62cqw; display: flex; align-items: center; justify-content: center; }
.lo-face > .tv-lead-pair .av-c { border-color: var(--lo-plum); box-shadow: none; }
.lo-face > .tv-lead-pair .av-c + .av-c { margin-left: -14cqw; }

/* A long team name (up to 24 characters) ends in an ellipsis instead of running
   off the plate or the screen. Short names lay out exactly as before. */
.lo-plate > div { width: max-content; max-width: 150cqh; }
.lo-nm, .lo-sub { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.lo-nm { padding-right: .15em; margin-right: -.15em; }   /* room for the italic lean */
.lo-sep, .lo-sc { flex-shrink: 0; }
.lo-who { display: inline-block; max-width: 40cqh; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.lo.portrait .lo-plate > div { max-width: 76cqw; }
.lo.portrait .lo-who { max-width: 62cqw; }

/* The firework's six colours. */
.lo-conf .lo-c0 { background: var(--lo-violet); }
.lo-conf .lo-c1 { background: var(--lo-cyan); }
.lo-conf .lo-c2 { background: var(--lo-pink); }
.lo-conf .lo-c3 { background: var(--lo-gold); }
.lo-conf .lo-c4 { background: var(--lo-gold-bright); }
.lo-conf .lo-c5 { background: var(--lo-ink); }