/* ==========================
   MISSIONS BACKGROUND
========================== */

html,
body{

    background:
        radial-gradient(circle at top,
        #24335f 0%,
        #111827 35%,
        #070b18 70%,
        #03050d 100%);

    background-attachment:fixed;
    color:white;

}

/* Green radar glow */

body::before{

    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 80% 25%,
        rgba(124,255,139,.10),
        transparent 45%),

        radial-gradient(circle at 20% 80%,
        rgba(182,244,134,.06),
        transparent 40%);

    z-index:-2;
}

/* Dark vignette */

body::after{

    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle,
        transparent 45%,
        rgba(0,0,0,.55) 100%);

    z-index:-1;
}

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

body::before{
    content:"";
    position:fixed;
    top:-180px;
    right:-180px;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
        radial-gradient(circle at 30% 30%,
        #8dd7ff,
        #4668a8 40%,
        #172742 70%,
        transparent 100%);

    opacity:.18;

    filter:blur(2px);

    pointer-events:none;
    z-index:-5;
}

body::after{
    content:"";
    position:fixed;
    bottom:-120px;
    left:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,
        #ffe08a,
        #a96d35 55%,
        #3a2510);

    opacity:.12;

    pointer-events:none;
    z-index:-5;
}

.star{
    position:fixed;
    width:2px;
    height:2px;
    background:#fff;
    border-radius:50%;
    opacity:.8;
    animation:twinkle 3s infinite ease-in-out;
    pointer-events:none;
    z-index:-3;
}

@keyframes twinkle{

    0%,100%{
        opacity:.2;
        transform:scale(1);
    }

    50%{
        opacity:1;
        transform:scale(1.8);
    }

}

#stars{
    opacity:.55;
    filter:brightness(1.3);
}

.shooting-star{

    position:fixed;

    top:-50px;
    left:-150px;

    width:160px;
    height:2px;

    background:linear-gradient(to right,#fff,transparent);

    transform:rotate(35deg);

    animation:shoot 8s linear infinite;

    opacity:.7;

    pointer-events:none;

}

@keyframes shoot{

    0%{
        transform:translate(-200px,-200px) rotate(35deg);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:translate(2200px,1200px) rotate(35deg);
        opacity:0;
    }

}

.space-particle{

    position:fixed;

    width:2px;
    height:2px;

    background:white;
    border-radius:50%;

    opacity:.7;

    box-shadow:
        0 0 4px white,
        0 0 10px rgba(255,255,255,.6);

    pointer-events:none;

    z-index:1;

    animation:floatDust 15s linear infinite;

}
@keyframes floatDust{

    from{
        transform:translateY(20px);
        opacity:0;
    }

    50%{
        opacity:.6;
    }

    to{
        transform:translateY(-120px);
        opacity:0;
    }

}

























/* ==========================
   FLOATING GRID
========================== */

#mission-page{

    position:relative;

    overflow:hidden;

}

#mission-page::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        repeating-linear-gradient(
            90deg,
            transparent 0 79px,
            rgba(182,244,134,.04) 80px
        ),

        repeating-linear-gradient(
            0deg,
            transparent 0 79px,
            rgba(182,244,134,.04) 80px
        );

    opacity:.35;

    pointer-events:none;

}

/* ==========================
   COMMAND CENTER LIGHTS
========================== */

#mission-page::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 15% 15%,
        rgba(0,255,170,.08),
        transparent 18%),

        radial-gradient(circle at 85% 20%,
        rgba(120,255,140,.08),
        transparent 18%),

        radial-gradient(circle at 50% 85%,
        rgba(100,200,255,.08),
        transparent 22%);

    animation:commandGlow 8s ease-in-out infinite;
}

@keyframes commandGlow{

    0%,100%{
        opacity:.45;
    }

    50%{
        opacity:.9;
    }

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,.015) 0px,
            rgba(255,255,255,.015) 2px,
            transparent 4px,
            transparent 6px
        );

    opacity:.35;

    animation:scanMove 8s linear infinite;

    z-index:999;
}

