/* The player axis: a real number line, the answer's position always at its
   centre, and one flag per player that carries its own name with it. */
.live-player-axis {
  direction: ltr; isolation: isolate; flex-shrink: 0; width: 100%; position: relative;
  /* --lpa-tag-space reserves room below (or above) each pole for its
     two-line name+distance tag. It needs a few px more than the tag's own
     rendered height, or the outermost rung's tag overruns the container
     by that much -- in the live game this container clips at the question
     card's edge, right where the guess box begins, so any shortfall here
     reads as a name/distance getting clipped "behind" the guess box. */
  --lpa-pole-base: 30px; --lpa-pole-step: 32px; --lpa-tag-space: 42px;
}
/* No transition on this element's height, nor on the poles/tags that are
   sized from it. Every rung is fixed for the whole round (see rungOf() in
   live-player-axis.js), so there is nothing here that legitimately animates
   -- and animating it actively broke the layout: layout() writes the
   container height, the ResizeObserver watching that container sees every
   intermediate frame of its own transition and calls layout() again, and
   the poles' matching height transition could be left running indefinitely,
   rendering every flag as a stub a third of its real length. */
.lpa-line { position: absolute; left: 4.5%; right: 4.5%; height: 2px; background: var(--border-strong); border-radius: 2px; transform: translateY(-1px); z-index: 1; }
.lpa-center { position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); transform: translate(-50%, -4.5px); transition: background-color .4s ease, box-shadow .4s ease; z-index: 12; }
.is-revealed .lpa-center { background: var(--purple); box-shadow: 0 0 0 5px var(--purple-glow); }
/* Sits right against the line. Poles run all the way down to the line
   itself (that's the whole point of a planted flag), so instead of holding
   them away from it, the centre dot and this label simply paint above them
   -- z-index over the flags, which go no higher than 9. */
.lpa-center-label, .lpa-note { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap; direction: rtl; z-index: 10; }
.lpa-note { opacity: 0; transition: opacity .3s ease; }
.is-reveal-running .lpa-note { opacity: 1; }

/* Every player keeps one permanent rung (side + height) for the whole match,
   so crossing flags never cover or displace one another. */
.lpa-flag { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: var(--lpa-z, 1); will-change: transform; }
/* The pole is planted IN the line: its near end sits exactly on it, with no
   gap, so every flag reads as standing on the axis rather than floating
   above it. --pole-height is the full reach from the line to the pennant. */
.lpa-pole {
  position: absolute; left: -1.25px; bottom: 0; width: 2.5px;
  height: var(--pole-height, 30px);
  background: var(--player-color); border-radius: 2px;
}
.lpa-flag.is-below .lpa-pole { bottom: auto; top: 0; }
.lpa-pennant {
  position: absolute; left: 2.5px; top: 0; width: 27px; height: 16px; z-index: 2;
  background: var(--player-color); clip-path: polygon(0 0, 100% 12%, 74% 50%, 100% 88%, 0 100%);
  display: flex; align-items: center; gap: 1px; padding-inline-start: 3px;
}
.lpa-flag.is-below .lpa-pennant { top: auto; bottom: 0; }
/* the ×2 bet plants a second flag on its own pole — same size as every other
   flag, and it takes no extra width on the axis */
.lpa-twin { display: none; position: absolute; inset: 0; }
.lpa-flag.is-double .lpa-twin { display: block; }
.lpa-twin-pole { position: absolute; left: 5px; bottom: 0; width: 2.5px; height: 100%; background: var(--player-color); opacity: .5; border-radius: 2px; }
.lpa-flag.is-below .lpa-twin-pole { bottom: auto; top: 0; }
/* Faded, same as .lpa-twin-pole -- purely a "second flag" visual echo now
   that the ×2 text itself lives on the main pennant (see live-player-axis.js
   apply()), not here where the main pennant sitting right in front of it
   just covered the text. */
.lpa-twin-pennant {
  position: absolute; left: 7.5px; top: 4px; width: 27px; height: 16px; opacity: .5;
  background: var(--player-color); clip-path: polygon(0 0, 100% 12%, 74% 50%, 100% 88%, 0 100%);
}
.lpa-flag.is-below .lpa-twin-pennant { top: auto; bottom: 4px; }
/* The win cue used to be this halo alone -- sitting at a fixed offset
   inside the pennant, it only ever lit up one side of the flag and read
   as lopsided. Replaced by a pop/glow on the name itself (see .lpa-nmrow
   below), which is symmetric regardless of side. */
.lpa-halo { display: none; }
.lpa-flag.is-planting .lpa-pennant { animation: lpaPlant .5s ease-out; }
@keyframes lpaPlant { 0% { transform: scale(.72); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* name + distance travel with the flag, always beyond the pennant */
.lpa-tag { position: absolute; left: 0; transform: translateX(calc(-50% + var(--tag-shift, 0px))); direction: rtl; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; bottom: calc(var(--pole-height, 30px) + 5px); }
.lpa-flag.is-below .lpa-tag { flex-direction: column-reverse; bottom: auto; top: calc(var(--pole-height, 30px) + 5px); }
.lpa-nmrow { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--player-color); }
.lpa-flag.is-winner .lpa-nmrow { color: var(--purple); animation: lpaWinnerPop 1.6s ease-out infinite; }
@keyframes lpaWinnerPop {
  0% { text-shadow: 0 0 0 rgba(15,140,121,0); transform: scale(1); }
  30% { text-shadow: 0 0 8px rgba(15,140,121,.55); transform: scale(1.1); }
  100% { text-shadow: 0 0 0 rgba(15,140,121,0); transform: scale(1); }
}
.lpa-fullname { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
/* Lives inside the pennant (not beside the name -- see live-player-axis.js)
   so it never throws off the name/detail centering below it. */
.lpa-lock { font-size: 10px; font-weight: 800; line-height: 1; color: #fff; opacity: 0; transition: opacity .25s ease; }
.lpa-flag.is-locked .lpa-lock, .lpa-flag.is-skipped .lpa-lock { opacity: 1; }
/* Off the real answer track (see OFF_TRACK_X) and neutral gray -- still
   says "didn't answer" (the lock turns into a dash, opacity dims it) but
   never sits on the line as if it were a real guess. !important because
   --player-color is otherwise set inline per player. */
.lpa-flag.is-skipped { opacity: .45; --player-color: var(--text-muted) !important; }
.lpa-detail { font-size: 11px; font-weight: 800; line-height: 13px; height: 13px; direction: ltr; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.lpa-detail.is-plus { color: #2FA36B; }
.lpa-detail.is-minus { color: var(--red); }
.lpa-detail.is-chip { direction: rtl; background: var(--yellow); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 10px; opacity: 1; transition: opacity .4s ease; }
.lpa-detail.is-chip.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .lpa-flag.is-winner .lpa-nmrow, .lpa-flag.is-planting .lpa-pennant { animation: none; }
}