/* ==========================
   MOON'S COLORS
========================== */

:root{

    /* Space */
    --space-dark:#090b14;
    --space:#10121b;
    --space-light:#181d2d;

    /* Alien */
    --alien:#b6f486;

    /* Hologram */
    --hologram:#5af7ff;

    /* Text */
    --text:#ffffff;

}



/* ==========================
   GLOBAL
========================== */

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

body{
    font-family:'Fredoka',sans-serif;
    background:linear-gradient(180deg,#400e63 0%,#1a0628 45%,#05010a 100%);
    background-attachment:fixed;
    color:white;
    overflow-x:hidden;
    min-height:100vh;

    margin:0;
    padding:30px;

  cursor: url("../cursor.cur"), auto;
}

/* ==========================
   STARS
========================== */

#stars{
    position:fixed;
    inset:0;
    z-index:-3;
    width:1px;
    height:1px;
    background:transparent;

    box-shadow:
    5vw 10vh #fff,
    10vw 40vh #b6f486,
    15vw 80vh #fff,
    20vw 30vh #88d4c3,
    25vw 70vh #fff,
    30vw 20vh #b6f486,
    35vw 90vh #fff,
    40vw 50vh #88d4c3,
    45vw 15vh #fff,
    50vw 60vh #b6f486,
    55vw 35vh #fff,
    60vw 80vh #88d4c3,
    65vw 25vh #fff,
    70vw 45vh #b6f486,
    75vw 15vh #fff,
    80vw 70vh #88d4c3,
    85vw 55vh #fff,
    90vw 20vh #b6f486,
    95vw 85vh #fff;

    animation:spaceDrift 90s linear infinite;
}

#stars::after{
    content:"";
    position:absolute;
    inset:0;
    box-shadow:inherit;
    transform:translateY(100vh);
}

@keyframes spaceDrift{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-100vh);
    }

}

/* ==========================
   PLANET
========================== */

.planet{

    position:fixed;

    top:-140px;
    right:-140px;

    width:430px;
    height:430px;

    border-radius:50%;

    z-index:-2;

    background:
    radial-gradient(circle at 30% 30%,
    #efffc5,
    #b6f486 28%,
    #5af7ff 58%,
    #376c57 82%,
    #16253a 100%);

    box-shadow:
    0 0 120px rgba(182,244,134,.35);

    animation:planetFloat 16s ease-in-out infinite;
}

.planet::before{

    content:"";

    position:absolute;
    inset:35px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    transparent 50%,
    rgba(255,255,255,.08) 52%,
    transparent 62%);
}

.planet::after{

    content:"";

    position:absolute;

    width:520px;
    height:120px;

    left:-45px;
    top:150px;

    border-radius:50%;

    border:8px solid rgba(182,244,134,.18);

    transform:rotate(-15deg);

    filter:blur(2px);
}

@keyframes planetFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(18px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ==========================
   PROFILE CARD
========================== */

.character-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:80vh;
    gap:25px;
}

