/* =========================
   Modern dark UI for Leaderboard (row/col version)
   ========================= */

:root {
  --bg: #0b0e12;
  --bg-elev: #0f1319; /* base row bg (match client.js BASE_ROW_BG) */
  --bg-soft: #121824;
  --border: #1b2330;
  --text: #e6ebf3;
  --muted: #98a2b3;
  --accent: #7c3aed; /* violet */
  --accent-2: #22d3ee; /* cyan */
  --success: #00dc78;
  --info: #5a96ff;
  --warn: #ffd36a;

  --card-radius: 18px;
  --chip-radius: 10px;
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
}

body {
  background: radial-gradient(1200px 800px at 20% -10%, rgba(124, 58, 237, 0.15), transparent 50%),
    radial-gradient(800px 500px at 110% 0%, rgba(34, 211, 238, 0.1), transparent 40%), var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
}

/* =========================
   Animated Top Gradient Bar
   ========================= */
.top-accent {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent), var(--accent-2));
  background-size: 300% 100%;
  animation: topAccentFlow 6s linear infinite;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.25);
}
.top-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.35), transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}
@keyframes topAccentFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   HERO SECTION
   ========================= */
.app-hero { margin-top: 22px; }

.hero-surface {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--card-radius) + 6px);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  box-shadow: var(--shadow-lg);
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: clamp(18px, 3vw, 28px);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.75) 100%),
    url("../img/sample.jpg") center/cover no-repeat;
  background-blend-mode: overlay;
  transition: filter 0.5s ease, opacity 0.5s ease;
  filter: brightness(var(--hero-brightness, 1));
}

.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(60% 50% at 80% 0%, rgba(34,211,238,0.25), transparent 60%),
    linear-gradient(180deg, rgba(10,14,20,0.0), rgba(10,14,20,0.65));
  filter: blur(40px) hue-rotate(0deg) saturate(115%);
  pointer-events: none;
  animation:
    heroGradientDrift 18s ease-in-out infinite alternate,
    heroHueRotate 40s linear infinite;
  will-change: transform, filter, background-position;
}
@keyframes heroGradientDrift {
  0% { background-position: 20% 10%, 80% 0%, 0% 0%; transform: scale(1); opacity: 0.9; }
  25%{ background-position: 25% 8%, 75% 2%, 0% 0%; transform: scale(1.03); opacity: 1; }
  50%{ background-position: 22% 12%, 78% 3%, 0% 0%; transform: scale(1.05); opacity: 0.95; }
  75%{ background-position: 18% 6%, 85% 1%, 0% 0%; transform: scale(1.02); opacity: 1; }
 100%{ background-position: 20% 10%, 80% 0%, 0% 0%; transform: scale(1); opacity: 0.9; }
}
@keyframes heroHueRotate {
  0%   { filter: blur(40px) hue-rotate(0deg)   saturate(115%); }
  50%  { filter: blur(40px) hue-rotate(180deg) saturate(115%); }
  100% { filter: blur(40px) hue-rotate(360deg) saturate(115%); }
}
.hero-surface:hover .hero-bg { filter: brightness(0.85); }

.noise {
  position: absolute; inset: 0; z-index: 2;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch" /></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>');
  mix-blend-mode: overlay; pointer-events: none;
}

