/* ══════════════════════════════════════════════════════════════
   SpinChain — Leaderboard Screen Styles
   Podium · Ranked list · VIP variant · Tab transitions
   Depends on: tokens.css, components.css
   ══════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ROOT LAYOUT
   ════════════════════════════════════════════════════════════ */

.lb-root {
  display: flex;
  flex-direction: column;
  padding: var(--s-4) var(--s-4) var(--s-8);
  max-width: var(--maxw);
  margin-inline: auto;
  gap: 0;
}


/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */

.lb-header {
  text-align: center;
  padding: var(--s-3) 0 var(--s-4);
}

.lb-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-1);
  /* Gold gradient text */
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 200, 80, 0.35));
}

/* VIP variant: violet title */
.lb-root[data-board="vip"] .lb-title {
  background: var(--grad-violet);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.4));
}

.lb-subtitle {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity var(--t-fast) var(--ease-out);
}


/* ════════════════════════════════════════════════════════════
   SEGMENTED CONTROL WRAPPER
   ════════════════════════════════════════════════════════════ */

.lb-seg-wrap {
  padding: 0 0 var(--s-5);
}

.lb-seg {
  /* Inherits .seg base styles from components.css */
}

/* VIP tab active state override → violet accent */
.lb-root[data-board="vip"] .lb-seg-btn.active {
  background: var(--grad-violet);
  color: var(--text-1);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow:
    var(--glow-violet),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}


/* ════════════════════════════════════════════════════════════
   BOARD TRANSITION
   ════════════════════════════════════════════════════════════ */

.lb-board {
  transition: opacity var(--t-fast) var(--ease-out);
}

.lb-board--exit {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.15s var(--ease-out),
    transform 0.15s var(--ease-out);
}

.lb-board--enter {
  animation: lbBoardIn 0.28s var(--ease-out) both;
}

@keyframes lbBoardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ════════════════════════════════════════════════════════════
   PODIUM — 3-pillar structure
   ════════════════════════════════════════════════════════════ */

.lb-podium {
  display: flex;
  align-items: flex-end;          /* pillars grow upward from baseline */
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) 0 0;
  position: relative;
  /* Ambient glow under the podium */
  filter: drop-shadow(0 12px 32px rgba(255, 200, 80, 0.08));
}

/* A soft radial halo centered on the #1 slot */
.lb-podium::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 80, 0.14) 0%,
    rgba(255, 200, 80, 0.04) 55%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

.lb-podium--vip::before {
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.18) 0%,
    rgba(139, 92, 246, 0.05) 55%,
    transparent 75%
  );
}

/* ── Shared slot layout (avatar + name + pillar stacked vertically) ── */
.lb-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 110px;
  position: relative;
  z-index: 1;
}

.lb-podium-slot--empty {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Crown (only #1) ── */
.lb-podium-crown {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
  animation: crownFloat 3s var(--ease-out) infinite alternate;
  filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.7));
}

@keyframes crownFloat {
  from { transform: translateY(0px) rotate(-4deg); }
  to   { transform: translateY(-4px) rotate(4deg); }
}

.lb-podium--vip .lb-podium-crown {
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.9));
  animation: crownFloatVip 3s var(--ease-out) infinite alternate;
}

@keyframes crownFloatVip {
  from { transform: translateY(0px) scale(1); }
  to   { transform: translateY(-5px) scale(1.1); }
}


/* ── Avatar wrapper (holds avatar + sparkle) ── */
.lb-podium-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-2);
}

/* Sparkle particles around #1 avatar */
.lb-podium-sparkle {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}

.lb-podium-sparkle span {
  position: absolute;
  font-size: 10px;
  color: var(--gold-1);
  opacity: 0;
  animation: sparkle 2.4s var(--ease-spring) infinite;
  filter: drop-shadow(0 0 4px rgba(255, 220, 80, 0.9));
}

.lb-podium-sparkle span:nth-child(1) {
  top: 0; left: 50%; transform: translateX(-50%);
  animation-delay: 0s;
}
.lb-podium-sparkle span:nth-child(2) {
  top: 50%; right: -2px; transform: translateY(-50%);
  animation-delay: 0.8s;
}
.lb-podium-sparkle span:nth-child(3) {
  bottom: 0; left: 14%;
  animation-delay: 1.6s;
}

