/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
       /* --- [ SYSTEM VARIABLES ] --- */
:root {
    --term-bg: #050505;
    --term-red: #ED1100;
    --term-dark-red: #610700;
    --term-dim: #660000;
}

/* --- [ CRT MONITOR EFFECT ] --- */
body {
    background-color: var(--term-bg);
    color: var(--term-red);
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    cursor: url('https://files.catbox.moe/i5d6xj.png'), auto !important;
}

/* Scanlines 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: 2;
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
}

/* Cursors for interactive elements */
a, button, .dir-link {
    cursor: url('https://files.catbox.moe/i5d6xj.png'), pointer !important;
}

/* --- [ MAIN TERMINAL WINDOW ] --- */
.terminal-container {
    width: 100%;
    max-width: 800px;
    border: 2px solid var(--term-red);
    background-color: #000;
    box-shadow: 0 0 15px var(--term-dark-red), inset 0 0 15px var(--term-dim);
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* --- [ SYSTEM CLOCK ] --- */
.clock-display {
    font-size: 24px;
    color: #ff0000;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    padding: 10px 0;
    letter-spacing: 2px;
}

.clock-date {
    font-size: 10px;
    color: #880000;
    text-transform: uppercase;
}

/* --- [ HEADER & ASCII ] --- */
.ascii-art {
    white-space: pre;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    color: var(--term-dark-red);
    margin-bottom: 20px;
    text-shadow: 0 0 5px var(--term-dim);
}

.sys-header {
    border-bottom: 1px dashed var(--term-red);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-weight: bold;
}

/* --- [ BLINKING CURSOR EFFECT ] --- */
.typewriter {
    display: inline-block;
}
.typewriter::after {
    content: '█';
    animation: blink 1s step-start infinite;
}
@keyframes blink {
    50% { opacity: 0; }
}

/* --- [ LAYOUT GRID ] --- */
.grid-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
}

/* --- [ LEFT COLUMN: PFP & STATS ] --- */
.profile-pic-container {
    border: 2px solid #ff0000;
    padding: 5px;
    margin-bottom: 15px;
    background: #220000;
    box-shadow: 0 0 10px #ff0000;
}

.profile-pic {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.stat-block {
    border: 1px solid var(--term-dark-red);
    padding: 10px;
    font-size: 12px;
    margin-bottom: 15px;
}

.stat-block div {
    margin-bottom: 5px;
}

/* --- [ NEW NEON DIRECTORY MENU ] --- */
.directory-menu {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 5px !important;
    flex-wrap: wrap !important;
}

.dir-link {
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-decoration: none !important;
    padding: 3px 8px !important;
    transition: all 0.2s ease-in-out !important;
    border-radius: 4px !important;
    background: transparent !important;
}

.link-arte {
    color: #e2e612 !important; /* Yellow */
    border: 1px solid transparent !important;
    border-bottom: 2px solid #e2e612 !important;
}

.link-post {
    color: #00ffff !important; /* Cyan */
    border: 1px solid #00ffff !important;
    border-radius: 4px !important;
}

.link-dibujites {
    color: #cc33ff !important; /* Purple */
    border: 1px solid #cc33ff !important;
    border-radius: 10px !important; /* More rounded */
}

/* Glow on Hover */
.dir-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 10px currentColor !important;
    color: #ffffff !important;
}

/* --- [ BLINKIES & BADGES ] --- */
.blinkie-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.blinkie-list img {
    width: 150px;
    height: 20px;
    image-rendering: pixelated;
    border: 1px solid #440000;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.badge-grid img {
    width: 88px;
    height: 31px;
    image-rendering: pixelated;
    border: 1px solid #440000;
}

.badge-grid img:hover, .blinkie-list img:hover {
    border-color: #ff0000;
    filter: brightness(1.2);
}

/* --- [ LOG POSTS ] --- */
.log-post {
    border: 1px double #ff0000;
    background: rgba(20, 0, 0, 0.8);
    padding: 15px;
    margin-top: 20px;
    position: relative;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
}

.post-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    border-bottom: 1px solid #ff0000;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: #cc0000;
}

.post-content h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #ff0000;
    text-transform: uppercase;
}

.post-content p {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.post-footer {
    font-size: 11px;
    border-top: 1px dashed #440000;
    padding-top: 8px;
    text-align: right;
}

/* Base style for standard links inside text */
a {
    color: var(--term-red);
    text-decoration: none;
    border-bottom: 1px solid var(--term-dark-red);
}

a:hover {
    background: var(--term-red);
    color: #000;
}

/* --- [ AUDIO TERMINAL ] --- */
.audio-terminal {
    border: 1px solid var(--term-red);
    padding: 15px;
    margin-top: 20px;
    background: rgba(255, 0, 0, 0.05);
}

.audio-cmd-line {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}

.cmd-prompt {
    color: var(--term-dark-red);
}

.term-btn {
    background: transparent;
    color: var(--term-red);
    border: 1px solid var(--term-red);
    font-family: 'Courier New', Courier, monospace;
    padding: 2px 8px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
}

.term-btn:hover {
    background: var(--term-red);
    color: #000;
}

.term-btn:active {
    transform: translateY(1px);
}

/* --- [ ANIMATIONS ] --- */
@keyframes redPulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.blink-effect {
    animation: redPulse 3s infinite ease-in-out;
}

/* --- [ MOBILE RESPONSIVENESS ] --- */
@media (max-width: 600px) {
    .grid-layout {
        grid-template-columns: 1fr;
    }
    .ascii-art {
        display: none;
    }
}