/*=====================================================
    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;
    max-width:100%;
    overflow-x:hidden;

}

body{
    margin:0;
    padding:0;
    background:#0b0f0b;
    color:#9dff9d;
    font-family:'Rajdhani',sans-serif;
    max-width:100%;
    overflow-x:hidden;
}

/* TEAM COLOURS */

.team-others{

    color:#3498db;

}

.team-bravo{

    color:#ff9800;

}

.team-delta{

    color:#00cc66;

}

.hq-button{

    border-color:#3aa0ff;
    color:#3aa0ff;

}

.hq-button:hover{

    box-shadow:
        0 0 18px rgba(58,160,255,.3);

}

.task-button{

    border-color:#ff9800;
    color:#ff9800;

}

.task-button:hover{

    box-shadow:
        0 0 18px rgba(255,152,0,.3);

}

/*=====================================================
    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:34px;

    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;

}

/*=====================================================
    HEADER LAYOUT — top row (logos/title) + info row
    (HQ location left, show map right)
======================================================*/

.command-header{

    display:block;

}

.command-header-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:10px;

}

.header-info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:22px;

    padding-top:18px;

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

}

.hq-location{

    display:flex;

    align-items:baseline;

    gap:10px;

}

.hq-location-label{

    color:var(--orange2);

    font-weight:700;

    font-size:13px;

    letter-spacing:2px;

    white-space:nowrap;

}

.hq-location-value{

    font-weight:700;

    font-size:19px;

    color:#ffffff;

    letter-spacing:.5px;

}

.hq-location-value.empty{

    font-weight:400;

    font-style:italic;

    opacity:.5;

}

.header-map-btn{

    width:auto;

    display:inline-block;

    padding:10px 24px;

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

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    cursor:pointer;

    border-radius:4px;

    background:#2e7d32;

    border:1px solid #4caf50;

    color:#fff;

    transition:all .2s;

    white-space:nowrap;

}

.header-map-btn:hover{

    box-shadow:0 0 14px rgba(76,175,80,.4);

    transform:translateY(-1px);

}

/*=====================================================
    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;

}

/* Matches both the legacy single #brief id and the current per-objective
   #brief1 / #brief2 ids (one per OBJECTIVE box). */
#brief,
[id^="brief"]{

    text-align: center;

    margin-top: 15px;

    font-size: 23px;

    line-height: 1.6;

}



/* Fixed-width, right-aligned so the label text ("STANDING BY" vs
   "MISSION ENDS IN" vs "INTEL UPDATE IN") can change length without
   shifting the countdown / attending button that sit next to it. */
.timer-title{

    color:var(--orange2);

    font-size:16px;

    font-weight:700;

    letter-spacing:3px;

    display:inline-block;

    min-width:21ch;

    text-align:right;

}

.mission-timer{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}

/* Wraps the timer and the compact attending button together, so the
   button sits to the right of the timer as one centred group — and when
   attending is off/hidden, the timer alone still centres correctly. */
.mission-timer-row{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:15px;

    margin-bottom:20px;

}

/*=====================================================
    COMPACT ATTENDING — small button (+ optional badge or
    breakdown note) used next to the mission timer and the
    additional task text. Distinct from .attending-box,
    which stays full-width for the player marshal orders
    panel.
======================================================*/

.attending-compact{

    display:flex;

    align-items:center;

    gap:10px;

}

.attending-right{

    justify-content:flex-end;

    margin-top:10px;

    /* Shrink-wrap to content and push to the right — needed because this
       box isn't always a flex item of something else (unlike the copy
       next to the mission timer), so left to normal block flow it would
       otherwise stretch to the full panel width. */
    width:fit-content;

    margin-left:auto;

}

/* Player app — ADDITIONAL TASKS: pins the "I'M ON THIS" / "CONFIRMED"
   button to the top-right corner of the task-text box, instead of it
   sitting on its own row below/right of the text. .special-task-wrap
   is the positioning context; padding-top on it reserves room so the
   corner button never overlaps the (centered) task text. */
.special-task-wrap{

    position:relative;

    padding-top:42px;

}

.attending-corner{

    position:absolute;

    top:0;

    right:0;

    margin:0;

    width:auto;

}

