/* The standings between legs (src/screens/standings.js). Sits on Game Night's frame (.gn-tv: tokens, background,
 * the gt-av avatar) and reuses its post-round keyframes (gamenight.css gt-move, gt-leadglow, gt-badge, gt-count);
 * the beats are src/standings.js STANDINGS_BEATS: pop 500 · count 700–1500 · swap 1700–2500 · arrows 2500 · gold 2900. */

.lsb .lsb-head { left: 96px; right: 96px; top: 64px; display: flex; align-items: center; gap: 28px; animation: dh-in 400ms both; }
.lsb .lsb-head .tx { display: flex; flex-direction: column; gap: 10px; }
.lsb .lsb-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 72px; line-height: 1; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: .02em; }
.lsb .lsb-head .gt-gi.l { width: 96px; height: 96px; border-radius: 24px; --g: 56px; }

.lsb .lsb-table { left: 96px; right: 96px; top: 228px; --step: 120px; --rh: 106px; --cols: 64px 76px minmax(0, 1fr) 90px 330px 230px 110px; }
.lsb .lsb-table.with-sets { --cols: 64px 76px minmax(0, 1fr) 90px 250px 330px 230px 110px; }
.lsb .lsb-th { display: grid; grid-template-columns: var(--cols); column-gap: 24px; padding: 0 28px; height: 52px; align-items: end;
  font-family: var(--font-display); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary); animation: dh-in 400ms both; }
