/* --- V2 HUD LAYOUT --- */

:root {
    --primary-bg: #0a0a0a;
    --primary-text: #e0e0e0;
    --accent-green: #00ff00;
    --accent-border: #008800;
    --accent-pink: #ff00c1;
    --accent-cyan: #00fff9;
    --accent-blue: #00aaff;
    --accent-red: #ff0000;
    --accent-yellow: #ffff00;
    --panel-bg: rgba(10, 25, 20, 0.85);
    --panel-border: 1px solid var(--accent-border);
    --corner-clip: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    background-color: var(--primary-bg);
    color: var(--primary-text);
    line-height: 1.6;
    font-size: 14px;
    image-rendering: pixelated;
    overflow: hidden; /* Prevent body scroll */
}

/* --- HUD Grid Layout --- */
.hud-container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "corner-tl header corner-tr"
        "main-content main-content main-content"
        "corner-bl footer corner-br";
    gap: 15px;
    padding: 15px;
}

/* --- Base Panel and HUD component styling --- */
.panel, .hud-header, .hud-footer, .hud-main-content {
    border: var(--panel-border);
    background-color: var(--panel-bg);
    clip-path: var(--corner-clip);
    position: relative;
    overflow: hidden;
    padding: 10px;
}

.hud-header { grid-area: header; }
.hud-main-content { grid-area: main-content; overflow-y: auto; padding: 20px; }
.hud-footer { grid-area: footer; text-align: center; }
.hud-corner-tl { grid-area: corner-tl; }
.hud-corner-tr { grid-area: corner-tr; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 15px; padding: 5px 10px;}
.hud-corner-br { grid-area: corner-br; }

/* --- Panel Scanline Effect --- */
.panel::before, .hud-header::before, .hud-footer::before, .hud-main-content::before, #secret-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: repeating-linear-gradient(0deg, rgba(0, 255, 0, 0.08), rgba(0, 255, 0, 0.08) 1px, transparent 1px, transparent 3px);
    animation: scanline-scroll 15s infinite linear;
    pointer-events: none;
    z-index: 0;
}

@keyframes scanline-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

/* --- General Content Styling --- */
/* Use high z-index to ensure content is on top of scanlines */
h1, h2, h3, p, table, ul, pre, .hacker-smiley, .glitch-text-small, .vertical-text, .copyleft, .blinking-light {
    position: relative;
    z-index: 1;
}

h1, h2, h3 {
    text-shadow: 0 0 5px, 0 0 10px;
    margin: 0 0 15px 0;
    padding-bottom: 5px;
    animation: flicker 10s infinite;
}
h1 { color: var(--accent-green); font-size: 4.5em; text-align: center; }
h2 { color: var(--accent-cyan); font-size: 1.5em; margin-top: 30px; }
h3 { color: var(--accent-pink); }

a {
    color: var(--accent-yellow);
    text-decoration: none;
    text-shadow: 0 0 3px var(--accent-yellow);
    transition: all 0.2s ease-in-out;
}
a:hover {
    color: var(--primary-text);
    background-color: var(--accent-blue);
    text-shadow: none;
}
pre {
    color: var(--accent-green);
    font-size: 10px;
    text-shadow: 0 0 5px var(--accent-green);
    text-align: center;
    line-height: 1.2;
    overflow-x: auto;
}
footer { font-size: 0.8em; color: #888; }


/* --- Specific Component Styles --- */
#secret-link {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 1000;
    padding: 5px 15px;
}
#secret-link a {
    font-size: 1.5em;
    opacity: 0.5;
}
#secret-link a:hover {
    opacity: 1;
    background-color: transparent; /* Override generic hover */
}

.glitch-text-small, h1 {
    position: relative;
}
h1::before, h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--panel-bg);
    overflow: hidden;
    clip-path: inset(50% 0 50% 0);
}
h1::before { left: 2px; text-shadow: -1px 0 var(--accent-pink); animation: glitch-anim-1 3s infinite linear alternate-reverse; }
h1::after { left: -2px; text-shadow: -1px 0 var(--accent-cyan); animation: glitch-anim-2 2.5s infinite linear alternate-reverse; }

