/* ============================================
   VISCO Creator Rewards Website
   Galaxy Theme Design System & Styles
   ============================================ */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

/* Disable text selection site-wide */
*,
*::before,
*::after {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow selection in input fields */
input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

:root {
    /* Galaxy Background Colors - Deeper, richer tones */
    --bg-space: #030308;
    --bg-nebula-1: #08081a;
    --bg-nebula-2: #100820;
    --bg-nebula-3: #180a30;
    --bg-card: rgba(15, 10, 35, 0.75);
    --bg-card-solid: #0f0a23;
    --bg-card-hover: rgba(25, 15, 55, 0.85);

    /* Border Colors - Electric edges */
    --border: rgba(120, 80, 255, 0.2);
    --border-hover: rgba(120, 80, 255, 0.45);
    --border-glow: rgba(120, 80, 255, 0.7);

    /* Accent Colors - Electric neon palette */
    --accent-primary: #7C3AED;
    --accent-secondary: #00D4FF;
    --accent-green: #10F5B0;
    --accent-gold: #FFB800;
    --accent-pink: #FF3CAC;
    --accent-electric: #6366F1;

    /* Glow Colors - More vibrant */
    --glow-purple: rgba(124, 58, 237, 0.6);
    --glow-cyan: rgba(0, 212, 255, 0.5);
    --glow-green: rgba(16, 245, 176, 0.45);
    --glow-gold: rgba(255, 184, 0, 0.45);
    --glow-pink: rgba(255, 60, 172, 0.45);

    /* Text Colors */
    --text-primary: #FAFAFA;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    /* Typography - Distinctive fonts */
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Syne', 'Outfit', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;

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

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 30px var(--glow-purple);
    --shadow-glow-strong: 0 0 50px var(--glow-purple), 0 0 100px var(--glow-purple);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-slower: 500ms ease;

    /* Z-index */
    --z-stars: 1;
    --z-content: 10;
    --z-header: 100;
    --z-menu: 200;

    /* Theme Override Variables (set by JavaScript) */
    --theme-accent-primary: var(--accent-primary);
    --theme-accent-secondary: var(--accent-secondary);
    --theme-text-primary: var(--text-primary);
    --theme-text-secondary: var(--text-secondary);
}

/* ============================================
   RGB Mode - Smooth Rainbow Animation
   ============================================ */
@keyframes rgbCycleAccent {
    0% {
        --theme-accent-primary: #ff0000;
        --theme-accent-secondary: #00ffff;
    }

    14% {
        --theme-accent-primary: #ff7f00;
        --theme-accent-secondary: #007fff;
    }

    28% {
        --theme-accent-primary: #ffff00;
        --theme-accent-secondary: #0000ff;
    }

    42% {
        --theme-accent-primary: #00ff00;
        --theme-accent-secondary: #7f00ff;
    }

    57% {
        --theme-accent-primary: #0000ff;
        --theme-accent-secondary: #ff00ff;
    }

    71% {
        --theme-accent-primary: #4b0082;
        --theme-accent-secondary: #ff007f;
    }

    85% {
        --theme-accent-primary: #8b00ff;
        --theme-accent-secondary: #ff0000;
    }

    100% {
        --theme-accent-primary: #ff0000;
        --theme-accent-secondary: #00ffff;
    }
}

/* RGB Mode Active - animation handled by JavaScript */

/* Force gradient refresh on text elements using animated colors */
body.rgb-mode .hero-title {
    background: linear-gradient(135deg,
            var(--text-primary) 0%,
            var(--accent-primary) 40%,
            var(--accent-secondary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.rgb-mode .section-title {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.rgb-mode .action-btn.primary,
body.rgb-mode .btn-submit {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    color: white !important;
}

body.rgb-mode .social-link:hover,
body.rgb-mode .footer-social-link:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 20px var(--glow-purple) !important;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

html::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-space);
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
}

/* ============================================
   Galaxy Background System - Dynamic Scroll Journey
   ============================================ */
.galaxy-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-stars);
    pointer-events: none;
    overflow: hidden;
    transition: background 0.5s ease;
}

/* Base space background - transitions based on scroll depth */
.galaxy-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            var(--bg-space) 0%,
            #0a0a15 30%,
            #050510 60%,
            #020208 100%);
    transition: opacity 0.3s ease;
}

/* Nebula gradient layers */
.nebula-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease;
}