/* BRANDING */
.brand-row{ display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap: wrap; }
.brand-left{ display:flex; gap:14px; align-items:center; }
.brand-mark{
  width:44px; height:44px; border-radius:12px; background:#fff; color:#000;
  display:grid; place-items:center; font-weight:800; letter-spacing:.5px;
}
.brand-meta .brand-sub{
  font-size:.78rem; color: var(--muted); letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.brand-meta .brand-title{ font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight:700; }

.brand-right{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.meta-pill{
  display:flex; align-items:center; gap:8px; background: rgba(255,255,255,.04);
  border: 1px solid var(--border); padding: 10px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.meta-label{ color: var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }
.meta-value{ font-weight:600; }

.hero-bottom{ display:flex; align-items:end; justify-content:space-between; margin-top:18px; gap:12px; flex-wrap: wrap; }
.hero-heading{ font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight:800; text-transform: uppercase; letter-spacing:.04em; }
.hero-note{ color: var(--muted); font-size:.9rem; }

/* =========================
   BOARD CARD
   ========================= */
.board-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.board-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 18px; border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.head-left{ display:flex; align-items:center; gap:10px; }
.head-title{ font-weight:700; letter-spacing:.02em; }
.dot{ width:10px; height:10px; border-radius:20px; display:inline-block; }
.dot-green{ background: var(--success); }

.head-right{ display:flex; gap:14px; flex-wrap: wrap; color: var(--muted); font-size:.9rem; }
.legend{ display:flex; align-items:center; gap:8px; }

/* Legend keys */
.key {
  position: relative;
  width: 18px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 0 transparent;
}
.key.up  { --k1: #00ff88; --k2: #00c874; color: rgba(0, 255, 136, 0.65); }
.key.pb  { --k1: #5a96ff; --k2: #2e68ff; color: rgba(90, 150, 255, 0.65); }
.key.new { --k1: #ffd36a; --k2: #ffbb33; color: rgba(255, 211, 106, 0.7); }
.key::before {
  content: "";
  position: absolute;
  inset: -30% -60%;
  background-image: linear-gradient(90deg, var(--k1), var(--k2), var(--k1));
  background-size: 300% 100%;
  background-position: 0% 50%;
  filter: saturate(125%);
  will-change: background-position;
  animation: keyFlow 4s linear infinite;
}
.key::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 6px currentColor;
  opacity: .35;
  pointer-events: none;
}
@keyframes keyFlow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* =========================
   BOARD ROWS
   ========================= */
.board-row {
  position: relative;
  background-color: var(--bg-elev);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transform-origin: center top;
  will-change: transform, opacity;
  contain: paint;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.board-row > * {
  position: relative;
  z-index: 2;
}

/* highlight layers */
.board-row::before,
.board-row::after {
  transition: opacity 500ms ease;
}

.board-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(200deg, var(--hl1, transparent), var(--hl2, transparent), var(--hl1, transparent));
  background-size: 260% 100%;
  filter: saturate(120%);
}

.board-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: opacity 500ms ease, box-shadow 300ms ease;
}

/* highlight keyframes */
@keyframes hlSweep {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes hlBreathe {
  0% { transform: scaleY(1.0); }
  50% { transform: scaleY(1.5); }
  100% { transform: scaleY(1.0); }
}

/* highlight active */
.board-row.is-highlight::before {
  opacity: 1;
  animation: hlSweep 3.2s ease-in-out infinite, hlBreathe 2.6s ease-in-out infinite;
}
.board-row.is-highlight::after {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 22px 0 var(--hlGlow, rgba(0,0,0,0));
}

/* pause */
.board-row.is-highlight-halt::before,
.board-row.is-highlight-halt::after {
  animation-play-state: paused !important;
}

/* fade */
.board-row.is-highlight-fade::before,
.board-row.is-highlight-fade::after {
  opacity: 0;
}

/* highlight color themes */
.board-row.hl-up {
  --hl1: rgba(0, 255, 136, 0.14);
  --hl2: rgba(0, 200, 116, 0.42);
  --hlGlow: rgba(0, 220, 120, 0.25);
}
.board-row.hl-pb {
  --hl1: rgba(90, 150, 255, 0.16);
  --hl2: rgba(46, 104, 255, 0.44);
  --hlGlow: rgba(90, 150, 255, 0.25);
}
.board-row.hl-new {
  --hl1: rgba(255, 211, 106, 0.16);
  --hl2: rgba(255, 170, 60, 0.44);
  --hlGlow: rgba(255, 195, 90, 0.28);
}

/* =========================
   DIAGONAL SHEEN (F1-style)
   ========================= */
.board-row {
  --sheenColor: rgba(255, 255, 255, 0.85);
  --sheenWidth: 18%;
  --sheenSkew: -14deg;
  --sheenTravel: 90%;
  --sheenFadeMax: 0.55;
  --sheenAngle: 74deg;
}

.hl-sheen {
  position: absolute;
  inset: -20% -30%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateX(-90%) skewX(var(--sheenSkew));
  background: linear-gradient(
    var(--sheenAngle),
    rgba(255,255,255,0) calc(50% - var(--sheenWidth)),
    var(--sheenColor) 50%,
    rgba(255,255,255,0) calc(50% + var(--sheenWidth))
  );
  filter: blur(0.6px) saturate(110%);
  will-change: transform, opacity;
}

.board-row.is-highlight .hl-sheen {
  animation: hlSheenSweep 1.35s ease-out 0.08s both;
}
.board-row.is-highlight-halt .hl-sheen {
  animation-play-state: paused !important;
}
.board-row.is-highlight-fade .hl-sheen {
  transition: opacity 500ms ease;
  opacity: 0;
}

@keyframes hlSheenSweep {
  0%   { opacity: 0; transform: translateX(-90%) skewX(var(--sheenSkew)); }
  10%  { opacity: var(--sheenFadeMax); }
  60%  { opacity: var(--sheenFadeMax); }
  100% { opacity: 0; transform: translateX(var(--sheenTravel)) skewX(var(--sheenSkew)); }
}

/* Tint sheen by highlight kind */
.board-row.hl-up  { --sheenColor: rgba(120, 255, 190, 0.90); }
.board-row.hl-pb  { --sheenColor: rgba(140, 180, 255, 0.95); }
.board-row.hl-new { --sheenColor: rgba(255, 220, 150, 0.95); }

/* =========================
   BADGES
   ========================= */
.badge-rank {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 800;
  background: linear-gradient(180deg, #1a202c, #161b25);
  border: 1px solid var(--border);
}
.badge-rank.gold {
  color: #1b1300;
  background: linear-gradient(180deg, #ffe082, #caa12e);
}
.badge-rank.silver {
  color: #0f1115;
  background: linear-gradient(180deg, #f0f3f9, #aab2bf);
}
.badge-rank.bronze {
  color: #160e08;
  background: linear-gradient(180deg, #f4c49c, #a86b2e);
}

.driver-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #121824, #0f141f);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* FOOTER */
.foot-note {
  color: var(--muted);
}

/* Small screens */
@media (max-width: 576px) {
  .badge-rank {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .top-accent,
  .hero-gradient,
  .key::before,
  .board-row.is-highlight::before {
    animation: none;
  }
}

/* === Auth page polish === */
.auth-max { max-width: 1040px; } /* center the grid, but keep it roomy */

.auth-card{
  /* elevate a touch more and tighten rhythm */
  padding: clamp(22px, 3.2vw, 32px);
  border-radius: calc(var(--card-radius) + 2px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.brand-row { margin-bottom: 10px; }
.auth-title {
  font-size: clamp(1.6rem, 4.2vw, 2.25rem);
  line-height: 1.1;
}
.auth-sub { margin-top: .5rem; }

/* Inputs: match dark theme */
.auth-card .form-label { color: var(--muted); font-weight: 600; }

.auth-card .form-control {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-card .form-control::placeholder { color: #9aa3b2; }
.auth-card .form-control:focus {
  background: rgba(255,255,255,.04);
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
  color: var(--text);
}

/* Password reveal button to match */
.auth-card .input-group .btn {
  border-color: var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-radius: 12px;
}
.auth-card .input-group .btn:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
}

/* Actions row: clean spacing & no collisions */
.auth-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  min-height: 42px;
}
@media (max-width: 420px){
  .auth-actions{ flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Primary CTA: slight gradient + nicer radius */
.btn-primary{
  --bs-btn-bg: linear-gradient(180deg, #3b82f6, #2563eb);
  --bs-btn-border-color: #2b5fd4;
  --bs-btn-hover-bg: linear-gradient(180deg, #4f8fff, #2f6af3);
  --bs-btn-hover-border-color: #326bef;
  --bs-btn-active-bg: linear-gradient(180deg, #3a7bf0, #2159da);
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .8rem 1rem;
  box-shadow: 0 10px 30px rgba(47,106,243,.28);
}

/* Toast: make it float above the card edge cleanly */
.auth-toast{
  bottom: 28px;
  right: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-radius: 12px;
}

/* Brand block: tighten & align */
.brand-mark{
  width: 46px; height: 46px; border-radius: 14px;
}
.brand-meta .brand-sub{
  font-size:.76rem; opacity:.9;
}
.brand-meta .brand-title{
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
}

/* Body background: soften vignette on small screens so it doesn't pull left */
@media (max-width: 768px){
  body{
    background:
      radial-gradient(900px 600px at 25% -10%, rgba(124,58,237,.12), transparent 55%),
      radial-gradient(700px 420px at 110% 0%, rgba(34,211,238,.09), transparent 42%),
      var(--bg);
  }
}


/* LEGAL PAGES */
.legal-container { padding-top: 36px; padding-bottom: 48px; }
.legal-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 3vw, 28px);
}
.legal-title{ font-weight: 800; letter-spacing: .02em; margin-bottom: .5rem; }
.legal-updated{ color: var(--muted); margin-bottom: 1.25rem; }
.legal-card h2{ margin-top: 1.4rem; font-weight: 700; font-size: 1.15rem; }
.legal-card p, .legal-card li{ color: var(--text); }
.legal-card a{ color: var(--info); text-decoration: none; }
.legal-card a:hover{ text-decoration: underline; }


.section-title { font-weight: 800; letter-spacing: .02em; margin-bottom: .4rem; }
.waiver-box{
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

/* Signature pad */
.sigpad{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: var(--card-radius);
  padding: 8px;
}
.sigpad canvas{
  width: 100%;
  height: 160px; /* matches JS scaling */
  display: block;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  cursor: crosshair;
}
.sigpad-controls{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}
/* Toast styling for auth flows */
.auth-toast {
  min-width: 260px;
  max-width: 360px;
  background: rgba(16, 23, 38, 0.96);
  color: #f8fafc;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.auth-toast .toast-inner {
  padding: 0.75rem 0.9rem 0.7rem 0.9rem;
}

.auth-toast .toast-title {
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.auth-toast .toast-message {
  font-size: 0.92rem;
}

.auth-toast .toast-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

/* Error variant – toggled via JS */
.auth-toast.toast-error .toast-icon {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
}

/* Top-right container spacing on small screens */
@media (max-width: 575.98px) {
  .toast-container {
    width: 100%;
    left: 0;
    right: 0;
    padding-inline: 0.75rem !important;
  }
  .auth-toast {
    width: 100%;
    max-width: none;
  }
}

/* Progress bar at bottom of toast */
.auth-toast .toast-progress {
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #22c55e, #a3e635);
  opacity: 0.9;
  transition: width 3.2s linear;
}

/* When error */
.auth-toast.toast-error .toast-progress {
  background: linear-gradient(90deg, #f97373, #facc15);
}

#profileAvatar {
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
}

#profileAvatar[src] {
  opacity: 1;
}


/* ======================================
   FUNKART LEADERBOARD TROPHIES
   ====================================== */

/* Trophy container */
.trophy-wrap {
  position: relative;
  display: inline-block;
  width: 2.4rem;  /* bigger trophy */
  height: 2.4rem;
  line-height: 2.4rem;
}

/* Trophy icon */
.trophy-wrap .bi-trophy-fill {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.65));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Number inside the trophy */
.trophy-wrap .rank-inside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  font-weight: 800;
  font-size: 1.1rem; /* same size as regular rank numbers */
  color: #fff;
  text-shadow:
    0 0 6px rgba(0,0,0,0.9),
    0 0 2px rgba(255,255,255,0.4);
  pointer-events: none;
}

/* Trophy colors with metallic gradients */
.trophy-gold .bi-trophy-fill {
  color: #f9d648;
  background: linear-gradient(180deg, #ffe87a 0%, #f9d648 50%, #e8b800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

.trophy-silver .bi-trophy-fill {
  color: #d4d4d8;
  background: linear-gradient(180deg, #f0f0f0 0%, #bfbfbf 50%, #9a9a9a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(192, 192, 192, 0.7));
}

.trophy-bronze .bi-trophy-fill {
  color: #d08b43;
  background: linear-gradient(180deg, #f4b47e 0%, #d08b43 60%, #a25a2c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.8));
}

/* Subtle pulse glow to draw attention */
@keyframes trophyPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 16px rgba(255,255,255,0.6)); }
}

.trophy-gold .bi-trophy-fill,
.trophy-silver .bi-trophy-fill,
.trophy-bronze .bi-trophy-fill {
  animation: trophyPulse 2.8s ease-in-out infinite;
}

/* Row background highlights for top 3 */
.board-row.rank-1 {
  background: linear-gradient(90deg, rgba(255,215,0,0.1), transparent);
}
.board-row.rank-2 {
  background: linear-gradient(90deg, rgba(192,192,192,0.1), transparent);
}
.board-row.rank-3 {
  background: linear-gradient(90deg, rgba(205,127,50,0.1), transparent);
}


/* ======================================
   FUNKART DASHBOARD POSITION GAMIFICATION
   ====================================== */

.position-wrapper {
  margin-top: 0.5rem;
}

.position-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: radial-gradient(circle at 0% 0%, rgba(124,58,237,0.18), transparent 60%),
              radial-gradient(circle at 100% 0%, rgba(34,211,238,0.16), transparent 55%),
              rgba(12, 16, 25, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
  position: relative;
  overflow: hidden;
}

/* Champion / podium have a stronger glow + subtle shimmer */
.pos-champion {
  background:
    radial-gradient(circle at 0% 0%, rgba(250, 204, 21, 0.22), transparent 65%),
    radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,1), rgba(24,33,65,1));
  border-color: rgba(250, 204, 21, 0.5);
  animation: championGlow 2.4s ease-in-out infinite alternate;
}

.pos-podium {
  background:
    radial-gradient(circle at 0% 0%, rgba(148,163,184,0.2), transparent 65%),
    radial-gradient(circle at 100% 0%, rgba(251, 146, 60, 0.16), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,0.98), rgba(24,32,60,0.98));
  border-color: rgba(148, 163, 184, 0.55);
  animation: podiumGlow 2.8s ease-in-out infinite alternate;
}

.pos-normal {
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.18), transparent 65%),
    radial-gradient(circle at 100% 0%, rgba(52,211,153,0.16), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,0.98), rgba(15,23,42,1));
  border-color: rgba(56, 189, 248, 0.4);
}

/* Trophy sizing on dashboard */
.position-trophy {
  margin-right: 12px;
}
.position-trophy .trophy-wrap,
.position-trophy .bi-trophy-fill {
  font-size: 3rem;
}

/* Text block */
.position-text {
  text-align: left;
}
.position-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.position-rank {
  line-height: 1.1;
}

.position-subline {
  color: var(--muted);
}

/* Big animated rank number */
.position-rank-animated {
  animation: rankPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Orb for non-podium ranks */
.position-orb {
  position: relative;
  width: 92px;
  height: 92px;
}

.position-orb-ring {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.6);
  animation: orbSpin 7s linear infinite;
  opacity: 0.75;
}

.position-orb-core {
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, rgba(56,189,248,0.9), transparent 55%),
              radial-gradient(circle at 70% 100%, rgba(34,197,94,0.9), transparent 55%),
              #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.8);
}

.position-rank-big {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Animations */

@keyframes championGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4),
                0 24px 60px rgba(15, 23, 42, 0.9);
  }
  100% {
    box-shadow: 0 0 25px 4px rgba(250, 204, 21, 0.7),
                0 28px 70px rgba(15, 23, 42, 0.95);
  }
}

@keyframes podiumGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.3),
                0 20px 55px rgba(15, 23, 42, 0.9);
  }
  100% {
    box-shadow: 0 0 18px 3px rgba(148, 163, 184, 0.6),
                0 24px 65px rgba(15, 23, 42, 0.95);
  }
}

@keyframes rankPopIn {
  0% {
    transform: translateY(12px) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: translateY(-4px) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes orbSpin {
  0% {
    transform: rotate(0deg);
    border-color: rgba(56, 189, 248, 0.6);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.7);
  }
  100% {
    transform: rotate(360deg);
    border-color: rgba(56, 189, 248, 0.6);
  }
}


/* Trophy wrap - centered icon */
.trophy-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}

/* Large trophy icon */
.trophy-icon {
  font-size: 4rem;
  line-height: 1;
}

/* Glow effects per rank */
.trophy-gold .trophy-icon {
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9));
}

.trophy-silver .trophy-icon {
  filter: drop-shadow(0 0 10px rgba(192, 192, 192, 0.8));
}

.trophy-bronze .trophy-icon {
  filter: drop-shadow(0 0 10px rgba(205, 127, 50, 0.8));
}

/* Non-podium */
.position-big-number {
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.35);
}