.attending-note{

    font-size:13px;

    color:#9da5ad;

    white-space:nowrap;

}

.attending-btn-sm{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

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

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    cursor:pointer;

    border-radius:20px;

    transition:all .2s;

    border:1px solid #4caf50;

    background:#123018;

    color:#fff;

    white-space:nowrap;

}

.attending-btn-sm:hover{

    box-shadow:0 0 14px rgba(76,175,80,.3);

}

.attending-btn-sm.locked{

    cursor:default;

    border:1px solid #444;

    background:#1a1a1a;

    color:#888;

    box-shadow:none;

}

.attending-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:20px;

    height:20px;

    padding:0 6px;

    border-radius:10px;

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

    font-size:12px;

    font-weight:700;

}

.attending-btn-sm.locked .attending-badge{

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

}

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

/* Matches both the legacy single #countdown id and the current
   per-objective #countdown1 / #countdown2 ids. Fixed-width and
   tabular-nums so the digits themselves never change the box size
   as they tick over (which would otherwise shift the timer row). */
#countdown,
[id^="countdown"]{

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

    font-size:2.2rem;

    font-weight:700;

    color:#ffbf47;

    letter-spacing:2px;

    white-space:nowrap;

    display:inline-block;

    min-width:8ch;

    text-align:center;

    font-variant-numeric:tabular-nums;

}

/*=====================================================
    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;

}

/*=====================================================
    COMMANDER INPUTS
======================================================*/

textarea{

    width:100%;

    min-height:180px;

    padding:15px;

    margin-top:10px;
    margin-bottom:15px;

    background:#0b0f0b;

    border:1px solid #355d35;

    border-radius:6px;

    color:#9dff9d;

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

    font-size:18px;

    line-height:1.5;

    resize:vertical;

    box-shadow:
        inset 0 0 12px rgba(0,255,0,.05);

}

textarea:focus{

    outline:none;

    border-color:#42ff92;

    box-shadow:
        0 0 15px rgba(66,255,146,.25),
        inset 0 0 12px rgba(66,255,146,.10);

}

button{

    width:100%;

    padding:14px;

    margin-top:10px;

    background:#1f2b1f;

    border:1px solid #355d35;

    border-radius:6px;

    color:#42ff92;

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

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    transition:all .2s ease;

    box-shadow:
        0 0 12px rgba(0,255,0,.08);

}

button:hover{

    background:#2a3b2a;

    border-color:#42ff92;

    box-shadow:
        0 0 18px rgba(66,255,146,.25);

}

button:active{

    transform:scale(0.98);

}

/* ==========================================
   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;

}

/*=====================================================
    ADDITIONS — v35
======================================================*/

/* Big message text — matches objective style */

.big-message {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
}

/*=====================================================
    MESSAGE LOG (broadcast / special / hq history)
======================================================*/

.msg-log {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.msg-log-entry {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    opacity: 0.45;
}

.msg-log-entry:last-child {
    border-bottom: none;
}

/* Each older entry gets progressively more faded */
.msg-log-entry:nth-child(2) { opacity: 0.30; }
.msg-log-entry:nth-child(3) { opacity: 0.18; }

.msg-log-time {
    color: var(--orange2);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    min-width: 38px;
    padding-top: 2px;
}

.msg-log-text {
    font-size: 16px;
    color: #b0b8c1;
    line-height: 1.4;
}

/* Shown only on log entries that carry an attending figure (currently
   just the player marshal orders log) — sits at the end of the row. */
.msg-log-attending {
    font-size: 12px;
    color: #9da5ad;
    white-space: nowrap;
    margin-left: auto;
    padding-top: 2px;
}

/*=====================================================
    FOOTER — centred
======================================================*/

footer {
    text-align: center;
    padding: 20px 0 10px 0;
    color: var(--grey);
    font-size: 14px;
    letter-spacing: 2px;
}

/*=====================================================
    BOOT OUTPUT — centred
======================================================*/

#boot-output {
    text-align: center;
}

/*=====================================================
    TEAM COLOUR THEMING
    Apply to <body class="team-bravo"> etc.
    Overrides global green/orange defaults per team.
======================================================*/