.nebula-layer-1 {
    background: radial-gradient(ellipse at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    animation: nebulaDrift1 30s ease-in-out infinite;
}

.nebula-layer-2 {
    background: radial-gradient(ellipse at 70% 30%, rgba(236, 72, 153, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 30% 70%, rgba(34, 197, 94, 0.06) 0%, transparent 40%);
    animation: nebulaDrift2 40s ease-in-out infinite;
}

/* Deep space layer - appears as you scroll */
.nebula-layer-deep {
    background: radial-gradient(ellipse at 50% 50%, rgba(20, 10, 50, 0.9) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 1s ease;
}

/* Distant galaxies layer */
.distant-galaxies {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.distant-galaxy {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.distant-galaxy-1 {
    width: 80px;
    height: 40px;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    top: 30%;
    left: 10%;
    transform: rotate(-30deg);
}

.distant-galaxy-2 {
    width: 60px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(6, 182, 212, 0.25) 0%, transparent 70%);
    top: 45%;
    right: 15%;
    transform: rotate(20deg);
}

.distant-galaxy-3 {
    width: 100px;
    height: 50px;
    background: radial-gradient(ellipse, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
    bottom: 40%;
    left: 60%;
    transform: rotate(-15deg);
}

/* Space dust / cosmic particles */
.space-dust {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 35%, rgba(139, 92, 246, 0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 60% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 45%, rgba(6, 182, 212, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 55%, rgba(255, 255, 255, 0.25) 0%, transparent 100%),
        radial-gradient(2px 2px at 45% 65%, rgba(236, 72, 153, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 75%, rgba(255, 255, 255, 0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 85%, rgba(139, 92, 246, 0.25) 0%, transparent 100%);
    animation: dustFloat 60s linear infinite;
}

@keyframes dustFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100px);
    }
}

/* Asteroid belt layer */
.asteroid-belt {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.asteroid {
    position: absolute;
    background: radial-gradient(ellipse at 30% 30%, #4a4a5a, #2a2a35);
    border-radius: 40% 60% 50% 40%;
    filter: blur(0.5px);
}

.asteroid-1 {
    width: 8px;
    height: 6px;
    top: 35%;
    left: 5%;
    animation: asteroidFloat 20s ease-in-out infinite;
}

.asteroid-2 {
    width: 12px;
    height: 8px;
    top: 50%;
    right: 8%;
    animation: asteroidFloat 25s ease-in-out infinite reverse;
}

.asteroid-3 {
    width: 6px;
    height: 5px;
    top: 60%;
    left: 20%;
    animation: asteroidFloat 18s ease-in-out infinite;
    animation-delay: -5s;
}

.asteroid-4 {
    width: 10px;
    height: 7px;
    top: 70%;
    right: 25%;
    animation: asteroidFloat 22s ease-in-out infinite reverse;
    animation-delay: -10s;
}

.asteroid-5 {
    width: 5px;
    height: 4px;
    top: 80%;
    left: 70%;
    animation: asteroidFloat 15s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes asteroidFloat {

    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) translateX(5px) rotate(10deg);
    }

    50% {
        transform: translateY(0) translateX(10px) rotate(0deg);
    }

    75% {
        transform: translateY(10px) translateX(5px) rotate(-10deg);
    }
}

/* Cosmic gas clouds */
.gas-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0;
    transition: opacity 1s ease;
}

.gas-cloud-1 {
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    bottom: 30%;
    left: -5%;
}

.gas-cloud-2 {
    width: 250px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
    bottom: 25%;
    right: -5%;
}

/* Black Hole at the bottom */
.black-hole-container {
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    opacity: 0;
    transition: opacity 1.5s ease, transform 0.5s ease;
}

/* The dark singularity core */
.black-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle,
            #000 0%,
            #000 70%,
            rgba(0, 0, 0, 0.98) 85%,
            transparent 100%);
    border-radius: 50%;
    box-shadow:
        0 0 40px 20px rgba(0, 0, 0, 1),
        0 0 80px 40px rgba(0, 0, 0, 0.95),
        0 0 120px 60px rgba(0, 0, 0, 0.8),
        0 0 180px 100px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Remove bright photon ring - keep it subtle */

/* Faint accretion disk */
.accretion-disk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(78deg);
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(150, 80, 40, 0.12) 30deg,
            rgba(170, 100, 50, 0.18) 70deg,
            rgba(180, 120, 60, 0.22) 100deg,
            rgba(170, 100, 50, 0.18) 130deg,
            rgba(150, 80, 40, 0.12) 170deg,
            transparent 210deg,
            rgba(60, 40, 80, 0.08) 260deg,
            rgba(40, 70, 100, 0.1) 300deg,
            rgba(60, 40, 80, 0.08) 340deg,
            transparent 360deg);
    animation: diskRotate 30s linear infinite;
    mask: radial-gradient(circle, transparent 24%, black 30%, black 75%, transparent 100%);
    -webkit-mask: radial-gradient(circle, transparent 24%, black 30%, black 75%, transparent 100%);
    filter: blur(3px);
}

@keyframes diskRotate {
    from {
        transform: translate(-50%, -50%) rotateX(75deg) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotateX(75deg) rotate(360deg);
    }
}

/* Event horizon - subtle glow */
.event-horizon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle,
            transparent 55%,
            rgba(140, 80, 40, 0.04) 65%,
            rgba(120, 60, 30, 0.06) 75%,
            transparent 90%);
    box-shadow: 0 0 30px rgba(100, 50, 20, 0.08);
    animation: eventHorizonPulse 5s ease-in-out infinite;
}

@keyframes eventHorizonPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.03);
        opacity: 0.7;
    }
}

/* Gravitational lensing - very subtle */
.gravitational-lens {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(100, 60, 40, 0.04);
    box-shadow: inset 0 0 30px rgba(60, 30, 15, 0.02);
    animation: lensWobble 12s ease-in-out infinite;
}

@keyframes lensWobble {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.01);
    }
}

@keyframes nebulaDrift1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(20px, -20px) scale(1.05);
    }
}

@keyframes nebulaDrift2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, 20px) scale(1.02);
    }
}

/* Starfield - Base container */
.starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Individual twinkling stars */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle linear infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Streaming stars - fly across the screen */
.star-stream {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: starStream linear infinite;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3);
}

.star-stream::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 1px;
    background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.8));
}

/* Different speeds for depth layers - slow and serene */
.star-stream.fast {
    animation-duration: 15s;
    width: 3px;
    height: 3px;
}

.star-stream.fast::before {
    width: 40px;
}

.star-stream.medium {
    animation-duration: 25s;
    width: 2px;
    height: 2px;
    opacity: 0.6;
}

.star-stream.medium::before {
    width: 20px;
}

.star-stream.slow {
    animation-duration: 40s;
    width: 1.5px;
    height: 1.5px;
    opacity: 0.35;
}

.star-stream.slow::before {
    width: 12px;
}

@keyframes starStream {
    0% {
        transform: translateX(calc(100vw + 100px));
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        transform: translateX(-100px);
        opacity: 0;
    }
}

/* Planets */
.planet {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.6;
    animation: floatPlanet 60s ease-in-out infinite;
}

