body {
    background-color: #000;
    color: #00ffff;
    font-family: 'Courier New', monospace;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hidden { display: none !important; }

.modal, .denied {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    background: rgba(0,0,0,0.9);
    text-align: center;
    z-index: 10;
}

.buttons button, .denied button {
    background: transparent;
    border: 2px solid #00ffff;
    color: #00ffff;
    font-size: 20px;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    box-shadow: 0 0 15px #00ffff, 0 0 5px #00cccc inset;
}

.title {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.2em;
    animation: glitchColor 8s infinite;
}

/* removed color cycle */ {
    0%, 25% { color: #00ffff; text-shadow: 0 0 8px #00ffff, 0 0 16px #00cccc; }
    26%, 50% { color: #ff00ff; text-shadow: 0 0 8px #ff00ff, 0 0 16px #cc00cc; }
    51%, 75% { color: #a64dff; text-shadow: 0 0 8px #a64dff, 0 0 16px #6633cc; }
    76%, 100% { color: #ffffff; text-shadow: 0 0 8px #ffffff, 0 0 16px #cccccc; }
}

.outer-frame {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    border: 2px solid #00ffff;
    box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00cccc;
}

.panel {
    border: 2px solid #00ffff;
    box-shadow: 0 0 20px #00cccc;
    background: rgba(0,0,0,0.8);
    padding: 10px;
}

#image-box img {
    width: 300px;
    height: auto;
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

#image-box img.fade-out { opacity: 0; }

#console {
    width: 460px;
    min-height: 340px;
}

#console-text {
    font-family: 'Courier New', monospace;
    color: #00ffff;
    white-space: pre-wrap;
    line-height: 1.4em;
}

.emergency {
    display: block;
    margin: 20px auto;
    background: transparent;
    border: 2px solid #00ffff;
    color: #00ffff;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0 0 15px #00ffff, 0 0 5px #00cccc inset;
    animation: flicker 1s infinite;
}

@keyframes flicker {
    0%, 19%, 21%, 59%, 61%, 100% { opacity: 1; }
    20%, 60% { opacity: 0.3; }
}

.title {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.2em;
    color: #00ffff;
    text-shadow:
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 5px #ff00ff,
        0 0 10px #ff00ff;
    animation: neonFlicker 1.2s infinite alternate, neonJitter 0.2s infinite;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 59%, 61%, 100% { opacity: 1; }
    20%, 60% { opacity: 0.6; }
}

@keyframes neonJitter {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(1px); }
}

.title {
    animation: neonFlicker 1.2s infinite alternate, neonJitter 0.2s infinite, hueShift 15s infinite alternate;
}

@keyframes hueShift {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
    100% { filter: hue-rotate(-30deg); }
}