/*
 * TrendingPunjabi - Ranking Polish (shared premium ranking design system)
 * Path: /otherLinks/mainFiles/css/ranking-polish.css
 * Load LAST, AFTER rankings-shared.css, in header.php with ?v=1
 *
 * RULES OF THIS LAYER:
 *  - Additive / override-only. Renames or deletes nothing.
 *  - Scoped under ranking containers only (never navbar/footer/home).
 *  - Built on --tp-* tokens so [data-theme="light"] flips automatically.
 *  - Re-asserts prefers-reduced-motion + hover:none + print guards (loads last).
 *  - Reserves !important ONLY to beat existing !important rules / page-inline <style>.
 *  - Hardened per adversarial review (medal logic gated to interleaved tables,
 *    robust rank cell, base card borders, print guard).
 */

/* =====================================================================
   0) TOKENS — one medal set, mapped to canonical --tp-* gold
   ===================================================================== */
:root {
  /* Solid medal colors (badges/text) */
  --tp-medal-1: #fbbf24;   /* gold   */
  --tp-medal-2: #c0c0c0;   /* silver */
  --tp-medal-3: #cd7f32;   /* bronze */
  /* Gradient medals reuse existing tokens with safe fallbacks */
  --tp-medal-1-grad: var(--tp-gold,   linear-gradient(135deg,#fbbf24,#f59e0b));
  --tp-medal-2-grad: var(--tp-silver, linear-gradient(135deg,#9ca3af,#6b7280));
  --tp-medal-3-grad: var(--tp-bronze, linear-gradient(135deg,#d97706,#b45309));
  --tp-medal-1-glow: rgba(251,191,36,0.40);
  --tp-medal-2-glow: rgba(192,192,192,0.32);
  --tp-medal-3-glow: rgba(205,127,50,0.34);
  /* Shared hero wash (gold-forward, theme-safe) */
  --tp-hero-wash: linear-gradient(135deg,
      var(--tp-accent-soft, rgba(232,184,74,0.15)) 0%,
      transparent 55%),
      radial-gradient(120% 140% at 85% -20%,
      var(--tp-accent-glow, rgba(232,184,74,0.12)) 0%, transparent 60%);
}

/* PATCH 1: only the bare [data-theme="light"] selector is valid
   (data-theme lives ON :root, so it can never be a descendant of itself). */
[data-theme="light"] {
  --tp-medal-1-glow: rgba(184,134,11,0.22);
  --tp-medal-2-glow: rgba(107,114,128,0.20);
  --tp-medal-3-glow: rgba(180,83,9,0.20);
}

/* NOTE: we deliberately DON'T remap --accent here. A `--accent: var(--accent,…)`
   self-reference is a CSS cyclic reference that resolves to EMPTY, which would
   nuke --accent across the whole subtree (breaking the existing gradient title
   and active category pills that read var(--accent)). Each ranking page already
   sets its own --accent inline; our polish drives gold from --tp-* tokens
   directly, so no remap is needed. */

/* =====================================================================
   1) ENTRANCE / HOVER MOTION primitives (guarded at the end)
   ===================================================================== */
@keyframes tpRankIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tpHeroGlow {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 0.9; }
}

/* =====================================================================
   2) SHARED HERO BAND
   Decorates existing .page-header (flagship/poll/most-viewed),
   plus opt-in .tp-hero, .hub-header, .hof-header, .hero (instaStats).
   ===================================================================== */
.ranking-page > .page-header,
.tp-hero,
.polls-hub .hub-header,
.movies-page .page-header,
.leaderboard-page .leaderboard-header.tp-hero {
  position: relative;
  background: var(--tp-bg-card, #161b22);
  background-image: var(--tp-hero-wash);
  border: 1px solid var(--tp-accent-soft, rgba(232,184,74,0.18));
  border-radius: var(--tp-radius-xl, 20px);
  padding: 26px 20px 22px;
  margin-bottom: 22px;
  overflow: hidden;
}

/* Soft animated top glow line */
.ranking-page > .page-header::before,
.tp-hero::before,
.polls-hub .hub-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--tp-medal-1-grad);
  opacity: 0.7;
  animation: tpHeroGlow 6s ease-in-out infinite;
}

/* NOTE: we intentionally do NOT override the title color/gradient. The existing
   `.page-header h1` already gradient-clips from var(--accent)/var(--accent-light)
   (each page's flavor). Overriding it here regressed the title to flat white when
   combined with the cyclic-var bug above; the hero BAND is the upgrade, the title
   stays as the page designed it. */

/* Eyebrow + inline hero stat chips (optional markup) */
.tp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin-bottom: 10px;
  border-radius: var(--tp-radius-full, 9999px);
  background: var(--tp-accent-soft, rgba(232,184,74,0.15));
  border: 1px solid var(--tp-accent-soft, rgba(232,184,74,0.25));
  color: var(--tp-accent, #e8b84a);
  font-size: var(--tp-font-size-xs, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Upgrade the existing .stats-bar values into chips visually */
.ranking-page .stats-bar,
.movies-page .stats-bar {
  gap: 14px;
}
.ranking-page .stat-value,
.movies-page .stat-value {
  font-variant-numeric: tabular-nums;
}

/* FIX: the absolutely-positioned .vote-counter ("Votes this session: N") sat on
   top of the centered .battle-title ("Who is Better?") on narrow screens. Flow it
   as its own right-aligned line above the matchup so they never collide. The JS
   .animate pulse (transform/opacity) is unaffected by static positioning. */
.ranking-page .battle-section .vote-counter {
  position: static;
  top: auto; right: auto;
  display: block;
  text-align: right;
  margin: 0 2px 6px 0;
}

/* =====================================================================
   3) RANK BADGE PRIMITIVE + leaderboard rank-cell upgrade
   ===================================================================== */
/* Standalone primitive for new markup (podium, instaStats) */
.tp-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--tp-text-secondary, #8b949e);
  background: var(--tp-bg-elevated, #1c2128);
  border: 1px solid var(--tp-border, #30363d);
  line-height: 1;
}
.tp-rank-badge.rank-1, .tp-rank-badge.is-1 { color:#3a2c00; background: var(--tp-medal-1-grad); border-color: transparent; box-shadow: 0 0 10px var(--tp-medal-1-glow); }
.tp-rank-badge.rank-2, .tp-rank-badge.is-2 { color:#1c2128; background: var(--tp-medal-2-grad); border-color: transparent; box-shadow: 0 0 10px var(--tp-medal-2-glow); }
.tp-rank-badge.rank-3, .tp-rank-badge.is-3 { color:#fff;    background: var(--tp-medal-3-grad); border-color: transparent; box-shadow: 0 0 10px var(--tp-medal-3-glow); }

/* In-place upgrade of the flagship/poll leaderboard rank cell.
   The cell currently renders "#N" text with .rank-cell .rank-1/2/3.
   We turn the inner number into a centered medal chip without markup change.
   PATCH 4: font-size:0 collapses the transparent "#N" so it cannot reflow;
   the ::after restores its own font-size. */
.ranking-page .leaderboard-table .rank-cell {
  width: 44px;
  text-align: center;
  color: var(--tp-text-secondary, #8b949e);
}
.ranking-page .leaderboard-table .rank-cell.rank-1,
.ranking-page .leaderboard-table .rank-cell.rank-2,
.ranking-page .leaderboard-table .rank-cell.rank-3 {
  position: relative;
  font-size: 0;
  color: transparent; /* hide the raw "#N" glyph; medal disc shows the number */
}
.ranking-page .leaderboard-table .rank-cell.rank-1::after,
.ranking-page .leaderboard-table .rank-cell.rank-2::after,
.ranking-page .leaderboard-table .rank-cell.rank-3::after {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: var(--tp-radius-full, 9999px);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
.ranking-page .leaderboard-table .rank-cell.rank-1::after { content: "1"; color:#3a2c00; background: var(--tp-medal-1-grad); box-shadow: 0 0 10px var(--tp-medal-1-glow); }
.ranking-page .leaderboard-table .rank-cell.rank-2::after { content: "2"; color:#1c2128; background: var(--tp-medal-2-grad); box-shadow: 0 0 10px var(--tp-medal-2-glow); }
.ranking-page .leaderboard-table .rank-cell.rank-3::after { content: "3"; color:#fff;    background: var(--tp-medal-3-grad); box-shadow: 0 0 10px var(--tp-medal-3-glow); }

/* Gold/silver/bronze left accent + tint on top-3 rows */
.ranking-page .leaderboard-table tbody tr:has(.rank-1) { box-shadow: inset 3px 0 0 0 var(--tp-medal-1); background: linear-gradient(90deg, var(--tp-accent-soft, rgba(232,184,74,0.10)) 0%, transparent 45%); }
.ranking-page .leaderboard-table tbody tr:has(.rank-2) { box-shadow: inset 3px 0 0 0 var(--tp-medal-2); }
.ranking-page .leaderboard-table tbody tr:has(.rank-3) { box-shadow: inset 3px 0 0 0 var(--tp-medal-3); }

/* Subtle ring on the #1 row thumbnail */
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .singer-thumb,
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .person-thumb,
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .song-thumb,
.ranking-page .leaderboard-table tbody tr:has(.rank-1) .movie-thumb {
  outline: 2px solid var(--tp-medal-1);
  outline-offset: 1px;
}

/* =====================================================================
   4) OPTIONAL PODIUM (presentational; new markup)
   ===================================================================== */
.tp-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 10px;
  margin: 0 0 22px;
}
.tp-podium-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 10px 14px;
  text-decoration: none;
  background: var(--tp-bg-card, #161b22);
  border: 1px solid var(--tp-border, #30363d);
  border-radius: var(--tp-radius-lg, 14px);
  color: var(--tp-text-primary, #e6edf3);
  transition: transform var(--tp-transition, 0.2s ease), box-shadow var(--tp-transition, 0.2s ease);
}
.tp-podium-slot.is-1 { order: 2; transform: translateY(-10px); border-color: color-mix(in srgb, var(--tp-medal-1) 55%, var(--tp-border)); box-shadow: 0 8px 28px var(--tp-medal-1-glow); }
.tp-podium-slot.is-2 { order: 1; }
.tp-podium-slot.is-3 { order: 3; }
.tp-podium-slot .tp-podium-img,
.tp-podium-slot img {
  width: 64px; height: 64px; border-radius: var(--tp-radius-full, 9999px);
  object-fit: cover; background: var(--tp-bg-elevated, #1c2128);
}
.tp-podium-slot.is-1 .tp-podium-img,
.tp-podium-slot.is-1 img { width: 78px; height: 78px; outline: 3px solid var(--tp-medal-1); outline-offset: 2px; }
.tp-podium-slot.is-2 img { outline: 3px solid var(--tp-medal-2); outline-offset: 2px; }
.tp-podium-slot.is-3 img { outline: 3px solid var(--tp-medal-3); outline-offset: 2px; }
.tp-podium-name { font-size: 0.82rem; font-weight: 700; line-height: 1.25; }
.tp-podium .tp-rank-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }

/* =====================================================================
   5) STAT-CHIP FAMILY — canonical + gentle alignment of existing chips
   ===================================================================== */
.tp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--tp-radius-full, 9999px);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  background: var(--tp-bg-elevated, #1c2128);
  border: 1px solid var(--tp-border, #30363d);
  color: var(--tp-text-secondary, #8b949e);
  white-space: nowrap;
}
.tp-chip--gold   { background: var(--tp-accent-soft, rgba(232,184,74,0.15)); border-color: transparent; color: var(--tp-accent, #e8b84a); }
.tp-chip--views  { color: var(--tp-color-views,  #4ecdc4); }
.tp-chip--rating { color: var(--tp-color-rating, #ffc107); }
.tp-chip--likes  { color: var(--tp-color-likes,  #7ee787); }
.tp-chip--win    { color: var(--tp-success, #3fb950); }
.tp-chip--loss   { color: var(--tp-danger,  #f85149); }

/* Gently align existing chips to one shape/typography (no color hijack) */
.ranking-page .points-badge,
.ranking-page .elo-badge,
.ranking-page .stat-badge,
.movies-page .movie-rating,
.movies-page .fan-pts,
.leaderboard-page .song-rating {
  border-radius: var(--tp-radius-full, 9999px) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.ranking-page .record-cell .w,
.ranking-page .record-cell .l,
.movies-page .movie-fan-rank .w,
.movies-page .movie-fan-rank .l {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   6) LIST ROWS & CARDS — one surface + one hover idiom
   PATCH 5: base border so the gold hover border always has width/style.
   ===================================================================== */
.leaderboard-page .song-item,
.movies-page .movie-card,
.celeb-list .celeb-item,
.singers-grid .singer-card,
.tl-wrap .tl-item,
.polls-hub .poll-card,
.tl-dir .tl-dir-card {
  border: 1px solid var(--tp-border, #30363d);
  transition: transform var(--tp-transition, 0.2s ease),
              box-shadow var(--tp-transition, 0.2s ease),
              border-color var(--tp-transition, 0.2s ease);
}
.leaderboard-page .song-item:hover,
.movies-page .movie-card:hover,
.celeb-list .celeb-item:hover,
.singers-grid .singer-card:hover,
.tl-wrap .tl-item:hover,
.polls-hub .poll-card:hover,
.tl-dir .tl-dir-card:hover {
  transform: translateY(-3px);
  border-color: var(--tp-accent, #e8b84a);
  box-shadow: 0 10px 26px var(--tp-accent-glow, rgba(232,184,74,0.12));
}

/* Normalize the leaderboard (list) page bare rank numeral to a medal badge.
   leaderboards.php uses .song-rank.gold/.silver/.bronze (text only). */
.leaderboard-page .song-rank.gold,
.leaderboard-page .song-rank.silver,
.leaderboard-page .song-rank.bronze {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.leaderboard-page .song-rank.gold   { color:#3a2c00; background: var(--tp-medal-1-grad); box-shadow: 0 0 10px var(--tp-medal-1-glow); }
.leaderboard-page .song-rank.silver { color:#1c2128; background: var(--tp-medal-2-grad); box-shadow: 0 0 10px var(--tp-medal-2-glow); }
.leaderboard-page .song-rank.bronze { color:#fff;    background: var(--tp-medal-3-grad); box-shadow: 0 0 10px var(--tp-medal-3-glow); }

/* top-lists canonical .num.gold/.silver/.bronze gets a matching left accent */
.tl-wrap .tl-item:has(.num.gold)   { box-shadow: inset 3px 0 0 0 var(--tp-medal-1); }
.tl-wrap .tl-item:has(.num.silver) { box-shadow: inset 3px 0 0 0 var(--tp-medal-2); }
.tl-wrap .tl-item:has(.num.bronze) { box-shadow: inset 3px 0 0 0 var(--tp-medal-3); }

/* instaStats: normalize .singer-rank text to a badge for top-3 */
.singers-grid .singer-card.top-1 .singer-rank,
.singers-grid .singer-card.top-2 .singer-rank,
.singers-grid .singer-card.top-3 .singer-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.singers-grid .singer-card.top-1 .singer-rank { color:#3a2c00; background: var(--tp-medal-1-grad); }
.singers-grid .singer-card.top-2 .singer-rank { color:#1c2128; background: var(--tp-medal-2-grad); }
.singers-grid .singer-card.top-3 .singer-rank { color:#fff;    background: var(--tp-medal-3-grad); }

.celeb-list .rank.rank-1 { background: var(--tp-medal-1-grad) !important; color:#3a2c00 !important; }
.celeb-list .rank.rank-2 { background: var(--tp-medal-2-grad) !important; color:#1c2128 !important; }
.celeb-list .rank.rank-3 { background: var(--tp-medal-3-grad) !important; color:#fff !important; }

/* =====================================================================
   7) HALL OF FAME alignment
   PATCH 6: HOF sub-pages set .stats-item-rank via page-inline <style>, which
   beats external on source order — so force the top-3 medal discs with
   !important (external !important still beats normal inline-<style> rules).
   ===================================================================== */
.hof-page .stats-item-rank { font-variant-numeric: tabular-nums; }
.hof-page .stats-grid .stats-item:nth-child(1) .stats-item-rank,
.hof-page .stats-grid .stats-item:nth-child(2) .stats-item-rank,
.hof-page .stats-grid .stats-item:nth-child(3) .stats-item-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--tp-radius-full, 9999px);
  font-weight: 800;
}
.hof-page .stats-grid .stats-item:nth-child(1) .stats-item-rank { background: var(--tp-medal-1-grad) !important; color:#3a2c00 !important; }
.hof-page .stats-grid .stats-item:nth-child(2) .stats-item-rank { background: var(--tp-medal-2-grad) !important; color:#1c2128 !important; }
.hof-page .stats-grid .stats-item:nth-child(3) .stats-item-rank { background: var(--tp-medal-3-grad) !important; color:#fff !important; }

/* Champion cards / podium get a gold #1 thread */
.hof-page .hof-champion.first,
.hof-page .hof-category-card:first-child {
  border-color: color-mix(in srgb, var(--tp-medal-1) 50%, var(--tp-border, #30363d));
  box-shadow: 0 8px 26px var(--tp-medal-1-glow);
}

/* Light-theme safety for HOF sub-pages that hardcode dark surfaces */
[data-theme="light"] .hof-page .stats-item { background: var(--tp-bg-card, #f6f8fa); }
[data-theme="light"] .hof-page .stats-item-name,
[data-theme="light"] .hof-page .monthly-card-name { color: var(--tp-text-primary, #1f2328); }
[data-theme="light"] .hof-page .calendar-day { color: var(--tp-text-primary, #1f2328); }

/* =====================================================================
   8) DATATABLES (#mytable) — additive premium polish
   PATCH 2+3 (refined): the iframe-interleaved nth-child(1/3/5)=top-3 logic is
   ONLY valid for tableprint.php song tables. Rather than a per-page class, we
   auto-detect interleaving with :has(tr.iframerow) — so 3-column tables that
   have NO iframe rows (e.g. Roadies) are never mis-medaled, with zero markup
   edits. Left medal bar is desktop-only to avoid mobile grid-card clipping.
   ===================================================================== */
.tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(1):not(.iframerow) td:first-child { color: var(--tp-medal-1) !important; font-weight: 800 !important; }
.tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(3):not(.iframerow) td:first-child { color: var(--tp-medal-2) !important; font-weight: 800 !important; }
.tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(5):not(.iframerow) td:first-child { color: var(--tp-medal-3) !important; font-weight: 800 !important; }
@media (min-width: 768px) {
  .tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(1):not(.iframerow) { box-shadow: inset 3px 0 0 0 var(--tp-medal-1); }
  .tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(3):not(.iframerow) { box-shadow: inset 3px 0 0 0 var(--tp-medal-2); }
  .tp-table-wrap:has(tr.iframerow) #mytable tbody tr:nth-child(5):not(.iframerow) { box-shadow: inset 3px 0 0 0 var(--tp-medal-3); }
}
/* Tabular nums on numeric columns for clean alignment (safe on any column count) */
.tp-table-wrap #mytable td:first-child,
.tp-table-wrap #mytable td:nth-child(4),
.tp-table-wrap #mytable td:nth-child(5),
.tp-table-wrap #mytable td:nth-child(6) {
  font-variant-numeric: tabular-nums !important;
}

/* =====================================================================
   9) ENTRANCE MOTION (staggered, capped) — applied broadly, guarded below
   ===================================================================== */
.ranking-page .leaderboard-table tbody tr,
.leaderboard-page .song-item,
.movies-page .movie-card,
.celeb-list .celeb-item,
.singers-grid .singer-card,
.tl-wrap .tl-item,
.tl-dir .tl-dir-card,
.polls-hub .poll-card,
.hof-page .stats-item,
.hof-page .hof-category-card,
.hof-page .monthly-card {
  animation: tpRankIn 0.45s ease both;
}
/* Cap stagger to the first rows to avoid long delays on big tables/grids */
.ranking-page .leaderboard-table tbody tr:nth-child(1)  { animation-delay: .02s; }
.ranking-page .leaderboard-table tbody tr:nth-child(2)  { animation-delay: .05s; }
.ranking-page .leaderboard-table tbody tr:nth-child(3)  { animation-delay: .08s; }
.ranking-page .leaderboard-table tbody tr:nth-child(4)  { animation-delay: .11s; }
.ranking-page .leaderboard-table tbody tr:nth-child(5)  { animation-delay: .14s; }
.ranking-page .leaderboard-table tbody tr:nth-child(n+6){ animation-delay: .16s; }

.movies-page .movie-card:nth-child(1),
.celeb-list .celeb-item:nth-child(1),
.singers-grid .singer-card:nth-child(1),
.tl-dir .tl-dir-card:nth-child(1),
.tl-wrap .tl-item:nth-child(1) { animation-delay: .02s; }
.movies-page .movie-card:nth-child(2),
.celeb-list .celeb-item:nth-child(2),
.singers-grid .singer-card:nth-child(2),
.tl-dir .tl-dir-card:nth-child(2),
.tl-wrap .tl-item:nth-child(2) { animation-delay: .05s; }
.movies-page .movie-card:nth-child(3),
.celeb-list .celeb-item:nth-child(3),
.singers-grid .singer-card:nth-child(3),
.tl-dir .tl-dir-card:nth-child(3),
.tl-wrap .tl-item:nth-child(3) { animation-delay: .08s; }
.movies-page .movie-card:nth-child(n+4),
.celeb-list .celeb-item:nth-child(n+4),
.singers-grid .singer-card:nth-child(n+4),
.tl-dir .tl-dir-card:nth-child(n+4),
.tl-wrap .tl-item:nth-child(n+4) { animation-delay: .10s; }

/* =====================================================================
   10) LIGHT-THEME PATCHES for the new hero / surfaces
   ===================================================================== */
[data-theme="light"] .ranking-page > .page-header,
[data-theme="light"] .tp-hero,
[data-theme="light"] .polls-hub .hub-header,
[data-theme="light"] .movies-page .page-header {
  background: var(--tp-bg-card, #f6f8fa);
  background-image: var(--tp-hero-wash);
  border-color: var(--tp-accent-soft, rgba(184,134,11,0.18));
}
[data-theme="light"] .tp-podium-slot,
[data-theme="light"] .tp-chip,
[data-theme="light"] .tp-rank-badge {
  background: var(--tp-bg-card, #f6f8fa);
  border-color: var(--tp-border, #d1d9e0);
}

/* =====================================================================
   11) GUARDS — re-asserted because this file loads LAST
   ===================================================================== */
@media (hover: none) {
  .leaderboard-page .song-item:hover,
  .movies-page .movie-card:hover,
  .celeb-list .celeb-item:hover,
  .singers-grid .singer-card:hover,
  .tl-wrap .tl-item:hover,
  .polls-hub .poll-card:hover,
  .tl-dir .tl-dir-card:hover,
  .tp-podium-slot:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-page > .page-header::before,
  .tp-hero::before,
  .polls-hub .hub-header::before { animation: none !important; }

  .ranking-page .leaderboard-table tbody tr,
  .leaderboard-page .song-item,
  .movies-page .movie-card,
  .celeb-list .celeb-item,
  .singers-grid .singer-card,
  .tl-wrap .tl-item,
  .tl-dir .tl-dir-card,
  .polls-hub .poll-card,
  .hof-page .stats-item,
  .hof-page .hof-category-card,
  .hof-page .monthly-card,
  .tp-podium-slot {
    animation: none !important;
    transition: none !important;
  }
  .tp-podium-slot.is-1 { transform: none; }
  .leaderboard-page .song-item:hover,
  .movies-page .movie-card:hover,
  .celeb-list .celeb-item:hover,
  .singers-grid .singer-card:hover,
  .tl-wrap .tl-item:hover,
  .polls-hub .poll-card:hover,
  .tl-dir .tl-dir-card:hover,
  .tp-podium-slot:hover {
    transform: none !important;
  }
}

/* PATCH 7: print guard so opacity:0 entrance never blanks content */
@media print {
  .ranking-page .leaderboard-table tbody tr,
  .leaderboard-page .song-item,
  .movies-page .movie-card,
  .celeb-list .celeb-item,
  .singers-grid .singer-card,
  .tl-wrap .tl-item,
  .tl-dir .tl-dir-card,
  .polls-hub .poll-card,
  .hof-page .stats-item,
  .hof-page .hof-category-card,
  .hof-page .monthly-card {
    animation: none !important;
    opacity: 1 !important;
  }
}