.planet-1 {
    width: 120px;
    height: 120px;
    top: 8%;
    right: 10%;
    background: radial-gradient(circle at 30% 30%,
            #9f7aea 0%,
            #6b46c1 30%,
            #44337a 60%,
            #1a1a2e 100%);
    box-shadow:
        inset -20px -20px 40px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(139, 92, 246, 0.4),
        0 0 120px rgba(139, 92, 246, 0.2);
    animation-delay: 0s;
}

.planet-2 {
    width: 80px;
    height: 80px;
    top: 15%;
    left: 8%;
    background: radial-gradient(circle at 35% 35%,
            #f6ad55 0%,
            #dd6b20 40%,
            #9c4221 70%,
            #1a1a2e 100%);
    box-shadow:
        inset -15px -15px 30px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(246, 173, 85, 0.3),
        0 0 80px rgba(246, 173, 85, 0.15);
    animation-delay: -20s;
}

.planet-3 {
    width: 60px;
    height: 60px;
    top: 5%;
    left: 40%;
    background: radial-gradient(circle at 30% 30%,
            #81e6d9 0%,
            #319795 40%,
            #234e52 70%,
            #1a1a2e 100%);
    box-shadow:
        inset -10px -10px 20px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(129, 230, 217, 0.3),
        0 0 60px rgba(129, 230, 217, 0.15);
    animation-delay: -40s;
}

/* Planet rings (for the large planet) */
.planet-1::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(75deg);
    width: 180px;
    height: 180px;
    border: 3px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    box-shadow:
        0 0 10px rgba(139, 92, 246, 0.2),
        inset 0 0 10px rgba(139, 92, 246, 0.1);
}

@keyframes floatPlanet {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-15px) translateX(10px);
    }

    50% {
        transform: translateY(0) translateX(20px);
    }

    75% {
        transform: translateY(15px) translateX(10px);
    }
}

/* Meteorite - Premium Fiery Effect */
.meteorite {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle,
            #fff 0%,
            #ffee88 20%,
            #ff9922 50%,
            #ff4400 80%,
            transparent 100%);
    border-radius: 50%;
    opacity: 0;
    z-index: 10;
    transform: rotate(35deg);
    box-shadow:
        0 0 10px #ffaa00,
        0 0 20px #ff6600,
        0 0 40px rgba(255, 100, 0, 0.6),
        0 0 60px rgba(255, 50, 0, 0.3);
}

/* Long fiery tail */
.meteorite::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 250px;
    height: 6px;
    background: linear-gradient(270deg,
            rgba(255, 255, 200, 1) 0%,
            rgba(255, 200, 100, 0.9) 5%,
            rgba(255, 150, 50, 0.7) 15%,
            rgba(255, 100, 0, 0.5) 30%,
            rgba(200, 50, 0, 0.3) 50%,
            rgba(139, 92, 246, 0.2) 70%,
            transparent 100%);
    transform: translateY(-50%);
    border-radius: 0 4px 4px 0;
    filter: blur(1px);
}

/* Glowing core halo */
.meteorite::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle,
            rgba(255, 255, 200, 0.6) 0%,
            rgba(255, 150, 50, 0.3) 40%,
            transparent 70%);
    border-radius: 50%;
    animation: meteorPulse 0.3s ease-in-out infinite alternate;
}

@keyframes meteorPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

@keyframes meteorFall {
    0% {
        opacity: 0;
        transform: rotate(35deg) translate(-100px, 0);
    }

    3% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: rotate(35deg) translate(1600px, 450px);
    }
}

/* Draggable Kick Embed */
.kick-embed-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    height: 240px;
    z-index: 1000;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.4),
        0 0 60px rgba(139, 92, 246, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--accent-primary);
    background: var(--bg-card-solid);
    transition: box-shadow var(--transition-base);
}

.kick-embed-container:hover {
    box-shadow:
        0 0 40px rgba(139, 92, 246, 0.6),
        0 0 80px rgba(139, 92, 246, 0.3),
        0 15px 50px rgba(0, 0, 0, 0.6);
}

.kick-embed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(6, 182, 212, 0.2));
    cursor: grab;
    user-select: none;
}

.kick-embed-header:active {
    cursor: grabbing;
}

.kick-embed-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.kick-embed-live {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px 8px;
    background: #53fc18;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
}

.kick-embed-live-dot {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

.kick-embed-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.kick-embed-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.kick-embed-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.kick-embed-iframe {
    width: 100%;
    height: calc(100% - 36px);
    border: none;
}

.kick-embed-collapsed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: none;
}

.kick-embed-collapsed.visible {
    display: block;
}

.kick-embed-collapsed-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: var(--radius-full);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
    transition: all var(--transition-base);
}

.kick-embed-collapsed-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.7);
}

.kick-pfp {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 480px) {
    .kick-embed-container {
        width: 300px;
        height: 200px;
        bottom: 10px;
        right: 10px;
    }
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle linear infinite;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Gleam effect - bright flash */
.star.gleaming {
    animation: starGleam 0.8s ease-out forwards;
    z-index: 5;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

@keyframes starGleam {
    0% {
        opacity: 0.5;
        transform: scale(1);
        box-shadow: 0 0 2px white;
    }

    30% {
        opacity: 1;
        transform: scale(2.5);
        box-shadow: 0 0 8px white, 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(200, 220, 255, 0.5);
    }

    100% {
        opacity: 0.4;
        transform: scale(1);
        box-shadow: 0 0 2px white;
    }
}

/* Shooting stars - falling from top diagonal */
.shooting-star {
    position: absolute;
    width: 120px;
    height: 2px;
    background: linear-gradient(270deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.8) 10%,
            rgba(139, 92, 246, 0.5) 40%,
            transparent 100%);
    opacity: 0;
    transform: rotate(35deg);
    transform-origin: right center;
    border-radius: 100px;
    filter: blur(0.5px);
    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.9),
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(139, 92, 246, 0.4);
}

/* Multiple shooting star variants for variety */
.shooting-star:nth-child(odd) {
    animation: shootDown1 8s ease-in infinite;
}

.shooting-star:nth-child(even) {
    animation: shootDown2 10s ease-in infinite;
    width: 100px;
    transform: rotate(40deg);
}

.shooting-star:nth-child(3n) {
    animation: shootDown3 9s ease-in infinite;
    width: 80px;
    transform: rotate(30deg);
}

/* Shooting star head glow */
.shooting-star::before {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow:
        0 0 8px white,
        0 0 15px rgba(139, 92, 246, 0.8);
}

@keyframes shootDown1 {
    0% {
        opacity: 0;
        transform: rotate(35deg) translate(-150px, 0);
    }

    3% {
        opacity: 1;
    }

    25% {
        opacity: 0.8;
    }

    50% {
        opacity: 0;
        transform: rotate(35deg) translate(1400px, 400px);
    }

    100% {
        opacity: 0;
        transform: rotate(35deg) translate(1400px, 400px);
    }
}