@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0.5) translateY(0); }
  30%  { opacity: 1; }
  60%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.4) translateY(-8px); }
}

.lb-podium--vip .lb-podium-sparkle span {
  color: var(--violet-1);
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.9));
}

/* VIP dot indicator on podium avatar */
.lb-podium-vip-dot {
  position: absolute;
  bottom: var(--s-2);
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad-violet);
  border: 2px solid var(--bg-1);
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.6);
}


/* ── Podium avatars — size per rank ── */
.lb-podium-avatar {
  /* Base .avatar from components.css gives gold ring + inner */
}

.lb-podium-avatar--1 {
  width: 64px;
  height: 64px;
  /* Brilliant gold ring with glow */
  background: var(--grad-gold);
  box-shadow:
    0 0 0 3px var(--bg-1),
    0 0 0 5px var(--gold-3),
    var(--glow-gold),
    0 0 40px rgba(255, 200, 80, 0.3);
  animation: avatarPulse1 2.8s var(--ease-out) infinite alternate;
}

.lb-podium-avatar--1 .avatar-inner {
  font-size: 24px;
}

@keyframes avatarPulse1 {
  from { box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--gold-3), 0 0 24px rgba(255,200,80,0.35), 0 0 40px rgba(255,200,80,0.15); }
  to   { box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--gold-2), 0 0 40px rgba(255,200,80,0.6),  0 0 60px rgba(255,200,80,0.25); }
}

.lb-podium-avatar--2 {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #c8d3ea, #7d8eaf);
  box-shadow:
    0 0 0 2px var(--bg-1),
    0 0 0 3px #8e9ab8,
    0 0 16px rgba(140, 154, 184, 0.3);
}

.lb-podium-avatar--2 .avatar-inner {
  font-size: 19px;
}

.lb-podium-avatar--3 {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #d4895a, #8b4a1e);
  box-shadow:
    0 0 0 2px var(--bg-1),
    0 0 0 3px #c07040,
    0 0 14px rgba(192, 112, 64, 0.3);
}

.lb-podium-avatar--3 .avatar-inner {
  font-size: 18px;
}

/* VIP tab avatar ring overrides */
.lb-podium--vip .lb-podium-avatar--1 {
  background: var(--grad-violet);
  box-shadow:
    0 0 0 3px var(--bg-1),
    0 0 0 5px var(--violet-2),
    var(--glow-violet),
    0 0 40px rgba(139, 92, 246, 0.25);
  animation: avatarPulseVip 2.8s var(--ease-out) infinite alternate;
}

@keyframes avatarPulseVip {
  from { box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--violet-2), 0 0 24px rgba(139,92,246,0.4), 0 0 40px rgba(139,92,246,0.15); }
  to   { box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--violet-1), 0 0 40px rgba(139,92,246,0.7), 0 0 60px rgba(139,92,246,0.3); }
}

.lb-podium--vip .lb-podium-avatar--2 {
  background: var(--grad-cyan);
  box-shadow:
    0 0 0 2px var(--bg-1),
    0 0 0 3px var(--cyan-2),
    0 0 16px rgba(33, 200, 184, 0.35);
}

.lb-podium--vip .lb-podium-avatar--3 {
  background: linear-gradient(135deg, var(--violet-1), var(--violet-3));
  box-shadow:
    0 0 0 2px var(--bg-1),
    0 0 0 3px var(--violet-2),
    0 0 12px rgba(139, 92, 246, 0.3);
}


/* ── Name + score above the pillar ── */
.lb-podium-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--s-2);
  text-align: center;
}

.lb-podium-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* #1 slot larger name */
.lb-podium-slot--1 .lb-podium-name {
  font-size: 14px;
}

.lb-podium-score {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-2);
  letter-spacing: 0.01em;
}

.lb-podium-slot--1 .lb-podium-score {
  font-size: 13px;
  color: var(--gold-1);
  filter: drop-shadow(0 0 6px rgba(255, 220, 80, 0.5));
}

