/* -----------------------------------------------------------
   VARIABLES & RESET
----------------------------------------------------------- */
:root {
    --term-green: #33FF00;
    --term-dim: #1a8000;
    --term-bg: #000000;
    --term-red: #ff3333;
    --glow: 0 0 5px rgba(51, 255, 0, 0.6), 0 0 10px rgba(51, 255, 0, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--term-bg);
    color: var(--term-green);
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
    height: 100vh;
    /* Prevent scroll on body until lock screen is gone */
    overflow: hidden; 
}

/* -----------------------------------------------------------
   CRT & GLITCH EFFECTS
----------------------------------------------------------- */
/* Text Bloom */
body, a, h1, h2, h3, input {
    text-shadow: var(--glow);
}

.header, .header span, th {
    /* 1. Kill the glow forcibly */
    text-shadow: none !important; 
    
    /* 2. Make text solid bright green (so it's legible) */
    color: var(--term-green) !important;
    
    /* 3. Ensure no opacity dimming */
    opacity: 1 !important;
    
    /* Formatting */
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--term-dim);
    padding: 10px 10px 10px 5px;
}

.header span {
    color: #2b9e00; /* A darker solid green, NO shadow */
}

/* Scanline Overlay */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 99999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none; /* Allows clicking through visual noise */
}

/* Screen Flicker */
@keyframes flicker {
    0% { opacity: 0.97; } 5% { opacity: 0.95; } 10% { opacity: 0.9; }
    15% { opacity: 0.95; } 20% { opacity: 0.99; } 50% { opacity: 0.95; }
    80% { opacity: 0.9; } 100% { opacity: 0.97; }
}

.crt-frame {
    animation: flicker 0.15s infinite;
    max-width: 1200px;
    margin: 20px auto;
    border: 1px solid var(--term-dim);
    height: calc(100vh - 40px);
    overflow-y: auto; /* Internal scroll */
    padding: 20px;
    box-shadow: inset 0 0 50px rgba(0, 20, 0, 0.8);
    position: relative;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.crt-frame::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* -----------------------------------------------------------
   LOCK SCREEN
----------------------------------------------------------- */
#terminal-lock {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: black; z-index: 10000; padding: 20px;
    display: flex; flex-direction: column; justify-content: flex-end;
    height: 100dvh;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 20px 60px 20px; 
}
#terminal-lock::-webkit-scrollbar {
    display: none;
}

.cli-line { min-height: 20px; margin-bottom: 5px; word-wrap: break-word; }

.input-line { display: none; align-items: center; margin-top: 10px; }
.prompt { color: var(--term-green); margin-right: 10px; white-space: nowrap; }

#user-input {
    background: transparent; border: none; color: var(--term-green);
    font-family: inherit; font-size: 1rem; width: 100%; outline: none;
}

/* -----------------------------------------------------------
   MAIN INTERFACE
----------------------------------------------------------- */
#main-interface {
    display: none;
    opacity: 0;
    transition: opacity 2s ease-in;
    width: 100%; height: 100%;
}

/* Typography */
h3 { font-weight: normal; text-transform: uppercase; margin-bottom: 1em; border-bottom: 1px solid var(--term-dim); padding-bottom: 5px; }
a { color: var(--term-green); text-decoration: none; }
a:hover { background: var(--term-green); color: black; text-shadow: none; }
.dim-text { color: var(--term-dim); text-shadow: none; }
.section-break { border-bottom: 1px solid var(--term-green); margin: 40px 0; opacity: 0.5; }

/* Header */
header {
    display: flex; justify-content: space-between; border-bottom: 2px solid var(--term-green);
    padding-bottom: 10px; margin-bottom: 30px;
}
.status-tag { background: var(--term-green); color: black; padding: 0 4px; font-weight: bold; }

/* Hero */
.hero-container { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
.ascii-logo { 
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    line-height: 1.2; 
    color: var(--term-green); 
    white-space: pre; 
    overflow-x: hidden; /* Prevent horizontal scrollbars during typing */
    margin: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    margin-top: -10px;
}

.ascii-logo::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

#ascii-wrapper {
    /* 
       Approximate height of 8 lines of text (the logo size).
       1.2 line-height * 14px font * 8 lines ≈ 135px.
       Adjust this value if your font size changes.
    */
    min-height: 140px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
#ascii-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.ok-text { color: var(--term-green); font-weight: bold; }

canvas { width: 100%; height: 150px; border: 1px solid var(--term-dim); background: rgba(0, 20, 0, 0.5); }

/* Directory List */
.file-list { font-family: inherit; }

.file-row { 
    display: grid; 
    /* 
       Fixed widths for meta info, 1fr for filename to stretch 
    */
    grid-template-columns: 120px 1fr 100px 80px; 
    gap: 0px;
    padding: 12px 10px 12px 0; 
    align-items: center; 
}

.file-row:not(.header) {
    /* This is the SINGLE line separating rows */
    border-bottom: 1px dashed var(--term-dim); 
}

/* Specific Column Alignments */

.file-row span:nth-child(2) {
    text-align: left;
}

/* Cat ID (3rd col) - Center Align looks best for short codes */
.file-row span:nth-child(3) {
    text-align: center; 
}

/* Size (4th col) - Right Align, but prevent hitting the edge */
.file-row span:last-child {
    text-align: right;
    padding-right: 5px; /* Tiny buffer so it doesn't touch the invisible grid line */
}

/* Ensure child spans turn black on hover */
.file-row:not(.header):hover span {
    color: black !important;
}

.file-row.header {
    margin-bottom: 0; /* Remove gap */
    border-bottom: 0;
}

.header { color: var(--term-green); font-weight: bold; }

/* Process Table */
.process-table { width: 100%; border-collapse: collapse; padding: 8px 10px 8px 10px; }
.process-table th { text-align: left; border-bottom: 1px solid var(--term-green); padding: 10px 10px 10px 5px; color: var(--term-dim); }
.process-table td { padding: 10px 5px; }
.process-table tr:hover { background: var(--term-dim); color: black; text-shadow: none; cursor: crosshair; }

/* Footer */
.readme-text { max-width: 600px; margin-bottom: 20px; }
.links-container { border: 1px solid var(--term-green); display: inline-block; padding: 10px; }
.links-container.a { border-bottom: none; }
.prompt-footer { margin-top: 50px; }
.cursor { display: inline-block; width: 10px; height: 18px; background: var(--term-green); animation: blink 1s step-end infinite; vertical-align: middle; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* -----------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------- */
@media (max-width: 768px) {
    .file-row { grid-template-columns: 1fr auto; gap: 5px; }
    .file-row span:nth-child(1),
    .file-row span:nth-child(3) { 
        display: none; 
    }
    .process-table, .process-table tbody, .process-table tr, .process-table td { display: block; }
    .process-table thead { display: none; }
    .process-table tr { border-bottom: 1px dashed var(--term-dim); margin-bottom: 15px; }
    
    .ascii-logo { 
        /* Calculated to fit the "Big" font width on a phone screen */
        font-size: 1.6vw; 
        
        /* Optical alignment to pull it slightly left */
        margin-left: -5px; 
        
        /* Ensure it doesn't overflow the container */
        width: 100%;
        overflow-x: hidden;
        min-height: 20vw;
    }
    
    /* Adjust spacing */
    .hero-container {
        gap: 15px;
    }
    .crt-frame { margin: 0; height: 100vh; border: none; }

    #terminal-lock {
        padding-bottom: 25px;
    }
}