/*=====================================================
    GZ COMMAND
    Version 3.0
    Ground Zero Airsoft
======================================================*/

/*=====================================================
    ROOT COLOURS
======================================================*/

:root{

    --bg:#07090c;
    --console:#11161d;
    --panel:#1a2028;

    --orange:#ff8c00;
    --orange2:#ffb347;

    --green:#42ff92;

    --text:#f2f2f2;
    --grey:#9aa5b1;

}

/*=====================================================
    RESET
======================================================*/

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{
    margin:0;
    padding:20px;
    background:#0b0f0b;
    color:#9dff9d;
    font-family:'Rajdhani',sans-serif;
}

/* TEAM COLOURS */

.team-others{

    color:#3498db;

}

.team-bravo{

    color:#ff9800;

}

.team-delta{

    color:#00cc66;

}

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

#boot-screen{

    position:fixed;

    inset:0;

    background:#050608;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:10vh;

    z-index:9999;

}

.team-others{

    color:#3aa0ff;

}

.team-bravo{

    color:#ff9800;

}

.team-delta{

    color:#00cc66;

}

/* centred boot panel */

.boot-panel{

    width:90%;

    max-width:600px;

    border:2px solid var(--orange);

    background:#10151b;

    padding:35px;

    box-shadow:

        0 0 25px rgba(255,140,0,.30),

        inset 0 0 25px rgba(255,140,0,.08);

}

/* logo */

.boot-logo{

    font-family:'Orbitron',sans-serif;

    font-size:42px;

    color:var(--orange);

    letter-spacing:4px;

    text-align:center;

    text-shadow:

        0 0 12px rgba(255,140,0,.45);

}

/* subtitle */

.boot-subtitle{

    margin-top:8px;

    text-align:center;

    color:var(--grey);

    letter-spacing:3px;

    font-size:14px;

}

/*=====================================================
    BOOT OUTPUT
======================================================*/

#boot-output{

    margin-top:35px;

    min-height:170px;

    font-size:18px;

    color:var(--green);

    line-height:1.8;

    font-family:'Courier New',monospace;

    text-shadow:0 0 8px rgba(66,255,146,.25);

}

/*=====================================================
    APPLICATION
======================================================*/

#app{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    min-height:100vh;

    padding:25px 15px;

}

/*=====================================================
    MAIN CONSOLE
======================================================*/

.console{
    position:relative;
    max-width:900px;
    margin:0 auto;
    background:#141a14;
    border:1px solid #355d35;
    border-radius:6px;
    padding:25px;
    box-shadow:
        0 0 20px rgba(0,255,0,.08),
        inset 0 0 12px rgba(0,255,0,.04);
}


/* scan line overlay */

.console::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        repeating-linear-gradient(

            transparent 0px,

            transparent 3px,

            rgba(255,255,255,.015) 4px

        );

}

/*=====================================================
    HEADER
======================================================*/

.title{

    font-family:'Orbitron',sans-serif;

    color:var(--orange);

    font-size:38px;

    letter-spacing:4px;

    text-shadow:

        0 0 10px rgba(255,140,0,.5);

}

.subtitle{

    margin-top:8px;

    color:var(--grey);

    letter-spacing:2px;

    font-size:15px;

}

.command-header{

    padding:28px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:30px;

}

.command-centre{

    flex:1;

    text-align:center;

}

.team-panel{

    width:110px;

    text-align:center;

}

.team-logo{

    width:90px;

    height:auto;

}

.team-name{

    display:block;

    margin:15px auto 0 auto;

    width:110px;

    padding:8px 14px;

    font-weight:700;

    font-size:16px;

    letter-spacing:2px;

    border-radius:4px;

}

.team-others .team-name{

    color:#3aa0ff;

    border:1px solid rgba(58,160,255,.4);

    background:#122038;

    box-shadow:
        0 0 10px rgba(58,160,255,.15);

}

.team-bravo .team-name{

    color:#ff9800;

    border:1px solid rgba(255,152,0,.4);

    background:#24170a;

    box-shadow:
        0 0 10px rgba(255,152,0,.15);

}

.team-delta .team-name{

    color:#a6d93b;

    border:1px solid rgba(166,217,59,.4);

    background:#16200c;

    box-shadow:
        0 0 10px rgba(166,217,59,.15);

}