.lb-podium--vip .lb-podium-score {
  color: var(--violet-1);
}

.lb-podium--vip .lb-podium-slot--1 .lb-podium-score {
  color: var(--cyan-1);
  filter: drop-shadow(0 0 6px rgba(33, 200, 184, 0.5));
}


/* ── The physical pillar blocks ── */
.lb-podium-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--s-3);
  width: 100%;
  border-radius: var(--r-md) var(--r-md) 0 0;
  position: relative;
  overflow: hidden;
  /* Inner shine line */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Staggered heights: 1st tallest, 2nd middle, 3rd shortest */
.lb-podium-pillar--1 {
  height: 92px;
  background: linear-gradient(
    180deg,
    rgba(255, 214, 80, 0.22) 0%,
    rgba(255, 180, 40, 0.12) 50%,
    rgba(184, 128, 31, 0.18) 100%
  );
  border: 1px solid rgba(255, 210, 80, 0.28);
  border-bottom: none;
}

.lb-podium-pillar--2 {
  height: 68px;
  background: linear-gradient(
    180deg,
    rgba(200, 211, 234, 0.15) 0%,
    rgba(130, 144, 170, 0.08) 100%
  );
  border: 1px solid rgba(200, 211, 234, 0.18);
  border-bottom: none;
}

.lb-podium-pillar--3 {
  height: 52px;
  background: linear-gradient(
    180deg,
    rgba(200, 130, 80, 0.15) 0%,
    rgba(140, 74, 30, 0.08) 100%
  );
  border: 1px solid rgba(200, 130, 80, 0.18);
  border-bottom: none;
}

/* VIP pillar color overrides */
.lb-podium--vip .lb-podium-pillar--1 {
  background: linear-gradient(
    180deg,
    rgba(139, 92, 246, 0.28) 0%,
    rgba(109, 40, 217, 0.14) 50%,
    rgba(91, 33, 182, 0.2) 100%
  );
  border-color: rgba(139, 92, 246, 0.35);
}

.lb-podium--vip .lb-podium-pillar--2 {
  background: linear-gradient(
    180deg,
    rgba(33, 200, 184, 0.18) 0%,
    rgba(22, 163, 148, 0.08) 100%
  );
  border-color: rgba(33, 200, 184, 0.22);
}

.lb-podium--vip .lb-podium-pillar--3 {
  background: linear-gradient(
    180deg,
    rgba(196, 168, 255, 0.14) 0%,
    rgba(109, 40, 217, 0.06) 100%
  );
  border-color: rgba(196, 168, 255, 0.18);
}

/* Pillar shine sweep */
.lb-podium-pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.lb-podium-medal {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 3px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

.lb-podium-rank-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
}

.lb-podium-pillar--1 .lb-podium-rank-num {
  color: rgba(255, 230, 140, 0.7);
}

/* "me" indicator on podium slot */
.lb-podium-slot--me .lb-podium-name {
  color: var(--gold-1);
}

.lb-podium-slot--me .lb-podium-avatar--1,
.lb-podium-slot--me .lb-podium-avatar--2,
.lb-podium-slot--me .lb-podium-avatar--3 {
  outline: 2px dashed rgba(255, 220, 80, 0.6);
  outline-offset: 3px;
}


/* ── Podium entrance animations ── */
.lb-podium-slot--1 { animation: podiumRise1 0.55s var(--ease-spring) both; animation-delay: 0.05s; }
.lb-podium-slot--2 { animation: podiumRise2 0.5s  var(--ease-spring) both; animation-delay: 0.12s; }
.lb-podium-slot--3 { animation: podiumRise3 0.5s  var(--ease-spring) both; animation-delay: 0.18s; }

