/* ======================================================
   EVOLVE OS — evolve-style.css
   Version: v3.3 (C64 Pulse Edition)
   Rebuilt: 24 May 2026 — 00:14 BST
   Author: Crown Creatives / EVOLVE OS
   ====================================================== */


/* ======================================================
   BLOCK 1 — HINTS PANEL
   ====================================================== */

#hintsPanel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 260px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border: 1px solid #0ff;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 12px #0ff;
    font-family: Consolas, monospace;
    transition: all 0.25s ease;
    z-index: 9999;
}

#hintsHeader {
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #0ff;
}

#hintsContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding: 0 10px;
}

#hintsPanel.hints-expanded #hintsContent {
    max-height: 400px;
    padding-bottom: 10px;
}

#hintSearch {
    width: 100%;
    padding: 6px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid #0ff;
    background: #000;
    color: #0ff;
}

#hintsList {
    list-style: none;
    padding: 0;
    margin: 0;
}

#hintsList li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,255,255,0.2);
}



/* ======================================================
   BLOCK 2 — COMMUNICATION CONSOLE (NEON SHELL)
   ====================================================== */

#commConsole {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100vh;
    background: rgba(0, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-right: 2px solid #00ffff;
    box-shadow: 0 0 20px #00ffff;
    transform: translateX(-360px);
    transition: transform 0.35s ease;
    z-index: 9999;
    display: none; /* Hidden until Admin Mode */
}

#commConsole.comm-expanded {
    transform: translateX(0);
}

#commHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: rgba(0, 255, 255, 0.15);
    border-bottom: 1px solid #00ffff;
    color: #00ffff;
    font-family: 'Cinzel Decorative', serif;
    font-size: 14px;
}

.commIcon {
    cursor: pointer;
    opacity: 0.85;
    transition: 0.2s;
}

.commIcon:hover {
    opacity: 1;
    text-shadow: 0 0 6px #00ffff;
}

#commToggle {
    margin-left: auto;
    cursor: pointer;
    font-size: 20px;
}



/* ======================================================
   BLOCK 3 — C64 TERMINAL INTERIOR
   ====================================================== */

.c64 {
    background: #000;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    padding: 12px;
    height: calc(100vh - 60px);
    overflow-y: auto;
    border-left: 1px solid #00ff00;
}

.c64-title {
    font-weight: bold;
    margin: 10px 0;
    text-shadow: 0 0 4px #00ff00;
}

.c64-label {
    display: block;
    margin-top: 12px;
}

.c64-input {
    width: 100%;
    background: #000;
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 6px;
    font-family: inherit;
}

.c64-button {
    margin-top: 10px;
    background: #000;
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 6px 12px;
    cursor: pointer;
}

.c64-button:hover {
    background: #003300;
}

.c64-log {
    margin-top: 10px;
    white-space: pre-line;
}



/* ======================================================
   BLOCK 4 — EVOLVE ICON (C64 GREEN PULSE)
   ====================================================== */

/* Base Icon — C64 Green Glow */
#commLogo {
    width: 31px; /* 10% larger */
    filter:
        drop-shadow(0 0 4px #00ff00)
        drop-shadow(0 0 8px #00ff00)
        drop-shadow(0 0 12px #00ff00);
    transition: 0.3s ease;
}

/* Hover Shimmer */
#commLogo:hover {
    filter:
        drop-shadow(0 0 6px #00ff00)
        drop-shadow(0 0 12px #00ff00)
        drop-shadow(0 0 20px #00ff00)
        brightness(1.3);
}

/* Click Ripple */
#commLogo:active {
    transform: scale(0.92);
    filter:
        drop-shadow(0 0 10px #00ff00)
        drop-shadow(0 0 20px #00ff00)
        drop-shadow(0 0 30px #00ff00);
    transition: 0.1s ease;
}

/* C64 Pulse Animation */
@keyframes evolvePulseGreen {
    0%, 100% {
        filter:
            drop-shadow(0 0 4px #00ff00)
            drop-shadow(0 0 8px #00ff00);
    }
    50% {
        filter:
            drop-shadow(0 0 8px #00ff00)
            drop-shadow(0 0 16px #00ff00);
    }
}

#commLogo {
    animation: evolvePulseGreen 4s ease-in-out infinite;
}

/* Admin Mode — Gold Override */
.admin-mode #commLogo {
    filter:
        drop-shadow(0 0 6px gold)
        drop-shadow(0 0 12px gold)
        drop-shadow(0 0 18px gold);
}



/* ======================================================
   BLOCK 5 — BOOT GLOW (CONSOLE OPEN)
   ====================================================== */

@keyframes evolveBootGlow {
    0% {
        opacity: 0;
        filter: drop-shadow(0 0 0px #00ff00);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 12px #00ff00);
    }
    100% {
        filter: drop-shadow(0 0 6px #00ff00);
    }
}

.comm-expanded #commLogo {
    animation: evolveBootGlow 0.8s ease-out;
}
/* ======================================================
   EVOLVE OS — FOOTER ORB (Looping MP4)
   ====================================================== */

#evolveFooterOrb {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 140px;
}

#evolveFooterOrb video {
    width: 50%;
    height: auto;
    border-radius: 12px;
    filter:
        drop-shadow(0 0 6px #00ff00)
        drop-shadow(0 0 12px #00ff00);
}

@keyframes orbPulse {
    0%, 100% { filter: drop-shadow(0 0 6px #00ff00); }
    50% { filter: drop-shadow(0 0 14px #00ff00); }
}

#evolveFooterOrb video {
    animation: orbPulse 4s ease-in-out infinite;
}
