/********************************************************
  RESET
*********************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/********************************************************
  DESIGN SYSTEM - CSS CUSTOM PROPERTIES
*********************************************************/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-mono: 'Inter', 'Monaco', 'Courier New', monospace;

  /* Font Sizes - Tighter professional scale */
  --text-xs: 0.6875rem;  /* 11px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-lg: 1.0625rem;  /* 17px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.5rem;    /* 40px */
  --text-5xl: 3.25rem;   /* 52px */
  --text-6xl: 4rem;      /* 64px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Colors - Refined dark palette */
  --color-bg-darkest: #0a0e14;
  --color-bg-dark: #0d1117;
  --color-bg-base: #151b23;
  --color-surface: #1a2129;
  --color-surface-elevated: #232d38;

  /* Colors - Text hierarchy */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.72);
  --color-text-tertiary: rgba(255, 255, 255, 0.52);
  --color-text-disabled: rgba(255, 255, 255, 0.32);

  /* Colors - Functional */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Tier Colors - Subtle and refined */
  --tier-rookie: #a8b4c0;
  --tier-bronze: #cd7f32;
  --tier-silver: #c0c0c0;
  --tier-gold: #ffd700;
  --tier-nova: #a855f7;

  /* Colors - Borders (higher contrast) */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-base: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-border-accent: rgba(255, 255, 255, 0.32);

  /* Spacing - 8px base */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* Border Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Shadows & Elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 24px 56px rgba(0, 0, 0, 0.4);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.6, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Removed glassmorphism utilities - not used in professional games */

/********************************************************
  BASE (html, body, type, links)
*********************************************************/
html { scroll-behavior: smooth; }

body.packs-page {
  overflow: hidden;
  height: 100vh;
}

/* Disable scrolling on club page when modal is open */
body.club-page {
  overflow: hidden;
  height: 100vh;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  letter-spacing: -0.011em;
  color: var(--color-text-primary);
  overflow-x: hidden;
  background: #000000;
  background-attachment: fixed;
}

/* Typography - Tighter professional hierarchy */
h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-6) 0;
  color: #ffffff;
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-5) 0;
  color: rgba(255, 255, 255, 0.80);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.015em;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4) 0;
  color: rgba(255, 255, 255, 0.55);
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
}

h4 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-primary);
}

p {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  letter-spacing: -0.008em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
}
/********************************************************
  HERO SECTIONS (Page Headers with Unique Styles)
*********************************************************/
.page-hero {
  width: 100%;
  max-width: 900px;
  margin: 0 auto var(--space-8);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
}

/* Gradient Hero (News Page) */
.gradient-hero {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.gradient-hero h1 {
  margin-bottom: var(--space-3);
  font-size: var(--text-5xl);
  text-shadow: none;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-tertiary);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Underline Hero (Packs Page) */
.underline-hero {
  position: relative;
  padding-bottom: var(--space-6);
}

.animated-underline {
  width: 300px;
  height: 4px;
  margin: var(--space-4) auto 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tier-gold) 20%,
    var(--tier-nova) 50%,
    var(--tier-gold) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer-slide 3s ease-in-out infinite;
  border-radius: 3px;
  box-shadow: 0 0 25px var(--tier-gold-glow),
              0 0 50px rgba(255, 215, 0, 0.3);
}

@keyframes shimmer-slide {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

/* ========================================
   CLUB HERO - FUTURISTIC HEXAGONAL DESIGN
======================================== */

.club-hero {
  position: relative;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Title Row - Title Centered + Sync Button to Right */
/* Club Controls Row - Clean single row layout */
.club-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 12px;
  gap: 24px;
}

.sync-nft-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sync-nft-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,1);
}

/* ══════════════════════════════════════════
   HOME — Trading Dashboard
   ══════════════════════════════════════════ */
body.home-page main.has-top-navbar {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

body.home-page #home-tab.tab-content.active {
  display: flex !important;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
  padding: 14px 16px;
  gap: 10px;
}

/* ── Three-panel row ── */
body.home-page .hd-panels {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 10px;
}

/* ── Base panel ── */
body.home-page .hd-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.home-page .hd-panel--portfolio {
  width: 210px;
  flex-shrink: 0;
}


/* ── Panel header ── */
body.home-page .hd-panel-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.3);
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* ── Portfolio panel ── */
body.home-page .hd-hero {
  padding: 14px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 2px;
  flex-shrink: 0;
}

body.home-page .hd-hero-num {
  font-size: 2.2rem;
  font-weight: 700;
  color: #a78bfa;
  font-family: var(--font-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

body.home-page .hd-hero-sub {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(167,139,250,0.45);
  margin-top: 5px;
}

body.home-page .hd-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 2px 0;
  flex-shrink: 0;
}

body.home-page .hd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
body.home-page .hd-row:last-child { border-bottom: none; }

body.home-page .hd-row--link {
  text-decoration: none;
  cursor: pointer;
}
body.home-page .hd-row--link:hover .hd-val { color: #fff; }

body.home-page .hd-lbl {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.38);
  font-weight: 500;
}

body.home-page .hd-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  font-family: var(--font-primary);
}

/* ── Dividend centerpiece panel ── */
body.home-page .hd-panel--dividend {
  flex: 1;
  min-width: 0;
  align-items: center;
  text-align: center;
}

body.home-page .hdp-centerpiece {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 12px 0 16px;
}

body.home-page .hdp-pot-label {
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,215,0,0.45);
  margin-bottom: 10px;
}

body.home-page .hdp-pot-number {
  font-size: 4rem;
  font-weight: 800;
  color: #ffd700;
  font-family: var(--font-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 40px rgba(255,215,0,0.3), 0 0 80px rgba(255,215,0,0.12);
}

body.home-page .hdp-countdown-wrap {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

body.home-page .hdp-countdown-label {
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.28);
}

body.home-page .hdp-countdown-timer {
  font-size: 1.45rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-primary);
  letter-spacing: 0.04em;
}

/* ── Contributions feed panel ── */
body.home-page .hd-panel--feed {
  width: 230px;
  flex-shrink: 0;
}

body.home-page .hdp-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

body.home-page .hdp-feed-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.18);
  text-align: center;
  padding: 20px;
}

body.home-page .hdp-feed-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
body.home-page .hdp-feed-item:last-child { border-bottom: none; }

body.home-page .hdp-feed-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.home-page .hdp-feed-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

body.home-page .hdp-feed-wallet {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-primary);
}

body.home-page .hdp-feed-pack {
  font-size: 0.58rem;
  text-transform: capitalize;
  color: rgba(255,255,255,0.28);
}

body.home-page .hdp-feed-amount {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4ade80;
  font-family: var(--font-primary);
}

body.home-page .hdp-feed-time {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.22);
}

/* ── Marketplace bar ── */
body.home-page .hd-market {
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 12px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.home-page .hd-market.market-open  { border-top: 2px solid #22c55e; }
body.home-page .hd-market.market-closed { border-top: 2px solid #ef4444; }
body.home-page .hd-market .hd-panel-label { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

body.home-page .home-market-stats {
  display: flex;
  gap: 0;
  border: none;
  background: none;
}

body.home-page .hm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 20px;
  border-right: 1px solid rgba(255,255,255,0.07);
  margin-right: 20px;
}
body.home-page .hm-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }

body.home-page .hm-label {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.32);
}
body.home-page .hm-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
body.home-page .hm-divider { display: none; }

body.home-page .hm-stat--pack {
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
body.home-page .hm-stat--pack:hover { background: rgba(255,255,255,0.04); }
body.home-page .hm-stat--pack.at-limit { opacity: 0.3; pointer-events: none; }

body.home-page .hm-pack-sub {
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.2);
}

body.home-page .hm-pack-rookie .hm-label { color: #a8b4c0; }
body.home-page .hm-pack-bronze .hm-label { color: #cd7f32; }
body.home-page .hm-pack-silver .hm-label { color: #c0c0c0; }
body.home-page .hm-pack-gold   .hm-label { color: #ffd700; }
body.home-page .hm-pack-nova   .hm-label { color: #a855f7; }


.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

/* Dividend Inline - Real game style (solid background, no transparency) */
.dividend-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0d1117;
  border: 2px solid #00ff88;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  margin-left: auto;
}

.dividend-inline:hover {
  background: #151b23;
  border-color: #00d9ff;
}

.dividend-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.dividend-amount {
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(90deg, #00ff88, #00d9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 60px;
}

.withdraw-btn-inline {
  padding: 6px 14px;
  background: linear-gradient(180deg, #00ff88 0%, #00d9ff 100%);
  border: none;
  border-radius: 4px;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.withdraw-btn-inline:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 255, 136, 0.4);
}

.withdraw-btn-inline:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
}

/* Data Streams */
.data-streams {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.stream {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(180deg, transparent, #06b6d4, transparent);
  animation: stream-flow 3s linear infinite;
  opacity: 0;
}

.stream:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}

.stream:nth-child(2) {
  left: 22%;
  animation-delay: 0.6s;
}

.stream:nth-child(3) {
  left: 38%;
  animation-delay: 1.2s;
}

.stream:nth-child(4) {
  left: 52%;
  animation-delay: 1.8s;
}

.stream:nth-child(5) {
  left: 65%;
  animation-delay: 0.4s;
}

.stream:nth-child(6) {
  left: 78%;
  animation-delay: 1.0s;
}

.stream:nth-child(7) {
  left: 87%;
  animation-delay: 1.4s;
}

.stream:nth-child(8) {
  left: 95%;
  animation-delay: 2.0s;
}

@keyframes stream-flow {
  0% {
    top: -100px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Title Wrapper - Enhanced */
.club-title-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.club-title-wrapper h1 {
  position: relative;
  color: #ffffff;
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3),
               0 2px 4px rgba(0, 0, 0, 0.3);
  padding-bottom: var(--space-3);
  margin: 0;
}

.club-title-wrapper h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00ff88, #00d9ff, #3b82f6, #a855f7, #00ff88);
  background-size: 200% 100%;
  animation: gradient-shift 5s ease infinite;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.6),
              0 0 40px rgba(59, 130, 246, 0.4);
}

.title-glow-effect {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(6, 182, 212, 0.3), transparent 70%);
  filter: blur(40px);
  animation: title-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes title-glow-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.holographic-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-gradient {
  color: #ffffff;
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-bottom: var(--space-3);
}

.title-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00ff88, #00d9ff, #3b82f6, #a855f7, #00ff88);
  background-size: 200% 100%;
  animation: gradient-shift 5s ease infinite;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.6),
              0 0 40px rgba(59, 130, 246, 0.4);
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.title-pulse {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #06b6d4, #3b82f6, #06b6d4, transparent);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.8);
  animation: pulse-width 2s ease-in-out infinite;
}

@keyframes pulse-width {
  0%, 100% {
    opacity: 0.6;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.club-subtitle {
  font-size: var(--text-lg);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--space-2);
}

/* Holographic Title */

@keyframes holographic-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ========================================
   LOGO-INSPIRED SWOOPING LINES
======================================== */

.logo-swoosh-container {
  position: relative;
  width: 500px;
  height: 100px;
  margin: 0 auto var(--space-3) auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-swoosh {
  width: 100%;
  height: 100%;
}

.swoosh-line {
  stroke-linecap: round;
}

.swoosh-1 {
  opacity: 0.9;
}

.swoosh-2 {
  opacity: 0.8;
}

.swoosh-3 {
  opacity: 0.7;
}

.logo-inspired-title {
  /* Clean title without extra glow effects */
}

/* ========================================
   CLUB PAGE - FLOATING GLASS ORBS
======================================== */

.glass-orbs-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.glass-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 255, 255, 0.2),
    rgba(6, 182, 212, 0.1),
    rgba(59, 130, 246, 0.05)
  );
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(6, 182, 212, 0.2),
    inset 0 0 60px rgba(255, 255, 255, 0.05);
  animation: float-orb 20s ease-in-out infinite;
}

.glass-orb.orb-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: 10%;
  animation-delay: 0s;
}

.glass-orb.orb-2 {
  width: 200px;
  height: 200px;
  bottom: -50px;
  left: 15%;
  animation-delay: 7s;
}

.glass-orb.orb-3 {
  width: 150px;
  height: 150px;
  top: 40%;
  left: 5%;
  animation-delay: 14s;
}

@keyframes float-orb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  33% {
    transform: translate(30px, -40px) scale(1.1);
    opacity: 0.6;
  }
  66% {
    transform: translate(-20px, -20px) scale(0.9);
    opacity: 0.5;
  }
}

/* Global page titles (inherit from h1) */
main > h1,
.page-title,
#club-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#club-section h1 {
  font-family: var(--font-primary);
  font-size: var(--text-6xl);
  font-weight: 800;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-8);
  letter-spacing: -0.02em;
  text-shadow: 0 4px 12px var(--color-primary-glow);
}

/********************************************************
  PAGE TRANSITIONS & ANIMATIONS
*********************************************************/
/* Fade-in animation for page load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/********************************************************
  GLOBAL LAYOUT - Centered with left sidebar
*********************************************************/
main {
  margin-left: 220px;
  padding: 32px;
  width: calc(100vw - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 0.6s ease-out;
  position: relative;
  z-index: 1;
}

/* Add top margin when top navbar is present */
main.has-top-navbar {
  margin-top: 60px;
  padding-top: 14px;
}

/* Club page: fill remaining viewport, let the grid flex inside */
body.club-page main.has-top-navbar {
  height: calc(100vh - 60px);
  overflow: hidden;
  padding-bottom: 16px;
  align-items: stretch;
}

body.club-page .tab-content.active {
  height: 100%;
}

body.club-page #squad-section,
body.club-page #collectables-section {
  height: 100%;
}

main > * {
  width: 100%;
  max-width: 1400px;
}

/* Staggered animations for content */
.page-hero {
  animation: fadeInUp 0.8s ease-out 0.1s both;
}

.news-grid,
.wheel-pack-container,
#marketplace-list {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.page-frame {
  margin-left: 220px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 32px;
  padding-bottom: 32px;
  width: calc(100vw - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

.page-frame > * {
  width: 100%;
  max-width: calc(100vw - 220px - 64px);
}

/********************************************************
  GLOBAL UI ELEMENTS (buttons, common text)
*********************************************************/
/* Base button - Clean and minimal */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  border-radius: 6px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

button:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-accent);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary button variant */
.connect-wallet,
.btn-primary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #ffffff;
}

.connect-wallet:hover,
.btn-primary:hover {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: rgba(59, 130, 246, 0.8);
}

/* Secondary button variant */
.profile-btn,
.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

.profile-btn:hover,
.btn-secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-border-accent);
}

/********************************************************
  NAVBAR - Clean dark design
*********************************************************/
.navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-base);
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.navbar a,
.navbar button {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.navbar a:hover,
.navbar button:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-border-subtle);
}

.navbar a.active {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-border-base);
}

/********************************************************
  TOP HORIZONTAL NAVBAR
*********************************************************/
.top-navbar {
  position: fixed;
  top: 0;
  left: 220px;
  right: 0;
  height: 60px;
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  z-index: 999;
}

.top-navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1400px;
}

.navbar-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
}

.navbar-tab-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
}
.navbar-tab-link:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}
.navbar-tab-link.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Legal slide-down panel */
.legal-panel {
  position: fixed;
  top: 60px; /* below top-navbar */
  left: 220px; /* past sidebar */
  right: 0;
  background: linear-gradient(160deg, rgba(15, 18, 28, 0.97) 0%, rgba(10, 12, 20, 0.99) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 800;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.legal-panel.open {
  max-height: 80vh;
  overflow-y: auto;
}

.legal-panel-inner {
  padding: 40px 60px 48px;
  max-width: 900px;
}

.legal-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 28px 0;
  letter-spacing: 0.02em;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-section {
  margin-bottom: 24px;
}

.legal-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 8px 0;
}

.legal-section p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.7;
  margin: 0;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-profile-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.navbar-profile-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.navbar-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.navbar-username {
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.top-nav-tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.top-nav-tab:hover {
  color: rgba(255, 255, 255, 0.9);
}

.top-nav-tab.active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/********************************************************
  LEFT SIDEBAR - Larger with full text labels
*********************************************************/
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 220px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  z-index: 1000;
  gap: 16px;
}

.sidebar-logo-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo-top img {
  max-width: 150%;
  height: auto;
  max-height: 250px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  mix-blend-mode: lighten;
}

.sidebar-logo-top img:hover {
  opacity: 1;
}


.wallet-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

#connect-wallet-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

#connect-wallet-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-accent);
}

/* When connected, show shortened address */
#connect-wallet-btn.has-avatar {
  padding: 8px 16px;
}

#wallet-status {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav a {
  padding: 12px 16px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 150ms ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-nav a:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.07);
}

.sidebar-nav a.active {
  color: #ffffff;
  background: rgba(255,255,255,0.1);
  font-weight: 600;
}

/* World Cup 2026 nav link — animated gold shimmer sweep */
.sidebar-nav a.nav-wc-link {
  background: linear-gradient(
    90deg,
    #b8860b 0%,
    #ffd700 35%,
    #fff8c0 50%,
    #ffd700 65%,
    #b8860b 100%
  );
  background-size: 250% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
  animation: wc-shimmer 3s linear infinite;
}
.sidebar-nav a.nav-wc-link:hover {
  background: linear-gradient(
    90deg,
    #b8860b 0%,
    #ffd700 35%,
    #fff8c0 50%,
    #ffd700 65%,
    #b8860b 100%
  );
  background-size: 250% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-color: transparent;
}
.sidebar-nav a.nav-wc-link.active {
  background-color: rgba(255,255,255,0.08);
}
@keyframes wc-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -50% center; }
}

/* WC 2026 home banner */
.home-wc-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(201,162,39,0.12) 0%, rgba(201,162,39,0.06) 100%);
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 16px 0 4px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.home-wc-banner:hover {
  background: linear-gradient(135deg, rgba(201,162,39,0.18) 0%, rgba(201,162,39,0.10) 100%);
  border-color: rgba(201,162,39,0.55);
}
.home-wc-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-wc-trophy {
  font-size: 1.6rem;
  line-height: 1;
}
.home-wc-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #c9a227;
  letter-spacing: 0.01em;
}
.home-wc-sub {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}
.home-wc-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: #c9a227;
  white-space: nowrap;
}

.nav-avatar {
  display: none;
}

/********************************************************
  BALANCE / DEPOSIT
*********************************************************/
#balance,
#deposit-section {
  color: #b0b3bb;
  font-weight: bold;
}

/********************************************************
  PACKS (grid, buttons, labels)
*********************************************************/
#packs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 30px;
  flex-wrap: wrap;
}

/* premium pack button - modern glassmorphism */
.pack-button {
  width: 280px;
  height: 90px;
  font-size: var(--text-xl);
  font-weight: 800;
  font-family: var(--font-primary);
  letter-spacing: -0.02em;
  border-radius: var(--radius-xl);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-xl);
  transition: all var(--transition-base);
  cursor: pointer;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.pack-button:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-accent);
}

/* Pack tier variants - clean gradients */
.bronze-pack {
  background: linear-gradient(180deg, #2a2520 0%, #1a1612 100%);
  border: 2px solid rgba(205, 127, 50, 0.6);
  color: var(--color-text-primary);
}
.bronze-pack:hover {
  box-shadow: 0 4px 16px rgba(205, 127, 50, 0.2);
}

.silver-pack {
  background: linear-gradient(180deg, #252a32 0%, #1a1f25 100%);
  border: 2px solid rgba(192, 192, 192, 0.6);
  color: var(--color-text-primary);
}
.silver-pack:hover {
  box-shadow: 0 4px 16px rgba(192, 192, 192, 0.2);
}

.gold-pack {
  background: linear-gradient(180deg, #2a2618 0%, #1a1810 100%);
  border: 2px solid rgba(255, 215, 0, 0.7);
  color: var(--color-text-primary);
}
.gold-pack:hover {
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.25);
}

.nova-pack {
  background: linear-gradient(180deg, #241e2e 0%, #16111d 100%);
  border: 2px solid rgba(168, 85, 247, 0.7);
  color: var(--color-text-primary);
}
.nova-pack:hover {
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25);
}

.pack-odds {
  font-size: 14px;
  color: white;
  text-align: center;
  margin-top: 5px;
  opacity: 0.9;
}

/********************************************************
  WHEEL SPINNER PAGE
*********************************************************/

/* ── Atmospheric background ── */
.wb-bg {
  position: fixed;
  inset: 0;
  background: #080a12;
  z-index: 0;
  overflow: hidden;
}

/* Drifting ambient blobs */
.wb-bg::before,
.wb-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  background: rgba(var(--wb-pack-rgb, 255,215,0), 0.18);
  animation: wb-blob-drift 10s ease-in-out infinite;
  pointer-events: none;
}
.wb-bg::before {
  width: 480px; height: 480px;
  top: -120px; left: -80px;
  animation-delay: 0s;
}
.wb-bg::after {
  width: 360px; height: 360px;
  bottom: -100px; right: -60px;
  animation-delay: -5s;
  opacity: 0.7;
}
@keyframes wb-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(50px, 40px) scale(1.08); }
  66%       { transform: translate(-30px, 60px) scale(0.94); }
}

/* ── Page layout ── */
.wb-page {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 20px;
}

/* ── Pack name heading ── */
.wb-pack-name {
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--wb-pack-color, #ffd700);
  text-shadow: 0 0 40px rgba(var(--wb-pack-rgb,255,215,0), 0.7),
               0 0 80px rgba(var(--wb-pack-rgb,255,215,0), 0.3);
}

.wb-pack-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 2.2rem;
  text-align: center;
}

/* ── Reel machine container — horizontal CS:GO style ── */
.wb-reel-machine {
  position: relative;
  width: min(920px, calc(100vw - 40px));
  height: 148px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(var(--wb-pack-rgb,255,215,0), 0.2);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 40px rgba(var(--wb-pack-rgb,255,215,0), 0.15),
    0 0 80px rgba(var(--wb-pack-rgb,255,215,0), 0.07),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 70px rgba(0,0,0,0.8);
}

/* Scanlines overlay */
.wb-reel-machine::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 6px,
    rgba(0,0,0,0.06) 6px,
    rgba(0,0,0,0.06) 7px
  );
  z-index: 4;
  pointer-events: none;
  border-radius: 10px;
}

.wb-reel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wb-reel-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  will-change: transform;
}

/* ── Individual reel items ── */
.wb-reel-item {
  width: 130px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.05);
  gap: 6px;
}

/* Subtle tier background tint per item */
.wb-reel-item.tier-rookie { background: linear-gradient(to bottom, rgba(168,180,192,0.06), transparent); }
.wb-reel-item.tier-bronze { background: linear-gradient(to bottom, rgba(212,136,74,0.10), transparent); }
.wb-reel-item.tier-silver { background: linear-gradient(to bottom, rgba(216,223,232,0.06), transparent); }
.wb-reel-item.tier-gold   { background: linear-gradient(to bottom, rgba(255,215,0,0.12), transparent); }
.wb-reel-item.tier-nova   { background: linear-gradient(to bottom, rgba(192,132,252,0.14), transparent); }
.wb-reel-item.tier-miss   { background: transparent; }

.wb-reel-tier-name {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-primary);
}

.wb-reel-item.tier-rookie  .wb-reel-tier-name { color: #a8b4c0; }
.wb-reel-item.tier-bronze  .wb-reel-tier-name { color: #d4884a; }
.wb-reel-item.tier-silver  .wb-reel-tier-name { color: #d8dfe8; }
.wb-reel-item.tier-gold    .wb-reel-tier-name { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.6); }
.wb-reel-item.tier-nova    .wb-reel-tier-name { color: #c084fc; text-shadow: 0 0 10px rgba(192,132,252,0.6); }
.wb-reel-item.tier-miss    .wb-reel-tier-name { color: #3a3a4a; }

/* ── Fade masks — left/right for horizontal reel ── */
.wb-reel-fade-top,
.wb-reel-fade-bottom {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  pointer-events: none;
  z-index: 2;
}
.wb-reel-fade-top {
  left: 0;
  background: linear-gradient(to right, rgba(8,10,18,0.97) 0%, rgba(8,10,18,0) 100%);
}
.wb-reel-fade-bottom {
  right: 0;
  background: linear-gradient(to left, rgba(8,10,18,0.97) 0%, rgba(8,10,18,0) 100%);
}

/* ── Center selector — vertical strip ── */
.wb-reel-selector {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  border-left:  2px solid var(--wb-pack-color, #ffd700);
  border-right: 2px solid var(--wb-pack-color, #ffd700);
  box-shadow: 0 0 20px rgba(var(--wb-pack-rgb,255,215,0), 0.6),
              inset 0 0 20px rgba(var(--wb-pack-rgb,255,215,0), 0.04);
  z-index: 3;
  pointer-events: none;
  background: rgba(var(--wb-pack-rgb,255,215,0), 0.03);
  animation: wb-selector-pulse 2s ease-in-out infinite;
}
@keyframes wb-selector-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--wb-pack-rgb,255,215,0), 0.5),
                          inset 0 0 16px rgba(var(--wb-pack-rgb,255,215,0), 0.03); }
  50%       { box-shadow: 0 0 36px rgba(var(--wb-pack-rgb,255,215,0), 0.85),
                          inset 0 0 24px rgba(var(--wb-pack-rgb,255,215,0), 0.07); }
}

/* Arrow markers at top and bottom of selector */
.wb-reel-selector::before,
.wb-reel-selector::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.wb-reel-selector::before {
  top: 0;
  border-top: 8px solid var(--wb-pack-color, #ffd700);
}
.wb-reel-selector::after {
  bottom: 0;
  border-bottom: 8px solid var(--wb-pack-color, #ffd700);
}

/* ── Odds chips ── */
.wb-odds-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.2rem;
  max-width: 360px;
}

.wb-odds-chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  opacity: 0.65;
  font-family: var(--font-primary);
}

.wb-odds-chip.tier-rookie { color: #a8b4c0; }
.wb-odds-chip.tier-bronze { color: #d4884a; }
.wb-odds-chip.tier-silver { color: #c0c0c0; }
.wb-odds-chip.tier-gold   { color: #ffd700; }
.wb-odds-chip.tier-nova   { color: #c084fc; }
.wb-odds-chip.tier-miss   { color: #555570; }

/* ── Spin button ── */
.wb-spin-btn {
  margin-top: 2rem;
  padding: 16px 72px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  position: relative;
  z-index: 20;
  animation: wb-btn-idle 3s ease-in-out infinite;
}
@keyframes wb-btn-idle {
  0%, 100% { box-shadow: 0 4px 24px rgba(var(--wb-pack-rgb,255,215,0), 0.35); }
  50%       { box-shadow: 0 4px 40px rgba(var(--wb-pack-rgb,255,215,0), 0.65); }
}
.wb-spin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  animation: none;
}
.wb-spin-btn:active:not(:disabled) {
  transform: translateY(0);
}
.wb-spin-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  animation: none;
}

/* ── Burst particles (used by revealPlayerCard) ── */
.burst-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.85;
}


/* Styled back button */
.wheel-back-btn {
  position: fixed;
  top: var(--space-6);
  left: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: rgba(26, 31, 44, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  backdrop-filter: blur(10px);
  z-index: 1100;
}

.wheel-back-btn:hover {
  background: rgba(30, 144, 255, 0.2);
  border-color: var(--color-primary);
  transform: translateX(-4px);
  box-shadow: 0 0 20px rgba(30, 144, 255, 0.3);
}

.wheel-back-btn svg {
  transition: transform var(--transition-base);
}

.wheel-back-btn:hover svg {
  transform: translateX(-3px);
}

/* MODAL OVERLAY FOR PLAYER REVEAL */
.reveal-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.reveal-modal.active {
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 1.2s ease-out, backdrop-filter 1.2s ease-out;
  will-change: background, backdrop-filter;
}

.modal-backdrop.active {
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
}

.modal-content {
  position: relative;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow:
    0 12px 40px 0 rgba(31, 38, 135, 0.5),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.modal-player-box {
  transform: scale(1.2);
}

.close-modal-btn {
  padding: var(--space-4) var(--space-8);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 20px rgba(30, 144, 255, 0.4);
}

.close-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(30, 144, 255, 0.6);
}

/* GLITCH FLASH - Colorful strobe effect in center area only */
.glitch-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 900px;
  opacity: 0;
  pointer-events: none;
  z-index: 998;
  background: linear-gradient(180deg,
    #00ff88 0%,
    #00d9ff 25%,
    #3b82f6 50%,
    #a855f7 75%,
    #ffd700 100%);
  mix-blend-mode: screen;
  animation: none;
  filter: blur(20px);
}

.glitch-flash.active {
  animation: glitchStrobe 2.5s ease-in-out infinite;
}

@keyframes glitchStrobe {
  0%, 100% { opacity: 0; }
  3% { opacity: 0.4; transform: translate(-50%, -50%) translateX(3px); }
  6% { opacity: 0; }
  12% { opacity: 0.5; transform: translate(-50%, -50%) translateX(-3px); }
  15% { opacity: 0; }
  88% { opacity: 0; }
  91% { opacity: 0.35; transform: translate(-50%, -50%) translateX(2px); }
  94% { opacity: 0; }
}

/* SPOTLIGHT EFFECT - Magical Soft Spotlight */
.spotlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  background: radial-gradient(circle,
    rgba(253, 224, 71, 0.3) 0%,
    rgba(196, 181, 253, 0.2) 15%,
    rgba(147, 197, 253, 0.15) 30%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity 2.5s ease-out, width 2.5s ease-out, height 2.5s ease-out;
  pointer-events: none;
  filter: blur(30px);
  z-index: 999;
  will-change: opacity, width, height;
}

.spotlight.active {
  width: 500px;
  height: 500px;
  opacity: 1;
}





/* CONFETTI CONTAINER */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1002;
  overflow: hidden;
}

/* ===== CELEBRATION EFFECTS (HEARTHSTONE + FIFA MIX) ===== */

/* Hearthstone shimmer ring */
.shimmer-ring {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, var(--tier-color) 50%, transparent 60%);
  box-shadow:
    0 0 40px var(--tier-color),
    0 0 80px var(--tier-color),
    inset 0 0 40px var(--tier-color);
  pointer-events: none;
  z-index: 9999;
  filter: blur(5px);
}

/* FIFA burst particles */
.burst-particle {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  pointer-events: none;
  z-index: 10000;
}

/* Hearthstone sparkle trails */
.sparkle-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px currentColor;
  pointer-events: none;
  z-index: 10001;
}

/* Individual confetti pieces - Enhanced with glassmorphism */
.confetti-piece {
  position: absolute;
  border-radius: 3px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    0 0 8px currentColor,
    0 0 15px currentColor,
    inset 0 0 3px rgba(255, 255, 255, 0.5);
  animation: confettiFall 2.5s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(700px) rotate(1080deg) translateX(calc(-100px + 200px * var(--random-x, 0.5))) scale(0.3);
    opacity: 0;
  }
}

.wheel-pack-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 0;
  padding-top: 20px;
}

/* ── Pack Preview Mini Reel ── */
.psc-reel-area {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.pack-reel-preview {
  position: relative;
  width: 100%;
  height: 68px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.pack-reel-preview:hover .prp-track {
  animation-play-state: paused;
}

.prp-fade-l,
.prp-fade-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  z-index: 2;
  pointer-events: none;
}
.prp-fade-l {
  left: 0;
  background: linear-gradient(to right, rgba(12,14,22,0.95) 0%, transparent 100%);
}
.prp-fade-r {
  right: 0;
  background: linear-gradient(to left, rgba(12,14,22,0.95) 0%, transparent 100%);
}

.prp-track {
  display: flex;
  height: 100%;
  animation: prp-scroll 14s linear infinite;
}

@keyframes prp-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

.prp-item {
  width: 80px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.04);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-primary);
}

