@font-face {
    font-family: 'VT220';
    src: url(/fonts/_decterm.ttf);
    font-weight: normal;
    font-style: normal;
    font-diplay: swap; 
}

:root{
    --base-color: #000000;
    --text-color: #00aaaa;
    --primary-color: #6c0675;
    --secondary-color: #b04a05;
    --color-1: #ffffff;
    --color-2: #ffffff;
    --color-3: #ffffff;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#menu-output strong {
    font-weight: 900; /* Pushes browser to render fake bold */
    color: var(--color-1); /* Optional: make it bright white to POP like a real terminal */
}

.indented-block {
    display: block;
    padding-left: 2em; /* Pushes the left edge over by 2 character widths */
    margin-top: 0.5em;
}

html{
    font-family: 'VT220', Arial, Helvetica, sans-serif;
    color: var(--text-color);
}

body{
    padding: 1em;
    background-color: var(--base-color);
    /* Limits full-screen expansion */
    max-width: 800px; /* Adjust pixel/em size to preference (e.g., 50em or 800px) */
    margin: 0;   /* Centers the content horizontally on large screens */
}

h1, h2, h3, h10{
    font-family: 'VT220', Arial, Helvetica, sans-serif;
}
    
.interactive{
    display: block;
    width: min(50em, 100%);
    font-size: 1.1em;
    padding: min(0em, 5%);
    align-items: center;
    list-style-type: none;
    gap: 2em;
}

.nonInteractive {
    display: block;
    width: min(50em, 100%);
    font-size: 1.1em;
    padding: min(0em, 5%);
    align-items: center;
    list-style-type: none;
    gap: 2em;
}

/* Keep text and the moving cursor glued together horizontally */
.line-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: bottom;
}

/* Base style for the typing cursors - SOLID BY DEFAULT NOW */
.type-cursor {
    display: inline-block;
    color: var(--text-color);
}

/* --- Line 1 Sequence --- */
.line1 {
    display: inline-block;   
    overflow: hidden;        
    white-space: nowrap;     
    width: 0;                
    /* steps(34) means it divides the animation into 34 hard ticks—one per letter */
    animation: typingLine1 1.5s steps(34, end) forwards; 
}
/* Solid from 0-2s, then vanishes */
.c1 {
    animation: hideCursor 0s forwards 1.5s;
}

/* --- Line 2 Sequence --- */
.line2 {
    display: inline-block;   
    overflow: hidden;        
    white-space: nowrap;     
    width: 0;                
    /* steps(19) for the 19 letters in line 2 */
    animation: typingLine2 1s steps(19, end) 1.5s forwards; 
}

/* Hidden initially, becomes solid at 2s, vanishes at 4s */
.c2 {
    opacity: 0;
    animation: showCursor 0s forwards 1.5s, hideCursor 0s forwards 2.5s;
}

/* --- Password Label Sequence --- */
.line3 {
    display: inline-block;   
    overflow: hidden;        
    white-space: nowrap;     
    max-width: 0;                
    /* steps(10) for the 10 letters in "password: " */
    animation: typingPassword 0.5s steps(10, end) 2.5s forwards; 
}
/* Hidden initially, becomes solid at 4s, vanishes at 5s */
.c3 {
    opacity: 0;
    animation: showCursor 0s forwards 2.5s, hideCursor 0s forwards 3s;
}

/* --- Input Field & Final Cursor Sequence (5s+) --- */
.password-input-container {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    margin-left: -7px;
    animation: revealInput 0s linear 3.5s forwards;
}

/* This is the final cursor that stays. It shows up at 5s and starts blinking */
.cursor1 {
    display: inline-block;
    opacity: 0;
    animation: showCursor 0s forwards 3s, blinking 1s steps(1, end) 3s infinite;
    
    /* Pulls the cursor left by a tiny fraction to eliminate the remaining font gap */
    margin-left: -4px; 
}

.input {
    background-color: transparent !important;
    border: none;
    outline: none;
    color: var(--text-color);
    
    font-size: 1.1em; 
    font-family: 'VT220', Arial, Helvetica, sans-serif;
    
    width: 0px; /* Reduced from 2px to 0px for a perfectly tight start */
    padding: 0 !important; /* Forces the browser to drop all internal spacing */
    margin: 0;

    /* 1. FORCE THE TEXT AND CARET TO THE FAR RIGHT */
    text-align: right;

    caret-color: transparent;
}

/* This is the secret ingredient: an invisible span that matches your input font exactly */
.input-mirror {
    position: absolute;
    visibility: hidden;
    white-space: pre; /* Keeps spaces looking accurate */
    
    font-size: 1.1em;
    font-family: 'VT220', Arial, Helvetica, sans-serif;
}

