/* ============================================================
   UI CLEANUP v8 (2026-08-02) — LAST GAME card: stop the overflow.

   v5 pinned .header-slots at a fixed height (264u web / 264u OBS) so the
   podium below stops jumping when a round ends, and guarded it with
   overflow:hidden. v4 had already given the same box `flex-wrap: wrap`
   plus `align-content: center`. Together those three produced the bug:

     content width needed   770u (word + finder) + 22 gap + 525u (champ)
                            = 1317u  vs  774u available   -> wraps to 2 rows
     two rows need          150 + 12 + 150 = 312u
     content box has        260 - 74 padTop - 10 padBot   = 176u
     overflow               136u, and align-content:center splits it evenly

   ...so the first row started at y=6, driving the word straight through
   the 'LAST GAME' caption at y=14-70, and the second row ended at y=318
   against a 260u clip, slicing the winner's avatar and XP pill in half.

   Fix: make the two rows DELIBERATE and make them fit.
     1. the caption band shrinks 74u -> 58u (font 46 -> 40, still >=10px
        on mobile, which is the floor v4 was written to hold)
     2. each slot is forced to a full-width row, so the wrap is always
        exactly 2 rows and never 3
     3. rows are pinned at 91u — the only thing that shrinks is the
        avatar (150 -> 91). Every piece of TEXT keeps its v4/v6 size,
        because a 52px name is a 57u line box and still clears 91u.
     4. names truncate instead of squashing; the word auto-fits via the
        fitter grafted into index.html / alt.html (CSS cannot measure text)

   Result: 58 + 91 + 10 + 91 + 10 = 260u exactly. Zero overflow, so
   overflow:hidden never clips anything and the card height — and
   therefore everything below it — is untouched.

   Loaded by index.html (normal + /stream OBS) AND alt.html (grid), so
   all three surfaces get the same fix. Sizes are written against BOTH
   tier selectors (`body:not(.obs-mode)` from v4 and `body.obs-mode`
   from v6) because those are (0,2,1) and a bare `.header-slots` would
   lose to them.
   ============================================================ */

/* ---------- 1 · caption band ---------- */
body:not(.obs-mode) .header-slots::before,
body.obs-mode .header-slots::before {
  font-size: 40px;          /* 46 -> 40; measured box is 48u tall, bottom at 56 */
  top: 8px;
  left: 24px;
  letter-spacing: 3px;
}
body:not(.obs-mode) .header-slots,
body.obs-mode .header-slots {
  padding-top: 58px;        /* clears the 56u caption by 2u */
  padding-bottom: 10px;
  row-gap: 10px;
}

/* ---------- 2 · exactly two rows, pinned height ---------- */
/* flex:0 0 100% is what makes the wrap deterministic. Without it the row
   count is content-driven — a long word plus a long name is a third row,
   which overflows again no matter what the heights are. */
.header-slots .header-slot {
  flex: 0 0 100%;
  height: 91px;
  align-items: center;
}

/* ---------- 3 · avatars carry the whole shrink ---------- */
body:not(.obs-mode) .header-slot-pic-wrap,
body.obs-mode .header-slot-pic-wrap { width: 91px; height: 91px; }
body:not(.obs-mode) .header-slot-pic,
body.obs-mode .header-slot-pic,
body:not(.obs-mode) .header-slot-pic-fb,
body.obs-mode .header-slot-pic-fb { width: 91px; height: 91px; border-width: 4px; }
body:not(.obs-mode) .header-slot-pic-fb,
body.obs-mode .header-slot-pic-fb { font-size: 38px; }

/* ---------- 4 · text: same sizes, bounded widths ---------- */
/* 520u of name on a 770u row left the word ~120u. Capped at 240u (~8
   characters at 52px) the word keeps 400u+, and anything longer gets an
   ellipsis instead of being squashed to an unreadable sliver by flex. */
body:not(.obs-mode) .header-slot-name,
body.obs-mode .header-slot-name {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

/* The word is the headline — it never gets an ellipsis. It is allowed to
   flex-shrink so `scrollWidth > clientWidth` becomes a reliable "does not
   fit" signal, and the fitter in the page steps the font down until it
   does. overflow:hidden is what makes clientWidth report the shrunk box. */
.header-slots .header-slot .header-slot-label { white-space: nowrap; }
.header-slots .header-slot[data-slot-index="0"] .header-slot-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}