.lsb .lsb-th .c { justify-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lsb .lsb-th small { font-family: var(--font-body); font-size: 17px; letter-spacing: .04em; text-transform: none; color: var(--color-text-secondary); opacity: .8; }
.lsb .lsb-rows { position: relative; margin-top: 18px; height: calc(var(--n) * var(--step)); }

.lsb .lsb-row { position: absolute; left: 0; right: 0; top: 0; height: var(--rh); display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 24px;
  padding: 0 28px; box-sizing: border-box; border-radius: 22px; background: rgba(8,22,58,.97);
  box-shadow: inset 0 0 0 1px rgba(66,155,252,.22), 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(calc(var(--to) * var(--step))); z-index: calc(20 - var(--to));
  animation: gt-move 800ms calc(1700ms + var(--k) * 30ms) cubic-bezier(.5, 0, .2, 1) both; }
.lsb .lsb-row .pl { font-family: var(--font-display); font-size: 40px; color: var(--color-text-primary); text-align: center; opacity: 0; animation: dh-in 300ms 2500ms both; }
.lsb .lsb-row > .gt-av { justify-self: center; }
.lsb .lsb-row .who { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lsb .lsb-row .nm { font-family: var(--font-display); font-size: 38px; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsb .lsb-note { align-self: flex-start; padding: 4px 14px; border-radius: 999px; font-family: var(--font-display); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.lsb .lsb-note.green { color: var(--color-state-success); background: var(--color-tint-success); }
.lsb .lsb-note.gold { color: var(--color-accent-highlight); background: var(--color-tint-gold); }
.lsb .plus { justify-self: center; padding: 8px 18px; border-radius: 999px; background: var(--color-tint-success); color: var(--color-state-success); font-family: var(--font-display); font-size: 30px;
  animation: gt-badge 500ms 500ms var(--motion-ease-out) both; }
.lsb .plus.none { visibility: hidden; }

.lsb .lsb-cell { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 18px; }
.lsb .lsb-cell .ct { font-family: var(--font-display); font-weight: 400; font-size: 56px; color: var(--color-text-primary); min-width: 48px; text-align: right;
  --gt-n: var(--b); counter-reset: n var(--gt-n); }
.lsb .lsb-cell .ct::after { content: counter(n); }
.lsb .lsb-cell .ct.up { color: var(--color-state-success); animation: gt-count 800ms 700ms cubic-bezier(.2, .7, .2, 1) both; }
.lsb .lsb-cell.sets .ct.up { color: var(--color-accent-highlight); }
.lsb .lsb-pips { display: flex; gap: 8px; }
.lsb .lsb-pips i { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.lsb .lsb-pips.set i { border-radius: 50%; }
.lsb .lsb-pips i.on { background: var(--color-action-link); box-shadow: none; }
.lsb .lsb-pips.set i.on { background: var(--color-accent-highlight); }
.lsb .lsb-pips i.new { animation: lsb-pip 500ms 900ms var(--motion-ease-out) both; }
.lsb .lsb-pips.set i.new { animation-name: lsb-pip-gold; }
@keyframes lsb-pip { 0% { background: rgba(255,255,255,.07); transform: scale(1); } 50% { transform: scale(1.35); } 100% { background: var(--color-state-success); box-shadow: 0 0 18px rgba(47,212,122,.6); transform: none; } }
@keyframes lsb-pip-gold { 0% { background: rgba(255,255,255,.07); transform: scale(1); } 50% { transform: scale(1.35); } 100% { background: var(--color-accent-highlight); box-shadow: 0 0 18px rgba(255,201,60,.6); transform: none; } }
.lsb .lsb-cell.stat { font-family: var(--font-display); font-size: 40px; color: var(--color-text-body); }

.lsb .mv { justify-self: center; font-family: var(--font-display); font-size: 30px; animation: dh-in 400ms 2500ms both; }
.lsb .mv.up { color: var(--color-state-success); } .lsb .mv.down { color: var(--color-state-danger); }
.lsb .mv.eq { color: var(--color-text-secondary); }

/* the leg's winner: a green edge from the start; the leader turns gold on the beat */
.lsb .lsb-row.won { box-shadow: inset 0 0 0 2px var(--color-tint-success-strong), 0 10px 30px rgba(0,0,0,.35); }
.lsb .lsb-row.lead { animation: gt-move 800ms calc(1700ms + var(--k) * 30ms) cubic-bezier(.5, 0, .2, 1) both, gt-leadglow 600ms 2900ms both; }
.lsb .lsb-row.lead .pl { color: var(--color-accent-highlight); }
.lsb .lsb-row.lead .gt-av.ring-gold::after { animation: dh-in 400ms 2900ms both; }

.lsb .lsb-next { left: 96px; right: 96px; bottom: 56px; height: 104px; display: flex; align-items: center; gap: 24px; padding: 0 36px; border-radius: 26px;
  background: rgba(6,18,50,.86); box-shadow: inset 0 0 0 1px rgba(66,155,252,.3); animation: dh-in 500ms 1200ms both; }
.lsb .lsb-next > span:not(.gt-av) { font-family: var(--font-display); font-size: 36px; color: #fff; letter-spacing: .02em; }

/* a later refresh of the same board, or a QA still: no entrance */
.lsb.settled *, .lsb.settled { animation: none !important; }
.lsb.settled .lsb-row .pl, .lsb.settled .mv { opacity: 1; }
.lsb.settled .lsb-row.lead { background: linear-gradient(90deg, rgba(255,201,60,.18), rgba(6,18,50,.86) 55%); box-shadow: inset 0 0 0 2px var(--color-tint-gold-strong), 0 0 40px rgba(255,201,60,.2); }
.lsb.settled .lsb-pips i.new { background: var(--color-state-success); }
.lsb.settled .lsb-pips.set i.new { background: var(--color-accent-highlight); }

/* six at the table */
.lsb .lsb-table[style*="--step:100px"] .nm { font-size: 32px; }
.lsb .lsb-table[style*="--step:100px"] .lsb-cell .ct { font-size: 46px; }
.lsb .lsb-table[style*="--step:100px"] .lsb-cell.stat { font-size: 34px; }
.lsb .lsb-table[style*="--step:100px"] .who { gap: 4px; }
.lsb .lsb-table[style*="--step:100px"] .lsb-note { font-size: 15px; padding: 2px 12px; }