@keyframes shootDown2 {
    0% {
        opacity: 0;
        transform: rotate(40deg) translate(-120px, 0);
    }

    4% {
        opacity: 1;
    }

    30% {
        opacity: 0.6;
    }

    55% {
        opacity: 0;
        transform: rotate(40deg) translate(1200px, 350px);
    }

    100% {
        opacity: 0;
        transform: rotate(40deg) translate(1200px, 350px);
    }
}

@keyframes shootDown3 {
    0% {
        opacity: 0;
        transform: rotate(30deg) translate(-100px, 0);
    }

    3% {
        opacity: 1;
    }

    28% {
        opacity: 0.7;
    }

    45% {
        opacity: 0;
        transform: rotate(30deg) translate(1000px, 300px);
    }

    100% {
        opacity: 0;
        transform: rotate(30deg) translate(1000px, 300px);
    }
}

/* Cursor Glow Effect - Premium Multi-Layer */
.cursor-glow {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease;
    opacity: 0;
}

.cursor-glow.active {
    opacity: 1;
}

/* Outer ambient glow */
.cursor-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle,
            rgba(139, 92, 246, 0.12) 0%,
            rgba(6, 182, 212, 0.06) 25%,
            rgba(139, 92, 246, 0.03) 50%,
            transparent 70%);
    border-radius: 50%;
    filter: blur(10px);
    animation: cursorPulse 3s ease-in-out infinite;
}

/* Inner concentrated glow */
.cursor-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(139, 92, 246, 0.3) 20%,
            rgba(6, 182, 212, 0.15) 40%,
            transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
}

/* Star core */
.cursor-star {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    box-shadow:
        0 0 4px rgba(255, 255, 255, 1),
        0 0 8px rgba(255, 255, 255, 0.8),
        0 0 15px rgba(139, 92, 246, 0.6),
        0 0 30px rgba(139, 92, 246, 0.4);
    animation: starTwinkle 1.5s ease-in-out infinite;
}

/* Star rays */
.cursor-star::before,
.cursor-star::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.cursor-star::before {
    width: 40px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cursor-star::after {
    width: 2px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Sparkle particles container */
.cursor-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cursor-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 8px rgba(139, 92, 246, 0.5);
}

@keyframes cursorPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.8;
    }
}

@keyframes starTwinkle {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.9;
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    position: relative;
    z-index: var(--z-content);
}

.section {
    padding: var(--spacing-20) 0;
    position: relative;
    z-index: var(--z-content);
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-on-load {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating animation */
.float {
    animation: float 6s ease-in-out infinite;
}

.float-delay-1 {
    animation-delay: -2s;
}

.float-delay-2 {
    animation-delay: -4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Glow text */
.glow-text {
    text-shadow: 0 0 20px var(--glow-purple),
        0 0 40px var(--glow-purple),
        0 0 60px var(--glow-purple);
}

.glow-text-green {
    text-shadow: 0 0 20px var(--glow-green),
        0 0 40px var(--glow-green);
}

.glow-text-gold {
    text-shadow: 0 0 20px var(--glow-gold),
        0 0 40px var(--glow-gold);
}

/* ============================================
   Header
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background: rgba(3, 3, 8, 0.3);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(120, 80, 255, 0.1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.header.scrolled {
    background: rgba(3, 3, 8, 0.9);
    border-bottom-color: var(--border);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    transition: all var(--transition-base);
}

.logo:hover {
    color: var(--accent-primary);
    text-shadow: 0 0 20px var(--glow-purple);
}

/* Navigation */
.nav-links {
    display: none;
    align-items: center;
    gap: 32px;
}

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-base);
    position: relative;
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link.active {
    color: var(--accent-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width var(--transition-base);
    box-shadow: 0 0 10px var(--glow-purple);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Leaderboard Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
}

.nav-dropdown-trigger:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.nav-dropdown-trigger svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-base);
}

.nav-dropdown:hover .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(139, 92, 246, 0.1);
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.nav-dropdown-item:hover {
    background: rgba(139, 92, 246, 0.2);
    color: var(--text-primary);
}

.nav-dropdown-item.active {
    background: rgba(139, 92, 246, 0.3);
    color: var(--accent-primary);
}

.nav-dropdown-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Disabled dropdown item */
.nav-dropdown-item.disabled {
    cursor: not-allowed;
    opacity: 0.7;
    position: relative;
}

.nav-dropdown-item.disabled:hover {
    background: transparent;
    color: var(--text-secondary);
}

/* Coming Soon Badge - Overlay Style */
.coming-soon-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-md);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    box-shadow:
        0 4px 15px rgba(139, 92, 246, 0.4),
        0 0 30px rgba(139, 92, 246, 0.2);
    z-index: 1;
    backdrop-filter: blur(4px);
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Fade out on hover */
.nav-dropdown-item.disabled:hover .coming-soon-badge {
    opacity: 0;
}

.coming-soon-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: inherit;
    z-index: -1;
    opacity: 0.6;
    filter: blur(6px);
    transition: opacity 0.3s ease;
}

.nav-dropdown-item.disabled:hover .coming-soon-badge::before {
    opacity: 0;
}

/* External Link Icon in dropdown */
.nav-dropdown-item .external-link-icon {
    margin-left: auto;
    opacity: 0.5;
    transition: opacity var(--transition-base);
}

.nav-dropdown-item:hover .external-link-icon {
    opacity: 1;
}

@media (min-width: 768px) {
    .nav-links {
        display: flex;
    }
}

/* Hamburger Menu */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 6px;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base);
}

.hamburger:hover {
    background-color: var(--bg-card);
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 768px) {
    .hamburger {
        display: none;
    }
}

