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

:root {
    --primary-green: #4ade80;
    --dark-green: #16a34a;
    --minecraft-brown: #8B4513;
    --minecraft-stone: #8B8B8B;
    --bg-dark: #0f0f0f;
    --card-bg: rgba(30, 30, 30, 0.95);
    --text-light: #e5e5e5;
    --text-dim: #a3a3a3;
}

body {
    font-family: 'VT323', monospace;
    background: linear-gradient(to bottom, #0a0e27 0%, #1a1a2e 50%, #0f0f0f 100%);
    color: var(--text-light);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

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

.particles::after {
    animation-delay: 25s;
    opacity: 0.5;
}

@keyframes sparkle {
    from { transform: translateY(0); }
    to { transform: translateY(-100vh); }
}

.header {
    position: relative;
    z-index: 10;
    padding: 2rem 0;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid var(--primary-green);
    backdrop-filter: blur(10px);
}

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

.title {
    font-family: 'Press Start 2P', cursive;
    font-size: 3rem;
    color: var(--primary-green);
    text-shadow: 
        2px 2px 0 var(--dark-green),
        4px 4px 0 rgba(0, 0, 0, 0.5),
        4px 4px 20px rgba(74, 222, 128, 0.5);
    animation: glow 2s ease-in-out infinite alternate;
    margin-bottom: 1rem;
}

@keyframes glow {
    from { filter: brightness(1); }
    to { filter: brightness(1.2); }
}

.subtitle {
    font-size: 1.5rem;
    color: var(--text-dim);
    letter-spacing: 2px;
}

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

.hero {
    text-align: center;
    padding: 3rem 0;
    margin-bottom: 3rem;
}

.hero-content {
    background: var(--card-bg);
    padding: 3rem;
    border-radius: 8px;
    border: 2px solid var(--minecraft-stone);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.server-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid var(--primary-green);
    border-radius: 20px;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.status-indicator {
    width: 12px;
    height: 12px;
    background: var(--primary-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-description {
    font-size: 1.4rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.card {
    background: var(--card-bg);
    border: 2px solid var(--minecraft-stone);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary-green), transparent, var(--primary-green));
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(74, 222, 128, 0.2);
}

.card:hover::before {
    opacity: 0.5;
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.5));
}

.card h3 {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    color: var(--primary-green);
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.server-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.label {
    font-weight: bold;
    color: var(--primary-green);
    min-width: 80px;
}

.value {
    flex: 1;
    font-size: 1.2rem;
}

.copy-btn {
    padding: 0.5rem 1rem;
    background: var(--primary-green);
    color: black;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    background: var(--dark-green);
    transform: scale(1.05);
}

.copy-btn:active {
    transform: scale(0.95);
}

.downloads {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.05));
    border: 2px solid var(--primary-green);
    border-radius: 8px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.3), transparent);
    transition: left 0.5s ease;
}

.download-btn:hover::before {
    left: 100%;
}

.download-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(74, 222, 128, 0.3);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.1));
}

.btn-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.5));
}

.btn-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.btn-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.btn-subtitle {
    font-size: 1rem;
    color: var(--text-dim);
}

.steps {
    list-style: none;
    counter-reset: step-counter;
}

.steps li {
    counter-increment: step-counter;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--primary-green);
    border-radius: 4px;
    position: relative;
    padding-left: 3rem;
    font-size: 1.2rem;
    line-height: 1.5;
}

.steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 1rem;
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    color: var(--primary-green);
}

.steps code {
    background: rgba(74, 222, 128, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
}

.features {
    margin: 4rem 0;
}

.section-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.8rem;
    text-align: center;
    color: var(--primary-green);
    margin-bottom: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature {
    text-align: center;
    padding: 2rem;
    background: var(--card-bg);
    border: 2px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.feature:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 20px 40px rgba(74, 222, 128, 0.2);
    border-color: var(--primary-green);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 15px rgba(74, 222, 128, 0.5));
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.feature:nth-child(2) .feature-icon { animation-delay: 0.5s; }
.feature:nth-child(3) .feature-icon { animation-delay: 1s; }
.feature:nth-child(4) .feature-icon { animation-delay: 1.5s; }

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

.feature h4 {
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    color: white;
    margin-bottom: 0.5rem;
}

.feature p {
    font-size: 1.2rem;
    color: var(--text-dim);
}

.footer {
    background: rgba(0, 0, 0, 0.8);
    padding: 2rem;
    text-align: center;
    border-top: 2px solid var(--primary-green);
    position: relative;
    z-index: 10;
    margin-top: 4rem;
}

.footer p {
    font-size: 1.2rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.footer-note {
    font-size: 1rem;
    opacity: 0.7;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.discord-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #5865f2, #7289da);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.discord-link:hover {
    background: linear-gradient(135deg, #7289da, #5865f2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(88, 101, 242, 0.3);
    border-color: rgba(88, 101, 242, 0.5);
}

.discord-icon {
    font-size: 1.3rem;
}

@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .info-cards {
        grid-template-columns: 1fr;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .card {
        padding: 1.5rem;
    }
}