:root {
    --bg-primary: #0a1428; --bg-gradient: linear-gradient(135deg, #0a1428 0%, #1a2338 50%, #2a3448 100%);
    --glass-primary: rgba(26, 36, 56, 0.95); --glass-secondary: rgba(42, 52, 72, 0.85);
    --text-primary: #f8fafc; --text-secondary: #cbd5e1; --accent-primary: #3b82f6; --accent-glow: rgba(59, 130, 246, 0.4);
    --border-glass: rgba(255, 255, 255, 0.08); --shadow-2xl: 0 35px 80px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3); --gradient-accent: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

[data-theme="light"] {
    --bg-primary: #f1f5f9; --bg-gradient: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
    --glass-primary: rgba(255, 255, 255, 0.98); --glass-secondary: rgba(248, 250, 252, 0.92);
    --text-primary: #0f172a; --text-secondary: #475569; --border-glass: rgba(0, 0, 0, 0.06);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { 
    font-family: 'Inter', -apple-system, system-ui, sans-serif; 
    background:var(--bg-gradient); color:var(--text-primary); 
    line-height:1.6; overflow-x:hidden; overscroll-behavior-y:none;
}

.glass { 
    background:var(--glass-primary); backdrop-filter:blur(32px) saturate(180%); 
    border:1px solid var(--border-glass); border-radius:28px; 
    box-shadow:var(--shadow-2xl); position:relative; overflow:hidden;
}

.glass::before { 
    content:''; position:absolute; inset:0; 
    background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.04), transparent 70%); 
    pointer-events:none; animation:shimmer 3s infinite linear;
}

@keyframes shimmer { 0%{ transform:translateX(-100%) skewX(-15deg); } 100%{ transform:translateX(100%) skewX(-15deg); } }

.header { 
    position:fixed; top:0; left:0; right:0; z-index:1000; 
    background:var(--glass-primary); backdrop-filter:blur(40px); 
    border-bottom:1px solid var(--border-glass); padding:20px 0; 
}

.header-inner { 
    max-width:1440px; margin:0 auto; padding:0 32px; display:flex; 
    align-items:center; justify-content:space-between; min-height:80px;
}

.logo { 
    font-size:32px; font-weight:900; 
    background:var(--gradient-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    cursor:pointer; user-select:none; position:relative;
}

.logo::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:var(--gradient-accent); transform:scaleX(0); transition:transform .4s ease; }

.logo:hover::after { transform:scaleX(1); }

.location-time { 
    font-size:15px; font-weight:700; color:var(--accent-primary); 
    background:var(--glass-secondary); padding:12px 24px; border-radius:25px; 
    box-shadow:var(--shadow-glow); white-space:nowrap; backdrop-filter:blur(20px);
}

.navbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.navbar-link { 
    color:var(--text-secondary); text-decoration:none; padding:14px 24px; 
    border-radius:20px; font-weight:700; font-size:15px; position:relative; 
    transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-link::before { 
    content:''; position:absolute; inset:0; background:var(--gradient-accent); 
    opacity:0; border-radius:20px; transition:opacity .3s ease, transform .3s ease;
    z-index:-1; transform:scale(0.95);
}

.navbar-link:hover::before, .navbar-link.active::before { opacity:1; transform:scale(1); }

.navbar-link:hover, .navbar-link.active { 
    color:white; transform:translateY(-2px); box-shadow:0 15px 35px var(--accent-glow);
}

.theme-toggle { 
    width:56px; height:56px; background:var(--glass-secondary); border:none; 
    border-radius:50%; color:var(--text-secondary); font-size:20px; font-weight:900; 
    cursor:pointer; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover { 
    background:var(--gradient-accent); color:white; transform:scale(1.15) rotate(180deg); 
    box-shadow:var(--shadow-glow);
}

.main { padding-top:120px; min-height:100vh; position:relative; }

.hero-particles { 
    position:fixed; inset:0; pointer-events:none; z-index:1; 
    background:radial-gradient(circle at 20% 80%, rgba(59,130,246,0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(16,185,129,0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(245,158,11,0.1) 0%, transparent 50%);
    animation:particlesFloat 20s ease-in-out infinite;
}

@keyframes particlesFloat { 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-20px) rotate(180deg); } }

.section { 
    min-height:100vh; padding:140px 40px 80px; max-width:1440px; margin:0 auto; 
    opacity:0; transform:translateY(80px); transition:all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative; z-index:10;
}

.section.active { opacity:1; transform:translateY(0); }

.hero-stats { 
    display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:40px; 
    margin-bottom:80px; perspective:1000px;
}

.stat-card { 
    background:var(--glass-secondary); padding:60px 48px; text-align:center; 
    cursor:pointer; transform-style:preserve-3d; transition:all .6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative; overflow:hidden;
}

.stat-card::before { 
    content:''; position:absolute; inset:0; background:var(--gradient-accent); 
    opacity:0; z-index:-1; transition:opacity .6s ease;
}

.stat-card:hover::before { opacity:0.15; }

.stat-card:hover { 
    transform:translateY(-25px) rotateX(5deg) rotateY(5deg) scale(1.05); 
    box-shadow:0 50px 100px rgba(0,0,0,0.6), var(--shadow-glow);
}

.stat-icon { 
    font-size:80px; margin-bottom:32px; filter:drop-shadow(0 12px 32px var(--accent-glow));
}

.stat-number { 
    font-size:72px; font-weight:900; background:var(--gradient-accent); 
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; 
    margin-bottom:16px; filter:drop-shadow(0 8px 24px var(--accent-glow));
}

.stat-label { 
    font-size:20px; font-weight:600; color:var(--text-secondary); 
    letter-spacing:0.5px; text-transform:uppercase;
}

.live-dashboard { 
    background:var(--glass-primary); padding:64px; border-radius:36px; 
    margin-bottom:80px; position:relative; overflow:hidden;
}

.live-header { 
    display:flex; align-items:center; justify-content:space-between; 
    margin-bottom:48px; flex-wrap:wrap; gap:24px;
}

.live-title { 
    font-size:40px; font-weight:900; display:flex; align-items:center; gap:20px;
}

.live-badge { 
    width:24px; height:24px; border-radius:50%; 
    background:linear-gradient(135deg, #ef4444, #dc2626); box-shadow:0 0 32px #ef4444;
    animation:pulseLive 2s infinite;
}

@keyframes pulseLive { 0%,100%{ box-shadow:0 0  CSS32px #ef4444; transform:scale(1); } 50%{ box-shadow:0 0 48px #ef4444; transform:scale(1.1); } }

.live-stats { display:flex; gap:32px; flex-wrap:wrap; }

.live-stat { text-align:center; }

.live-stat-number { font-size:28px; font-weight:900; color:var(--accent-primary); }

.live-list { 
    display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:24px;
}

.live-match { 
    background:var(--glass-secondary); padding:40px; border-radius:28px; 
    cursor:pointer; transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1); 
    position:relative; overflow:hidden;
}

.live-match::before { 
    content:''; position:absolute; top:0; left:0; right:0; height:4px; 
    background:var(--gradient-accent); transform:scaleX(0); transition:transform .4s ease;
}

.live-match:hover::before { transform:scaleX(1); }

.live-match:hover { 
    transform:translateY(-12px); box-shadow:0 40px 80px rgba(0,0,0,0.6);
}

.live-team { display:flex; align-items:center; gap:24px; margin-bottom:24px; }

.live-team-name { font-size:24px; font-weight:900; }

.live-score { 
    font-size:36px; font-weight:900; color:var(--accent-primary); min-width:80px; text-align:center;
}

.live-status { 
    display:inline-flex; align-items:center; gap:12px; padding:14px 28px; 
    border-radius:25px; font-weight:900; font-size:16px; text-transform:uppercase;
    letter-spacing:1px; box-shadow:0 12px 32px rgba(0,0,0,0.4);
}

.status-live { background:linear-gradient(135deg, #ef4444, #dc2626); color:#fff; }
.status-starting { background:linear-gradient(135deg, #f59e0b, #d97706); color:#fff; }

.leaderboard-container { 
    background:var(--glass-primary); padding:80px; border-radius:36px; max-width:1200px;
}

.leaderboard-header { 
    display:flex; align-items:center; justify-content:space-between; margin-bottom:48px; 
    flex-wrap:wrap; gap:32px;
}

.leaderboard-title { 
    font-size:48px; font-weight:900; background:linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.leaderboard-meta { 
    font-size:16px; color:var(--text-secondary); font-weight:600;
}

.leaderboard-table { 
    width:100%; border-collapse:separate; border-spacing:0; 
    background:var(--glass-secondary); border-radius:28px; overflow:hidden;
    box-shadow:0 40px 80px rgba(0,0,0,0.5);
}

.leaderboard-table thead th { 
    background:linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.25)); 
    color:#fbbf24; padding:28px 32px; font-weight:900; font-size:16px; 
    text-transform:uppercase; letter-spacing:1px; border:none; position:relative;
}

.leaderboard-table tbody td { 
    padding:28px 32px; border-bottom:1px solid var(--border-glass); 
    transition:all .3s ease; position:relative;
}

.leaderboard-table tbody tr:hover { 
    background:rgba(59,130,246,0.15); transform:scale(1.01);
}

.rank { 
    width:100px; font-size:28px; font-weight:900; text-align:center; 
    color:var(--text-secondary);
}

.rank-gold { color:#fbbf24 !important; font-size:36px; text-shadow:0 0 32px #fbbf24; }
.rank-silver { color:#c0c0c0 !important; font-size:32px; }
.rank-bronze { color:#cd7f32 !important; font-size:32px; }

.player { font-weight:900; font-size:20px; max-width:320px; }

.points { 
    font-family:'SF Mono',monospace; font-weight:900; font-size:24px; 
    color:var(--accent-primary); width:180px; text-align:right;
}

.wins { width:160px; text-align:center; }

.wins-badge { 
    background:linear-gradient(135deg, #10b981, #059669); color:#fff; 
    padding:16px 28px; border-radius:25px; font-weight:900; font-size:18px;
    display:inline-flex; align-items:center; gap:12px; box-shadow:0 12px 32px rgba(16,185,129,0.4);
}

.games-section { padding:140px 40px 80px; }

.games-grid { 
    display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:48px;
}

.game-card { 
    height:480px; border-radius:36px; overflow:hidden; cursor:pointer;
    background:var(--glass-primary); transition:all .6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative;
}

.game-card::before { 
    content:''; position:absolute; inset:0; background:var(--gradient-accent); 
    opacity:0; z-index:0; transition:opacity .6s ease;
}

.game-card:hover::before { opacity:0.08; }

.game-card:hover { 
    transform:translateY(-32px) rotateX(2deg); box-shadow:0 80px 160px rgba(0,0,0,0.8);
}

.game-cover { 
    height:280px; background:linear-gradient(135deg, #1a2338, #2a3448); 
    position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}

.game-cover::before { 
    content:attr(data-emoji); font-size:120px; z-index:2; filter:drop-shadow(0 16px 48px rgba(0,0,0,0.8));
}

.game-cover-bg { 
    position:absolute; inset:0; background-size:cover; background-position:center;
    filter:blur(20px) brightness(0.3); transform:scale(1.2);
}

.game-content { 
    padding:48px; position:relative; z-index:2;
}

.game-title { 
    font-size:36px; font-weight:900; margin-bottom:20px; 
    background:var(--gradient-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.game-subtitle { font-size:18px; color:var(--text-secondary); margin-bottom:32px; }

.game-stats { display:flex; justify-content:space-between; align-items:center; }

.game-players { font-size:22px; font-weight:900; color:#10b981; }

.game-cta { 
    background:var(--gradient-accent); color:#000; padding:20px 40px; border-radius:25px; 
    font-size:18px; font-weight:900; text-decoration:none; position:relative; 
    overflow:hidden; box-shadow:0 20px 48px var(--accent-glow);
}

.game-cta::before { 
    content:''; position:absolute; inset:0; background:linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform:translateX(-100%); transition:transform .6s;
}

.game-cta:hover::before { transform:translateX(100%); }

.download-hero { 
    min-height:100vh; display:flex; align-items:center; justify-content:center; 
    text-align:center; padding:0 40px;
}

.download-card { 
    max-width:600px; width:100%; background:var(--glass-primary); padding:96px 80px; 
    border-radius:48px; position:relative; box-shadow:0 80px 160px rgba(0,0,0,0.8);
}

.download-hero-icon { 
    width:160px; height:160px; background:var(--gradient-accent); border-radius:40px; 
    margin:0 auto 64px; font-size:80px; font-weight:900; color:#000; 
    display:flex; align-items:center; justify-content:center; 
    box-shadow:0 40px 96px var(--accent-glow); animation:bounce 4s infinite;
}

@keyframes bounce { 0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-24px);} 60%{transform:translateY(-12px);} }

.download-title { 
    font-size:56px; font-weight:900; margin-bottom:32px; 
    background:linear-gradient(135deg, var(--accent-primary), #1d4ed8); 
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2;
}

.download-subtitle { 
    font-size:24px; color:var(--text-secondary); margin-bottom:64px; line-height:1.6;
    max-width:500px; margin-left:auto; margin-right:auto;
}

.discord-cta { 
    background:linear-gradient(135deg, #5865f2, #4752c4); color:#fff; 
    padding:28px 64px; border-radius:32px; font-size:22px; font-weight:900; 
    text-decoration:none; display:inline-flex; align-items:center; gap:24px; 
    margin-bottom:48px; box-shadow:0 28px 64px rgba(88,101,242,0.5);
    transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.discord-cta:hover { 
    transform:translateY(-12px); box-shadow:0 40px 96px rgba(88,101,242,0.7);
}

.download-buttons { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }

.btn-download { 
    flex:1; min-width:220px; padding:24px 48px; border-radius:28px; font-size:20px; 
    font-weight:900; text-decoration:none; position:relative; overflow:hidden;
    transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-android { background:var(--gradient-accent); color:#000; box-shadow:0 24px 64px var(--accent-glow); }

.btn-ios { background:linear-gradient(135deg, #000, #1f2937); color:#fff; box-shadow:0 24px 64px rgba(0,0,0,0.6); }

.btn-download:hover { transform:translateY(-16px) scale(1.05); }

.feature-grid { 
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:32px; 
    margin-top:80px; text-align:left;
}

.feature-item { display:flex; align-items:center; gap:24px; padding:32px; background:var(--glass-secondary); border-radius:24px; }

.feature-icon { width:72px; height:72px; border-radius:20px; background:var(--gradient-accent); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:900; color:#000; box-shadow:0 16px 48px var(--accent-glow); }

@media (max-width:1024px) { 
    .hero-stats { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:32px; } 
    .live-list { grid-template-columns:1fr; } 
}

@media (max-width:768px) { 
    .header-inner { padding:0 20px; gap:16px; } 
    .navbar { display:none; } 
    .main { padding-top:90px; } 
    .section { padding:100px 20px 60px; } 
    .hero-stats { grid-template-columns:1fr; gap:24px; } 
}

@media (max-width:480px) { 
    .stat-card { padding:40px 32px; } 
    .stat-number { font-size:56px; } 
    .live-match { padding:32px 24px; } 
}

.live-offset {
    scroll-margin-top: 160px; /* Header 120px + margem extra 40px */
}

.scroll-offset {
    scroll-margin-top: 160px; /* Header 120px + 40px margem */
}