@keyframes scanMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(6px);
    }

}


/* ==========================
   COMMAND PANELS
========================== */

#system-panel,
#mission-panel,
#visitor-panel,
#space-panel,
#moon-phase-panel,
#terminal,
.mission-card{

    position:relative;

    background:rgba(12,18,35,.82);

    backdrop-filter:blur(14px);

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

    border-radius:18px;

    box-shadow:
        0 0 20px rgba(182,244,134,.12),
        inset 0 0 20px rgba(255,255,255,.03);

    overflow:hidden;

    transition:.3s ease;

}

#system-panel:hover,
#mission-panel:hover,
#visitor-panel:hover,
#space-panel:hover,
#moon-phase-panel:hover,
#terminal:hover,
.mission-card:hover{

    transform:translateY(-4px);

    border-color:#b6f486;

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

}

/* ==========================
   HOLOGRAM TOP BAR
========================== */

#system-panel::before,
#mission-panel::before,
#visitor-panel::before,
#space-panel::before,
#moon-phase-panel::before,
#terminal::before,
.mission-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        transparent,
        #b6f486,
        #7cff8b,
        transparent
    );

    animation:holoBar 4s linear infinite;

}

@keyframes holoBar{

    0%{
        transform:translateX(-100%);
    }

    100%{
        transform:translateX(100%);
    }

}

/* ==========================
   PANEL SHIMMER
========================== */

#system-panel::after,
#mission-panel::after,
#visitor-panel::after,
#space-panel::after,
#moon-phase-panel::after,
#terminal::after,
.mission-card::after{

    content:"";

    position:absolute;

    top:-150%;
    left:-60%;

    width:60%;
    height:400%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform:rotate(25deg);

    animation:panelShimmer 10s linear infinite;

    pointer-events:none;

}

@keyframes panelShimmer{

    0%{
        left:-70%;
    }

    100%{
        left:170%;
    }

}

/* ==========================
   PANEL TITLES
========================== */

.system-title,
.mission-title,
#terminal-title,
#space-panel h2,
#moon-phase-panel h2,
.database-title{

    color:#b6f486;

    letter-spacing:2px;

    text-transform:uppercase;

    text-shadow:0 0 10px rgba(182,244,134,.45);

}

/* ==========================
   FLOATING SPACE DUST
========================== */

#mission-page{

    position:relative;

    overflow:hidden;

}

#mission-page .space-particle{

    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#b6f486;

    box-shadow:0 0 10px #b6f486;

    opacity:.5;

    animation:floatParticle linear infinite;

}

@keyframes floatParticle{

    from{

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

    }

    20%{

        opacity:.7;

    }

    80%{

        opacity:.7;

    }

    to{

        transform:translateY(-800px);
        opacity:0;

    }

}

/* ==========================
   COMMAND GRID
========================== */

#mission-page::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.08;

    background:

        linear-gradient(
            rgba(182,244,134,.2) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(182,244,134,.2) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    animation:gridMove 20s linear infinite;

}

@keyframes gridMove{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(40px,40px);

    }

}

/* ==========================
   PANEL BOOT-UP
========================== */

.mission-card,
#system-panel,
#mission-panel,
#visitor-panel,
#space-panel,
#terminal,
#moon-phase-panel{

    animation:bootUp .8s ease both;

}

@keyframes bootUp{

    from{

        opacity:0;
        transform:translateY(20px) scale(.96);

    }

    to{

        opacity:1;
        transform:translateY(0) scale(1);

    }

}

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

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:9998;

    opacity:.05;

    background:repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(255,255,255,.12) 4px
    );

    animation:scanMove 8s linear infinite;

}

@keyframes scanMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(8px);

    }

}

/* ==========================
   PANEL HOVER
========================== */

#system-panel,
#mission-panel,
#visitor-panel,
#space-panel,
#terminal,
#moon-phase-panel,
.mission-card{

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

}

