/* --- VARIABLES & RESET --- */
:root {
    --bg-deep: #050a0e;
    --bg-panel: #131c25;
    --neon-green: #00ff41;
    --neon-dim: rgba(0, 255, 65, 0.15);
    --text-bright: #ffffff;
    --text-muted: #94a3b8;
    --text-inactive: #555;
    
    --font-header: 'Orbitron', sans-serif;
    --font-mono: 'Fira Code', monospace;
    --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-deep); color: var(--text-bright); font-family: var(--font-body); padding-bottom: 60px; }

/* --- UTILITIES & EFFECTS --- */
.scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 99;
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,255,65,0.02) 3px);
}
.blinking-icon { animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: 0.5; } }

/* --- LAYOUT FRAMEWORK --- */
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.console-header {
    background: rgba(5,10,14,0.95); border-bottom: 1px solid var(--neon-dim);
    padding: 20px 0; margin-bottom: 30px; backdrop-filter: blur(5px); position: sticky; top:0; z-index: 10;
}
.logo { font-family: var(--font-header); color: var(--neon-green); font-size: 1.3rem; letter-spacing: 1px; text-align: center;}
.section-title { font-family: var(--font-mono); color: var(--neon-green); margin-bottom: 20px; font-size: 1rem; }
#code-feed-container { display: flex; flex-direction: column; gap: 15px; }


/* --- CODE PACKET COMPONENT (Desktop Default) --- */
.packet {
    background: var(--bg-panel);
    border: 1px solid var(--neon-dim);
    border-left: 3px solid var(--neon-green);
    transition: all 0.2s ease-in-out;
}

.packet:hover {
    border-color: var(--neon-green);
    box-shadow: 0 0 15px var(--neon-dim);
}

/* INACTIVE STATE */
.packet.inactive {
    border-left-color: #444; opacity: 0.7;
}
.packet.inactive .code-text { color: var(--text-inactive); text-decoration: line-through; text-shadow: none; }
.packet.inactive .status-dot { background: #444; box-shadow: none; animation: none;}


/* MAIN BAR GRID SYSTEM */
.packet-main {
    display: grid;
    /* Icon | Code Info (auto expand) | Date Meta | Actions */
    grid-template-columns: 50px 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
}

.game-icon img { width: 100%; height: auto; filter: drop-shadow(0 0 4px var(--neon-dim)); }

.code-meta { display: flex; flex-direction: column; }
.game-title { font-size: 0.8rem; color: var(--text-muted); }
/* The HERO element */
.code-text {
    font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
    color: var(--neon-green); text-shadow: 0 0 8px var(--neon-dim); letter-spacing: 1px;
}

.date-meta {
    font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted);
    border-left: 1px solid var(--neon-dim); padding-left: 20px; height: 40px; display: flex; align-items: center;
}

.actions { display: flex; align-items: center; gap: 15px; }

/* Status Badge */
.status { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.75rem; }
.status-dot { width: 8px; height: 8px; background: var(--neon-green); border-radius: 50%; box-shadow: 0 0 5px var(--neon-green); animation: blink 1.5s infinite; }

