/* ============================================================
   Leaderboard Hero PRO - Premium card with gradient border
   Theme-aware, works in light/dark. Respects prefers-reduced-motion.
   Extends leaderboard-hero.css - apply class "pro" to .leaderboardHero
   ============================================================ */

.leaderboardHero.pro {
  --lh-pro-surface: var(--gsp-bg-card, #fff);
  --lh-pro-border: rgba(249, 115, 22, 0.35);
  --lh-pro-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --lh-pro-glow: rgba(249, 115, 22, 0.4);
}

/* Premium card base - theme-aware, warm accent tint */
.leaderboardHero.pro {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gsp-bg-card, #fff) 98%, rgba(249, 115, 22, 0.04)) 0%,
    var(--gsp-bg-card, #fff) 100%
  );
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06),
              0 0 0 1px rgba(249, 115, 22, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dark theme adjustment */
[data-theme="dark"] .leaderboardHero.pro,
.gsp-dashboard.dark .leaderboardHero.pro,
html.dark .leaderboardHero.pro {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gsp-bg-card, #1f2937) 92%, rgba(249, 115, 22, 0.08)) 0%,
    var(--gsp-bg-card, #1f2937) 100%
  );
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(249, 115, 22, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Card frame - simple border, no mask tricks */
.leaderboardHero.pro {
  position: relative;
  overflow: hidden;
  border-radius: var(--gsp-radius-xl, 18px);
  border: 2px solid color-mix(in srgb, var(--gsp-primary, #f97316) 40%, transparent);
}

/* Subtle inner highlight at top */
.leaderboardHero.pro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--gsp-radius-xl, 18px);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 30%
  );
}

[data-theme="dark"] .leaderboardHero.pro::after,
.gsp-dashboard.dark .leaderboardHero.pro::after,
html.dark .leaderboardHero.pro::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 25%
  );
}

/* Ensure content above pseudo layers */
.leaderboardHero.pro .heroHeader,
.leaderboardHero.pro .top3Container,
.leaderboardHero.pro .viewFullBtn {
  position: relative;
  z-index: 2;
}

/* Micro-interaction: hero card hover lift (desktop) */
@media (min-width: 640px) {
  .leaderboardHero.pro:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 640px) {
  .leaderboardHero.pro:hover {
    transform: none;
  }
}

/* Mobile tap: subtle press */
.leaderboardHero.pro:active {
  transform: scale(0.998);
}

@media (min-width: 640px) {
  .leaderboardHero.pro:active:hover {
    transform: translateY(-1px) scale(0.999);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 640px) {
  .leaderboardHero.pro:active:hover {
    transform: scale(0.999);
  }
}

/* #1 avatar: clean single border, subtle glow - no double-ring */
.leaderboardHero.pro .rank--1 .avatarWrap {
  border: 3px solid color-mix(in srgb, var(--lh-primary) 50%, var(--gsp-bg-card, #fff));
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .leaderboardHero.pro .rank--1 .avatarWrap {
    animation: none;
  }
}

.leaderboardHero.pro .rank--1 .avatarWrap {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 640px) {
  .leaderboardHero.pro:hover .rank--1 .avatarWrap {
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);
  }
}

/* Rank cards: smooth transitions */
.leaderboardHero.pro .rank {
  transition: transform 0.2s ease;
}

/* View full button: subtle glass touch */
.leaderboardHero.pro .viewFullBtn {
  background: rgba(249, 115, 22, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.leaderboardHero.pro .viewFullBtn:hover {
  background: rgba(249, 115, 22, 0.18);
}

.leaderboardHero.pro .viewFullBtn:active {
  transform: scale(0.98);
}