@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400&display=swap');

body {
    background: #050505; 
    color: #fff; 
    font-family: 'JetBrains Mono';
    margin: 0; 
    min-height: 100vh; 
    display: flex; 
    justify-content: center;
     align-items: center;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
}

body.exit-zoom {
    transform: scale(0.1);
    opacity: 0;
}

.hud-overlay {
    position: fixed; top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px);
    background-size: 100% 4px; 
    pointer-events: none;
}

.content-wrapper { 
    width: 90%; 
    max-width: 1000px; 
    z-index: 10; 
}

header { 
    margin-bottom: 50px; 
    border-left: 2px solid #ff0000; /* Red border for 'Error/Locked' */
    padding-left: 20px; 
}

h1 { 
    letter-spacing: 5px; 
    font-weight: 100; 
    opacity: 0.8; 
    animation: glitchText 3s infinite; /* Glitch effect */
}

.back-link { 
    color: #555; 
    text-decoration: none; 
    font-size: 10px; 
    letter-spacing: 2px; 
    cursor: pointer; 
}
.back-link:hover { 
    color: #fff;
}

.link-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
}

/* The locked link styling */
.link-grid a {
    border: 1px solid rgba(255,0,0,0.2); /* Red tint */
    padding: 20px; 
    text-decoration: none;
    color: #444;
    background: rgba(255,0,0,0.02); 
    transition: 0.3s;
    display: flex; 
    align-items: center;
    cursor: not-allowed;
}

.link-grid a span { 
    color: #600; 
    margin-right: 10px;
}

/* Glitch Animation Keyframes */
@keyframes glitchText {
    0% { transform: translate(0); text-shadow: none; }
    2% { transform: translate(-2px, 2px); text-shadow: 2px 0 #ff0000; }
    4% { transform: translate(2px, -2px); text-shadow: -2px 0 #00ffff; }
    6% { transform: translate(0); text-shadow: none; }
    100% { transform: translate(0); }
}

@media (max-width: 768px) {
    .link-grid { 
        grid-template-columns: 1fr; 
    }
}