@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
:root {
    --mc-green:#00ff41;
    --mc-blue:#00d4ff;
    --mc-purple:#b366ff;
    --mc-red:#ff4444;
    --bg-dark:#0a0a0a;
    --bg-card:#1a1a2e
}
html {
    scroll-behavior:smooth
}
body {
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:linear-gradient(45deg, #0a0a0a 0%, #0d0d1a 25%, #0a0a0a 50%, #0d0d1a 75%, #0a0a0a 100%), repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0, 255, 65, 0.02) 8px, rgba(0, 255, 65, 0.02) 16px), repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0, 212, 255, 0.02) 8px, rgba(0, 212, 255, 0.02) 16px);
    background-size:100% 100%, 100% 100%, 100% 100%;
    background-attachment:fixed;
    color:#fff;
    min-height:100vh;
    position:relative;
    overflow-x:hidden
}
body::before {
    content:'';
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.03) 0px, rgba(0, 255, 65, 0.03) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, rgba(0, 212, 255, 0.03) 1px, transparent 1px, transparent 16px);
    pointer-events:none;
    z-index:0;
    background-attachment:fixed
}
.floating-sidebar-icon {
    position:fixed;
    right:30px;
    top:30px;
    font-size:3rem;
    z-index:999;
    animation:floatIcon 3s ease-in-out infinite;
    filter:drop-shadow(0 0 20px rgba(0, 255, 65, 0.6));
    cursor:pointer;
    transition:all 0.3s ease;
    user-select:none
}
.floating-sidebar-icon:hover {
    font-size:3.5rem;
    filter:drop-shadow(0 0 40px rgba(0, 212, 255, 0.8));
    transform:rotate(-10deg)
}
@keyframes floatIcon {
    0%, 100% {
        transform:translateY(0) rotate(0deg)
    }
25% {
        transform:translateY(-10px) rotate(5deg)
    }
75% {
        transform:translateY(10px) rotate(-5deg)
    }

}
.scroll-progress {
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:8px;
    background:linear-gradient(90deg, var(--mc-green) 0%, var(--mc-blue) 50%, var(--mc-purple) 100%);
    box-shadow:0 0 20px var(--mc-green);
    z-index:9999;
    transition:width 0.1s ease
}
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    position:relative;
    z-index:1
}
.ghostgstl-banner {
    background:linear-gradient(135deg, rgba(0, 255, 65, 0.15) 0%, rgba(0, 212, 255, 0.15) 100%);
    border-bottom:8px solid var(--mc-green);
    padding:16px 0;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 0 20px rgba(0, 255, 65, 0.1)
}
.ghostgstl-banner::before {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
    animation:bannerShine 3s linear infinite
}
@keyframes bannerShine {
    0% {
        left:-100%
    }
100% {
        left:100%
    }

}
.banner-content {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    font-size:1.3rem;
    font-weight:700;
    color:#fff;
    position:relative;
    z-index:1;
    font-family:'Inter', sans-serif;
    letter-spacing:1px
}
.banner-icon {
    font-size:2rem;
    animation:ghostFloat 2s ease-in-out infinite;
    filter:drop-shadow(0 0 15px rgba(0, 255, 65, 0.6))
}
@keyframes ghostFloat {
    0%, 100% {
        transform:translateY(0)
    }
50% {
        transform:translateY(-8px)
    }

}
.banner-text strong {
    color:var(--mc-green);
    font-size:1.4rem;
    text-shadow:0 0 20px rgba(0, 255, 65, 0.8)
}
header {
    text-align:center;
    padding:80px 20px 60px;
    position:relative;
    margin-bottom:40px
}
header::after {
    content:'';
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    height:8px;
    background:linear-gradient(90deg, transparent 0%, var(--mc-green) 20%, var(--mc-blue) 50%, var(--mc-purple) 80%, transparent 100%);
    box-shadow:0 0 30px var(--mc-green)
}
.title-glow {
    font-size:clamp(2.5rem, 8vw, 4.5rem);
    font-weight:900;
    font-family:'Inter', sans-serif;
    letter-spacing:3px;
    margin-bottom:15px;
    background:linear-gradient(135deg, var(--mc-green) 0%, var(--mc-blue) 50%, var(--mc-purple) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 30px rgba(0, 255, 65, 0.5));
    animation:titlePulse 4s ease-in-out infinite;
    text-transform:uppercase
}
@keyframes titlePulse {
    0%, 100% {
        filter:drop-shadow(0 0 30px rgba(0, 255, 65, 0.5))
    }
50% {
        filter:drop-shadow(0 0 50px rgba(0, 212, 255, 0.7))
    }

}
.subtitle {
    font-size:clamp(1.2rem, 3vw, 1.8rem);
    font-weight:700;
    color:var(--mc-green);
    text-shadow:0 0 25px rgba(0, 255, 65, 0.7);
    margin-bottom:15px;
    letter-spacing:2px;
    font-family:'Inter', sans-serif;
    text-transform:uppercase
}
.description {
    font-size:clamp(1rem, 2vw, 1.2rem);
    color:#a0a0a0;
    max-width:900px;
    margin:0 auto;
    line-height:1.8;
    font-family:'Inter', sans-serif
}
.stats-card {
    background:linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 65, 0.08) 100%);
    border:6px solid var(--mc-green);
    border-radius:0;
    padding:50px;
    margin-bottom:60px;
    position:relative;
    overflow:hidden;
    box-shadow:0 0 50px rgba(0, 255, 65, 0.4), inset 0 0 30px rgba(0, 255, 65, 0.05), 8px 8px 0 rgba(0, 0, 0, 0.3)
}
.stat-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    z-index:1
}
.stat-number {
    font-size:clamp(4rem, 12vw, 6rem);
    font-weight:900;
    font-family:'Inter', sans-serif;
    background:linear-gradient(135deg, var(--mc-green) 0%, var(--mc-blue) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 35px rgba(0, 255, 65, 0.8));
    animation:numberPulse 3s ease-in-out infinite;
    line-height:1;
    letter-spacing:2px
}
@keyframes numberPulse {
    0%, 100% {
        transform:scale(1)
    }
50% {
        transform:scale(1.08)
    }

}
.stat-label {
    font-size:clamp(1.1rem, 2vw, 1.6rem);
    font-weight:700;
    color:var(--mc-green);
    text-shadow:0 0 15px rgba(0, 255, 65, 0.7);
    margin-top:20px;
    letter-spacing:3px;
    font-family:'Inter', sans-serif;
    text-transform:uppercase
}
.form-section {
    background:linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 212, 255, 0.08) 100%);
    border:6px solid var(--mc-blue);
    border-radius:0;
    padding:50px;
    margin-bottom:60px;
    box-shadow:0 0 50px rgba(0, 212, 255, 0.4), inset 0 0 30px rgba(0, 212, 255, 0.05), 8px 8px 0 rgba(0, 0, 0, 0.3);
    position:relative;
    overflow:hidden
}
.form-section::before {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.12), transparent);
    animation:formSweep 8s ease-in-out infinite
}
@keyframes formSweep {
    0% {
        left:-100%
    }
50% {
        left:100%
    }
100% {
        left:100%
    }

}
.form-section h2 {
    font-size:clamp(2rem, 5vw, 3rem);
    font-weight:900;
    color:var(--mc-blue);
    text-align:center;
    margin-bottom:40px;
    text-shadow:0 0 30px rgba(0, 212, 255, 0.7);
    letter-spacing:2px;
    font-family:'Inter', sans-serif;
    text-transform:uppercase;
    position:relative;
    z-index:1
}
.form-section h2::after {
    content:'';
    display:block;
    width:120px;
    height:6px;
    background:linear-gradient(90deg, transparent, var(--mc-blue), transparent);
    margin:20px auto 0;
    box-shadow:0 0 25px var(--mc-blue)
}
.form-group {
    margin-bottom:30px;
    position:relative;
    z-index:1
}
.form-group label {
    display:flex;
    align-items:center;
    gap:15px;
    font-size:1.1rem;
    font-weight:600;
    margin-bottom:15px;
    color:#fff;
    text-shadow:0 0 10px rgba(0, 212, 255, 0.4);
    font-family:'Inter', sans-serif;
    letter-spacing:1px;
    text-transform:uppercase
}
.icon {
    font-size:1.8rem;
    filter:drop-shadow(0 0 12px rgba(0, 212, 255, 0.6));
    animation:iconBounce 2s ease-in-out infinite
}
@keyframes iconBounce {
    0%, 100% {
        transform:translateY(0)
    }
50% {
        transform:translateY(-6px)
    }

}
input[type="text"], textarea {
    width:100%;
    padding:18px;
    background:rgba(13, 13, 26, 0.9);
    border:4px solid var(--mc-blue);
    border-radius:0;
    color:#fff;
    font-size:1rem;
    font-weight:500;
    font-family:'Inter', sans-serif;
    transition:all 0.3s ease;
    box-shadow:inset 0 0 15px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing:0.5px
}
input[type="text"]:focus, textarea:focus {
    outline:0;
    border-color:var(--mc-green);
    background:rgba(0, 255, 65, 0.08);
    box-shadow:0 0 30px rgba(0, 255, 65, 0.5), inset 0 0 15px rgba(0, 255, 65, 0.15);
    transform:translateY(-3px)
}
input[type="text"]::placeholder, textarea::placeholder {
    color:rgba(160, 160, 160, 0.6);
    font-family:'Inter', sans-serif
}
textarea {
    resize:vertical;
    min-height:140px;
    font-family:'Inter', sans-serif
}
.radio-group {
    display:flex;
    flex-direction:column;
    gap:18px
}
.radio-label {
    display:flex;
    align-items:center;
    padding:20px 25px;
    background:rgba(13, 13, 26, 0.9);
    border:4px solid var(--mc-blue);
    border-radius:0;
    cursor:pointer;
    transition:all 0.3s ease;
    position:relative;
    overflow:hidden;
    box-shadow:0 4px 8px rgba(0, 0, 0, 0.3)
}
.radio-label::before {
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.15), transparent);
    transition:left 0.5s ease
}
.radio-label:hover::before {
    left:100%
}
.radio-label:hover {
    border-color:var(--mc-green);
    background:rgba(0, 255, 65, 0.08);
    transform:translateX(8px);
    box-shadow:0 0 35px rgba(0, 255, 65, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3)
}
.radio-label input[type="radio"] {
    position:absolute;
    opacity:0
}
.radio-custom {
    width:28px;
    height:28px;
    border:4px solid var(--mc-blue);
    margin-right:18px;
    position:relative;
    transition:all 0.3s ease;
    background:rgba(0, 0, 0, 0.6);
    flex-shrink:0
}
.radio-label input[type="radio"]:checked+.radio-custom {
    border-color:var(--mc-green);
    background:var(--mc-green);
    box-shadow:0 0 25px rgba(0, 255, 65, 0.7), inset 0 0 10px rgba(0, 0, 0, 0.5)
}
.radio-label input[type="radio"]:checked+.radio-custom::after {
    content:'✓';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color:#0a0a0a;
    font-weight:900;
    font-size:16px;
    font-family:'Inter', sans-serif
}
.radio-text {
    font-size:1.1rem;
    font-weight:600;
    color:#fff;
    font-family:'Inter', sans-serif;
    letter-spacing:1px;
    text-transform:uppercase
}
.error-message {
    color:var(--mc-red);
    font-size:0.95rem;
    font-weight:600;
    margin-top:8px;
    display:none;
    text-shadow:0 0 12px rgba(255, 68, 68, 0.6);
    font-family:'Inter', sans-serif;
    letter-spacing:0.5px
}
.error-message.show {
    display:block;
    animation:shake 0.4s ease
}
@keyframes shake {
    0%, 100% {
        transform:translateX(0)
    }
25% {
        transform:translateX(-10px)
    }
75% {
        transform:translateX(10px)
    }

}
.btn-submit {
    width:100%;
    padding:24px;
    background:linear-gradient(135deg, var(--mc-green) 0%, var(--mc-blue) 100%);
    border:5px solid var(--mc-green);
    border-radius:0;
    color:#0a0a0a;
    font-size:1.4rem;
    font-weight:700;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    box-shadow:0 0 50px rgba(0, 255, 65, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.2), 8px 8px 0 rgba(0, 0, 0, 0.4);
    text-transform:uppercase;
    letter-spacing:2px;
    position:relative;
    overflow:hidden;
    font-family:'Inter', sans-serif
}
.btn-submit::before {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:0;
    height:0;
    background:rgba(255, 255, 255, 0.3);
    border-radius:50%;
    transition:width 0.6s ease, height 0.6s ease
}
.btn-submit:hover::before {
    width:300%;
    height:300%
}
.btn-submit:hover {
    transform:translateY(-8px);
    box-shadow:0 0 80px rgba(0, 255, 65, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.3), 12px 12px 0 rgba(0, 0, 0, 0.4);
    border-color:var(--mc-blue)
}
.btn-submit:active {
    transform:translateY(-2px)
}
.btn-icon {
    font-size:1.8rem;
    transition:transform 0.3s ease
}
.btn-submit:hover .btn-icon {
    transform:translateX(10px)
}
footer {
    text-align:center;
    padding:50px 20px;
    margin-top:80px;
    border-top:6px solid var(--mc-purple);
    position:relative
}
footer::before {
    content:'';
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    height:6px;
    background:linear-gradient(90deg, transparent 0%, var(--mc-green) 20%, var(--mc-blue) 50%, var(--mc-purple) 80%, transparent 100%);
    box-shadow:0 0 25px var(--mc-blue)
}
footer p {
    color:#a0a0a0;
    margin-bottom:12px;
    font-size:1rem;
    font-family:'Inter', sans-serif;
    letter-spacing:1px;
    text-shadow:0 0 8px rgba(0, 0, 0, 0.6)
}
.ghostgstl-credit {
    margin:15px 0;
    font-weight:700;
    color:var(--mc-green)
}
.ghostgstl-credit strong {
    text-shadow:0 0 20px rgba(0, 255, 65, 0.8)
}
.admin-link {
    display:inline-block;
    color:var(--mc-purple);
    font-weight:700;
    padding:12px 28px;
    border:4px solid var(--mc-purple);
    border-radius:0;
    text-decoration:none;
    transition:all 0.3s ease;
    margin-top:15px;
    box-shadow:0 0 25px rgba(179, 102, 255, 0.4);
    font-family:'Inter', sans-serif;
    letter-spacing:2px;
    text-transform:uppercase
}
.admin-link:hover {
    color:#0a0a0a;
    background:var(--mc-purple);
    box-shadow:0 0 50px rgba(179, 102, 255, 0.7);
    transform:translateY(-4px)
}
.modal {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.95);
    backdrop-filter:blur(8px);
    z-index:10000;
    align-items:center;
    justify-content:center
}
.modal.show {
    display:flex;
    animation:modalFadeIn 0.3s ease
}
@keyframes modalFadeIn {
    from {
        opacity:0
    }
to {
        opacity:1
    }

}
.modal-content {
    background:linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 65, 0.12) 100%);
    border:5px solid var(--mc-green);
    border-radius:0;
    padding:60px;
    max-width:700px;
    width:90%;
    text-align:center;
    box-shadow:0 0 80px rgba(0, 255, 65, 0.6), inset 0 0 40px rgba(0, 255, 65, 0.1), 12px 12px 0 rgba(0, 0, 0, 0.4);
    animation:modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1)
}
@keyframes modalSlideIn {
    from {
        transform:translateY(-60px);
        opacity:0
    }
to {
        transform:translateY(0);
        opacity:1
    }

}
.modal-content h3 {
    font-size:2.5rem;
    font-weight:900;
    color:var(--mc-green);
    margin-bottom:25px;
    text-shadow:0 0 35px rgba(0, 255, 65, 0.8);
    font-family:'Inter', sans-serif;
    letter-spacing:2px;
    text-transform:uppercase
}
.modal-content p {
    font-size:1.2rem;
    color:#a0a0a0;
    margin-bottom:30px;
    line-height:1.8;
    font-family:'Inter', sans-serif;
    letter-spacing:0.5px
}
@media (max-width:768px) {
    .floating-sidebar-icon {
        right:20px;
        top:20px;
        font-size:2.5rem
    }
.floating-sidebar-icon:hover {
        font-size:3rem
    }
.title-glow {
        font-size:2.2rem
    }
.subtitle {
        font-size:1.2rem
    }
.form-section, .stats-card {
        padding:30px
    }
.radio-label {
        padding:16px 18px
    }
input[type="text"], textarea {
        padding:14px 16px;
        font-size:1rem
    }

}
@media (max-width:480px) {
    .btn-submit {
        padding:18px;
        font-size:1.2rem
    }
header {
        padding:40px 20px 30px
    }

}
::-webkit-scrollbar {
    width:16px
}
::-webkit-scrollbar-track {
    background:var(--bg-dark)
}
::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg, var(--mc-green) 0%, var(--mc-blue) 100%);
    border:3px solid var(--bg-dark);
    border-radius:0
}
::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg, var(--mc-blue) 0%, var(--mc-purple) 100%)
}



