/* --- GLOBAL WAR ROOM THEME --- */
body, html {
    margin: 0;
    padding: 0;
    background-color: #000 !important;
    font-family: 'Courier New', monospace;
    overflow-x: hidden;
    color: #e0e0e0;
}

/* --- MOVING STARFIELD BACKGROUND --- */
.starfield-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 url('https://www.transparenttextures.com/patterns/stardust.png');
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
    animation: driftStars 100s linear infinite;
}

@keyframes driftStars {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -1000px 500px;
    }
}

/* --- NAVIGATION STYLES --- */
.nav-base:hover {
    color: #ff0000 !important;
    text-shadow: 0 0 20px #ff0000;
}

.nav-council:hover {
    color: #ffffff !important;
    text-shadow: 0 0 20px #ffffff;
}

.nav-warroom:hover {
    color: #00ffff !important;
    text-shadow: 0 0 20px #00ffff;
}

.nav-intel:hover {
    color: #0044ff !important;
    text-shadow: 0 0 20px #0044ff;
}

.nav-gear:hover {
    color: #00ff00 !important;
    text-shadow: 0 0 20px #00ff00;
}

/* --- WIDE 3-COLUMN LAYOUT (DESKTOP) --- */
.war-room-grid {
    display: grid;
    /* Fixed Left | Flexible Center | Fixed Right */
    grid-template-columns: 300px 1fr 350px;
    gap: 30px;
    width: 98%;
    max-width: 2200px;
    margin: 20px auto;
    position: relative;
    z-index: 10;
    height: calc(100vh - 100px);
 /* Locks desktop to screen */
    overflow: hidden;
 /* Prevents desktop scroll bar */
}

/* --- PANELS --- */
.tactical-panel {
    background: rgba(0, 10, 0, 0.85);
    border: 1px solid #333;
    padding: 20px;
    height: 100%;
 /* Fills column */
    overflow-y: auto;
 /* Internal scrolling for panels */
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}

/* --- LEFT: SIREN --- */
.siren-frame {
    border: 2px solid #333;
    background: #050505;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.red-alert-light {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #550000 0%, #000 100%);
    border-radius: 50%;
    margin: 0 auto 15px auto;
    border: 2px solid #333;
    transition: 0.3s;
    box-shadow: 0 0 10px #330000;
}

.alert-active .red-alert-light {
    background: radial-gradient(circle, #ff0000 0%, #550000 100%);
    box-shadow: 0 0 80px #ff0000;
    animation: strobeFlash 0.5s infinite alternate;
}

@keyframes strobeFlash {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 1;
        box-shadow: 0 0 120px #ff0000;
    }
}

/* --- CENTER: NASA & TOOLS --- */
.nasa-container {
    height: 60%;
 /* Occupies top 60% of center */
    width: 100%;
    border: 2px solid #00FFFF;
    background: #000;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.1);
}

.dual-tools {
    display: flex;
    gap: 20px;
    height: 35%;
 /* Occupies bottom 35% */
}

.tool-frame {
    flex: 1;
    border: 1px solid #444;
    background: #000;
    position: relative;
}

/* --- RIGHT: LESSON CARDS --- */
.curriculum-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lesson-card {
    background: rgba(255, 255, 255, 0.05);
    border-left: 5px solid #333;
    padding: 15px;
    transition: 0.3s;
    cursor: pointer;
}

.lesson-card:hover {
    background: rgba(0, 255, 255, 0.15);
    border-left: 5px solid #00FFFF;
    transform: translateX(-10px);
}

.border-red {
    border-left-color: #ff0000 !important;
}

.border-teal {
    border-left-color: #00FFFF !important;
}

.border-white {
    border-left-color: #fff !important;
}

.border-green {
    border-left-color: #00ff00 !important;
}

.lesson-num {
    font-size: 2rem;
    font-weight: bold;
    opacity: 0.15;
    float: right;
}

.lesson-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 5px;
    font-family: 'Black Ops One';
}

.lesson-desc {
    font-size: 0.8rem;
    color: #aaa;
}