.profile-card{

    width:100%;
max-width:700px;

    padding:40px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border:2px solid transparent;

    background:
    linear-gradient(#10121b,#10121b) padding-box,
    linear-gradient(135deg,#5af7ff,#b6f486) border-box;

    box-shadow:
        0 15px 45px rgba(0,0,0,.45);

    text-align:center;

    transition:.35s;
}

.profile-card:hover{

    transform:translateY(-6px);

    border-color:#ff4d4d;

    box-shadow:
    0 0 20px rgba(255,77,77,.4),
    0 0 50px rgba(255,77,77,.2);
}

.profile-card img{

    width:180px;
    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #5af7ff;

    box-shadow:
        0 0 20px #5af7ff,
        0 0 45px rgba(90,247,255,.35);

    transition:.35s;

}

.profile-card img:hover{

    transform:rotate(-3deg) scale(1.06);

}

@keyframes avatarFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

.profile-card h1{

    font-size:2.3rem;

    color:#ffffff;

    text-shadow:
        0 0 10px #5af7ff;

    margin-top:18px;

}

/* ==========================
   STATUS BADGE
========================== */

.status-badge{

    display:inline-block;

    margin:18px 0 25px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(90,247,255,.12);

    border:1px solid rgba(90,247,255,.45);

    color:#5af7ff;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    animation:pulseBadge 2.5s ease-in-out infinite;

    transition:.3s;
}

.status-badge:hover{
    transform:scale(1.05);
}

@keyframes pulseBadge{

    0%{
        box-shadow:0 0 8px rgba(90,247,255,.2);
    }

    50%{
        box-shadow:
            0 0 20px rgba(90,247,255,.6),
            0 0 35px rgba(90,247,255,.3);
    }

    100%{
        box-shadow:0 0 8px rgba(90,247,255,.2);
    }

}

/* ==========================
   CHAOS METER
========================== */

.threat-container{

    width:100%;

    margin-bottom:25px;

    text-align:left;
}

.threat-label{

    color:#b6f486;

    font-size:.75rem;

    font-weight:bold;

    letter-spacing:1px;

    margin-bottom:8px;
}

.threat-bar{

    width:100%;

    height:12px;

    background:rgba(255,255,255,.08);

    border-radius:50px;

    overflow:hidden;

    border:1px solid rgba(182,244,134,.35);
}

.threat-fill{

    height:100%;

    background:linear-gradient(
        90deg,
        #8cff65,
        #b6f486,
        #e6ff8a
    );

box-shadow:
    0 0 20px rgba(90,247,255,.35),
    0 0 40px rgba(182,244,134,.25);
    animation:energyFlow 2s ease-in-out infinite alternate;
}

@keyframes energyFlow{

    from{
        width:94%;
        filter:brightness(1);
    }

    to{
        width:98%;
        filter:brightness(1.3);
    }

}

.profile-card:hover .threat-fill{

   background:linear-gradient(
    135deg,
    #5af7ff,
    #b6f486
);

    box-shadow:0 0 20px #ff4444;
}

.profile-card:hover .threat-label{

    color:#ff6666;
}

/* ==========================
   SOCIALS
========================== */

.social-comms{

    margin:25px 0;

    padding:18px;

    background:rgba(0,0,0,.25);

    border:1px solid rgba(182,244,134,.25);

    border-radius:18px;

    display:flex;

    flex-direction:column;

    gap:12px;
}

.comms-label{

    color:#a8aedd;

    font-size:.75rem;

    font-weight:bold;

    letter-spacing:2px;

    margin-bottom:6px;
}

.social-link{

    color:#b6f486;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.social-link:hover{

    color:white;

    transform:translateX(8px);

    text-shadow:0 0 12px #b6f486;
}

.social-links{
       display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:15px;
}

.social-links a{

    text-decoration:none;
    color:white;

    background:rgba(90,247,255,.08);

    border:1px solid rgba(90,247,255,.25);

    border-radius:14px;

    padding:12px 18px;

    transition:.3s;

    font-weight:600;

}

.social-links a:hover{

    transform:translateX(8px);

    background:#5af7ff;

    color:#111;

    box-shadow:0 0 18px rgba(90,247,255,.5);

}

/* ==========================
   USER ID
========================== */

.userid{

    margin:18px 0;

    color:#d0d0d0;

    font-size:.9rem;
}

/* ==========================
   ROBLOX BUTTON
========================== */

.roblox-btn{

    display:block;

    margin-top:20px;

    padding:14px;

    border-radius:16px;

    text-decoration:none;

    color:white;

    background:linear-gradient(135deg,#5af7ff,#45bfff);

    font-weight:bold;

    transition:.3s;

    box-shadow:0 0 18px rgba(90,247,255,.35);

}

.roblox-btn:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 0 30px rgba(90,247,255,.7);

}

/* ==========================
   LIVE CLOCK
========================== */

#live-clock{
    position:fixed;
    top:20px;
    left:20px;

    padding:10px 18px;

    background:rgba(0,0,0,.35);
    backdrop-filter:blur(10px);

    border:1px solid rgba(182,244,134,.3);
    border-radius:15px;

    color:#b6f486;

    font-size:.9rem;

    z-index:1000;
}

/* ==========================
   MUSIC BUTTON
========================== */

#music-toggle{

    position:fixed;

    top:20px;
    right:20px;

    padding:10px 20px;

    border:none;
    border-radius:30px;

    background:#b6f486;
    color:#32124b;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

    z-index:1000;
}

