/* ============================================================
   UI CLEANUP v1 (2026-08) — podium + header restyle.
   Approved mockups: mockups/podium-cleanup-before-after.html,
   mockups/header-cleanup-before-after.html.
   Pure override layer: loads AFTER the built bundle CSS, changes
   no DOM. Shared by regular Searchle (index), Grid (alt), Solo (sp).
   No backdrop-filter anywhere — OBS SoftCEF renders it black.
   ============================================================ */

/* ---------- Live podium: green slab -> thin purple glass ---------- */
.podium-row {
  border: 2px solid rgba(168, 85, 247, 0.35);
  border-radius: 24px;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.14);
  background: rgba(12, 8, 24, 0.35);
}
.podium-current-label {
  top: -16px; right: 22px;
  gap: 12px;
  background: rgba(10, 6, 20, 0.92);
  padding: 8px 20px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.podium-current-dot  { width: 14px; height: 14px; box-shadow: 0 0 10px #4ade80; }
.podium-current-live { font-size: 18px; font-weight: 900; letter-spacing: 3px; }
.podium-current-sep  { width: 2px; height: 20px; background: rgba(255, 255, 255, 0.25); }
.podium-current-text { font-size: 20px; font-weight: 700; color: #e6defa; letter-spacing: 0.5px; }

.podium-surface { background: rgba(20, 22, 38, 0.55); }
.podium-rank-badge { font-size: 20px; color: rgba(220, 220, 240, 0.55); }

.podium-xp {
  font-size: 44px;
  color: #dbe7ff;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.35), 0 1px 3px rgba(0, 0, 0, 0.8);
}
.podium-slot-compact .podium-xp {
  font-size: 34px;
  color: #b9c6e8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Empty podium slots: ghost dashed circles, no card, no dash */
.podium-slot-empty .podium-surface,
body.obs-mode .podium-slot-empty .podium-surface {
  opacity: 1;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.podium-slot-empty .podium-avatar {
  border: 3px dashed rgba(140, 150, 200, 0.32) !important;
  background: rgba(30, 32, 50, 0.3);
  box-shadow: none !important;
}
.podium-slot-empty .podium-xp { visibility: hidden; }
.podium-slot-empty .podium-xp::before { content: none; }
.podium-slot-empty .podium-rank-badge { display: none; }
.podium-slot-empty .podium-avatar-placeholder { font-size: 0; }
.podium-slot-empty .podium-avatar-placeholder::after {
  content: '\FF0B';
  font-size: 34px;
  color: rgba(140, 150, 200, 0.35);
  line-height: 1;
}

/* ---------- Header winners: one glass panel + LAST ROUND pill ---------- */
.header-slots {
  position: relative;
  border: 2px solid rgba(168, 85, 247, 0.35);
  border-radius: 24px;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.14);
  background: rgba(12, 8, 24, 0.35);
  padding: 26px 24px 18px;
}
/* absolutely positioned so it does NOT become a grid item */
.header-slots::before {
  content: 'LAST ROUND';
  position: absolute;
  top: -16px; left: 22px;
  font-size: 18px; font-weight: 900;
  letter-spacing: 3px;
  color: #c4b5fd;
  line-height: 1;
  background: rgba(10, 6, 20, 0.92);
  padding: 9px 20px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

/* Slot cards: glass recipe (matches obs-mode family) */
.header-slot {
  background: rgba(20, 22, 38, 0.55);
  border: 2px solid rgba(140, 150, 200, 0.18);
  border-radius: 18px;
  padding: 16px 10px 14px;
  gap: 10px;
}
/* Role captions injected as flex items; order: pic, role, name, value chip */
.header-slot-pic-wrap { order: 0; }
.header-slot::before  { order: 1; }
.header-slot-name     { order: 2; }
.header-slot-label    { order: 3; }
.header-slot::before {
  font-size: 17px; font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1;
}
.header-slot.is-target::before { content: 'FOUND IT'; color: #4ade80; }
.header-slot.is-gold::before   { content: 'XP CHAMP'; color: #ffd700; }
.header-slot.is-silver::before { content: '2ND'; color: #c0c0c0; }
.header-slot.is-bronze::before { content: '3RD'; color: #cd7f32; }
.header-slot.is-empty::before  { opacity: 0.4; }

/* Avatars: 200px/9px ring -> 150px/4px ring, soft glow */
.header-slot-pic-wrap { width: 150px; height: 150px; }
.header-slot-pic,
.header-slot-pic-fb {
  width: 150px; height: 150px;
  border-width: 4px;
  box-shadow: 0 0 16px var(--tier-glow);
}
.header-slot-pic-fb { font-size: 64px; }
.header-slot.is-empty .header-slot-pic-fb {
  border-width: 4px !important;
  box-shadow: none !important;
}

/* Word/XP value: solid gradient pill -> quiet glass chip */
.header-slot-label {
  color: #dbe7ff;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(140, 150, 200, 0.25);
  border-radius: 999px;
  font-size: 22px;
  padding: 3px 16px;
  font-variant-numeric: tabular-nums;
}
.header-slot.is-target .header-slot-label { color: #b8f7c5; border-color: rgba(74, 222, 128, 0.35); }
.header-slot.is-empty .header-slot-label {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(140, 150, 200, 0.5) !important;
  border-color: rgba(140, 150, 200, 0.18);
  box-shadow: none !important;
}

/* Name: gradient pill -> plain white text */
.header-slot-name {
  font-size: 24px; font-weight: 800;
  color: #f1f3ff;
  background: none;
  padding: 0;
  border-radius: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  max-width: 230px;
}
.header-slot.is-empty .header-slot-name {
  background: none !important;
  color: rgba(140, 150, 200, 0.5) !important;
  box-shadow: none !important;
}

/* ---------- Stats: segmented slate bar -> matching glass chips ---------- */
.header-stats {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  gap: 12px;
  margin-top: 16px;
}
.header-stat {
  background: rgba(20, 22, 38, 0.55);
  border: 2px solid rgba(140, 150, 200, 0.18) !important;
  border-radius: 14px;
  padding: 10px 26px;
}
.header-stat-label { font-size: 18px; color: #9b8fb5; }
.header-stat-value { font-size: 40px; }
.header-stat-xp { background: rgba(20, 22, 38, 0.55); }
.header-stat-xp .header-stat-label { color: #9b8fb5; }
.header-stat-xp .header-stat-value {
  color: #dbe7ff;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

/* ---------- Combined (dual-winner) card: gold slab -> glass, ring kept ---------- */
.header-combined-card {
  background: rgba(20, 22, 38, 0.55);
  box-shadow: none;
  border: 2px solid rgba(255, 215, 0, 0.35);
}
.header-combined-name { font-size: 40px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.header-combined-pill {
  color: #dbe7ff;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(140, 150, 200, 0.25);
  border-radius: 999px;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}
.header-combined-pill.target {
  background: rgba(255, 255, 255, 0.05);
  color: #b8f7c5;
  border-color: rgba(74, 222, 128, 0.35);
}
.header-combined-pill.xp {
  background: rgba(255, 255, 255, 0.05);
  color: #ffe9a3;
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: none;
}

/* ---------- URL row ---------- */
.header-url-band {
  font-size: 30px; font-weight: 800;
  letter-spacing: 1px;
  color: #22d3ee; /* fallback if background-clip unsupported */
  background: linear-gradient(90deg, #ff2d95, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.header-grid-cta {
  padding: 12px 28px;
  border: 2px solid rgba(168, 85, 247, 0.55);
  background: rgba(168, 85, 247, 0.12);
  color: #e6defa;
  font-size: 24px; font-weight: 800;
}
.header-streamers-toggle {
  padding: 10px 20px;
  border: 2px solid rgba(140, 150, 200, 0.25);
  background: rgba(20, 22, 38, 0.55);
  font-size: 22px; font-weight: 700;
  color: #cdc3e0;
}
.header-streamers-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

/* ---------- Ad rotation: 5 cards / 25s -> 16 cards / 80s ---------- */
.header-ad-card { animation: header-ad-rotate-16 80s ease-in-out infinite; }
@keyframes header-ad-rotate-16 {
  0%          { opacity: 0; }
  0.7%, 5.6%  { opacity: 1; }
  6.9%, 100%  { opacity: 0; }
}
.header-ad-card[data-ad-index="0"]  { animation-delay: 0s; }
.header-ad-card[data-ad-index="1"]  { animation-delay: 5s; }
.header-ad-card[data-ad-index="2"]  { animation-delay: 10s; }
.header-ad-card[data-ad-index="3"]  { animation-delay: 15s; }
.header-ad-card[data-ad-index="4"]  { animation-delay: 20s; }
.header-ad-card[data-ad-index="5"]  { animation-delay: 25s; }
.header-ad-card[data-ad-index="6"]  { animation-delay: 30s; }
.header-ad-card[data-ad-index="7"]  { animation-delay: 35s; }
.header-ad-card[data-ad-index="8"]  { animation-delay: 40s; }
.header-ad-card[data-ad-index="9"]  { animation-delay: 45s; }
.header-ad-card[data-ad-index="10"] { animation-delay: 50s; }
.header-ad-card[data-ad-index="11"] { animation-delay: 55s; }
.header-ad-card[data-ad-index="12"] { animation-delay: 60s; }
.header-ad-card[data-ad-index="13"] { animation-delay: 65s; }
.header-ad-card[data-ad-index="14"] { animation-delay: 70s; }
.header-ad-card[data-ad-index="15"] { animation-delay: 75s; }