/* --- LOCKED CARDS --- */
.lesson-card.locked {
    opacity: 0.4;
    border-left: 4px solid #555;
    background: rgba(0,0,0,0.5);
    cursor: not-allowed;
    filter: grayscale(100%);
}

.lock-icon {
    float: right;
    font-size: 1.2rem;
    color: #555;
}

/* --- MODAL --- */
.lesson-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-active {
    display: flex !important;
}

.lesson-file-window {
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    background: #050505;
    border: 2px solid #00FFFF;
    box-shadow: 0 0 100px rgba(0, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.window-active {
    transform: scale(1);
}

.file-header {
    background: #002222;
    padding: 20px;
    border-bottom: 1px solid #00FFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-title {
    font-family: 'Black Ops One';
    color: #00FFFF;
    font-size: 1.8rem;
}

.close-btn {
    background: #330000;
    border: 1px solid #ff0000;
    color: #ff0000;
    padding: 10px 30px;
    cursor: pointer;
    font-weight: bold;
}

.download-bar {
    padding: 15px;
    background: #111;
    border-top: 1px solid #333;
    text-align: right;
}

.dl-btn {
    background: #00FFFF;
    color: #000;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    font-family: 'Black Ops One';
}

.hidden-data {
    display: none !important;
}

/* --- WORMHOLE --- */
#wormhole-transport {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tunnel-effect {
    width: 200vw;
    height: 200vh;
    background: repeating-radial-gradient(circle, #00ff00 0%, transparent 10%, #000 20%);
    background-size: 100% 100%;
    animation: warpSpeed 0.8s ease-in forwards;
}

@keyframes warpSpeed {
    0% {
        transform: scale(0.1) rotate(0deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(5) rotate(720deg);
        opacity: 0;
    }
}

/* --- LEADERBOARD --- */
.leader-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dashed #333;
    font-size: 0.8rem;
}

.rank-num {
    color: #00FFFF;
    font-weight: bold;
    width: 20px;
}

.op-name {
    color: #aaa;
}

.op-score {
    color: #00ff00;
}

/* --- MOBILE & TABLET FIX (CRITICAL) --- */
/* Trigger stacking sooner to prevent cutting off on tablets/laptops */
@media only screen and (max-width: 1200px) {
    .war-room-grid {
        display: flex;
        flex-direction: column;
 /* Stacks everything vertically */
        height: auto !important;
 /* Allows scrolling */
        overflow-y: auto !important;
 /* Forces scroll bar */
        padding-bottom: 100px;
    }

    .nasa-container {
        height: 400px !important;
 /* Specific height for mobile map */
        margin-bottom: 20px;
    }

    .dual-tools {
        flex-direction: column;
        height: auto !important;
    }

    .tool-frame {
        height: 400px !important;
 /* Specific height for chat/whiteboard */
        margin-bottom: 20px;
    }

    .tactical-panel {
        height: auto !important;
        overflow: visible;
        margin-bottom: 20px;
    }

    .lesson-card:hover {
        transform: none;
 /* Disables shifting on phone touch */
    }
}


<div class="starfield-bg"></div>

<div style="text-align: center; padding: 25px; background: rgba(0,0,0,0.8); border-bottom: 1px solid #333; position: relative; z-index: 20;">
    <a href="/" class="nav-base" style="color:#ff0000; font-family: 'Black Ops One'; text-decoration: none; margin: 0 15px;">BASE</a>
    <span style="color:#333;">|</span>
    <a href="/elders-council" class="nav-council" style="color:#aaa; font-family: 'Black Ops One'; text-decoration: none; margin: 0 15px;">COUNCIL</a>
    <span style="color:#333;">|</span>
    <a href="/war-room" class="nav-warroom" style="color:#00FFFF; text-shadow: 0 0 15px #00FFFF; font-family: 'Black Ops One'; text-decoration: none; margin: 0 15px;">WAR ROOM</a>
    <span style="color:#333;">|</span>
    <a href="/intel" class="nav-intel" style="color:#aaa; font-family: 'Black Ops One'; text-decoration: none; margin: 0 15px;">INTEL</a>
    <span style="color:#333;">|</span>
    <a href="javascript:void(0)" onclick="teleportToGear()" class="nav-gear" style="color:#00ff00; font-family: 'Black Ops One'; text-decoration: none; margin: 0 15px;">GEAR</a>
</div>

<div class="war-room-grid">

    <div class="tactical-panel">
        
        <div class="siren-frame" id="siren-module">
            <div class="red-alert-light"></div>
            <h3 style="color: #fff; margin: 10px 0;">DEFCON SYSTEM</h3>
            <div style="font-size: 0.8rem; color: #666; margin-bottom: 15px;">STATUS: STANDBY</div>
            <button onclick="triggerAlert()" style="background: transparent; border: 2px solid #ff0000; color: #ff0000; cursor: pointer; padding: 10px 20px; font-size: 0.9rem; font-weight:bold;">
                ⚠️ INITIATE ALARM
            </button>
        </div>

        <h3 style="color: #00FFFF; border-bottom: 1px solid #333; padding-bottom: 10px; margin-top:30px;">STUDY ARSENAL</h3>
        <a href="https://www.blueletterbible.org/" target="_blank" class="lesson-card" style="display:block; text-decoration:none; margin-bottom:10px;">
            <div class="lesson-title" style="color:#aaa;">[ BLUE LETTER BIBLE ]</div>
        </a>
        <a href="https://biblehub.com/strongs.htm" target="_blank" class="lesson-card" style="display:block; text-decoration:none; margin-bottom:10px;">
            <div class="lesson-title" style="color:#aaa;">[ STRONG'S CONCORDANCE ]</div>
        </a>
        <a href="https://www.etymonline.com/" target="_blank" class="lesson-card" style="display:block; text-decoration:none; margin-bottom:10px;">
            <div class="lesson-title" style="color:#aaa;">[ ETYMOLOGY DICT. ]</div>
        </a>
        <a href="https://www.merriam-webster.com/" target="_blank" class="lesson-card" style="display:block; text-decoration:none; margin-bottom:10px;">
            <div class="lesson-title" style="color:#aaa;">[ LEXICON / THESAURUS ]</div>
        </a>

        <h3 style="color: #00ff00; border-bottom: 1px solid #333; padding-bottom: 10px; margin-top:30px;">TOP OPERATIVES</h3>
        <div style="background:#000; padding:10px;">
            <div class="leader-row"><span class="rank-num">01</span><span class="op-name">GRAY</span><span class="op-score">99%</span></div>
            <div class="leader-row"><span class="rank-num">02</span><span class="op-name">COMMANDER X</span><span class="op-score">85%</span></div>
            <div class="leader-row"><span class="rank-num">03</span><span class="op-name">MRLIVE305</span><span class="op-score">72%</span></div>
            <div class="leader-row"><span class="rank-num">04</span><span class="op-name">GHOST_UNIT</span><span class="op-score">60%</span></div>
            <div class="leader-row"><span class="rank-num">05</span><span class="op-name">RECRUIT_01</span><span class="op-score">12%</span></div>
        </div>

    </div>

    <div>
        <div class="nasa-container">
            <div style="position: absolute; top: 0; left: 0; background: #00FFFF; color: #000; padding: 5px 15px; font-weight: bold; z-index: 5;">
                SOLAR SYSTEM TELEMETRY
            </div>
            <iframe src="https://eyes.nasa.gov/apps/solar-system/#/home?interactPrompt=false" width="100%" height="100%" frameborder="0"></iframe>
        </div>

        <div class="dual-tools">
            <div class="tool-frame" style="border-color: #00FFFF;">
                <div style="background:#003333; color:#fff; padding:5px; text-align:center;">SECURE UPLINK</div>
                <iframe src="https://meet.jit.si/Apex-War-Room-Class" allow="camera; microphone; fullscreen" style="width: 100%; height: 95%; border: 0;"></iframe>
            </div>
            <div class="tool-frame" style="border-color: #fff;">
                <div style="background:#222; color:#fff; padding:5px; text-align:center;">STRATEGY BOARD</div>
                <iframe src="https://miro.com/app/live-embed/uXjVGERe-2E=/" width="100%" height="95%" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <div class="tactical-panel">
        
        <h3 style="color: #00ff00; border-bottom: 1px solid #333; padding-bottom: 10px;">CURRICULUM 1 (ACTIVE)</h3>
        
        <div class="curriculum-list">
            
            <div class="lesson-card border-red" style="cursor: pointer;" onclick="window.location.href='/letter-j-evidence'">
                <span class="lesson-num">01</span>
                <div class="lesson-title" style="color: #ff0000;">THE LETTER "J" (1524)</div>
                <div class="lesson-desc">Tracing the name of God before the invention of "J".</div>
            </div>

            <div class="lesson-card border-teal" onclick="openLesson('lesson-2')">
                <span class="lesson-num">02</span>
                <div class="lesson-title" style="color: #00FFFF;">DECODING HA-MASHIACH</div>
                <div class="lesson-desc">Breaking down the title to the fullest.</div>
            </div>

            <div class="lesson-card border-white" onclick="openLesson('lesson-3')">
                <span class="lesson-num">03</span>
                <div class="lesson-title" style="color: #fff;">REV 21:1 (NEW EARTH)</div>
                <div class="lesson-desc">The passing of the first earth.</div>
            </div>

            <div class="lesson-card border-red" onclick="openLesson('lesson-4')">
                <span class="lesson-num">04</span>
                <div class="lesson-title" style="color: #ff0000;">ORIGIN OF THE "GOY"</div>
                <div class="lesson-desc">Truth suppression & the Athens connection.</div>
            </div>

            <div class="lesson-card border-green" onclick="openLesson('lesson-5')">
                <span class="lesson-num">05</span>
                <div class="lesson-title" style="color: #00ff00;">ETYMOLOGY OF "GOD"</div>
                <div class="lesson-desc">Proto-Germanic *ǥuđán to Codex Argenteus.</div>
            </div>

            <div class="lesson-card border-red" onclick="openLesson('lesson-6')">
                <span class="lesson-num">06</span>
                <div class="lesson-title" style="color: #ff0000;">PREGNANCY OF FALSEHOOD</div>
                <div class="lesson-desc">Revelation 17 decoded.</div>
            </div>

            <div class="lesson-card border-white" onclick="openLesson('lesson-7')">
                <span class="lesson-num">07</span>
                <div class="lesson-title" style="color: #fff;">THE 2 ADAMS</div>
                <div class="lesson-desc">1 COR 15:45. ADAM Rishon vs ADAM Kadmon: the practices.</div>
            </div>
        </div>

        <h3 style="color: #555; border-bottom: 1px solid #333; padding-bottom: 10px; margin-top: 30px;">CURRICULUM 2 [LOCKED]</h3>
        
        <div class="curriculum-list">
            <div class="lesson-card locked">
                <span class="lock-icon">🔒</span>
                <div class="lesson-title" style="color: #777;">ADVANCED WARFARE</div>
                <div class="locked-sub">⚠ REQUIRES LEVEL 1 COMPLETION</div>
            </div>
            <div class="lesson-card locked">
                <span class="lock-icon">🔒</span>
                <div class="lesson-title" style="color: #777;">FINANCIAL SOVEREIGNTY</div>
                <div class="locked-sub">⚠ CLEARANCE DENIED</div>
            </div>
            <div class="lesson-card locked">
                <span class="lock-icon">🔒</span>
                <div class="lesson-title" style="color: #777;">THE WATCHERS</div>
                <div class="locked-sub">⚠ CLEARANCE DENIED</div>
            </div>
        </div>

    </div>

</div>

<div id="wormhole-transport">
    <div class="tunnel-effect"></div>
    <h2 style="color:#00ff00; position:absolute; font-family:'Black Ops One'; letter-spacing:10px; z-index:20001;">REQUISITIONING...</h2>
</div>

<div id="lesson-overlay" class="lesson-modal-overlay">
    <div class="lesson-file-window">
        <div class="file-header">
            <div id="modal-title" class="file-title">CLASSIFIED FILE</div>
            <button class="close-btn" onclick="closeLesson()">[ X ] CLOSE FILE</button>
        </div>
        <div id="modal-body" style="flex-grow:1; background:#111; color:#fff; padding:20px; overflow-y:auto;">
            </div>
        <div class="download-bar">
            <a href="#" id="dl-link" class="dl-btn" target="_blank">DOWNLOAD INTEL (PDF)</a>
        </div>
    </div>
</div>

<div id="data-lesson-1" class="hidden-data" data-pdf="#">
    <h2 style="color:#ff0000;">THE LETTER "J" (1524)</h2>
    <p>This document contains the etymological breakdown of the letter "J". It did not exist prior to 1524.</p>
</div>

<div id="data-lesson-2" class="hidden-data" data-pdf="#">
    <h2 style="color:#00FFFF;">DECODING HA-MASHIACH</h2>
    <p>Analysis of the Anointed One function. Mashiach is a title, not a surname.</p>
</div>

<div id="data-lesson-3" class="hidden-data" data-pdf="#">
    <h2 style="color:#fff;">REV 21:1 (NEW EARTH)</h2>
    <p>The passing of the first earth and the absence of the sea.</p>
</div>

<div id="data-lesson-4" class="hidden-data" data-pdf="#">
    <h2 style="color:#ff0000;">ORIGIN OF THE "GOY"</h2>
    <p>The Athens connection, Drakons, and the rulers who suppressed Truth.</p>
</div>

<div id="data-lesson-5" class="hidden-data" data-pdf="#">
    <h2 style="color:#00ff00;">ETYMOLOGY OF "GOD"</h2>
    <p>Tracing the Proto-Germanic *ǥuđán to Codex Argenteus.</p>
</div>

<div id="data-lesson-6" class="hidden-data" data-pdf="#">
    <h2 style="color:#ff0000;">PREGNANCY OF FALSEHOOD</h2>
    <p>Revelation 17 decoded. The Mystery Babylon and the ten horns.</p>
</div>

<div id="data-lesson-7" class="hidden-data" data-pdf="#">
    <h2 style="color:#fff;">THE 2 ADAMS</h2>
    <p>1 COR 15:45. ADAM Rishon vs ADAM Kadmon: the practices.</p>
</div>

<script>
    // 1. TELEPORT TO GEAR
    function teleportToGear() {
        const tunnel = document.getElementById('wormhole-transport');
        tunnel.style.display = 'flex';
        setTimeout(() => {
            window.location.href = "/gear"; 
        }, 800);
    }

    // 2. SIREN
    function triggerAlert() {
        document.getElementById('siren-module').classList.toggle('alert-active');
    }

    // 3. OPEN LESSON MODAL
    function openLesson(id) {
        var dataDiv = document.getElementById('data-' + id);
        var content = dataDiv.innerHTML;
        var pdfLink = dataDiv.getAttribute('data-pdf');

        document.getElementById('modal-body').innerHTML = content;
        
        var dlBtn = document.getElementById('dl-link');
        dlBtn.href = pdfLink;
        
        if(pdfLink === "#" || pdfLink === null) { 
            dlBtn.innerHTML = "FILE ENCRYPTED (NO PDF)"; 
            dlBtn.style.opacity = "0.5";
            dlBtn.style.pointerEvents = "none";
        } else {
            dlBtn.innerHTML = "DOWNLOAD INTEL (PDF)";
            dlBtn.style.opacity = "1";
            dlBtn.style.pointerEvents = "auto";
        }

        var overlay = document.getElementById('lesson-overlay');
        overlay.classList.add('modal-active');
        setTimeout(function(){
            overlay.querySelector('.lesson-file-window').classList.add('window-active');
        }, 10);
    }

    // 4. CLOSE LESSON
    function closeLesson() {
        var overlay = document.getElementById('lesson-overlay');
        overlay.querySelector('.lesson-file-window').classList.remove('window-active');
        setTimeout(function(){
            overlay.classList.remove('modal-active');
        }, 300);
    }
</script>