/*
 * Community Pages — Premium Visual Polish (Task #1579879)
 * Scope: community-hub, live-chat, games, leaderboards, founding-members, wins
 * Standard: Apple simplicity + Stripe professionalism + Bloomberg trustworthiness
 * DO NOT remove; this is load-bearing polish for 375px + 1440px
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Community-wide overrides
   ═══════════════════════════════════════════════════════════════ */

:root {
  --em: #00875A;          /* emerald primary */
  --em-dk: #006B4D;       /* emerald dark (hover) */
  --em-lt: #34D399;       /* emerald light accent */
  --em-xlt: #ECFDF5;      /* emerald extra-light bg */
  --em-border: rgba(0,135,90,0.18);
  --em-glow: rgba(0,135,90,0.12);
  --ink: #0A0A0A;
  --ink-body: #1F2A37;
  --ink-muted: #6B7280;
  --ink-faint: #94A3B8;
  --surface: #FFFFFF;
  --surface-raised: #F8FAFC;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-em: 0 6px 24px rgba(0,135,90,0.18), 0 2px 8px rgba(0,135,90,0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}


/* ═══════════════════════════════════════════════════════════════
   COMMUNITY HUB — Enhanced hero, cards, section structure
   ═══════════════════════════════════════════════════════════════ */

/* Hero — richer depth */
.ch-hero {
  background: linear-gradient(180deg, #fafffe 0%, #f0fdf7 100%) !important;
  border-bottom: 1px solid var(--em-border) !important;
}

.ch-hero::before {
  background: radial-gradient(ellipse 80% 60% at 50% -5%,
    rgba(0,135,90,0.07) 0%, transparent 65%) !important;
}

/* Hero title — deeper ink */
.ch-hero-title {
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero tag — crisper */
.ch-hero-tag {
  background: var(--em-xlt) !important;
  border: 1px solid var(--em-border) !important;
  color: var(--em-dk) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  padding: 0.28rem 0.9rem !important;
  box-shadow: 0 1px 4px var(--em-glow);
}

/* User bar — card elevation */
.ch-user-bar {
  background: var(--surface) !important;
  border: 1px solid var(--em-border) !important;
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--em-glow) !important;
  border-radius: var(--radius-lg) !important;
}

/* XP fill — smoother gradient */
.ch-xp-fill {
  background: linear-gradient(90deg, var(--em), var(--em-lt)) !important;
}

/* Stat cards — elevated + hover lift */
.ch-stat-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
  background: var(--surface) !important;
}
.ch-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--em-border) !important;
}
.ch-stat-val {
  font-size: 1.7rem !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}
.ch-stat-icon {
  font-size: 1.6rem !important;
  margin-bottom: 0.4rem !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* Chat container — premium depth */
.ch-chat-container {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
}

/* Chat tab — sharper active state */
.ch-chat-tab.active {
  color: var(--em) !important;
  border-bottom-color: var(--em) !important;
  font-weight: 800 !important;
}

/* Chat input — polished field */
.ch-chat-input input {
  border-radius: var(--radius-sm) !important;
  font-size: 0.88rem !important;
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
}
.ch-chat-input input:focus {
  background: var(--surface) !important;
  border-color: var(--em) !important;
  box-shadow: 0 0 0 3px var(--em-glow) !important;
}
.ch-chat-input button {
  border-radius: var(--radius-sm) !important;
  background: linear-gradient(135deg, var(--em) 0%, var(--em-dk) 100%) !important;
  box-shadow: 0 2px 8px var(--em-glow) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--transition) !important;
}
.ch-chat-input button:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-em) !important;
}

/* Team cards — richer */
.ch-team-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
}
.ch-team-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--em-border) !important;
  transform: translateY(-2px) !important;
}

/* Champion & tournament banners — premium */
.ch-champion {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 2px 12px rgba(245,158,11,0.12) !important;
}
.ch-tournament {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 2px 12px var(--em-glow) !important;
}

/* Leaderboard rows — crisp hover */
.ch-lb-list {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.ch-lb-row {
  transition: background var(--transition) !important;
}
.ch-lb-row:hover {
  background: var(--em-xlt) !important;
}
.ch-lb-score {
  background: var(--em-xlt);
  color: var(--em-dk) !important;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  border: 1px solid var(--em-border);
}

/* Hero buttons */
.ch-btn-primary {
  background: linear-gradient(135deg, var(--em) 0%, var(--em-dk) 100%) !important;
  box-shadow: 0 2px 10px var(--em-glow) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}
.ch-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-em) !important;
}
.ch-btn-outline {
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
}