/* COUNTDOWN BOX (VERTICAL) */
.countdown-box {
    margin: 40px auto;
    padding: 30px;
    border: 6px solid var(--mc-green);
    background: rgba(0, 255, 65, 0.08);
    display: flex;
    flex-direction: row;        /* ⬅️ HORIZONTAL */
    justify-content: center;
    align-items: center;
    gap: 60px;                  /* ⬅️ Abstand zwischen den Blöcken */
}



.countdown-box span  {
    
    font-size: 3.3rem;
    
    font-weight: 900;
    
    background: linear-gradient(135deg,  var(--mc-green),  var(--mc-blue));
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
    
}


.countdown-box small  {
    
    color: #bfbfbf;
    
    font-size: 1.1rem;
    
    text-shadow: 0 0 10px rgba(0,  255,  65,  0.6);
    
}

.count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}



/* DISCORD BUTTON */
.discord-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:26px;
    padding:12px 26px;
    border-radius:999px;
    border:1px solid rgba(0,212,255,0.8);
    background:radial-gradient(circle at top left, rgba(0,255,65,0.25), rgba(0,212,255,0.18));
    color:#fff;
    font-size:0.9rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 0 22px rgba(0,212,255,0.5);
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.discord-btn:hover {
    transform:translateY(-1px) scale(1.01);
    box-shadow:0 0 30px rgba(0,212,255,0.9);
    background:radial-gradient(circle at top left, rgba(0,255,65,0.35), rgba(0,212,255,0.25));
}
.discord-btn:active {
    transform:translateY(0) scale(.99);
    box-shadow:0 0 14px rgba(0,212,255,0.7);
}