/* ── BRAVO (orange) ── */
body.team-bravo {
    background: #0f0a04;
    color: #ffb347;
}
body.team-bravo .console {
    background: #1a1108;
    border-color: #7a4500;
    box-shadow: 0 0 20px rgba(255,140,0,.10), inset 0 0 12px rgba(255,140,0,.05);
}
body.team-bravo .console::after {
    background: repeating-linear-gradient(transparent 0px, transparent 3px, rgba(255,160,0,.015) 4px);
}
body.team-bravo .title {
    color: #ff8c00;
    text-shadow: 0 0 10px rgba(255,140,0,.5);
}
body.team-bravo .panel {
    background: #1a1108;
    border-color: #7a4500;
}
body.team-bravo .panel:hover {
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 25px rgba(255,140,0,.3);
}
body.team-bravo .panel-heading {
    background: #2c1e08;
    border-color: rgba(255,140,0,.4);
    color: #ffb347;
}
body.team-bravo .status-left {
    color: #ff9800;
    border-color: rgba(255,152,0,.35);
    background: #201208;
    box-shadow: 0 0 10px rgba(255,152,0,.15);
}
body.team-bravo .status-light { background: #ff9800; }
body.team-bravo #countdown,
body.team-bravo [id^="countdown"] { color: #ff9800; }
body.team-bravo .timer-title { color: #ffb347; }
body.team-bravo .upcoming-title { color: #ffb347; }
body.team-bravo .upcoming-time { color: #ff9800; }
body.team-bravo .objective { color: #ffffff; }
body.team-bravo summary { color: #ffb347; }
body.team-bravo .msg-log-time { color: #ffb347; }
body.team-bravo button { color: #ff9800; border-color: #7a4500; background: #1a1108; }
body.team-bravo button:hover { border-color: #ff9800; box-shadow: 0 0 18px rgba(255,152,0,.25); }
body.team-bravo textarea { background: #120c04; border-color: #7a4500; color: #ffb347; }
body.team-bravo textarea:focus { border-color: #ff9800; box-shadow: 0 0 15px rgba(255,152,0,.25), inset 0 0 12px rgba(255,152,0,.10); }
body.team-bravo details p { color: #c8a870; }
body.team-bravo li { color: #c8a870; }

/* ── OTHERS (blue) ── */
body.team-others {
    background: #04080f;
    color: #7ec8ff;
}
body.team-others .console {
    background: #0a1220;
    border-color: #1a4a80;
    box-shadow: 0 0 20px rgba(58,160,255,.08), inset 0 0 12px rgba(58,160,255,.04);
}
body.team-others .console::after {
    background: repeating-linear-gradient(transparent 0px, transparent 3px, rgba(58,160,255,.015) 4px);
}
body.team-others .title {
    color: #3aa0ff;
    text-shadow: 0 0 10px rgba(58,160,255,.5);
}
body.team-others .panel {
    background: #080e18;
    border-color: #1a4a80;
}
body.team-others .panel:hover {
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 25px rgba(58,160,255,.25);
}
body.team-others .panel-heading {
    background: #0c1e38;
    border-color: rgba(58,160,255,.4);
    color: #7ec8ff;
}
body.team-others .status-left {
    color: #3aa0ff;
    border-color: rgba(58,160,255,.35);
    background: #081428;
    box-shadow: 0 0 10px rgba(58,160,255,.12);
}
body.team-others .status-light { background: #3aa0ff; }
body.team-others #countdown,
body.team-others [id^="countdown"] { color: #3aa0ff; }
body.team-others .timer-title { color: #7ec8ff; }
body.team-others .upcoming-title { color: #7ec8ff; }
body.team-others .upcoming-time { color: #3aa0ff; }
body.team-others .objective { color: #ffffff; }
body.team-others summary { color: #7ec8ff; }
body.team-others .msg-log-time { color: #7ec8ff; }
body.team-others button { color: #3aa0ff; border-color: #1a4a80; background: #080e18; }
body.team-others button:hover { border-color: #3aa0ff; box-shadow: 0 0 18px rgba(58,160,255,.25); }
body.team-others textarea { background: #050c18; border-color: #1a4a80; color: #7ec8ff; }
body.team-others textarea:focus { border-color: #3aa0ff; box-shadow: 0 0 15px rgba(58,160,255,.25), inset 0 0 12px rgba(58,160,255,.10); }
body.team-others details p { color: #7090b0; }
body.team-others li { color: #7090b0; }

/* ── DELTA (green) — full theme to match Bravo/Others ── */
body.team-delta {
    background: #040f08;
    color: #9dff9d;
}
body.team-delta .console {
    background: #0a1a0a;
    border-color: #1a5a1a;
    box-shadow: 0 0 20px rgba(66,255,146,.08), inset 0 0 12px rgba(66,255,146,.04);
}
body.team-delta .console::after {
    background: repeating-linear-gradient(transparent 0px, transparent 3px, rgba(66,255,146,.015) 4px);
}
body.team-delta .title {
    color: #42ff92;
    text-shadow: 0 0 10px rgba(66,255,146,.5);
}
body.team-delta .panel {
    background: #080f08;
    border-color: #1a5a1a;
}
body.team-delta .panel:hover {
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 25px rgba(66,255,146,.2);
}
body.team-delta .panel-heading {
    background: #0c200c;
    border-color: rgba(66,255,146,.4);
    color: #42ff92;
}
body.team-delta .status-left {
    color: #42ff92;
    border-color: rgba(66,255,146,.35);
    background: #081408;
    box-shadow: 0 0 10px rgba(66,255,146,.12);
}
body.team-delta .status-light { background: #42ff92; }
body.team-delta #countdown,
body.team-delta [id^="countdown"] { color: #42ff92; }
body.team-delta .timer-title { color: #42ff92; }
body.team-delta .upcoming-title { color: #42ff92; }
body.team-delta .upcoming-time { color: #42ff92; }
body.team-delta .objective { color: #ffffff; }
body.team-delta summary { color: #42ff92; }
body.team-delta .msg-log-time { color: #42ff92; }
body.team-delta button { color: #42ff92; border-color: #1a5a1a; background: #080f08; }
body.team-delta button:hover { border-color: #42ff92; box-shadow: 0 0 18px rgba(66,255,146,.25); }
body.team-delta textarea { background: #050c05; border-color: #1a5a1a; color: #9dff9d; }
body.team-delta textarea:focus { border-color: #42ff92; box-shadow: 0 0 15px rgba(66,255,146,.25), inset 0 0 12px rgba(66,255,146,.10); }
body.team-delta details p { color: #70a870; }
body.team-delta li { color: #70a870; }

/*=====================================================
    MAP OVERLAY
======================================================*/

.map-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: all .2s;
}

/*=====================================================
    ATTENDING — button on player/marshal apps, read-only
    count display on command. Anonymous, per-mission lock.
======================================================*/

.attending-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.attending-count {
    font-size: 14px;
    color: #9da5ad;
    letter-spacing: .5px;
}

.attending-count strong {
    color: #fff;
}

.attending-btn {
    display: block;
    width: 100%;
    padding: 14px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: all .2s;
    border: 1px solid #4caf50;
    background: #123018;
    color: #fff;
}

.attending-btn:hover {
    box-shadow: 0 0 18px rgba(76,175,80,.3);
}

.attending-btn.locked {
    cursor: default;
    border: 1px solid #444;
    background: #1a1a1a;
    color: #888;
    box-shadow: none;
}

.attending-btn.locked:hover {
    box-shadow: none;
}

/*=====================================================
    BROADCAST PRIORITY — warning "!" / critical "!!" mark
    and a persistent highlighted border while critical
======================================================*/

.priority-mark {
    font-weight: 900;
}

.priority-mark.warn {
    color: #ffb347;
}

.priority-mark.critical {
    color: #ff3b3b;
}

.panel.priority-critical {
    border-color: #ff3b3b;
    box-shadow: 0 0 20px rgba(255,59,59,.35);
}

/*=====================================================
    CRITICAL ALERT OVERLAY — blocks the screen until
    the player taps ACKNOWLEDGE
======================================================*/

#criticalOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(30,0,0,.92);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

#criticalOverlay.active {
    display: flex;
}

.critical-alert-box {
    width: 100%;
    max-width: 520px;
    background: #1a0505;
    border: 3px solid #ff3b3b;
    border-radius: 6px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 0 40px rgba(255,59,59,.5), inset 0 0 20px rgba(255,59,59,.10);
    animation: criticalPulse 1.2s infinite;
}

@keyframes criticalPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(255,59,59,.5),  inset 0 0 20px rgba(255,59,59,.10); }
    50%      { box-shadow: 0 0 60px rgba(255,59,59,.8),  inset 0 0 30px rgba(255,59,59,.20); }
}

.critical-alert-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff3b3b;
    margin-bottom: 18px;
}

.critical-alert-text {
    font-size: 20px;
    line-height: 1.5;
    color: #ffffff;
    margin-bottom: 24px;
    white-space: pre-wrap;
}

#criticalAckBtn {
    width: auto;
    display: inline-block;
    padding: 12px 36px;
    background: #ff3b3b;
    border: 1px solid #ff6b6b;
    color: #111111;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
}

#criticalAckBtn:hover {
    box-shadow: 0 0 16px rgba(255,59,59,.6);
    transform: translateY(-1px);
}

#mapOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.95);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

#mapOverlay.active {
    display: flex;
}

#mapOverlay img {
    max-width: 98vw;
    max-height: 88vh;
    object-fit: contain;
    border: 2px solid rgba(255,255,255,.2);
    transition: transform .2s;
}

/* Force the map image to display in landscape orientation
   whenever the device/browser is in portrait mode, by rotating
   it 90deg and swapping the width/height constraints to match. */
@media (orientation: portrait) {
    #mapOverlay img {
        transform: rotate(-90deg);
        max-width: 88vh;
        max-height: 92vw;
    }
}

#mapCloseBtn {
    margin-top: 16px;
    padding: 10px 30px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    background: transparent;
    border: 2px solid rgba(255,255,255,.4);
    color: #fff;
    border-radius: 4px;
    transition: all .2s;
}

#mapCloseBtn:hover {
    background: rgba(255,255,255,.1);
    border-color: #fff;
}

/* Team coloured map button */
body.team-bravo  .map-btn { color: #ff9800; border: 1px solid #7a4500; background: #1a1108; }
body.team-bravo  .map-btn:hover { border-color: #ff9800; box-shadow: 0 0 18px rgba(255,152,0,.25); }
body.team-others .map-btn { color: #3aa0ff; border: 1px solid #1a4a80; background: #080e18; }
body.team-others .map-btn:hover { border-color: #3aa0ff; box-shadow: 0 0 18px rgba(58,160,255,.25); }
body.team-delta  .map-btn { color: #42ff92; border: 1px solid #1a5a1a; background: #080f08; }
body.team-delta  .map-btn:hover { border-color: #42ff92; box-shadow: 0 0 18px rgba(66,255,146,.25); }

/*=====================================================
    SHOW ALL MISSIONS BUTTON + PANEL
======================================================*/

.missions-panel {
    margin-top: 16px;
    padding: 14px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    display: none;
}

.missions-panel.active { display: block; }

.missions-panel-title {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity: .7;
}

.missions-panel .upcoming-item {
    padding: 6px 0;
}

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

@media (max-width: 600px) {

    body {
        padding: 2px;
    }

    #app {
        padding: 4px 2px;
    }

    .console {
        padding: 8px 6px;
        border-radius: 4px;
    }

    .command-header {
        padding: 8px 4px;
        margin-bottom: 12px;
        gap: 2px;
    }

    .team-panel {
        width: 70px;
    }

    .team-logo {
        width: 55px;
    }

    .team-name {
        width: 70px;
        font-size: 12px;
        padding: 5px 4px;
        letter-spacing: 1px;
    }

    .title {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .subtitle {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .command-centre .status-left {
        margin-top: 16px;
        font-size: 12px;
        padding: 6px 10px;
    }

    .command-header-top {
        gap: 4px;
    }

    .header-info-row {
        margin-top: 12px;
        padding-top: 10px;
        gap: 8px;
    }

    .hq-location-label {
        font-size: 11px;
    }

    .hq-location-value {
        font-size: 14px;
    }

    .header-map-btn {
        padding: 8px 14px;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .panel {
        padding: 12px 10px;
        margin-bottom: 12px;
    }

    .panel-heading {
        font-size: 14px;
        letter-spacing: 1px;
        padding: 5px 8px;
    }

    .objective {
        font-size: 26px;
        margin-top: 14px;
    }

    .big-message {
        font-size: 22px;
    }

    #countdown,
    [id^="countdown"] {
        font-size: 1.6rem;
    }

    .timer-title {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .mission-timer {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .boot-panel {
        padding: 20px 16px;
    }

    .boot-logo {
        font-size: 28px;
        letter-spacing: 2px;
    }

    #boot-output {
        font-size: 14px;
        margin-top: 20px;
        min-height: 120px;
    }

    .upcoming-item {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .message {
        font-size: 18px;
    }

    footer {
        font-size: 11px;
        letter-spacing: 1px;
        padding: 12px 0 6px 0;
    }

    #notification {
        width: 92%;
        padding: 14px;
    }

    #notificationTitle {
        font-size: 18px;
    }

    #notificationText {
        font-size: 15px;
    }

    #mapOverlay img {
        max-width: 100vw;
        max-height: 80vh;
    }

    .critical-alert-box {
        padding: 20px;
    }

    .critical-alert-title {
        font-size: 17px;
    }

    .critical-alert-text {
        font-size: 16px;
    }

    #criticalAckBtn {
        padding: 10px 24px;
        font-size: 12px;
    }

}

@media (max-width: 600px) and (orientation: portrait) {

    #mapOverlay img {
        transform: rotate(-90deg);
        max-width: 80vh;
        max-height: 96vw;
    }

}

/*=====================================================
    TEXT CLARITY — white inside panels, colour on headers
======================================================*/

/* Panel body text always white regardless of team */
.message,
.objective,
.upcoming-objective,
details p,
#brief,
[id^="brief"],
li,
.msg-log-text,
.missions-panel .upcoming-objective {
    color: #ffffff !important;
}

/* Countdown always white */
#countdown,
[id^="countdown"] {
    color: #ffffff !important;
}

/* Brief text slightly off-white for readability */
#brief,
[id^="brief"] {
    color: #e8e8e8 !important;
}

/* Log entry text white */
.msg-log-text {
    color: #ffffff !important;
}

/* HQ Link Active text white */
.status-left {
    color: #ffffff !important;
}

body.team-bravo .status-left    { color: #ffffff !important; }
body.team-others .status-left   { color: #ffffff !important; }
body.team-delta .status-left    { color: #ffffff !important; }

/* Activity list items white */
li {
    color: #e0e0e0 !important;
}


/*=====================================================
    GLOBAL WHITE TEXT — all content text
======================================================*/

/* Everything from the console down */
.console,
.console *:not(.panel-heading):not(.title):not(.subtitle):not(.status-left):not(.status-light):not(.team-name):not(.upcoming-time):not(.msg-log-time):not(.timer-title):not(#countdown):not([id^="countdown"]):not(.hq-location):not(.hq-location-label):not(#hqLocation) {
    color: #ffffff;
}

/* Header text 1pt larger than current */
.command-header .title {
    font-size: 39px;
}

.command-header .subtitle {
    font-size: 16px;
}

/* Keep team-coloured elements their colour */
.panel-heading   { color: var(--orange2); }
.timer-title     { color: var(--orange2); }
.upcoming-time   { color: var(--green); }
.msg-log-time    { color: var(--orange2); }
.status-left     { color: var(--green); }

body.team-bravo .panel-heading  { color: #ffb347; }
body.team-bravo .timer-title    { color: #ffb347; }
body.team-bravo .msg-log-time   { color: #ffb347; }
body.team-bravo .status-left    { color: #ff9800; }
body.team-bravo .upcoming-time  { color: #ff9800; }

body.team-others .panel-heading { color: #7ec8ff; }
body.team-others .timer-title   { color: #7ec8ff; }
body.team-others .msg-log-time  { color: #7ec8ff; }
body.team-others .status-left   { color: #3aa0ff; }
body.team-others .upcoming-time { color: #3aa0ff; }

body.team-delta .panel-heading  { color: #42ff92; }
body.team-delta .timer-title    { color: #42ff92; }
body.team-delta .msg-log-time   { color: #42ff92; }
body.team-delta .status-left    { color: #42ff92; }
body.team-delta .upcoming-time  { color: #42ff92; }

/* Countdown white for all teams */
#countdown,
[id^="countdown"] { color: #ffffff !important; }