:root {
    --bg-primary: #0a0e27;
    --bg-secondary: #151932;
    --bg-card: rgba(30, 35, 60, 0.6);
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #ec4899;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: rgba(99, 102, 241, 0.2);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.3);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
}

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

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Animated starfield background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white, 200px 100px white, 300px 300px white,
        400px 150px white, 500px 250px white, 600px 350px white,
        700px 100px white, 800px 400px white, 900px 200px white,
        1000px 300px white, 1100px 150px white, 1200px 250px white,
        150px 400px white, 250px 500px white, 350px 100px white,
        450px 300px white, 550px 200px white, 650px 450px white,
        50px 350px white, 750px 50px white, 850px 300px white,
        950px 450px white, 1050px 100px white, 1150px 350px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem;
    position: relative;
    z-index: 1;
}

/* Header Styles */
.header {
    text-align: center;
    margin-bottom: 4rem;
    animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.2;
}

.title-icon {
    font-size: 3rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.title-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.8;
}

.subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-weight: 300;
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Game Card */
.game-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    animation: fadeInUp 0.6s ease-out backwards;
}

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

.game-card:nth-child(1) { animation-delay: 0.1s; }
.game-card:nth-child(2) { animation-delay: 0.2s; }
.game-card:nth-child(3) { animation-delay: 0.3s; }
.game-card:nth-child(4) { animation-delay: 0.4s; }
.game-card:nth-child(5) { animation-delay: 0.5s; }
.game-card:nth-child(6) { animation-delay: 0.6s; }
.game-card:nth-child(7) { animation-delay: 0.7s; }
.game-card:nth-child(8) { animation-delay: 0.8s; }

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.game-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-glow), var(--shadow-card);
    border-color: var(--accent-primary);
}

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

.game-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    transition: transform 0.4s ease;
}

.game-card:hover .game-icon {
    transform: scale(1.2) rotate(5deg);
}

.game-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.game-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.game-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
}

/* Footer */
.footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    border-top: 1px solid var(--border-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 2rem 1rem;
    }

    .header {
        margin-bottom: 2.5rem;
    }

    .games-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .game-card {
        padding: 2rem 1.5rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}