.command-centre .status-left{

    margin:35px auto 0 auto;

    width:max-content;

}

/*=====================================================
    STATUS BAR
======================================================*/

.status-left{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--green);

    font-weight:700;

    border:1px solid rgba(66,255,146,.30);

    padding:8px 14px;

    background:#122017;

    box-shadow:

        0 0 10px rgba(66,255,146,.12);

}

.status-light{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--green);

    animation:pulse 1.4s infinite;

}

@keyframes pulse{

    0%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.3;

        transform:scale(1.5);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

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

.panel{
    background:#101510;
    border:1px solid #2d5d2d;
    border-radius:4px;
    padding:18px;
    margin-bottom:20px;
}

.panel:hover{

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 0 25px rgba(255,140,0,.25);

}


/*=====================================================
    PANEL HEADINGS
======================================================*/

.panel-heading{

    display:block;

    text-align:center;

    width:100%;

    padding:5px 14px;

    margin-bottom:18px;

    background:#2c343d;

    border:1px solid rgba(255,140,0,.35);

    color:var(--orange2);

    font-weight:700;

    letter-spacing:2px;

    font-size:18px;

    text-transform:uppercase;

}

/*=====================================================
    CURRENT ORDERS
======================================================*/

.objective-centre{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    width:100%;

}

.objective{

    text-align:center;

    font-size:40px;

    font-weight:700;

    line-height:1.1;

    margin-top:25px;

}

#brief{

    text-align: center;

}



.timer-title{

    color:var(--orange2);

    font-size:16px;

    font-weight:700;

    letter-spacing:3px;

}

.mission-timer{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-top:15px;

    margin-bottom:20px;

}

/*=====================================================
    TIMER
======================================================*/

#countdown{

    font-family:'Orbitron',sans-serif;

    font-size:1.8rem;

    font-weight:700;

    color:#ffbf47;

    letter-spacing:2px;

    white-space:nowrap;

}

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

details{

    margin-top:20px;

}

summary{

    font-size:1.2rem;

    letter-spacing:1px;

    margin-top:15px;

    display:block;

    width:100%;

    text-align:center;

    cursor:pointer;

    color:var(--orange2);

    font-weight:600;

    list-style:none;

}

summary::-webkit-details-marker{

    display:none;

}

details p{

    margin-top:15px;

    line-height:1.6;

    color:#b8c0ca;

}

/*=====================================================
    UPCOMING MISSIONS
======================================================*/

.upcoming{

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.10);

    text-align:center;

}

.upcoming-title{

    text-align:center;

    color:var(--orange2);

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.upcoming-item{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    padding:8px 0;

    color:#ddd;

}

.upcoming-time{

    color:var(--green);

    font-weight:700;

    min-width:60px;

    text-align:right;

}

.upcoming-objective{

    color:#ffffff;

    text-align:left;

}

.upcoming-objective{

    color:#fff;

}

.upcoming-duration{

    color:var(--green);

    font-size:0.9rem;

    font-weight:700;

}

/*=====================================================
    HQ MESSAGE
======================================================*/

.message{

    text-align: center;

    font-size:24px;

    line-height:1.5;

    color:#ffffff;

}

.message-time{

    text-align: center;

    margin-top:18px;

    color:#8d98a3;

    font-size:15px;

}

/*=====================================================
    REWARD
======================================================*/

.reward{

    margin-top:18px;

    font-size:30px;

    font-weight:700;

    color:var(--green);

    text-shadow:
        0 0 10px rgba(66,255,146,.30);

}

/*=====================================================
    LOG
======================================================*/

ul{

    list-style:none;

    text-align: center;

}

li{

    text-align:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:#c9d0d7;

}

li:last-child{

    border-bottom:none;

}

/* ==========================================
   NOTIFICATION
========================================== */

#notification{

    position:fixed;

    top:0;

    left:50%;

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

    width:420px;

    max-width:90%;

    background:#111;

    border:3px solid #ff9800;

    color:#fff;

    padding:20px;

    text-align:center;

    z-index:9999;

    transition:.5s;

    box-shadow:0 0 20px #ff9800;

}

#notification.show{

    transform:translate(-50%, 0);

    top:30px;

}

#notificationTitle{

    font-size:24px;

    font-weight:bold;

    color:#ff9800;

    margin-bottom:10px;

}

#notificationText{

    font-size:18px;

}