.prp-item.tier-rookie { color: #a8b4c0; background: linear-gradient(to bottom, rgba(168,180,192,0.07), transparent); }
.prp-item.tier-bronze { color: #d4884a; background: linear-gradient(to bottom, rgba(212,136,74,0.10), transparent); }
.prp-item.tier-silver { color: #d8dfe8; background: linear-gradient(to bottom, rgba(216,223,232,0.07), transparent); }
.prp-item.tier-gold   { color: #ffd700; background: linear-gradient(to bottom, rgba(255,215,0,0.12), transparent); text-shadow: 0 0 8px rgba(255,215,0,0.4); }
.prp-item.tier-nova   { color: #c084fc; background: linear-gradient(to bottom, rgba(192,132,252,0.14), transparent); text-shadow: 0 0 8px rgba(192,132,252,0.4); }
.prp-item.tier-miss   { color: #3a3a4a; }

/* ══════════════════════════════════════════
   PACK STORE — Full-viewport layout
   ══════════════════════════════════════════ */

/* Packs page content wrapper — avoids fighting global main styles */
.packs-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 60px);
  padding: 10px 24px;
  gap: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Header row ── */
.pack-store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.pack-store-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  font-family: var(--font-primary);
}
.pack-store-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}
.pack-store-header .week-reset-bar {
  padding: 0;
  margin: 0;
  text-align: right;
}

/* ── Main card grid (fills remaining height) ── */
.pack-store-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* ── 2×2 right column ── */
.pack-store-others {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

/* ── Base card ── */
.pack-store-card {
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 3px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
  box-sizing: border-box;
}

.pack-store-card:hover {
  background: rgba(255,255,255,0.05);
}

/* Nova and grid cards fill their grid cells */
.psc-featured,
.pack-store-others .pack-store-card {
  height: 100%;
}

/* Tier accent borders + atmospheric glow */
.pack-store-card.rookie-item {
  border-top-color: #a8b4c0;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(168,180,192,0.08) 0%, rgba(255,255,255,0.02) 100%);
}
.pack-store-card.bronze-item {
  border-top-color: #cd7f32;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(205,127,50,0.1) 0%, rgba(255,255,255,0.02) 100%);
}
.pack-store-card.silver-item.psc-best-value {
  border-top-color: #c0c0c0;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(192,192,192,0.09) 0%, rgba(255,255,255,0.02) 100%);
}
.pack-store-card.gold-item {
  border-top-color: #ffd700;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(255,215,0,0.1) 0%, rgba(255,255,255,0.02) 100%);
}
.pack-store-card.nova-item   {
  border-top-color: #a855f7;
  animation: nova-item-glow 2.5s ease-in-out infinite;
}

/* Nova featured — centre content vertically */
.psc-featured {
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(168,85,247,0.12) 0%, rgba(255,255,255,0.02) 100%);
}

/* 100% watermark — vertical */
.psc-featured::before {
  content: "100%";
  position: absolute;
  font-size: 8rem;
  font-weight: 900;
  font-family: var(--font-primary);
  color: rgba(168,85,247,0.06);
  letter-spacing: -0.04em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

.psc-featured > * { position: relative; z-index: 1; }

.psc-featured .psc-price {
  font-size: 3.5rem;
  letter-spacing: -0.03em;
  text-shadow: 0 0 40px rgba(168,85,247,0.4);
}

.psc-featured .psc-guaranteed {
  font-size: 0.85rem;
  color: rgba(168,85,247,0.8);
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(168,85,247,0.4);
}

.psc-featured .psc-reel-area,
.psc-featured .psc-reel-area .pack-reel-preview {
  width: 240px;
  height: 72px;
}

/* ── Cash Out banner (bottom row, fixed height) ── */
.pack-store-bottom {
  flex-shrink: 0;
}
.pack-store-card.gamble-item {
  border-top-color: #22c55e;
  animation: gamble-item-pulse 2s ease-in-out infinite;
}
@keyframes gamble-item-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(34,197,94,0.2)); }
  50%       { filter: drop-shadow(0 0 14px rgba(34,197,94,0.5)); }
}
.psc-banner {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
}
.psc-banner-wheel { flex-shrink: 0; width: 140px; overflow: hidden; border-radius: 8px; }
.psc-banner-wheel .pack-reel-preview { height: 60px; width: 140px; }
.psc-banner-info  { flex: 1; min-width: 0; }
.psc-banner-price { flex-shrink: 0; }
.psc-banner-tagline {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin: 3px 0 8px;
}

.psc-chip.tier-miss {
  background: rgba(80,80,80,0.2);
  color: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.12);
}

/* Miss modal result */
.miss-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  text-align: center;
}
.miss-icon {
  font-size: 3.5rem;
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239,68,68,0.6);
  line-height: 1;
}
.miss-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
.miss-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  max-width: 260px;
  line-height: 1.5;
}

/* Card header: name + limit badge */
.psc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.psc-name {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.psc-name.gamble { color: #22c55e; text-shadow: 0 0 10px rgba(34,197,94,0.5); }

/* Reel area — fixed size, same approach as psc-banner-wheel */
.psc-reel-area {
  width: 240px;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}

.psc-reel-area .pack-reel-preview {
  width: 240px;
  height: 56px;
}

/* Wheel area (legacy canvas) — same flex behaviour */
.psc-wheel-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 0;
  padding: 4px 0;
}
.psc-wheel-area canvas.static-wheel {
  width: auto;
  height: 100%;
  max-height: 200px;
  aspect-ratio: 1;
}

/* Tier-colored reel glow */
.pack-store-card.rookie-item .psc-reel-area { box-shadow: 0 0 0 1px rgba(168,180,192,0.25), 0 0 18px rgba(168,180,192,0.1); }
.pack-store-card.bronze-item .psc-reel-area { box-shadow: 0 0 0 1px rgba(205,127,50,0.3),  0 0 18px rgba(205,127,50,0.12); }
.pack-store-card.silver-item .psc-reel-area { box-shadow: 0 0 0 1px rgba(192,192,192,0.25), 0 0 18px rgba(192,192,192,0.1); }
.pack-store-card.gold-item   .psc-reel-area { box-shadow: 0 0 0 1px rgba(255,215,0,0.35),   0 0 22px rgba(255,215,0,0.15); }
.pack-store-card.nova-item   .psc-reel-area { box-shadow: 0 0 0 1px rgba(168,85,247,0.4),   0 0 24px rgba(168,85,247,0.18); }
.pack-store-card.gamble-item .psc-reel-area,
.psc-banner-wheel { box-shadow: 0 0 0 1px rgba(34,197,94,0.3), 0 0 18px rgba(34,197,94,0.12); }

/* Price */
.psc-price {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-primary);
  line-height: 1;
  margin-top: auto;
}

/* Odds chips */
.psc-odds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
}
.psc-chip {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.psc-chip.tier-rookie { background: rgba(168,180,192,0.15); color: #a8b4c0; }
.psc-chip.tier-bronze { background: rgba(205,127,50,0.15);  color: #cd7f32; }
.psc-chip.tier-silver { background: rgba(192,192,192,0.15); color: #c0c0c0; }
.psc-chip.tier-gold   { background: rgba(255,215,0,0.15);   color: #ffd700; }
.psc-chip.tier-nova   { background: rgba(168,85,247,0.15);  color: #c084fc; }

/* Best Value ribbon */
.psc-best-value {
  position: relative;
  overflow: hidden;
}
.psc-ribbon {
  position: absolute;
  top: 20px;
  right: -30px;
  width: 130px;
  text-align: center;
  transform: rotate(45deg);
  background: #16a34a;
  color: #ffd700;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 0;
  pointer-events: none;
  z-index: 2;
}

/* "Guaranteed" label on Nova */
.psc-guaranteed {
  font-size: 0.7rem;
  color: rgba(168,85,247,0.7);
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}

/* Packs selector - two big buttons */
.pack-selector {
  display: flex;
  gap: 0;
  width: 100%;
  height: calc(100vh - 60px);
}

.pack-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: filter 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pack-type-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pack-type-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.common-btn:hover:not(:disabled) {
  filter: brightness(1.15);
}

.limited-btn:hover:not(:disabled) {
  filter: brightness(1.15);
}

.pack-type-btn:disabled {
  cursor: not-allowed;
}

/* Common - glassmorphism silver */
.common-btn {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 50%, rgba(192,192,192,0.06) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);
}

.common-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0;
}

.common-btn::before {
  background: linear-gradient(135deg, rgba(210,210,210,0.1) 0%, rgba(255,255,255,0.04) 100%);
}

/* Limited - glassmorphism gold */
.limited-btn {
  background:
    linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0.03) 50%, rgba(180,140,0,0.08) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,215,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.3);
}

.limited-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,215,0,0.08) 0%, transparent 100%);
  pointer-events: none;
}

.limited-btn::before {
  background: linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(255,180,0,0.04) 100%);
}

.pack-type-label {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.common-btn .pack-type-label {
  color: #d0d0d0;
  text-shadow: 0 0 40px rgba(192,192,192,0.3);
}

.limited-btn .pack-type-label {
  color: #c8a800;
  text-shadow: 0 0 40px rgba(255,215,0,0.2);
}

.pack-type-sub {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.common-btn .pack-type-sub {
  color: rgba(192,192,192,0.4);
}

.limited-btn .pack-type-sub {
  color: rgba(200,168,0,0.4);
}

.pack-type-lock {
  font-size: 28px;
  position: absolute;
  top: 28px;
  right: 28px;
  opacity: 0.4;
}

.back-to-packs {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.back-to-packs:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

/* Packs split layout */
.packs-split-container {
  display: flex;
  height: calc(100vh - 60px);
  width: 100%;
}

.packs-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px;
  overflow-y: auto;
}

.packs-common {
  background: linear-gradient(160deg, #0f1219 0%, #141921 100%);
  border-right: none;
}

.packs-limited {
  background: linear-gradient(160deg, #12101a 0%, #1a1228 100%);
}

.packs-divider {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.08), transparent);
  flex-shrink: 0;
}

.packs-half-header {
  text-align: center;
  margin-bottom: 36px;
}

.packs-half-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.packs-common .packs-half-header h2 {
  color: #c0c0c0;
}

.packs-limited .packs-half-header h2 {
  color: #ffd700;
}

.packs-half-header p {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.packs-half-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
}

/* Packs page hero */
.packs-hero {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
}

.packs-hero h1 {
  font-size: var(--text-6xl);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Pack names above wheels */
.pack-name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Tier-specific colors for pack names */
.rookie-pack .pack-name { color: #a8b4c0; }
.bronze-pack .pack-name { color: #cd7f32; }
.silver-pack .pack-name { color: #c0c0c0; }
.gold-pack .pack-name { color: #ffd700; }
.nova-pack .pack-name { color: #a855f7; }

/* New horizontal single-row layout */
.wheel-row-horizontal {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  max-width: 100%;
}

.wheel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 3px solid transparent;
  border-radius: 2px;
  transition: opacity 0.3s ease;
}

/* Tier accent borders — visual hierarchy */
.rookie-item { border-top-color: #a8b4c0; }
.bronze-item { border-top-color: #cd7f32; }
.silver-item { border-top-color: #c0c0c0; }
.gold-item   { border-top-color: #ffd700; }
.nova-item   {
  border-top-color: #a855f7;
  animation: nova-item-glow 2.5s ease-in-out infinite;
}

@keyframes nova-item-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(168,85,247,0.3)); }
  50%       { filter: drop-shadow(0 0 18px rgba(168,85,247,0.65)); }
}

/* Pack limit badge */
/* Pack limit widget */
.plb-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 8px;
}

.plb-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.plb-num.plb-unlimited { font-size: 1.6rem; color: #4ade80; }
.plb-num.plb-last      { color: #fb923c; }
.plb-num.plb-maxed     { color: rgba(255,255,255,0.2); }

.plb-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.plb-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  line-height: 1;
}
.plb-reset {
  font-size: 0.54rem;
  color: rgba(255,255,255,0.22);
  line-height: 1;
  white-space: nowrap;
}

/* Maxed out pack — dim and block interaction */
.wheel-item.pack-maxed {
  opacity: 0.38;
  pointer-events: none;
}

/* Weekly reset countdown bar */
.week-reset-bar {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
  padding: 6px 0 14px;
}

/* Fix pack name colors using item classes */
.rookie-item .pack-name { color: #a8b4c0; }
.bronze-item .pack-name { color: #cd7f32; }
.silver-item .pack-name { color: #c0c0c0; }
.gold-item   .pack-name { color: #ffd700; }
.nova-item   .pack-name { color: #a855f7; }

/* Old pyramid layout (deprecated) */
.wheel-row {
  display: flex;
  gap: 60px;
  justify-content: center;
}

.wheel-row:first-child { justify-content: center; }

.wheel-row:last-child {
  justify-content: center;
  transform: translateX(85px);
}

/* Faint container - attention on the wheel itself */
.wheel-wrapper {
  border: none;
  border-radius: 0;
  padding: 2px;
  background: transparent;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

/* No hover effect on container - only on wheel canvas */
#wheel-canvas {
  transition: all var(--transition-base);
  cursor: pointer;
}

#wheel-canvas:hover {
  filter: brightness(1.1);
}

/* Slow spinning animation for wheels */
.static-wheel {
  animation: slow-spin 20s linear infinite;
  transform-origin: center center;
}

@keyframes slow-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pause spin on hover */
.wheel-wrapper:hover .static-wheel {
  animation-play-state: paused;
}

.pack-label {
  text-align: center;
  margin-top: 10px;
  color: white;
  font-weight: 600;
  font-family: var(--font-primary);
}

/* Wheel info boxes (price + odds) - Real game style */
.wheel-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 200px;
  padding: 8px;
  border-radius: 4px;
  background: transparent;
  border: none;
}

.wheel-price {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #10b981;
  text-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
  letter-spacing: -0.02em;
  animation: price-pulse 2s ease-in-out infinite;
}

@keyframes price-pulse {
  0%, 100% {
    color: #10b981;
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
    transform: scale(1);
  }
  50% {
    color: #34d399;
    text-shadow: 0 0 25px rgba(16, 185, 129, 0.9);
    transform: scale(1.05);
  }
}


.wheel-odds {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.odds-label {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.odds-breakdown {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 4px;
  background: transparent;
  border: none;
}

/* Tier-specific colors for odds text */
.odds-breakdown .tier-rookie { color: #b0b0b0; }
.odds-breakdown .tier-bronze { color: #cd7f32; }
.odds-breakdown .tier-silver { color: #c0c0c0; }
.odds-breakdown .tier-gold { color: #ffd700; }
.odds-breakdown .tier-nova { color: #9333ea; }

/* Pipe separator styling */
.odds-breakdown .pipe {
  color: var(--color-text-tertiary);
  opacity: 0.5;
  margin: 0 4px;
}

.offset-left { transform: translateX(-150.5px); }

/* ========================================
   DECORATIVE ELEMENTS - PACKS PAGE
======================================== */

/* Removed colored corner accents */
.hero-corner-accent {
  display: none;
}

.hero-corner-accent.bottom-right::after {
  right: 0;
  bottom: 0;
}

/* Floating Particles */
.floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--tier-gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--tier-gold-glow);
  animation: float-up 8s infinite ease-in-out;
  opacity: 0;
}

.particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 7s;
}

.particle:nth-child(2) {
  left: 25%;
  animation-delay: 1.5s;
  animation-duration: 9s;
}

.particle:nth-child(3) {
  left: 40%;
  animation-delay: 3s;
  animation-duration: 6s;
}

.particle:nth-child(4) {
  left: 55%;
  animation-delay: 0.5s;
  animation-duration: 8s;
}

.particle:nth-child(5) {
  left: 70%;
  animation-delay: 2s;
  animation-duration: 7.5s;
}

.particle:nth-child(6) {
  left: 85%;
  animation-delay: 1s;
  animation-duration: 8.5s;
}

.particle:nth-child(7) {
  left: 15%;
  animation-delay: 2.5s;
  animation-duration: 9.5s;
}

.particle:nth-child(8) {
  left: 90%;
  animation-delay: 0.8s;
  animation-duration: 7s;
}

@keyframes float-up {
  0% {
    bottom: -10px;
    opacity: 0;
    transform: translateX(0) scale(0.5);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateX(30px) scale(1.2);
  }
}

/* Removed wheel corner decorations */
.wheel-corner-deco {
  display: none;
}

.wheel-corner-deco.tr::after {
  right: 0;
  top: 0;
}

/* Bottom-left corner */
.wheel-corner-deco.bl {
  bottom: -8px;
  left: -8px;
  color: inherit;
}

.wheel-corner-deco.bl::before {
  left: 0;
  bottom: 0;
}

.wheel-corner-deco.bl::after {
  left: 0;
  bottom: 0;
}

/* Bottom-right corner */
.wheel-corner-deco.br {
  bottom: -8px;
  right: -8px;
  color: inherit;
}

.wheel-corner-deco.br::before {
  right: 0;
  bottom: 0;
}

.wheel-corner-deco.br::after {
  right: 0;
  bottom: 0;
}

/* Tier-specific corner colors */
.rookie-pack .wheel-corner-deco { color: var(--tier-rookie); }
.bronze-pack .wheel-corner-deco { color: var(--tier-bronze); }
.silver-pack .wheel-corner-deco { color: var(--tier-silver); }
.gold-pack .wheel-corner-deco { color: var(--tier-gold); }
.nova-pack .wheel-corner-deco { color: var(--tier-nova); }

/* Wheel Glow Ring */
.wheel-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.3;
  animation: pulse-ring 3s ease-in-out infinite;
}

.rookie-pack .wheel-glow-ring {
  background: radial-gradient(circle, transparent 60%, var(--tier-rookie-glow) 100%);
}

.bronze-pack .wheel-glow-ring {
  background: radial-gradient(circle, transparent 60%, var(--tier-bronze-glow) 100%);
}

.silver-pack .wheel-glow-ring {
  background: radial-gradient(circle, transparent 60%, var(--tier-silver-glow) 100%);
}

.gold-pack .wheel-glow-ring {
  background: radial-gradient(circle, transparent 60%, var(--tier-gold-glow) 100%);
}

.nova-pack .wheel-glow-ring {
  background: radial-gradient(circle, transparent 60%, var(--tier-nova-glow) 100%);
}

@keyframes pulse-ring {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
  }
}

.wheel-wrapper:hover .wheel-glow-ring {
  animation-play-state: paused;
  opacity: 0.6;
}

/* Price Badge Wrapper with extra flair */
.price-badge-wrapper {
  position: relative;
  padding: 0;
}

/* Wheel Particles - Enhanced Refined Orbit Animation */
.wheel-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.wheel-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform-origin: 0 0;
  filter: blur(0.5px);
}

/* Rookie particles - subtle gray */
.rookie-pack .wheel-particle {
  background: radial-gradient(circle, var(--tier-rookie) 0%, transparent 70%);
  box-shadow:
    0 0 8px var(--tier-rookie-glow),
    0 0 12px var(--tier-rookie-glow),
    0 0 16px rgba(168, 180, 192, 0.2);
  animation: orbit-particle-refined 8s infinite ease-in-out;
}

/* Bronze particles - warm glow */
.bronze-pack .wheel-particle {
  background: radial-gradient(circle, var(--tier-bronze) 0%, transparent 70%);
  box-shadow:
    0 0 10px var(--tier-bronze-glow),
    0 0 15px var(--tier-bronze-glow),
    0 0 20px rgba(205, 127, 50, 0.3);
  animation: orbit-particle-refined 8s infinite ease-in-out;
}

/* Silver particles - metallic shimmer */
.silver-pack .wheel-particle {
  background: radial-gradient(circle, var(--tier-silver) 0%, transparent 70%);
  box-shadow:
    0 0 12px var(--tier-silver-glow),
    0 0 18px var(--tier-silver-glow),
    0 0 24px rgba(156, 163, 175, 0.3);
  animation: orbit-particle-refined 8s infinite ease-in-out;
}

/* Gold particles - bright shimmer */
.gold-pack .wheel-particle {
  background: radial-gradient(circle, var(--tier-gold) 0%, transparent 70%);
  box-shadow:
    0 0 15px var(--tier-gold-glow),
    0 0 20px var(--tier-gold-glow),
    0 0 25px rgba(244, 183, 40, 0.4);
  animation: orbit-particle-refined 7s infinite ease-in-out;
}

/* Nova particles - intense purple glow */
.nova-pack .wheel-particle {
  background: radial-gradient(circle, var(--tier-nova) 0%, transparent 70%);
  box-shadow:
    0 0 18px var(--tier-nova-glow),
    0 0 25px var(--tier-nova-glow),
    0 0 35px rgba(168, 85, 247, 0.5);
  animation: orbit-particle-refined 6s infinite ease-in-out;
}

/* Stagger particles with varied orbits and timing */
.wheel-particle:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 8s;
}

.wheel-particle:nth-child(2) {
  animation-delay: 1.6s;
  animation-duration: 9s;
}

.wheel-particle:nth-child(3) {
  animation-delay: 3.2s;
  animation-duration: 7.5s;
}

.wheel-particle:nth-child(4) {
  animation-delay: 4.8s;
  animation-duration: 8.5s;
}

.wheel-particle:nth-child(5) {
  animation-delay: 6.4s;
  animation-duration: 9.5s;
}

/* Refined orbit animation with smooth easing */
@keyframes orbit-particle-refined {
  0% {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
    opacity: 0;
    scale: 0.3;
  }
  5% {
    opacity: 0.6;
    scale: 0.8;
  }
  15% {
    opacity: 1;
    scale: 1;
  }
  85% {
    opacity: 1;
    scale: 1;
  }
  95% {
    opacity: 0.6;
    scale: 0.8;
  }
  100% {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
    opacity: 0;
    scale: 0.3;
  }
}

/* Enhanced hover effect - slow down and brighten */
.wheel-wrapper:hover .wheel-particle {
  animation-play-state: running;
  filter: blur(0.3px) brightness(1.3);
}

/********************************************************
  PACK OPENING — RESULT / CONFETTI
*********************************************************/
#pack-result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

@keyframes confetti-fall {
  0%   { transform: translateY(-100vh) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(100vh)  rotate(720deg); opacity: 0; }
}

.confetti {
  position: fixed;
  width: 15px;
  height: 15px;
  opacity: 0;
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
  animation: confetti-fall 3s linear forwards;
}

/********************************************************
  CLUB (grid + empty slots)
*********************************************************/

/* Club title row - clean header */
.club-title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.club-title-wrapper {
  flex: 1;
}

.club-title-row h1 {
  margin: 0 0 4px 0;
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
}

.club-subtitle {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  margin: 0;
}

/* Sync NFT button - clean and professional */
.sync-nft-btn.futuristic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.sync-nft-btn.futuristic:hover {
  background: var(--color-surface);
  border-color: var(--color-border-accent);
  transform: translateY(-1px);
}

.sync-nft-btn.futuristic:active {
  transform: translateY(0);
}

/* Button elements - simplified */
.btn-border,
.btn-glow {
  display: none;
}

.btn-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.sync-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
}

/* Pagination controls - clean design */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.binder-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.binder-nav-btn:hover:not(:disabled) {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-accent);
}

.binder-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
}

.page-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-numbers {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

/* Removed all green glow animations */

/* ========================================
   PAGINATION CONTAINER - UNIQUE DESIGN
======================================== */

.pagination-container {
  position: relative;
  padding: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 16px;
  border: 1px solid rgba(0, 255, 136, 0.4);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Corner Accents */
.pagination-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #00ff88;
  pointer-events: none;
}

.pagination-corner.tl {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 4px;
}

.pagination-corner.tr {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 4px;
}

.pagination-corner.bl {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 4px;
}

.pagination-corner.br {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 4px;
}

/* Animated Glow Line */
.pagination-glow-line {
  position: absolute;
  top: -1px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff88, #00d9ff, #00ff88, transparent);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  animation: glow-sweep 3s ease-in-out infinite;
}

@keyframes glow-sweep {
  0%, 100% {
    opacity: 0.4;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(10px);
  }
}

.page-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 600;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 217, 255, 0.05));
  border: 1px solid rgba(0, 255, 136, 0.3);
  box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.1);
  min-width: 120px;
  text-align: center;
}

.page-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  color: #00ff88;
}

.page-numbers {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #00d9ff;
}

/* ====== CLUB PAGE ====== */

body.club-page main.club-main {
  padding: 0;
  height: calc(100vh - 60px);
  overflow: hidden;
  align-items: stretch;
}

body.club-page .tab-content {
  display: none;
  height: 100%;
}
body.club-page .tab-content.active { display: flex; }

.club-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

/* ── Left panel ── */
.club-panel {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border-right: 1px solid #1c1c1c;
  box-sizing: border-box;
  gap: 0;
}

.cp-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.cp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.cp-stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.cp-stat-lbl {
  font-size: 0.6rem;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cp-divider {
  height: 1px;
  background: #1c1c1c;
  margin: 14px 0;
  flex-shrink: 0;
}

.cp-chart-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.cp-chart { display: flex; flex-direction: column; gap: 7px; }

.cp-chart-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cp-chart-name {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  width: 38px;
  flex-shrink: 0;
}

.cp-bar-track {
  flex: 1;
  height: 4px;
  background: #1c1c1c;
  border-radius: 2px;
  overflow: hidden;
}

.cp-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.cp-chart-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  width: 16px;
  text-align: right;
  flex-shrink: 0;
}

.cp-spacer { flex: 1; }

.cip-sync-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid #252525;
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-bottom: 14px;
}
.cip-sync-btn:hover { border-color: #3a3a3a; color: rgba(255,255,255,0.8); }
.cip-sync-btn--white {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  font-weight: 600;
}
.cip-sync-btn--white:hover { border-color: #fff; color: #fff; }

.cp-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cp-pagination .binder-nav-btn {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  color: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.cp-pagination .binder-nav-btn:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
}
.cp-pagination .binder-nav-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.cp-pagination .page-indicator { padding: 0; }
.cp-pagination .page-numbers {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff !important;
}

/* ── Card area: formation + subs ── */
.club-card-area {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
}

/* ── Formation pitch ── */
.formation-view {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* SVG pitch field — fills the view, stays fixed behind scrolling cards */
.formation-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.formation-pitch {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 20px 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.formation-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  flex-shrink: 0;
}

/* 1-card row: only striker, keep centered */
#formation-row-0 { justify-content: center; }

/* Formation card slot: scaled 195×290 → 140×209 */
.formation-slot {
  width: 140px;
  height: 209px;
  position: relative;
  flex-shrink: 0;
  cursor: grab;
}
.formation-slot:active { cursor: grabbing; }


.card-scale-wrap {
  width: 195px;
  height: 290px;
  transform: scale(0.72);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

/* Drag states */
.formation-slot.card-drag-over {
  outline: 2px dashed rgba(255,255,255,0.5);
  outline-offset: 3px;
  border-radius: 8px;
}
.formation-slot.card-dragging { opacity: 0.35; }
.sub-row.card-drag-over { background: rgba(255,255,255,0.08); border-radius: 7px; }
.sub-row.card-dragging { opacity: 0.35; }
.subs-list.bench-drag-over { background: rgba(255,255,255,0.03); border-radius: 8px; }

.slot-empty {
  width: 152px;
  height: 226px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.slot-empty.card-drag-over {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
}
.slot-empty-inner { font-size: 1.2rem; color: rgba(255,255,255,0.12); }

.formation-empty-state {
  text-align: center;
  padding: 40px 20px;
}

/* ── Live match ticker ── */
.live-ticker {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(200, 20, 20, 0.92);
  border: 1px solid rgba(255, 80, 80, 0.45);
  border-radius: 20px;
  padding: 3px 8px 3px 5px;
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(200,20,20,0.5);
  animation: ticker-glow 2s ease-in-out infinite;
}
.live-ticker:hover { background: rgba(220, 30, 30, 1); }

.live-ticker-dot {
  width: 5px;
  height: 5px;
  background: #ff6b6b;
  border-radius: 50%;
  flex-shrink: 0;
  animation: dot-blink 1s ease-in-out infinite;
}

@keyframes ticker-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(200,20,20,0.5); }
  50%       { box-shadow: 0 2px 14px rgba(200,20,20,0.85); }
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── Subs bench ── */
.subs-bench {
  width: 200px;
  flex-shrink: 0;
  border-left: 1px solid #1c1c1c;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.subs-bench-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.subs-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.subs-list::-webkit-scrollbar { width: 3px; }
.subs-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.sub-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
.sub-row:hover { background: rgba(255,255,255,0.04); }

/* Sub card: 195×290 scaled to 58×86 */
.sub-card-wrap {
  width: 58px;
  height: 86px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
}
.sub-card-scale-wrap {
  width: 195px;
  height: 290px;
  transform: scale(0.297);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

.sub-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sub-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-tier {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sub-tier-nova    { color: #a855f7; }
.sub-tier-gold    { color: #ffd700; }
.sub-tier-silver  { color: #c0c0c0; }
.sub-tier-bronze  { color: #cd7f32; }
.sub-tier-rookie  { color: rgba(255,255,255,0.3); }

.subs-empty {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.15);
  text-align: center;
  padding: 20px 0;
}

/* Empty state */
.club-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}
.club-empty-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.3; }
.club-empty-title { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.4); margin: 0 0 6px; }
.club-empty-sub { font-size: 0.8rem; color: rgba(255,255,255,0.2); margin: 0 0 18px; }
.club-empty-cta {
  display: inline-block;
  padding: 9px 22px;
  background: #fff;
  border-radius: 6px;
  color: #000;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.club-empty-cta:hover { opacity: 0.85; }

/* Value chart - small (panel) */
.cp-chart-expand-hint {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

.cp-value-chart {
  width: 100%;
  border: 1px solid #1c1c1c;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}
.cp-value-chart:hover { border-color: #333; }
.cp-value-chart svg { display: block; width: 100%; height: auto; }

/* Expanded chart overlay */
.chart-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.chart-overlay-box {
  position: relative;
  z-index: 1;
  background: #0e0e0e;
  border: 1px solid #242424;
  border-radius: 10px;
  padding: 24px;
  width: 620px;
  max-width: 90vw;
}
.chart-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.chart-overlay-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.chart-overlay-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  transition: color 0.15s;
}
.chart-overlay-close:hover { color: #fff; }

.club-bg-radial { display: none; }
.binder-container { background: transparent; overflow: visible; }

/* Removed shimmer animation for cleaner look */


/* Removed decorative frame - cleaner binder aesthetic */
.cards-frame,
.frame-accent-line,
.frame-corner {
  display: none;
}

.frame-corner.top-left-corner {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
  animation-delay: 0s;
}

.frame-corner.top-right-corner {
  top: -10px;
  right: -10px;
  border-left: none;
  border-bottom: none;
  animation-delay: 0.75s;
}

.frame-corner.bottom-left-corner {
  bottom: -10px;
  left: -10px;
  border-right: none;
  border-top: none;
  animation-delay: 1.5s;
}

.frame-corner.bottom-right-corner {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
  animation-delay: 2.25s;
}

@keyframes corner-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.8);
  }
}

/* Pulsing Glow Effect */
.frame-glow-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(135deg,
    rgba(6, 182, 212, 0.1),
    rgba(59, 130, 246, 0.1),
    rgba(139, 92, 246, 0.1));
  animation: glow-breath 4s ease-in-out infinite;
}

@keyframes glow-breath {
  0%, 100% {
    opacity: 0.2;
    box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.2);
  }
  50% {
    opacity: 0.4;
    box-shadow: inset 0 0 40px rgba(6, 182, 212, 0.4),
                inset 0 0 60px rgba(59, 130, 246, 0.2);
  }
}

.slot.placeholder {
  width: 195px;
  height: 290px;
  border-radius: 16px;
  background: linear-gradient(145deg, #2c3242, #1f2635);
  box-shadow: inset 0 0 0 1px #ffffff10, 0 2px 8px #00000050;
  opacity: 0.8;
  display: grid;
  place-items: center;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: #cbd5e1;
  letter-spacing: 0.4px;
  user-select: none;
  position: relative;
  overflow: hidden;
  margin: var(--space-2);
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.3));
}

/* Animated gradient border */
.slot.placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    var(--tier-bronze) 25%,
    var(--tier-silver) 50%,
    var(--tier-gold) 75%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  mask-composite: exclude;
  background-size: 300% 300%;
  animation: gradient-rotate 4s linear infinite;
  opacity: 0.5;
}

@keyframes gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pulsing glow effect */
.slot.placeholder::after {
  content: 'Empty Slot';
  position: relative;
  z-index: 1;
  display: block;
  animation: pulse-glow-text 2s ease-in-out infinite;
}

@keyframes pulse-glow-text {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/********************************************************
  FORMATION + BENCH + CONTEXT MENU
*********************************************************/
#formation-container {
  margin: 20px auto;
  width: 90%;
  max-width: 1100px;
}

.row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 20px 0;
  flex-wrap: nowrap;
}

.position {
  width: 211px;
  height: 306px;
  border: 2px dashed #888;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-primary);
  font-weight: bold;
  border-radius: 12px;
  background-color: rgba(255,255,255,0.05);
  text-align: center;
  position: relative;
}

.player-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 211px;
  height: 306px;
  border: none;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}


#bench-row {
  overflow-x: auto;
  display: flex;
  gap: 30px;
  padding: 15px 10px;
  justify-content: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#bench-row::-webkit-scrollbar { height: 6px; }
#bench-row::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
#bench-row .player-box { flex: 0 0 auto; }

.context-menu {
  position: absolute;
  background: #1a1f2c;
  border: 1px solid #8c8c8c;
  color: white;
  padding: 6px;
  z-index: 999;
  display: none;
  flex-direction: column;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  min-width: 140px;
  box-shadow: var(--shadow-sm);
}

.context-menu button {
  background: transparent;
  border: none;
  color: white;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-primary);
  transition: background var(--transition-fast);
}

.context-menu button:hover { background: rgba(255, 255, 255, 0.1); }

/********************************************************
  3D CARD (flip) - Modern Glassmorphism
*********************************************************/
.player-card-3d {
  width: 195px;
  height: 290px;
  perspective: 1000px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.3));
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.player-card-3d .card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.player-card-3d:hover .card-inner { transform: rotateY(180deg); }

.player-card-3d .card-front,
.player-card-3d .card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  color: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary);
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

.player-card-3d .card-front {
  background: linear-gradient(180deg, #1a2129 0%, #0d1117 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
              inset 0 0 0 1px rgba(255,255,255,0.08),
              inset 0 1px 0 rgba(255,255,255,0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: flex-start;
  align-items: flex-start;
}

/* ── Price change badge — lives inside card-front so it flips with the card ── */
.player-card-3d .card-price-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--font-primary);
  letter-spacing: 0.02em;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1.5;
  transform: translateZ(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.player-card-3d .card-price-badge.badge-up {
  background: #15803d;
  color: #86efac;
  border: 1px solid rgba(134,239,172,0.25);
}
.player-card-3d .card-price-badge.badge-down {
  background: #991b1b;
  color: #fca5a5;
  border: 1px solid rgba(252,165,165,0.25);
}

/* ── Holographic shimmer overlay ── */
.player-card-3d .card-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s;
  mix-blend-mode: screen;
  z-index: 3;
}

/* ── Position badge ── */
.player-card-3d .card-pos-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  transform: translateZ(4px);
  color: #fff;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.player-card-3d .card-front h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 8px 0;
}

/* Card front - photo fills full card height */
.card-photo-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(160deg, #2c3340 0%, #1a2030 50%, #141c28 100%);
}

.player-photo-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #1a2030 0%, #0d1117 100%);
}

.player-card-3d.tier-rookie .card-photo-area,
.player-card-3d.tier-bronze .card-photo-area,
.player-card-3d.tier-silver .card-photo-area,
.player-card-3d.tier-gold .card-photo-area,
.player-card-3d.tier-nova .card-photo-area,
.player-card-3d.tier-legendary .card-photo-area {
  background: #ffffff;
}

/* Name bar — frosted gradient overlay at card bottom */
.card-name-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.52) 50%, transparent 100%);
  z-index: 1;
}

