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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0e27;
    background: linear-gradient(180deg, #0a0e27 0%, #1a1a3e 50%, #0f0f1e 100%);
    color: #fff;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    padding-top: 80px;
}

/* Global Header */
.global-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

a.logo,
a.logo:visited,
a.logo:link,
a.logo:active {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

a.logo:hover {
    color: #ffffff;
}

.logo-diamond {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.logo-text {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    font-weight: 700;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a,
.nav-links a:visited,
.nav-links a:link,
.nav-links a:active {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
}

.nav-links a:hover {
    color: #ffffff;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* White Half Moon (Crescent) */
.moon {
    position: fixed;
    top: 10%;
    right: 15%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 
        0 0 60px rgba(255, 255, 255, 0.9),
        0 0 100px rgba(255, 255, 255, 0.7),
        0 0 140px rgba(255, 255, 255, 0.5),
        inset -15px -15px 25px rgba(200, 200, 200, 0.3);
    z-index: 1;
    animation: moonGlow 4s infinite ease-in-out;
}

.moon::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 25px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0a0e27;
    box-shadow: 
        0 0 20px rgba(10, 14, 39, 0.9);
}

@keyframes moonGlow {
    0%, 100% {
        box-shadow: 
            0 0 60px rgba(255, 255, 255, 0.9),
            0 0 100px rgba(255, 255, 255, 0.7),
            0 0 140px rgba(255, 255, 255, 0.5),
            inset -15px -15px 25px rgba(200, 200, 200, 0.3);
    }
    50% {
        box-shadow: 
            0 0 80px rgba(255, 255, 255, 1),
            0 0 120px rgba(255, 255, 255, 0.9),
            0 0 160px rgba(255, 255, 255, 0.7),
            inset -15px -15px 25px rgba(200, 200, 200, 0.3);
    }
}

/* Starry Night Background - Multiple Layers */
.stars,
.stars2,
.stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars {
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        100px 100px 2px #fff, 300px 50px 1px #fff, 500px 200px 1px #fff,
        700px 150px 2px #fff, 200px 300px 1px #fff, 900px 250px 1px #fff,
        150px 450px 2px #fff, 400px 400px 1px #fff, 650px 500px 1px #fff,
        850px 450px 2px #fff, 250px 600px 1px #fff, 550px 650px 1px #fff,
        750px 700px 2px #fff, 950px 600px 1px #fff, 100px 750px 1px #fff,
        350px 800px 2px #fff, 600px 850px 1px #fff, 800px 900px 1px #fff,
        1100px 100px 2px #fff, 1300px 200px 1px #fff, 1500px 150px 1px #fff,
        1200px 350px 2px #fff, 1400px 400px 1px #fff, 1600px 500px 1px #fff,
        1150px 600px 2px #fff, 1350px 650px 1px #fff, 1550px 700px 1px #fff,
        1250px 800px 2px #fff, 1450px 850px 1px #fff, 1650px 900px 1px #fff;
    width: 2px;
    height: 2px;
    animation: twinkle 3s infinite ease-in-out;
}

.stars2 {
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        200px 150px 1px #fff, 450px 200px 1px #fff, 750px 100px 1px #fff,
        950px 300px 1px #fff, 300px 450px 1px #fff, 600px 400px 1px #fff,
        850px 550px 1px #fff, 1050px 500px 1px #fff, 400px 650px 1px #fff,
        700px 750px 1px #fff, 1000px 700px 1px #fff, 1300px 650px 1px #fff,
        1400px 150px 1px #fff, 1650px 250px 1px #fff, 1250px 450px 1px #fff,
        1500px 550px 1px #fff, 1200px 750px 1px #fff, 1550px 850px 1px #fff;
    width: 1px;
    height: 1px;
    animation: twinkle 4s infinite ease-in-out 1s;
}

.stars3 {
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        150px 250px 1px rgba(147, 197, 253, 0.9), 550px 300px 1px rgba(196, 181, 253, 0.9),
        850px 150px 1px rgba(253, 224, 71, 0.9), 1150px 200px 1px rgba(134, 239, 172, 0.9),
        350px 500px 1px rgba(147, 197, 253, 0.9), 750px 550px 1px rgba(196, 181, 253, 0.9),
        1050px 450px 1px rgba(253, 224, 71, 0.9), 1450px 500px 1px rgba(134, 239, 172, 0.9),
        450px 750px 1px rgba(147, 197, 253, 0.9), 850px 800px 1px rgba(196, 181, 253, 0.9);
    width: 2px;
    height: 2px;
    animation: twinkle 5s infinite ease-in-out 2s;
}

/* Diamond Snowfall Effect */
.diamond-snow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.snow-diamond {
    position: absolute;
    top: -20px;
    color: #ffffff;
    font-size: 0.8rem;
    opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
    animation: snowfall 8s linear infinite;
}

.snow-diamond::before {
    content: '◆';
}

@keyframes snowfall {
    0% {
        top: -20px;
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        top: 100vh;
        opacity: 0;
        transform: translateX(20px) rotate(360deg);
    }
}

/* Realistic Floating Diamonds */
.diamond {
    position: fixed;
    font-size: 3rem;
    pointer-events: none;
    z-index: 2;
}

.diamond-1 {
    top: 20%;
    left: 10%;
    color: #ffffff;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 70px rgba(147, 197, 253, 0.7));
    animation: diamondFloat 6s infinite ease-in-out, diamondSparkle 2s infinite;
}

.diamond-1::before {
    content: '💎';
}

.diamond-2 {
    top: 15%;
    right: 25%;
    color: #ffffff;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 70px rgba(196, 181, 253, 0.7));
    animation: diamondFloat 7s infinite ease-in-out 1s, diamondSparkle 2.5s infinite 0.5s;
}

.diamond-2::before {
    content: '💎';
}

.diamond-3 {
    top: 60%;
    left: 5%;
    color: #ffffff;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 70px rgba(253, 224, 71, 0.7));
    animation: diamondFloat 8s infinite ease-in-out 2s, diamondSparkle 3s infinite 1s;
}

.diamond-3::before {
    content: '💎';
}

.diamond-4 {
    bottom: 20%;
    right: 15%;
    color: #ffffff;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 70px rgba(134, 239, 172, 0.7));
    animation: diamondFloat 7.5s infinite ease-in-out 1.5s, diamondSparkle 2.8s infinite 1.2s;
}

.diamond-4::before {
    content: '💎';
}

.diamond-5 {
    top: 40%;
    right: 8%;
    color: #ffffff;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 70px rgba(251, 146, 60, 0.7));
    animation: diamondFloat 6.5s infinite ease-in-out 0.8s, diamondSparkle 2.3s infinite 0.7s;
}

.diamond-5::before {
    content: '💎';
}

.diamond-6 {
    bottom: 35%;
    left: 20%;
    color: #ffffff;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 70px rgba(244, 114, 182, 0.7));
    animation: diamondFloat 8.5s infinite ease-in-out 2.5s, diamondSparkle 3.2s infinite 1.8s;
}

.diamond-6::before {
    content: '💎';
}

/* Animations */
@keyframes twinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

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

@keyframes diamondSparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.15) rotate(5deg);
        opacity: 0.8;
    }
}

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