#music-toggle:hover{

    transform:scale(1.08);

    box-shadow:
        0 0 20px #b6f486;
}

/* ==========================
   ALIEN
========================== */

#alien{

    position:fixed;

    left:-90px;
    bottom:25px;

    font-size:70px;

    animation:alienPeek 12s infinite;

    z-index:999;
}

@keyframes alienPeek{

    0%,80%,100%{

        left:-90px;
        transform:rotate(0deg);

    }

    86%{

        left:20px;
        transform:rotate(-10deg);

    }

    90%{

        transform:rotate(10deg);

    }

    94%{

        transform:rotate(-10deg);

    }

}

/* ==========================
   SHOOTING STARS
========================== */

.shooting-star{

    position:fixed;

    width:180px;
    height:2px;

    background:
    linear-gradient(to left,#ffffff,transparent);

    box-shadow:0 0 15px white;

    transform:rotate(30deg);

    pointer-events:none;

    z-index:-1;
}

/* ==========================
   UFO
========================== */

.ufo{

    position:fixed;

    width:90px;
    height:45px;

    z-index:-1;
}

.ufo-body{

    width:90px;
    height:28px;

    background:#8bdcb7;

    border-radius:50px;

    box-shadow:
    0 0 20px rgba(182,244,134,.7);
}

.ufo-dome{

    position:absolute;

    width:38px;
    height:24px;

    left:26px;
    top:-10px;

    background:#dffff8;

    border-radius:50%;

    opacity:.85;
}

.ufo-light{

    position:absolute;

    width:8px;
    height:8px;

    background:#b6f486;

    border-radius:50%;

    bottom:8px;

    box-shadow:0 0 10px #b6f486;
}

.l1{left:15px;}
.l2{left:41px;}
.l3{right:15px;}

/* ==========================
   FOOTER
========================== */

footer{

    margin-top:60px;

    text-align:center;

    color:#a8aedd;

    opacity:.75;

    font-size:.85rem;

    line-height:1.8;
}

/* ==========================
   SCANLINES
========================== */

body::after{

    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.02),
        rgba(255,255,255,.02) 1px,
        transparent 2px,
        transparent 4px
    );

    opacity:.2;

    animation:scanlines 6s linear infinite;
}

@keyframes scanlines{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(4px);
    }

}

/* ==========================
   MOBILE
========================== */

@media (max-width:600px){

    .profile-card{

        padding:25px;
  width:min(550px,95%);
    max-width:none;
    }

    .profile-card img{

        width:140px;

    }

    .profile-card h1{

        font-size:1.6rem;

    }

    #live-clock,
    #music-toggle{

        font-size:.8rem;

        padding:8px 14px;

    }

    .planet{

        width:280px;
        height:280px;

        top:-80px;
        right:-80px;

    }

}

/* ==========================
   GALACTIC RADIO
========================== */

#radio{
    position:fixed;
    top:75px;
    right:20px;

    width:230px;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(10px);

    border:1px solid rgba(182,244,134,.35);
    border-radius:18px;

    padding:12px 15px;

    color:white;

    z-index:999;

    box-shadow:0 0 20px rgba(182,244,134,.2);
}

.radio-title{

    color:#b6f486;

    font-size:.72rem;

    font-weight:bold;

    letter-spacing:2px;

    margin-bottom:8px;
}

#song-name{

    color:white;

    font-size:.9rem;

    animation:songGlow 2s infinite;
}

@keyframes songGlow{

    0%,100%{
        text-shadow:0 0 5px #b6f486;
    }

    50%{
        text-shadow:0 0 15px #b6f486;
    }

}

/* ==========================
   EQUALIZER
========================== */

.equalizer{

    margin-top:12px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:4px;

    height:40px;
}

.equalizer span{

    width:6px;

    background:#b6f486;

    border-radius:10px;

    box-shadow:0 0 10px #b6f486;

    animation:equalizer 1s ease-in-out infinite;
}

.equalizer span:nth-child(1){
    animation-delay:.1s;
}