.card-name-text {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Tier bar accent — thin bottom border line only */
.tier-bar-rookie   { border-bottom: 3px solid rgba(168,180,192,0.85); }
.tier-bar-bronze   { border-bottom: 3px solid #cd7f32; }
.tier-bar-silver   { border-bottom: 3px solid #c0c0c0; }
.tier-bar-gold     { border-bottom: 3px solid #ffd700; }
.tier-bar-nova     { border-bottom: 3px solid #a855f7; }
.tier-bar-legendary { border-bottom: 3px solid #ffd700; }
.tier-bar-tier-1   { border-bottom: 3px solid rgba(168,180,192,0.85); }
.tier-bar-tier-2   { border-bottom: 3px solid #cd7f32; }
.tier-bar-tier-3   { border-bottom: 3px solid #c0c0c0; }
.tier-bar-tier-4   { border-bottom: 3px solid #ffd700; }
.tier-bar-tier-5   { border-bottom: 3px solid #a855f7; }

.player-card-3d .card-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #1a2129 0%, #0d1117 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
              inset 0 0 0 1px rgba(255,255,255,0.08),
              inset 0 1px 0 rgba(255,255,255,0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: flex-start;
  align-items: stretch;
}

/* Remove tier-specific card colors - all cards same style */
/* Tier-based subtle color overlays - increasing intensity by rank */

/* Rookie - Steel metallic gradient border */
.player-card-3d.tier-rookie .card-front,
.player-card-3d.tier-rookie .card-back {
  background:
    linear-gradient(160deg, #2c3340 0%, #1a2030 30%, #252d3a 60%, #141c28 100%) padding-box,
    linear-gradient(135deg, rgba(90,100,110,0.6) 0%, rgba(200,210,220,0.95) 40%, rgba(120,132,144,0.65) 60%, rgba(70,80,90,0.55) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 14px rgba(168,180,192,0.12),
              inset 0 1px 0 rgba(200,210,220,0.12);
}

/* Bronze - Copper metallic gradient border */
.player-card-3d.tier-bronze .card-front,
.player-card-3d.tier-bronze .card-back {
  background:
    linear-gradient(160deg, #3a2a1a 0%, #2a1e10 30%, #4a3020 55%, #1e1408 100%) padding-box,
    linear-gradient(135deg, rgba(100,52,22,0.7) 0%, rgba(240,160,80,0.98) 42%, rgba(205,127,50,0.85) 58%, rgba(90,46,18,0.65) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 20px rgba(205,127,50,0.32),
              inset 0 1px 0 rgba(240,160,80,0.16);
}

/* Silver - Polished silver metallic gradient border */
.player-card-3d.tier-silver .card-front,
.player-card-3d.tier-silver .card-back {
  background:
    linear-gradient(160deg, #2e3240 0%, #1c2030 30%, #38404e 55%, #14181f 100%) padding-box,
    linear-gradient(135deg, rgba(90,90,90,0.6) 0%, rgba(232,232,232,0.98) 42%, rgba(180,180,180,0.85) 58%, rgba(80,80,80,0.6) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 24px rgba(192,192,192,0.35),
              inset 0 1px 0 rgba(232,232,232,0.16);
}

/* Gold - Burnished gold metallic gradient border */
.player-card-3d.tier-gold .card-front,
.player-card-3d.tier-gold .card-back {
  background:
    linear-gradient(160deg, #3a3010 0%, #261e08 30%, #4a3c14 55%, #1a1508 100%) padding-box,
    linear-gradient(135deg, rgba(100,76,0,0.7) 0%, rgba(255,215,0,1) 40%, rgba(212,160,23,0.9) 58%, rgba(90,68,0,0.65) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 28px rgba(255,215,0,0.42),
              inset 0 1px 0 rgba(255,220,80,0.2);
}

/* Nova - Dark amethyst metallic gradient border */
.player-card-3d.tier-nova .card-front,
.player-card-3d.tier-nova .card-back {
  background:
    linear-gradient(160deg, #2e1a42 0%, #1c1030 30%, #3a2050 55%, #100c1e 100%) padding-box,
    linear-gradient(135deg, rgba(58,20,110,0.7) 0%, rgba(192,132,252,0.98) 40%, rgba(139,63,216,0.88) 60%, rgba(48,14,90,0.65) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 32px rgba(168,85,247,0.45),
              inset 0 1px 0 rgba(192,130,252,0.2);
}

/* Legendary - Gold-purple mythic gradient border */
.player-card-3d.tier-legendary .card-front,
.player-card-3d.tier-legendary .card-back {
  background:
    linear-gradient(160deg, #3a2c10 0%, #241a08 25%, #3a1e4a 55%, #120e1c 100%) padding-box,
    linear-gradient(135deg, rgba(100,76,0,0.7) 0%, rgba(255,215,0,0.95) 30%, rgba(192,132,252,0.92) 65%, rgba(100,76,0,0.7) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 34px rgba(255,215,0,0.4), 0 0 55px rgba(168,85,247,0.28),
              inset 0 1px 0 rgba(255,220,80,0.16);
}

/* Unknown/Blue tiers inherit default metallic silver styling from base .card-front/.card-back */

/* ── Card back — structured layout ── */
.cb-header {
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  text-align: left;
}
.cb-tier-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.tier-header-rookie .cb-tier-label    { color: #a8b4c0; }
.tier-header-bronze .cb-tier-label    { color: #cd7f32; }
.tier-header-silver .cb-tier-label    { color: #c0c0c0; }
.tier-header-gold .cb-tier-label      { color: #ffd700; }
.tier-header-nova .cb-tier-label      { color: #c084fc; }
.tier-header-legendary .cb-tier-label { color: #ffd700; }

.cb-name {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 12px 14px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  text-align: left;
}

.cb-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 14px 8px;
  gap: 0;
}

.cb-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cb-stat:last-child { border-bottom: none; }

.cb-stat-lbl {
  font-size: 0.54rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.32);
}

.cb-stat-val {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  max-width: 105px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.cb-footer-line {
  height: 3px;
  flex-shrink: 0;
  border-radius: 0 0 10px 10px;
}
.tier-accent-rookie    { background: rgba(168,180,192,0.85); }
.tier-accent-bronze    { background: linear-gradient(90deg, #7a4020, #cd7f32, #7a4020); }
.tier-accent-silver    { background: linear-gradient(90deg, #6a6a6a, #e8e8e8, #6a6a6a); }
.tier-accent-gold      { background: linear-gradient(90deg, #7a5c00, #ffd700, #7a5c00); }
.tier-accent-nova      { background: linear-gradient(90deg, #4a1a8a, #c084fc, #4a1a8a); }
.tier-accent-legendary { background: linear-gradient(90deg, #ffd700, #c084fc, #ffd700); }

/********************************************************
  MARKETPLACE
*********************************************************/
#marketplace-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.buy-button {
  background: linear-gradient(180deg, var(--color-success) 0%, #0d9488 100%);
  border: none;
  padding: 8px 16px;
  width: 90%;
  font-size: 14px;
  font-family: var(--font-primary);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-lg);
  color: white;
  transition: all var(--transition-fast);
}

.buy-button:hover {
  background: linear-gradient(135deg, var(--color-success-dark) 0%, #0a7860 100%);
  box-shadow: var(--shadow-lg), 0 8px 24px var(--color-success-glow);
  transform: translateY(-2px);
}

.buy-button:active {
  transform: translateY(0);
}

.buy-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Marketplace header with status badge */
/* Marketplace header - minimal centered status */
.marketplace-header-minimal {
  display: flex;
  justify-content: center;
  padding: 40px 0;
  margin-bottom: 40px;
  margin-right: 280px;
}

.market-status-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.status-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: 700;
  text-align: center;
  border-radius: 12px;
  letter-spacing: 0.1em;
  border: 2px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  min-width: 240px;
}

.market-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: 700;
  text-align: center;
  border-radius: 12px;
  letter-spacing: 0.1em;
  border: 2px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  min-width: 240px;
}

/* OPEN status - green glassmorphism */
.status-badge.open {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 217, 255, 0.1));
  border-color: #00ff88;
  color: #00ff88;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.8),
               0 0 30px rgba(0, 217, 255, 0.5);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.4),
              0 0 60px rgba(0, 217, 255, 0.2),
              inset 0 0 20px rgba(0, 255, 136, 0.1);
  animation: pulse-green-glass 2s ease-in-out infinite;
}

/* CLOSED status - red glassmorphism */
.status-badge.closed {
  background: linear-gradient(135deg, rgba(255, 0, 100, 0.15), rgba(255, 50, 50, 0.1));
  border-color: rgba(255, 50, 100, 0.8);
  color: #ff3366;
  text-shadow: 0 0 15px rgba(255, 50, 100, 0.8),
               0 0 30px rgba(255, 0, 100, 0.5);
  box-shadow: 0 0 30px rgba(255, 50, 100, 0.4),
              0 0 60px rgba(255, 0, 100, 0.2),
              inset 0 0 20px rgba(255, 50, 100, 0.1);
  animation: pulse-red-glass 2s ease-in-out infinite;
}

/* CHECKING status - yellow glassmorphism */
.status-badge.checking {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 255, 100, 0.1));
  border-color: rgba(255, 215, 0, 0.8);
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
               0 0 30px rgba(255, 255, 100, 0.5);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3),
              inset 0 0 20px rgba(255, 215, 0, 0.1);
  animation: pulse-yellow-glass 1.5s ease-in-out infinite;
}

/* Glassmorphism pulse animations */
@keyframes pulse-green-glass {
  0%, 100% {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4),
                0 0 60px rgba(0, 217, 255, 0.2),
                inset 0 0 20px rgba(0, 255, 136, 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.6),
                0 0 80px rgba(0, 217, 255, 0.4),
                inset 0 0 30px rgba(0, 255, 136, 0.2);
    transform: scale(1.02);
  }
}

@keyframes pulse-red-glass {
  0%, 100% {
    box-shadow: 0 0 30px rgba(255, 50, 100, 0.4),
                0 0 60px rgba(255, 0, 100, 0.2),
                inset 0 0 20px rgba(255, 50, 100, 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 50, 100, 0.6),
                0 0 80px rgba(255, 0, 100, 0.4),
                inset 0 0 30px rgba(255, 50, 100, 0.2);
    transform: scale(1.02);
  }
}

@keyframes pulse-yellow-glass {
  0%, 100% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3),
                inset 0 0 20px rgba(255, 215, 0, 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5),
                inset 0 0 30px rgba(255, 215, 0, 0.15);
    transform: scale(1.02);
  }
}

/* Market message */
.market-message {
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  text-align: center;
  margin: 0;
  font-style: normal;
  max-width: 700px;
}

.market-closed-banner {
  border: 1px solid rgba(255,0,0,.6);
  color: #fff;
  background: linear-gradient(145deg, #3a0e12, #1a0a0b);
  padding: 10px 16px;
  border-radius: 10px;
  text-align: center;
  margin: 10px auto 20px;
  max-width: 520px;
  text-shadow: 0 0 8px red, 0 0 14px red;
}

/* Floating filter */
.filter-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1001;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #ffffffaa;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  font-weight: 700;
  cursor: pointer;
}

.filter-panel {
  position: fixed;
  right: 22px;
  bottom: 74px;
  width: 260px;
  z-index: 1001;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #ffffff44;
  background: rgba(11,15,26,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}

.filter-row { display: grid; gap: 8px; margin-bottom: 10px; }
.filter-row.two { grid-template-columns: 1fr 1fr; gap: 8px; }

.filter-panel input,
.filter-panel select {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid #ffffff33;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-2);
  font-family: var(--font-primary);
}

.filter-actions { display:flex; gap:8px; justify-content:flex-end; }
.filter-actions .ghost {
  background: transparent;
  border: 1px solid #ffffff44;
}

/********************************************************
  NEWS
*********************************************************/
#news-section {
  padding: 20px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

#news-section h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-weight: 600;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.news-box {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-base);
  text-align: left;
}

.news-box:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.news-box h3 {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-weight: 600;
}

.news-box ul { list-style: none; padding-left: 0; margin: 0; }
.news-box li {
  font-size: 16px;
  color: var(--color-text-secondary);
  padding: 12px;
  line-height: 1.5;
  position: relative;
  border-radius: 4px;
  transition: all var(--transition-base);
}

/* Coming Soon styling */
.news-box li.coming-soon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-style: italic;
  color: var(--color-text-tertiary);
  font-size: 15px;
}

.news-box li.coming-soon::before {
  content: '⏳ ';
  margin-right: var(--space-2);
}

/********************************************************
  LIVE SCORES (cards)
*********************************************************/

/* Hero section for scores page */
.scores-hero {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(59, 130, 246, 0.15) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.2),
              inset 0 0 60px rgba(59, 130, 246, 0.05);
}

.live-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
  animation: pulse-live-dot 2s ease-in-out infinite;
}

.live-dot.inactive {
  background: #64748b;
  box-shadow: none;
  animation: none;
}

@keyframes pulse-live-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* Match sections */
.match-section {
  margin-bottom: var(--space-12);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  transition: color var(--transition-base);
}

.section-title:hover {
  color: var(--color-primary);
}

.section-icon {
  font-size: var(--text-xl);
}

.live-pulse {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
  animation: pulse-live-dot 2s ease-in-out infinite;
}

.matches-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

.scores-grid {
  padding: var(--space-6);
}

/* Match cards - Glassmorphism design */
.match-card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg,
    rgba(44, 50, 66, 0.6) 0%,
    rgba(31, 38, 53, 0.4) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base),
              transform var(--transition-fast);
  overflow: hidden;
  cursor: pointer;
}

/* Status-based border colors */
.match-card.live {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(16, 185, 129, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.match-card.finished {
  border-color: rgba(100, 116, 139, 0.4);
  opacity: 0.85;
}

.match-card.upcoming {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 15px rgba(59, 130, 246, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.match-card:hover {
  transform: translateY(-4px) perspective(1000px) rotateX(2deg);
  border-color: rgba(30, 144, 255, 0.8);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 0 30px rgba(30, 144, 255, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.match-card:active {
  transform: translateY(-2px) scale(0.99);
}

/* Card background accent */
.match-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-primary) 50%,
    transparent 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.match-card:hover::before {
  opacity: 0.6;
}

/* Animated gradient border for live matches */
.match-card.live::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(16, 185, 129, 0.4) 25%,
    rgba(59, 130, 246, 0.4) 50%,
    rgba(16, 185, 129, 0.4) 75%,
    transparent 100%
  );
  background-size: 300% 300%;
  animation: gradient-rotate 4s linear infinite;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

/* Live match status badges */
.match-status-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.match-status-badge.live {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.5);
  animation: pulse-badge 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.match-status-badge.halftime {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.5);
}

.match-status-badge.finished {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.4);
}

@keyframes pulse-badge {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
  }
}

/* Match teams layout */
.match-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.team-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: transform var(--transition-fast);
  position: relative;
}

.team-logo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(30, 144, 255, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
}

.match-card:hover .team-logo {
  transform: scale(1.1);
}

.match-card:hover .team-logo::after {
  opacity: 1;
}

.team-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.3;
}

/* Match score */
.match-score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-4xl);
  font-weight: 700;
}

.score-number {
  transition: all var(--transition-base);
}

/* Score colors based on result */
.score-number.winning {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.score-number.losing {
  color: #ef4444;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.score-number.drawing {
  color: #94a3b8;
  text-shadow: 0 0 10px rgba(148, 163, 184, 0.3);
}

/* Default color for upcoming matches */
.score-number:not(.winning):not(.losing):not(.drawing) {
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(30, 144, 255, 0.3);
}

/* Pulse animation for live matches */
.match-card.live .score-number.winning {
  animation: score-pulse-green 2s ease-in-out infinite;
}

.match-card.live .score-number.losing {
  animation: score-pulse-red 2s ease-in-out infinite;
}

.match-card.live .score-number.drawing {
  animation: score-pulse-gray 2s ease-in-out infinite;
}

@keyframes score-pulse-green {
  0%, 100% {
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.8),
                 0 0 30px rgba(16, 185, 129, 0.5);
  }
}

@keyframes score-pulse-red {
  0%, 100% {
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.8),
                 0 0 30px rgba(239, 68, 68, 0.5);
  }
}

@keyframes score-pulse-gray {
  0%, 100% {
    text-shadow: 0 0 10px rgba(148, 163, 184, 0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(148, 163, 184, 0.6),
                 0 0 30px rgba(148, 163, 184, 0.3);
  }
}

.score-separator {
  font-size: var(--text-2xl);
  color: var(--color-text-tertiary);
}

/* Match details (venue, time) */
.match-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.match-venue {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.match-venue::before {
  content: '📍';
  font-size: var(--text-sm);
}

.match-time {
  font-weight: 600;
  color: var(--color-text-tertiary);
}

/* Skeleton loading state */
.match-card.skeleton {
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.05);
}

.skeleton-badge,
.skeleton-logo,
.skeleton-text,
.skeleton-score {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 60px;
  height: 24px;
}

.skeleton-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.skeleton-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.skeleton-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-text {
  width: 80px;
  height: 16px;
}

.skeleton-score {
  width: 80px;
  height: 40px;
}

/* Error state */
.error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-secondary);
}

.error-message-icon {
  font-size: var(--text-6xl);
  margin-bottom: var(--space-4);
}

.error-message-text {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.error-message-detail {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Old styles kept for backwards compatibility */
.team img { width: 32px; height: 32px; }
.score { font-size: 1.5rem; margin: 0.5rem 0; color: #00bbff; }
.status { font-size: 0.9rem; color: #fdfdfd; }

/********************************************************
  TOURNAMENT / LEADERBOARD
*********************************************************/
.tournament-card {
  background: #0b0f1a;
  border: 1px solid #ffffff;
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
  color: white;
  max-width: 500px;
}

.status-message { margin-top: 10px; color: #1e90ff; }

#leaderboard {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-primary);
  background-color: var(--color-bg-darkest);
  color: var(--color-text-primary);
  border: 1px solid #1e90ff;
  border-radius: 10px;
  overflow: hidden;
}

#leaderboard thead { background-color: #1e2a40; }

#leaderboard th, #leaderboard td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #1e90ff50;
}

#leaderboard tbody tr:hover {
  background-color: #1a243a;
  cursor: pointer;
}

#leaderboard td:first-child { font-weight: bold; color: #1e90ff; }

#leaderboard td:last-child {
  text-transform: capitalize;
  font-style: italic;
}

#leaderboard tbody tr:last-child td { border-bottom: none; }

/********************************************************
  PROFILE PAGE (hero, stats, panels)
*********************************************************/
.profile-header {
  width: 100%;
  margin: 0 auto;
  align-items: start;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "avatar name"
    "avatar wallet"
    "avatar actions";
  gap: 24px;
  padding-top: 16px;
}

.avatar-wrap {
  grid-area: avatar;
  justify-self: start;
  align-self: start;
  width: 220px;
  height: 220px;
  margin-top: 0;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: transparent;
}

.avatar-wrap.no-image {
  background: rgba(255, 255, 255, 0.05); /* faint box background when empty */
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.avatar-upload-btn {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 12px; padding: 6px 12px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); cursor: pointer;
  background: rgba(0,0,0,0.5);
}

.profile-name   { grid-area: name;   justify-self: start; margin: 0 0 12px; font-size: var(--text-4xl); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.profile-wallet { grid-area: wallet; justify-self: start; margin: 0 0 12px; opacity: .75; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-base); }

.profile-actions-row {
  grid-area: actions; justify-self: start;
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}

.profile-capsules { margin-top: 60px; }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
}

.stat-card { border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 14px; }
.stat-label { opacity: 0.7; font-size: 12px; margin-bottom: 6px; }
.stat-value { font-size: 22px; font-weight: 700; }

.profile-capsules {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.capsule { border:2px solid rgba(255,255,255,.12); border-radius:10px; padding:16px; background: rgba(255,255,255,0.03); }
.cap-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cap-head h2 { font-size: var(--text-lg); font-weight: 700; margin: 0; }
.soon-tag { font-size:11px; opacity:.7; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:3px 8px; }

.placeholder-grid { min-height: 120px; }
.ph-card, .ph-badge, .ph-friend, .tile .t-value {
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 6px;
}
.ph-card { height: 64px; }
.ph-badge { height: 48px; border-radius: 999px; }
.friends-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.grid2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-friend { height: 50px; border-radius: 6px; }
.stats-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tile { padding: 12px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.t-label { font-size: 12px; opacity: 0.7; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.t-value { font-size: 20px; font-weight: 700; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.profile-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel { border: 1px solid rgba(255, 255, 255, 0.374); border-radius: 10px; padding: 14px; min-height: 180px; }
.panel-title { opacity: 0.85; margin-bottom: 10px; font-weight: 600; }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.badge-chip { border: 1px solid rgba(255, 255, 255, 0.399); border-radius: 999px; padding: 8px 10px; font-size: 13px; text-align: center; }

.activity-list { display: grid; gap: 8px; }
.activity-item { display: flex; gap: 10px; align-items: baseline; }
.activity-item .time { opacity: 0.6; font-size: 12px; min-width: 160px; }
.activity-item .text { font-size: 14px; }

.muted { opacity: 0.6; }

/********************************************************
  MISC UTILITIES
*********************************************************/
#sync-club-button {
  display: block;
  margin: 30px auto 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #ccc;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

/********************************************************
  RESPONSIVE
*********************************************************/
@media (max-width: 900px) {
  .profile-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "name"
      "wallet"
      "actions";
    gap: 12px;
  }
  .avatar-wrap { justify-self: center; margin-top: 0; }
  .profile-capsules { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
}
/********************************************************
  MARKETPLACE FILTER SIDEBAR (mirrors left sidebar)
*********************************************************/
.filter-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 280px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 217, 255, 0.05));
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-left: 2px solid rgba(0, 255, 136, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--space-4);
  padding: 100px 20px 30px 20px;
  box-sizing: border-box;
  z-index: 900;
  box-shadow: -10px 0 40px rgba(0, 255, 136, 0.1),
              inset 0 0 30px rgba(0, 255, 136, 0.03);
  overflow-y: auto;
}

.filter-sidebar-title {
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00ff88;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.8),
               0 0 40px rgba(0, 217, 255, 0.4);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid rgba(0, 255, 136, 0.3);
}

/* push main marketplace content away from filter bar */
.market-list {
  margin-right: 300px;
}

/* spacing between filter groups */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.03), rgba(0, 217, 255, 0.03));
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  box-shadow: inset 0 0 15px rgba(0, 255, 136, 0.05);
}

/* all labels use modern font */
.filter-group label {
  color: #00ff88;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

/* inputs and selects with glassmorphism */
.filter-group input,
.filter-group select {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 217, 255, 0.05));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #ffffff;
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.05);
}

.filter-group input::placeholder {
  color: rgba(0, 217, 255, 0.5);
}

.filter-group input:focus,
.filter-group select:focus {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 217, 255, 0.1));
  border-color: #00d9ff;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.3),
              inset 0 0 15px rgba(0, 255, 136, 0.1);
  outline: none;
}

/* dual min/max price inputs side by side */
.price-row {
  display: flex;
  gap: 8px;
}

/* buttons match connect-wallet style */
.filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* Filter action buttons with glassmorphism */
.filter-actions button {
  flex: 1;
  padding: var(--space-3);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 217, 255, 0.1));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 2px solid #00ff88;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00ff88;
  cursor: pointer;
  font-family: var(--font-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3),
              inset 0 0 10px rgba(0, 255, 136, 0.05);
}

.filter-actions button:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 217, 255, 0.2));
  border-color: #00d9ff;
  color: #00d9ff;
  box-shadow: 0 0 25px rgba(0, 255, 136, 0.5),
              0 0 50px rgba(0, 217, 255, 0.3),
              inset 0 0 20px rgba(0, 255, 136, 0.1);
  transform: translateY(-2px);
}

.filter-actions button.ghost {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.filter-actions button.ghost:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2),
              inset 0 0 15px rgba(255, 255, 255, 0.1);
}

#flt-apply {
  background: #1e90ff;
  color: white;
}

#flt-apply:hover {
  background: #3aa0ff;
}

#flt-clear {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#flt-clear:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Price min/max: smaller + fit side-by-side */
.price-row {
  display: flex;
  gap: 6px;
}
.price-row input[type="number"] {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
  background: transparent;
  border: 1px solid white;
  color: white;
  border-radius: 6px;
}
.price-row input[type="number"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* Slider: make track/thumb white (remove default blue) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  outline: none;
}

/* WebKit (Chrome, Edge, Safari) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fff;
  margin-top: -5px; /* centers thumb on 4px track */
}

