/* --- Global Styles --- */
body {
    background-color: #000;
    background-image: url('background.png'); 
    background-repeat: repeat;
    color: #ccc;
    font-family: 'Zen Maru Gothic', sans-serif; /* Run text */
    font-size: 11px;
    margin: 0;
    padding: 20px 0;
}

#container {
    width: 1500px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 15px;
}

#main-content {
    display: grid;
    grid-template-columns: 1fr 210px; /* Posts | Right Sidebar */
    gap: 15px;
    padding: 15px;
    border: 3px double #8B0000; /* The "separation" border you wanted */
    background-color: rgba(0, 0, 0, 0.5);
}

/* --- Three Column Grid --- */
#content-wrapper {
    display: grid;
    grid-template-columns: 210px 1fr; /* Sidebar | Everything else */
    gap: 20px;
    align-items: start;
}

#sidebar {
    position: sticky;
    border: 3px double #8B0000;
    top: 10px;
}

/* --- Gothic Box Styling --- */
.box, .post {
    background-color: #000;
    border: 1px solid #8B0000;
    outline: 1px solid #8B0000;
    outline-offset: -4px;
    padding: 12px;
    margin-bottom: 15px;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center;
    will-change: transform;
}

.box, .post.shifting {
    border-color: #ff0000;
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.5);
}

/* --- Header Typography --- */
header h1 {
    font-family: 'Jersey 15', sans-serif !important;
    font-size: 30px; /* Slightly smaller reduces pixel block size */
    color: #8B0000;
    margin: 0;
    
    /* Horizontal Squeezing: This is the best way to make pixel fonts look thinner */
    display: inline-block;
    transform: scaleX(0.7); 
    transform-origin: left; /* Keeps it aligned to the left as per your code */
    
    /* Spacing: Prevents the squeezed letters from touching */
    letter-spacing: 7px; 
    
    line-height: 1;
    
    /* Optional: Sharpness filter */
    filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.5));
}

.subtitle {
    font-family: 'Explora', serif;
    font-size: 26px;
    color: #999;
    font-weight: bold;
    text-align: center;
    margin-top: -5px;
}