.equalizer span:nth-child(2){
    animation-delay:.3s;
}

.equalizer span:nth-child(3){
    animation-delay:.5s;
}

.equalizer span:nth-child(4){
    animation-delay:.2s;
}

.equalizer span:nth-child(5){
    animation-delay:.6s;
}

.equalizer span:nth-child(6){
    animation-delay:.4s;
}

.equalizer span:nth-child(7){
    animation-delay:.15s;
}

@keyframes equalizer{

    0%{

        height:8px;

    }

    50%{

        height:36px;

    }

    100%{

        height:12px;

    }

}

/* ==========================
   BOOT SCREEN
========================== */

#boot-screen{

    position:fixed;
    inset:0;

    background:#030106;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    z-index:99999;

    transition:opacity .8s ease;
}

#boot-screen h1{

    color:#b6f486;

    font-size:2.5rem;

    margin-bottom:30px;

    text-shadow:0 0 25px #b6f486;
}

#boot-text{

    color:white;

    margin-bottom:20px;

    letter-spacing:1px;
}

.boot-bar{

    width:320px;
    height:18px;

    border-radius:50px;

    overflow:hidden;

    border:2px solid #b6f486;

    background:#111;
}

#boot-progress{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #8cff65,
        #b6f486,
        #ffffff
    );

    box-shadow:0 0 20px #b6f486;

    transition:width .25s linear;
}

/* ==========================
   ALIEN
========================== */

#alien{
    position:fixed;
    left:15px;
    bottom:20px;

    font-size:70px;

    cursor:pointer;

    user-select:none;

    animation:alienFloat 3s ease-in-out infinite;

    transition:.3s;

    z-index:9999;
}

#alien:hover{
    transform:scale(1.15) rotate(-10deg);
}

@keyframes alienFloat{

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

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

}

#alien-message{

    position:fixed;

    left:95px;
    bottom:95px;

    background:rgba(0,0,0,.8);

    color:#b6f486;

    border:1px solid #b6f486;

    border-radius:14px;

    padding:12px 16px;

    font-size:.9rem;

    opacity:0;

    transition:.3s;

    pointer-events:none;

    max-width:240px;

    box-shadow:0 0 20px rgba(182,244,134,.3);

    z-index:9999;
}

.radio-status{
    color:#ff6666;
    font-size:.75rem;
    letter-spacing:2px;
    margin:8px 0;
    font-weight:bold;
    animation:blink 1s infinite;
}

@keyframes blink{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:.35;
    }

}

/* ==========================
   CURSOR TRAIL
========================== */

.cursor-particle{
    position:fixed;
    width:10px;
    height:10px;

    border-radius:50%;

    background:#b6f486;

    pointer-events:none;

    z-index:99999;

    box-shadow:
        0 0 12px #b6f486,
        0 0 24px #b6f486;

    animation:particleFade .7s linear forwards;
}

@keyframes particleFade{

    from{
        opacity:1;
        transform:scale(1);
    }

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

}

/* ==========================
   CLICK STARS
========================== */

.click-star{
    position:fixed;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#fff8b3;

    pointer-events:none;

    z-index:99999;

    box-shadow:
        0 0 10px white,
        0 0 20px #b6f486;

    animation:starBurst .8s ease-out forwards;
}

@keyframes starBurst{

    from{
        opacity:1;
        transform:translate(0,0) scale(1);
    }

    to{
        opacity:0;
        transform:translate(var(--x), var(--y)) scale(0);
    }

}

/* ==========================
   COSMIC AURORA
========================== */

#aurora{
    position:fixed;
    inset:-20%;

    z-index:-4;

    pointer-events:none;

    background:
        radial-gradient(circle at 20% 40%, rgba(182,244,134,.18), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(136,212,195,.15), transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(128,80,255,.18), transparent 40%);

    filter:blur(80px);

    animation:auroraMove 25s ease-in-out infinite alternate;
}

@keyframes auroraMove{

    0%{
        transform:
            translate(-5%,0)
            rotate(0deg)
            scale(1);
    }

    100%{
        transform:
            translate(5%,-4%)
            rotate(8deg)
            scale(1.15);
    }

}

/* ==========================
   SYSTEM STATUS PANEL
========================== */