.discord-btn:hover  {
    
    box-shadow: 0 0 70px rgba(88, 101, 242, 1);
    
    transform: translateY(-6px);
    
}

/* Countdown – Layout für die Segmente */
.countdown-box .time-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Zahl */
.countdown-box .time-segment span {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: #00ffcc;
}

/* Beschriftung */
.countdown-box .time-segment small {
    margin-top: 6px;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c1fff0;
}

/* Mobile Feintuning */
@media (max-width: 480px) {
    .countdown-box {
        gap: 20px;
        padding: 20px;
    }
}


/* 🔧 Zusätzliche Sektion für ATM 10 To The Sky Infos */
.server-ip-box {
    margin: 18px auto 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0,255,65,0.08), rgba(0,212,255,0.08));
    border: 1px solid rgba(0,255,65,0.4);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.server-ip-box .ip-label {
    opacity: 0.8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.server-ip-box .ip-value {
    font-family: "Fira Code", monospace;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(0,255,65,0.4);
}

.ip-copy-btn {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(0,255,65,0.12);
    color: var(--mc-green);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.ip-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(0,255,65,0.4);
    background: rgba(0,255,65,0.2);
}

/* Info-Grid für Projektinfos, Steps & Support */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.info-card {
    background: linear-gradient(145deg, rgba(10,10,10,0.9), rgba(26,26,46,0.95));
    border-radius: 18px;
    padding: 18px 18px 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.55);
    border: 1px solid rgba(0,255,65,0.16);
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at top left, rgba(0,255,65,0.1), transparent 55%);
    opacity: 0.9;
    pointer-events: none;
}