/* ============================================
   Menu Overlay
   ============================================ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-menu);
    background: rgba(5, 5, 16, 0.98);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-list {
    text-align: center;
}

.menu-item {
    margin: var(--spacing-6) 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.menu-overlay.active .menu-item {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay.active .menu-item:nth-child(1) {
    transition-delay: 0.1s;
}

.menu-overlay.active .menu-item:nth-child(2) {
    transition-delay: 0.15s;
}

.menu-overlay.active .menu-item:nth-child(3) {
    transition-delay: 0.2s;
}

.menu-overlay.active .menu-item:nth-child(4) {
    transition-delay: 0.25s;
}

.menu-overlay.active .menu-item:nth-child(5) {
    transition-delay: 0.3s;
}

.menu-overlay.active .menu-item:nth-child(6) {
    transition-delay: 0.35s;
}

.menu-overlay.active .menu-item:nth-child(7) {
    transition-delay: 0.4s;
}

.menu-overlay.active .menu-item:nth-child(8) {
    transition-delay: 0.45s;
}

.menu-item a {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-secondary);
    transition: all var(--transition-base);
    display: inline-block;
    position: relative;
}

.menu-item a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width var(--transition-base);
    box-shadow: 0 0 10px var(--glow-purple);
}

.menu-item a:hover {
    color: var(--text-primary);
    text-shadow: 0 0 20px var(--glow-purple);
}

.menu-item a:hover::after {
    width: 100%;
}

/* ============================================
   Hero Section (Home)
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-24) var(--spacing-6);
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: var(--z-content);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(var(--font-size-5xl), 15vw, 10rem);
    font-weight: 800;
    letter-spacing: 0.2em;
    line-height: 1;
    margin-bottom: var(--spacing-6);
    background: linear-gradient(135deg,
            var(--text-primary) 0%,
            var(--accent-primary) 40%,
            var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 40px var(--glow-purple)) drop-shadow(0 0 80px var(--glow-cyan));
    animation: titlePulse 4s ease-in-out infinite;
}

@keyframes titlePulse {

    0%,
    100% {
        filter: drop-shadow(0 0 40px var(--glow-purple)) drop-shadow(0 0 80px var(--glow-cyan));
    }

    50% {
        filter: drop-shadow(0 0 60px var(--glow-purple)) drop-shadow(0 0 100px var(--glow-cyan));
    }
}

.hero-subtitle {
    font-family: var(--font-family);
    font-size: clamp(var(--font-size-lg), 3vw, var(--font-size-2xl));
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ============================================
   Leaderboard Hero Section
   ============================================ */
.leaderboard-hero {
    padding-top: calc(80px + var(--spacing-12));
    padding-bottom: var(--spacing-12);
    text-align: center;
}

.leaderboard-hero-title {
    font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-6xl));
    font-weight: 900;
    color: var(--accent-gold);
    margin-bottom: var(--spacing-4);
    text-shadow: 0 0 30px var(--glow-gold),
        0 0 60px var(--glow-gold);
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.1);
    }
}

.leaderboard-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-8);
    line-height: 1.8;
}

/* Leaderboard Platform Logo */
.leaderboard-platform-logo {
    height: 80px;
    margin-bottom: var(--spacing-6);
    filter: drop-shadow(0 0 20px var(--glow-purple));
    animation: float 3s ease-in-out infinite;
}

.leaderboard-hero-content {
    text-align: center;
    padding-top: var(--spacing-16);
}

/* Leaderboard Table */
.leaderboard-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: var(--spacing-8);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: var(--spacing-4) var(--spacing-6);
    text-align: left;
}

.leaderboard-table th {
    background: rgba(124, 58, 237, 0.1);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leaderboard-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.leaderboard-table tbody tr:last-child {
    border-bottom: none;
}

.leaderboard-table tbody tr:hover {
    background: rgba(124, 58, 237, 0.05);
}

.leaderboard-table td {
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

/* Rank Badges */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.4);
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #A0522D);
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.4);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.action-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px var(--glow-purple);
    transform: translateY(-2px);
}

.action-btn.primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
}

.action-btn.primary:hover {
    box-shadow: 0 0 30px var(--glow-purple), 0 0 60px var(--glow-cyan);
}

.action-btn svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Top 3 Podium Cards
   ============================================ */
.podium-section {
    padding: var(--spacing-12) 0;
}

.podium-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.podium-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8) var(--spacing-6);
    text-align: center;
    width: 280px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.podium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0.5;
}

.podium-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-glow);
}

/* First place card - Centered and elevated */
.podium-card.rank-1 {
    order: 2;
    border-color: var(--accent-gold);
    box-shadow: 0 0 40px var(--glow-gold);
    animation: float 6s ease-in-out infinite;
}

.podium-card.rank-1::before {
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-primary));
    opacity: 1;
    height: 4px;
}

.podium-card.rank-2 {
    order: 1;
    animation: float 6s ease-in-out infinite;
    animation-delay: -2s;
}

.podium-card.rank-3 {
    order: 3;
    animation: float 6s ease-in-out infinite;
    animation-delay: -4s;
}

.podium-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--bg-card-hover);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xl);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
}

.podium-card.rank-1 .podium-rank {
    background: linear-gradient(135deg, var(--accent-gold), #D97706);
    color: #000;
}

.podium-card.rank-2 .podium-rank {
    background: linear-gradient(135deg, #94A3B8, #64748B);
    color: #000;
}

.podium-card.rank-3 .podium-rank {
    background: linear-gradient(135deg, #B45309, #92400E);
    color: #FFF;
}

.podium-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    margin: 0 auto var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: white;
    box-shadow: 0 0 20px var(--glow-purple);
}

.podium-card.rank-1 .podium-avatar {
    width: 100px;
    height: 100px;
    font-size: var(--font-size-3xl);
    box-shadow: 0 0 30px var(--glow-gold);
}

.podium-username {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

.podium-wagered {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-4);
}

.podium-wagered span {
    color: var(--text-primary);
    font-weight: 600;
}

.podium-reward {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--accent-green);
    text-shadow: 0 0 20px var(--glow-green);
}

.podium-card.rank-1 .podium-reward {
    font-size: var(--font-size-3xl);
    color: var(--accent-gold);
    text-shadow: 0 0 30px var(--glow-gold);
}

/* ============================================
   Countdown Timer
   ============================================ */
.countdown-section {
    padding: var(--spacing-12) 0;
    text-align: center;
}

.countdown-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--spacing-6);
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.countdown-unit {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6) var(--spacing-8);
    min-width: 100px;
    text-align: center;
    transition: all var(--transition-base);
}

.countdown-unit:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px var(--glow-purple);
}

.countdown-value {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-2);
    font-variant-numeric: tabular-nums;
}

.countdown-unit-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   Leaderboard Table
   ============================================ */
.leaderboard-table-section {
    padding: var(--spacing-12) 0;
}

