/* ============================================================
   UI CLEANUP v4 (2026-08-02) — legible top UI.

   The whole game is a fixed 1800-unit-wide canvas. OBS renders it at
   scale 1.0 (a 16u label = a readable 16px), but the web squeezes it to
   ~0.25 on desktop and ~0.217 on mobile, so the same labels land at
   3-5px. Measured live before this change:

       desktop 1280x720 (scale 0.25)   mobile 390x844 (scale 0.217)
       stat label   3.8px               3.3px
       caption      4.0px               3.5px
       winner name  5.3px               4.5px

   The guess cards never had this problem because they carry their own
   pointer:coarse overrides; nothing equivalent existed for the header.

   Fix: make the top UI proportionally bigger INSIDE the canvas. That is
   viewport-independent, so it fixes desktop and mobile at once (mobile
   always fills the width, desktop is scale-capped).

   Two tiers:
     • base rules      = OBS/stream, a modest ~1.3x bump
     • body:not(.obs-mode) = web, ~2.4x so nothing lands under ~10px
   ============================================================ */

/* ─────────────── TIER 1 · stream (modest bump) ─────────────── */
.header-slots::before { font-size: 21px; top: 11px; left: 20px; }
.header-slots { padding-top: 38px; }
.header-slot-name { font-size: 27px; max-width: 300px; }
.header-slot[data-slot-index="0"] .header-slot-label { font-size: 38px; }
.header-slot[data-slot-index="1"] .header-slot-label { font-size: 23px; padding: 3px 14px; }
.header-slot-pic-wrap { width: 78px; height: 78px; }
.header-slot-pic,
.header-slot-pic-fb { width: 78px; height: 78px; }
.header-slot-pic-fb { font-size: 32px; }
.header-combined-pic-ring { width: 92px; height: 92px; }
.header-combined-name { font-size: 30px; }
.header-combined-pill { font-size: 21px; }
.header-stat-label { font-size: 19px; }
.header-stat-value { font-size: 38px; }
.header-stat { padding: 8px 20px; }
.header-ad-slot { min-height: 250px; }
.header-ad-card::before { width: 190px; height: 190px; left: 34px; }
.header-ad-center { left: 256px; }
.header-ad-name { font-size: 54px; }
.header-ad-url { font-size: 27px; }
.podium-name { font-size: 29px; }
.podium-xp { font-size: 56px; }
.podium-slot-compact .podium-xp { font-size: 42px; }
.podium-slot-1 .podium-avatar-wrap { width: 175px; height: 175px; flex: 0 0 175px; }
.podium-slot-2 .podium-avatar-wrap { width: 147px; height: 147px; flex: 0 0 147px; }
.podium-slot-3 .podium-avatar-wrap { width: 128px; height: 128px; flex: 0 0 128px; }
.podium-current-live { font-size: 22px; }
.podium-current-text { font-size: 25px; }
.header-bar .wt-legal-footer { font-size: 24px; }

/* ─────────────── TIER 2 · web (the real fix) ─────────────── */
/* Every size below is chosen so the smallest text clears ~10px even at
   the worst case (mobile, scale 0.217). */
body:not(.obs-mode) .header-slots::before { font-size: 46px; top: 14px; left: 24px; letter-spacing: 4px; }
body:not(.obs-mode) .header-slots { padding-top: 74px; gap: 22px; padding-left: 24px; padding-right: 24px; }

body:not(.obs-mode) .header-slot { gap: 16px; }
body:not(.obs-mode) .header-slot-name { font-size: 52px; max-width: 520px; }
body:not(.obs-mode) .header-slot[data-slot-index="0"] .header-slot-label { font-size: 74px; letter-spacing: 4px; }
body:not(.obs-mode) .header-slot[data-slot-index="1"] .header-slot-label { font-size: 44px; padding: 6px 24px; border-width: 3px; }
body:not(.obs-mode) .header-slot-pic-wrap { width: 150px; height: 150px; }
body:not(.obs-mode) .header-slot-pic,
body:not(.obs-mode) .header-slot-pic-fb { width: 150px; height: 150px; border-width: 6px; }
body:not(.obs-mode) .header-slot-pic-fb { font-size: 62px; }

body:not(.obs-mode) .header-combined-card { gap: 22px; }
body:not(.obs-mode) .header-combined-pic-ring { width: 176px; height: 176px; padding: 9px; }
body:not(.obs-mode) .header-combined-name { font-size: 56px; }
body:not(.obs-mode) .header-combined-pill { font-size: 40px; padding: 5px 22px; }

/* The stats group is `flex:0 0 auto` with min-width:auto, so at full size it
   was 892u inside an 818u card and could not shrink — the one thing still
   overflowing. Let it wrap and shrink, and trim the chips: the TIME chip is
   the widest because the hour-format clock ("36:46:02") is a long string. */