/* Copy Button Stylized */
.btn-copy {
    background: var(--neon-green); color: var(--bg-deep); border: none;
    padding: 10px 25px; font-family: var(--font-header); font-weight: 700; font-size: 0.9rem;
    cursor: pointer; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
    transition: 0.1s; min-width: 90px;
}
.btn-copy:hover { background: #fff; box-shadow: 0 0 15px var(--neon-green); }
.btn-copy:active { transform: scale(0.98); }

.btn-expand { color: var(--text-muted); cursor: pointer; padding: 5px; transition: transform 0.3s; }
.packet.expanded .btn-expand { transform: rotate(180deg); color: var(--neon-green);}

/* DETAILS PANEL */
.packet-details {
    max-height: 0; overflow: hidden;
    background: rgba(0,0,0,0.2);
    transition: max-height 0.3s ease-out;
    padding: 0 20px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    font-family: var(--font-mono); font-size: 0.85rem;
}
.packet.expanded .packet-details { max-height: 200px; padding-top: 15px; padding-bottom: 20px; border-top: 1px solid var(--neon-dim);}

.detail-label { display: block; color: var(--neon-green); font-size: 0.7rem; margin-bottom: 5px;}

.text-neon { color: var(--neon-green); }
.text-muted { color: var(--text-muted); }

.feed-group { min-height: 100px; display: flex; flex-direction: column; gap: 15px; }
.empty-msg { font-family: var(--font-mono); color: #444; text-align: center; padding: 20px; border: 1px dashed #333; }
.error-msg { color: red; text-align: center; font-family: var(--font-mono); }

/* Report Button */
.btn-report {
    background: transparent; border: 1px solid #444; color: #666;
    width: 35px; height: 35px; border-radius: 4px; cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.btn-report:hover { border-color: red; color: red; }


/* --- MOBILE BREAKPOINT (The Big Shift) --- */
@media (max-width: 768px) {
    .container { padding: 0 15px; }
    
    .packet-main {
        /* Switch to a vertical stack card layout */
        display: flex; flex-direction: column;
        gap: 15px; padding: 20px;
        text-align: center;
    }

    /* Top section: Icon and Name */
    .game-icon img { width: 40px; margin: 0 auto; }
    .code-meta { align-items: center; }
    
    /* Make code HUGE */
    .code-text { font-size: 1.8rem; margin: 10px 0; word-break: break-all;}

    /* Hide date on main card view to save space */
    .date-meta { display: none; }

    /* Rearrange actions */
    .actions { flex-direction: column; width: 100%; gap: 15px; }
    .status { order: -1; } /* Move status to top */
    
    /* Full width copy button for easy tapping */
    .btn-copy { width: 100%; padding: 15px; clip-path: none; border-radius: 4px; font-size: 1rem;}
    
    .btn-expand { position: absolute; top: 15px; right: 15px; }
    
    /* Single column details on mobile */
    .packet-details { grid-template-columns: 1fr; }
    /* Add to your existing CSS */
    
    /* Inactive Packet Tweaks */
    .packet.inactive { filter: grayscale(100%); opacity: 0.5; border-left-color: #333; }
    .packet.inactive .status-dot { background: #555; animation: none; }
}

/* --- TEXT & PAGE CONTENT ADDITIONS --- */

/* Re-using .packet but for text content */
.content-pad {
    padding: 30px;
    line-height: 1.6;
    color: var(--text-bright);
}

.content-pad h2 {
    font-family: var(--font-header);
    color: var(--neon-green);
    border-bottom: 1px solid var(--neon-dim);
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
}
.content-pad h2:first-child { margin-top: 0; }

.content-pad p { margin-bottom: 15px; color: #ccc; }
.content-pad ul { list-style: none; padding-left: 10px; margin-bottom: 20px;}
.content-pad li { margin-bottom: 10px; display: flex; gap: 10px;}
.content-pad li::before { content: '>'; color: var(--neon-green); font-weight: bold;}

/* FORM STYLES (Cyberpunk Inputs) */
.cyber-form { display: flex; flex-direction: column; gap: 20px; }

.form-group label {
    display: block;
    font-family: var(--font-mono);
    color: var(--neon-green);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.cyber-input {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--neon-dim);
    color: var(--text-bright);
    padding: 15px;
    font-family: var(--font-mono);
    outline: none;
    transition: 0.3s;
}

.cyber-input:focus {
    border-color: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-dim);
    background: rgba(0, 255, 65, 0.05);
}

textarea.cyber-input { resize: vertical; min-height: 120px; }

/* Navigation Links (Simple top bar) */
.nav-links {
    display: flex; gap: 20px; justify-content: center; margin-bottom: 30px;
}
.nav-link {
    color: var(--text-muted); text-decoration: none; font-family: var(--font-mono); font-size: 0.9rem;
    transition: 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--neon-green); text-shadow: 0 0 5px var(--neon-dim); }

/* FIX: Keeps list headers like "MANUAL TESTING" on one line */
.content-pad li strong {
    white-space: nowrap; /* Forces text to stay on one line */
    flex-shrink: 0;      /* Tells flexbox: DO NOT squish this element */
    margin-right: 5px;   /* Adds a tiny gap between title and text */
}

/* --- MOBILE BREAKPOINT (Updated for Symmetry) --- */
@media (max-width: 768px) {
    .container { padding: 0 15px; }
    
    /* 1. SYMMETRICAL NAVIGATION GRID */
    .nav-links {
        display: grid; /* Use Grid instead of Flex */
        grid-template-columns: 1fr 1fr; /* Two equal columns (2x2 layout) */
        gap: 10px;
        margin-bottom: 25px;
    }

    .nav-link {
        font-size: 0.8rem;
        background: rgba(0,255,65,0.05);
        padding: 12px 5px; /* Taller touch targets */
        border: 1px solid var(--neon-dim);
        border-radius: 4px;
        text-align: center;
        display: flex;             /* Centering text vertically */
        align-items: center;       /* Centering text vertically */
        justify-content: center;   /* Centering text horizontally */
        height: 100%;
    }
    
    .nav-link.active {
        background: var(--neon-green);
        color: var(--bg-deep);
        font-weight: 700;
        text-shadow: none;
    }

    /* 2. FIX HEADER OVERFLOW (The "Bugged Out" Text) */
    .content-pad h2 {
        font-size: 0.9rem; /* Smaller font for headers */
        /*word-wrap: break-word; /* Break long words if needed */
        line-height: 1.4;
    }

    /* 3. FIX PACKET LAYOUT */
    .packet-main {
        display: flex; flex-direction: column;
        gap: 15px; padding: 20px;
        text-align: center;
    }

    .game-icon img { width: 40px; margin: 0 auto; }
    .code-meta { align-items: center; }
    
    /* Ensure big text (Codes & Email) shrinks to fit */
    .code-text { 
        font-size: 0.95rem; /* Slightly smaller to fit phone screens */
        margin: 10px 0; 
        /*word-break: break-all; /* Critical: Forces code to wrap if too long */
        line-height: 1.2;
    }

    .date-meta { display: none; }
    .actions { flex-direction: column; width: 100%; gap: 15px; }
    .status { order: -1; }
    
    .btn-copy { width: 100%; padding: 15px; clip-path: none; border-radius: 4px; font-size: 1rem;}
    .btn-expand { position: absolute; top: 15px; right: 15px; }
    .packet-details { grid-template-columns: 1fr; }

    /* Text padding fix */
    .content-pad {
        padding: 30px 15px !important;
    }
    
    .logo { font-size: 1rem; }

    /* ... existing mobile styles ... */

    /* 4. FIX LISTS ON MOBILE (The "Uncanny" Fix) */
    /* --- MOBILE LIST REPAIR (The "Final Fix") --- */
@media (max-width: 768px) {
    .content-pad ul {
        padding: 0;
        margin: 20px 0;
    }

    .content-pad li {
        display: block;      /* Change from flex to block for natural flow */
        position: relative;
        padding-left: 25px;  /* Space for the arrow */
        margin-bottom: 25px; /* Space between sections */
    }

    /* The Arrow Fix */
    .content-pad li::before {
        content: '>';
        position: absolute;
        left: 0;
        top: 0;
        color: var(--neon-green);
        font-weight: bold;
    }

    /* The Header Fix */
    .content-pad li strong {
        display: block;      /* Forces description to the next line */
        font-family: var(--font-mono);
        font-size: 1rem;
        color: var(--neon-green);
        margin-bottom: 8px;  /* Gap between header and description */
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    /* The Description Fix */
    .content-pad li span, 
    .content-pad li {
        padding-left: 0;     /* Reset padding for the paragraph text */
        line-height: 1.6;
        color: #ccc;
        display: block;
    }
}
}