.leaderboard-table-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table thead {
    background: rgba(139, 92, 246, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.leaderboard-table th {
    padding: var(--spacing-4) var(--spacing-6);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
}

.leaderboard-table td {
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-base);
}

.leaderboard-table tbody tr {
    transition: all var(--transition-base);
}

.leaderboard-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.1);
}

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

/* Table columns */
.table-rank {
    font-weight: 700;
    color: var(--text-secondary);
    width: 80px;
}

.table-rank.top-3 {
    color: var(--accent-gold);
    text-shadow: 0 0 10px var(--glow-gold);
}

.table-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.table-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: white;
}

.table-username {
    font-weight: 500;
    color: var(--text-primary);
}

.table-reward {
    color: var(--accent-green);
    font-weight: 600;
}

.table-wagered {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Row entry animation */
@keyframes rowEntry {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.leaderboard-table tbody tr {
    animation: rowEntry 0.4s ease forwards;
}

.leaderboard-table tbody tr:nth-child(1) {
    animation-delay: 0.1s;
}

.leaderboard-table tbody tr:nth-child(2) {
    animation-delay: 0.15s;
}

.leaderboard-table tbody tr:nth-child(3) {
    animation-delay: 0.2s;
}

.leaderboard-table tbody tr:nth-child(4) {
    animation-delay: 0.25s;
}

.leaderboard-table tbody tr:nth-child(5) {
    animation-delay: 0.3s;
}

.leaderboard-table tbody tr:nth-child(6) {
    animation-delay: 0.35s;
}

.leaderboard-table tbody tr:nth-child(7) {
    animation-delay: 0.4s;
}

.leaderboard-table tbody tr:nth-child(8) {
    animation-delay: 0.45s;
}

.leaderboard-table tbody tr:nth-child(9) {
    animation-delay: 0.5s;
}

.leaderboard-table tbody tr:nth-child(10) {
    animation-delay: 0.55s;
}

/* Responsive table */
@media (max-width: 640px) {

    .leaderboard-table th,
    .leaderboard-table td {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-sm);
    }

    .table-avatar {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
    }
}

/* ============================================
   Section Titles
   ============================================ */
.section-title {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--spacing-4);
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-12);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Platform Tabs (for home page)
   ============================================ */
.platform-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-10);
    flex-wrap: wrap;
}

.platform-tab {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-tab:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.platform-tab.active {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.platform-tab-logo {
    height: 28px;
    width: 100px;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity var(--transition-base), transform var(--transition-base);
    filter: brightness(1.1);
}

/* Scale up smaller logos to match others */
img.platform-tab-logo[alt="Gamba"],
img.promo-logo[alt="Gamba"],
img.stat-logo[alt="Gamba"],
.nav-dropdown-item img[alt="Gamba"] {
    transform: scale(2.2);
}

img.platform-tab-logo[alt="Clash.gg"],
img.promo-logo[alt="Clash.gg"],
img.stat-logo[alt="Clash.gg"],
.nav-dropdown-item img[alt="Clash.gg"] {
    transform: scale(1.3);
}

/* Consistent Logo Sizes */
.promo-logo {
    height: 28px;
    width: 100px;
    object-fit: contain;
}

.stat-logo {
    height: 28px;
    width: 80px;
    object-fit: contain;
    margin: 0 auto;
    opacity: 0.7;
}

.nav-dropdown-item img {
    height: 20px;
    width: 70px;
    object-fit: contain;
}

.platform-tab:hover .platform-tab-logo,
.platform-tab.active .platform-tab-logo {
    opacity: 1;
    transform: scale(1.05);
}

/* Preserve Gamba's larger scale on hover/active */
.platform-tab:hover .platform-tab-logo[alt="Gamba"],
.platform-tab.active .platform-tab-logo[alt="Gamba"] {
    transform: scale(2.2);
}

/* Preserve Clash.gg's scale on hover/active */
.platform-tab:hover .platform-tab-logo[alt="Clash.gg"],
.platform-tab.active .platform-tab-logo[alt="Clash.gg"] {
    transform: scale(1.3);
}

/* ============================================
   Stats Grid (Home page)
   ============================================ */
.leaderboard-section {
    padding: var(--spacing-20) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-6);
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

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

.stat-card-header {
    margin-bottom: var(--spacing-4);
}

.stat-logo {
    height: 24px;
    width: auto;
    margin: 0 auto;
    opacity: 0.6;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-2);
}

.stat-value {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-prefix {
    font-size: var(--font-size-sm);
    color: var(--accent-green);
    font-weight: 600;
    margin-top: var(--spacing-2);
}

/* Skeleton Loader */
.skeleton-loader {
    display: inline-block;
    width: 120px;
    height: 40px;
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Leaderboard panels */
.leaderboard-panel {
    display: none;
}

.leaderboard-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Coming Soon Panel */
.coming-soon-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-12) var(--spacing-8);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.coming-soon-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.coming-soon-header {
    margin-bottom: var(--spacing-6);
}

.coming-soon-logo {
    height: 60px;
    width: auto;
    margin: 0 auto;
    filter: brightness(1.1);
    animation: float 3s ease-in-out infinite;
}

.coming-soon-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coming-soon-text {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 450px;
    margin: 0 auto;
}

/* Scale up Gamba logo in coming soon panel */
.coming-soon-logo.gamba-logo {
    transform: scale(2.2);
    margin: var(--spacing-4) auto;
}

/* ============================================
   Rewards Section
   ============================================ */
.rewards-section {
    padding: var(--spacing-20) 0;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-6);
}

.reward-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-10) var(--spacing-6);
    text-align: center;
    transition: all var(--transition-base);
}

.reward-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.reward-card.featured {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-color: var(--accent-primary);
}

.reward-card.featured:hover {
    box-shadow: var(--shadow-glow-strong);
}

.reward-value {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--spacing-2);
}

.reward-card.featured .reward-value {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reward-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   Promotions Section
   ============================================ */
.promotions-section {
    padding: var(--spacing-20) 0;
}

.promo-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    max-width: 700px;
    margin: 0 auto;
}

.promo-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    padding: var(--spacing-6) var(--spacing-8);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    transition: all var(--transition-base);
    text-decoration: none;
}