/* Firefox */
input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fff;
}
input[type="range"]::-moz-range-progress {
  background: white; /* filled portion is white */
  height: 4px;
  border-radius: 4px;
}

/* Ensure the filter sidebar matches your transparent/white-outline look */
.filter-sidebar {
  background: transparent;
  border-left: 1px solid white;
}
/* Buy / Cancel buttons span full width in card-back grid */
.card-back .buy-button,
.card-back .cancel-listing-btn {
  grid-column: 1 / -1;
  align-self: end;
  width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 700;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.card-back .buy-button {
  background: transparent;
  border: 1px solid rgba(0, 255, 136, 0.6);
  color: #00ff88;
}
.card-back .buy-button:hover {
  background: rgba(0, 255, 136, 0.12);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}
.card-back .cancel-listing-btn {
  background: transparent;
  border: 1px solid rgba(255, 59, 48, 0.6);
  color: #ff453a;
}
.card-back .cancel-listing-btn:hover {
  background: rgba(255, 59, 48, 0.12);
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.3);
}
.card-back-slot {
  grid-column: 1 / -1;
  align-self: end;
}

/* Price + seller strip below marketplace card */
.listing-info-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 8px 8px;
  width: 195px;
  box-sizing: border-box;
}
.listing-info-strip.listing-own {
  border-color: rgba(255, 59, 48, 0.25);
  background: rgba(255, 59, 48, 0.05);
}
.listing-price {
  font-weight: 700;
  color: #00ff88;
  font-size: 13px;
}
.listing-seller {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
}
.listing-own .listing-seller {
  color: rgba(255, 100, 80, 0.7);
}

/* Empty state */
.market-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.4);
}
.market-empty p {
  margin: 8px 0;
  font-size: 16px;
}
.market-empty p:first-child {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
/* Marketplace layout: center the grid area, keep space for right filter bar */
.market-wrap {
  margin-left: 60px;     /* width of left sidebar */
  margin-right: 240px;   /* width of right filter bar */
  padding: 20px 0;
  box-sizing: border-box;
}

/* Title centered relative to the grid */
.market-wrap .page-title,
.market-wrap > h1 {
  text-align: center;
  margin: 20px 0 30px;
}

/* 4-column grid centered between both bars - Real game style */
#marketplace-list {
  display: grid !important;
  grid-template-columns: repeat(4, 211px);
  justify-content: space-between;
  gap: 12px;
  width: calc(100vw - 340px);
  margin: 0 auto;
  align-content: start;
  padding: 20px 0;
}

/* card wrapper — allow extra height for info strip */
#marketplace-list .player-box {
  width: 211px;
  height: auto !important;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: visible !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px 8px 8px 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
#marketplace-list .player-box:hover {
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}
#marketplace-list .player-card-3d {
  flex-shrink: 0;
}
#marketplace-list .listing-info-strip {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
  margin-top: 8px;
  padding: 6px 4px;
  box-sizing: border-box;
}

/* Responsive */
@media (max-width: 1300px) {
  #marketplace-list {
    grid-template-columns: repeat(3, 211px);
    gap: 90px;
    width: calc(100vw - 280px);
  }
}
@media (max-width: 980px) {
  .market-wrap { margin-right: 20px; }
  #marketplace-list {
    grid-template-columns: repeat(2, 211px);
    gap: 60px;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 700px) {
  #marketplace-list { grid-template-columns: repeat(1, 211px); gap: 40px; }
}

/* DECORATIVE ELEMENTS FOR WHEEL PAGE */
/* Tier Showcase Display */
.tier-showcase-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 60px;
  pointer-events: none;
  z-index: 0;
  width: 90%;
  justify-content: space-around;
  max-width: 1400px;
}

.tier-showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.3;
  animation: tierPulse 3s ease-in-out infinite;
}

.tier-showcase-item[data-tier="rookie"] { animation-delay: 0s; }
.tier-showcase-item[data-tier="bronze"] { animation-delay: 0.6s; }
.tier-showcase-item[data-tier="silver"] { animation-delay: 1.2s; }
.tier-showcase-item[data-tier="gold"] { animation-delay: 1.8s; }
.tier-showcase-item[data-tier="nova"] { animation-delay: 2.4s; }

@keyframes tierPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.tier-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 3px solid;
  box-shadow: 0 0 30px currentColor, inset 0 0 20px rgba(255, 255, 255, 0.1);
  position: relative;
}

.tier-icon::before {
  content: '⭐';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  filter: drop-shadow(0 0 10px currentColor);
}

.tier-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: currentColor;
  text-shadow: 0 0 15px currentColor;
}

.tier-showcase-item[data-tier="rookie"] {
  color: #a8b4c0;
  border-color: #a8b4c0;
}

.tier-showcase-item[data-tier="bronze"] {
  color: #ff8c42;
  border-color: #cd7f32;
}

.tier-showcase-item[data-tier="silver"] {
  color: #e8eaed;
  border-color: #c0c0c0;
}

.tier-showcase-item[data-tier="gold"] {
  color: #ffed4e;
  border-color: #ffd700;
}

.tier-showcase-item[data-tier="nova"] {
  color: #c084fc;
  border-color: #a855f7;
}

.wheel-decorative-corners {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: none;
}

.wheel-corner-decoration {
  position: absolute;
  width: 180px;
  height: 180px;
  border: none;
  background: linear-gradient(135deg,
    rgba(0, 255, 136, 0.15),
    rgba(0, 217, 255, 0.15));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow:
    0 0 30px rgba(0, 255, 136, 0.4),
    inset 0 0 20px rgba(0, 255, 136, 0.1);
  pointer-events: none;
  border-radius: 20px;
}

.wheel-corner-decoration::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(90deg, #00ff88, #00d9ff, #3b82f6, #a855f7, #00ff88);
  background-size: 300% 100%;
  animation: borderFlow 3s linear infinite;
  border-radius: inherit;
  z-index: -1;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
}

@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.wheel-corner-decoration.top-left {
  top: 20px;
  left: 20px;
  animation: cornerPulse 1.5s ease-in-out infinite;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 30% 30%, 30% 100%, 0 100%);
}

.wheel-corner-decoration.top-right {
  top: 20px;
  right: 20px;
  animation: cornerPulse 1.5s ease-in-out infinite 0.375s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 70% 30%, 0 30%);
}

.wheel-corner-decoration.bottom-left {
  bottom: 20px;
  left: 20px;
  animation: cornerPulse 1.5s ease-in-out infinite 0.75s;
  clip-path: polygon(0 0, 30% 0, 30% 70%, 100% 70%, 100% 100%, 0 100%);
}

.wheel-corner-decoration.bottom-right {
  bottom: 20px;
  right: 20px;
  animation: cornerPulse 1.5s ease-in-out infinite 1.125s;
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%, 0 70%, 70% 70%);
}

@keyframes cornerPulse {
  0%, 100% {
    opacity: 0.7;
    transform: translate(0, 0) scale(1);
    box-shadow:
      0 0 30px rgba(0, 255, 136, 0.4),
      inset 0 0 20px rgba(0, 255, 136, 0.1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    box-shadow:
      0 0 50px rgba(0, 255, 136, 0.8),
      inset 0 0 40px rgba(0, 255, 136, 0.2);
  }
}

@keyframes cornerPulseTopLeft {
  0%, 100% { opacity: 0.6; transform: translate(0, 0); }
  50% { opacity: 0.9; transform: translate(-5px, -5px); }
}

@keyframes cornerPulseTopRight {
  0%, 100% { opacity: 0.6; transform: translate(0, 0); }
  50% { opacity: 0.9; transform: translate(5px, -5px); }
}

@keyframes cornerPulseBottomLeft {
  0%, 100% { opacity: 0.6; transform: translate(0, 0); }
  50% { opacity: 0.9; transform: translate(-5px, 5px); }
}

@keyframes cornerPulseBottomRight {
  0%, 100% { opacity: 0.6; transform: translate(0, 0); }
  50% { opacity: 0.9; transform: translate(5px, 5px); }
}

/* Light beams */
.wheel-light-beams {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
}

.light-beam {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 6px;
  height: 200%;
  background: linear-gradient(180deg,
    rgba(0, 255, 136, 0) 0%,
    rgba(0, 255, 136, 0.8) 30%,
    rgba(0, 217, 255, 1) 50%,
    rgba(59, 130, 246, 0.8) 70%,
    rgba(168, 85, 247, 0) 100%);
  transform-origin: top center;
  filter: blur(3px);
  box-shadow: 0 0 20px currentColor;
}





.light-beam:nth-child(1) {
  animation: beamRotate 4s linear infinite;
}

.light-beam:nth-child(2) {
  animation: beamRotate 5s linear infinite reverse;
}

.light-beam:nth-child(3) {
  animation: beamRotate 6s linear infinite;
}

.light-beam:nth-child(4) {
  animation: beamRotate 7s linear infinite reverse;
}

@keyframes beamRotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes beamColorCycle {
  0% { 
    background: linear-gradient(180deg, 
      rgba(176, 176, 176, 0) 0%,
      rgba(176, 176, 176, 0.6) 30%,
      rgba(176, 176, 176, 0.8) 50%,
      rgba(176, 176, 176, 0.6) 70%,
      rgba(176, 176, 176, 0) 100%);
  }
  20% {
    background: linear-gradient(180deg, 
      rgba(205, 127, 50, 0) 0%,
      rgba(205, 127, 50, 0.6) 30%,
      rgba(205, 127, 50, 0.8) 50%,
      rgba(205, 127, 50, 0.6) 70%,
      rgba(205, 127, 50, 0) 100%);
  }
  40% {
    background: linear-gradient(180deg, 
      rgba(192, 192, 192, 0) 0%,
      rgba(192, 192, 192, 0.6) 30%,
      rgba(192, 192, 192, 0.8) 50%,
      rgba(192, 192, 192, 0.6) 70%,
      rgba(192, 192, 192, 0) 100%);
  }
  60% {
    background: linear-gradient(180deg, 
      rgba(255, 215, 0, 0) 0%,
      rgba(255, 215, 0, 0.6) 30%,
      rgba(255, 215, 0, 0.8) 50%,
      rgba(255, 215, 0, 0.6) 70%,
      rgba(255, 215, 0, 0) 100%);
  }
  80% {
    background: linear-gradient(180deg, 
      rgba(168, 85, 247, 0) 0%,
      rgba(168, 85, 247, 0.6) 30%,
      rgba(168, 85, 247, 0.8) 50%,
      rgba(168, 85, 247, 0.6) 70%,
      rgba(168, 85, 247, 0) 100%);
  }
  100% {
    background: linear-gradient(180deg, 
      rgba(176, 176, 176, 0) 0%,
      rgba(176, 176, 176, 0.6) 30%,
      rgba(176, 176, 176, 0.8) 50%,
      rgba(176, 176, 176, 0.6) 70%,
      rgba(176, 176, 176, 0) 100%);
  }
}


/* Modal decorative elements - HIDDEN (too artificial) */
.modal-decorative-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 998;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.modal-decorative-frame.active {
  opacity: 1;
}

/* Screen edge decorations - all 4 sides */
.modal-decorative-frame::before,
.modal-decorative-frame::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}

/* Top edge decoration */
.modal-decorative-frame::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
}

/* Bottom edge decoration */
.modal-decorative-frame::after {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
}

/* Left and right edges using corner accents */
.modal-corner-accents {
  position: absolute;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, transparent, currentColor, transparent);
  opacity: 0.6;
  box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
}

.modal-corner-accents.tl,
.modal-corner-accents.bl {
  left: 0;
  top: 0;
}

.modal-corner-accents.tr,
.modal-corner-accents.br {
  right: 0;
  top: 0;
}

/* Flashing animation during reveal */
@keyframes edgeFlash {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.modal-decorative-frame.flashing::before,
.modal-decorative-frame.flashing::after,
.modal-decorative-frame.flashing .modal-corner-accents {
  animation: edgeFlash 0.4s ease-in-out infinite;
}

/* Stop flashing - become permanent */
.modal-decorative-frame.permanent::before,
.modal-decorative-frame.permanent::after,
.modal-decorative-frame.permanent .modal-corner-accents {
  animation: none;
  opacity: 0.8;
}

@keyframes frameGlowPulse {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(0, 255, 136, 0.4),
      0 0 80px rgba(59, 130, 246, 0.3),
      inset 0 0 40px rgba(0, 255, 136, 0.1);
  }
  50% {
    box-shadow:
      0 0 60px rgba(0, 255, 136, 0.7),
      0 0 120px rgba(59, 130, 246, 0.5),
      inset 0 0 60px rgba(0, 255, 136, 0.2);
  }
}

@keyframes frameGlow {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.3),
      inset 0 0 30px rgba(255, 215, 0, 0.1);
  }
  50% {
    opacity: 0.7;
    box-shadow: 
      0 0 50px rgba(255, 215, 0, 0.5),
      inset 0 0 50px rgba(255, 215, 0, 0.2);
  }
}

.modal-corner-accents {
  display: none;
}

@keyframes cornerGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Tier-specific colors and intensities for screen edge decorations */
.modal-decorative-frame.tier-rookie {
  color: #a8b4c0;
}

.modal-decorative-frame.tier-rookie::before,
.modal-decorative-frame.tier-rookie::after,
.modal-decorative-frame.tier-rookie .modal-corner-accents {
  box-shadow: 0 0 15px #a8b4c0, 0 0 30px #a8b4c0;
}

.modal-decorative-frame.tier-bronze {
  color: #cd7f32;
}

.modal-decorative-frame.tier-bronze::before,
.modal-decorative-frame.tier-bronze::after,
.modal-decorative-frame.tier-bronze .modal-corner-accents {
  box-shadow: 0 0 20px #cd7f32, 0 0 40px #cd7f32;
}

.modal-decorative-frame.tier-silver {
  color: #c0c0c0;
}

.modal-decorative-frame.tier-silver::before,
.modal-decorative-frame.tier-silver::after,
.modal-decorative-frame.tier-silver .modal-corner-accents {
  box-shadow: 0 0 25px #c0c0c0, 0 0 50px #c0c0c0;
}

.modal-decorative-frame.tier-gold {
  color: #ffd700;
}

.modal-decorative-frame.tier-gold::before,
.modal-decorative-frame.tier-gold::after,
.modal-decorative-frame.tier-gold .modal-corner-accents {
  box-shadow: 0 0 30px #ffd700, 0 0 60px #ffd700, 0 0 90px rgba(255, 215, 0, 0.4);
}

.modal-decorative-frame.tier-nova {
  color: #a855f7;
}

.modal-decorative-frame.tier-nova::before,
.modal-decorative-frame.tier-nova::after,
.modal-decorative-frame.tier-nova .modal-corner-accents {
  box-shadow: 0 0 40px #a855f7, 0 0 80px #a855f7, 0 0 120px rgba(168, 85, 247, 0.5);
}

/* Color cycling for corner decorations */
@keyframes cornerColorCycle {
  0% { border-color: rgba(176, 176, 176, 0.7); }
  20% { border-color: rgba(205, 127, 50, 0.7); }
  40% { border-color: rgba(192, 192, 192, 0.7); }
  60% { border-color: rgba(255, 215, 0, 0.7); }
  80% { border-color: rgba(168, 85, 247, 0.7); }
  100% { border-color: rgba(176, 176, 176, 0.7); }
}

.wheel-corner-decoration {
  animation: cornerPulse 3s ease-in-out infinite, cornerColorCycle 15s ease-in-out infinite !important;
}

.wheel-corner-decoration.top-left {
  animation: cornerPulseTopLeft 3s ease-in-out infinite, cornerColorCycle 15s ease-in-out infinite;
}

.wheel-corner-decoration.top-right {
  animation: cornerPulseTopRight 3s ease-in-out infinite, cornerColorCycle 15s ease-in-out infinite;
  animation-delay: 0s, -3s;
}

.wheel-corner-decoration.bottom-left {
  animation: cornerPulseBottomLeft 3s ease-in-out infinite, cornerColorCycle 15s ease-in-out infinite;
  animation-delay: 0s, -9s;
}

.wheel-corner-decoration.bottom-right {
  animation: cornerPulseBottomRight 3s ease-in-out infinite, cornerColorCycle 15s ease-in-out infinite;
  animation-delay: 0s, -6s;
}

/* ===== DIRECTORY PAGE ===== */

.directory-stats {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.stats-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 217, 255, 0.1));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 20px;
  color: #00ff88;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2),
              inset 0 0 10px rgba(0, 255, 136, 0.05);
}

.directory-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-base);
  margin: 0;
  text-align: center;
}

.directory-grid {
  margin-right: 300px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 32px;
  max-width: 1400px;
}

.directory-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 211px;
  height: 306px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.directory-card-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transition: left var(--transition-slow);
  pointer-events: none;
}

.directory-card-wrapper:hover::before {
  left: 100%;
}

.directory-card-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 16px 50px 0 rgba(31, 38, 135, 0.6),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    0 0 30px rgba(30, 144, 255, 0.4);
}

/* Loading spinner */
.loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  z-index: 1000;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(0, 255, 136, 0.2);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner p {
  color: #00ff88;
  font-size: var(--text-lg);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

/* No results state */
.no-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.no-results p {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.clear-filters-btn {
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 217, 255, 0.15));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 2px solid #00ff88;
  border-radius: 10px;
  color: #00ff88;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.clear-filters-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 217, 255, 0.25));
  border-color: #00d9ff;
  color: #00d9ff;
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
  transform: translateY(-2px);
}

/********************************************************
  ENHANCED PLAYER CARDS - From Solynce Dev Guide
*********************************************************/

/* Card noise texture */
.card-noise {
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuNSIvPjwvc3ZnPg==');
  opacity: 0.05;
  pointer-events: none;
}

/* Rating badge (top left) */
.card-rating {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 32px;
  font-weight: 700;
  color: inherit;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Team badge (top right) */
.card-team-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}

/* Player name */
.card-player-name {
  position: absolute;
  bottom: 80px;
  left: 16px;
  right: 16px;
  z-index: 2;
}

.card-player-name h2 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  line-height: 1.2;
}

/* Position pill */
.card-position-pill {
  position: absolute;
  bottom: 56px;
  left: 16px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}

/* Price row */
.card-price-row {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 2;
}

.card-current-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.price-value {
  font-size: 18px;
  font-weight: 700;
  color: #00E5CC;
  text-shadow: 0 0 10px rgba(0, 229, 204, 0.5);
}

.card-price-change {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}