.glitch-text-small { color: var(--accent-pink); text-align: center; }
.glitch-text-small::before,
.glitch-text-small::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--panel-bg);
    overflow: hidden;
    clip-path: inset(50% 0 50% 0);
}
.glitch-text-small::before { left: 1px; text-shadow: -1px 0 var(--accent-cyan); animation: glitch-anim-1 2.5s infinite linear alternate-reverse; }
.glitch-text-small::after { left: -1px; text-shadow: -1px 0 var(--accent-green); animation: glitch-anim-2 3s infinite linear alternate-reverse; }


/* --- Decorative HUD Elements --- */
.hud-corner-tl { font-size: 12px; color: var(--accent-blue); }
.blinking-light { display: inline-block; width: 10px; height: 10px; background-color: var(--accent-red); box-shadow: 0 0 5px var(--accent-red); animation: blink 1s infinite; }
.hud-corner-tr-left { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; color: var(--accent-blue); font-size: 14px; text-shadow: 0 0 5px var(--accent-blue); }
.hacker-smiley { font-size: 20px; color: var(--accent-yellow); text-shadow: 0 0 5px var(--accent-yellow); animation: fast-blink 2s infinite; }
.copyleft { display: inline-block; transform: rotate(180deg); position: relative; top: -2px; }

/* --- Responsive & Animations --- */
@media (max-width: 768px) {
    body { overflow-y: auto; }
    .hud-container { display: block; height: auto; }
    .hud-main-content { overflow-y: visible; height: auto; margin-bottom: 15px; }
    .hud-header, .panel { margin-bottom: 15px; }
    .hud-corner-tl, .hud-corner-tr, .hud-corner-br { display: none; }
    td, td:first-child { display: block; width: 100%; }
    td:first-child { border-bottom: 1px solid var(--accent-border); }
}

#intro-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-bg); z-index: 10001; display: flex; justify-content: center; align-items: center; transition: opacity 1s ease-in-out; opacity: 1; }
#intro-overlay pre { font-size: 16px; color: var(--accent-green); text-shadow: 0 0 5px var(--accent-green); white-space: pre-wrap; text-align: left; max-width: 90%; font-family: 'Press Start 2P', cursive; }
#login-prompt { text-align: center; color: var(--accent-green); }
#login-prompt label { font-size: 16px; display: block; margin-bottom: 15px; }
#handle-input { background-color: transparent; border: none; border-bottom: 2px solid var(--accent-green); color: var(--accent-cyan); font-family: 'Press Start 2P', cursive; font-size: 20px; text-align: center; width: 300px; outline: none; }

@keyframes blink { 50% { opacity: 0.3; } }
@keyframes fast-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes glitch-anim-1 { 0%{clip-path:inset(15% 0 86% 0)}10%{clip-path:inset(55% 0 8% 0)}20%{clip-path:inset(48% 0 44% 0)}30%{clip-path:inset(75% 0 5% 0)}40%{clip-path:inset(58% 0 34% 0)}50%{clip-path:inset(16% 0 75% 0)}60%{clip-path:inset(83% 0 14% 0)}70%{clip-path:inset(42% 0 53% 0)}80%{clip-path:inset(21% 0 74% 0)}90%{clip-path:inset(89% 0 8% 0)}100%{clip-path:inset(59% 0 38% 0)} }
@keyframes glitch-anim-2 { 0%{clip-path:inset(89% 0 8% 0)}10%{clip-path:inset(59% 0 38% 0)}20%{clip-path:inset(16% 0 75% 0)}30%{clip-path:inset(42% 0 53% 0)}40%{clip-path:inset(83% 0 14% 0)}50%{clip-path:inset(21% 0 74% 0)}60%{clip-path:inset(48% 0 44% 0)}70%{clip-path:inset(75% 0 5% 0)}80%{clip-path:inset(58% 0 34% 0)}90%{clip-path:inset(55% 0 8% 0)}100%{clip-path:inset(9% 0 92% 0)} }