/* ============================================================
   UI CLEANUP v3 (2026-08-01) — "Option A": one combined board.

   Last round collapses from four big cards into a single recap strip
   (word + finder + XP champ + live stats) sitting beside the ad, and the
   live podium becomes the hero directly beneath it. The header frame and
   the podium frame are styled as one continuous panel.

   Pure CSS: no DOM changes, so HeaderBar/PodiumRow keep working and the
   layout math (which measures header height) pulls the podium up on its
   own as the header shrinks.
   ============================================================ */

/* ---------- outer frame moves to the header itself ---------- */
.header-bar {
  background: rgba(12, 8, 24, 0.35);
  border: 2px solid rgba(168, 85, 247, 0.35);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.14);
}
/* solo has its own 1px-tall hidden header — never frame it */
.header-bar.mode-sp {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- last round: framed panel -> inline recap strip ---------- */
.header-slots {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: rgba(20, 22, 38, 0.55);
  border: 2px solid rgba(140, 150, 200, 0.16);
  border-radius: 18px;
  box-shadow: none;
  grid-template-columns: none;
  min-width: 0;
}
/* Grid mode reserves a fixed 502px for the old four-card block via
   `.header-bar .header-slots` (0,2,0 — it outranks the rule above, which is
   why the strip ballooned there while normal mode was fine). The recap strip
   sizes to its content now, so release it. Same specificity, loaded later. */
.header-bar .header-slots { min-height: 0; }
/* Caption sits in the card's upper-left corner (absolute, so it is not a
   flex item competing with the winners for horizontal space). */
.header-slots { position: relative; padding-top: 30px; }
.header-slots::before {
  content: 'LAST 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);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  z-index: 2;
}

/* ---------- winner's hero badge fills the whole card ---------- */
/* A graft copies the previous winner's hero_badge background onto the card
   (cosmetics set it as an inline style on the individual slot root). The
   per-slot copy is suppressed so the colour reads once, across the card —
   !important because it has to beat that inline style. */
.header-slot { background: none !important; }

/* Time / Guesses / XP stay uncoloured on top of the badge, so they keep
   their own opaque plate rather than picking up the winner's colour. */
.header-stat {
  background: rgba(14, 16, 28, 0.88) !important;
  border-color: rgba(140, 150, 200, 0.3) !important;
}
/* Keep names and the caption legible over a bright badge. */
.header-slots.has-hero::before { color: #fff; }
.header-slots.has-hero .header-slot-name,
.header-slots.has-hero .header-combined-name { text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95); }
.header-slots.has-hero .header-slot-label { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* Only the target finder and the XP champ survive in the strip.
   2nd/3rd of the previous round drop out — the live podium below already
   shows who is winning right now. */
.header-slot[data-slot-index="2"],
.header-slot[data-slot-index="3"] { display: none !important; }

.header-slot {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 0;
  flex: 0 1 auto;
}
.header-slot::before { display: none; }          /* role captions: too wordy inline */

.header-slot-pic-wrap { width: 62px; height: 62px; }
.header-slot-pic,
.header-slot-pic-fb {
  width: 62px; height: 62px;
  border-width: 3px;
  box-shadow: 0 0 10px var(--tier-glow);
}
.header-slot-pic-fb { font-size: 26px; }
.header-slot.is-empty .header-slot-pic-fb { border-width: 3px !important; }

.header-slot-name { font-size: 21px; max-width: 240px; }

/* Slot 0's label holds the round's WORD — promote it ahead of the avatar
   and give it the headline treatment. */
.header-slot[data-slot-index="0"] .header-slot-label {
  order: -1;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #b8f7c5;
  background: none;
  border: 0;
  padding: 0 2px 0 0;
}
/* The XP champ's number stays a quiet chip. */
.header-slot[data-slot-index="1"] .header-slot-label {
  font-size: 18px;
  padding: 2px 12px;
}

/* Dual-winner card (target === XP champ) collapses the same way. */
.header-slots.is-combined { grid-template-columns: none; }
.header-combined-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 0;
  /* !important for the same reason as .header-slot: when one player wins
     both, cosmetics paint the hero badge inline on THIS element, and the
     badge now belongs to the whole card. Without it the colour draws twice. */
  background: none !important;
  border: 0;
  box-shadow: none;
  align-self: center;
}
.header-combined-pic-ring { width: 74px; height: 74px; padding: 5px; }
.header-combined-pic,
.header-combined-pic-fb { border-width: 4px; font-size: 28px; }
.header-combined-name { font-size: 24px; }
.header-combined-pills { flex-direction: row; gap: 7px; }
.header-combined-pill { font-size: 17px; padding: 3px 12px; }

/* Live stats ride at the right end of the strip. */
.header-stats {
  margin-left: auto;
  margin-top: 0;
  gap: 9px;
  flex: 0 0 auto;
}
.header-stat { padding: 6px 16px; }
.header-stat-label { font-size: 15px; }
.header-stat-value { font-size: 30px; margin-top: 4px; }

/* Row: strip + ad side by side, ad a touch shorter now. */
.header-bar-row { align-items: stretch; gap: 20px; }
.header-ad-slot { min-height: 196px; }
.header-ad-card::before { width: 150px; height: 150px; left: 30px; border-radius: 24px; }
.header-ad-center { left: 208px; }
.header-ad-name { font-size: 44px; }
.header-ad-url { font-size: 22px; }

/* ---------- podium: continues the same panel, and goes hero ---------- */
.podium-row {
  border-top: none;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.14);
  padding-top: 10px;
}
/* Bridges the gap the 3D layout leaves between the two objects so the
   header and podium read as one continuous board. */
.podium-row::before {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: 100%;
  height: 26px;
  background: rgba(12, 8, 24, 0.35);
  border-left: 2px solid rgba(168, 85, 247, 0.35);
  border-right: 2px solid rgba(168, 85, 247, 0.35);
  pointer-events: none;
}
/* The LIVE pill sits on the seam, marking where the recap ends and the
   live race begins. (The 3D layout leaves exactly 18 units between the two
   objects, so -16px straddles the join.) */
/* !important because some earlier rule pushes this to -48px, which would
   lift the pill off the seam and into the legal line above it. */
.podium-current-label { top: -16px !important; bottom: auto !important; right: 22px; }

.podium-slot-1 .podium-avatar-wrap { width: 150px; height: 150px; flex: 0 0 150px; }
.podium-slot-2 .podium-avatar-wrap { width: 126px; height: 126px; flex: 0 0 126px; }
.podium-slot-3 .podium-avatar-wrap { width: 110px; height: 110px; flex: 0 0 110px; }
.podium-xp { font-size: 46px; }
.podium-name { font-size: 23px; }