.promo-button:hover {
    transform: translateY(-3px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
    background: var(--bg-card-hover);
}

.promo-logo {
    width: 80px;
    min-width: 80px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    transition: transform var(--transition-base);
    filter: brightness(1.1);
}

.promo-button:hover .promo-logo {
    transform: scale(1.08);
}

/* Gamba logo is visually larger - scale it down to match others */
.promo-button .promo-logo[src*="gamba"] {
    transform: scale(1.4);
}

.promo-content {
    flex: 1;
    text-align: left;
}

.promo-code {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.promo-bonus {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.external-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color var(--transition-base), transform var(--transition-base);
}

.promo-button:hover .external-icon {
    color: var(--accent-primary);
    transform: translate(2px, -2px);
}

/* ============================================
   Videos Section
   ============================================ */
.videos-section {
    padding: var(--spacing-20) 0;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
}

.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
}

.video-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.video-card.live {
    border-color: #EF4444;
}

.video-card.live:hover {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

.video-thumbnail {
    aspect-ratio: 16/9;
    background: rgba(20, 15, 40, 0.8);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.live-badge {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: #EF4444;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.video-info {
    padding: var(--spacing-5);
}

.video-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

.video-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.video-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.video-link:hover {
    background: #7C3AED;
    box-shadow: 0 0 20px var(--glow-purple);
}

.video-link svg {
    transition: transform var(--transition-base);
}

.video-link:hover svg {
    transform: translateX(4px);
}

/* ============================================
   Social Section
   ============================================ */
.social-section {
    padding: var(--spacing-16) 0;
    text-align: center;
}

.social-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: white;
    transition: all var(--transition-base);
}

.social-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.social-link:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   Disclaimer Section
   ============================================ */
.disclaimer-section {
    padding: var(--spacing-12) 0;
}

.disclaimer-section .container {
    display: flex;
    justify-content: center;
}

.disclaimer-box {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

.disclaimer-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #EAB308;
    margin-bottom: var(--spacing-4);
}

.disclaimer-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    border-top: 1px solid var(--border);
    padding: var(--spacing-12) 0;
    position: relative;
    z-index: var(--z-content);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6);
    text-align: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
}

.footer-logo {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    letter-spacing: 0.1em;
}

.footer-copyright {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.footer-nav {
    display: flex;
    gap: var(--spacing-8);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: color var(--transition-base);
}

.footer-link:hover {
    color: var(--text-primary);
}

/* ============================================
   Social Buttons - Unified System
   ============================================ */

/* Shared base styles for all social icon buttons */
.social-link,
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    /* Box model hardening - ensures border is included in dimensions */
    box-sizing: border-box;
    /* Text style isolation - prevents inherited styles from affecting layout */
    font-size: 0;
    line-height: 0;
    /* Touch target optimization for mobile */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Neutralize any animations/transforms */
    animation: none !important;
    transform: none !important;
    transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hero section buttons - larger */
.social-link {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    min-height: 56px;
    max-height: 56px;
}

/* Footer buttons - smaller */
.footer-social-link {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
}

/* SVG sizing - explicit and consistent */
.social-link svg,
.footer-social-link svg {
    display: block;
    flex-shrink: 0;
    /* Safari fix: ensure color inheritance works */
    fill: currentColor;
    /* Prevent SVG from ever exceeding container */
    max-width: 100%;
    max-height: 100%;
    /* Ensure clicks pass through to parent anchor */
    pointer-events: none;
    /* Prevent any inherited transforms */
    transform: none !important;
}

.social-link svg {
    width: 24px;
    height: 24px;
}

.footer-social-link svg {
    width: 16px;
    height: 16px;
}

/* Hover - shared */
.social-link:hover,
.footer-social-link:hover {
    border-color: var(--accent-primary);
}

/* Container layouts */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Kick icon - green glow on hover */
.kick-icon:hover {
    color: #53fc18;
    box-shadow: 0 0 20px rgba(83, 252, 24, 0.6), 0 0 40px rgba(83, 252, 24, 0.3);
}

/* Discord icon - blue/purple glow on hover */
.discord-icon:hover {
    color: #5865F2;
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.6), 0 0 40px rgba(88, 101, 242, 0.3);
}

/* Footer Credits */
.footer-credits {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border);
    text-align: center;
}

.credits-text {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.credits-name {
    color: var(--accent-primary);
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Footer Social Links - see earlier Social Section for main social-link styles */

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet */
@media (min-width: 768px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        position: relative;
    }

    .footer-brand {
        align-items: flex-start;
        text-align: left;
    }

    .footer-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .podium-grid {
        flex-wrap: nowrap;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .section {
        padding: var(--spacing-24) 0;
    }

    .menu-item a {
        font-size: var(--font-size-5xl);
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .rewards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Desktop */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .promo-button {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-6);
    }

    .promo-content {
        text-align: center;
    }

    .promo-logo {
        width: 80px;
        height: 50px;
    }

    .platform-tab {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .platform-tab-logo {
        height: 22px;
    }

    .podium-card {
        width: 100%;
        max-width: 300px;
    }

    .podium-card.rank-1,
    .podium-card.rank-2,
    .podium-card.rank-3 {
        order: unset;
    }

    .countdown-unit {
        min-width: 70px;
        padding: var(--spacing-4) var(--spacing-4);
    }

    .countdown-value {
        font-size: var(--font-size-2xl);
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .action-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ============================================
   Content Grid (VODs, Clips, Discord)
   ============================================ */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
}

.content-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.content-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-hover);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), var(--shadow-glow);
}

.content-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-card-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.content-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-info {
    padding: var(--spacing-4) var(--spacing-5);
    flex: 1;
}

.content-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.content-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.content-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--bg-card-hover);
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
    border-top: 1px solid var(--border);
}

.content-link:hover {
    background: var(--accent-primary);
    color: white;
}

.content-link.primary {
    background: var(--accent-primary);
    color: white;
}

.content-link.primary:hover {
    background: #7c3aed;
    box-shadow: 0 0 20px var(--glow-purple);
}

.content-link.discord {
    background: #5865F2;
    color: white;
}

.content-link.discord:hover {
    background: #4752C4;
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.5);
}

.content-link svg {
    transition: transform var(--transition-base);
}

.content-link:hover svg {
    transform: translateX(3px);
}

