/* ============================================================
   UI CLEANUP v5 (2026-08-02) — fixed-size top cards, flush top,
   minimisable header.

   These rules are deliberately NOT gated on :not(.obs-mode): the widget
   (/stream, /overlay/<handle>) serves the same index.html / alt.html, so
   the stream reflects the same structure. Only the two size TIERS differ,
   which v4 already handles.
   ============================================================ */

/* ---------- 1 · flush with the top of the page ---------- */
/* topPad already puts the header's top edge at the viewport top; the row's
   own 18u padding was the remaining gap above the first card. */
.header-bar-row { padding-top: 0; }
.header-bar { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; }

/* ---------- 2 · fixed card sizes (no shift when a game starts) ---------- */
/* Content used to size these, so the header grew the moment real round data
   arrived (empty slots -> filled, combined card appearing) and everything
   below jumped. Fixed heights + overflow guard = a stable header from first
   paint. Two tiers because the stream's type is smaller than the web's. */
.header-slots            { height: 190px; overflow: hidden; }
.header-stats.is-own-card{ height: 150px; overflow: hidden; }
.header-ad-slot          { height: 364px; min-height: 0; }

body:not(.obs-mode) .header-slots             { height: 264px; }
body:not(.obs-mode) .header-stats.is-own-card { height: 202px; }
body:not(.obs-mode) .header-ad-slot           { height: 490px; }

/* The podium needs the same treatment. Its height is now measured (it had to
   be, or the guesses overlapped it), but that made it content-dependent: 495
   with players on it, 340 when the slots are empty. So every round reset — and
   again on the first guess of the new round — shifted everything below it by
   155 units. Pinned at its filled height, which is the max: slot 1 is always
   the tallest and names never wrap.
   NOTE: no overflow:hidden here — the LIVE pill and the seam bridge are drawn
   outside this box and would be clipped. */
.podium-row { height: 495px; }

/* ---------- 3 · minimise control (replaces the stats drawer) ---------- */
.stats-drawer { display: none !important; }

/* The drawer also installed .banner-overlay: an invisible fixed strip across
   the top 64-80px of the viewport that opened the drawer on click/swipe.
   With the drawer gone it is dead weight, and it sat ON TOP of the minimise
   button once minimised — every click to restore hit the strip instead, so
   the cards could not be brought back. Killing it also removes a latent
   shift: swiping it still toggled the (now invisible) drawer, which offsets
   the podium. */
.banner-overlay { display: none !important; }

/* Belt and braces: keep the control above anything else fixed to the top. */
.header-toggle-row { position: relative; z-index: 60; }
.stats-toggle { position: relative; z-index: 61; }
.header-toggle-row { padding: 0 60px 2px; }

.stats-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: rgba(20, 22, 38, 0.7);
  border: 2px solid rgba(140, 150, 200, 0.28);
  border-radius: 999px;
  padding: 6px 18px;
  color: #cdc3e0;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 20px;
  cursor: pointer;
  pointer-events: auto;      /* the 3D scene wrapper is pointer-events:none */
  line-height: 1;
}
.stats-toggle-icon, .stats-toggle-chevron { display: none !important; }
.stats-toggle::after { content: '\2013  MINIMISE'; }
body.header-min .stats-toggle::after { content: '\002B  SHOW CARDS'; }

body:not(.obs-mode) .stats-toggle { font-size: 40px; padding: 12px 30px; border-width: 3px; }

/* ---------- 4 · minimised: podium flush to the top, terms above it ---------- */
/* Everything but the legal line and the toggle collapses. headerBar.height is
   measured and main.js no longer latches the max, so the podium and the guess
   list rise on their own once this shrinks the header. */
body.header-min .header-bar-row { display: none !important; }
body.header-min .header-url-row { display: none !important; }
body.header-min .header-bar {
  background: none;
  border: none;
  box-shadow: none;
}
/* the terms line sits at the very top, with the restore control beside it */
body.header-min .header-bar .wt-legal-footer {
  padding: 2px 0 0;
  font-size: 22px;
  opacity: 0.75;
}
body:not(.obs-mode).header-min .header-bar .wt-legal-footer { font-size: 34px; }
body.header-min .header-toggle-row { padding-top: 2px; padding-bottom: 4px; }

/* The podium keeps its own frame when the header above it is gone, otherwise
   it reads as a floating fragment of a panel that is no longer there. */
body.header-min .podium-row {
  border-top: 2px solid rgba(168, 85, 247, 0.35);
  border-radius: 24px;
}
body.header-min .podium-row::before { display: none; }   /* seam bridge */