/* --- Box Titles --- */
h2, h3 {
    background: #8B0000;
    color: #fff;
    font-family: 'VT323', monospace; /* Terminal style for titles */
    font-weight: 400;
    font-size: 18px; /* Pixel fonts need slightly larger px to be crisp */
    margin: -12px -12px 10px -12px;
    padding: 2px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Gallery & Hover --- */
.header-gallery {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px 0;
}

.header-gallery img {
    width: 190px;
    height: 190px;
    object-fit: cover;
    border: 1px solid #444;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.header-gallery img:hover {
    filter: grayscale(0%) sepia(30%); /* Revealed color on hover */
    border-color: #8B0000;
}

/* --- CD Player --- */
.cd-player-mini {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 1px;
    color: #000;
}

.cd-titlebar {
    background: linear-gradient(90deg, #8B0000, #330000);
    font-family: 'VT323', monospace;
    color: white;
    padding: 2px 4px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.cd-inset {
    background: #fff;
    color: #000;
    border: 2px inset #808080;
    padding: 2px;
    margin-bottom: 4px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
}

/* --- Widgets --- */
.counter {
    text-align: center;
    font-family: 'Jersey 10', sans-serif;
    color: #FFD700;
    font-size: 20px;
    background: #111;
    border: 1px solid #8B0000;
}

.friend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.f-slot { aspect-ratio: 1/1; background: #222; border: 1px solid #444; }

/* Links */
a { color: #a30000; text-decoration: none; }
a:hover { background: #8B0000; color: #fff; }

footer {
    text-align: center;
    font-size: 10px;
    margin-top: 20px;
    border-top: 1px dashed #444;
}

#mood-icon {
    margin-top: 15px;
    font-size: 60px;
    display: block;
    text-align: center;
    filter: drop-shadow(0 0 15px #c10505); /* Red "Aura" */
}


#status-time {
    display: block;
    font-size: 8px;
    color: #444; /* Faded gothic look */
    margin-top: 8px;
    text-transform: uppercase;
}

#status-text {
    margin-top: 0px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
}
@keyframes pulse {
    0% { opacity: 1; text-shadow: 0 0 5px #0f0; }
    50% { opacity: 0.3; text-shadow: 0 0 0px #0f0; }
    100% { opacity: 1; text-shadow: 0 0 5px #0f0; }
}
input:focus {
    border-color: #8B0000 !important;
    box-shadow: 0 0 5px #8B0000;
    transition: 0.3s;
}

button:hover {
    background: #8B0000 !important;
    color: #000 !important;
    font-weight: bold;
    box-shadow: 0 0 10px #ff0000;
}
/* Container for the avatar to manage the interaction */
.avatar-interaction-container {
    position: relative;
    width: 150px;   /* Explicit Width */
    height: 180px;  /* Explicit Height */
    margin: 0 auto;
    border: 1px solid #8B0000;
    background: #050505;
    box-shadow: inset 0 0 50px #000;
    overflow: hidden; /* This crops the giant image to the box size */
}

.avatar-img {
    width: 100%;    /* Forces image to fit the 150px width */
    height: 100%;   /* Forces image to fit the 180px height */
    object-fit: cover; /* Ensures your face isn't squished/stretched */
    filter: grayscale(100%) contrast(120%) sepia(20%);
    display: block;
}

/* On hover, trigger the violent but dark glitch */
.avatar-interaction-container:hover .avatar-img {
    /* Using steps(1) makes the glitch snap between states violently */
    animation: sanguine_jumpscare 0.2s steps(1) infinite;
}

/* Sanguine Glitch: No White, Only Deep Red and Distortion */
@keyframes sanguine_jumpscare {
    0% { 
        filter: grayscale(0%) contrast(300%) brightness(0.7) sepia(100%) saturate(20) hue-rotate(-15deg);
        transform: translate(2px, -1px) skewX(2deg);
    }
    33% { 
        filter: grayscale(100%) contrast(500%) brightness(0.4); 
        transform: translate(-3px, 2px) scale(1.03);
    }
    66% { 
        filter: grayscale(0%) contrast(300%) brightness(0.7) sepia(100%) saturate(20) hue-rotate(15deg);
        transform: translate(1px, -2px) skewX(-2deg);
    }
    100% { 
        /* Back to normal-ish to create the flicker loop */
        filter: grayscale(100%) contrast(120%) sepia(20%);
        transform: translate(0, 0) scale(1);
    }
}
.eye-socket {
    position: absolute;
    width:2px;  /* Small boundary */
    height: 0.005px;  /* Narrower height to keep it inside the glasses frames */
    pointer-events: none;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pupil {
    position: absolute;
    width: 4px;
    height: 4px;
    /* New Color: Sanguine Ember */
    background: #ffffff65; 
    border-radius: 50%;
    /* Subtle glow that doesn't overwhelm the iris */
    box-shadow: 0 0 4px #ff0000, 0 0 8px #4a0000;
    transition: transform 0.05s linear;
    opacity: 0.9;
}

/* Hover state: The eyes don't just get bright, they get intense */
.avatar-interaction-container:hover .pupil {
    background: #cfcfcf00;
    box-shadow: 0 0 10px #ff0000;
}
#ghost-entity {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    font-family: 'VT323', monospace;
    font-size: 32px;
    color: #8B0000;
    z-index: 10000;
    text-shadow: 0 0 8px #ff0000;
    opacity: 0; /* Hidden until it starts hunting */
    will-change: transform;
    white-space: nowrap;
}

/* Container for the Victorian Specimen */
.specimen-box {
    background-color: #f9e8c1 !important; /* Aged paper color */
    color: #2c2c2c !important;
    border: 1px solid #3d3d3d;
    position: relative;
    overflow: hidden;
    padding: 15px; /* Added padding for breathing room */
}

/* The frame around your etching */
.etching-frame {
    width: 100%;
    text-align: center;
    padding: 2px 0;
    border-bottom: 1px double #8B0000;
    margin-bottom: 10px;
}

/* Consolidated Image Styling - "Lead Dev" Optimized */
#flower-img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    mix-blend-mode: multiply; 
    transition: opacity 0.5s ease-in-out; /* Smooth transition for the day swap */
}

/* Victorian Typography */
.explora-font {
    font-family: 'Explora', serif;
    font-size: 22px;
    margin: 0;
    color: #8B0000;
    text-align: center;
    line-height: 1.2;
}

/* Matching the <span> injected by your JS */
.latin-subtitle {
    font-family: 'Zen Maru Gothic', sans-serif; /* Your choice from the snippets */
    font-style: italic;
    font-size: 0.85rem;
    color: #555;
    display: block;
    text-align: center;
    margin-top: -2px;
    letter-spacing: 1px;
}

.meaning-text {
    font-style: italic;
    font-size: 10px;
    line-height: 1;
    color: #444;
    text-align: center;
    margin-top: 2px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* The 'Cyberdeck' style footer */
.catalog-footer {
    border-top: 1px solid #ddd;
    margin-top: 10px;
    margin-bottom: -2px;
    padding-top: 5px;
    font-family: 'VT323', monospace;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
}