#system-panel:hover,
#mission-panel:hover,
#visitor-panel:hover,
#space-panel:hover,
#terminal:hover,
#moon-phase-panel:hover,
.mission-card:hover{

    transform:translateY(-4px);

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

}

/* ==========================
   LIVE TRANSMISSIONS
========================== */

#terminal-transmission{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid rgba(182,244,134,.25);
}

.terminal-header{
    color:#b6f486;
    font-weight:bold;
    margin-bottom:10px;
    letter-spacing:1px;
}

#transmission-log{
    color:#dfefff;
    font-family:monospace;
    min-height:70px;
    line-height:1.6;
    white-space:pre-line;
}

.transmission{
    opacity:0;
    animation:transmissionFade .6s forwards;
}

.secret-transmission{
    color:#ff7070;
    text-shadow:0 0 8px rgba(255,80,80,.5);
}

@keyframes transmissionFade{
    from{
        opacity:0;
        transform:translateY(6px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================
   SECRET FILE
========================== */

.hidden-file{
    opacity:.55;
    filter:grayscale(.5);
    transition:.35s;
}

.hidden-file.unlocked{
    opacity:1;
    filter:none;
}

.hidden-file.unlocked .mission-header{
    color:#7cff8b;
}

.hidden-file.unlocked .mission-status{
    background:rgba(124,255,139,.12);
    color:#7cff8b;
    border:1px solid #7cff8b;
}

.hidden-file.unlocked .mission-toggle{
    background:#7cff8b;
    color:#111;
    cursor:pointer;
}












/* ==========================
   MOON PHASE PANEL
========================== */

#moon-phase-panel{
    width:100%;
    max-width:350px;

    padding:20px;

    border-radius:18px;
    background:rgba(15,20,40,.85);
    border:2px solid #b6f486;

    color:white;

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

#moon-phase-panel h2{
    text-align:center;
    margin-bottom:15px;
    color:#b6f486;
}


/* ==========================
   MISSION PAGE
========================== */

#mission-page{
    width:100%;
    max-width:1300px;
    margin:0 auto;
    padding:40px 20px;
    display:flex;
    flex-direction:column;
    gap:40px;
}


/* ==========================
   MISSION DATABASE LAYOUT
========================== */

#mission-database{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    margin:60px auto;

    padding:0 20px;

}

.database-title{

    text-align:center;

    margin-bottom:35px;

}

.mission-grid{

    width:100%;

    max-width:750px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

}

.mission-card{
    width:100%;
    max-width:700px;

    padding:24px;
    margin:0 auto;

    background:rgba(15,20,40,.88);
    border:2px solid rgba(182,244,134,.25);
    border-radius:20px;

    color:white;

    box-shadow:0 0 18px rgba(182,244,134,.15);
    transition:.3s ease;

    box-sizing:border-box;
}

.mission-card:hover{

    transform:translateY(-5px);

    border-color:#b6f486;

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

}

.mission-header{

    font-size:1.4rem;

    color:#fff;

    margin-bottom:10px;

    font-weight:bold;

}

.mission-status{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    margin-bottom:20px;

    font-weight:bold;

}

.complete{

    background:rgba(100,255,150,.15);

    border:1px solid #7cff8b;

    color:#7cff8b;

}

.locked{

    background:rgba(255,70,70,.15);

    border:1px solid #ff7777;

    color:#ff7777;

}

.mission-toggle{

    width:100%;

    padding:12px;

    margin-bottom:20px;

    border:none;

    border-radius:12px;

    background:#b6f486;

    color:#111;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.mission-toggle:hover:not(:disabled){

    transform:translateY(-2px);

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

}

.mission-toggle:disabled{

    background:#444;

    color:#999;

    cursor:not-allowed;

}


/* ==========================
   MISSION ALERT
========================== */

#mission-alert{

    position:fixed;

    top:30px;
    right:-450px;

    display:flex;
    align-items:center;
    gap:14px;

    background:rgba(15,20,40,.95);

    border:2px solid #b6f486;

    color:white;

    padding:16px 22px;

    border-radius:16px;

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

    transition:right .6s ease;

    z-index:99999;

}