body:not(.obs-mode) .header-stats { gap: 16px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
body:not(.obs-mode) .header-stat { padding: 12px 22px; border-radius: 18px; }
/* 40u landed at 8.7px on mobile — the smallest thing on screen. 48u clears
   10px there and 12px on desktop. */
body:not(.obs-mode) .header-stat-label { font-size: 44px; letter-spacing: 3px; }
body:not(.obs-mode) .header-stat-value { font-size: 58px; margin-top: 6px; }

/* The row is `grid-template-columns: auto 1fr`, so the content-sized recap
   card monopolised the width once its text grew — the ad column collapsed to
   66px with its content spilling out. Split the row evenly and let the card
   wrap instead of pushing: it is 340u tall with a single row of content, so
   there is plenty of vertical room to use. */
body:not(.obs-mode) .header-slots { flex-wrap: wrap; align-content: center; row-gap: 12px; }

/* ---------- stats are their own card ---------- */
/* A graft lifts .header-stats out of .header-slots: Time/Guesses/XP belong
   to the game in PROGRESS, and reading them inside the previous game's
   result card made them look like last game's numbers. Left column stacks
   [last game] over [live stats]; the ad spans both rows on the right. */
.header-bar-row { grid-template-rows: auto auto; }
.header-slots      { grid-column: 1; grid-row: 1; }
.header-stats.is-own-card {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  align-self: stretch;
  justify-content: center;
  background: rgba(20, 22, 38, 0.55);
  border: 2px solid rgba(140, 150, 200, 0.16);
  border-radius: 18px;
  padding: 10px 16px;
  position: relative;
}
/* Same corner caption treatment as the last-game card, so the pair reads
   as two labelled cards rather than one split box. */
.header-stats.is-own-card::before {
  content: 'THIS GAME';
  position: absolute;
  top: 9px; left: 18px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #cdc3e0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.header-ad-slot { grid-column: 2; grid-row: 1 / 3; }

body:not(.obs-mode) .header-bar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
body:not(.obs-mode) .header-stats.is-own-card { padding: 46px 24px 16px; border-radius: 22px; }
body:not(.obs-mode) .header-stats.is-own-card::before { font-size: 40px; top: 12px; left: 24px; }

body:not(.obs-mode) .header-ad-slot { min-height: 340px; border-radius: 28px; }
body:not(.obs-mode) .header-ad-card::before { width: 210px; height: 210px; left: 34px; border-radius: 34px; }
body:not(.obs-mode) .header-ad-center { left: 268px; right: 28px; gap: 12px; }
body:not(.obs-mode) .header-ad-name { font-size: 62px; }
body:not(.obs-mode) .header-ad-url { font-size: 34px; }

body:not(.obs-mode) .podium-row { padding: 16px 24px 20px; }
body:not(.obs-mode) .podium-name { font-size: 54px; }
body:not(.obs-mode) .podium-xp { font-size: 96px; }
body:not(.obs-mode) .podium-slot-compact .podium-xp { font-size: 68px; }
body:not(.obs-mode) .podium-rank-badge { font-size: 40px; top: 10px; left: 14px; }
body:not(.obs-mode) .podium-slot-1 .podium-avatar-wrap { width: 250px; height: 250px; flex: 0 0 250px; }
body:not(.obs-mode) .podium-slot-2 .podium-avatar-wrap { width: 210px; height: 210px; flex: 0 0 210px; }
body:not(.obs-mode) .podium-slot-3 .podium-avatar-wrap { width: 180px; height: 180px; flex: 0 0 180px; }
body:not(.obs-mode) .podium-slot-compact .podium-avatar-wrap { width: 160px; height: 160px; flex: 0 0 160px; }
body:not(.obs-mode) .podium-avatar { border-width: 5px; }
body:not(.obs-mode) .podium-surface { border-radius: 26px; padding: 18px 12px 16px; gap: 12px; }

body:not(.obs-mode) .podium-current-label { padding: 14px 30px; gap: 16px; top: -30px !important; }
body:not(.obs-mode) .podium-current-live { font-size: 40px; letter-spacing: 5px; }
body:not(.obs-mode) .podium-current-text { font-size: 44px; }
body:not(.obs-mode) .podium-current-dot { width: 26px; height: 26px; }
body:not(.obs-mode) .podium-current-sep { height: 44px; }

body:not(.obs-mode) .header-bar .wt-legal-footer { font-size: 40px; padding: 6px 0 10px; }

/* The URL row rides along — it is the same scaled canvas. Sized to fit
   1800u across: at 62/46/42 the three zones overflowed the row by ~100u. */
body:not(.obs-mode) .header-url-row { gap: 16px; padding-left: 40px; padding-right: 40px; }
body:not(.obs-mode) .header-url-band { font-size: 46px; }
body:not(.obs-mode) .header-grid-cta { font-size: 34px; padding: 12px 28px; border-width: 3px; margin-left: 16px; }
body:not(.obs-mode) .header-streamers-toggle { font-size: 32px; padding: 12px 24px; border-width: 3px; }
body:not(.obs-mode) .header-streamers-dot { width: 18px; height: 18px; }
body:not(.obs-mode) .header-mode-switch { font-size: 34px; }