/* ======================================
   Rank gamification / animations
   ====================================== */

/* Position card base already exists; ensure it's relative */
.position-card {
  position: relative;
  overflow: hidden;
}

/* Confetti for champion (rank 1) */
.pos-champion .confetti-layer {
  pointer-events: none;
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(239, 68, 68, 0.9) 0, transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.9) 0, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(34, 197, 94, 0.9) 0, transparent 55%),
    radial-gradient(circle at 90% 60%, rgba(234, 179, 8, 0.9) 0, transparent 55%);
  opacity: 0.0;
  mix-blend-mode: screen;
  animation: confettiBurst 2.4s ease-out forwards;
}

@keyframes confettiBurst {
  0% {
    transform: scale(0.85) translateY(18px);
    opacity: 0;
  }
  30% {
    transform: scale(1) translateY(0);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.05) translateY(-12px);
    opacity: 0.0;
  }
}

/* Champion pulsing glow */
.pos-champion {
  animation: championPulse 2.4s ease-in-out infinite alternate;
}

@keyframes championPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.35),
                0 18px 50px rgba(15, 23, 42, 0.85);
  }
  100% {
    box-shadow: 0 0 30px 6px rgba(250, 204, 21, 0.75),
                0 22px 70px rgba(15, 23, 42, 0.9);
  }
}