#mission-alert.show{

    right:30px;

}

#alert-icon{

    font-size:30px;

}

#alert-text{

    font-weight:bold;

    letter-spacing:1px;

}

/* ==========================
   MISSION PROGRESS
========================== */

.mission-progress{

    margin-top:20px;

}

.progress-label{

    color:#b6f486;

    margin-bottom:8px;

    font-size:.9rem;

}

.progress-bar{
    width:100%;
    height:14px;
    border-radius:20px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(182,244,134,.25);
    box-sizing:border-box;
}

.progress-fill{

    height:100%;

    background:linear-gradient(
        90deg,
        #6aff92,
        #b6f486
    );

    box-shadow:
        0 0 18px rgba(182,244,134,.45);

    transition:width .8s ease;

}

/* ==========================
   MISSION DETAILS
========================== */

.mission-details{
    margin-top:18px;
    border-top:1px solid rgba(182,244,134,.25);
    padding-top:15px;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    color:#ddd;
}

.detail-label{
    color:#b6f486;
    font-weight:bold;
}

.detail-value{
    color:white;
}



/* ==========================
   MISSION REWARDS
========================== */

.mission-rewards{
    margin-top:20px;
    border-top:1px solid rgba(182,244,134,.2);
    padding-top:18px;
}

.mission-rewards h4{
    color:#b6f486;
    margin-bottom:12px;
}

.reward-icons{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.reward{
    width:50px;
    height:50px;

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

    border-radius:50%;

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

    border:2px solid rgba(182,244,134,.3);

    font-size:1.4rem;

    transition:.25s ease;

    cursor:default;
}

.reward:hover{
    transform:translateY(-5px) scale(1.15);
    border-color:#b6f486;
    box-shadow:0 0 18px rgba(182,244,134,.5);
}

/* ==========================
   MISSION STAMP
========================== */

.mission-stamp{

    display:inline-block;

    margin:15px 0;

    padding:8px 18px;

    border:2px solid #7cff8b;

    color:#7cff8b;

    font-weight:bold;

    border-radius:10px;

    letter-spacing:2px;

    transform:rotate(-5deg);

    box-shadow:0 0 15px rgba(124,255,139,.35);

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

    animation:stampGlow 2s ease-in-out infinite;

}

@keyframes stampGlow{

    0%,100%{
        box-shadow:0 0 15px rgba(124,255,139,.35);
    }

    50%{
        box-shadow:0 0 28px rgba(124,255,139,.7);
    }

}

/* ==========================
   MISSION FILTERS
========================== */

#mission-filters{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    margin:25px 0;

}

.filter-btn{

    background:rgba(20,25,45,.9);

    color:#b6f486;

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

    padding:10px 18px;

    border-radius:999px;

    cursor:pointer;

    transition:.25s;

}

.filter-btn:hover{

    transform:translateY(-2px);

    border-color:#b6f486;

}

.active-filter{

    background:#b6f486;

    color:black;

}

/* ==========================
   COLLAPSIBLE MISSIONS
========================== */

.mission-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .5s ease;

     padding-top:18px;
    line-height:1.8;
}

.mission-content p{
    margin:0 0 16px;
}

.mission-card.open .mission-content{

    max-height:1200px;

}


.mission-toggle:hover{

    transform:translateY(-2px);

    box-shadow:0 0 15px rgba(182,244,134,.4);

}

/* ==========================
   MISSION CONTROL LAYOUT
========================== */

.mission-layout{
    display:grid;
    grid-template-columns:repeat(2, minmax(320px, 1fr));
    gap:25px;
    max-width:1200px;
    margin:0 auto 50px;
    align-items:start;
}

.left-column,
.right-column{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.left-column > *,
.right-column > *{
    width:100%;
}

@media (max-width:900px){
    .mission-layout{
        grid-template-columns:1fr;
    }
}




































/* ==========================
   LIVE RADAR
========================== */

.radar-box{

    display:flex;
    justify-content:center;
    margin:20px 0;

}

.radar{

    position:relative;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(0,255,120,.08),
        rgba(0,0,0,.9));

    border:2px solid rgba(182,244,134,.4);

    overflow:hidden;

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

}