/* Badges */
.vod-badge,
.clips-badge {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 4px 10px;
    background: rgba(139, 92, 246, 0.9);
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(4px);
}

.clips-badge {
    background: rgba(245, 158, 11, 0.9);
}

/* Discord Card */
.discord-card .content-thumbnail.discord-bg {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
}

.discord-icon {
    width: 64px;
    height: 64px;
    color: white;
    opacity: 0.9;
    animation: float 3s ease-in-out infinite;
}

.discord-card:hover .discord-icon {
    animation: float 1.5s ease-in-out infinite;
}

/* Discord Glow for Social Link */
.social-link.discord-glow {
    color: #5865F2;
}

.social-link.discord-glow:hover {
    background: rgba(88, 101, 242, 0.2);
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.4);
    color: #5865F2;
}

/* Live Card Enhancement */
.live-card .content-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);
}

/* Live streaming state - pulsing glow */
.live-card.is-live {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), 0 0 40px rgba(239, 68, 68, 0.1);
    animation: liveCardPulse 2s ease-in-out infinite;
}

@keyframes liveCardPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), 0 0 40px rgba(239, 68, 68, 0.1);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.5), 0 0 60px rgba(239, 68, 68, 0.2);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   Global Announcements
   ============================================ */

.announcement-overlay {
    position: fixed;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.announcement-overlay.visible {
    opacity: 1;
}

/* Banner type (text/audio with text) */
.announcement-overlay.announcement-banner-type {
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.announcement-overlay.announcement-banner-type.visible {
    transform: translateY(0);
}

.announcement-banner {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    padding: var(--spacing-4) var(--spacing-8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.announcement-text {
    color: white;
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.announcement-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.announcement-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Modal type (YouTube/Image) */
.announcement-overlay.announcement-modal-type {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
}

.announcement-modal {
    position: relative;
    max-width: 900px;
    width: 100%;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 0 60px var(--glow-purple);
}

.announcement-modal-close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.announcement-modal-close:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.announcement-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
}

.announcement-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.announcement-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
}

.announcement-image img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-lg);
}

.announcement-image a {
    display: block;
}

/* ============================================
   Floating Dev Panel
   ============================================ */

/* DEV Button in Navbar */
.nav-divider {
    color: #ef4444;
    font-weight: 700;
    margin: 0 var(--spacing-2);
}

.dev-btn {
    color: #ef4444 !important;
    font-weight: 700 !important;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.dev-btn:hover {
    color: #ff6b6b !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* Floating Panel - Premium Design */
.floating-dev-panel {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 400px;
    max-height: 85vh;
    background: linear-gradient(145deg, rgba(20, 15, 40, 0.98), rgba(10, 8, 25, 0.98));
    backdrop-filter: blur(30px);
    border: 1px solid transparent;
    border-radius: 20px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fdpSlideIn 0.3s ease-out;
}

/* Animated border glow */
.floating-dev-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(139, 92, 246, 0.6),
            rgba(6, 182, 212, 0.3),
            rgba(139, 92, 246, 0.2),
            rgba(6, 182, 212, 0.6));
    background-size: 300% 300%;
    animation: borderGlow 4s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes fdpSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes borderGlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.floating-dev-panel.minimized {
    max-height: 52px;
}

.floating-dev-panel.minimized .fdp-tabs,
.floating-dev-panel.minimized .fdp-content,
.floating-dev-panel.minimized .fdp-footer {
    display: none;
}

/* Panel Header (Draggable) */
.fdp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg,
            rgba(139, 92, 246, 0.15),
            rgba(6, 182, 212, 0.1),
            rgba(255, 255, 255, 0.02));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: move;
    user-select: none;
}

.fdp-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 15px;
    background: linear-gradient(135deg, #fff, rgba(139, 92, 246, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fdp-icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
}

.fdp-controls {
    display: flex;
    gap: 8px;
}

.fdp-autosave-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.fdp-autosave-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.fdp-autosave-btn.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.fdp-autosave-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.fdp-autosave-btn.active .fdp-autosave-indicator {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: pulse 1.5s ease infinite;
}

.fdp-minimize-btn,
.fdp-close-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.fdp-minimize-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
    transform: scale(1.05);
}

.fdp-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    transform: scale(1.05);
}

/* Tabs */
.fdp-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px;
    gap: 4px;
}

.fdp-tab {
    flex: 1;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.fdp-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.fdp-tab.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(6, 182, 212, 0.15));
    color: #fff;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}

/* Content */
.fdp-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.fdp-content::-webkit-scrollbar {
    width: 6px;
}

.fdp-content::-webkit-scrollbar-track {
    background: transparent;
}

.fdp-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

.fdp-tab-panel {
    display: none;
    animation: fdpFadeIn 0.2s ease;
}

@keyframes fdpFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fdp-tab-panel.active {
    display: block;
}

/* Form Elements */
.fdp-section {
    margin-bottom: var(--spacing-4);
}

.fdp-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.fdp-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.fdp-row {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.fdp-color-group {
    flex: 1;
}

.fdp-color-group label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-1);
}

.fdp-color-group input[type="color"] {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
}

.fdp-slider-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.fdp-slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent-primary);
}

.fdp-input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-2);
}

.fdp-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.fdp-input-small {
    width: 60px;
    padding: var(--spacing-1) var(--spacing-2);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* API Section */
.fdp-api-section {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border);
}

.fdp-api-section:last-child {
    border-bottom: none;
}

.fdp-api-title {
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}

/* Leaderboard Row */
.fdp-lb-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.fdp-lb-row span:first-child {
    flex: 1;
}

/* Buttons */
.fdp-btn {
    padding: var(--spacing-2) var(--spacing-4);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: var(--spacing-2);
}

.fdp-btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
}

.fdp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.fdp-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.fdp-btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.fdp-btn-save {
    width: 100%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.fdp-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Footer */
.fdp-footer {
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

/* Pulse animation for autosave indicator */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Small buttons for tabs */
.fdp-btn-small {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: 11px;
    flex: 1;
}

.fdp-btn-small.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
}

/* Textarea in floating panel */
.fdp-tab-panel textarea.fdp-input {
    resize: vertical;
    min-height: 60px;
}

/* Disabled button state */
.fdp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}