/* --- FUNDAMENTALS --- */
:root {
    --neon-blue: #00d4ff;
    --neon-pink: #ff007a;
    --neon-green: #39ff14;
    --neon-amber: #ffb000;
    --glass-bg: rgba(10, 10, 25, 0.85);
    --border-glow: rgba(0, 212, 255, 0.3);
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #000;
}

/* --- THE TERMINAL SCANLINE EFFECT --- */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 10;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* --- GLASS UI CARDS --- */
.glass-card {
    border-radius: 0px; /* Square edges look more like professional software */
    border: 1px solid var(--border-glow) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 212, 255, 0.1);
    transition: all 0.5s ease;
}

.intro-panel {
    border: 1px solid rgba(0, 212, 255, 0.22);
    background: linear-gradient(180deg, rgba(10, 14, 30, 0.92), rgba(5, 8, 18, 0.82));
}

.tutorial-overlay {
    border: 1px solid rgba(57, 255, 20, 0.28);
    background: rgba(8, 12, 20, 0.9);
    box-shadow: inset 0 0 20px rgba(57, 255, 20, 0.06);
    padding: 1rem;
}

.tutorial-title {
    color: var(--neon-green);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.tutorial-list {
    color: rgba(255, 255, 255, 0.9);
    padding-left: 1.15rem;
    font-size: 0.95rem;
}

.status-card {
    background: rgba(5, 8, 18, 0.92);
}

.protocol-layout {
    width: min(100%, 1500px);
    max-width: 1500px;
    margin-inline: auto;
}

.protocol-scene {
    min-height: 100vh;
}

.hud-label {
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1.5px;
    font-size: 0.72rem;
}

.hud-value {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    margin-top: 0.25rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}

.hud-value-wide {
    color: var(--neon-blue);
    font-size: 0.95rem;
    letter-spacing: 1px;
}

.protocol-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.boss-banner {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 3px;
    font-size: 0.78rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(90deg, rgba(255, 0, 122, 0.22), rgba(0, 212, 255, 0.14));
    text-transform: uppercase;
}

.boss-banner.endless {
    background: linear-gradient(90deg, rgba(57, 255, 20, 0.18), rgba(255, 176, 0, 0.18));
    border-color: rgba(57, 255, 20, 0.28);
}

.pause-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(8px);
    z-index: 20;
}

.pause-card {
    width: min(92vw, 460px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 767.98px) {
    .protocol-layout {
        padding: 1rem !important;
    }

    .protocol-layout {
        width: 100%;
    }

    .protocol-scene {
        min-height: auto;
    }

    .glass-card {
        border-radius: 0;
    }

    .data-symbol {
        font-size: clamp(3rem, 18vw, 5rem);
    }

    .btn-protocol {
        padding: 0.85rem 0.75rem;
        letter-spacing: 1px;
    }
}

.pause-list {
    color: rgba(255, 255, 255, 0.85);
    padding-left: 1.15rem;
}

/* --- ASYMMETRIC COLOR CODING --- */
.border-info { border-color: var(--neon-blue) !important; box-shadow: 0 0 15px rgba(0, 212, 255, 0.2); }
.border-danger { border-color: var(--neon-pink) !important; box-shadow: 0 0 15px rgba(255, 0, 122, 0.2); }

/* --- GAME BUTTONS --- */
.btn-protocol {
    background: transparent;
    border: 2px solid var(--neon-blue);
    color: var(--neon-blue);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    padding: 15px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.btn-protocol:hover {
    background: var(--neon-blue);
    color: #000;
    box-shadow: 0 0 30px var(--neon-blue);
}

.btn-protocol:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-action {
    border: 2px solid var(--neon-pink);
    color: var(--neon-pink);
}

.btn-action:hover {
    background: var(--neon-pink);
    color: #000;
    box-shadow: 0 0 30px var(--neon-pink);
}

/* --- DYNAMIC SYMBOLS (The "Logic" visual) --- */
.data-symbol {
    font-size: 5rem;
    font-weight: 700;
    text-shadow: 0 0 20px currentColor;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* --- LEADERBOARD FANCY TABLE --- */
.table-dark {
    background: transparent !important;
}

.table th {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* --- THE "SILENT" ALERT --- */
.protocol-notice {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--neon-green);
    padding: 10px;
    font-size: 0.9rem;
    animation: slideIn 0.5s ease-out;
}

.protocol-chip {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 2px 10px;
    color: var(--neon-amber);
    font-size: 0.72rem;
    letter-spacing: 1px;
}

.shake {
    animation: shake 0.35s ease-in-out;
}

.screen-glitch {
    animation: screenGlitch 0.25s steps(2, end);
}

@keyframes screenGlitch {
    0% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
    25% { transform: translate(-2px, 1px) skewX(1deg); filter: hue-rotate(12deg); }
    50% { transform: translate(2px, -1px) skewX(-1deg); filter: hue-rotate(-12deg); }
    75% { transform: translate(-1px, 1px) skewX(0.5deg); filter: hue-rotate(8deg); }
    100% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.bg-warning {
    background-color: var(--neon-amber) !important;
}

.bg-danger {
    background-color: #ff4d4d !important;
}

body.boss-phase::before {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(255, 0, 122, 0.24) 50%),
                linear-gradient(90deg, rgba(255, 0, 122, 0.14), rgba(0, 212, 255, 0.03), rgba(255, 176, 0, 0.14));
    background-size: 100% 2px, 3px 100%;
}

body.endless-phase::before {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(57, 255, 20, 0.22) 50%),
                linear-gradient(90deg, rgba(57, 255, 20, 0.14), rgba(0, 212, 255, 0.03), rgba(255, 176, 0, 0.14));
    background-size: 100% 2px, 3px 100%;
}

body.paused-phase .glass-card {
    opacity: 0.85;
}

body.boss-phase .status-card,
body.endless-phase .status-card {
    border-color: rgba(255, 255, 255, 0.35) !important;
    animation: hudPulse 1.4s ease-in-out infinite;
}

@keyframes hudPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 212, 255, 0.08); }
    50% { box-shadow: 0 0 28px rgba(255, 0, 122, 0.35), inset 0 0 18px rgba(57, 255, 20, 0.12); }
}

body.boss-phase .boss-banner,
body.endless-phase .boss-banner {
    animation: bannerPulse 0.9s ease-in-out infinite;
}

@keyframes bannerPulse {
    0%, 100% { transform: scale(1); filter: saturate(1); }
    50% { transform: scale(1.01); filter: saturate(1.35); }
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- SCROLLBARS (For leaderboard) --- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--neon-blue); }