.radar-ring{

    position:absolute;

    border-radius:50%;

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

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

}

.r1{
    width:70px;
    height:70px;
}

.r2{
    width:140px;
    height:140px;
}

.r3{
    width:210px;
    height:210px;
}

.radar-line{
    position:absolute;
    width:50%;
    height:2px;
    top:50%;
    left:50%;
    background:linear-gradient(
        to right,
        rgba(182,244,134,1),
        transparent
    );
    transform-origin:left center;
    animation:radarSweep 4s linear infinite;
}

@keyframes radarSweep{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.blip{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#7cff8b;

    box-shadow:
        0 0 12px #7cff8b;

    animation:blipFlash 2s infinite;

}

@keyframes blipFlash{

    0%,100%{

        opacity:.2;

    }

    50%{

        opacity:1;

        transform:scale(1.5);

    }

}



/* ==========================
   LAUNCH CONTROL
========================== */

#launch-panel{

    width:100%;

    max-width:900px;

    margin:50px auto;

    padding:25px;

    background:rgba(15,20,40,.9);

    border:2px solid #b6f486;

    border-radius:18px;

    text-align:center;

    color:white;

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

}

#launch-panel h2{

    color:#b6f486;

    margin-bottom:18px;

}

#launch-countdown{

    font-size:2.8rem;

    font-weight:bold;

    color:#7cff8b;

    text-shadow:0 0 18px rgba(124,255,139,.7);

}

#launch-status{

    margin-top:12px;

    color:#cfefff;

    letter-spacing:1px;

}



/* ==========================
   DECRYPT SCREEN
========================== */

.decrypt-screen{
    margin:20px 0;
      margin:20px 0 25px;
}

.decrypt-text{
    color:#7cff8b;
    font-weight:bold;
    margin-bottom:10px;
    letter-spacing:1px;
}

.decrypt-bar{
    height:14px;
    background:rgba(255,255,255,.08);
    border-radius:20px;
    overflow:hidden;
    margin-top:10px;
}

.decrypt-fill{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#6aff92,#b6f486);
    animation:decrypt 2.5s forwards;
}

@keyframes decrypt{
    from{width:0%;}
    to{width:100%;}
}

.hidden-log{
    display:none;
}

/* ==========================
   TYPEWRITER
========================== */

.typewriter p{
    width:0;
    overflow:hidden;
    white-space:nowrap;
    color:#dfefff;
    margin:14px 0;
    border-right:2px solid #7cff8b;
    animation:
        typing 2s steps(40, end) forwards,
        cursor .8s step-end infinite;
}

.typewriter p:nth-child(1){
    animation-delay:.5s;
}

.typewriter p:nth-child(2){
    animation-delay:3s;
}

.typewriter p:nth-child(3){
    animation-delay:5.5s;
}

.typewriter p:nth-child(4){
    animation-delay:8s;
}

.typewriter p:nth-child(5){
    animation-delay:10.5s;
}

@keyframes typing{
    from{
        width:0;
    }
    to{
        width:100%;
    }
}

@keyframes cursor{
    50%{
        border-color:transparent;
    }
}

/* ==========================
   MOON SECRET
========================== */

#moon-phase{
    cursor:pointer;
    transition:.25s;
}

#moon-phase:hover{
    color:#b6f486;
    text-shadow:0 0 10px #b6f486;
}

#moon-secret{

    margin-top:20px;
    padding:15px;

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

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

    color:#777;

    text-align:center;

    display:none;

    animation:secretReveal .6s ease;
}

#moon-secret.unlocked{
    display:block;
    color:#7cff8b;
    border-color:#7cff8b;
    box-shadow:0 0 18px rgba(124,255,139,.4);
}

@keyframes secretReveal{

    from{
        opacity:0;
        transform:scale(.95);
    }

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

}