.info-card h2 {
    font-size: 1.05rem;
    margin-bottom: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.info-card p,
.info-card li {
    font-size: 0.92rem;
    line-height: 1.4;
}

.info-card code {
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(0,255,65,0.25);
}

.steps-list {
    list-style: decimal;
    padding-left: 18px;
    margin-left: 2px;
    margin-top: 6px;
}

.steps-list li + li {
    margin-top: 4px;
}

.rules-list {
    list-style: disc;
    padding-left: 18px;
    margin-top: 6px;
}

.rules-list li + li {
    margin-top: 4px;
}

.btn-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,212,255,0.55);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mc-blue);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(0,212,255,0.6);
    background: rgba(0,212,255,0.08);
}

/* Mobile Tweaks */
@media (max-width: 600px) {
    .server-ip-box {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .server-ip-box .ip-value {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: inline-flex;
    }
}


.ip-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0,0,0,0.9);
    border: 1px solid rgba(0,255,65,0.7);
    color: var(--mc-green);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
}

.ip-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 600px) {
    .ip-toast {
        left: 50%;
        right: auto;
        transform: translate(-50%, 10px);
    }

    .ip-toast.visible {
        transform: translate(-50%, 0);
    }
}

.info-link {
    color:var(--mc-blue);
    text-decoration:none;
    border-bottom:1px dashed rgba(0,212,255,0.6);
    padding-bottom:1px;
    transition:color .12s ease, border-color .12s ease, text-shadow .12s ease;
}
.info-link:hover {
    color:#fff;
    border-color:rgba(0,255,65,0.8);
    text-shadow:0 0 10px rgba(0,212,255,0.7);
}

.status-text {
    font-size:1.1rem;
}
.status-text.status-loading {
    color:var(--mc-blue);
    font-size:0.9rem;
}
.status-text.status-online {
    color:var(--mc-green);
}
.status-text.status-offline {
    color:var(--mc-red);
}