/* --- New Hidden Section Styling --- */
.hidden-content {
    display: none; /* Keeps it completely removed from flow initially */
    margin-top: 1em;
    font-size: 1.1em;
}

/* When JS adds the 'reveal' class, display the block */
.hidden-content.reveal {
    display: block;
}

/* --- Line 4 Sequence (Starts immediately on reveal) --- */
.hidden-content.reveal .correctLine1 {
    display: inline-block;   
    overflow: hidden;        
    white-space: nowrap;     
    width: 0;                
    animation: typingCorrectPasswordL1 1.5s steps(32, end) forwards; 
}

.hidden-content.reveal .c4 {
    animation: hideCursor 0s forwards 1.5s;
}

/* --- Line 5 Sequence (Delayed by 1.5s until Line 4 finishes) --- */
.hidden-content.reveal .correctLine2 {
    display: inline-block;   
    overflow: hidden;        
    white-space: nowrap;     
    width: 0;                
    animation: typingCorrectPasswordL2 1.5s steps(39, end) 1.5s forwards; 
}
.hidden-content.reveal .c5 {
    opacity: 0;
    /* Shows cursor when typing starts, starts blinking infinitely when typing finishes */
    animation: showCursor 0s forwards 1.5s, blinking 1s steps(1, end) 3s infinite;
}

/* --- Line 6 Sequence (Delayed by 1.5s until Line 4 finishes) --- */
.hidden-content.reveal .incorrect {
    display: inline-block;   
    overflow: hidden;        
    white-space: nowrap;     
    width: 0;                
    animation: typingIncorrectPassword 1.5s steps(39, end) 0s forwards; 
}
.hidden-content.reveal .c6 {
    opacity: 0;
    /* Shows cursor when typing starts, starts blinking infinitely when typing finishes */
    animation: showCursor 0s forwards 1.5s, blinking 1s steps(1, end) 3s infinite;
}

/* Option A: Retro Terminal Style (Instant Vanish) */
.hidden-content.hide .incorrect {
    animation: terminalVanish 0s forwards 3s;
}

.menu-container {
    display: none; /* <-- ADD THIS: Hides the menu completely at the start */
    margin-top: 1.5em;
    font-family: 'VT220', monospace;
}

#terminal-menu {
    display: none;
    margin-top: 1.5em;
    font-family: 'VT220', monospace;
}

#menu-output {
    margin-top: 1em;
    color: var(--color-1);
    white-space: pre-wrap; /* Preserves both \n and \t characters */
    tab-size: 4; /* Set tab length to 4 spaces */
}

.menu-instruction {
    margin-bottom: 0.5em;
    opacity: 0.7;
}

.menu-list {
    list-style: none;
    padding-left: 0;
}

/* Hide submenus completely until activated */
.submenu {
    display: none;
    margin-top: 0.5em;
    padding-left: 1em;
}

.menu-item {
    padding: 0.2em 0;
    cursor: pointer;
}

/* The selected item styling with a flashing terminal indicator */
.menu-item.selected {
    background-color: var(--text-color);
    color: var(--base-color);
}

/* Optional: change the bracket visual if it's selected */
.menu-item.selected::before {
    content: "█ ";
}


/* --- Helper Keyframes for Visibility --- */
@keyframes hideCursor {
    to { display: none; opacity: 0; width: 0; }
}

@keyframes showCursor {
    to { opacity: 1; }
}

/* Snaps character by character for Lines 1 and 2 */
@keyframes typingLine1 {
    from { width: 0; }
    to { width: 43ch; } /* "Mulburry Police Departement Archive Systems" is 43 characters */
}

@keyframes typingLine2 {
    from { width: 0; }
    to { width: 20ch; } /* "Username: MPD County" is 19 characters */
}

/* Snaps character by character for the Password label */
@keyframes typingPassword {
    from { max-width: 0; }
    to { max-width: 10ch; } /* "password: " is 10 characters */
}

/* --- Keyframes for New Typing Lines --- */
@keyframes typingCorrectPasswordL1 {
    from { width: 0; }
    to { width: 17ch; } /* "Access Granted... Loading Files..." is 32 characters */
}

@keyframes typingCorrectPasswordL2 {
    from { width: 0; }
    to { width: 22ch; } /* "Case File #8842: Decrypted successfully." is 39 characters */
}

@keyframes typingIncorrectPassword {
    from { width: 0; }
    to { width: 33ch; } /* "Case File #8842: Decrypted successfully." is 39 characters */
}

@keyframes revealInput {
    to { opacity: 1; }
}

@keyframes terminalVanish {
    to { display: none; opacity: 0; height: 0; }
}

/* Blinking keyframes for the final interactive state */
@keyframes blinking {
    0% { color: var(--text-color); }
    50% { color: transparent; }
    100% { color: var(--text-color); }
};