#system-panel{
position: relative;

    width: 230px;

    padding: 15px;

    background: rgba(0,0,0,.45);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(182,244,134,.3);
    border-radius: 18px;

    box-shadow: 0 0 20px rgba(182,244,134,.2);

    color: white;

    z-index: 9999;
}

.system-title{

    color:#b6f486;

    font-size:.75rem;

    letter-spacing:2px;

    font-weight:bold;

    margin-bottom:10px;

}

#system-message{

    color:white;

    font-size:.9rem;

    min-height:40px;

    animation:systemGlow 2s infinite;

}

@keyframes systemGlow{

    0%,100%{
        text-shadow:0 0 5px #b6f486;
    }

    50%{
        text-shadow:0 0 15px #b6f486;
    }

}

/* ==========================
   ACHIEVEMENT POPUPS
========================== */

#achievement{
    position:fixed;

    right:25px;
    bottom:25px;

    width:290px;

    padding:16px 20px;

    background:rgba(10,10,20,.9);
    backdrop-filter:blur(12px);

    border:2px solid #b6f486;
    border-radius:18px;

    color:white;

    box-shadow:
        0 0 25px rgba(182,244,134,.35);

    transform:translateX(350px);

    transition:.6s;

    z-index:99999;
}

#achievement.show{
    transform:translateX(0);
}

.achievement-title{
    color:#b6f486;
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:8px;
    font-size:.8rem;
}

.achievement-text{
    font-size:1rem;
    line-height:1.5;
}

/* ==========================
   MISSION PANEL
========================== */

#mission-panel{
position: relative;

    width:230px;

    padding:15px;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(12px);

    border:1px solid rgba(182,244,134,.35);
    border-radius:18px;

    box-shadow:0 0 20px rgba(182,244,134,.25);

    z-index:9999;
}
.mission-title{

    color:#b6f486;

    font-size:.75rem;

    letter-spacing:2px;

    font-weight:bold;

    margin-bottom:10px;
}

#mission-text{

    color:white;

    line-height:1.6;

    animation:missionGlow 2s infinite;
}

@keyframes missionGlow{

    0%,100%{
        text-shadow:0 0 5px #b6f486;
    }

    50%{
        text-shadow:0 0 15px #b6f486;
    }

}

/* ==========================
   VISITOR STATS
========================== */

#visitor-panel{
position: relative;

    width:230px;

    padding:15px;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(12px);

    border:1px solid rgba(182,244,134,.3);
    border-radius:18px;

    box-shadow:0 0 20px rgba(182,244,134,.2);

    color:white;

    z-index:999;
}

.visitor-stat{
    margin:8px 0;
    font-size:.9rem;
}

.visitor-stat span{
    color:#b6f486;
    float:right;
    font-weight:bold;
}

#space-panel{

    width:300px;
    background:rgba(10,15,30,.85);
    border:2px solid #8cffc1;
    border-radius:18px;
    padding:20px;
    color:#bfffd8;
    font-family:monospace;
    box-shadow:0 0 25px rgba(0,255,180,.25);
}

#space-panel h2{

    margin-bottom:15px;
    text-align:center;
    color:#8cffc1;

}

.space-item{

    display:flex;
    justify-content:space-between;
    margin:12px 0;
    border-bottom:1px solid rgba(255,255,255,.15);
    padding-bottom:6px;

}

@keyframes alertFlash {

    0%   { box-shadow: 0 0 10px rgba(255,0,0,.3); }
    50%  { box-shadow: 0 0 30px rgba(255,0,0,.9); }
    100% { box-shadow: 0 0 10px rgba(255,0,0,.3); }

}

.alert-active {

    animation: alertFlash .7s infinite;

}

.golden-ufo {

    filter:
        drop-shadow(0 0 8px gold)
        drop-shadow(0 0 18px gold);

    animation:
        goldenPulse 1s infinite alternate;

}

@keyframes goldenPulse {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(1.12);

    }

}

#terminal{

    width:320px;
    height:220px;

    background:#05080d;

    border:2px solid #6dffb5;
    border-radius:15px;

    padding:15px;

    overflow:hidden;

    font-family:monospace;
    color:#7dffb8;

    box-shadow:0 0 20px rgba(0,255,150,.25);

}