@keyframes diamondTextGlow {
    0%, 100% {
        filter: 
            drop-shadow(0 0 30px rgba(255, 255, 255, 1))
            drop-shadow(0 0 50px rgba(147, 197, 253, 0.8))
            drop-shadow(0 0 70px rgba(96, 165, 250, 0.6));
    }
    50% {
        filter: 
            drop-shadow(0 0 40px rgba(255, 255, 255, 1))
            drop-shadow(0 0 60px rgba(147, 197, 253, 1))
            drop-shadow(0 0 80px rgba(96, 165, 250, 0.8));
    }
}

@keyframes diamondParticles {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) translateY(-10px) scale(1.2) rotate(10deg);
        opacity: 0.8;
    }
}

@keyframes diamondStud {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes floatDiamond {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-8px) rotate(10deg) scale(1.15);
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Container */
.container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 80px 20px 60px;
    animation: fadeInUp 1s ease-out;
}

.main-title {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 2px;
    position: relative;
}

/* Small floating diamond studs */
.diamond-stud {
    position: absolute;
    font-size: 1rem;
    color: #ffffff;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
    animation: floatDiamond 3s infinite ease-in-out;
    pointer-events: none;
}

.stud-left-1 {
    top: 10%;
    left: 30%;
    animation-delay: 0s;
}

.stud-left-2 {
    top: 60%;
    left: 25%;
    animation-delay: 0.8s;
}

.stud-right-1 {
    top: 15%;
    right: 30%;
    animation-delay: 1.2s;
}

.stud-right-2 {
    top: 65%;
    right: 25%;
    animation-delay: 2s;
}

.highlight {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 50%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    padding: 0 20px;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.9));
    animation: diamondTextGlow 3s infinite ease-in-out;
}

/* Small diamond on top */
.highlight::after {
    content: '◆';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: #ffffff;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.9));
    animation: floatDiamond 3s infinite ease-in-out;
}

/* Small diamond on bottom */
.highlight::before {
    content: '◆';
    position: absolute;
    bottom: -20px;
    right: 10%;
    font-size: 1rem;
    color: #ffffff;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
    animation: floatDiamond 3s infinite ease-in-out 1.5s;
}

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

.subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #94a3b8;
    font-weight: 300;
    letter-spacing: 1px;
    animation: fadeInUp 1s ease-out 0.3s backwards;
}

/* Content Sections */
.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

.section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: slideIn 0.8s ease-out backwards;
}

.section:nth-child(1) {
    animation-delay: 0.2s;
}

.section:nth-child(2) {
    animation-delay: 0.4s;
}

.section:nth-child(3) {
    animation-delay: 0.6s;
}

.section:nth-child(4) {
    animation-delay: 0.8s;
}

.section:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(102, 126, 234, 0.2);
}

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

.section-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

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

.section h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section p {
    color: #cbd5e1;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.placeholder-box {
    margin-top: 20px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

.placeholder-box span {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.game-card {
    margin-top: 20px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.game-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}

.game-card h3 {
    color: #60a5fa;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.game-card p {
    color: #cbd5e1;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.play-button {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(96, 165, 250, 0.3);
}

.play-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.5);
}

a.explore-button,
a.explore-button:link,
a.explore-button:visited,
a.explore-button:active {
    display: inline-block;
    padding: 15px 35px;
    margin-top: 20px;
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(96, 165, 250, 0.4);
}

a.explore-button:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(96, 165, 250, 0.6);
}

/* Footer */
.footer {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 60px;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* CRITICAL: Optimized animations for mobile - minimal but elegant */
    
    /* Keep only 3 falling diamonds - ultra-lightweight */
    .diamond-snow {
        display: block;
    }
    
    .snow-diamond {
        display: none; /* Hide all by default */
    }
    
    /* Show only first 3 diamonds */
    .snow-diamond:nth-child(1),
    .snow-diamond:nth-child(2),
    .snow-diamond:nth-child(3) {
        display: block;
        font-size: 0.7rem;
        color: #ffffff;
        opacity: 0.8;
        filter: none;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
        animation: snowfallMobileSlow 12s linear infinite;
    }
    
    .snow-diamond:nth-child(2) {
        animation-delay: 4s;
    }
    
    .snow-diamond:nth-child(3) {
        animation-delay: 8s;
    }
    
    @keyframes snowfallMobileSlow {
        0% {
            top: -30px;
            opacity: 0;
            transform: translateX(0) rotate(0deg);
        }
        5% {
            opacity: 0.8;
        }
        95% {
            opacity: 0.6;
        }
        100% {
            top: 100vh;
            opacity: 0;
            transform: translateX(15px) rotate(180deg);
        }
    }
    
    /* Hide ALL floating diamonds */
    .diamond,
    .diamond-1,
    .diamond-2,
    .diamond-3,
    .diamond-4,
    .diamond-5,
    .diamond-6 {
        display: none;
    }
    
    /* Simplify moon - NO animations, minimal shadow */
    .moon {
        width: 60px;
        height: 60px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
        animation: none !important;
    }
    
    .moon::before {
        box-shadow: none;
    }
    
    /* MINIMAL stars - drastically reduced, NO animations */
    .stars,
    .stars2,
    .stars3 {
        animation: none !important;
        opacity: 0.3;
    }
    
    /* Ultra-minimal star count - only 4 stars each layer */
    .stars {
        box-shadow: 
            100px 100px 1px #fff, 
            300px 300px 1px #fff,
            500px 200px 1px #fff,
            700px 400px 1px #fff;
    }
    
    .stars2 {
        box-shadow: 
            200px 150px 1px #fff,
            400px 350px 1px #fff,
            600px 250px 1px #fff,
            800px 450px 1px #fff;
    }
    
    .stars3 {
        box-shadow: 
            150px 250px 1px rgba(147, 197, 253, 0.5),
            350px 400px 1px rgba(196, 181, 253, 0.5);
    }
    
    /* Title effects - NO filters, NO animations */
    .highlight {
        filter: none;
        animation: none !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    
    .highlight::before,
    .highlight::after {
        display: none;
    }
    
    /* Diamond studs - NO animations */
    .diamond-stud {
        filter: none;
        animation: none !important;
        opacity: 0.6;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    
    /* Disable ALL hover effects on mobile */
    .section:hover {
        transform: none !important;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
    }
    
    /* Disable icon animations */
    .section-icon {
        animation: none !important;
    }
    
    .global-header {
        padding: 12px 20px;
    }
    
    .logo {
        font-size: 1.2rem;
    }
    
    .logo-diamond {
        font-size: 1.4rem;
    }
    
    .nav-links {
        gap: 15px;
    }
    
    .nav-links a {
        font-size: 0.9rem;
    }
    
    .hero {
        padding: 60px 20px 40px;
    }

    .content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section {
        padding: 30px 20px;
    }

    .section-icon {
        font-size: 3rem;
    }
}