.card-price-change.positive {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

.card-price-change.negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

/* Rarity badge (bottom center) */
.card-rarity-badge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Tier-specific card colors and glows */
.tier-rookie .card-front {
  background: linear-gradient(180deg, #1a2129 0%, #0d1117 100%);
  border-color: #a8b4c0;
}

.tier-rookie .card-rarity-badge {
  background: rgba(168, 180, 192, 0.2);
  color: #a8b4c0;
  border: 1px solid #a8b4c0;
}

.tier-bronze .card-front {
  background: linear-gradient(180deg, #2d2419 0%, #1a1510 100%);
  border-color: #cd7f32;
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.3);
}

.tier-bronze .card-rarity-badge {
  background: rgba(205, 127, 50, 0.2);
  color: #cd7f32;
  border: 1px solid #cd7f32;
}

.tier-bronze .card-rating {
  color: #cd7f32;
}

.tier-silver .card-front {
  background: linear-gradient(180deg, #2a2a2e 0%, #18181c 100%);
  border-color: #c0c0c0;
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
  animation: pulse-glow 3s ease-in-out infinite;
}

.tier-silver .card-rarity-badge {
  background: rgba(192, 192, 192, 0.2);
  color: #c0c0c0;
  border: 1px solid #c0c0c0;
}

.tier-silver .card-rating {
  color: #c0c0c0;
}

.tier-gold .card-front {
  background: linear-gradient(180deg, #3d3419 0%, #2a2410 100%);
  border-color: #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
  animation: pulse-glow 2.5s ease-in-out infinite;
}

.tier-gold .card-rarity-badge {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid #ffd700;
}

.tier-gold .card-rating {
  color: #ffd700;
}

.tier-nova .card-front {
  background: linear-gradient(180deg, #2d1a3d 0%, #1a0f29 100%);
  border-color: #a855f7;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.6);
  animation: shimmer-effect 1.5s linear infinite;
}

.tier-nova .card-rarity-badge {
  background: linear-gradient(90deg, #a855f7 0%, #ec4899 100%);
  color: #fff;
  border: none;
}

.tier-nova .card-rating {
  color: #a855f7;
}

/* Glow animations */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 15px currentColor;
  }
  50% {
    box-shadow: 0 0 30px currentColor;
  }
}

@keyframes shimmer-effect {
  0% {
    box-shadow: 0 0 20px #a855f7;
    border-color: #a855f7;
  }
  50% {
    box-shadow: 0 0 40px #ec4899;
    border-color: #ec4899;
  }
  100% {
    box-shadow: 0 0 20px #a855f7;
    border-color: #a855f7;
  }
}

/* Card back improvements */
.card-back-header {
  text-align: center;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-back-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.card-back-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Stats bars */
.card-stats {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-bar-fill {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.stat-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #00E5CC 0%, #BC8CFF 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.card-back-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.card-tier-text {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.card-value-text {
  color: #00E5CC;
  font-weight: 700;
  margin: 0;
}

/* Improved 3D flip */
.player-card-3d {
  perspective: 1000px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.player-card-3d:hover {
  transform: translateY(-4px);
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.player-card-3d:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid;
}

.card-front {
  background: linear-gradient(180deg, #1a2129 0%, #0d1117 100%);
}

.card-back {
  background: linear-gradient(180deg, #0d1117 0%, #1a2129 100%);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
}

/* =====================================================================
   WORLD CUP 2026 — TOURNAMENT PAGES
   ===================================================================== */

/* Page shell */
.wc-page {
  background: #000;
  min-height: 100vh;
  color: #e8eaf0;
  font-family: var(--font-primary);
  overflow-x: hidden;
}

/* Force Space Grotesk on all form elements inside WC page — browsers don't inherit by default */
.wc-page button,
.wc-page input,
.wc-page select,
.wc-page textarea,
.sqb-page button,
.sqb-page input,
.sqb-page select {
  font-family: var(--font-primary);
}

/* WC page main content area — sits inside the standard sidebar/navbar layout */
body.wc-page main.wc-main {
  padding: 0 0 60px 0;
  align-items: stretch;
  max-width: none;
  width: calc(100vw - 220px);
}

/* Centered content wrapper */
.wc-content-body {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 28px 64px;
  box-sizing: border-box;
}

/* ── Hero ── */
.wc-hero {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 36px 0 32px;
  flex-shrink: 0;
}
.wc-hero-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.wc-hero-eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}
.wc-hero-title {
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0 0 22px;
}
.wc-hero-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.wc-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wc-hero-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wc-hero-gold {
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.3);
}
.wc-hero-stat-lbl {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.wc-hero-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.wc-hero-right {
  text-align: right;
  flex-shrink: 0;
}
.wc-hero-cd-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 8px;
}
.wc-hero-cd {
  font-size: 2.8rem;
  font-weight: 900;
  color: #22c55e;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wc-hero-cd-units {
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  margin-top: 6px;
}

/* ── Terms modal ── */
.wc-terms-panel {
  position: relative;
  background: #0d111a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 40px 36px 32px;
  width: 100%;
  max-width: 500px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wc-terms-logo {
  font-size: 2rem;
  margin-bottom: 12px;
  text-align: center;
}
.wc-terms-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.wc-terms-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-bottom: 28px;
}
.wc-terms-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.wc-terms-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
}
.wc-terms-step strong { color: rgba(255,255,255,0.92); }
.wc-terms-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.4);
  color: #c9a227;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.wc-terms-notice {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.wc-terms-agree-btn {
  width: 100%;
  padding: 15px;
  background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.45);
  border-radius: 12px;
  color: #c9a227;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
}
.wc-terms-agree-btn:hover {
  background: rgba(201,162,39,0.2);
  border-color: rgba(201,162,39,0.7);
}

/* WC navbar title */
.wc-navbar-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

/* Payment return banner */
.wc-payment-banner {
  margin: 12px 20px 0;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}
.wc-banner--success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); color: #86efac; }
.wc-banner--warn    { background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.4); color: #fcd34d; }
.wc-banner--loading { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.4); color: #a5b4fc; }

/* Email modal centers its panel */
#wc-email-modal {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Email capture modal panel */
.wc-email-panel {
  position: relative;
  background: #0f1829;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 440px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wc-email-modal-header { margin-bottom: 12px; }
.wc-email-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}
.wc-email-modal-tourney {
  font-size: 0.85rem;
  color: #d4a017;
  margin-top: 2px;
}
.wc-email-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #c8d0e0;
  margin-top: 4px;
}
.wc-email-hint {
  font-size: 0.75rem;
  color: #6b7a94;
  margin: 0 0 6px;
}
.wc-email-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #e8eaf0;
  font-size: 0.9rem;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.wc-email-input:focus { border-color: rgba(212,160,23,0.6); }
.wc-wallet-input { font-family: monospace; font-size: 0.82rem; }
.wc-optional-tag {
  font-size: 0.72rem;
  color: #6b7a94;
  font-weight: 400;
  margin-left: 6px;
}
.wc-pack-disclaimer {
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.78rem;
  color: #c8b060;
  display: flex;
  gap: 8px;
  margin: 10px 0;
  line-height: 1.5;
}

.wc-pol-info {
  background: rgba(130,80,255,0.08);
  border: 1px solid rgba(130,80,255,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #a78bfa;
  margin: 8px 0;
  text-align: center;
}
.wc-pay-btn {
  margin-top: 6px;
  width: 100%;
  padding: 13px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.wc-cancel-btn {
  width: 100%;
  padding: 10px;
  font-size: 0.88rem;
  margin-top: 4px;
}

/* Atmospheric background */
.wc-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
  overflow: hidden;
  pointer-events: none;
}

/* Subtle warm gold corner glows */
.wc-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 35% at 5% 95%, rgba(180,120,5,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 45% 28% at 95% 5%,  rgba(200,140,10,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 30% 20% at 50% 50%, rgba(160,100,5,0.03) 0%, transparent 80%);
}

/* Gold flake particles — box-shadow on a 1px seed element */
.wc-bg-globe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  animation: wc-flicker 5s ease-in-out infinite alternate;
  box-shadow:
    /* row 1 */
    70px 42px 0 0   rgba(212,160,23,0.85),
    210px 18px 0 1px rgba(245,200,66,0.50),
    380px 65px 0 0   rgba(212,160,23,0.70),
    520px 30px 0 0   rgba(245,200,66,0.90),
    680px 55px 0 1px rgba(212,160,23,0.45),
    850px 20px 0 0   rgba(245,200,66,0.75),
    1010px 48px 0 0  rgba(212,160,23,0.60),
    1150px 15px 0 1px rgba(245,200,66,0.55),
    1310px 70px 0 0  rgba(212,160,23,0.80),
    /* row 2 */
    30px 140px 0 1px rgba(245,200,66,0.40),
    175px 165px 0 0  rgba(212,160,23,0.65),
    340px 120px 0 0  rgba(245,200,66,0.80),
    495px 158px 0 1px rgba(212,160,23,0.45),
    640px 135px 0 0  rgba(245,200,66,0.70),
    800px 172px 0 0  rgba(212,160,23,0.55),
    960px 128px 0 1px rgba(245,200,66,0.85),
    1120px 155px 0 0 rgba(212,160,23,0.40),
    1280px 140px 0 0 rgba(245,200,66,0.65),
    /* row 3 */
    90px 248px 0 0   rgba(212,160,23,0.75),
    240px 262px 0 1px rgba(245,200,66,0.45),
    410px 230px 0 0  rgba(212,160,23,0.90),
    570px 275px 0 0  rgba(245,200,66,0.55),
    730px 245px 0 1px rgba(212,160,23,0.50),
    890px 268px 0 0  rgba(245,200,66,0.80),
    1050px 238px 0 0 rgba(212,160,23,0.65),
    1200px 255px 0 1px rgba(245,200,66,0.40),
    1360px 242px 0 0 rgba(212,160,23,0.70),
    /* row 4 */
    45px 355px 0 1px rgba(245,200,66,0.55),
    195px 380px 0 0  rgba(212,160,23,0.45),
    355px 348px 0 0  rgba(245,200,66,0.85),
    510px 372px 0 1px rgba(212,160,23,0.60),
    665px 360px 0 0  rgba(245,200,66,0.40),
    820px 385px 0 0  rgba(212,160,23,0.75),
    975px 350px 0 1px rgba(245,200,66,0.65),
    1130px 378px 0 0 rgba(212,160,23,0.50),
    1290px 365px 0 0 rgba(245,200,66,0.80),
    /* row 5 */
    115px 462px 0 0  rgba(212,160,23,0.70),
    260px 478px 0 1px rgba(245,200,66,0.50),
    425px 448px 0 0  rgba(212,160,23,0.85),
    585px 470px 0 0  rgba(245,200,66,0.45),
    745px 455px 0 1px rgba(212,160,23,0.60),
    900px 480px 0 0  rgba(245,200,66,0.75),
    1060px 462px 0 0 rgba(212,160,23,0.40),
    1220px 475px 0 1px rgba(245,200,66,0.85),
    1375px 458px 0 0 rgba(212,160,23,0.55),
    /* row 6 */
    55px 558px 0 1px rgba(245,200,66,0.65),
    205px 575px 0 0  rgba(212,160,23,0.80),
    370px 548px 0 0  rgba(245,200,66,0.45),
    530px 570px 0 1px rgba(212,160,23,0.70),
    688px 555px 0 0  rgba(245,200,66,0.60),
    848px 578px 0 0  rgba(212,160,23,0.50),
    1008px 558px 0 1px rgba(245,200,66,0.85),
    1168px 572px 0 0 rgba(212,160,23,0.40),
    1328px 545px 0 0 rgba(245,200,66,0.70),
    /* row 7 */
    80px 658px 0 0   rgba(212,160,23,0.75),
    235px 672px 0 1px rgba(245,200,66,0.55),
    395px 645px 0 0  rgba(212,160,23,0.45),
    555px 668px 0 0  rgba(245,200,66,0.80),
    715px 655px 0 1px rgba(212,160,23,0.65),
    875px 675px 0 0  rgba(245,200,66,0.40),
    1035px 648px 0 0 rgba(212,160,23,0.85),
    1195px 665px 0 1px rgba(245,200,66,0.55),
    1350px 658px 0 0 rgba(212,160,23,0.60),
    /* row 8 */
    20px 755px 0 1px rgba(245,200,66,0.50),
    165px 778px 0 0  rgba(212,160,23,0.70),
    315px 748px 0 0  rgba(245,200,66,0.85),
    472px 765px 0 1px rgba(212,160,23,0.45),
    628px 752px 0 0  rgba(245,200,66,0.65),
    785px 778px 0 0  rgba(212,160,23,0.80),
    942px 755px 0 1px rgba(245,200,66,0.40),
    1098px 772px 0 0 rgba(212,160,23,0.55),
    1252px 758px 0 0 rgba(245,200,66,0.75),
    1395px 775px 0 1px rgba(212,160,23,0.60);
}

@keyframes wc-flicker {
  0%   { opacity: 0.25; }
  30%  { opacity: 0.40; }
  60%  { opacity: 0.18; }
  100% { opacity: 0.35; }
}

/* Prize Pool Hero */
.wc-pool-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px 20px;
  max-width: 700px;
  margin: 0 auto;
}
.wc-pool-hero-label {
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 10px;
}
.wc-pool-hero-amount {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: #c9a227;
  margin-bottom: 6px;
}
.wc-pool-hero-sub {
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 0;
}
.wc-pool-hero-tiers {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wc-pool-hero-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 20px;
  min-width: 110px;
}
.wc-pool-hero-tier--featured {
  border-color: rgba(255,215,0,0.35);
  background: rgba(255,215,0,0.06);
}
.wpht-name { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.8px; }
.wpht-fee  { font-size: 1.2rem; font-weight: 800; color: #e2e8f0; }
.wpht-pool { font-size: 0.85rem; font-weight: 700; color: #ffd700; }

/* Header */
.wc-header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 48px 20px 20px;
}
.wc-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
  line-height: 1.05;
}
.wc-subtitle {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* Countdown */
.wc-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 14px 24px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.wc-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.wc-cd-num {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.wc-cd-lbl {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 5px;
}
.wc-cd-sep {
  font-size: 1.4rem;
  font-weight: 300;
  color: rgba(255,255,255,0.2);
  line-height: 1;
  padding-bottom: 12px;
}


/* Section headers */
.wc-section-hdr {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.wc-section-hdr--gap {
  margin-top: 52px;
}

/* Tournament tier grid */
.wc-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 16px;
  width: 100%;
  padding-bottom: 40px;
  align-items: stretch; /* all cards same height */
}
@media (max-width: 860px) {
  .wc-tier-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  .wc-tier--hero { order: -1; }
  .wc-tier--side { order: 1; }
}

/* Base tier card */
.wc-tier-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
/* Push enter button to bottom of every card */
.wc-tier-card .wc-enter-btn,
.wc-tier-card .wc-enter-btn--hero,
.wc-tier-card .wc-enter-btn--side {
  margin-top: auto;
}
.wc-tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* Side cards */
.wc-tier--side { opacity: 0.9; }
.wc-tier--side:hover { opacity: 1; }
.wc-tier--10 {
  border-top: 2px solid rgba(201,162,39,0.5);
  background: rgba(201,162,39,0.03);
}
.wc-tier--25 {
  border-top: 2px solid rgba(168,85,247,0.4);
  background: rgba(168,85,247,0.03);
}

/* Hero free card — center, prominent */
.wc-tier--hero {
  border: 1px solid rgba(74,222,128,0.25);
  border-top: 3px solid rgba(74,222,128,0.8);
  background: rgba(74,222,128,0.04);
  box-shadow: 0 0 60px rgba(74,222,128,0.08), 0 8px 32px rgba(0,0,0,0.5);
  padding: 32px 28px 28px;
}
.wc-tier--hero:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 80px rgba(74,222,128,0.12), 0 12px 48px rgba(0,0,0,0.5);
}

.wc-tier-hero-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(80,200,120,0.12);
  border: 1px solid rgba(80,200,120,0.35);
  color: #4ade80;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wc-tier-badge--free {
  color: #4ade80;
}
.wc-tier-badge--elite {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,0.4);
}
.wc-tier-fee--free {
  font-size: 2.4rem !important;
  color: #f0f4f8 !important;
}

/* Free features checklist */
.wc-free-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wc-free-feat {
  font-size: 0.78rem;
  color: #6b7280;
  padding-left: 16px;
  position: relative;
}
.wc-free-feat::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ade80;
  font-weight: 700;
  font-size: 0.72rem;
}

/* Hero enter button */
.wc-enter-btn--hero {
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.4);
  color: #4ade80;
  font-size: 0.9rem;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-family: var(--font-primary);
  width: 100%;
}
.wc-enter-btn--hero:hover {
  background: rgba(74,222,128,0.2);
  border-color: rgba(74,222,128,0.6);
  transform: translateY(-1px);
}

/* Side enter buttons */
.wc-enter-btn--side {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #64748b;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font-primary);
  width: 100%;
}
.wc-enter-btn--side:hover { background: rgba(255,255,255,0.08); color: #94a3b8; }

.wc-prize-val--highlight { color: #ffffff; font-weight: 700; }

.wc-tier-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.wc-tier-fee {
  font-size: 2.8rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.04em;
}
.wc-tier-fee span { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.35); }
.wc-tier-tagline { font-size: 0.825rem; color: rgba(255,255,255,0.45); line-height: 1.5; }

/* Live prize pool */
.wc-pool-display {
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.wc-pool-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,215,0,0.5);
  margin-bottom: 6px;
}
.wc-pool-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffd700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(255,215,0,0.3);
}
.wc-pool-sub { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 6px; }