#terminal-title{

    text-align:center;
    margin-bottom:12px;
    font-weight:bold;
    color:#b5ffe0;

}

#terminal-output{

    height:170px;
    overflow-y:auto;

}

.terminal-line{

    margin:4px 0;
    animation:fadeIn .4s;

}

.terminal-message{
    margin-top:20px;
    padding:15px;

    border-radius:15px;

    background:rgba(90,247,255,.08);
    border:1px solid rgba(90,247,255,.25);

    color:#dffcff;
    line-height:1.6;
}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(5px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

#sidebar{
    position: fixed;

    top: 20px;
    left: 20px;

    height: fit-content;
    max-height: calc(100vh - 40px);

    overflow-y: auto;
}

#sidebar h2{

    text-align:center;
    margin-bottom:18px;

}

.side-btn{

    width:100%;

    margin:8px 0;

    padding:10px;

    border:none;

    border-radius:10px;

    background:#16345f;

    color:white;

    cursor:pointer;

    transition:.25s;

}

.side-btn:hover{

    background:#25539a;

    transform:translateX(5px);

}

/* ==========================
   RESPONSIVE LAYOUT
========================== */

@media (max-width: 1200px) {

    body{

        overflow-x:hidden;

    }

    #mission-panel,
    #system-panel,
    #visitor-panel,
    #space-panel,
    #terminal,
    .character-container{

        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;

        margin:20px auto;

        width:min(95%, 600px);

    }

}

@media (max-width: 700px){

    #mission-panel,
    #system-panel,
    #visitor-panel,
    #space-panel,
    #terminal,
    .character-container{

        width:95%;

    }

}

/* ==========================
LOGIN SCREEN
========================== */

#login-screen{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.94);
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.login-box{
    width:380px;
    padding:35px;
    border:2px solid #b6f486;
    border-radius:20px;
    background:#08110c;
    text-align:center;
    box-shadow:0 0 40px rgba(182,244,134,.3);
}

.login-box h2{
    color:#b6f486;
    margin-bottom:10px;
}

.login-box p{
    color:#ccc;
    margin-bottom:25px;
}

.login-box input{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    margin-bottom:15px;
    background:#111;
    color:white;
    font-size:1rem;
}

#login-btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:#b6f486;
    color:#222;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
}

#login-btn:hover{
    transform:scale(1.03);
}

#login-status{
    margin-top:18px;
    color:#8cff65;
    min-height:24px;
}

/* ==========================
   COSMIC EVENTS
========================== */

#cosmic-event{
    position:fixed;
    left:50%;
    top:40px;
    transform:translateX(-50%) translateY(-150%);
    width:420px;
    max-width:90%;
    padding:18px;
    text-align:center;
    background:rgba(8,15,25,.95);
    border:2px solid #8cffc1;
    border-radius:18px;
    color:white;
    box-shadow:0 0 30px rgba(140,255,193,.35);
    transition:.5s;
    z-index:999999;
}

#cosmic-event.show{
    transform:translateX(-50%) translateY(0);
}

#event-text{
    margin-top:10px;
    color:#b6f486;
    font-family:monospace;
}

.screen-flash{
    animation:screenFlash .5s;
}

@keyframes screenFlash{

    0%{
        filter:brightness(1);
    }

    50%{
        filter:brightness(2) hue-rotate(90deg);
    }

    100%{
        filter:brightness(1);
    }

}

/* ==========================
   DAY / NIGHT COSMIC CYCLE
========================== */

#sky-overlay{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-5;
    background:
        radial-gradient(circle at 50% 20%,
        rgba(120,80,255,.12),
        transparent 60%);
    animation:cosmicCycle 120s linear infinite;
}

@keyframes cosmicCycle{

    0%{
        filter:hue-rotate(0deg) brightness(1);
        opacity:.25;
    }

    20%{
        filter:hue-rotate(40deg) brightness(1.1);
        opacity:.4;
    }

    40%{
        filter:hue-rotate(100deg) brightness(.9);
        opacity:.6;
    }

    60%{
        filter:hue-rotate(180deg) brightness(.75);
        opacity:.5;
    }

    80%{
        filter:hue-rotate(260deg) brightness(.9);
        opacity:.35;
    }

    100%{
        filter:hue-rotate(360deg) brightness(1);
        opacity:.25;
    }

}





