/* Section headers — clean separator */
.ch-section-title {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}


/* ═══════════════════════════════════════════════════════════════
   COMMUNITY LEADERBOARD — Premium table polish
   ═══════════════════════════════════════════════════════════════ */

.clb-page {
  background: #FAFCFB !important;
}

.clb-hero {
  background: linear-gradient(180deg, #fafffe 0%, #f0fdf7 100%) !important;
  border-bottom: 1px solid var(--em-border) !important;
}

/* Podium-style top 3 rows */
.clb-row.top-1 {
  background: linear-gradient(90deg, #fffbeb 0%, #fffdf5 60%, transparent 100%) !important;
  border-left: 3px solid #f59e0b;
}
.clb-row.top-2 {
  background: linear-gradient(90deg, #f8fafc 0%, #fbfcfd 60%, transparent 100%) !important;
  border-left: 3px solid #94a3b8;
}
.clb-row.top-3 {
  background: linear-gradient(90deg, #fff7ed 0%, #fffaf5 60%, transparent 100%) !important;
  border-left: 3px solid #cd7c2f;
}

.clb-row:hover { background: var(--em-xlt) !important; }
.clb-row.is-me { background: #EFF6FF !important; border-left: 3px solid #2563eb !important; }

.clb-table-wrap {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
}

/* Rank badges — bigger + cleaner */
.clb-rank.r1 { font-size: 1.4rem !important; filter: drop-shadow(0 1px 2px rgba(245,158,11,0.3)); }
.clb-rank.r2 { font-size: 1.3rem !important; }
.clb-rank.r3 { font-size: 1.2rem !important; }

/* Period tabs — pill style */
.clb-period-tabs {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
.clb-period-tab.active {
  background: linear-gradient(135deg, var(--em) 0%, var(--em-dk) 100%) !important;
  box-shadow: 0 1px 6px var(--em-glow) !important;
}

/* Category tabs */
.clb-cat-tab.active {
  background: var(--em) !important;
  box-shadow: 0 2px 8px var(--em-glow) !important;
}
.clb-cat-tab:not(.active):hover {
  border-color: var(--em-border) !important;
  color: var(--em-dk) !important;
}

/* User score chip */
.clb-score {
  background: var(--em-xlt) !important;
  color: var(--em-dk) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  border: 1px solid var(--em-border) !important;
  display: inline-block;
}

/* Badge pills */
.clb-badge {
  border-radius: 20px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.5rem !important;
}


/* ═══════════════════════════════════════════════════════════════
   XP LEADERBOARD — Sticky bar + table polish
   ═══════════════════════════════════════════════════════════════ */

.xplb-page { background: #FAFCFB !important; }

.xplb-hero {
  background: linear-gradient(180deg, #fafffe 0%, #f0fdf7 100%) !important;
  border-bottom: 1px solid var(--em-border) !important;
}

/* Sticky "Your Rank" bar — deeper shadow */
.xplb-you-bar {
  background: linear-gradient(135deg, var(--em) 0%, var(--em-dk) 100%) !important;
  box-shadow: 0 4px 20px rgba(0,135,90,0.25), 0 1px 4px rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* XP table */
.xplb-table-wrap {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
}

/* Top 3 row treatments */
.xplb-row-1 {
  background: linear-gradient(90deg, #fffbeb 0%, #fffdf5 60%, transparent 100%) !important;
  border-left: 3px solid #f59e0b !important;
}
.xplb-row-2 {
  background: linear-gradient(90deg, #f8fafc 0%, #fbfcfd 60%, transparent 100%) !important;
  border-left: 3px solid #94a3b8 !important;
}
.xplb-row-3 {
  background: linear-gradient(90deg, #fff7ed 0%, #fffaf5 60%, transparent 100%) !important;
  border-left: 3px solid #cd7c2f !important;
}


/* ═══════════════════════════════════════════════════════════════
   STREAK LEADERBOARD — Consistent polish
   ═══════════════════════════════════════════════════════════════ */

.slb-page { background: #FAFCFB !important; }

.slb-hero {
  background: linear-gradient(180deg, #fafffe 0%, #f0fdf7 100%) !important;
  border-bottom: 1px solid var(--em-border) !important;
}

/* Streak number — high-impact display */
.slb-streak-num {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  color: var(--em) !important;
  letter-spacing: -0.03em !important;
  -webkit-font-smoothing: antialiased;
}

/* Streak user card */
.slb-user-card {
  border-radius: var(--radius-lg) !important;
  border: 1.5px solid var(--em-border) !important;
  box-shadow: 0 2px 12px var(--em-glow) !important;
  background: linear-gradient(135deg, #f0fdf7 0%, #ecfdf5 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   GAMES LOBBY — Elevated game cards
   ═══════════════════════════════════════════════════════════════ */

.games-page { background: #FAFCFB !important; }

.games-hero {
  background: linear-gradient(180deg, #fafffe 0%, #f0fdf7 100%) !important;
}

.games-hero::before {
  background: radial-gradient(ellipse 80% 50% at 50% -5%,
    rgba(0,135,90,0.08) 0%, transparent 65%) !important;
}

/* Game cards — premium elevation */
.game-card {
  border-radius: var(--radius-xl) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
  overflow: hidden !important;
}
.game-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--em-border) !important;
}

/* Game emoji — larger + animated on hover */
.game-card-emoji {
  font-size: 2.4rem !important;
  transition: transform 0.25s ease !important;
  display: block !important;
}
.game-card:hover .game-card-emoji {
  transform: scale(1.15) rotate(-3deg) !important;
}

/* Game card name */
.game-card-name {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
}

/* Game card description */
.game-card-desc {
  font-size: 0.87rem !important;
  line-height: 1.6 !important;
  color: var(--ink-body) !important;
}

/* Primary game button — emerald gradient */
.btn-find-match {
  background: linear-gradient(135deg, var(--em) 0%, var(--em-dk) 100%) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 8px var(--em-glow) !important;
  transition: all var(--transition) !important;
}
.btn-find-match:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-em) !important;
}

/* Secondary "How to play" button */
.btn-game-how,
.btn-secondary {
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--border) !important;
  transition: all var(--transition) !important;
}
.btn-game-how:hover,
.btn-secondary:hover {
  border-color: var(--em-border) !important;
  color: var(--em-dk) !important;
  background: var(--em-xlt) !important;
}

/* Tag pills — slightly bigger + consistent */
.game-tag,
.tag-blue,
.tag-green,
.tag-purple,
.tag-orange {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.03em !important;
}

/* Pro lock overlay — polished */
.game-card .pro-lock-overlay {
  border-radius: var(--radius-xl) !important;
}

/* Games hero stat numbers */
.games-hero-stat strong {
  color: var(--em) !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
  -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════════════════════════
   SLOTS MACHINE — Premium depth + polish
   ═══════════════════════════════════════════════════════════════ */

/* Prize table — consistent with design system */
.prize-row td {
  padding: 0.7rem 1rem !important;
}

/* Spin button — more tactile */
#spinBtn, .spin-btn {
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
#spinBtn:hover:not(:disabled),
.spin-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 0 #7f1d1d, 0 0 0 3px rgba(153,27,27,0.15) !important;
}
#spinBtn:active:not(:disabled),
.spin-btn:active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #7f1d1d !important;
}

/* Leaderboard rows in slots */
.gsp-lb-row {
  transition: background var(--transition) !important;
  border-radius: var(--radius-sm) !important;
}
.gsp-lb-row:hover {
  background: var(--em-xlt) !important;
}


/* ═══════════════════════════════════════════════════════════════
   LIVE CHAT PAGE — Premium layout polish
   ═══════════════════════════════════════════════════════════════ */

/* Chat page background */
.lc-page,
.cl-page {
  background: #FAFCFB !important;
}

/* Chat hero */
.lc-hero,
.cl-hero {
  background: linear-gradient(180deg, #fafffe 0%, #f0fdf7 100%) !important;
  border-bottom: 1px solid var(--em-border) !important;
}

/* Message bubbles — cleaner */
.lc-msg,
.cl-msg {
  border-radius: var(--radius-md) !important;
}

/* Chat message hover */
.lc-msg-wrap:hover,
.cl-msg-wrap:hover {
  background: var(--surface-raised) !important;
}

/* Pro gate card in chat */
.lc-pro-gate,
.cl-pro-gate {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--em-border) !important;
  box-shadow: 0 2px 12px var(--em-glow) !important;
  background: linear-gradient(135deg, #f0fdf7 0%, #ecfdf5 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   FOUNDING MEMBERS — Polish on the dark premium page
   ═══════════════════════════════════════════════════════════════ */

/* Founding member perks grid cards */
.fm-perk-card {
  border: 1px solid rgba(0,135,90,0.18) !important;
  border-radius: var(--radius-lg) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.fm-perk-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(0,135,90,0.14) !important;
}

/* CTA button on founding members */
.fm-cta-btn {
  border-radius: var(--radius-md) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--transition) !important;
}
.fm-cta-btn:hover {
  transform: translateY(-2px) !important;
}

/* Badge display */
.fm-badge-demo {
  filter: drop-shadow(0 4px 16px rgba(0,135,90,0.25)) !important;
  transition: transform 0.3s ease !important;
}
.fm-badge-demo:hover {
  transform: scale(1.05) rotate(2deg) !important;
}

/* Milestone timeline dots */
.fm-milestone {
  transition: transform var(--transition) !important;
}
.fm-milestone:hover {
  transform: scale(1.03) !important;
}


/* ═══════════════════════════════════════════════════════════════
   WINS / "I GOT PAID" WALL — Premium testimonial cards
   ═══════════════════════════════════════════════════════════════ */

/* Win cards — premium testimonial treatment */
.igp-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1.5px solid var(--border) !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
  background: var(--surface) !important;
  overflow: hidden !important;
}
.igp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--em-border) !important;
}

/* Win amount — high-impact */
.igp-card-amount {
  letter-spacing: -0.02em !important;
  -webkit-font-smoothing: antialiased;
}

/* Hero counters — bigger + bolder */
.igp-counter-num {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.02em !important;
}

/* Submit win button */
.igp-btn-primary {
  background: linear-gradient(135deg, var(--em) 0%, var(--em-dk) 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 12px var(--em-glow) !important;
  font-weight: 800 !important;
  transition: all var(--transition) !important;
}
.igp-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-em) !important;
}

/* Filter toolbar */
.igp-toolbar {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Modal — elevated */
.igp-modal-content {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SCRATCH CARD & GAME LANDING PAGES — Marketing page polish
   ═══════════════════════════════════════════════════════════════ */

/* Step boxes — elevated */
.step-box,
.gsc-step {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.step-box:hover,
.gsc-step:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Feature/prize cards */
.feature-card,
.prize-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.feature-card:hover,
.prize-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}


/* ═══════════════════════════════════════════════════════════════
   COMMUNITY PROFILE PAGE — User card polish
   ═══════════════════════════════════════════════════════════════ */

.cp-profile-card,
.profile-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
}

.cp-badge-chip,
.badge-chip {
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 0.2rem 0.6rem !important;
  transition: transform 0.15s ease !important;
}
.cp-badge-chip:hover,
.badge-chip:hover {
  transform: scale(1.05) !important;
}

/* Level progress bar */
.cp-xp-bar .cp-xp-fill,
.profile-xp-bar .profile-xp-fill {
  background: linear-gradient(90deg, var(--em) 0%, var(--em-lt) 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TEAMS — Card grid polish
   ═══════════════════════════════════════════════════════════════ */

.ct-team-card,
.team-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1.5px solid var(--border) !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition) !important;
}
.ct-team-card:hover,
.team-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--em-border) !important;
}

/* Team XP display */
.ct-team-xp,
.team-xp {
  background: var(--em-xlt) !important;
  color: var(--em-dk) !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.6rem !important;
  font-size: 0.78rem !important;
}


/* ═══════════════════════════════════════════════════════════════
   COMMUNITY-WIDE BUTTON OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Any green CTA in community context */
.community-cta-btn,
[href="/games"].cta,
[href="/tournament"].cta {
  background: linear-gradient(135deg, var(--em) 0%, var(--em-dk) 100%) !important;
  box-shadow: 0 2px 10px var(--em-glow) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 800 !important;
  transition: all var(--transition) !important;
}

/* Tournament register button style */
a[href="/tournament"][style*="background:#00875A"],
a[href="/tournament"][style*="background: #00875A"] {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 10px var(--em-glow) !important;
  font-weight: 800 !important;
  transition: all var(--transition) !important;
}


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES — Intentional, not broken
   ═══════════════════════════════════════════════════════════════ */

.community-empty-state,
.games-empty,
.lb-empty {
  text-align: center !important;
  padding: 3rem 1.5rem !important;
  color: var(--ink-muted) !important;
  font-size: 0.95rem !important;
}

.community-empty-state::before {
  content: '🌱';
  display: block;
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  filter: grayscale(0.2);
}

/* No leaderboard data yet */
.clb-row[style*="justify-content:center"],
.ch-lb-row[style*="justify-content:center"] {
  background: var(--surface-raised) !important;
  color: var(--ink-muted) !important;
  font-size: 0.9rem !important;
  padding: 2rem !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE (375px) — Override & tighten
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Hero padding tighter */
  .ch-hero, .clb-hero, .xplb-hero, .slb-hero, .games-hero {
    padding: 2.5rem 1rem 2rem !important;
  }

  /* Cards full-width */
  .ch-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Game cards stacked */
  .game-cards {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Teams grid stacked */
  .ch-teams-grid {
    grid-template-columns: 1fr !important;
  }

  /* Leaderboard rank col — no shrink */
  .clb-rank, .xplb-rank {
    min-width: 28px !important;
  }

  /* Win cards — full width */
  .igp-grid {
    grid-template-columns: 1fr !important;
  }

  /* Chat messages height reduced */
  .ch-chat-messages {
    height: 280px !important;
  }

  /* Founding members headline */
  .fm-headline {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  /* Period tabs scroll on mobile */
  .clb-period-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Category tabs scroll on mobile */
  .clb-category-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  /* Stat cards — smaller on 375px */
  .ch-stat-card {
    padding: 1rem 0.75rem !important;
  }
  .ch-stat-val { font-size: 1.4rem !important; }
  .ch-stat-icon { font-size: 1.3rem !important; }

  /* CTA buttons stacked */
  .ch-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .ch-hero-btn {
    justify-content: center !important;
  }

  /* Games hero stats wrap cleanly */
  .games-hero-stats {
    gap: 1rem !important;
  }
  .games-hero-stat strong {
    font-size: 1.2rem !important;
  }

  /* Slots machine padding */
  .gsp-machine-body {
    padding: 1rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP (1440px) — Full width centering + max-width
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .ch-stats, .ch-section {
    max-width: 1000px !important;
  }

  .clb-tabs-wrap {
    max-width: 960px !important;
  }

  .xplb-tabs-wrap {
    max-width: 960px !important;
  }

  .games-section {
    max-width: 1200px !important;
  }

  /* 3-col games grid at 1440px */
  .game-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Founding members hero */
  .fm-hero {
    padding: 100px 40px 80px !important;
  }

  /* Win cards — 3 column at large screens */
  .igp-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — Respect user preference
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ch-stat-card,
  .ch-team-card,
  .game-card,
  .igp-card,
  .ct-team-card,
  .clb-row,
  .xplb-row,
  .fm-perk-card,
  .ch-hero-btn,
  .btn-find-match,
  .igp-btn-primary,
  .ch-chat-input button {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  .game-card-emoji {
    transition: none !important;
  }

  .fm-eyebrow-dot {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FOCUS VISIBLE — Accessible keyboard navigation
   ═══════════════════════════════════════════════════════════════ */

.ch-hero-btn:focus-visible,
.btn-find-match:focus-visible,
.igp-btn-primary:focus-visible,
.clb-period-tab:focus-visible,
.clb-cat-tab:focus-visible,
.ch-chat-tab:focus-visible {
  outline: 2px solid var(--em) !important;
  outline-offset: 2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL OVERFLOW PREVENTION — Zero scroll leak
   ═══════════════════════════════════════════════════════════════ */

.ch-page,
.clb-page,
.xplb-page,
.slb-page,
.games-page {
  overflow-x: hidden !important;
}

.ch-teams-grid,
.game-cards,
.clb-category-tabs {
  max-width: 100% !important;
}

/* Prevent text from blowing out containers on small screens */
.ch-hero-title,
.clb-hero-title,
.xplb-hero-title,
.games-hero h1 {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}


/* ═══════════════════════════════════════════════════════════════
   RETRY ENHANCEMENTS — Task #1582832
   Premium dark-immersive hero treatment for all community pages
   ═══════════════════════════════════════════════════════════════ */

/* ── COMMUNITY HUB: Dark immersive hero ─────────────────────── */
.ch-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #112518 50%, #0b1a11 100%) \!important;
  border-bottom: 1px solid #1c3628 \!important;
}
.ch-hero::before {
  background: radial-gradient(ellipse 70% 50% at 50% 0%,
    rgba(52,211,153,0.12) 0%, transparent 68%) \!important;
}
.ch-hero-tag {
  background: rgba(52,211,153,0.12) \!important;
  border: 1px solid rgba(52,211,153,0.3) \!important;
  color: #34D399 \!important;
}
.ch-hero-title {
  color: #F5F5F0 \!important;
  -webkit-text-fill-color: #F5F5F0 \!important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35) \!important;
}
.ch-hero-sub { color: rgba(245,245,240,0.72) \!important; }
.ch-btn-primary {
  background: linear-gradient(135deg, #00875A 0%, #006B4D 100%) \!important;
  box-shadow: 0 4px 20px rgba(0,135,90,0.35), 0 1px 4px rgba(0,0,0,0.15) \!important;
}
.ch-btn-outline {
  background: rgba(255,255,255,0.07) \!important;
  color: #34D399 \!important;
  border: 1px solid rgba(52,211,153,0.3) \!important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ch-btn-outline:hover {
  background: rgba(52,211,153,0.12) \!important;
  border-color: rgba(52,211,153,0.5) \!important;
}
.ch-user-bar {
  background: rgba(255,255,255,0.07) \!important;
  border: 1px solid rgba(255,255,255,0.11) \!important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ch-user-name { color: #F5F5F0 \!important; }
.ch-user-level { color: #34D399 \!important; }
.ch-user-bar a { color: #34D399 \!important; }
.ch-xp-bar { background: rgba(255,255,255,0.1) \!important; }
.ch-page { background: #fafaf8 \!important; }

/* ── GAMES LOBBY: Dark hero ─────────────────────────────────── */
.games-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #112518 50%, #0b1a11 100%) \!important;
  border-bottom: 1px solid #1c3628 \!important;
  padding: 4rem 1rem 3.5rem \!important;
}
.games-hero::before {
  background: radial-gradient(ellipse 80% 50% at 50% -5%,
    rgba(52,211,153,0.10) 0%, transparent 65%) \!important;
}
.games-hero-badge {
  background: rgba(52,211,153,0.12) \!important;
  border: 1px solid rgba(52,211,153,0.28) \!important;
  color: #34D399 \!important;
}
.games-hero h1 { color: #F5F5F0 \!important; }
.games-hero h1 span { color: #34D399 \!important; }
.games-hero p { color: rgba(245,245,240,0.72) \!important; }
.games-hero-stat strong { color: #34D399 \!important; font-size: 1.5rem \!important; }
.games-hero-stat span { color: rgba(245,245,240,0.55) \!important; }
.games-page { background: #fafaf8 \!important; }

/* ── INDIVIDUAL GAME HEROES: Dark immersive ─────────────────── */
.gsp-hero, .gsc-hero, .gst-hero, .gpb-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #112518 50%, #0b1a11 100%) \!important;
  border-bottom: 1px solid #1c3628 \!important;
  padding: 3.5rem 1rem 3rem \!important;
}
.gsp-hero::before, .gsc-hero::before, .gst-hero::before, .gpb-hero::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(52,211,153,0.10) 0%, transparent 65%) \!important;
}
.gsp-hero h1, .gsc-hero h1, .gst-hero h1, .gpb-hero h1 { color: #F5F5F0 \!important; }
.gsp-hero h1 span, .gsc-hero h1 span, .gst-hero h1 span, .gpb-hero h1 span { color: #34D399 \!important; }
.gsp-hero-desc, .gsc-hero-desc, .gst-hero-desc, .gpb-hero-desc { color: rgba(245,245,240,0.75) \!important; }
.gsp-badge, .gsc-badge, .gst-badge, .gpb-badge {
  background: rgba(52,211,153,0.12) \!important;
  border: 1px solid rgba(52,211,153,0.28) \!important;
  color: #34D399 \!important;
}
.gsp-page, .gsc-page, .gst-page, .gpb-page {
  background: #fafaf8 \!important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif \!important;
}

/* ── LEADERBOARDS: Dark hero top section ────────────────────── */
.clb-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #112518 40%, #f0fdf7 100%) \!important;
  border-bottom: 1px solid #d1fae5 \!important;
}
.clb-hero h2, .clb-hero-title { color: #F5F5F0 \!important; }
.clb-hero p, .clb-hero-sub { color: rgba(245,245,240,0.75) \!important; }
.clb-hero-badge {
  background: rgba(52,211,153,0.12) \!important;
  border: 1px solid rgba(52,211,153,0.3) \!important;
  color: #34D399 \!important;
}
.clb-hero-meta {
  background: rgba(255,255,255,0.1) \!important;
  border: 1px solid rgba(255,255,255,0.15) \!important;
  color: rgba(245,245,240,0.8) \!important;
}

.xplb-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #112518 40%, #f0fdf7 100%) \!important;
  border-bottom: 1px solid #d1fae5 \!important;
}

/* Leaderboard page .lb-hero (leaderboard.ejs) */
.lb-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #112518 40%, #f8fffe 100%) \!important;
  border-bottom: 1px solid #d1fae5 \!important;
}
.lb-hero h1 { color: #F5F5F0 \!important; }
.lb-hero .lb-hero-sub { color: rgba(245,245,240,0.75) \!important; }
.lb-hero .lb-hero-badge {
  background: rgba(52,211,153,0.12) \!important;
  border: 1px solid rgba(52,211,153,0.28) \!important;
  color: #34D399 \!important;
}
.lb-hero .lb-hero-meta {
  background: rgba(255,255,255,0.1) \!important;
  border: 1px solid rgba(255,255,255,0.15) \!important;
  color: rgba(245,245,240,0.8) \!important;
}
.lb-hero .lb-hero-accent { color: #34D399 \!important; }

/* ── WINS / I GOT PAID: Dark editorial hero ─────────────────── */
.igp-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #0b1a11 100%) \!important;
}
.igp-hero h1 { color: #F5F5F0 \!important; }
.igp-hero h1 em { color: #34D399 \!important; }
.igp-hero-sub { color: rgba(245,245,240,0.72) \!important; }
.igp-eyebrow {
  background: rgba(52,211,153,0.12) \!important;
  border: 1px solid rgba(52,211,153,0.28) \!important;
  color: #34D399 \!important;
}
.igp-counter-num, .igp-counter-val { color: #34D399 \!important; letter-spacing: -0.03em \!important; }
.igp-counter-label { color: rgba(245,245,240,0.65) \!important; }

/* Win card — green top accent stripe */
.igp-card {
  position: relative;
  overflow: hidden \!important;
  border-radius: 16px \!important;
  border: 1px solid #E5E7EB \!important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04) \!important;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1) \!important;
}
.igp-card:hover {
  transform: translateY(-4px) \!important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06) \!important;
  border-color: #d1fae5 \!important;
}
.igp-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #00875A 0%, #34D399 100%);
  width: 100%;
}

/* ── COMMUNITY LIVE CHAT: Polished hero ─────────────────────── */
.sr-community__hero {
  background: linear-gradient(180deg, #f0fdf9 0%, #fafaf8 100%) \!important;
  border-bottom: 1px solid #d1fae5 \!important;
}
.sr-community__hero h1 {
  font-family: 'Fraunces', Georgia, serif \!important;
  font-weight: 900 \!important;
  letter-spacing: -0.03em \!important;
  color: #0A0A0A \!important;
}
.sr-community__online {
  background: #fff \!important;
  border: 1px solid #d1fae5 \!important;
  color: #047857 \!important;
  font-weight: 600 \!important;
}
.sr-chat-compose__send {
  background: linear-gradient(135deg, #00875A 0%, #006B4D 100%) \!important;
  box-shadow: 0 2px 10px rgba(0,135,90,0.25) \!important;
}
.sr-chat-compose__send:hover {
  transform: translateY(-1px) \!important;
  box-shadow: 0 4px 16px rgba(0,135,90,0.32) \!important;
}
.sr-chat-panel {
  border-radius: 16px \!important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05) \!important;
}
.sr-sidebar-card {
  border-radius: 14px \!important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) \!important;
}

/* ── GAME CARDS: Elevated + emoji animation ─────────────────── */
.game-card {
  border-radius: 20px \!important;
  border: 1.5px solid #E5E7EB \!important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) \!important;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1) \!important;
}
.game-card:hover {
  transform: translateY(-5px) \!important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08) \!important;
  border-color: rgba(0,135,90,0.25) \!important;
}
.game-card:hover .game-card-emoji {
  transform: scale(1.18) rotate(-4deg) \!important;
}

/* ── FOUNDING MEMBERS: Richer dark ──────────────────────────── */
.fm-hero {
  background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(0,135,90,0.18) 0%, transparent 70%),
              linear-gradient(180deg, #061009 0%, #0A1A12 60%, #081510 100%) \!important;
}
.fm-perk-card {
  background: rgba(255,255,255,0.04) \!important;
  border: 1px solid rgba(52,211,153,0.12) \!important;
  border-radius: 14px \!important;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), background 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1) \!important;
}
.fm-perk-card:hover {
  background: rgba(255,255,255,0.08) \!important;
  border-color: rgba(52,211,153,0.28) \!important;
  transform: translateY(-3px) \!important;
}
.fm-cta-btn {
  background: linear-gradient(135deg, #00875A 0%, #34D399 100%) \!important;
  box-shadow: 0 4px 24px rgba(0,135,90,0.4) \!important;
  border: none \!important;
  font-weight: 800 \!important;
}
.fm-cta-btn:hover {
  transform: translateY(-2px) \!important;
  box-shadow: 0 8px 32px rgba(0,135,90,0.5) \!important;
}

/* ── MOBILE 375px REFINEMENTS ───────────────────────────────── */
@media (max-width: 480px) {
  .ch-hero, .games-hero, .igp-hero, .clb-hero, .xplb-hero, .lb-hero {
    padding-left: 1rem \!important;
    padding-right: 1rem \!important;
  }
  .ch-hero-title { font-size: clamp(1.75rem, 7.5vw, 2.5rem) \!important; }
  .games-hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem) \!important; }
  .igp-hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.8rem) \!important; }
  .ch-hero-btn {
    min-height: 48px \!important;
    padding: 0.85rem 1.5rem \!important;
    justify-content: center \!important;
  }
  .ch-stats-grid { grid-template-columns: repeat(2, 1fr) \!important; gap: 0.75rem \!important; }
  .ch-teams-grid { grid-template-columns: 1fr \!important; }
  .game-cards { grid-template-columns: 1fr \!important; }
  .igp-grid { grid-template-columns: 1fr \!important; }
  .fm-headline { font-size: clamp(2.2rem, 9vw, 3.5rem) \!important; }
  .ch-chat-messages { height: 280px \!important; }
  .sr-chat-panel { min-height: 280px \!important; max-height: 60vh \!important; }
  .ch-hero-actions { flex-direction: column \!important; align-items: stretch \!important; width: 100% \!important; }
  .gsp-hero, .gsc-hero, .gst-hero, .gpb-hero {
    padding: 2.75rem 1rem 2.25rem \!important;
  }
  .gsp-hero h1, .gsc-hero h1, .gst-hero h1, .gpb-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) \!important;
  }
}

/* ── DESKTOP 1440px ─────────────────────────────────────────── */
@media (min-width: 1280px) {
  .ch-stats, .ch-section { max-width: 1100px \!important; }
  .games-section { max-width: 1200px \!important; }
  .game-cards { grid-template-columns: repeat(3, 1fr) \!important; }
  .igp-grid { grid-template-columns: repeat(3, 1fr) \!important; }
  .clb-tabs-wrap, .xplb-tabs-wrap { max-width: 1000px \!important; }
  .fm-hero { padding: 100px 40px 80px \!important; }
  .sr-community__layout { max-width: 1200px \!important; }
}

/* ── CLAIM RACE GAME: Dark hero (gcr- prefix) ───────────────── */
.gcr-hero {
  background: linear-gradient(180deg, #0e1d16 0%, #112518 50%, #0b1a11 100%) \!important;
  border-bottom: 1px solid #1c3628 \!important;
  padding: 3.5rem 1rem 3rem \!important;
}
.gcr-hero::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(52,211,153,0.10) 0%, transparent 65%) \!important;
}
.gcr-hero h1 { color: #F5F5F0 \!important; }
.gcr-hero h1 span { color: #34D399 \!important; }
.gcr-hero-desc { color: rgba(245,245,240,0.75) \!important; }
.gcr-badge {
  background: rgba(52,211,153,0.12) \!important;
  border: 1px solid rgba(52,211,153,0.28) \!important;
  color: #34D399 \!important;
}
.gcr-page {
  background: #fafaf8 \!important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif \!important;
}