@keyframes podiumRise1 {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes podiumRise2 {
  from { opacity: 0; transform: translateY(18px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes podiumRise3 {
  from { opacity: 0; transform: translateY(18px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ════════════════════════════════════════════════════════════
   PODIUM NOTE
   ════════════════════════════════════════════════════════════ */

.lb-podium-note {
  margin: var(--s-3) 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: rgba(255, 200, 80, 0.06);
  border: 1px solid rgba(255, 200, 80, 0.14);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  text-align: center;
}

.lb-root[data-board="vip"] .lb-podium-note {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.18);
}


/* ════════════════════════════════════════════════════════════
   RANKED LIST (rank 4..N)
   ════════════════════════════════════════════════════════════ */

.lb-list-card {
  /* Inherits .card styles */
  overflow: hidden;
  padding: 0;
}

.lb-list-row {
  /* Extends .list-row */
  gap: var(--s-3);
  padding: 11px var(--s-4);
  transition:
    background var(--t-fast) var(--ease-out),
    box-shadow  var(--t-fast) var(--ease-out);
  animation: rowSlideIn 0.32s var(--ease-out) both;
}

/* Staggered row entrance */
.lb-list-row:nth-child(1)  { animation-delay: 0.04s; }
.lb-list-row:nth-child(2)  { animation-delay: 0.08s; }
.lb-list-row:nth-child(3)  { animation-delay: 0.12s; }
.lb-list-row:nth-child(4)  { animation-delay: 0.16s; }
.lb-list-row:nth-child(5)  { animation-delay: 0.20s; }
.lb-list-row:nth-child(6)  { animation-delay: 0.24s; }
.lb-list-row:nth-child(n+7){ animation-delay: 0.28s; }

@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Me row highlight ── */
.lb-list-row--me {
  background: linear-gradient(
    135deg,
    rgba(255, 200, 80, 0.1) 0%,
    rgba(255, 160, 40, 0.06) 100%
  ) !important;
  border-left: 3px solid var(--gold-3) !important;
  padding-left: calc(var(--s-4) - 3px);
  box-shadow: inset 0 0 24px rgba(255, 200, 80, 0.04);
}

.lb-list-row--me .lb-list-name {
  color: var(--gold-1);
  font-weight: 600;
}

/* VIP variant me row */
.lb-root[data-board="vip"] .lb-list-row--me {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.12) 0%,
    rgba(109, 40, 217, 0.06) 100%
  ) !important;
  border-left-color: var(--violet-2) !important;
}

.lb-root[data-board="vip"] .lb-list-row--me .lb-list-name {
  color: var(--violet-1);
}

/* ── Rank number badge in list ── */
.lb-rank-num {
  /* extends .rank-badge .rank-badge-n */
  min-width: 28px;
  text-align: center;
  font-size: 12px;
}

/* ── List avatar (smaller) ── */
.lb-list-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.lb-list-avatar .avatar-inner {
  font-size: 13px;
}

/* ── Name column ── */
.lb-list-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.lb-list-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: nowrap;
}

.lb-vip-badge {
  /* inherits .badge .badge-vip */
  font-size: 10px;
  padding: 2px 7px;
  flex-shrink: 0;
}

/* ── Score right side ── */
.lb-list-end {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.lb-list-score {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gold-2);
}

/* VIP score → cyan */
.lb-list-score--vip {
  color: var(--cyan-1);
  filter: drop-shadow(0 0 6px rgba(33, 200, 184, 0.4));
}

/* VIP board default score colour */
.lb-root[data-board="vip"] .lb-list-score {
  color: var(--violet-1);
}


/* ════════════════════════════════════════════════════════════
   "YOU" CHIP
   ════════════════════════════════════════════════════════════ */

.lb-me-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--grad-gold);
  color: var(--text-on-gold);
  line-height: 1.4;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: var(--s-1);
}

/* In the list (slightly larger) */
.lb-me-chip--list {
  font-size: 10px;
  padding: 2px 8px;
}

.lb-root[data-board="vip"] .lb-me-chip {
  background: var(--grad-violet);
  color: var(--text-1);
}


/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */

.lb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-4);
  text-align: center;
}

.lb-empty-icon {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(255, 200, 80, 0.3));
  animation: emptyPulse 2.8s ease-in-out infinite alternate;
}

@keyframes emptyPulse {
  from { transform: scale(0.96); opacity: 0.75; }
  to   { transform: scale(1.04); opacity: 1; }
}

.lb-empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
  letter-spacing: -0.02em;
}

.lb-empty-sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.4;
}