/* Rank 2 – wobble animation on trophy */
.wobble-trophy .trophy-icon {
  animation: wobbleTrophy 2.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes wobbleTrophy {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  10% { transform: rotate(-6deg) translateY(-3px); }
  20% { transform: rotate(4deg) translateY(-2px); }
  30% { transform: rotate(-3deg) translateY(-1px); }
  40% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(0deg) translateY(0); }
}

/* Rank 3 – bounce-in animation */
.bounce-trophy .trophy-icon {
  animation: bounceInTrophy 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bounceInTrophy {
  0% {
    transform: scale(0.4) translateY(18px);
    opacity: 0;
  }
  60% {
    transform: scale(1.05) translateY(-4px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Trophy visuals (reuse your earlier layout) */
.trophy-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
}

.trophy-icon {
  font-size: 3.5rem;
  line-height: 1;
}

.trophy-gold .trophy-icon {
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.9));
}
.trophy-silver .trophy-icon {
  filter: drop-shadow(0 0 10px rgba(156, 163, 175, 0.85));
}
.trophy-bronze .trophy-icon {
  filter: drop-shadow(0 0 10px rgba(217, 119, 6, 0.85));
}

/* Achievement badges */
.badge-achievement {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.35rem 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge-achievement-gold {
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.6);
}
.badge-achievement-silver {
  background: rgba(148, 163, 184, 0.12);
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.6);
}
.badge-achievement-bronze {
  background: rgba(217, 119, 6, 0.12);
  color: #fdba74;
  border-color: rgba(217, 119, 6, 0.6);
}
.badge-achievement-xp {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.7);
}


/* Highlight for the logged-in driver's row on leaderboard_latest */
.table-current-user {
  position: relative;
  background: linear-gradient(
      90deg,
      rgba(56, 189, 248, 0.14),
      rgba(34, 197, 94, 0.08),
      transparent 80%
  ) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
}

.table-current-user td {
  border-top-color: rgba(148, 163, 184, 0.35) !important;
}