/* Prize list */
.wc-prize-list { display: flex; flex-direction: column; gap: 8px; }
.wc-prize-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 0.83rem;
}
.wc-prize-rank { color: #94a3b8; }
.wc-prize-val { color: #e2e8f0; font-weight: 600; }
.wc-prize-row--muted { opacity: 0.45; }

/* Stats row */
.wc-stats-row {
  display: flex;
  gap: 16px;
}
.wc-stat { display: flex; flex-direction: column; align-items: center; }
.wc-stat-num { font-size: 1.4rem; font-weight: 800; color: #fff; }
.wc-stat-lbl { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

/* Entry status badge */
.wc-my-entry-badge {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
  text-align: center;
}

/* Enter buttons */
.wc-enter-btn {
  padding: 14px 20px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: auto;
}
.wc-enter-btn:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.wc-enter-btn--featured {
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.45);
  color: #c9a227;
  box-shadow: none;
}
.wc-enter-btn--featured:hover { transform: translateY(-1px); background: rgba(201,162,39,0.22); border-color: rgba(201,162,39,0.65); }
.wc-enter-btn--elite {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #c8d0e0;
  box-shadow: none;
}
.wc-enter-btn--entered {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #94a3b8 !important;
  cursor: default;
}

/* How it works */
.wc-how-it-works {
  max-width: 700px;
  margin: 0 auto 60px;
  padding: 0 20px;
}
.wc-how-it-works h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
  text-align: center;
}
.wc-steps { display: flex; flex-direction: column; gap: 10px; }
.wc-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px 18px;
}
.wc-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(167,139,250,0.15);
  border: 1px solid rgba(167,139,250,0.35);
  color: #a78bfa;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wc-step-text { font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
.wc-step-text strong { color: rgba(255,255,255,0.9); font-weight: 600; }

/* My Entries tab */
.wc-my-entries-list { max-width: 800px; margin: 0 auto; padding: 0 20px 60px; }
.wc-my-entry-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.wc-my-entry-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.wc-my-entry-name { font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.wc-my-entry-pts { font-size: 0.85rem; color: #94a3b8; margin-top: 2px; }
.wc-my-entry-rank { font-size: 2rem; font-weight: 900; color: #ffd700; }
.wc-my-entry-squad {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.wc-entry-player {
  font-size: 0.75rem;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 3px 8px;
  color: #94a3b8;
}
.wc-entry-player.cap { background: rgba(255,215,0,0.15); color: #ffd700; font-weight: 700; }
.wc-entry-player.vc  { background: rgba(168,85,247,0.15); color: #a855f7; font-weight: 700; }

/* Players tab grid */
.wc-player-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto 24px; padding: 0 20px;
}
.wc-filter-select, .wc-filter-input {
  padding: 7px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  color: #c8d0e0;
  font-size: 0.8rem;
  font-family: var(--font-primary);
  outline: none;
}
.wc-filter-input { flex: 1; min-width: 180px; }
.wc-filter-select:focus, .wc-filter-input:focus { border-color: rgba(201,162,39,0.35); }

.wc-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 60px;
}
.wc-player-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
}
.wc-player-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); }
.wc-player-card.wc-tier-star   { border-color: rgba(255,215,0,0.3); }
.wc-player-card.wc-tier-key    { border-color: rgba(192,192,192,0.25); }
.wc-player-card.wc-tier-squad  { border-color: rgba(205,127,50,0.25); }
.wc-player-photo { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0 auto 8px; background: rgba(255,255,255,0.08); }
.wc-player-photo img { width: 100%; height: 100%; object-fit: cover; }
.wc-player-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #64748b; }
.wc-player-name { font-size: 0.8rem; font-weight: 700; color: #e2e8f0; margin-bottom: 3px; }
.wc-player-nation { font-size: 0.7rem; color: #64748b; margin-bottom: 6px; }
.wc-player-meta { display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 6px; }
.wc-player-pos { color: #94a3b8; }
.wc-player-price { color: #22c55e; font-weight: 700; }
.wc-player-stats { font-size: 0.7rem; color: #64748b; }

/* ====== TEAM BUILDER MODAL ====== */
.wc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.wc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.wc-modal-panel {
  position: relative;
  z-index: 1;
  background: #0d1520;
  border-left: 1px solid rgba(255,255,255,0.1);
  width: min(100%, 520px);
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wc-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.wc-builder-title { font-size: 1.2rem; font-weight: 800; color: #fff; }
.wc-builder-tourney { font-size: 0.82rem; color: #64748b; margin-top: 2px; }
.wc-modal-close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}

/* Budget bar */
.wc-budget-bar { display: flex; align-items: center; gap: 10px; }
.wc-budget-label { font-size: 0.75rem; color: #64748b; white-space: nowrap; }
.wc-budget-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.wc-budget-fill { height: 100%; border-radius: 3px; transition: width 0.3s, background 0.3s; }
.wc-budget-num { font-size: 0.78rem; color: #22c55e; font-weight: 600; white-space: nowrap; }

/* Pitch */
.wc-pitch {
  background: linear-gradient(180deg, rgba(20,80,30,0.4) 0%, rgba(10,50,20,0.6) 100%);
  border: 1px solid rgba(40,120,60,0.3);
  border-radius: 10px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wc-pitch-label { font-size: 0.65rem; color: rgba(255,255,255,0.3); text-align: center; letter-spacing: 1px; text-transform: uppercase; }
.wc-pitch-row { display: flex; justify-content: center; gap: 8px; }

.wc-pitch-slot {
  width: 68px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
  position: relative;
  min-height: 84px;
}
.wc-pitch-slot.empty { display: flex; align-items: center; justify-content: center; }
.wc-pitch-slot.active-slot { border-color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.2); }
.wc-pitch-slot:hover { border-color: rgba(255,255,255,0.3); }

.wc-slot-add { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wc-slot-pos-label { font-size: 0.6rem; color: #64748b; font-weight: 700; }
.wc-slot-plus { font-size: 1.2rem; color: rgba(255,255,255,0.2); }

.wc-slot-photo { position: relative; width: 100%; height: 44px; overflow: hidden; background: rgba(255,255,255,0.06); }
.wc-slot-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wc-slot-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; color: #64748b; }
.wc-cap-badge {
  position: absolute; top: 2px; right: 2px;
  background: #ffd700; color: #000;
  font-size: 0.55rem; font-weight: 900;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.wc-vc-badge { background: #a855f7; color: #fff; }
.wc-slot-name { font-size: 0.6rem; font-weight: 700; color: #e2e8f0; padding: 2px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-slot-price { font-size: 0.55rem; color: #22c55e; text-align: center; padding-bottom: 2px; }
.wc-slot-actions { display: none; gap: 2px; justify-content: center; padding: 4px; }
.wc-pitch-slot:hover .wc-slot-actions { display: flex; }
.wc-slot-cap-btn, .wc-slot-vc-btn, .wc-slot-remove-btn {
  font-size: 0.55rem; font-weight: 800;
  border: none; border-radius: 3px; cursor: pointer;
  padding: 2px 4px;
}
.wc-slot-cap-btn { background: rgba(255,215,0,0.3); color: #ffd700; }
.wc-slot-vc-btn  { background: rgba(168,85,247,0.3); color: #a855f7; }
.wc-slot-remove-btn { background: rgba(239,68,68,0.3); color: #ef4444; }

/* Bench */
.wc-bench-label { font-size: 0.72rem; color: #64748b; font-weight: 600; }
.wc-bench { display: flex; gap: 8px; }

/* Captains */
.wc-captains {
  display: flex; gap: 16px;
  font-size: 0.8rem; color: #94a3b8;
}
.wc-captains strong { color: #ffd700; }

/* Picker panel */
.wc-picker-panel {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
}
.wc-picker-filters {
  display: flex; gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wc-picker-list { max-height: 260px; overflow-y: auto; }
.wc-picker-hint { padding: 20px; text-align: center; font-size: 0.82rem; color: #64748b; }
.wc-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.wc-picker-item:hover { background: rgba(255,255,255,0.05); }
.wc-picker-item--expensive { opacity: 0.45; cursor: not-allowed; }
.wc-picker-photo {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,0.08); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; color: #64748b;
}
.wc-picker-photo img { width: 100%; height: 100%; object-fit: cover; }
.wc-picker-info { flex: 1; min-width: 0; }
.wc-picker-name { font-size: 0.85rem; font-weight: 700; color: #e2e8f0; }
.wc-picker-meta { font-size: 0.72rem; color: #64748b; }
.wc-picker-price { font-size: 0.88rem; font-weight: 700; color: #22c55e; white-space: nowrap; }

/* Builder action buttons */
.wc-builder-actions { display: flex; gap: 10px; padding-top: 4px; }
.wc-btn-primary, .wc-btn-secondary {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.wc-btn-primary {
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
  color: #000;
}
.wc-btn-secondary {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #94a3b8;
}
.wc-btn-primary:hover, .wc-btn-secondary:hover { opacity: 0.85; }

/* Shared empty state */
.wc-empty { text-align: center; color: #64748b; padding: 40px 20px; font-size: 0.9rem; }

/* ======================================================
   LEADERBOARD TAB
   ====================================================== */

/* ── Leaderboard — 3-panel layout ──────────────────────────────────────── */

.lb-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  padding-bottom: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .lb-panels { grid-template-columns: 1fr; }
}

.lb-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lb-panel--featured {
  border-color: rgba(201,162,39,0.25);
  background: rgba(201,162,39,0.04);
  box-shadow: 0 0 0 1px rgba(201,162,39,0.12) inset;
}

/* Panel header */
.lb-panel-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lb-panel-header--pro  { border-bottom-color: rgba(201,162,39,0.2); }
.lb-panel-header--elite { border-bottom-color: rgba(192,192,192,0.18); }

.lb-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #e2e8f0;
  margin-bottom: 6px;
}

.lb-tier-badge {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lb-tier-badge--free  { background: rgba(99,218,99,0.12);  color: #6bdb6b; border: 1px solid rgba(99,218,99,0.25); }
.lb-tier-badge--pro   { background: rgba(201,162,39,0.12); color: #c9a227; border: 1px solid rgba(201,162,39,0.3); }
.lb-tier-badge--elite { background: rgba(192,192,192,0.1); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.2); }

.lb-panel-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #4b5563;
}
.lb-meta-pool {
  font-weight: 700;
  color: #6b7280;
}
.lb-meta-dot { color: #374151; }
.lb-meta-item { color: #4b5563; }

/* Panel body — rows */
.lb-panel-body {
  flex: 1;
  padding: 8px 0;
  min-height: 120px;
}

.lb-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  text-align: center;
  gap: 6px;
}
.lb-empty-icon { font-size: 1.8rem; opacity: 0.4; }
.lb-empty-msg  { font-size: 0.82rem; font-weight: 700; color: #374151; }
.lb-empty-hint { font-size: 0.72rem; color: #2d3748; }

.lb-loading { padding: 40px 20px; text-align: center; color: #374151; font-size: 0.8rem; }

/* Row */
.lb-row2 {
  display: grid;
  grid-template-columns: 36px 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.lb-row2:last-child { border-bottom: none; }
.lb-row2:hover { background: rgba(255,255,255,0.03); }
.lb-row2--me {
  background: rgba(201,162,39,0.06);
  border-left: 2px solid rgba(201,162,39,0.5);
  padding-left: 16px;
}
.lb-row2--me:hover { background: rgba(201,162,39,0.1); }

.lb-r2-rank {
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}
.lb-rank-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
}

.lb-r2-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #6b7280;
  flex-shrink: 0;
}
.lb-row2--me .lb-r2-avatar { background: rgba(201,162,39,0.15); color: #c9a227; }

.lb-r2-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  font-family: "SF Mono","Fira Mono",monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-row2--me .lb-r2-name { color: #c9a227; font-family: var(--font-primary); }

.lb-r2-pts {
  font-size: 0.9rem;
  font-weight: 800;
  color: #e2e8f0;
  text-align: right;
  white-space: nowrap;
}
.lb-r2-pts-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  color: #4b5563;
  margin-left: 2px;
}
.lb-r2-round {
  font-size: 0.72rem;
  font-weight: 600;
  color: #22c55e;
  text-align: right;
  white-space: nowrap;
}

.lb-you-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.3);
  color: #c9a227;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
  font-family: var(--font-primary);
}

/* Panel footer */
.lb-panel-footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.lb-enter-btn {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #64748b;
  padding: 9px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--font-primary);
}
.lb-enter-btn:hover { background: rgba(255,255,255,0.08); color: #94a3b8; }
.lb-enter-btn--pro {
  background: rgba(201,162,39,0.08);
  border-color: rgba(201,162,39,0.25);
  color: #c9a227;
}
.lb-enter-btn--pro:hover { background: rgba(201,162,39,0.14); border-color: rgba(201,162,39,0.4); }
.lb-enter-btn--elite {
  background: rgba(192,192,192,0.06);
  border-color: rgba(192,192,192,0.18);
  color: #a0aec0;
}
.lb-enter-btn--elite:hover { background: rgba(192,192,192,0.1); border-color: rgba(192,192,192,0.3); }

.lb-more-note {
  text-align: center;
  font-size: 0.68rem;
  color: #2d3748;
  padding: 10px 16px;
}

.lb-err { text-align: center; color: #4b5563; font-size: 0.8rem; padding: 20px; }

/* keep lb-empty-title/sub for any leftover usage */
.lb-empty-title { font-size: 1rem; font-weight: 700; color: #94a3b8; margin-bottom: 6px; }
.lb-empty-sub   { font-size: 0.82rem; }

/* Nav link badge */
.nav-wc-badge {
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.35);
  color: #c9a227;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .wc-tier-grid { grid-template-columns: 1fr; }
  .wc-modal-panel { width: 100%; }
  .wc-title { font-size: 1.6rem; }
}

/* ======================================================
   FULL-PAGE SQUAD BUILDER  (sqb-* namespace)
   ====================================================== */

.sqb-page {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0b0f18;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Header bar ---- */
.sqb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #0b0f18;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  z-index: 10;
}

.sqb-back-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: #6b7a94;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.sqb-back-btn:hover { color: #c8d0e0; border-color: rgba(255,255,255,0.2); }

.sqb-header-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sqb-tourney-label {
  font-size: 0.78rem;
  color: #d4a017;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sqb-budget-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

.sqb-budget-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.sqb-budget-fill {
  height: 100%;
  border-radius: 3px;
  background: #c9a227;
  transition: width 0.3s, background 0.3s;
}

.sqb-budget-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #c9a227;
  white-space: nowrap;
}

.sqb-captains-bar {
  font-size: 0.75rem;
  color: #64748b;
  display: flex;
  gap: 12px;
}
.sqb-cap-lbl { color: rgba(255,255,255,0.35); }
.sqb-vc-sep  { margin-left: 4px; }
.sqb-cap-val { color: #c9a227; }

.sqb-header-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sqb-hstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}

.sqb-hstat-val {
  font-size: 1rem;
  font-weight: 700;
  color: #c8d0e0;
  line-height: 1.1;
}

.sqb-hstat-lbl {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

.sqb-hstat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.07);
  margin: 0 4px;
}

.sqb-save-btn {
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.4);
  color: #c9a227;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.sqb-save-btn:hover { background: rgba(201,162,39,0.22); border-color: rgba(201,162,39,0.6); }

/* ---- Two-column layout ---- */
.sqb-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ---- Right: field wrapper (pitch + bench) ---- */
.sqb-field-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Left: Player picker ---- */
.sqb-players-col {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: #0b0f18;
  overflow: hidden;
}

.sqb-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #0b0f18;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.sqb-filter-row {
  display: flex;
  gap: 6px;
}
.sqb-filter-row .wc-filter-select { flex: 1; min-width: 0; }

.sqb-player-count {
  font-size: 0.72rem;
  color: #64748b;
  white-space: nowrap;
  align-self: center;
  padding-left: 4px;
}

.sqb-player-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sqb-player-list::-webkit-scrollbar { width: 4px; }
.sqb-player-list::-webkit-scrollbar-track { background: transparent; }
.sqb-player-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sqb-hint {
  padding: 30px 16px;
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
}

/* Context banner at top of player list */
.sqb-context-banner {
  padding: 7px 12px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.28);
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sqb-context-banner strong { color: rgba(255,255,255,0.6); font-weight: 600; }
.sqb-context-banner--active { color: rgba(255,255,255,0.35); }
.sqb-ctx-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.2);
}
.sqb-ctx-dot--GK,
.sqb-ctx-dot--DEF,
.sqb-ctx-dot--MID,
.sqb-ctx-dot--FWD,
.sqb-ctx-dot--sub { background: rgba(255,255,255,0.2); }

/* Player item row in left panel */
.sqb-player-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  transition: background 0.1s;
  position: relative;
}
.sqb-player-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  opacity: 0.6;
}
.sqb-player-item--GK::before  { background: #b8952a; }
.sqb-player-item--DEF::before { background: #4e72a0; }
.sqb-player-item--MID::before { background: #3d7d55; }
.sqb-player-item--FWD::before { background: #9e4444; }
.sqb-player-item:hover { background: rgba(255,255,255,0.04); }
.sqb-player-item:hover::before { opacity: 1; }
.sqb-player-item.sqb-pi--selected { background: rgba(201,162,39,0.07); }
.sqb-player-item.too-expensive { opacity: 0.35; cursor: not-allowed; }
.sqb-pi-price--red { color: #b85555 !important; }

@keyframes sqb-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.sqb-pi--shake { animation: sqb-shake 0.35s ease; }

@keyframes sqb-pulse-slot {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 16px rgba(255,215,0,0.55); border-color: rgba(255,215,0,0.8); }
}
.sqb-slot--pulse { animation: sqb-pulse-slot 0.5s ease; }

.sqb-pi-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.sqb-pi-photo--GK  { background: rgba(184,149,42,0.18); }
.sqb-pi-photo--DEF { background: rgba(78,114,160,0.18); }
.sqb-pi-photo--MID { background: rgba(61,125,85,0.18); }
.sqb-pi-photo--FWD { background: rgba(158,68,68,0.18); }
.sqb-pi-photo img { width: 100%; height: 100%; object-fit: cover; }

.sqb-pi-info { flex: 1; min-width: 0; }
.sqb-pi-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #c8d0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sqb-pi-meta {
  font-size: 0.67rem;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.sqb-pi-flag {
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.sqb-pi-nation {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.sqb-pi-pos {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.sqb-pi-pos--GK  { background: rgba(184,149,42,0.15);  color: #b8952a; }
.sqb-pi-pos--DEF { background: rgba(78,114,160,0.15);  color: #5a80a8; }
.sqb-pi-pos--MID { background: rgba(61,125,85,0.15);   color: #4a8c62; }
.sqb-pi-pos--FWD { background: rgba(158,68,68,0.15);   color: #a85252; }

/* Plain text position indicator */
.sqb-pi-pos-txt {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.sqb-pi-pos-txt--GK  { color: #b8952a; }
.sqb-pi-pos-txt--DEF { color: #5a80a8; }
.sqb-pi-pos-txt--MID { color: #4a8c62; }
.sqb-pi-pos-txt--FWD { color: #a85252; }

.sqb-pi-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.sqb-player-item .sqb-pi-price {
  margin-left: auto;
  flex-shrink: 0;
}
.sqb-pi-price {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
}
.sqb-pi-tier {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sqb-pi-tier--star     { background: rgba(184,149,42,0.12); color: #c9a227; }
.sqb-pi-tier--key      { background: rgba(148,163,184,0.1); color: #8a9ab5; }
.sqb-pi-tier--squad    { background: rgba(71,85,105,0.12);  color: #64748b; }
.sqb-pi-tier--rotation { background: transparent;           color: #475569; }

/* ---- Pitch ---- */
.sqb-pitch-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px 24px 12px;
  position: relative;
  background: #0b0f18;
}

.sqb-pitch {
  width: 100%;
  max-width: 900px;
  height: 100%;
  max-height: calc(100vh - 160px);

  /* Green grass with alternating stripes */
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0.12) 0px,
      rgba(0,0,0,0.12) 48px,
      transparent 48px,
      transparent 96px
    ),
    linear-gradient(180deg, #0b2a12 0%, #0e3518 40%, #0e3518 60%, #0b2a12 100%);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 16px 10px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 80px rgba(0,0,0,0.4),
    0 8px 32px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* White pitch markings */
.sqb-pitch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 1px;
  background: rgba(255,255,255,0.15);
  transform: translateY(-50%);
  pointer-events: none;
}
.sqb-pitch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sqb-pitch-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  z-index: 1;
}

/* ---- Player slots on the pitch ---- */
.sqb-slot {
  width: 96px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 116px;
  position: relative;
}
.sqb-slot:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.28); }

.sqb-slot.empty {
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.sqb-slot.active,
.sqb-slot.active-slot {
  border-color: rgba(201,162,39,0.7);
  border-style: solid;
  border-width: 1.5px;
  box-shadow: 0 0 12px rgba(201,162,39,0.18), inset 0 0 8px rgba(201,162,39,0.05);
  background: rgba(201,162,39,0.05);
}

.sqb-slot.filled {
  border-style: solid;
  border-color: rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.4);
}
.sqb-slot.filled:hover { border-color: rgba(255,255,255,0.4); }

/* Slot empty state */
.sqb-slot-pos-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* Captain / VC badge */
.sqb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.5rem;
  font-weight: 900;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.sqb-badge--C,
.sqb-badge--c  { background: #c9a227; color: #0a0a0a; }
.sqb-badge--VC,
.sqb-badge--v  { background: #7260a8; color: #fff; }

/* Photo area inside slot */
.sqb-slot-photo {
  width: 100%;
  height: 72px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  position: relative;
}
.sqb-slot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.sqb-slot-photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
  pointer-events: none;
}
.sqb-slot-initials,
.sqb-slot-init {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}

.sqb-slot-name {
  font-size: 0.66rem;
  font-weight: 600;
  color: #cbd5e1;
  padding: 6px 5px 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sqb-slot-price {
  display: none;
}

/* C / VC / Remove buttons — shown on hover */
.sqb-slot-actions,
.sqb-slot-btns {
  display: none;
  gap: 3px;
  justify-content: center;
  padding: 4px 4px;
  background: rgba(0,0,0,0.65);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: auto;
}
.sqb-slot.filled:hover .sqb-slot-actions,
.sqb-slot.filled:hover .sqb-slot-btns { display: flex; }

.sqb-cap-btn, .sqb-vc-btn, .sqb-rm-btn {
  font-size: 0.55rem;
  font-weight: 800;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 3px 6px;
  line-height: 1.3;
  transition: filter 0.1s;
}
.sqb-cap-btn:hover, .sqb-vc-btn:hover, .sqb-rm-btn:hover { filter: brightness(1.25); }
.sqb-cap-btn { background: rgba(184,149,42,0.18); color: #c9a227; }
.sqb-vc-btn  { background: rgba(130,100,180,0.18); color: #9b8fc0; }
.sqb-rm-btn  { background: rgba(180,60,60,0.18);  color: #a85252; }

/* ---- Bench strip (horizontal below pitch) ---- */
.sqb-bench-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #0b0f18;
}

.sqb-bench-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.sqb-bench-list {
  display: flex;
  flex-direction: row;
  gap: 14px;
  flex: 1;
  justify-content: center;
}

.sqb-slot--bench {
  width: 88px;
  min-height: 100px;
}

/* ====== PLAYER STATS POPUP ====== */
.sqb-popup {
  position: fixed;
  z-index: 9000;
  width: 260px;
  background: #111520;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  pointer-events: none;
}

.sqb-popup-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sqb-popup-flag { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }

.sqb-popup-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
}

.sqb-popup-meta {
  font-size: 0.68rem;
  color: #4a5568;
  margin-top: 3px;
}

.sqb-popup-price {
  margin-left: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c9a227;
  white-space: nowrap;
  flex-shrink: 0;
}

.sqb-popup-section-title {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #374151;
  margin-bottom: 7px;
  margin-top: 12px;
}
.sqb-popup-section-title:first-of-type { margin-top: 0; }

.sqb-popup-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
}

.sqb-popup-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sqb-popup-stat-lbl { color: rgba(255,255,255,0.35); }
.sqb-popup-stat-val { font-weight: 700; color: #c8d0e0; }

.sqb-popup-scoring {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sqb-popup-rule {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  padding: 2px 0;
  color: #4a5568;
}
.sqb-popup-rule-val {
  font-weight: 600;
  color: #6b7a8d;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .sqb-players-col { width: 270px; }
  .sqb-slot        { width: 84px; min-height: 106px; }
  .sqb-slot-photo  { height: 62px; }
  .sqb-pitch-row   { gap: 12px; }
}
@media (max-width: 820px) {
  .sqb-players-col { width: 220px; }
  .sqb-slot        { width: 70px; min-height: 94px; }
  .sqb-slot-photo  { height: 52px; }
  .sqb-pitch-row   { gap: 8px; }
  .sqb-slot--bench { width: 70px; min-height: 88px; }
  .sqb-filter-row  { flex-direction: column; }
  .sqb-header-stats { display: none; }
}
@media (max-width: 580px) {
  .sqb-layout { flex-direction: column; }
  .sqb-players-col { width: 100%; height: 190px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .sqb-bench-list  { gap: 8px; }
  .sqb-slot--bench { width: 64px; }
}

/* ════════════════════════════════════════
   DAILY PICK CARD
   ════════════════════════════════════════ */

#wc-pick-card { margin-bottom: 4px; }

.wc-pick-inner {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 20px 16px;
  margin-bottom: 20px;
}
.wc-pick-inner--quiet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  margin-bottom: 16px;
}

.wc-pick-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.wc-pick-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c9a227;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(201,162,39,0.5);
}
.wc-pick-remaining {
  margin-left: auto;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.wc-pick-matchup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}
.wc-pick-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.wc-pick-flag  { font-size: 2rem; line-height: 1; }
.wc-pick-tname {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 1.2;
}
.wc-pick-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
}
.wc-pick-time         { font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.4); }
.wc-pick-score-live   { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: 0.04em; line-height: 1; }
.wc-pick-live-badge   { font-size: 0.6rem; font-weight: 700; color: #ef4444; letter-spacing: 0.08em; text-transform: uppercase; }
.wc-pick-ft-badge     { font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; }

.wc-pick-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.wc-pick-btn {
  flex: 1;
  padding: 9px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1.3;
  text-align: center;
}
.wc-pick-btn:hover:not(:disabled) {
  background: rgba(201,162,39,0.12);
  border-color: rgba(201,162,39,0.45);
  color: #c9a227;
}
.wc-pick-btn--draw { background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.5); }
.wc-pick-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.wc-pick-hint       { font-size: 0.68rem; color: rgba(255,255,255,0.28); text-align: center; }
.wc-pick-hint--muted { padding: 8px 0 2px; font-size: 0.7rem; color: rgba(255,255,255,0.22); text-align: center; }

.wc-pick-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 2px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
}
.wc-pick-lock-icon   { font-size: 0.85rem; opacity: 0.55; }
.wc-pick-locked-sub  { font-size: 0.65rem; color: rgba(255,255,255,0.28); margin-left: 2px; }

.wc-pick-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.wc-pick-result--correct {
  background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.2);
  color: rgba(74,222,128,0.9);
}
.wc-pick-result--wrong {
  background: rgba(248,113,113,0.06);
  border: 1px solid rgba(248,113,113,0.12);
  color: rgba(255,255,255,0.4);
}
.wc-pick-result-icon { font-weight: 800; font-size: 0.85rem; flex-shrink: 0; }
.wc-pick-pts         { margin-left: auto; font-weight: 800; font-size: 0.88rem; color: #4ade80; }

.wc-pick-no-game { font-size: 0.76rem; color: rgba(255,255,255,0.35); }

/* ════════════════════════════════════════
   WC PAGE — RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════ */

/* Large laptop (1024–1280px) — tighten padding */
@media (max-width: 1280px) {
  .wc-content-body  { padding: 24px 20px 56px; }
  .wc-hero-content  { padding: 0 20px; }
  .wc-hero-title    { font-size: 2.5rem; }
  .wc-tier-card     { padding: 20px 16px 16px; gap: 12px; }
}

/* Medium screens (900–1024px) — compress cards slightly */
@media (max-width: 1024px) {
  .wc-tier-grid { gap: 12px; }
  .wc-tier-fee  { font-size: 2.2rem; }
  .wc-pool-num  { font-size: 1.6rem; }
}

/* Narrow — below 860px already stacks cards to 1 col (existing rule) */

/* Mobile hero — stack layout */
@media (max-width: 700px) {
  .wc-hero-content { flex-direction: column; align-items: flex-start; gap: 24px; }
  .wc-hero-title   { font-size: 2.2rem; }
  .wc-hero-cd      { font-size: 2rem; }
  .wc-hero-right   { text-align: left; }
  .wc-content-body { padding: 20px 16px 48px; }
}

/* Sidebar responsive — shrink on medium desktops */
@media (max-width: 1100px) {
  .sidebar { width: 180px; padding: 16px 10px; }
  main { margin-left: 180px; width: calc(100vw - 180px); }
  .top-navbar { left: 180px; }
  body.wc-page main.wc-main { width: calc(100vw - 180px); }
}
@media (max-width: 820px) {
  .sidebar { width: 60px; padding: 16px 8px; gap: 8px; }
  .sidebar-logo-top img { max-height: 36px; }
  .sidebar-nav a { font-size: 0; padding: 10px; justify-content: center; }
  main { margin-left: 60px; width: calc(100vw - 60px); }
  .top-navbar { left: 60px; }
  body.wc-page main.wc-main { width: calc(100vw - 60px); }
  .wc-content-body { padding: 0 12px; }
}

/* ════════════════════════════════════════
   TRUST & TRANSPARENCY — Hero, How It Works, FAQ, Footer
   ════════════════════════════════════════ */

/* Hero trust line */
.wc-hero-trust {
  margin-top: 12px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.03em;
}
.wc-hero-trust a {
  color: #c9a227;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.wc-hero-trust a:hover { text-decoration: underline; }

/* How It Works */
.wc-how-section {
  margin: 48px 0 40px;
  padding: 32px 28px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
}
.wc-how-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 24px;
}
.wc-how-steps {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.wc-how-step {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wc-how-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.3);
  color: #c9a227;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wc-how-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}
.wc-how-text strong { color: rgba(255,255,255,0.85); display: block; margin-bottom: 3px; }
.wc-how-arrow {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.15);
  margin-top: 6px;
  flex-shrink: 0;
}

/* FAQ */
.wc-faq-section {
  margin: 0 0 48px;
}
.wc-faq-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 16px;
}
.wc-faq-list { display: flex; flex-direction: column; gap: 2px; }
.wc-faq-item {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.wc-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}
.wc-faq-q:hover { color: #fff; }
.wc-faq-icon {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.wc-faq-item.open .wc-faq-icon { transform: rotate(45deg); }
.wc-faq-a {
  display: none;
  padding: 0 18px 16px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
}
.wc-faq-a a { color: #c9a227; text-decoration: none; }
.wc-faq-item.open .wc-faq-a { display: block; }

/* Sitewide Footer */
.site-footer {
  margin-top: 48px;
  padding: 20px 28px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-footer-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
}
.site-footer-links a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
}
.site-footer-links a:hover { color: rgba(255,255,255,0.7); }
.site-footer-dot { color: rgba(255,255,255,0.15); }
.site-footer-legal {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.2);
}

@media (max-width: 700px) {
  .wc-how-steps { flex-direction: column; }
  .wc-how-arrow { display: none; }
  .wc-how-step { flex-direction: row; align-items: flex-start; gap: 12px; }
}

/* ════════════════════════════════════════
   PREMIUM UI UPGRADE — Glassmorphism, Glows, Animations
   ════════════════════════════════════════ */

/* ── Enhanced background depth ── */
.wc-bg::before {
  background:
    radial-gradient(ellipse 70% 50% at 0% 100%,  rgba(180,120,5,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 100% 0%,  rgba(200,140,10,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%,  rgba(160,100,5,0.05) 0%, transparent 80%),
    radial-gradient(ellipse 80% 20% at 50% 100%, rgba(74,222,128,0.03) 0%, transparent 70%);
}
.wc-bg-globe {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(201,162,39,0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(168,85,247,0.04) 0%, transparent 40%);
}

/* ── Hero enhancements ── */
.wc-hero {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
.wc-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.3), transparent);
}
.wc-hero-title {
  text-shadow: 0 0 80px rgba(255,255,255,0.08);
}
.wc-hero-gold {
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255,215,0,0.5), 0 0 60px rgba(255,215,0,0.2);
}
.wc-hero-cd {
  text-shadow: 0 0 20px rgba(34,197,94,0.5);
}

/* ── Tier card glassmorphism ── */
.wc-tier-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.wc-tier-card:hover {
  transform: translateY(-6px);
}

/* Pro card — gold glow */
.wc-tier--10 {
  border-top: 2px solid rgba(201,162,39,0.6);
  border-left: 1px solid rgba(201,162,39,0.12);
  border-right: 1px solid rgba(201,162,39,0.12);
  border-bottom: 1px solid rgba(201,162,39,0.08);
  background: linear-gradient(160deg, rgba(201,162,39,0.06) 0%, rgba(255,255,255,0.02) 60%);
  box-shadow: 0 4px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,162,39,0.15);
}
.wc-tier--10:hover {
  box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 40px rgba(201,162,39,0.12), inset 0 1px 0 rgba(201,162,39,0.2);
  border-top-color: rgba(201,162,39,0.9);
}

/* Elite card — purple glow */
.wc-tier--25 {
  border-top: 2px solid rgba(168,85,247,0.6);
  border-left: 1px solid rgba(168,85,247,0.12);
  border-right: 1px solid rgba(168,85,247,0.12);
  border-bottom: 1px solid rgba(168,85,247,0.08);
  background: linear-gradient(160deg, rgba(168,85,247,0.06) 0%, rgba(255,255,255,0.02) 60%);
  box-shadow: 0 4px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(168,85,247,0.15);
}
.wc-tier--25:hover {
  box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 40px rgba(168,85,247,0.12), inset 0 1px 0 rgba(168,85,247,0.2);
  border-top-color: rgba(168,85,247,0.9);
}

/* Free Kick hero card — green glow ++ */
.wc-tier--hero {
  border: 1px solid rgba(74,222,128,0.2);
  border-top: 3px solid rgba(74,222,128,0.9);
  background: linear-gradient(160deg, rgba(74,222,128,0.07) 0%, rgba(255,255,255,0.02) 60%);
  box-shadow: 0 0 80px rgba(74,222,128,0.1), 0 8px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(74,222,128,0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.wc-tier--hero:hover {
  box-shadow: 0 0 100px rgba(74,222,128,0.16), 0 16px 56px rgba(0,0,0,0.6), inset 0 1px 0 rgba(74,222,128,0.25);
  transform: translateY(-8px);
}

/* ── Pool display upgrade ── */
.wc-pool-display {
  background: rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(8px);
  border-radius: 10px;
}
.wc-pool-num {
  text-shadow: 0 0 20px currentColor;
}

/* ── Enter buttons glow on hover ── */
.wc-enter-btn--hero {
  box-shadow: 0 0 0 rgba(74,222,128,0);
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.wc-enter-btn--hero:hover {
  box-shadow: 0 0 20px rgba(74,222,128,0.25), 0 4px 12px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.wc-enter-btn--side {
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.wc-tier--10 .wc-enter-btn--side:hover {
  background: rgba(201,162,39,0.1);
  border-color: rgba(201,162,39,0.35);
  color: #c9a227;
  box-shadow: 0 0 16px rgba(201,162,39,0.15);
  transform: translateY(-1px);
}
.wc-tier--25 .wc-enter-btn--side:hover {
  background: rgba(168,85,247,0.1);
  border-color: rgba(168,85,247,0.35);
  color: #c084fc;
  box-shadow: 0 0 16px rgba(168,85,247,0.15);
  transform: translateY(-1px);
}

/* ── Leaderboard row pulse on live ── */
.lb-row2 {
  transition: background 0.15s;
}
.lb-row2:hover {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}
.lb-row2--me {
  box-shadow: inset 2px 0 0 rgba(201,162,39,0.6);
}

/* ── Loading skeleton shimmer ── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.lb-loading, .adm-loading {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: 6px;
  color: transparent !important;
  min-height: 18px;
  user-select: none;
}

/* ── Subtle card entrance animation ── */
@keyframes card-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wc-tier-card {
  animation: card-rise 0.45s ease both;
}
.wc-tier--10  { animation-delay: 0.05s; }
.wc-tier--hero { animation-delay: 0s; }
.wc-tier--25  { animation-delay: 0.1s; }

/* ── Prize value highlight glow ── */
.wc-prize-val--highlight {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255,255,255,0.3);
}

/* ── Pool sub-text pulse indicator ── */
.wc-pool-label::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-left: 6px;
  vertical-align: middle;
  animation: live-pulse 2s infinite;
  opacity: 0.6;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* ════════════════════════════════════════
   CARD REDESIGN — Tier differentiation, breathing room, premium feel
   ════════════════════════════════════════ */

/* ── Base card overhaul ── */
.wc-tier-card {
  background: #111827;
  border-radius: 22px !important;
  padding: 32px 24px 24px !important;
  gap: 18px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.04) inset !important;
}

/* ── Pro → Blue ── */
.wc-tier--10 {
  border-top: 3px solid #3b82f6 !important;
  border-left: 1px solid rgba(59,130,246,0.18) !important;
  border-right: 1px solid rgba(59,130,246,0.18) !important;
  border-bottom: 1px solid rgba(59,130,246,0.08) !important;
  background: linear-gradient(160deg, rgba(59,130,246,0.08) 0%, #111827 55%) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 rgba(59,130,246,0), inset 0 1px 0 rgba(59,130,246,0.15) !important;
}
.wc-tier--10:hover {
  box-shadow: 0 14px 56px rgba(0,0,0,0.7), 0 0 48px rgba(59,130,246,0.14), inset 0 1px 0 rgba(59,130,246,0.2) !important;
  border-top-color: #60a5fa !important;
}
.wc-tier--10 .wc-pool-display {
  background: rgba(59,130,246,0.08) !important;
  border-color: rgba(59,130,246,0.25) !important;
}
.wc-tier--10 .wc-pool-label { color: rgba(96,165,250,0.7) !important; }
.wc-tier--10 .wc-pool-num   { color: #60a5fa !important; text-shadow: 0 0 20px rgba(96,165,250,0.4) !important; }

/* ── Elite → Amber/Gold ── */
.wc-tier--25 {
  border-top: 3px solid #eab308 !important;
  border-left: 1px solid rgba(234,179,8,0.2) !important;
  border-right: 1px solid rgba(234,179,8,0.2) !important;
  border-bottom: 1px solid rgba(234,179,8,0.1) !important;
  background: linear-gradient(160deg, rgba(234,179,8,0.09) 0%, #111827 55%) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(234,179,8,0.18) !important;
  padding: 36px 28px 28px !important;
}
.wc-tier--25:hover {
  box-shadow: 0 16px 64px rgba(0,0,0,0.7), 0 0 56px rgba(234,179,8,0.16), inset 0 1px 0 rgba(234,179,8,0.25) !important;
  border-top-color: #fbbf24 !important;
}
.wc-tier--25 .wc-pool-display {
  background: rgba(234,179,8,0.08) !important;
  border-color: rgba(234,179,8,0.3) !important;
}
.wc-tier--25 .wc-pool-label { color: rgba(234,179,8,0.7) !important; }
.wc-tier--25 .wc-pool-num   { color: #fbbf24 !important; text-shadow: 0 0 24px rgba(234,179,8,0.5) !important; }
.wc-tier--25 .wc-tier-fee   { font-size: 3.2rem !important; }

/* ── Elite badge glow ── */
.wc-tier-badge--elite {
  color: #fbbf24 !important;
  text-shadow: 0 0 16px rgba(234,179,8,0.5) !important;
}

/* ── Free Kick — cleaner green ── */
.wc-tier--hero {
  border-top: 3px solid #22c55e !important;
  border-left: 1px solid rgba(34,197,94,0.18) !important;
  border-right: 1px solid rgba(34,197,94,0.18) !important;
  border-bottom: 1px solid rgba(34,197,94,0.08) !important;
  background: linear-gradient(160deg, rgba(34,197,94,0.07) 0%, #111827 55%) !important;
  box-shadow: 0 0 80px rgba(34,197,94,0.1), 0 10px 48px rgba(0,0,0,0.7), inset 0 1px 0 rgba(34,197,94,0.18) !important;
  padding: 36px 28px 28px !important;
}
.wc-tier--hero:hover {
  box-shadow: 0 0 100px rgba(34,197,94,0.16), 0 18px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(34,197,94,0.25) !important;
  transform: translateY(-10px) !important;
}

/* ── Tier icons via pseudo-element ── */
.wc-tier--10  .wc-tier-badge::before { content: '⚡ '; }
.wc-tier--25  .wc-tier-badge::before { content: '♛ '; }
.wc-tier--hero .wc-tier-badge::before { content: '◈ '; }

/* ── Prize rows — cleaner, colour-coded top 3 ── */
.wc-prize-row {
  padding: 7px 10px !important;
  border-radius: 8px !important;
  border-left: 2px solid transparent;
  gap: 8px;
}
.wc-prize-row:first-child {
  border-left-color: #fbbf24;
  background: rgba(251,191,36,0.06) !important;
}
.wc-prize-row:nth-child(2) {
  border-left-color: rgba(203,213,225,0.5);
  background: rgba(203,213,225,0.03) !important;
}
.wc-prize-row:nth-child(3) {
  border-left-color: rgba(180,120,60,0.5);
  background: rgba(180,120,60,0.04) !important;
}
.wc-prize-rank { color: rgba(255,255,255,0.4) !important; font-size: 0.75rem !important; }
.wc-prize-val  { color: rgba(255,255,255,0.85) !important; font-size: 0.78rem !important; }
.wc-prize-val--highlight { color: #fff !important; font-size: 0.82rem !important; }

/* ── Buttons — bigger, rounder, tier-matched ── */
.wc-enter-btn--hero {
  padding: 15px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  background: rgba(34,197,94,0.14) !important;
  border-color: rgba(34,197,94,0.45) !important;
  color: #4ade80 !important;
  letter-spacing: 0.02em;
}
.wc-enter-btn--hero:hover {
  background: rgba(34,197,94,0.22) !important;
  border-color: rgba(34,197,94,0.65) !important;
  box-shadow: 0 0 24px rgba(34,197,94,0.25) !important;
}
.wc-tier--10 .wc-enter-btn--side {
  background: rgba(59,130,246,0.1) !important;
  border-color: rgba(59,130,246,0.3) !important;
  color: #60a5fa !important;
  border-radius: 12px !important;
  padding: 11px !important;
  font-weight: 700 !important;
}
.wc-tier--10 .wc-enter-btn--side:hover {
  background: rgba(59,130,246,0.18) !important;
  border-color: rgba(59,130,246,0.5) !important;
  box-shadow: 0 0 20px rgba(59,130,246,0.2) !important;
}
.wc-tier--25 .wc-enter-btn--side {
  background: rgba(234,179,8,0.1) !important;
  border-color: rgba(234,179,8,0.35) !important;
  color: #fbbf24 !important;
  border-radius: 12px !important;
  padding: 11px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
}
.wc-tier--25 .wc-enter-btn--side:hover {
  background: rgba(234,179,8,0.18) !important;
  border-color: rgba(234,179,8,0.55) !important;
  box-shadow: 0 0 24px rgba(234,179,8,0.25) !important;
}

/* ── Entry badge — green pill when entered ── */
.wc-my-entry-badge {
  background: rgba(34,197,94,0.1) !important;
  border-color: rgba(34,197,94,0.3) !important;
  color: #4ade80 !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
}

/* ── Tagline readability ── */
.wc-tier-tagline {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.5;
}

/* ════════════════════════════════════════
   LEADERBOARD REDESIGN — Tier colours, premium rows, readability
   ════════════════════════════════════════ */

/* ── Panel base ── */
.lb-panels { gap: 20px !important; }

.lb-panel {
  background: #111827 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
  overflow: hidden;
}

/* Free Kick panel — green */
.lb-panel:nth-child(2),
.lb-panel--free {
  border-top: 3px solid #22c55e !important;
  background: linear-gradient(160deg, rgba(34,197,94,0.06) 0%, #111827 50%) !important;
}

/* Pro panel — blue */
.lb-panel--featured,
.lb-panel:nth-child(1) {
  border-top: 3px solid #3b82f6 !important;
  background: linear-gradient(160deg, rgba(59,130,246,0.06) 0%, #111827 50%) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 rgba(59,130,246,0) !important;
  border-color: rgba(59,130,246,0.15) !important;
}

/* Elite panel — amber */
.lb-panel:nth-child(3),
.lb-panel--elite {
  border-top: 3px solid #eab308 !important;
  background: linear-gradient(160deg, rgba(234,179,8,0.06) 0%, #111827 50%) !important;
  border-color: rgba(234,179,8,0.15) !important;
}

/* ── Panel header ── */
.lb-panel-header {
  padding: 20px 20px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.lb-panel-title {
  font-size: 1.05rem !important;
  color: #f1f5f9 !important;
  margin-bottom: 8px !important;
}

/* Tier badges — updated colours */
.lb-tier-badge--free  { background: rgba(34,197,94,0.12)  !important; color: #4ade80  !important; border-color: rgba(34,197,94,0.3)  !important; }
.lb-tier-badge--pro   { background: rgba(59,130,246,0.12) !important; color: #60a5fa  !important; border-color: rgba(59,130,246,0.3)  !important; }
.lb-tier-badge--elite { background: rgba(234,179,8,0.12)  !important; color: #fbbf24  !important; border-color: rgba(234,179,8,0.3)   !important; }

/* Meta row — much more readable */
.lb-panel-meta { color: rgba(255,255,255,0.35) !important; font-size: 0.75rem !important; }
.lb-meta-pool  { color: rgba(255,255,255,0.55) !important; font-weight: 700 !important; }
.lb-meta-dot   { color: rgba(255,255,255,0.15) !important; }
.lb-meta-item  { color: rgba(255,255,255,0.35) !important; }

/* ── Rows ── */
.lb-panel-body { padding: 6px 0 !important; }

.lb-row2 {
  padding: 10px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s !important;
  gap: 10px !important;
}
.lb-row2:hover { background: rgba(255,255,255,0.04) !important; }

/* Top 3 rows — subtle gold/silver/bronze tints */
.lb-row2:nth-child(1) { background: rgba(251,191,36,0.04); }
.lb-row2:nth-child(2) { background: rgba(203,213,225,0.03); }
.lb-row2:nth-child(3) { background: rgba(180,120,60,0.03); }
.lb-row2:nth-child(1):hover { background: rgba(251,191,36,0.08) !important; }

/* Your row */
.lb-row2--me {
  background: rgba(201,162,39,0.07) !important;
  border-left: 3px solid rgba(201,162,39,0.6) !important;
  padding-left: 17px !important;
}
.lb-row2--me:hover { background: rgba(201,162,39,0.12) !important; }

/* ── Avatar ── */
.lb-r2-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.lb-row2:nth-child(1) .lb-r2-avatar { background: rgba(251,191,36,0.15) !important; color: #fbbf24 !important; border-color: rgba(251,191,36,0.3) !important; }
.lb-row2:nth-child(2) .lb-r2-avatar { background: rgba(203,213,225,0.1)  !important; color: #cbd5e1 !important; border-color: rgba(203,213,225,0.2) !important; }
.lb-row2:nth-child(3) .lb-r2-avatar { background: rgba(180,120,60,0.12)  !important; color: #c97c3a  !important; border-color: rgba(180,120,60,0.25)  !important; }
.lb-row2--me .lb-r2-avatar           { background: rgba(201,162,39,0.15)  !important; color: #c9a227  !important; border-color: rgba(201,162,39,0.3)   !important; }

/* ── Name ── */
.lb-r2-name {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.8rem !important;
}
.lb-row2--me .lb-r2-name { color: #c9a227 !important; }

/* ── Rank number ── */
.lb-rank-num {
  color: rgba(255,255,255,0.25) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

/* ── Points ── */
.lb-r2-pts { color: #f1f5f9 !important; font-size: 0.88rem !important; }
.lb-r2-pts-lbl { color: rgba(255,255,255,0.25) !important; }

/* ── Empty / loading state ── */
.lb-empty-msg  { color: rgba(255,255,255,0.25) !important; }
.lb-empty-hint { color: rgba(255,255,255,0.15) !important; }
.lb-empty-icon { opacity: 0.25 !important; }

/* ── Footer enter buttons — tier matched ── */
.lb-panel-footer {
  padding: 14px 20px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.lb-enter-btn {
  border-radius: 10px !important;
  padding: 10px !important;
  font-size: 0.8rem !important;
  transition: all 0.2s !important;
}
.lb-enter-btn--free {
  background: rgba(34,197,94,0.08) !important;
  border-color: rgba(34,197,94,0.25) !important;
  color: #4ade80 !important;
}
.lb-enter-btn--free:hover {
  background: rgba(34,197,94,0.15) !important;
  border-color: rgba(34,197,94,0.45) !important;
  box-shadow: 0 0 16px rgba(34,197,94,0.2) !important;
}
.lb-enter-btn--pro {
  background: rgba(59,130,246,0.08) !important;
  border-color: rgba(59,130,246,0.25) !important;
  color: #60a5fa !important;
}
.lb-enter-btn--pro:hover {
  background: rgba(59,130,246,0.15) !important;
  border-color: rgba(59,130,246,0.45) !important;
  box-shadow: 0 0 16px rgba(59,130,246,0.2) !important;
}
.lb-enter-btn--elite {
  background: rgba(234,179,8,0.08) !important;
  border-color: rgba(234,179,8,0.25) !important;
  color: #fbbf24 !important;
}
.lb-enter-btn--elite:hover {
  background: rgba(234,179,8,0.15) !important;
  border-color: rgba(234,179,8,0.45) !important;
  box-shadow: 0 0 16px rgba(234,179,8,0.2) !important;
}

/* ════════════════════════════════════════
   CARD HIERARCHY FIX — Pool as focal point, breathing room, Elite elevated
   ════════════════════════════════════════ */

/* ── More breathing room in all cards ── */
.wc-tier-card {
  padding: 36px 28px 28px !important;
  gap: 20px !important;
}
.wc-tier--hero, .wc-tier--25 {
  padding: 40px 32px 32px !important;
}

/* ── Price number — bigger and dominant ── */
.wc-tier-fee {
  font-size: 3.6rem !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
}
.wc-tier-fee--free { font-size: 3.2rem !important; }
.wc-tier--25 .wc-tier-fee { font-size: 4rem !important; }

/* ── Pool display — the star of the card ── */
.wc-pool-display {
  padding: 20px 18px !important;
  border-radius: 14px !important;
}
.wc-pool-num {
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin: 6px 0 !important;
}
.wc-tier--25 .wc-pool-num { font-size: 3.2rem !important; }
.wc-pool-label {
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 0 !important;
}
.wc-pool-sub {
  font-size: 0.68rem !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
}

/* ── Prize rows — much smaller, less dominant ── */
.wc-prize-list { gap: 5px !important; }
.wc-prize-row {
  padding: 5px 8px !important;
  font-size: 0.76rem !important;
}
.wc-prize-rank { font-size: 0.7rem !important; }
.wc-prize-val  { font-size: 0.74rem !important; }
.wc-prize-val--highlight { font-size: 0.78rem !important; }

/* ── Elite — clearly more elevated ── */
.wc-tier--25 {
  box-shadow:
    0 0 0 1px rgba(234,179,8,0.15),
    0 12px 60px rgba(0,0,0,0.8),
    0 0 80px rgba(234,179,8,0.1),
    inset 0 1px 0 rgba(234,179,8,0.2) !important;
  border-top: 4px solid #eab308 !important;
  transform: scale(1.03);
}
.wc-tier--25:hover {
  transform: scale(1.03) translateY(-8px) !important;
  box-shadow:
    0 0 0 1px rgba(234,179,8,0.2),
    0 20px 80px rgba(0,0,0,0.8),
    0 0 100px rgba(234,179,8,0.18),
    inset 0 1px 0 rgba(234,179,8,0.25) !important;
}

/* ── Deeper shadows on all cards ── */
.wc-tier--10 {
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.1),
    0 10px 50px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(59,130,246,0.12) !important;
}
.wc-tier--10:hover {
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.18),
    0 18px 64px rgba(0,0,0,0.75),
    0 0 48px rgba(59,130,246,0.12),
    inset 0 1px 0 rgba(59,130,246,0.18) !important;
}
.wc-tier--hero {
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.15),
    0 12px 56px rgba(0,0,0,0.75),
    0 0 80px rgba(34,197,94,0.08),
    inset 0 1px 0 rgba(34,197,94,0.18) !important;
}
.wc-tier--hero:hover {
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.22),
    0 20px 72px rgba(0,0,0,0.8),
    0 0 100px rgba(34,197,94,0.14),
    inset 0 1px 0 rgba(34,197,94,0.22) !important;
}

/* ════════════════════════════════════════
   GLASS CARDS — Transparent, no colour tints. Clean background.
   ════════════════════════════════════════ */

/* ── Remove all card colour backgrounds — pure glass ── */
.wc-tier-card,
.wc-tier--10,
.wc-tier--25,
.wc-tier--hero {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Remove background glows from wc-bg entirely ── */
.wc-bg {
  background: #05080f !important;
}
.wc-bg::before {
  background: none !important;
}
.wc-bg-globe {
  background-image: none !important;
}

/* ── True pitch black background ── */
.wc-bg { background: #000000 !important; }
body.wc-page { background: #000000 !important; }

/* ── Solid sidebar — no glass on background elements ── */
.sidebar {
  background: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.top-navbar {
  background: rgba(0,0,0,0.95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ════════════════════════════════════════
   FINAL CARD OVERHAUL — Clean authoritative block, overrides all previous
   ════════════════════════════════════════ */

/* Grid: Elite gets more width */
.wc-tier-grid {
  grid-template-columns: 1fr 1fr 1.18fr !important;
  gap: 20px !important;
  align-items: start !important;
}

/* ── Base card reset ── */
.wc-tier-card {
  background: rgba(255,255,255,0.035) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top-width: 1px !important;
  padding: 36px 28px 28px !important;
  gap: 22px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
  transform: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.wc-tier-card:hover {
  transform: translateY(-6px) !important;
}

/* ── Tier accents — top border only, clean ── */
.wc-tier--10 {
  border-top: 3px solid #3b82f6 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(59,130,246,0.1) !important;
}
.wc-tier--10:hover {
  box-shadow: 0 28px 72px rgba(0,0,0,0.75), 0 0 48px rgba(59,130,246,0.1) !important;
}
.wc-tier--hero {
  border-top: 3px solid #22c55e !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(34,197,94,0.1) !important;
  padding: 36px 28px 28px !important;
}
.wc-tier--hero:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 60px rgba(34,197,94,0.1) !important;
}
.wc-tier--25 {
  border-top: 4px solid #eab308 !important;
  border-left: 1px solid rgba(234,179,8,0.15) !important;
  border-right: 1px solid rgba(234,179,8,0.15) !important;
  border-bottom: 1px solid rgba(234,179,8,0.08) !important;
  padding: 40px 32px 32px !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.8),
    0 0 0 1px rgba(234,179,8,0.12),
    0 0 80px rgba(234,179,8,0.08) !important;
  transform: none !important;
}
.wc-tier--25:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 36px 100px rgba(0,0,0,0.85),
    0 0 0 1px rgba(234,179,8,0.2),
    0 0 100px rgba(234,179,8,0.15) !important;
}

/* ── Badge — small, clean, top ── */
.wc-tier-badge {
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 0 !important;
}
.wc-tier-badge--free  { color: rgba(34,197,94,0.7)  !important; }
.wc-tier-badge--elite { color: rgba(234,179,8,0.8)  !important; text-shadow: none !important; }

/* ── Price — DOMINANT, largest element ── */
.wc-tier-fee {
  font-size: 4.5rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.06em !important;
  line-height: 0.95 !important;
  margin: 0 !important;
}
.wc-tier-fee span {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0 !important;
}
.wc-tier-fee--free { font-size: 4rem !important; }
.wc-tier--25 .wc-tier-fee { font-size: 5rem !important; }

/* ── Tagline — very small, muted ── */
.wc-tier-tagline {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.35) !important;
  line-height: 1.4 !important;
  margin: -8px 0 !important;
}

/* ── Pool display — the focal point ── */
.wc-pool-display {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  text-align: center !important;
  backdrop-filter: blur(8px) !important;
}
.wc-tier--10  .wc-pool-display { border-color: rgba(59,130,246,0.2)  !important; }
.wc-tier--hero .wc-pool-display { border-color: rgba(34,197,94,0.2)   !important; }
.wc-tier--25  .wc-pool-display { border-color: rgba(234,179,8,0.25)  !important; }

.wc-pool-label {
  font-size: 0.6rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.3) !important;
  margin-bottom: 4px !important;
}
.wc-tier--10  .wc-pool-label { color: rgba(96,165,250,0.6)  !important; }
.wc-tier--hero .wc-pool-label { color: rgba(74,222,128,0.6)  !important; }
.wc-tier--25  .wc-pool-label { color: rgba(234,179,8,0.6)   !important; }

.wc-pool-num {
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  text-shadow: none !important;
  margin: 0 !important;
}
.wc-tier--10  .wc-pool-num { color: #60a5fa !important; text-shadow: 0 0 24px rgba(96,165,250,0.4)  !important; }
.wc-tier--hero .wc-pool-num { color: #4ade80  !important; text-shadow: 0 0 24px rgba(74,222,128,0.4)  !important; }
.wc-tier--25  .wc-pool-num { color: #fbbf24  !important; text-shadow: 0 0 32px rgba(234,179,8,0.5)   !important; }

.wc-pool-sub {
  font-size: 0.66rem !important;
  color: rgba(255,255,255,0.22) !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* ── Prize rows — small, secondary, barely there ── */
.wc-prize-list { gap: 4px !important; }
.wc-prize-row {
  padding: 5px 8px !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 6px !important;
  border-left-width: 2px !important;
}
.wc-prize-rank { font-size: 0.68rem !important; color: rgba(255,255,255,0.3) !important; }
.wc-prize-val  { font-size: 0.72rem !important; color: rgba(255,255,255,0.65) !important; }
.wc-prize-val--highlight { color: #fff !important; font-size: 0.75rem !important; font-weight: 700 !important; }

/* ── Buttons — clean, full-width, rounded ── */
.wc-enter-btn--hero {
  padding: 16px !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  background: rgba(34,197,94,0.12) !important;
  border: 1px solid rgba(34,197,94,0.35) !important;
  color: #4ade80 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s !important;
}
.wc-enter-btn--hero:hover {
  background: rgba(34,197,94,0.2) !important;
  border-color: rgba(34,197,94,0.55) !important;
  box-shadow: 0 0 24px rgba(34,197,94,0.2) !important;
  transform: translateY(-1px) !important;
}
.wc-tier--10 .wc-enter-btn--side {
  padding: 13px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  background: rgba(59,130,246,0.1) !important;
  border: 1px solid rgba(59,130,246,0.3) !important;
  color: #60a5fa !important;
  transition: all 0.2s !important;
}
.wc-tier--10 .wc-enter-btn--side:hover {
  background: rgba(59,130,246,0.18) !important;
  border-color: rgba(59,130,246,0.5) !important;
  box-shadow: 0 0 20px rgba(59,130,246,0.2) !important;
}
.wc-tier--25 .wc-enter-btn--side {
  padding: 14px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  background: rgba(234,179,8,0.1) !important;
  border: 1px solid rgba(234,179,8,0.35) !important;
  color: #fbbf24 !important;
  transition: all 0.2s !important;
}
.wc-tier--25 .wc-enter-btn--side:hover {
  background: rgba(234,179,8,0.18) !important;
  border-color: rgba(234,179,8,0.55) !important;
  box-shadow: 0 0 24px rgba(234,179,8,0.22) !important;
}

/* ── Remove all tier icons — less clutter ── */
.wc-tier--10  .wc-tier-badge::before,
.wc-tier--25  .wc-tier-badge::before,
.wc-tier--hero .wc-tier-badge::before { content: '' !important; }

/* ── Mobile: stack, equal width ── */
@media (max-width: 860px) {
  .wc-tier-grid { grid-template-columns: 1fr !important; }
  .wc-tier-fee  { font-size: 3.5rem !important; }
  .wc-tier--25 .wc-tier-fee { font-size: 4rem !important; }
}

/* ── Hero World Cup ball ── */
.wc-hero-ball {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wc-ball-svg {
  width: 160px;
  height: 160px;
  opacity: 0.6;
  animation: ball-float 6s ease-in-out infinite;
  filter: drop-shadow(0 0 32px rgba(255,255,255,0.08));
}
@keyframes ball-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(8deg); }
}
@media (max-width: 900px) { .wc-hero-ball { display: none; } }

/* ── Trophy — prominent, still, golden light ── */
.wc-hero-ball {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.wc-hero-ball::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,0,0.18) 0%, rgba(255,160,0,0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: trophy-glow-pulse 3s ease-in-out infinite;
}
@keyframes trophy-glow-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}
.wc-ball-svg {
  width: 220px !important;
  height: 220px !important;
  opacity: 1 !important;
  animation: none !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 0 40px rgba(255,180,0,0.5)) drop-shadow(0 0 80px rgba(255,140,0,0.25)) drop-shadow(0 8px 24px rgba(0,0,0,0.6)) !important;
}
@media (max-width: 900px) {
  .wc-hero-ball { display: none !important; }
}

/* ── Trophy v3 — larger, rays not aura ── */
.wc-hero-ball {
  position: relative !important;
  flex-shrink: 0 !important;
}
/* Light rays — conic starburst behind trophy */
.wc-hero-ball::before {
  content: '' !important;
  position: absolute !important;
  width: 420px !important;
  height: 420px !important;
  border-radius: 50% !important;
  background: repeating-conic-gradient(
    rgba(255,190,0,0.13) 0deg 8deg,
    transparent 8deg 20deg
  ) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  animation: rays-spin 20s linear infinite !important;
  z-index: 0 !important;
  mask-image: radial-gradient(circle, rgba(0,0,0,0.8) 20%, transparent 70%) !important;
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.8) 20%, transparent 70%) !important;
}
/* Remove the old aura pulse */
@keyframes trophy-glow-pulse { 0%,100%{} }

@keyframes rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.wc-ball-svg {
  width: 280px !important;
  height: 280px !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 0 30px rgba(255,180,0,0.6)) drop-shadow(0 0 60px rgba(255,140,0,0.3)) drop-shadow(0 12px 32px rgba(0,0,0,0.7)) !important;
}

/* ── Hero text — larger left and right sides ── */
.wc-hero-eyebrow {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.45) !important;
}
.wc-hero-title {
  font-size: 4rem !important;
}
.wc-hero-stat-val {
  font-size: 1.9rem !important;
}
.wc-hero-gold {
  font-size: 1.9rem !important;
}
.wc-hero-stat-lbl {
  font-size: 0.65rem !important;
}
.wc-hero-trust {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.35) !important;
}
.wc-hero-trust a {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.55) !important;
}

/* ── Countdown — larger ── */
.wc-hero-cd-label {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 12px !important;
}
.wc-hero-cd {
  font-size: 3.6rem !important;
  letter-spacing: -0.02em !important;
}
.wc-hero-cd-units {
  font-size: 0.6rem !important;
  color: rgba(255,255,255,0.25) !important;
  margin-top: 8px !important;
}

/* ── Hero — bigger title, prize pool, entries ── */
.wc-hero-title { font-size: 5.5rem !important; }
.wc-hero-stat-val { font-size: 2.4rem !important; }
.wc-hero-gold { font-size: 2.4rem !important; }
.wc-hero-stat-lbl { font-size: 0.72rem !important; letter-spacing: 0.1em !important; }
.wc-hero-sep { height: 44px !important; }

/* ════════════════════════════════════════
   LEADERBOARD PANELS — Match tier card design exactly
   ════════════════════════════════════════ */

.lb-panels {
  gap: 20px !important;
  align-items: start !important;
}

/* Base panel — same glass as tier cards */
.lb-panel {
  background: rgba(255,255,255,0.035) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
  overflow: hidden !important;
}

/* Free Kick — green */
.lb-panel--free {
  border-top: 3px solid #22c55e !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(34,197,94,0.1) !important;
}
.lb-panel--free:hover {
  box-shadow: 0 28px 72px rgba(0,0,0,0.75), 0 0 48px rgba(34,197,94,0.08) !important;
}

/* Pro — blue */
.lb-panel--featured {
  border-top: 3px solid #3b82f6 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(59,130,246,0.1) !important;
}
.lb-panel--featured:hover {
  box-shadow: 0 28px 72px rgba(0,0,0,0.75), 0 0 48px rgba(59,130,246,0.1) !important;
}

/* Elite — amber */
.lb-panel--elite {
  border-top: 4px solid #eab308 !important;
  border-left: 1px solid rgba(234,179,8,0.15) !important;
  border-right: 1px solid rgba(234,179,8,0.15) !important;
  border-bottom: 1px solid rgba(234,179,8,0.08) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.8),
    0 0 0 1px rgba(234,179,8,0.12),
    0 0 60px rgba(234,179,8,0.07) !important;
}
.lb-panel--elite:hover {
  box-shadow:
    0 36px 100px rgba(0,0,0,0.85),
    0 0 0 1px rgba(234,179,8,0.2),
    0 0 80px rgba(234,179,8,0.12) !important;
}

/* Panel header — clean, no border */
.lb-panel-header {
  padding: 24px 24px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.lb-panel-header--free  { border-bottom-color: rgba(34,197,94,0.12) !important; }
.lb-panel-header--pro   { border-bottom-color: rgba(59,130,246,0.12) !important; }
.lb-panel-header--elite { border-bottom-color: rgba(234,179,8,0.12) !important; }

/* Title row */
.lb-panel-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Tier badges */
.lb-tier-badge {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  letter-spacing: 0.08em !important;
}
.lb-tier-badge--free  { background: rgba(34,197,94,0.12)  !important; color: #4ade80  !important; border: 1px solid rgba(34,197,94,0.3)  !important; }
.lb-tier-badge--pro   { background: rgba(59,130,246,0.12) !important; color: #60a5fa  !important; border: 1px solid rgba(59,130,246,0.3)  !important; }
.lb-tier-badge--elite { background: rgba(234,179,8,0.12)  !important; color: #fbbf24  !important; border: 1px solid rgba(234,179,8,0.3)   !important; }

/* Meta — pool + count */
.lb-panel-meta { font-size: 0.75rem !important; color: rgba(255,255,255,0.35) !important; gap: 6px !important; }
.lb-meta-pool  { font-weight: 700 !important; color: rgba(255,255,255,0.55) !important; }
.lb-panel--free  .lb-meta-pool { color: rgba(74,222,128,0.7)  !important; }
.lb-panel--featured .lb-meta-pool { color: rgba(96,165,250,0.7) !important; }
.lb-panel--elite .lb-meta-pool { color: rgba(251,191,36,0.7)  !important; }
.lb-meta-dot   { color: rgba(255,255,255,0.15) !important; }
.lb-meta-item  { color: rgba(255,255,255,0.3) !important; }

/* Rows */
.lb-panel-body { padding: 8px 0 !important; }
.lb-row2 {
  padding: 10px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.lb-row2:hover { background: rgba(255,255,255,0.04) !important; border-radius: 0 !important; }
.lb-row2--me {
  background: rgba(201,162,39,0.07) !important;
  border-left: 3px solid rgba(201,162,39,0.6) !important;
  padding-left: 21px !important;
}

/* Avatars */
.lb-r2-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.4) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.lb-row2:nth-child(1) .lb-r2-avatar { background: rgba(251,191,36,0.15) !important; color: #fbbf24 !important; border-color: rgba(251,191,36,0.3) !important; }
.lb-row2:nth-child(2) .lb-r2-avatar { background: rgba(203,213,225,0.1)  !important; color: #cbd5e1 !important; border-color: rgba(203,213,225,0.2) !important; }
.lb-row2:nth-child(3) .lb-r2-avatar { background: rgba(180,120,60,0.12)  !important; color: #c97c3a !important; border-color: rgba(180,120,60,0.25)  !important; }

/* Name + rank */
.lb-r2-name  { color: rgba(255,255,255,0.65) !important; font-size: 0.8rem !important; }
.lb-rank-num { color: rgba(255,255,255,0.2)  !important; font-size: 0.72rem !important; font-weight: 700 !important; }
.lb-r2-pts   { color: #f1f5f9 !important; font-size: 0.9rem !important; }
.lb-r2-pts-lbl { color: rgba(255,255,255,0.2) !important; }

/* Empty / loading */
.lb-empty-msg  { color: rgba(255,255,255,0.25) !important; }
.lb-empty-hint { color: rgba(255,255,255,0.15) !important; }

/* Footer buttons — tier matched, same as tier cards */
.lb-panel-footer { padding: 16px 24px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; }
.lb-enter-btn { border-radius: 12px !important; padding: 12px !important; font-size: 0.82rem !important; font-weight: 700 !important; transition: all 0.2s !important; }
.lb-enter-btn--free  { background: rgba(34,197,94,0.1)  !important; border-color: rgba(34,197,94,0.3)  !important; color: #4ade80  !important; }
.lb-enter-btn--free:hover  { background: rgba(34,197,94,0.18)  !important; border-color: rgba(34,197,94,0.5)  !important; box-shadow: 0 0 20px rgba(34,197,94,0.2)  !important; }
.lb-enter-btn--pro   { background: rgba(59,130,246,0.1) !important; border-color: rgba(59,130,246,0.3) !important; color: #60a5fa  !important; }
.lb-enter-btn--pro:hover   { background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.5) !important; box-shadow: 0 0 20px rgba(59,130,246,0.2) !important; }
.lb-enter-btn--elite { background: rgba(234,179,8,0.1)  !important; border-color: rgba(234,179,8,0.3)  !important; color: #fbbf24  !important; }
.lb-enter-btn--elite:hover { background: rgba(234,179,8,0.18)  !important; border-color: rgba(234,179,8,0.5)  !important; box-shadow: 0 0 20px rgba(234,179,8,0.2)  !important; }

/* ── Reduce hero text — was getting too large ── */
.wc-hero-title    { font-size: 3rem !important; }
.wc-hero-stat-val { font-size: 1.5rem !important; }
.wc-hero-gold     { font-size: 1.5rem !important; }
.wc-hero-cd       { font-size: 2.6rem !important; }
.wc-hero-sep      { height: 32px !important; }

/* ── Leaderboard — no colour tints, pure glass, equal height ── */
.lb-panel--free,
.lb-panel--featured,
.lb-panel--elite {
  background: rgba(255,255,255,0.035) !important;
}
.lb-panels { align-items: stretch !important; }
.lb-panel-body {
  min-height: unset !important;
  height: auto !important;
}
/* Lock all panels to exactly 4 rows height */
.lb-panel {
  display: flex !important;
  flex-direction: column !important;
}
.lb-panel-body {
  flex: 1 !important;
  overflow: hidden !important;
}
/* Hide the "Top 25 shown" note since we cap at 4 */
.lb-more-note { display: none !important; }

/* ── Force pure glass on ALL leaderboard panels — no navy, no tint ── */
.lb-panel,
.lb-panel--free,
.lb-panel--featured,
.lb-panel--elite,
.lb-panel:nth-child(1),
.lb-panel:nth-child(2),
.lb-panel:nth-child(3) {
  background: rgba(255,255,255,0.035) !important;
  background-image: none !important;
}

/* ── Leaderboard panels — scrollable body, fixed height ── */
.lb-panel-body {
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.1) transparent !important;
}
.lb-panel-body::-webkit-scrollbar { width: 4px; }
.lb-panel-body::-webkit-scrollbar-track { background: transparent; }
.lb-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.lb-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Tier cards — equal height, aligned, simplified ── */
.wc-tier-grid { align-items: stretch !important; }
.wc-pool-sub  { display: none !important; }
.wc-tier-tagline { display: none !important; }

/* ════════════════════════════════════════
   HERO OTP PANEL — Matches hero design
   ════════════════════════════════════════ */
.wc-hero-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  align-items: flex-end !important;
}
.wc-hero-otp {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 18px 20px;
  width: 280px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.wc-hero-otp-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 12px;
}
.wc-hero-otp-row {
  display: flex;
  gap: 8px;
}
.wc-hero-otp-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #fff;
  font-size: 0.82rem;
  outline: none;
  min-width: 0;
  transition: border-color 0.15s;
}
.wc-hero-otp-input:focus { border-color: rgba(255,255,255,0.25); }
.wc-hero-otp-code {
  text-align: center;
  letter-spacing: 0.25em;
  font-size: 1rem;
  font-weight: 700;
}
.wc-hero-otp-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.wc-hero-otp-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }
.wc-hero-otp-btn--verify {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.3);
  color: #4ade80;
}
.wc-hero-otp-btn--verify:hover { background: rgba(74,222,128,0.2); border-color: rgba(74,222,128,0.5); }
.wc-hero-otp-sent {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}
.wc-hero-otp-links {
  margin-top: 8px;
  display: flex;
  gap: 14px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
}
.wc-hero-otp-links span {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.15);
}
.wc-hero-otp-links span:hover { color: rgba(255,255,255,0.6); }
.wc-hero-otp-msg {
  margin-top: 8px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
}

/* Mobile — full width, stacked */
@media (max-width: 700px) {
  .wc-hero-right { align-items: flex-start !important; }
  .wc-hero-otp { width: 100%; box-sizing: border-box; }
}

/* ── Hero OTP — final style matching hero exactly ── */
.wc-hero-otp {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  width: 300px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.wc-hero-otp-title {
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  margin-bottom: 14px !important;
}
.wc-hero-otp-input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  color: #fff !important;
  font-size: 0.85rem !important;
}
.wc-hero-otp-input::placeholder { color: rgba(255,255,255,0.25) !important; }
.wc-hero-otp-btn {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.78rem !important;
  padding: 11px 16px !important;
}
.wc-hero-otp-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.wc-hero-otp-btn--verify {
  background: rgba(74,222,128,0.1) !important;
  border-color: rgba(74,222,128,0.25) !important;
  color: #4ade80 !important;
}
.wc-hero-otp-btn--verify:hover {
  background: rgba(74,222,128,0.18) !important;
  border-color: rgba(74,222,128,0.45) !important;
}
.wc-hero-otp-sent {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.02em !important;
}
.wc-hero-otp-links {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.25) !important;
}
.wc-hero-otp-links span:hover { color: rgba(255,255,255,0.55) !important; }
.wc-hero-otp-msg { color: rgba(255,255,255,0.3) !important; font-size: 0.7rem !important; }

/* ════════════════════════════════════════
   FULL MOBILE RESPONSIVE — All screens
   ════════════════════════════════════════ */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {

  /* Hero — stack vertically */
  .wc-hero-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }
  .wc-hero-left { width: 100%; }
  .wc-hero-meta { justify-content: center; }
  .wc-hero-trust { text-align: center; }

  /* Trophy — show on mobile, smaller */
  .wc-hero-ball {
    display: flex !important;
    order: 2;
  }
  .wc-ball-svg {
    width: 160px !important;
    height: 160px !important;
  }
  .wc-hero-ball::before {
    width: 260px !important;
    height: 260px !important;
  }

  /* Right side — center aligned */
  .wc-hero-right {
    align-items: center !important;
    width: 100% !important;
    order: 3;
  }
  .wc-hero-otp { width: 100% !important; max-width: 400px; }
  .wc-hero-cd-label { text-align: center; }

  /* Cards — single column */
  .wc-tier-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px;
    margin: 0 auto;
  }
  .wc-tier--25 { transform: none !important; }
  .wc-tier--25:hover { transform: translateY(-6px) !important; }

  /* Leaderboard — single column */
  .lb-panels {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin: 0 auto;
  }

  /* How it works — stack */
  .wc-how-steps { flex-direction: column !important; }
  .wc-how-arrow { display: none !important; }
  .wc-how-step { flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; }

  /* Hero title */
  .wc-hero-title { font-size: 3rem !important; text-align: left; }
  .wc-hero-eyebrow { text-align: left; }
}

/* ── Phone (≤600px) ── */
@media (max-width: 600px) {

  /* Main layout */
  main { margin-left: 60px !important; width: calc(100vw - 60px) !important; }
  .top-navbar { left: 60px !important; }
  body.wc-page main.wc-main { width: calc(100vw - 60px) !important; }

  /* Hero */
  .wc-hero { padding: 28px 0 24px !important; }
  .wc-hero-content { padding: 0 16px !important; gap: 20px !important; }
  .wc-hero-title { font-size: 2.4rem !important; }
  .wc-hero-stat-val { font-size: 1.4rem !important; }
  .wc-hero-gold { font-size: 1.4rem !important; }
  .wc-hero-cd { font-size: 1.8rem !important; }

  /* Trophy smaller on phone */
  .wc-ball-svg { width: 120px !important; height: 120px !important; }
  .wc-hero-ball::before { width: 200px !important; height: 200px !important; }

  /* OTP panel */
  .wc-hero-otp { padding: 16px !important; }
  .wc-hero-otp-input { font-size: 0.82rem !important; padding: 10px 12px !important; }
  .wc-hero-otp-btn { padding: 10px 12px !important; font-size: 0.75rem !important; }

  /* Content padding */
  .wc-content-body { padding: 16px 12px 48px !important; }

  /* Tier cards */
  .wc-tier-fee { font-size: 3rem !important; }
  .wc-tier--25 .wc-tier-fee { font-size: 3.4rem !important; }
  .wc-pool-num { font-size: 2rem !important; }
  .wc-tier--25 .wc-pool-num { font-size: 2.2rem !important; }
  .wc-tier-card { padding: 24px 20px 20px !important; }
  .wc-tier--25 { padding: 28px 22px 22px !important; }

  /* Enter buttons */
  .wc-enter-btn--hero, .wc-enter-btn--side { font-size: 0.85rem !important; }

  /* Leaderboard rows */
  .lb-row2 { padding: 10px 16px !important; }
  .lb-panel-header { padding: 18px 16px 12px !important; }
  .lb-panel-footer { padding: 12px 16px !important; }

  /* FAQ */
  .wc-faq-q { font-size: 0.82rem !important; padding: 12px 14px !important; }
  .wc-faq-a { padding: 0 14px 14px !important; font-size: 0.8rem !important; }

  /* How it works */
  .wc-how-section { padding: 20px 16px !important; }
  .wc-how-text { font-size: 0.78rem !important; }

  /* Footer */
  .site-footer { padding: 16px 16px 20px !important; }
  .site-footer-links { gap: 6px !important; font-size: 0.72rem !important; }
}

/* ── Small phone (≤400px) ── */
@media (max-width: 400px) {
  .wc-hero-title { font-size: 2rem !important; }
  .wc-tier-fee { font-size: 2.6rem !important; }
  .wc-hero-cd { font-size: 1.5rem !important; }
  .wc-ball-svg { width: 100px !important; height: 100px !important; }
}

/* ════════════════════════════════════════
   NAV MOBILE — Sidebar + Top Navbar responsive
   ════════════════════════════════════════ */

/* ── Tablet (≤820px) — sidebar icon-only already handled, fix navbar ── */
@media (max-width: 820px) {
  .top-navbar { left: 60px !important; padding: 0 16px !important; }
  .navbar-tabs { gap: 4px !important; }
  .top-nav-tab { font-size: 0.72rem !important; padding: 6px 10px !important; }
  .navbar-username { font-size: 0.72rem !important; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Phone (≤600px) — hide sidebar entirely, bottom nav instead ── */
@media (max-width: 600px) {
  /* Hide sidebar */
  .sidebar { display: none !important; }

  /* Main takes full width */
  main,
  body.wc-page main.wc-main,
  .top-navbar { left: 0 !important; }
  main { margin-left: 0 !important; width: 100vw !important; }
  body.wc-page main.wc-main { width: 100vw !important; }
  .top-navbar { left: 0 !important; padding: 0 12px !important; }

  /* Navbar tabs — shrink text, fit all 3 */
  .navbar-tabs { gap: 2px !important; }
  .top-nav-tab {
    font-size: 0.65rem !important;
    padding: 5px 8px !important;
    letter-spacing: 0 !important;
  }

  /* Hide wallet username text on very small screens */
  .navbar-username { display: none !important; }
  .navbar-avatar-img { width: 28px !important; height: 28px !important; }

  /* Bottom nav — Solynce logo + links */
  body::after {
    content: '';
    display: block;
    height: 56px; /* space for bottom nav */
  }
}

/* ── Small phone (≤400px) — even smaller tabs ── */
@media (max-width: 400px) {
  .top-nav-tab { font-size: 0.6rem !important; padding: 5px 6px !important; }
  .top-navbar { padding: 0 8px !important; }
}

/* ════════════════════════════════════════
   SORARE-STYLE MOBILE NAV
   ════════════════════════════════════════ */

/* Mobile logo in top navbar — hidden on desktop */
.mob-navbar-logo {
  display: none;
  align-items: center;
  flex-shrink: 0;
}
.mob-navbar-logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Mobile bottom nav — hidden on desktop */
.mob-bottom-nav { display: none; }

/* ── ≤820px: sidebar shrinks, tabs compact ── */
@media (max-width: 820px) {
  .top-navbar { padding: 0 16px !important; }
  .navbar-tabs { gap: 2px !important; }
  .top-nav-tab {
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }
  .navbar-username { max-width: 90px; font-size: 0.72rem !important; }
}

/* ── ≤600px: full Sorare mobile layout ── */
@media (max-width: 600px) {

  /* Hide desktop sidebar entirely */
  .sidebar { display: none !important; }

  /* Full width content */
  main,
  body.wc-page main.wc-main { margin-left: 0 !important; width: 100vw !important; }
  .top-navbar { left: 0 !important; padding: 0 12px !important; }

  /* Show mobile logo in navbar */
  .mob-navbar-logo { display: flex !important; }

  /* Top navbar layout: logo | tabs | wallet */
  .top-navbar-content {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Tabs — centered, compact */
  .navbar-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  .top-nav-tab {
    font-size: 0.62rem !important;
    padding: 5px 7px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  /* Wallet — just avatar */
  .navbar-username { display: none !important; }
  .navbar-avatar-img { width: 30px !important; height: 30px !important; }
  .navbar-profile-btn { padding: 4px !important; gap: 0 !important; }

  /* Show mobile bottom nav */
  .mob-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    background: #000 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    z-index: 1001 !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 4px !important;
  }
  .mob-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 1 !important;
    padding: 6px 4px !important;
    text-decoration: none !important;
    color: rgba(255,255,255,0.3) !important;
    transition: color 0.15s !important;
    font-size: 0.52rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
  .mob-nav-item.active { color: #fff !important; }
  .mob-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }

  /* Push content above bottom nav */
  body { padding-bottom: 58px !important; }
}

/* ── ≤400px: smallest phones ── */
@media (max-width: 400px) {
  .top-nav-tab { font-size: 0.55rem !important; padding: 5px 5px !important; }
  .mob-navbar-logo img { height: 22px !important; }
  .mob-nav-item { font-size: 0.48rem !important; }
  .mob-nav-item svg { width: 18px; height: 18px; }
}

/* ════════════════════════════════════════
   SQUAD BUILDER MOBILE — Full responsive
   ════════════════════════════════════════ */

/* Mobile toggle tabs — hidden on desktop */
.sqb-mobile-tabs { display: none; }

@media (max-width: 700px) {

  /* Show toggle tabs */
  .sqb-mobile-tabs {
    display: flex !important;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: #0b0f18;
  }
  .sqb-mob-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-family: var(--font-primary);
  }
  .sqb-mob-tab.active {
    color: #fff;
    border-bottom-color: #fff;
  }

  /* Header — compact on mobile */
  .sqb-header {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .sqb-back-btn {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }
  .sqb-save-btn {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
  .sqb-header-stats { display: none !important; }
  .sqb-captains-bar { display: none !important; }
  .sqb-tourney-label { font-size: 0.7rem !important; }
  .sqb-budget-text { font-size: 0.78rem !important; }

  /* Layout — stacked, each column fills full screen */
  .sqb-layout {
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Pitch view — full height */
  .sqb-field-col {
    flex: 1 !important;
    overflow-y: auto !important;
    width: 100% !important;
  }

  /* Pitch — smaller slots to fit screen */
  .sqb-pitch-col {
    flex: none !important;
    min-height: unset !important;
  }
  .sqb-slot {
    width: 62px !important;
    min-height: 80px !important;
  }
  .sqb-slot-photo { height: 44px !important; }
  .sqb-slot-name { font-size: 0.55rem !important; }
  .sqb-slot-price { font-size: 0.5rem !important; }
  .sqb-slot-pos-lbl { font-size: 0.55rem !important; }
  .sqb-pitch-row { gap: 4px !important; padding: 4px 6px !important; }
  .sqb-slot--bench { width: 58px !important; min-height: 74px !important; }
  .sqb-bench-strip { padding: 8px 6px !important; }

  /* Players view — full height scrollable list */
  .sqb-players-col {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    border-right: none !important;
    border-top: none !important;
  }
  .sqb-filter-bar { padding: 8px 10px !important; }
  .sqb-filter-row { gap: 6px !important; }

  /* Player list items — bigger touch targets */
  .sqb-pi {
    padding: 10px 12px !important;
    min-height: 52px !important;
  }
  .sqb-pi-name { font-size: 0.85rem !important; }
  .sqb-pi-meta { font-size: 0.7rem !important; }
  .sqb-pi-price { font-size: 0.82rem !important; }
}

/* ── Very small phones ── */
@media (max-width: 400px) {
  .sqb-slot { width: 54px !important; min-height: 72px !important; }
  .sqb-slot-photo { height: 38px !important; }
  .sqb-slot--bench { width: 50px !important; }
  .sqb-mob-tab { font-size: 0.75rem !important; }
}

/* ── Background image ── */
.wc-bg {
  background: url("image (7).jpg") center center / cover no-repeat fixed !important;
}
.wc-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  pointer-events: none;
}

/* ── Background image — offset to content area only ── */
.wc-bg {
  left: 220px !important;
  top: 60px !important;
  background-attachment: local !important;
}
@media (max-width: 1100px) { .wc-bg { left: 180px !important; } }
@media (max-width: 820px)  { .wc-bg { left: 60px !important; } }
@media (max-width: 600px)  { .wc-bg { left: 0 !important; top: 60px !important; } }

/* ── Background — properly centered in content area, higher opacity ── */
.wc-bg {
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}
.wc-bg::after {
  background: rgba(0,0,0,0.45) !important;
}

/* ════════════════════════════════════════
   ATMOSPHERE POLISH
   ════════════════════════════════════════ */

/* ── Semi-transparent glassmorphism navbar ── */
.top-navbar {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── Sidebar matches ── */
.sidebar {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── Cards — solid dark, no glass ── */
.wc-tier-card,
.wc-tier--10,
.wc-tier--25,
.wc-tier--hero {
  background: rgba(8,11,18,0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Leaderboard panels — solid dark too ── */
.lb-panel,
.lb-panel--free,
.lb-panel--featured,
.lb-panel--elite,
.lb-panel:nth-child(1),
.lb-panel:nth-child(2),
.lb-panel:nth-child(3) {
  background: rgba(8,11,18,0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Hero text — subtle text shadow for contrast ── */
.wc-hero-title {
  text-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5) !important;
}
.wc-hero-gold {
  text-shadow: 0 0 30px rgba(255,215,0,0.5), 0 2px 16px rgba(0,0,0,0.9) !important;
}
.wc-hero-stat-val {
  text-shadow: 0 2px 12px rgba(0,0,0,0.8) !important;
}

/* ── Background overlay — slightly darker to reduce stadium glare ── */
.wc-bg::after {
  background: rgba(0,0,0,0.52) !important;
}

/* ── Elite card — stronger gold glow ── */
.wc-tier--25 {
  box-shadow:
    0 0 0 1px rgba(234,179,8,0.2),
    0 24px 80px rgba(0,0,0,0.9),
    0 0 100px rgba(234,179,8,0.15),
    inset 0 1px 0 rgba(234,179,8,0.2) !important;
}
.wc-tier--25:hover {
  box-shadow:
    0 0 0 1px rgba(234,179,8,0.3),
    0 32px 100px rgba(0,0,0,0.9),
    0 0 140px rgba(234,179,8,0.25),
    inset 0 1px 0 rgba(234,179,8,0.25) !important;
}

/* ── Glass back on cards + more transparent navbars ── */
.wc-tier-card,
.wc-tier--10,
.wc-tier--25,
.wc-tier--hero {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.lb-panel,
.lb-panel--free,
.lb-panel--featured,
.lb-panel--elite,
.lb-panel:nth-child(1),
.lb-panel:nth-child(2),
.lb-panel:nth-child(3) {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.top-navbar {
  background: rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.sidebar {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Background on body so sidebar/navbar glass actually works ── */
body.wc-page {
  background: url("image (7).jpg") center center / cover no-repeat fixed !important;
}
.wc-bg {
  left: 0 !important;
  top: 0 !important;
  background: none !important;
}

/* ── Sidebar — truly transparent glass now ── */
.sidebar {
  background: rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Top navbar — same ── */
.top-navbar {
  background: rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Cards fully transparent ── */
.wc-tier-card,
.wc-tier--10,
.wc-tier--25,
.wc-tier--hero,
.lb-panel,
.lb-panel--free,
.lb-panel--featured,
.lb-panel--elite,
.lb-panel:nth-child(1),
.lb-panel:nth-child(2),
.lb-panel:nth-child(3) {
  background: transparent !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* ── OTP strip — between hero and cards ── */
.wc-otp-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 36px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.wc-otp-strip-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  flex-shrink: 0;
}
.wc-otp-strip-inner { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.wc-otp-strip-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wc-otp-strip .wc-hero-otp-input {
  max-width: 240px;
  padding: 8px 12px !important;
  font-size: 0.82rem !important;
}
.wc-otp-strip .wc-hero-otp-btn {
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
}

/* ── Breathing room before cards ── */
.wc-tier-grid { margin-top: 12px !important; }

/* ── Mobile background — prevent trophy domination ── */
@media (max-width: 600px) {
  body.wc-page {
    background-position: 60% top !important;
    background-attachment: scroll !important;
  }
  .wc-otp-strip {
    padding: 12px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .wc-otp-strip .wc-hero-otp-input { max-width: 100% !important; }
}

/* ── Hero trust line — stronger + Polygon gradient ── */
.wc-hero-trust {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.55) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
.wc-hero-trust a {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}
.wc-hero-trust a:hover { color: #fff !important; }

.polygon-word {
  background: linear-gradient(90deg, #8b5cf6, #6366f1, #3b82f6, #8b5cf6);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  animation: polygon-wave 3s linear infinite;
}
@keyframes polygon-wave {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── OTP strip — centered ── */
.wc-otp-strip {
  justify-content: center !important;
  text-align: center !important;
}
.wc-otp-strip-inner { flex: unset !important; align-items: center !important; }
.wc-otp-strip-row { justify-content: center !important; }

/* ── Cards — icy glass back ── */
.wc-tier-card,
.wc-tier--10,
.wc-tier--25,
.wc-tier--hero,
.lb-panel,
.lb-panel--free,
.lb-panel--featured,
.lb-panel--elite,
.lb-panel:nth-child(1),
.lb-panel:nth-child(2),
.lb-panel:nth-child(3) {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ── OTP panel — compact, stacked, top right ── */
.wc-hero-otp {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  width: 240px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.wc-hero-otp-title {
  font-size: 0.58rem !important;
  margin-bottom: 10px !important;
}
.wc-hero-otp-row {
  flex-direction: column !important;
  gap: 6px !important;
}
.wc-hero-otp-input {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.8rem !important;
  padding: 8px 10px !important;
}
.wc-hero-otp-btn {
  width: 100% !important;
  padding: 8px !important;
  font-size: 0.75rem !important;
}

/* ── Logo — blend out grey background ── */
.sidebar-logo-top img,
.mob-navbar-logo img {
  mix-blend-mode: screen !important;
}

/* ════════════════════════════════════════
   DESKTOP FULL-WIDTH FIX — No artificial max-width caps
   ════════════════════════════════════════ */

.wc-content-body {
  max-width: none !important;
  width: 100% !important;
  padding: 32px 40px 80px !important;
  box-sizing: border-box !important;
}

.wc-hero-content {
  max-width: none !important;
  padding: 0 40px !important;
}

.wc-tier-grid {
  width: 100% !important;
  grid-template-columns: 1fr 1fr 1.18fr !important;
}

.lb-panels {
  width: 100% !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Scale hero title with viewport */
.wc-hero-title {
  font-size: clamp(2rem, 4vw, 4rem) !important;
}
.wc-hero-cd {
  font-size: clamp(1.6rem, 3vw, 2.8rem) !important;
}
.wc-tier-fee {
  font-size: clamp(2.4rem, 3.5vw, 4.5rem) !important;
}
.wc-tier--25 .wc-tier-fee {
  font-size: clamp(2.8rem, 4vw, 5rem) !important;
}
.wc-pool-num {
  font-size: clamp(1.6rem, 2.5vw, 2.8rem) !important;
}

@media (max-width: 900px) {
  .wc-content-body { padding: 20px 20px 60px !important; }
  .wc-hero-content { padding: 0 20px !important; }
}
@media (max-width: 600px) {
  .wc-content-body { padding: 16px 12px 48px !important; }
  .wc-hero-content { padding: 0 12px !important; }
}

/* ── Hero full width — remove centering margin ── */
.wc-hero { width: 100% !important; }
.wc-hero-content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Hero layout — left fills, right stays fixed at far edge ── */
.wc-hero-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
  gap: 40px !important;
}
.wc-hero-left {
  flex: 1 !important;
  min-width: 0 !important;
}
.wc-hero-right {
  flex-shrink: 0 !important;
  text-align: right !important;
}

/* ── Hero content — match cards exactly, zero auto margin ── */
.wc-hero-content {
  padding: 0 40px !important;
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wc-hero {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ── Hero full bleed — edge to edge, wider than padded cards ── */
body.wc-page main.wc-main {
  align-items: stretch !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wc-hero {
  width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}
.wc-hero-content {
  width: 100% !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 40px !important;
  max-width: none !important;
  margin: 0 !important;
}
.wc-hero-left  { flex: 1 !important; min-width: 0 !important; }
.wc-hero-right { flex-shrink: 0 !important; }

/* ════════════════════════════════════════
   FLUID TYPOGRAPHY — scales with screen
   ════════════════════════════════════════ */

/* Hero */
.wc-hero-title        { font-size: clamp(2.2rem, 4.5vw, 5.5rem) !important; }
.wc-hero-stat-val,
.wc-hero-gold         { font-size: clamp(1.4rem, 2.2vw, 2.4rem) !important; }
.wc-hero-stat-lbl     { font-size: clamp(0.55rem, 0.8vw, 0.75rem) !important; }
.wc-hero-eyebrow      { font-size: clamp(0.55rem, 0.75vw, 0.75rem) !important; }
.wc-hero-trust        { font-size: clamp(0.7rem, 0.9vw, 0.9rem) !important; }
.wc-hero-cd           { font-size: clamp(1.8rem, 3.2vw, 3.8rem) !important; }
.wc-hero-cd-label     { font-size: clamp(0.52rem, 0.7vw, 0.7rem) !important; }
.wc-hero-cd-units     { font-size: clamp(0.45rem, 0.6vw, 0.6rem) !important; }

/* Tier cards */
.wc-tier-fee                  { font-size: clamp(2.6rem, 4vw, 5rem) !important; }
.wc-tier-fee--free            { font-size: clamp(2.4rem, 3.6vw, 4.5rem) !important; }
.wc-tier--25 .wc-tier-fee     { font-size: clamp(3rem, 4.5vw, 5.5rem) !important; }
.wc-pool-num                  { font-size: clamp(1.6rem, 2.8vw, 3rem) !important; }
.wc-tier--25 .wc-pool-num     { font-size: clamp(1.8rem, 3vw, 3.4rem) !important; }
.wc-pool-label                { font-size: clamp(0.58rem, 0.75vw, 0.72rem) !important; }
.wc-pool-sub                  { font-size: clamp(0.6rem, 0.75vw, 0.72rem) !important; }
.wc-tier-badge                { font-size: clamp(0.6rem, 0.75vw, 0.75rem) !important; }
.wc-prize-rank                { font-size: clamp(0.65rem, 0.8vw, 0.78rem) !important; }
.wc-prize-val                 { font-size: clamp(0.65rem, 0.8vw, 0.78rem) !important; }
.wc-prize-val--highlight      { font-size: clamp(0.7rem, 0.85vw, 0.85rem) !important; }
.wc-enter-btn--hero           { font-size: clamp(0.8rem, 1vw, 1rem) !important; }
.wc-enter-btn--side           { font-size: clamp(0.75rem, 0.95vw, 0.95rem) !important; }

/* Leaderboard */
.lb-panel-title  { font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important; }
.lb-r2-name      { font-size: clamp(0.72rem, 0.9vw, 0.88rem) !important; }
.lb-r2-pts       { font-size: clamp(0.8rem, 1vw, 1rem) !important; }
.lb-meta-pool    { font-size: clamp(0.68rem, 0.85vw, 0.82rem) !important; }

/* Nav */
.top-nav-tab     { font-size: clamp(0.7rem, 0.9vw, 0.88rem) !important; }
.sidebar-nav a   { font-size: clamp(0.72rem, 0.9vw, 0.88rem) !important; }

/* ── Top navbar — tabs far left, wallet far right, full width ── */
.top-navbar-content {
  max-width: none !important;
  width: 100% !important;
  justify-content: space-between !important;
  padding: 0 !important;
}
.navbar-tabs { margin-left: 0 !important; }
.navbar-right { margin-left: auto !important; }
.mob-navbar-logo { display: none !important; }

/* ── Background image opacity ── */
.wc-bg::after { background: rgba(0,0,0,0.68) !important; }

.wc-bg::after { background: rgba(0,0,0,0.82) !important; }