/* ===============================
   SPIDERMASTER NOC — STABLE CORE
   FIXED SCREEN / NO CUT / NO ZOOM
================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap');

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

/* ===============================
   BASE
================================ */

html, body {
    width: 100%;
    min-height: 100%;
    background: #05000a;
    color: #e8dbff;
    font-family: "Orbitron", monospace;
    overflow-x: hidden;
}

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

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;

    background:
        url("../img/spidermaster.png") center center no-repeat,
        radial-gradient(circle at 30% 30%, #1a0026, transparent 50%),
        radial-gradient(circle at 70% 70%, #0b0014, transparent 50%);

    background-size: 720px auto;
    opacity: 0.10;

    animation: bgFloat 22s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bgFloat {
    0%   { background-position: 50% 46%; }
    50%  { background-position: 50% 54%; }
    100% { background-position: 50% 46%; }
}

/* ===============================
   MAIN FRAME
================================ */

.noc-frame {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

/* ===============================
   LOGO
================================ */

.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    margin: 25px 0 30px;
}

.logo-area img {
    width: 260px;
    filter: drop-shadow(0 0 45px rgba(180,100,255,.95));
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #e6ccff;

    text-shadow:
        0 0 12px rgba(200,140,255,.9),
        0 0 35px rgba(150,80,255,.7);
}

.logo-text.left { text-align: right; }
.logo-text.right { text-align: left; }

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

.status-bar {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    letter-spacing: 2px;
}

.status-bar .ok {
    color: #00ff88;
}

.status-bar .armed {
    color: #ff0000;
    animation: redBlink .25s infinite;
    text-shadow:
        0 0 8px rgba(255,0,0,.9),
        0 0 20px rgba(255,0,0,.8);
}

@keyframes redBlink {
    0%   { opacity: 1; }
    50%  { opacity: .25; }
    100% { opacity: 1; }
}

/* ===============================
   BODY
================================ */

.noc-body {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
}

/* ===============================
   LEFT PANEL
================================ */

.panel-left {
    background: rgba(60,0,90,.35);
    border: 1px solid rgba(190,120,255,.45);
    border-radius: 14px;
    padding: 16px;

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

/* ===============================
   BUTTON (PURPLE SMOKE)
================================ */

.panel-btn {
    position: relative;
    overflow: hidden;

    padding: 16px;
    text-align: center;
    cursor: pointer;

    background: linear-gradient(180deg, #120018, #040007);
    border: 1px solid rgba(120,70,180,.45);
    border-radius: 10px;

    color: #f0dcff;
    font-size: 15px;
    text-decoration: none;

    box-shadow:
        inset 0 0 15px rgba(90,40,140,.25),
        0 6px 18px rgba(60,20,120,.35);

    text-shadow: 0 0 8px rgba(130,80,190,.45);

    transition: all .25s ease;
}

.panel-btn::before {
    content: "";
    position: absolute;
    inset: -40%;

    background:
        radial-gradient(circle at 30% 40%, rgba(110,50,160,.22), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(70,25,120,.20), transparent 65%);

    animation: smokeFlow 6s linear infinite;
    opacity: .45;
    pointer-events: none;
}

.panel-btn::after {
    content: "";
    position: absolute;
    inset: 0;

    box-shadow:
        inset 0 0 25px rgba(120,70,180,.45),
        0 0 30px rgba(80,35,140,.45);

    opacity: 0;
    transition: .25s;
    pointer-events: none;
}

.panel-btn:hover::after { opacity: 1; }

.panel-btn:hover {
    transform: translateY(-2px);
}

.panel-btn:active {
    transform: translateY(2px);
}

/* ===============================
   TERMINAL
================================ */

.terminal {
    background: #05000c;
    border: 1px solid rgba(200,120,255,.45);
    border-radius: 14px;
    padding: 20px;

    overflow-y: auto;
}

#terminal {
    font-size: 22px;
    line-height: 1.7;
    white-space: pre-wrap;
}

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

footer {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    opacity: .6;
    letter-spacing: 1px;
}

/* ===============================
   MOBILE FIX — REAL FIX
================================ */

@media (max-width: 900px) {

    .logo-area {
        flex-direction: column;
        gap: 12px;
    }

    .logo-text {
        font-size: 20px;
        text-align: center !important;
    }

    .logo-area img {
        width: 190px;
    }

    .noc-body {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .panel-btn {
        font-size: 14px;
        width: 100%;
    }

    .terminal {
        max-height: 320px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #terminal {
        font-size: 16px;
        padding-bottom: 30px;
    }
}

/* ===============================
   ANIMATION
================================ */

@keyframes smokeFlow {
    0%   { transform: translateX(-20%) translateY(-10%); }
    50%  { transform: translateX(20%) translateY(10%); }
    100% { transform: translateX(-20%) translateY(-10%); }
}

/* SENTINEL ARMED BLINK */
.armed-blink {
    color: #ff0000 !important;
    animation: armedBlink 0.25s infinite;
    text-shadow:
        0 0 8px rgba(255,0,0,.9),
        0 0 20px rgba(255,0,0,.8);
}

@keyframes armedBlink {
    0%   { opacity: 1; }
    50%  { opacity: 0.25; }
    100% { opacity: 1; }
}