/* ============================================================
   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;
}
/* the floating "LAST ROUND" pill becomes the strip's inline caption */
.header-slots::before {
  content: 'LAST';
  position: static;
  top: auto; left: auto;
  font-size: 17px;
  letter-spacing: 3px;
  color: #9b8fb5;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  flex: 0 0 auto;
}

/* 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;
  background: none;
  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; }