/* ==========================
   APP LAYOUT
========================== */

#app{
    display:flex;
    min-height:100vh;
}

/* Sidebar */

#sidebar{
    width:240px;
    background:rgba(10,15,30,.95);
    backdrop-filter:blur(12px);
    border-right:2px solid #32ffb4;
    padding:25px 15px;
    display:flex;
    flex-direction:column;
    gap:12px;
    position:sticky;
    top:0;
    height:100vh;
    z-index:500;
}

#sidebar h2{
    text-align:center;
    font-size:2rem;
    margin-bottom:20px;
}

.sidebar-btn{
    background:#18233f;
    color:white;
    border:2px solid #32ffb4;
    border-radius:14px;
    padding:14px;
    cursor:pointer;
    font-size:16px;
    transition:.25s;
    text-align:left;
}

.sidebar-btn:hover{
    background:#32ffb4;
    color:#000;
    transform:translateX(6px);
}

.sidebar-btn.active{
    background:#32ffb4;
    color:black;
    box-shadow:0 0 20px #32ffb4;
}

/* Main content */

#content{
    flex:1;
    padding:40px;
}

/* Pages */

.page{
    display:none;
    animation:fade .35s ease;
}

.page.active{
    display:block;
}

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

/* Mobile */

@media(max-width:900px){

    #app{
        flex-direction:column;
    }

    #sidebar{
        width:100%;
        height:auto;
        position:fixed;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }

    #mission-page{
        grid-template-columns:1fr;
    }

    #content{
        padding:20px;
    }
}

#app{
    display:flex;
    gap:25px;
    padding:80px 30px 30px;
    align-items:flex-start;
}

#sidebar{
    position: fixed;

    left: 20px;
    top: 50%;
    transform: translateY(-50%);

    width: 220px;

    background: #10121b;
    border: 2px solid #5af7ff;
    border-radius: 20px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    z-index: 9999;
    transition: transform .3s ease, opacity .3s ease;
}

#sidebar.hidden{
    transform: translate(-260px, -50%);
    opacity: 0;
}

.sidebar-btn{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#1b2030;
    color:white;
    cursor:pointer;
    transition:.25s;
    font-family:inherit;
}

.sidebar-btn:hover{
    background:#5af7ff;
    color:black;
}

.sidebar-btn.active{
    background:#5af7ff;
    color:black;
}
































/* CONTENT */

#content{
    margin-left:270px;
}
/* PAGES */

.page{
    display:none;
}

.page.active{
    display:block;
}

#toggle-sidebar{
    position:fixed;
    left:20px;
    top:calc(50% - 220px);

    width:50px;
    height:50px;

    border:none;
    border-radius:50%;

    background:#10121b;
    border:2px solid #5af7ff;

    font-size:26px;
    cursor:pointer;

    transition:transform .3s ease, box-shadow .3s ease;

    z-index:10000;
}

#toggle-sidebar:hover{
    transform:scale(1.1) rotate(10deg);
    box-shadow:0 0 20px #5af7ff;
}

.home-header{
    text-align:center;
    margin-bottom:35px;
}

.home-header h1{
    font-size:3rem;
    color:#fff;
    text-shadow:
        0 0 15px #5af7ff,
        0 0 35px rgba(90,247,255,.4);
}

.home-header p{
    margin-top:12px;
    color:#d8faff;
    font-size:1.05rem;
    opacity:.9;
}

.info-panel{

    margin-top:25px;
    padding:18px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(90,247,255,.2);

}

.info-row{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 0;

    color:#fff;

}

.info-row:not(:last-child){
    border-bottom:1px solid rgba(255,255,255,.08);
}

.about-list{
    margin-top:15px;
    padding-left:20px;
    color:white;
    line-height:1.8;
}

.about-list li{
    margin:8px 0;
}

.terminal-message h3{
    color:#b6f486;
    margin-bottom:12px;
    letter-spacing:1px;
}