* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
    background: #000000;
    color: #e6e6e6;
    font-family: "Courier New", monospace;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    overflow: hidden;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px,
        transparent 1px, transparent 3px
    );
    pointer-events: none;
    z-index: 5;
}

@keyframes crtFlicker {
    0%, 96%, 100% { opacity: 1; }
    97% { opacity: 0.65; }
    98% { opacity: 1; }
}

.flicker {
    animation: crtFlicker 4s infinite;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.panel {
    max-width: 470px;
    text-align: center;
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity 1s ease;
}
.panel.hide { opacity: 0; }

a.link {
    color: #cccccc;
    text-decoration: underline;
    cursor: pointer;
}
a.link:hover { color: #ffffff; background: #333333; }

.hint {
    position: fixed;
    bottom: 20px;
    left: 0; right: 0;
    text-align: center;
    font-size: 13px;
    color: #666666;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 6;
}
.hint.visible { opacity: 1; }
.hint.error { color: #a06060; }