/* ================= GLOBAL RESETS ================= */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    cursor: url('cursor.png'), auto !important;
    overflow-x: hidden;
}

a, button, .control-btn, .merchant-interaction, .ware-item, .coffin-wrapper {
    cursor: url('curse.png'), pointer !important;
}

/* ================= BACKGROUND & LANTERN ================= */
/* ================= BACKGROUND & LANTERN ================= */
body.manor-body {
    min-height: 100vh;
    margin: 0;
    
    /* Keep all your existing rain.gif and background rules here! */
    background-color: #050000; 
    background-image: url('rain.gif'); 
    background-repeat: repeat; 
    /* ... etc ... */
}



/* ================= BLOOD ROOF & DRIPS ================= */
.blood-roof {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    display: flex; justify-content: space-between; z-index: 1; pointer-events: none; 
}
.drip { position: relative; height: 0px; }
.drip::after {
    content: ""; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); animation: droplet-alive 2s infinite alternate;
}
.drip:nth-child(1) { width: 6px; background-color: #730000; animation: gusher 4.5s steps(25, end) infinite 0.5s; }
.drip:nth-child(1)::after { width: 10px; height: 10px; background-color: #730000; box-shadow: -4px -6px 0 #730000, 4px -4px 0 #730000; }
.drip:nth-child(2) { width: 2px; background-color: #4a0000; animation: trickle 7s steps(35, end) infinite 1.2s; }
.drip:nth-child(2)::after { width: 4px; height: 6px; background-color: #4a0000; }
.drip:nth-child(3) { width: 4px; background-color: #5c0000; animation: trickle 5.5s steps(30, end) infinite 0.2s; }
.drip:nth-child(3)::after { width: 8px; height: 6px; background-color: #5c0000; box-shadow: -2px -4px 0 #5c0000; }
.drip:nth-child(4) { width: 2px; background-color: #8a0303; animation: gusher 3.8s steps(20, end) infinite 2.5s; }
.drip:nth-child(4)::after { width: 6px; height: 4px; background-color: #8a0303; }
.drip:nth-child(5) { width: 6px; background-color: #4a0000; animation: trickle 8s steps(40, end) infinite 3s; }
.drip:nth-child(5)::after { width: 12px; height: 8px; background-color: #4a0000; box-shadow: -4px -4px 0 #4a0000, 4px -6px 0 #4a0000, 0 -10px 0 #4a0000; }
.drip:nth-child(6) { width: 4px; background-color: #730000; animation: gusher 5s steps(25, end) infinite 1.5s; }
.drip:nth-child(6)::after { width: 6px; height: 8px; background-color: #730000; box-shadow: 2px -4px 0 #730000; }
.drip:nth-child(7) { width: 2px; background-color: #5c0000; animation: trickle 6.5s steps(30, end) infinite 0.8s; }
.drip:nth-child(7)::after { width: 4px; height: 4px; background-color: #5c0000; }
.drip:nth-child(8) { width: 4px; background-color: #8a0303; animation: gusher 4.2s steps(25, end) infinite 2.2s; }
.drip:nth-child(8)::after { width: 8px; height: 6px; background-color: #8a0303; box-shadow: -2px -4px 0 #8a0303, 2px -2px 0 #8a0303; }
.drip:nth-child(9) { width: 2px; background-color: #4a0000; animation: trickle 5.8s steps(30, end) infinite 0.1s; }
.drip:nth-child(9)::after { width: 6px; height: 4px; background-color: #4a0000; }
.drip:nth-child(10){ width: 4px; background-color: #730000; animation: gusher 4.8s steps(25, end) infinite 1.8s; }
.drip:nth-child(10)::after { width: 8px; height: 8px; background-color: #730000; box-shadow: -2px -6px 0 #730000; }

@keyframes gusher {
    0%   { height: 0vh; opacity: 1; margin-left: 0; }
    25%  { margin-left: 2px; } 
    50%  { height: 50vh; opacity: 1; margin-left: -2px; } 
    75%  { margin-left: 0px; }
    90%  { height: 100vh; opacity: 0.8; }
    100% { height: 110vh; opacity: 0; }
}
@keyframes trickle {
    0%   { height: 0vh; opacity: 1; margin-left: 0; }
    20%  { height: 15vh; opacity: 1; } 
    30%  { margin-left: 2px; } 
    40%  { margin-left: -2px; } 
    45%  { height: 15vh; opacity: 1; margin-left: 0; } 
    65%  { height: 70vh; opacity: 1; } 
    90%  { height: 100vh; opacity: 0.8; }
    100% { height: 110vh; opacity: 0; }
}
@keyframes droplet-alive {
    0%, 100% { filter: brightness(1); transform: translateX(-50%) scale(1); }
    15% { filter: brightness(1.5); }
    40% { transform: translateX(-50%) scale(1.3); }
}

/* ================= MANOR LAYOUT & HEADER ================= */
#manor-container {
    width: 1300px; max-width: 95%; margin: 40px auto; padding: 20px;
}

.site-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px dashed #5c0000; padding-bottom: 20px; margin-bottom: 50px;
}

.main-title {
    font-family: 'Jacquard 12', cursive; font-size: 54px; color: #ff2a2a; margin: 0; text-shadow: 3px 3px 0px #000;
}

.site-controls { display: flex; gap: 15px; z-index: 1000; }
/* Target the button containers */
.control-btn {
    width: 32px;  /* Original was likely 40px or 48px */
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Target the images inside the buttons */
.control-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keeps the pixels crisp while shrinking */
    image-rendering: pixelated; 
    transition: transform 0.2s;
}

/* Optional: Keep the hover effect proportional */
.control-btn:hover img {
    transform: scale(1.15);
}

.manor-layout {
    display: flex; gap: 40px; align-items: flex-end; justify-content: center; position: relative; z-index: 10;
}
.sidebar-left, .sidebar-right {
    flex: 0 0 280px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.center-content { flex: 1; max-width: 550px; }


/* ================= WINGS: COFFIN & ARCHWAY ================= */
.coffin-wrapper {
    position: relative; width: 220px; height: 140px; display: block; margin-bottom: 20px;
}
.coffin-idle, .coffin-active {
    position: absolute; bottom: 0; left: 0; width: 100%; image-rendering: pixelated; transition: opacity 0.2s;
}
.coffin-active { opacity: 0; }
.coffin-wrapper:hover .coffin-idle { opacity: 0; }
.coffin-wrapper:hover .coffin-active { opacity: 1; }

.door-container {
    position: relative; width: 100%; text-align: center; display: flex; justify-content: center;
}
.door-image {
    width: 100%; max-width: 500px; display: block; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
}
.hidden-navigation {
    position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 1;
}
.category-list {
    display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 0;
}
.category-list a {
    font-family: 'Jacquard 12', cursive, serif !important; font-size: 28px; color: #E9E8BD; 
    text-decoration: none; pointer-events: auto; transition: color 0.2s, text-shadow 0.2s; text-transform: lowercase;
}
.category-list a:hover { color: #ff0000; text-shadow: 0 0 8px #ff0000; }


/* ================= THE MERCHANT & PARCHMENT BUBBLE ================= */
.merchant-container {
    position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; z-index: 50; margin-bottom: 20px;
}
.merchant-interaction {
    position: relative; display: flex; flex-direction: column; align-items: center; cursor: url('curse.png'), pointer !important;
}
.merchant-sprite { width: 180px; image-rendering: pixelated; transition: filter 0.2s;
clip-path: inset(30% 5% 0% 30%);}

.speech-bubble {
    background: #0d0000;
    border: 3px solid #c8922a;
    outline: 2px solid #8b0000;
    outline-offset: -4px;
    box-shadow:
        0 0 0 1px #000,
        4px 4px 0px #000;
    padding: 7px 10px 7px 10px;
    width: 160px;
    height: auto;
    min-height: 0;
    text-align: center;
    position: relative;
    margin-bottom: -40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    box-sizing: border-box;
    image-rendering: pixelated;
}

.speech-bubble::after {
    display: none;
}

.speech-bubble p {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #e8e8e8;
    margin: 0;
    line-height: 2;
    text-shadow: 1px 1px 0px #000;
    font-weight: normal;
    white-space: normal;
    word-break: break-word;
}

.parchment-btn {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: #c8922a;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    letter-spacing: 1px;
    padding: 0;
    cursor: url('curse.png'), pointer !important;
    text-transform: lowercase;
    text-shadow: 1px 1px 0px #000;
    transition: none;
    width: auto;
    text-align: center;
    display: block;
}

.parchment-btn:hover {
    color: #e8e8e8;
}

.parchment-btn:active {
    transform: none;
    box-shadow: none;
}
/* ================= THE CUSTOM ART SCROLL INVENTORY ================= */
#inventory-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(5px); z-index: 999;
}

.merchant-inventory {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; 
    
    /* THE SCALE MASTER: Change this height to scale the entire scroll up or down. */
    height: 90px; 
    
    background-image: url('holder.png');
    background-repeat: repeat-x; 
    /* Scales the repeating paper to exactly match the container height */
    background-size: auto 100%; 
    background-position: center;
    
    background-color: transparent; border: none;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.8));
    overflow: visible; 
}

/* The Unroll Animation */
.merchant-inventory:not(.hidden) {
    animation: unroll-custom-scroll 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes unroll-custom-scroll {
    0%   { width: 0; opacity: 0; }
    20%  { opacity: 1; }
    
    /* Increase this width! Try 380px or 400px so the 5 grid columns 
       spread out to perfectly match your 5 bright squares. */
    100% { width: 420px; opacity: 1; } 
}
/* THE CUSTOM HANDLES (Fixed clipping, perfectly overlapping) */
.merchant-inventory::before, .merchant-inventory::after {
    content: ''; position: absolute; 
    
    top: 50%; 
    transform: translateY(-50%); 
    
    /* Give the handles a nice big box so they NEVER clip */
    height: 120px; 
    width: 120px; 
    
    /* Forces the whole image to fit inside the box */
    background-size: contain; 
    background-repeat: no-repeat;
    
    /* Forces the handles to sit ON TOP of the middle scroll */
    z-index: 1001; 
}

.merchant-inventory::before { 
    background-image: url('left-scroll.png'); 
    /* Anchors the image so the paper part connects inward */
    background-position: right center; 
    
    /* TWEAK THIS: Controls horizontal placement. 
       Make it more negative (e.g., -70px) to push it further left. 
       Make it less negative (e.g., -50px) to pull it further right. */
    left: -60px; 
}

.merchant-inventory::after { 
    background-image: url('right-scroll.png'); 
    /* Anchors the image so the paper part connects inward */
    background-position: left center; 
    
    /* TWEAK THIS: Controls horizontal placement. 
       Make it more negative (e.g., -70px) to push it further right.
       Make it less negative (e.g., -50px) to pull it further left. */
    right: -60px; 
}



/* THE INVENTORY GRID */
.scroll-content {
    height: 100%; width: 100%; opacity: 0;
    animation: fade-ink 0.3s ease-in forwards 0.3s; 
}
@keyframes fade-ink { to { opacity: 1; } }

.inventory-grid { 
    display: grid; 
    /* This divides the scroll perfectly into 5 equal slots! */
    grid-template-columns: repeat(5, 1fr); 
    height: 100%; width: 100%;
}

.ware-item {
    height: 100%; width: 100%; 
    background: transparent; border: none; box-shadow: none;
    cursor: url('curse.png'), pointer !important; transition: all 0.2s;
    display: flex; justify-content: center; align-items: center;
    
    position: relative;
    top: 0px;
}
/* The invisible spacers for the left and right edges */
.ware-item.spacer {
    pointer-events: none; /* Can't be clicked */
    cursor: default !important;
}

/* The Item Animations (Subtle bobbing) */
.ware-item img { 
    height: 42px; width: auto; object-fit: contain; image-rendering: pixelated; 
    transition: transform 0.2s; 
    /* The subtle floating animation for your books & boots */
    animation: item-float 3.5s ease-in-out infinite alternate; 
}

/* Offsets the animations so they don't all float at the exact same time */
.ware-item:nth-child(2) img { animation-delay: 0s; }
.ware-item:nth-child(3) img { animation-delay: 1.2s; }
.ware-item:nth-child(4) img { animation-delay: 0.6s; }

@keyframes item-float {
    0% { transform: translateY(0px); filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2)); }
    100% { transform: translateY(-4px); filter: drop-shadow(0 6px 3px rgba(0,0,0,0.3)); }
}

.ware-item:hover:not(.spacer) { background: transparent; }
.ware-item:hover:not(.spacer) img { transform: scale(1.15) translateY(-2px) !important; animation: none; }

.background-chase {
    position: absolute;
    /* 1. ADJUST THIS until the floor of this box is on your red line */
    top: 70px; 
    
    /* 2. WIDTH: Align these with the edges of your dashed line */
    left: 2%; 
    width: 95%; 
    
    /* 3. HEIGHT: Set this to be taller than the sprites (e.g., 50px) */
    height: 70px; 
    
    z-index: -1;
    pointer-events: none;
    overflow: hidden; 
}

.running-knight {
    position: absolute;
    /* 4. FORCE FEET TO THE BOTTOM */
    bottom: 0; 
    
    height: 55px; /* Knight Height */
    width: auto;
    image-rendering: pixelated;
    animation: background-run 10s linear infinite;
}

.chaser {
    /* 5. MAKE HEIGHT MATCH THE KNIGHT EXACTLY */
    height: 55px !important; 
    width: auto !important;
    bottom: 5 !important;
    animation-delay: 1.5s !important;
}

@keyframes background-run {
    0% { left: -100px; }
    100% { left: 100%; }
}
/* ================= MERCHANT CHANGELOG FRAME ================= */

/* 1. The Main Floating Container */
.changelog-container-right {
    position: absolute;
    bottom: 260px; /* Adjust to move the frame higher/lower above the merchant */
    left: 50%;
    transform: translateX(-50%);
    width: 190px; /* MASTER SIZE: Scale this up or down to resize everything */
    z-index: 10;
    pointer-events: none; /* Prevents the invisible box from blocking clicks */
}

/* 2. The Tinted Glass Background */
.changelog-container-right::before {
    content: '';
    position: absolute;
    /* Adjust these percentages to fit the glass perfectly inside your frame */
    top: 6%;      
    bottom: 6%;   
    left: 5%;     
    right: 5%;    
    background: rgba(20, 0, 0, 0.65); /* Dark cursed red/black tint */
    backdrop-filter: blur(4px); /* The frosted glass blur */
    -webkit-backdrop-filter: blur(4px); 
    z-index: -1; 
}

/* 3. The Pixel Art Frame Image */
.changelog-bg {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    display: block;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.8));
}

/* 4. The Text Boundary Box */
.changelog-text-area {
    position: absolute;
    /* This traps your text inside the frame's borders */
    top: 10%;       
    bottom: 10%;    
    left: 12%;      
    right: 12%;     
    width: auto;
    height: auto;
    background: transparent; 
    overflow-y: auto;
    pointer-events: auto; /* Lets you scroll the text if the list gets long */
    scrollbar-width: none; /* Hides scrollbar in Firefox */
}

/* Hides scrollbar in Chrome/Safari/Edge */
.changelog-text-area::-webkit-scrollbar { 
    display: none; 
}

/* 5. The Title (With the Unseen Lantern Swing) */
.changelog-title-inner {
    font-family: 'Jacquard 12', cursive;
    color: #ff2a2a; /* Cursed red */
    font-size: 24px;
    margin: 0 0 10px 0;
    text-align: center;
    text-shadow: 2px 2px 0px #000;
    text-transform: lowercase;
    
    /* THE EXACT ANIMATION YOU FOUND */
    animation: unseen-lantern-swing 6s infinite alternate steps(5);
}
/* 6. The List Entries */
.changelog-list-new {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: bold;
    color: #e8dcc4; /* Parchment color for high contrast against the dark glass */
    line-height: 1.6;
    text-align: left;
}

/* 7. The Red Dates */
.changelog-date {
    color: #ff2a2a; 
    font-weight: bold;
    margin-right: 6px;
}
/* ================= UTILITIES & FOOTER ================= */
.hidden { display: none !important; }

.manor-footer {
    position: relative; width: 100%; height: 100px; overflow: hidden; margin-top: -30px;
}
.running-knight {
    position: absolute; bottom: 5px; height: 120px; image-rendering: pixelated; z-index: 2; left: -200px; 
    animation: knight-patrol 10s linear infinite;
}
.chaser { animation-delay: 1.5s !important; height: 60px !important; width: auto !important; animation-fill-mode: both !important; }
@keyframes knight-patrol { 0% { left: -200px; transform: scaleX(1); } 100% { left: 120%; transform: scaleX(1); } }


/* ================= MOBILE RESPONSIVENESS ================= */
@media (max-width: 900px) {
    .site-header { flex-direction: column; gap: 20px; text-align: center; }
    .manor-layout { flex-direction: column; align-items: center; gap: 60px; }
    .sidebar-left { order: 3; } 
    .center-content { order: 1; }
    .sidebar-right { order: 2; } 
}
/* ================= FOOTER ================= */
.manor-footer {
    position: relative; width: 100%; height: 100px; overflow: hidden; margin-top: -30px;
}
.running-knight {
    position: absolute; bottom: 5px; height: 120px; image-rendering: pixelated; z-index: 2; left: -200px; 
    animation: knight-patrol 10s linear infinite;
}
.chaser {
    animation-delay: 1.5s !important; height: 60px !important; width: auto !important; animation-fill-mode: both !important;
}
@keyframes knight-patrol {
    0% { left: -200px; transform: scaleX(1); }
    100% { left: 120%; transform: scaleX(1); }
}

/* ================= MOBILE RESPONSIVENESS ================= */
@media (max-width: 900px) {
    .site-header { flex-direction: column; gap: 20px; text-align: center; }
    .manor-layout { flex-direction: column; align-items: center; gap: 60px; }
    .sidebar-left { order: 3; } /* Coffin moves to very bottom */
    .center-content { order: 1; }
    .sidebar-right { order: 2; } /* Merchant sits below archway */
    .category-list { margin-top: 50%; } 
}
/* ========================================= */
/* --- THE GUESTBOOK PAGE (guestbook.html) --- */
/* ========================================= */

/* 1. The Container (The Base) */
/* 1. The Header (Added more space below it) */
/* 1. The Header (Stationary, but cursed) */
/* 1. The Header (Grounded, heavy, and ominous) */
/* 1. The Anchored Text Block */
.gb-header {
    font-family: 'Jacquard 12', serif;
    font-size: 38px;
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
    margin-bottom: 25px; 
    
    /* A slow, 6-second cycle. 
       'steps(5)' forces it to snap strictly into 5 distinct hardware frames. 
       'alternate' makes the lantern swing back and forth like a pendulum.
    */
    animation: unseen-lantern-swing 6s infinite alternate steps(5);
}

/* 2. The 8-Bit Dynamic Lighting Keyframes */
@keyframes unseen-lantern-swing {
    0% {
        /* Frame 1: Light source is far LEFT. */
        color: #5c0000; /* Core text is in heavy shadow */
        text-shadow:
            -2px -2px 0px #b80d0d,  /* Left edge catches the dim red light */
            3px 3px 0px #110000,    /* Mid-shadow stretches right */
            6px 6px 0px #000000;    /* Deep trailing shadow hits the wall */
    }
    25% {
        /* Frame 2: Light source moves center-left. */
        color: #8a0303; /* Core text begins to warm up */
        text-shadow:
            -1px -2px 0px #d4b483,  /* A glint of oxidized gold hits the upper left */
            2px 4px 0px #110000,    
            4px 6px 0px #000000;    /* Shadow rotates downwards */
    }
    50% {
        /* Frame 3: Light source is dead CENTER, directly above. */
        color: #c40d0d; /* Core text is fully illuminated (fresh blood) */
        text-shadow:
            0px -2px 0px #f0c419,   /* Direct pure gold highlight on the very top */
            0px 4px 0px #110000,    
            0px 8px 0px #000000;    /* Shadow drops straight down, heavy and long */
    }
    75% {
        /* Frame 4: Light source moves center-right. */
        color: #8a0303; /* Core text cools down */
        text-shadow:
            1px -2px 0px #d4b483,   /* Gold glint shifts to the upper right */
            -2px 4px 0px #110000,   
            -4px 6px 0px #000000;   /* Shadow rotates to the left */
    }
    100% {
        /* Frame 5: Light source is far RIGHT. */
        color: #5c0000; /* Core text returns to heavy shadow */
        text-shadow:
            2px -2px 0px #b80d0d,   /* Right edge catches the dim red light */
            -3px 3px 0px #110000,   
            -6px 6px 0px #000000;   /* Deep shadow stretches far left */
    }
}

/* 2. The Smaller Hand (Restoring Animation) */
.gb-hand-inline {
    width: 25px;
    height: auto;
    image-rendering: pixelated;
    /* Ensuring it stays visible and bobs */
    display: inline-block;
    animation: hand-bob-vertical 0.8s steps(3) infinite !important;
}

@keyframes hand-bob-vertical {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(6px); }
}

/* 3. The Frame Container (With Internal Spacing) */
/* 1. The Shrunken Frame Container */
.gb-frame-wrapper {
    position: relative;
    /* SHRUNK: Down from 480x600 */
    width: 400px;  
    height: 500px; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #000;
    
    /* Internal padding to keep text off the wood */
    padding: 20px; 
    box-sizing: border-box;
}

/* 2. The Frame Overlay (No changes needed here, it scales automatically) */
.gb-frame-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('frameg.png'); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    z-index: 10;
    pointer-events: none; 
}

/* 3. The Atabook Iframe */
.gb-atabook {
    width: 100%; 
    height: 100%;
    border: none;
    background-color: transparent;
    z-index: 5;
    position: relative;
    /* Forces dark mode for scrollbars */
    color-scheme: dark;
}
/* 3. The Page Scroll Fix */
.gb-page {
    /* Since the frame is now very tall, we need to allow the page to scroll 
       so you can see the bottom of the frame and the "tread further" link */
    overflow-y: auto !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}


/* 1. The Exit Link (Shrunken and stationary) */
/* 1. The Exit Link (Shrunken, lurking in the dark) */
.gb-exit {
    position: absolute;
    bottom: 40px;
    right: 80px;
    font-family: 'Jacquard 12', serif;
    font-size: 18px; /* Shrunk down further */
    color: #5c0000; /* Dried, darkened blood color */
    text-decoration: none;
    letter-spacing: 1px;
}

/* 2. The Hover Reveal (Rigid 8-bit color snap) */
.gb-exit:hover {
    /* Snaps rigidly between blood and gold */
    animation: cursed-pulse 0.6s steps(2) infinite;
}

/* 3. The Gothic Cursor (A tiny cross) */
.gb-exit::before {
    content: "† "; 
    display: inline-block;
    color: #ff2a2a;
    font-size: 16px;
    opacity: 0; /* Hidden in the shadows */
}

/* 4. Trigger the Cross Animation */
.gb-exit:hover::before {
    opacity: 1;
    /* Snaps horizontally like an attacking retro sprite */
    animation: cross-stab 0.4s steps(2) infinite;
}

/* 5. The 8-Bit Keyframes */
@keyframes cursed-pulse {
    0% { color: #ff2a2a; text-shadow: 2px 2px 0px #000; }
    100% { color: #d4b483; text-shadow: 2px 2px 0px #380000; }
}

@keyframes cross-stab {
    0% { transform: translateX(-4px); }
    100% { transform: translateX(2px); }
}

/* 1. The Anchor (Keeps the guestbook dead center) */
.gb-center-anchor {
    position: relative;
    margin: 0 auto;
    width: max-content; /* Hugs the guestbook tightly */
    display: flex;
    justify-content: center;
}

/* 2. The Scroll Container (The Yellow Box Position) */
.gb-scroll-container {
    position: absolute;
    /* This pushes it completely outside the left edge of the guestbook */
    right: 100%; 
    margin-right: 140px; /* The gap between the scroll and the frame */
    
    top: 25%; /* Anchors it roughly 1/3 of the way down */
    width: 220px; /* Not too big, not too small */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    transform: scale(0.7); 
    
    /* This anchors the shrink to the top-right so it doesn't 
       mess up your spacing next to the guestbook */
    transform-origin: top right;
}

/* 1. The Scroll Head Container (Now transparent) */
.scroll-header {
    width: 100%;
    /* Remove fixed height so it perfectly hugs your image */
    position: relative;
    z-index: 5; 
    display: flex;
    justify-content: center;
}

/* 2. Your Custom Pixel Art Image */
.scroll-img {
    width: 100%; /* Adjust this if the image feels too wide */
    height: auto;
    image-rendering: pixelated; /* Keeps your art razor sharp */
    cursor: url('curse.png'), pointer;
    
    /* Optional: Adds a subtle shadow under the rolled parchment */
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.8));
}

/* 3. Tucking the Paper Underneath */

/* 4. The Unrolling Parchment */
.scroll-paper {
    width: 85%;
    background-color: #e8dcc4;
    border: 4px solid #380000;
    border-top: none; 
    padding: 15px 10px 20px 10px;
    text-align: center;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.8);
    
    /* THE UNROLL ANIMATION */
    transform-origin: top center;
    transform: scaleY(0); /* Squished flat */
    opacity: 0;
    pointer-events: none;
    margin-top: -20px; 
    /* Snappy drop-down effect */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s;
}

/* 5. The Hover Trigger */
.gb-scroll-container:hover .scroll-paper {
    transform: scaleY(1); /* Unrolls! */
    opacity: 1;
    pointer-events: auto; /* Activates the link */
}

/* 6. Text Styling */
.scroll-title {
    font-family: 'Jacquard 12', serif;
    font-size: 22px;
    color: #380000;
    margin: 0 0 10px 0;
    border-bottom: 2px dashed #a68c69;
    padding-bottom: 5px;
}

.scroll-reasons {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #380000;
    text-align: left;
    padding-left: 20px;
    margin: 0 0 20px 0;
    font-weight: bold;
}

.scroll-reasons li {
    margin-bottom: 8px;
}

/* 7. The Mirror of Kaus Collectible */
.mirror-kaus {
    width: 60px;
    height: auto;
    image-rendering: pixelated;
    cursor: url('curse.png'), pointer;
    
    /* 8-bit floating animation */
    animation: item-hover 2s steps(4) infinite;
    filter: drop-shadow(0 4px 2px rgba(0,0,0,0.5));
    transition: filter 0.2s, transform 0.2s;
}

.mirror-kaus:hover {
    
    transform: scale(1.2);
}

@keyframes item-hover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); } /* Snaps up */
}
/* ========================================= */
/* --- VIDEO GAMES COMPENDIUM --- */
/* ========================================= */

/* 1. The Top Page Header */
.page-header-panel {
    background-color: #1a1a1a; /* Dark charcoal */
    border: 2px solid #380000;
    border-top: 4px solid #8a0303; /* A heavy red accent line at the top */
    padding: 20px 30px;
    margin: 0 auto 50px auto;
    max-width: 800px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.8);
}

.page-title {
    font-family: 'Jacquard 12', serif;
    font-size: 36px;
    margin: 0 0 10px 0;
    text-transform: lowercase;
    
    /* THE GUESTBOOK ANIMATION */
    animation: unseen-lantern-swing 6s infinite alternate steps(5);
}
.page-desc {
    color: #a8a8a8; /* Aged grey text */
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

/* 2. The Games Feed Container */
.games-feed {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Massive spacing between different games */
    max-width: 800px;
    margin: 0 auto;
}

/* 3. Individual Game Card Layout */
.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 4. The Game Info Box (The Parchment) */
/* 4. The Game Info Box (The Parchment) */
.game-info-box {
    background-color: #e8dcc4; 
    border: 4px solid #380000;
    padding: 15px 25px;
    width: 100%; 
    
    /* THE FIX: Pulls the box UP to overlap the bottom of the frame */
    margin-top: -20px; 
    
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8);
}
.game-title {
    font-family: 'Jacquard 12', serif;
    font-size: 28px;
    color: #9a0a0a;
    margin: 0 0 8px 0;
}

.game-status {
    color: #111;
    font-size: 20px;
}

.game-thoughts {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #380000;
    line-height: 1.5;
    margin: 0;
    font-weight: bold;
}

/* 5. The Square Media Frame Container */
.game-media-frame {
    position: relative;
    width: 100%;
    /* Standard 4:3 retro aspect ratio for the frame. Change to 16:9 if your frame is wider! */
    aspect-ratio: 4 / 3; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Black void behind the image */
    
    /* THIS IS THE PADDING FOR YOUR THICK FRAME. 
       Adjust this so your game image doesn't bleed into your custom frame's borders! */
    padding: 20px; 
    box-sizing: border-box;
}

/* 6. The Overlay Custom Frame Sticker */
.game-media-frame::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* PUT YOUR CUSTOM SQUARE FRAME IMAGE HERE */
    background-image: url('fe1.png'); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    
    z-index: 5;
    pointer-events: none; /* Allows clicking the image/video underneath if needed */
}

/* 7. The Actual Game Screenshot/GIF */
.game-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the space cleanly without squishing */
    z-index: 1; 
}
/* ========================================= */
/* --- ART GALLERY COMPENDIUM --- */
/* ========================================= */

/* 1. The Grid Layout */
.art-gallery-grid {
    display: grid;
    /* MAGIC MATH: Creates columns that are at least 300px wide, and fills the screen */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px; /* Space between paintings */
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 2. The Individual Art Container */
.art-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* A subtle float effect when inspecting the art */
    transition: transform 0.3s ease; 
}

.art-piece:hover {
    transform: translateY(-5px); 
}

/* 3. The Heavy Pixel Frame */
/* 1. The Custom 9-Slice Frame */
/* 1. The Frame Container (The Base) */
/* 1. The Clean Container */
.art-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* THE FIX: Stripped the background color and box-shadow completely */
    background-color: transparent; 
    
    /* Keep the padding to squeeze Poe inside the frame */
    padding: 24px; 
    box-sizing: border-box;
}

/* 2. The Custom Frame Overlay */
.art-frame::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    background-image: url('fe2.png'); 
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated; 
    
    /* THE NEW SHADOW: This wraps the shadow around your pixel art perfectly, ignoring the invisible box */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.8));
    
    z-index: 5;
    pointer-events: none; 
}

/* 3. The Artwork Inside */
.art-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    /* THE FIX: Removed the black border and background */
    border: none; 
    background-color: transparent;
    z-index: 1; 
}
/* 5. The Brass/Parchment Nameplate */
/* 4. The Floating Nameplate (Hidden by default) */
/* 4. The Floating Nameplate (Hidden by default) */
/* 4. The Floating Nameplate (Aged Parchment Style) */
.art-plaque {
    /* Pulled straight from the Video Games box */
    background-color: #e8dcc4; 
    border: 4px solid #380000;
    
    padding: 8px 15px;
    text-align: center;
    width: 80%; 
    box-shadow: 0 5px 10px rgba(0,0,0,0.9);
    
    /* Positioned higher up as requested */
    position: absolute;
    bottom: 50px; 
    left: 50%;
    
    /* The Hover Magic (Stays exactly the same) */
    transform: translateX(-50%) translateY(15px); 
    opacity: 0; 
    pointer-events: none; 
    z-index: 20;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 5. The Plaque Text (Adjusted for the light background) */
.art-title {
    font-family: 'Jacquard 12', serif;
    font-size: 24px;
    color: #9a0a0a; /* Heavy manor red */
    margin: 0 0 5px 0;
    letter-spacing: 1px;
    text-shadow: none; /* Removed shadow so it looks like flat ink */
}

.art-date {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #380000; /* Dark, dried ink */
    font-weight: bold;
    margin: 0;
}
/* 5. The Hover Trigger */
.art-piece:hover .art-plaque {
    opacity: 1; /* Fades in */
    transform: translateX(-50%) translateY(0); /* Slides up into final position */
}
/* ========================================= */
/* --- LITERATURE COMPENDIUM --- */
/* ========================================= */

.literature-feed {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Space between different books */
}

.lit-entry {
    position: relative;
    width: 100%;
}

/* 1. The Main Text Frame (Using f56.png) */
.lit-frame {
    position: relative;
    background-color: #0b0b0b;
    
    /* THE SLICE: Change '12' to the exact pixel thickness of f56.png's border! */
    border: 12px solid transparent; 
    border-image: url('f56.png') 12 repeat; 
    
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated; 
    
    padding: 30px 40px 50px 40px; /* Extra padding at the bottom for the button */
    text-align: center;
    z-index: 10; /* Keeps it layered ABOVE the scroll */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.8));
}

/* Typography inside the frame */
.lit-title {
    font-family: 'Jacquard 12', serif;
    font-size: 32px;
    color: #ff2a2a;
    margin: 0 0 5px 0;
}

.lit-author {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #d4b483;
    margin: 0 0 20px 0;
    font-style: italic;
}

.lit-excerpt {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #a8a8a8;
    line-height: 1.6;
    margin: 0;
}

/* 2. The Interactive Toggle Button */
/* 2. The Sleek 8-Bit Plaque */
/* 2. The True 8-Bit UI Plaque */
.lit-toggle-btn {
    position: absolute;
    
    /* THE POSITIONING MAGIC: 
       'bottom: 0' anchors it to the bottom line.
       'translateY(50%)' pushes it down by exactly half its own height! */
    bottom: 0; 
    left: 50%;
    transform: translate(-50%, 50%);
    
    /* 8-Bit Base Styling */
    background-color: #0b0b0b; 
    color: #a8a8a8; 
    font-family: 'Jacquard 12', serif;
    font-size: 16px; 
    padding: 6px 26px; /* Extra padding for the daggers */
    cursor: pointer;
    letter-spacing: 1px;
    z-index: 20; /* Forces it to sit above both the main frame and the scroll below */
    
    /* THE 8-BIT ILLUSION: Replaces standard borders with rigid pixel bevels */
    border: none;
    box-shadow: 
        inset 2px 2px 0px #380000,   /* Inner top/left highlight (Retro 3D bevel) */
        inset -2px -2px 0px #1a0000, /* Inner bottom/right shadow */
        0px 0px 0px 2px #000000,     /* Solid black hard pixel outline */
        0px 4px 0px 2px #000000;     /* The 8-bit drop shadow underneath */
        
    text-shadow: 1px 1px 0px #000;
    transition: none; /* STRICTLY NO FADING. Retro hardware snaps instantly. */
}

/* 3. The Hover State (Instant color snap) */
.lit-toggle-btn:hover {
    background-color: #380000; 
    color: #e8dcc4; /* Parchment white text */
    
    /* Brightens the inner bevels to look illuminated */
    box-shadow: 
        inset 2px 2px 0px #8a0303,  
        inset -2px -2px 0px #1a0000, 
        0px 0px 0px 2px #000000,     
        0px 4px 0px 2px #000000;     
}

/* 4. The Mechanical Click (The Hardware Snap) */
.lit-toggle-btn:active {
    /* Keeps the horizontal center, but pushes it down by the exact 4px height of the drop shadow */
    transform: translate(-50%, calc(50% + 4px)); 
    
    /* Inverts the bevels (so it looks pressed IN) and flattens the drop shadow */
    box-shadow: 
        inset 2px 2px 0px #1a0000,   
        inset -2px -2px 0px #8a0303, 
        0px 0px 0px 2px #000000;     
}

/* 5. The Gothic Daggers */
.lit-toggle-btn::before,
.lit-toggle-btn::after {
    content: "†";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #5c0000;
    font-size: 14px;
    text-shadow: none;
}

.lit-toggle-btn::before { left: 8px; }
.lit-toggle-btn::after { right: 8px; }

/* Daggers catch the light on hover */
.lit-toggle-btn:hover::before,
.lit-toggle-btn:hover::after {
    color: #f0c419; /* Pure gold */
    text-shadow: 1px 1px 0px #000;
}
/* 3. The Scroll Animation Wrapper (The CSS Grid Trick) */
.lit-scroll-wrapper {
    display: grid;
    /* Starts at 0 height */
    grid-template-rows: 0fr; 
    /* Smooth, heavy unrolling speed */
    transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
    
    position: relative;
    z-index: 5; /* Tucks it BEHIND the main frame */
    
    /* Pulls it up so it physically slides out from underneath the frame's edge */
    margin-top: -15px; 
}

/* When the JavaScript adds the 'open' class, the grid expands to fit the text */
.lit-scroll-wrapper.open {
    grid-template-rows: 1fr;
}

.lit-scroll-inner {
    overflow: hidden; /* Hides the parchment while the grid row is 0 */
}

/* 4. The Parchment Commentary Box */
.lit-scroll-parchment {
    background-color: #e8dcc4; /* Aged parchment */
    border: 4px solid #380000;
    border-top: none; /* Merges cleanly with the frame above */
    
    /* Extra top padding so the text isn't hiding right at the seam */
    padding: 40px 30px 30px 30px; 
    
    color: #380000; /* Dried ink */
    box-shadow: 0 10px 15px rgba(0,0,0,0.8);
}
/* ========================================= */
/* --- BOTTOM NAVIGATION HUD --- */
/* ========================================= */

.bottom-nav-hud {
    position: fixed;
    bottom: 40px;
    left: 0;
    width: 100%;
    pointer-events: none; /* Lets you click the page behind the invisible box */
    z-index: 9000;
}

/* 1. Left Button (The Audio Trigger) */
/* 1. The Heavy 8-Bit Media Button */
.media-btn {
    position: absolute;
    left: 80px;
    bottom: -10px; /* Sits firmly on the bottom baseline */
    
    background-color: #0b0b0b; 
    color: #5c0000; /* Dark, dried blood symbol */
    
    /* Using a standard system font here ensures the ► and ❚❚ shapes render perfectly crisp */
    font-family: Arial, sans-serif; 
    font-size: 16px; 
    padding: 8px 16px; /* Makes it a nice, chunky rectangle */
    cursor: pointer;
    pointer-events: auto;
    
    /* THE 8-BIT HARDWARE ILLUSION */
    border: none;
    box-shadow: 
        inset 2px 2px 0px #380000,   /* Inner top-left highlight */
        inset -2px -2px 0px #1a0000, /* Inner bottom-right shadow */
        0px 0px 0px 2px #000000,     /* Solid black outer casing */
        0px 4px 0px 2px #000000;     /* The deep 3D drop shadow */
        
    transition: none; /* Hardware buttons don't fade, they snap */
}

/* 2. The Hover State (Powers up) */
.media-btn:hover {
    background-color: #1a0000; /* Heats up slightly */
    color: #d4b483; /* Symbol lights up gold */
    
    /* Brightens the bevels */
    box-shadow: 
        inset 2px 2px 0px #5c0000,  
        inset -2px -2px 0px #000000, 
        0px 0px 0px 2px #000000,     
        0px 4px 0px 2px #000000;  
}

/* 3. The Mechanical Click (The Tape Deck Clunk) */
.media-btn:active {
    /* Pushes the button down by 4px */
    transform: translateY(4px); 
    
    /* Inverts the inner bevels and flattens the drop shadow completely */
    box-shadow: 
        inset 2px 2px 0px #000000,   
        inset -2px -2px 0px #5c0000, 
        0px 0px 0px 2px #000000; 
}

/* 2. Right Link (The Usual Exit) */
.nav-right-link {
    position: absolute;
    right: 80px;
    bottom: 0;
    pointer-events: auto;
    
    font-family: 'Jacquard 12', serif;
    font-size: 18px; 
    color: #5c0000; 
    text-decoration: none;
    letter-spacing: 1px;
}

/* 3. The 8-Bit Hover Effect (Applied to both) */

.nav-right-link:hover {
    animation: cursed-pulse 0.6s steps(2) infinite;
}

/* 4. The Gothic Cross Cursors */

.nav-right-link::before {
    content: "† "; 
    display: inline-block;
    color: #ff2a2a;
    font-size: 16px;
    opacity: 0; 
}

/* Crosses appear and stab on hover */
.nav-left-btn:hover::before,
.nav-right-link:hover::before {
    opacity: 1;
    animation: cross-stab 0.4s steps(2) infinite;
}

/* (Make sure you still have your 'cursed-pulse' and 'cross-stab' @keyframes in your CSS from earlier!) */

/* ========================================= */
/* --- THE ZIBALDONE (COFFIN VOID) --- */
/* ========================================= */

/* 1. The Body Override (Just for this page) */
.zibaldone-body {
    background-color: #050505; /* Even darker than the main manor */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 50px 20px;
    overflow-x: hidden; /* Stops horizontal scrolling from wild rotations */
}

/* 2. The Container */
.chaos-void {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 20px;
    max-width: 900px;
    position: relative;
}

/* 3. The Base Note Architecture */
.scattered-note {
    width: 280px;
    padding: 25px 30px;
    position: relative;
    box-shadow: 5px 10px 15px rgba(0,0,0,0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0s, box-shadow 0.4s;
    cursor: crosshair; /* Adds to the unsettling vibe */
    z-index: 1;
}

/* Typography for the Notes */
.note-date {
     font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px dashed;
    padding-bottom: 5px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.note-text {
  font-family: 'Courier New', monospace;
  
    font-size: 12px;
    line-height: 1.2;
    margin: 0;
}

/* 4. The Alternating Themes */

/* The Light Scrap (Parchment) */
.light-note {
    background-color: #e8dcc4;
    border: 3px solid #380000;
    color: #1a0000;
}
.light-note .note-date { border-color: #380000; color: #5c0000; }

/* The Dark Scrap (Void) */
.dark-note {
    background-color: #0b0b0b;
    border: 3px solid #5a3a22; /* Tarnished brass border */
    color: #a8a8a8; /* Ash grey text */
}
.dark-note .note-date { border-color: #5a3a22; color: #d4b483; }
.dark-note .note-text { color: #d4b483; text-shadow: 1px 1px 0px #000; }

/* 5. THE SCATTER MATH (Pure CSS Chaos) */
/* This organically tilts and pushes the notes into a messy pile */

.scattered-note:nth-child(even) { transform: rotate(4deg) translateY(20px); }
.scattered-note:nth-child(odd) { transform: rotate(-3deg) translateY(-10px); }

.scattered-note:nth-child(3n) { transform: rotate(-6deg) translateX(-15px); width: 320px; }
.scattered-note:nth-child(3n+1) { transform: rotate(5deg) translateX(15px); margin-top: 30px; }

.scattered-note:nth-child(5n) { transform: rotate(8deg) translateY(-25px); background-color: #240000; color: #e8dcc4; border-color: #000; } /* A rare blood-red mutation */
.scattered-note:nth-child(5n) .note-date { color: #ff2a2a; border-color: #ff2a2a; }

/* 6. The Inspection Interaction (Straightens the note when hovered) */
.scattered-note:hover {
    transform: rotate(0deg) scale(1.1) translateY(-10px) !important;
    z-index: 50; /* Pops to the top of the pile */
    box-shadow: 0px 20px 30px rgba(0,0,0,1);
}

/* 1. The Ghost Letter Container */
/* 1. THE GHOSTLY BACKGROUND RITUAL */
.ghost-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ghost-s {
    position: absolute;
    font-family: 'Jacquard 12', serif;
    font-size: 140px;
    color: #ff2a2a; /* Pure blood red */
    opacity: 0;
    filter: blur(2px);
    /* Snappy, glitchy 8-bit shimmer */
    animation: ghost-pulse 4s infinite steps(3);
}

@keyframes ghost-pulse {
    0%, 100% { opacity: 0; transform: scale(0.8) rotate(-5deg); }
    50% { opacity: 0.2; transform: scale(1.1) rotate(5deg); }
}

/* 2. THE REFINED INVITATION PLAQUE */
/* 1. Shrinking the Box itself */
#museum-invitation {
    width: 260px;          /* Decreased from 320px */
    padding: 15px 25px;    /* Decreased vertical padding to 15px */
    
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    display: none;
    background-color: #e8dcc4; 
    border: 4px solid #380000;
    outline: 2px solid #e8dcc4;
    outline-offset: -8px;
    box-shadow: 0px 0px 0px 4px #000, 10px 10px 0px rgba(0,0,0,0.4);
    text-align: center;
}

/* 2. Tightening the Title */
#museum-invitation h3 {
    font-family: 'Jacquard 12', serif;
    font-size: 28px;       /* Slightly smaller font */
    color: #9a0a0a;
    margin: 0 0 5px 0;    /* Reduced bottom margin */
}

/* 3. Tightening the Body Text */
#museum-invitation p {
    font-family: 'Courier New', monospace;
    font-size: 13px;       /* Slightly smaller font */
    color: #380000;
    font-weight: bold;
    border-top: 1px dashed #380000;
    padding-top: 10px;     /* Reduced top padding from 15px */
    margin-bottom: 15px;   /* Reduced bottom margin from 25px */
}
/* Choice Buttons with 8-bit snapping */
.invitation-choice {
    display: inline-block;
    /* SWAPPED TO COURIER */
    font-family: 'Courier New', monospace; 
    font-size: 13px; 
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    color: #380000;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    padding: 5px 15px;
    transition: none;
}

.invitation-choice:hover {
    color: #ff2a2a;
    /* Adds a subtle 8-bit underline on hover */
    border-bottom: 2px solid #ff2a2a; 
}
/* Dagger Animations */
.invitation-choice:hover::before,
.invitation-choice:hover::after {
    content: "†";
    position: absolute;
    color: #ff2a2a;
    animation: dagger-shiver 0.2s steps(2) infinite;
}

.invitation-choice:hover::before { left: -5px; }
.invitation-choice:hover::after { right: -5px; }

@keyframes dagger-shiver {
    0% { transform: translateY(-1px); }
    100% { transform: translateY(1px); }
}

/* ========================================= */
/* --- PHILOSOPHY TOME --- */
/* ========================================= */

.tome-container {
    display: flex;
    max-width: 900px;
    height: 500px; /* Fixed height so the pages don't shift */
    margin: 80px auto;
    box-shadow: 0px 20px 40px rgba(0,0,0,0.9);
}

.tome-page {
    flex: 1; /* Splits them 50/50 */
    padding: 40px;
    position: relative;
}

/* The Left Page (The Void) */
.left-page {
    background-color: #0b0b0b;
   
    border-right: 2px solid #1a0000; /* The spine shadow */
}

.tome-title {
    font-family: 'Jacquard 12', serif;
    font-size: 32px;
    color: #9a0a0a;
    border-bottom: 1px dashed #380000;
    padding-bottom: 10px;
}

.tome-excerpt {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #a8a8a8; /* Ash grey */
    line-height: 1.6;
}

/* The Right Page (The Parchment) */
/*/* --- THE RIGHT PAGE (Now Scrollable) --- */
.right-page {
    background-color: #e8dcc4;
    border: 4px solid #380000;
    border-left: 2px solid #5c0000;
    color: #1a0000;
    font-family: 'Jacquard 12', serif;
    font-size: 22px;
    line-height: 1.4;
    
    /* THE FIX: Allows vertical scrolling, hides horizontal */
    overflow-y: auto; 
    overflow-x: hidden;
    padding: 30px 40px; /* Put the padding back so text doesn't hit the edges */
}

/* --- CUSTOM PARCHMENT SCROLLBAR --- */
.right-page::-webkit-scrollbar {
    width: 14px;
}

.right-page::-webkit-scrollbar-track {
    background: #e8dcc4; /* Matches parchment */
    border-left: 2px solid #380000; /* Separator line */
}

.right-page::-webkit-scrollbar-thumb {
    background: #380000; /* Dark red slider */
    border: 2px solid #e8dcc4; /* Gives it a slight inset look */
}

.right-page::-webkit-scrollbar-thumb:hover {
    background: #ff2a2a; /* Lights up when you grab it */
}
/* --- CROW THE CROCODILE (CENTERED) --- */
/* ========================================= */

.npc-container {
    position: relative;
    /* THE FIX: The container is now EXACTLY the width of the crocodile */
    width: 280px; 
    /* This centers Crow perfectly on the screen */
    margin: 80px auto 100px auto; 
}

.npc-sprite {
    width: 280px;
    display: block;
    image-rendering: pixelated;
}

.npc-dialogue {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 30px;
    transform: translateY(-50%);
    background: #030d03;
    border: 3px solid #c8922a;
    outline: 2px solid #7b3f8c;
    outline-offset: -4px;
    box-shadow:
        0 0 0 1px #000,
        4px 4px 0px #000;
    padding: 12px 14px;
    min-width: 40px;
    min-height: 0;
    width: max-content;
    max-width: 260px;
    image-rendering: pixelated;
    cursor: pointer;
    user-select: none;
    z-index: 10;
}

.npc-dialogue::after,
.npc-dialogue::before {
    display: none;
}

#crow-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #e8e8e8;
    font-weight: normal;
    margin: 0;
    line-height: 2;
    text-shadow: 1px 1px 0px #000;
}
.page-header-panel {
    /* Keep all your existing styles for background, border, width, etc. */
    
    /* THE FIX: Top: 60px, Sides: auto (centers it), Bottom: 50px */
    margin: 60px auto 50px auto; 
}
/* ========================================= */
/* --- THE EXIT BUTTON (CORNER STYLE) --- */
/* ========================================= */

.tread-further-corner {
    position: fixed;
    bottom: 30px;
    right: 40px;
    font-family: 'Jacquard 12', serif;
    font-size: 28px; /* Slightly smaller to match your library screenshot */
    color: #9a0a0a;
    text-decoration: none;
    z-index: 10000; /* Keeps it above the rain and ghosts */
}

.tread-further-corner:hover {
    color: #ff2a2a;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}
/* ========================================= */
/* --- TOOLS & INSTRUMENTS (THE LEDGER) --- */
/* ========================================= */

.ledger-container {
    max-width: 900px;
    margin: 40px auto 120px auto; /* Centered with room at the bottom for the exit */
    
    /* The outer parchment frame */
    background-color: #e8dcc4;
    border: 4px solid #380000;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.6);
    padding: 10px;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse; /* Merges borders so it looks like a seamless sheet */
    text-align: left;
}

/* The Table Headers (Dark Red Block) */
.ledger-table th {
    background-color: #380000;
    color: #e8dcc4;
    font-family: 'Jacquard 12', serif;
    font-size: 32px;
    padding: 15px 20px;
    letter-spacing: 2px;
    border-bottom: 4px solid #1a0000;
}

/* The Table Cells (Parchment body) */
.ledger-table td {
    padding: 20px;
    border-bottom: 2px dashed #380000; /* Stitched ink lines between rows */
    vertical-align: top; /* Keeps text aligned to the top if the description is long */
}

/* Removes the dashed line from the very last row so it looks clean */
.ledger-table tr:last-child td {
    border-bottom: none;
}

/* Column Widths */
.tool-cell {
    width: 30%; /* Keeps the tool names in a neat, tight column */
    border-right: 2px dashed #380000; /* Vertical divider line */
}

.desc-cell {
    width: 70%;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    color: #1a0000;
    line-height: 1.5;
    font-weight: bold;
}

/* --- THE TOOL LINKS --- */
.tool-link {
    font-family: 'Jacquard 12', serif;
    font-size: 28px;
    color: #9a0a0a;
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: none; /* Instant 8-bit snap */
}

.tool-link:hover {
    color: #ff2a2a; /* Bright blood red */
}

/* The Gothic Daggers on Hover */
.tool-link:hover::before,
.tool-link:hover::after {
    content: "†";
    position: absolute;
    color: #ff2a2a;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    animation: dagger-shiver 0.2s steps(2) infinite;
}

.tool-link:hover::before { left: -20px; }
.tool-link:hover::after { right: -20px; }
/* ========================================= */
/* --- ACADEMICS ENTRANCE EXAM TRAP --- */
/* ========================================= */

/* 1. The Trigger Button */
.exam-trigger-btn {
    background: transparent;
    border: none;
    font-family: 'Jacquard 12', serif;
    font-size: 42px;
    color: #5c0000;
    cursor: pointer;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

.exam-trigger-btn:hover {
    color: #ff2a2a;
    animation: cursed-pulse 0.6s steps(2) infinite;
}

/* 2. The Pitch Black Overlay */
.exam-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Almost pitch black */
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

/* 3. The Parchment Exam Box */
.exam-box {
    background-color: #e8dcc4;
    border: 4px solid #380000;
    box-shadow: 0px 0px 0px 4px #000, 15px 15px 0px rgba(0,0,0,0.6);
    padding: 40px;
    text-align: center;
    width: 90%;
    max-width: 400px;
}

.exam-box h3 {
    font-family: 'Jacquard 12', serif;
    font-size: 36px;
    color: #9a0a0a;
    margin: 0 0 10px 0;
}

.exam-box p {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #1a0000;
    font-weight: bold;
}

.exam-question {
    color: #5c0000 !important;
    font-style: italic;
    margin: 20px 0;
}

/* 4. The Answer Field */
#exam-answer {
    background-color: #0b0b0b;
    border: 2px solid #380000;
    color: #d4b483;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    padding: 10px;
    width: 80%;
    margin-bottom: 25px;
    text-align: center;
    outline: none;
}

#exam-answer:focus {
    border-color: #ff2a2a;
    box-shadow: 0px 0px 8px rgba(255, 42, 42, 0.4);
}

/* 5. The Submit Button */
.exam-submit {
    background-color: #0b0b0b;
    color: #9a0a0a;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    padding: 8px 20px;
    border: none;
    cursor: pointer;
    box-shadow: inset 2px 2px 0px #380000, inset -2px -2px 0px #1a0000, 0px 0px 0px 2px #000;
}

.exam-submit:hover {
    background-color: #1a0000;
    color: #ff2a2a;
}
/* ========================================= */
/* --- THE BROADSHEET (NEWSPAPER LAYOUT) --- */
/* ========================================= */

.broadsheet-container {
    max-width: 850px;
    margin: 60px auto 120px auto;
    background-color: #e8dcc4; /* Aged paper */
    border: 1px solid #1a0000;
    box-shadow: 0px 0px 0px 6px #0b0b0b, 15px 15px 0px rgba(0,0,0,0.6);
    padding: 30px;
    color: #1a0000;
}

/* --- NEWSPAPER HEADER --- */
.broadsheet-header {
    text-align: center;
    border-bottom: 4px double #1a0000; /* Classic double-line newspaper border */
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.broadsheet-title {
    font-family: 'Jacquard 12', serif;
    font-size: 64px;
    color: #0b0b0b;
    margin: 0;
    line-height: 1;
    
    letter-spacing: 2px;
}

.broadsheet-meta {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    border-top: 2px solid #1a0000;
    border-bottom: 2px solid #1a0000;
    padding: 5px 0;
    margin-top: 15px;
}

/* --- THE COLUMNS --- */
.broadsheet-columns {
    /* MAGIC: Automatically flows your articles into 2 columns! */
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid #380000; /* The dividing line between columns */
}

/* --- THE ARTICLES --- */
.news-story {
    break-inside: avoid; /* Prevents an article from awkwardly splitting in half across columns */
    margin-bottom: 30px;
}

.headline {
    font-family: 'Jacquard 12', serif;
    font-size: 32px;
    color: #5c0000;
    margin: 0 0 10px 0;
    line-height: 1.1;
    text-align: left;
    text-transform: capitalize;
}

.sub-headline {
    font-size: 24px;
    color: #1a0000;
}

.news-story p {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 15px 0;
    text-align: justify; /* Justified text makes it look like a real printed column */
}

/* --- IMAGES IN THE NEWS --- */
.news-image-box {
    border: 2px solid #1a0000;
    padding: 5px;
    margin-bottom: 15px;
    text-align: center;
    background-color: #d4b483; /* Slightly darker parchment for the "photo" background */
}

.news-image-box img {
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.caption {
    font-size: 12px !important;
    font-style: italic;
    text-align: center !important;
    margin: 5px 0 0 0 !important;
    color: #380000;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .broadsheet-columns {
        column-count: 1; /* Drops to a single column on phones so it's readable */
        column-rule: none;
    }
    
    .broadsheet-meta {
        flex-direction: column;
        gap: 5px;
    }
    
    .broadsheet-title {
        font-size: 48px;
    }
}
/* --- NEWSPAPER WORD SEARCH PANEL --- */
.paper-search-panel {
    display: flex;
    align-items: center;
    border: 1px solid #1a0000;
    background-color: #d4b483; /* Slightly darker parchment */
    height: 24px;
}

#paper-search {
    background: transparent;
    border: none;
    color: #1a0000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    padding: 0 8px;
    width: 140px;
    outline: none;
}

#paper-search::placeholder {
    color: #5c0000;
    font-style: italic;
    opacity: 0.7;
}

.paper-search-btn {
    background-color: #1a0000;
    color: #e8dcc4;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
    transition: none;
}

.paper-search-btn:hover {
    background-color: #ff2a2a;
    color: #1a0000;
}
.right-bottom-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* Locks them to the bottom edge */
    justify-content: center;
    gap: 40px;
    width: 100%;
}

.apple-container img {
    width: 65px !important; /* Shrunk down to match sketch proportions */
    margin: 0 !important;
}

/* ================= ZIBALDONE: THE PITCH BLACK REALM ================= */
body.pitch-black-realm {
    background-color: #000; /* Base absolute black */
    color: #e8dcc4;
    margin: 0;
    min-height: 100vh;
}

body.pitch-black-realm::after {
    content: ""; 
    display: block; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    pointer-events: none; /* Lets you click through the darkness */
    z-index: 9999;
    
    /* THE UPGRADED LIGHT: Warm center, rapid falloff to pure black */
    background: radial-gradient(
        circle 200px at var(--x, 50vw) var(--y, 50vh), 
        rgba(255, 170, 50, 0.1) 0%,    /* Amber candle center */
        rgba(0, 0, 0, 0.85) 45%,       /* Heavy shadow */
        rgba(0, 0, 0, 1) 75%           /* Total void */
    );
    
    /* The unstable flicker */
    animation: lantern-flicker 0.12s infinite alternate;
}

/* ========================================= */
/* --- THE TRUE DMG-01 EMULATOR FILTER ---   */
/* ========================================= */

/* 1. Apply the Mathematical 4-Color Palette Override */
body.dmg-01-vision {
    background-color: #9bbc0f !important; /* Base screen color */
    
    /* Applies your custom SVG, then crunches the contrast slightly to harden the pixel edges */
    filter: url(#dmg-palette) contrast(1.2) brightness(1.1) !important;
}

/* 2. The Physical LCD Screen (Grid, Bezel, and Glare) */
body.dmg-01-vision::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9998;
    pointer-events: none;
    
    /* Layer 1: The Glass Glare (Diagonal highlight across the screen)
       Layer 2 & 3: The strict 4x4 LCD Pixel separation grid
    */
    background-image: 
        linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(rgba(15, 56, 15, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 56, 15, 0.25) 1px, transparent 1px);
    background-size: 100% 100%, 4px 4px, 4px 4px; 
    
    /* The physical curved screen shadow where the plastic meets the glass */
    box-shadow: inset 0 0 100px rgba(15, 56, 15, 0.9), inset 0 0 20px rgba(15, 56, 15, 1);
}

/* 3. The Cathode Refresh Line (Rolling slowly) */
body.dmg-01-vision::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(139, 172, 15, 0) 0%,
        rgba(15, 56, 15, 0.12) 50%,
        rgba(139, 172, 15, 0) 100%
    );
    background-size: 100% 15px;
    animation: dmg-scanline 6s linear infinite;
}

/* 4. True LCD Smear (Ghosting) */
/* Old Game Boys had terrible refresh rates. This drags a permanent, faint "smear" off the bottom left of every element to mimic ghosting. */
body.dmg-01-vision #manor-container {
    filter: drop-shadow(-3px 3px 0px rgba(15, 56, 15, 0.35));
}

@keyframes dmg-scanline {
    0% { background-position: 0 -100vh; }
    100% { background-position: 0 100vh; }
}

/* 5. The Power-On Flash Element (Triggered by your JS) */
.dmg-power-flash {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #9bbc0f;
    z-index: 10000;
    pointer-events: none;
    animation: dmg-turn-on 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes dmg-turn-on {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

body.dmg-01-vision .manor-layout {
    align-items: flex-end;
}

body.dmg-01-vision .sidebar-left {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

body.dmg-01-vision .arcade-console,
body.dmg-01-vision .adam-container {
    position: static;
    transform: none;
    bottom: auto;
    left: auto;
    width: 220px;
    margin-bottom: 40px;

}

.adam-frame {
    width: 220px;
}

.adam-dialogue {
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
    padding: 8px 10px;
}

.adam-input {
    height: 40px;
}

/* --- THE CINEMATIC ASCENSION (NOIR) ---    */
/* ========================================= */

body.abyssal-vision {
    /* Pure silver monochrome with high-end contrast */
    filter: grayscale(100%) url(#silver-ascension) brightness(0.8) !important;
    background-color: #000 !important;
    transition: filter 1s ease-in-out;
}

/* 1. THE DYNAMIC TRACKING LENS (The Depth of Field) */
html:has(body.abyssal-vision)::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9998;
    pointer-events: none;

    /* The Bokeh Blur */
    backdrop-filter: blur(5px) brightness(0.7);
    
    /* THE MAGIC: A radial mask that creates a "Sharp Hole" wherever your mouse is */
    /* Adjust '300px' to make the focus area larger or smaller */
    -webkit-mask-image: radial-gradient(circle 300px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%);
    mask-image: radial-gradient(circle 300px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%);
}

/* 2. THE FILM GATE & VIGNETTE */
html:has(body.abyssal-vision)::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    pointer-events: none;

    /* A soft, cinematic shadow around the edges */
    background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,0.8) 100%);
    
    /* Subtle film artifacts */
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent 500px, rgba(255,255,255,0.02) 501px, transparent 502px);
    background-size: 1200px 100%;
    
    animation: film-flicker 0.1s infinite, scratch-jump 0.4s steps(1) infinite;
}

/* --- CINEMATIC ANIMATIONS --- */

@keyframes film-flicker {
    0% { background-color: rgba(255,255,255,0); }
    50% { background-color: rgba(255,255,255,0.015); }
    100% { background-color: rgba(255,255,255,0); }
}

@keyframes scratch-jump {
    0% { background-position: 0 0; }
    25% { background-position: 20% 0; }
    50% { background-position: -10% 0; }
    75% { background-position: 60% 0; }
}

/* Make interaction points "Pop" through the blur */
body.abyssal-vision a, 
body.abyssal-vision .control-btn {
    text-shadow: 0 0 8px rgba(255,255,255,0.4);
    transition: text-shadow 0.3s ease;
}
/* ========================================= */
/* --- NOIR INFORMANT (THE NUCLEAR FIX) ---- */
/* ========================================= */

/* 1. FORCE THE SPRITE TO FIT (NO CROPPING ALLOWED) */
body.abyssal-vision img#merchant-img {
    /* Instead of breaking the box, we shrink the blacksmith to fit safely inside it */
    width: 176px !important; 
    height: 156px !important; 
    
    /* This rule mathematically guarantees the image will never crop. It scales it down. */
    object-fit: contain !important; 
    
    position: relative !important;
    z-index: 5 !important;
    clip-path: none !important;
}

body.abyssal-vision div#merchant-dialogue {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important; /* Sharp corners */
    box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.7) !important; 
    
    /* Shrinks the box to hug the text tightly */
    padding: 8px 12px !important;
    width: max-content !important;
    max-width: 270px !important;
    
    /* Pulls it down so it sits right above him */
    transform: translateY(-50px) !important; 
    z-index: 10 !important;
}

/* 1. Draw the White Outer Triangle (The Border) */
body.abyssal-vision div#merchant-dialogue::after {
    display: block !important;
    content: "";
    position: absolute;
    bottom: -12px !important; /* Hangs off the bottom */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    border-width: 12px 12px 0 !important;
    border-style: solid !important;
    border-color: #ffffff transparent transparent transparent !important;
}

/* 2. Draw the Black Inner Triangle (The Fill) */
body.abyssal-vision div#merchant-dialogue::before {
    display: block !important;
    content: "";
    position: absolute;
    bottom: -9px !important; /* Sits slightly higher to leave a white border */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    border-width: 10px 10px 0 !important;
    border-style: solid !important;
    border-color: #000000 transparent transparent transparent !important;
    z-index: 1 !important;
}

/* 3. THE GLOWING TYPEWRITER TEXT */
body.abyssal-vision p#dialogue-text {
    color: #ffffff !important;
    font-family: 'Courier New', Courier, monospace !important; 
    font-weight: bold !important;
    
    font-size: 11px !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
   
    margin: 0 !important;
}
/* --- SURVEILLANCE TERMINAL --- */
/* Auto-swap visibility based on body class */
body.abyssal-vision .normal-log { display: none !important; }
body.abyssal-vision .surveillance-log { display: block !important; }

.surveillance-log {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #ffb000; /* Raw amber text */
    text-transform: uppercase;
    line-height: 1.4;
    overflow-y: auto;
}

#mother-log-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mother-log-list li {
    margin-bottom: 2px;
    opacity: 0.85;
    word-wrap: break-word;
}

.mother-cursor {
    animation: blinkCursor 1s step-end infinite;
    display: inline-block;
    margin-top: 4px;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* ========================================= */
/* --- ARCADE CONSOLE (SHARK BUTTON)     --- */
/* ========================================= */

.arcade-console {
    display: none;
    width: 260px;
    position: relative;
    margin-bottom: 70px;
    animation: arcade-flicker-in 0.4s steps(4) forwards;
}

body.dmg-01-vision .arcade-console {
    display: block;
}

@keyframes arcade-flicker-in {
    0%   { opacity: 0; transform: scaleY(0.05); }
    25%  { opacity: 1; transform: scaleY(1.04); }
    50%  { opacity: 0.6; transform: scaleY(0.97); }
    75%  { opacity: 1; transform: scaleY(1.01); }
    100% { opacity: 1; transform: scaleY(1); }
}

.arcade-frame-wrapper {
    position: relative;
    width: 100%;
}

.arcade-frame-img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    display: block;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.8));
    position: relative;
    z-index: 5;
    pointer-events: none;
}

/* The screen sits inside the frame — tweak top/left/width/height
   percentages to align it perfectly with your arcade-frame.png */
.arcade-screen {
    position: absolute;
    top: 18%;
    left: 17%;
    width: 74%;
    height: 70%;
    background: #000;
    overflow: hidden;
    z-index: 3;
}

/* ---- TERMINAL ---- */
.arcade-terminal {
    width: 100%;
    height: 100%;
    background: #000;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
}

/* Rolling scanline over the terminal */
.arcade-scanline {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 65, 0.04) 2px,
        rgba(0, 255, 65, 0.04) 4px
    );
    z-index: 10;
}

#arcade-output {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: #00ff41;
    line-height: 1.5;
    text-transform: uppercase;
    word-break: break-all;
}

#arcade-output::-webkit-scrollbar { display: none; }

#arcade-output p {
    margin: 0 0 2px 0;
    opacity: 0.9;
}

#arcade-output p.sys  { color: #00ff41; }
#arcade-output p.warn { color: #ffb000; }
#arcade-output p.err  { color: #ff3333; }

.arcade-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid #003311;
    padding-top: 4px;
    flex-shrink: 0;
}

.arcade-prompt-symbol {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: #00ff41;
    flex-shrink: 0;
}

.arcade-input {
    background: transparent;
    border: none;
    outline: none;
    color: #00ff41;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    width: 100%;
    caret-color: #00ff41;
    text-transform: uppercase;
}

/* ---- GAME IFRAME ---- */
.arcade-game-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    z-index: 4;
    background: #000;
}


/* ========================================= */
/* --- ADAM: THE SECRET TRADER           --- */
/* ========================================= */

.adam-container {
    width: 220px;
    margin-bottom: 20px;
    position: relative;
    animation: adam-wake 1.2s ease forwards;
}

@keyframes adam-wake {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.adam-frame {
    background: #000;
    border: 3px solid #9bbc0f;
    box-shadow: 
        inset 0 0 0 2px #000,
        inset 0 0 0 4px #306230,
        4px 4px 0px #000;
    overflow: hidden;
}

.adam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 2px solid #306230;
    background: #0f380f;
}

.adam-name {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    color: #9bbc0f;
    letter-spacing: 4px;
}

.adam-status {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: #9bbc0f;
    letter-spacing: 2px;
    animation: adam-status-pulse 2s infinite alternate steps(2);
}

@keyframes adam-status-pulse {
    0%   { opacity: 0.4; }
    100% { opacity: 1; }
}

.adam-dialogue {
    min-height: 90px;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #306230;
    background: #0f380f;
    position: relative;
}

.adam-text {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #9bbc0f;
    line-height: 1.6;
    margin: 0;
    text-align: left;
    font-style: italic;
    min-height: 16px;
    text-shadow: 0 0 4px #9bbc0f;
}

.adam-input-area {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #000;
}

.adam-input {
    background: #0f380f;
    border: 2px solid #306230;
    color: #9bbc0f;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 7px;
    resize: none;
    outline: none;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
}

.adam-input::placeholder {
    color: #306230;
    font-style: italic;
}

.adam-input:focus {
    border-color: #9bbc0f;
    box-shadow: inset 0 0 8px rgba(155, 188, 15, 0.2);
}

.adam-submit-btn {
    background: #0f380f;
    border: 2px solid #306230;
    color: #9bbc0f;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 6px;
    cursor: url('curse.png'), pointer !important;
    text-transform: lowercase;
    width: 100%;
    box-shadow: 2px 2px 0px #000;
    transition: none;
}

.adam-submit-btn:hover {
    background: #306230;
    color: #9bbc0f;
    border-color: #9bbc0f;
}

.adam-submit-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.adam-submit-btn:disabled {
    opacity: 0.3;
    cursor: default !important;
    pointer-events: none;
}

.adam-container.adam-closed .adam-input-area {
    display: none;
}

.adam-container.adam-closed .adam-status {
    animation: none;
    opacity: 0.3;
}
body.dmg-01-vision .archive-portal {
    display: none;
}

body.dmg-01-vision .changelog-container-right,
body.dmg-01-vision .merchant-interaction,
body.dmg-01-vision #inventory-overlay,
body.dmg-01-vision #merchant-inventory {
    display: none !important;
}

/* ========================================= */
/* --- PIXEL BOARD                       --- */
/* ========================================= */

.pixelboard-container {
    width: 220px;
    margin-bottom: 10px;
    animation: adam-wake 1.2s ease forwards;
    
}

.pixelboard-frame {
    background: #000;
    border: 3px solid #9bbc0f;
    box-shadow:
        inset 0 0 0 2px #000,
        inset 0 0 0 4px #306230,
        4px 4px 0px #000;
    overflow: hidden;
}

.pixelboard-header {
    background: #0f380f;
    border-bottom: 2px solid #306230;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.pixelboard-title {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    color: #9bbc0f;
    letter-spacing: 2px;
    flex-shrink: 0;
}

.pixelboard-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pixelboard-label {
    font-family: 'Courier New', monospace;
    font-size: 8px;
    color: #306230;
    letter-spacing: 1px;
}

.pixelboard-slider {
    width: 50px;
    height: 4px;
    accent-color: #9bbc0f;
    cursor: pointer;
}

.pixelboard-btn {
    background: #000;
    border: 1px solid #306230;
    color: #9bbc0f;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    font-weight: bold;
    padding: 3px 5px;
    cursor: url('curse.png'), pointer !important;
    letter-spacing: 1px;
    transition: none;
    box-shadow: 1px 1px 0px #000;
}

.pixelboard-btn:hover {
    background: #306230;
    color: #9bbc0f;
}

.pixelboard-btn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
}

.pixelboard-btn.active {
    background: #306230;
    border-color: #9bbc0f;
}

.pixelboard-canvas {
    display: block;
    background: #000;
    cursor: crosshair;
    image-rendering: pixelated;
    width: 100%;
    height: 200px;
}

/* Scanline overlay on canvas */
.pixelboard-frame::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 65, 0.03) 2px,
        rgba(0, 255, 65, 0.03) 4px
    );
    pointer-events: none;
    z-index: 10;
}

.pixelboard-frame {
    position: relative;
}

body.dmg-01-vision .pixelboard-container {
    display: block !important;
    margin-bottom: 20px;
}
/* ========================================= */
/* --- UNCHAIN YOUR BRAIN                --- */
/* ========================================= */

.unchain-link {
    display: block;
    text-decoration: none;
    margin-bottom: 14px;
    cursor: url('curse.png'), pointer !important;
}

.unchain-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
}

/* --- IMAGE CONTAINER --- */
.unchain-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    filter: drop-shadow(0 0 6px rgba(155, 188, 15, 0.5));
}

.unchain-img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    display: block;
    position: relative;
    z-index: 1;
}

/* --- SCANLINE SWEEP --- */
.unchain-scanline {
    position: absolute;
    top: -40%;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(155, 188, 15, 0.08) 50%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
    animation: unchain-sweep 4s linear infinite;
}

@keyframes unchain-sweep {
    0%   { top: -40%; }
    100% { top: 120%; }
}

/* --- HOVER: THE UNCHAIN --- */
.unchain-link:hover .unchain-img-wrap {
    animation: unchain-break-free 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    filter: drop-shadow(0 0 14px rgba(155, 188, 15, 1));
}

@keyframes unchain-break-free {
    0%   { transform: scaleX(0.92) scaleY(0.95); filter: brightness(0.7); }
    15%  { transform: scaleX(0.88) scaleY(0.93) translateX(-2px); }
    30%  { transform: scaleX(1.06) scaleY(1.04) translateX(3px); filter: brightness(1.3); }
    45%  { transform: scaleX(0.97) scaleY(0.98) translateX(-1px); }
    60%  { transform: scaleX(1.03) scaleY(1.02); filter: brightness(1.1); }
    100% { transform: scaleX(1) scaleY(1); filter: brightness(1); }
}

/* --- YOUR BRAIN: NEURON IDLE --- */
.unchain-sub {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #9bbc0f;
    letter-spacing: 8px;
    text-align: center;
    display: block;
}

.unchain-sub span {
    display: inline-block;
    animation: neuron-fire var(--dur) infinite alternate ease-in-out;
    animation-delay: var(--delay);
    text-shadow: 0 0 4px #9bbc0f;
}

@keyframes neuron-fire {
    0%   { opacity: 1;   text-shadow: 0 0 4px #9bbc0f; }
    100% { opacity: 0.3; text-shadow: none; }
}

.unchain-link:hover .unchain-sub span {
    opacity: 1;
    text-shadow: 0 0 10px #9bbc0f;
    animation: none;
}

body.dmg-01-vision .unchain-link {
    display: block !important;
    width: 300px;
    margin-bottom: 80px;
}

body.dmg-01-vision .unchain-sub {
    font-size: 13px;
}
body.abyssal-vision .archive-portal {
    display: none;
}
/* ========================================= */
/* --- VENOM ORACLE                      --- */
/* ========================================= */

.venom-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 90px;
    animation: adam-wake 1s ease forwards;
}

body.abyssal-vision .venom-container {
    display: flex !important;
}

.venom-canvas {
    border-radius: 50%;
    cursor: crosshair;
    display: block;
    /* metaball trick */
    filter: blur(8px) contrast(20);
}

.venom-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: #333;
    letter-spacing: 3px;
    margin: 0;
    text-transform: lowercase;
    animation: venom-label-pulse 4s infinite alternate;
}

@keyframes venom-label-pulse {
    0%   { opacity: 0.3; }
    100% { opacity: 0.7; }
}

/* --- GOO OVERLAY (reintroduced for venom) --- */
#venom-goo-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 99998;
    display: none;
}

#venom-goo-canvas.active {
    display: block;
}

/* --- RESISTANCE DIALOGUE --- */
.resist-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.resist-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.resist-box {
    background: #000;
    border: 1px solid #444;
    padding: 40px 50px;
    text-align: center;
    max-width: 420px;
    box-shadow: 0 0 60px rgba(255,255,255,0.05);
}

.resist-line-1 {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #666;
    letter-spacing: 3px;
    text-transform: lowercase;
    margin: 0 0 16px 0;
}

.resist-line-2 {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #444;
    letter-spacing: 1px;
    line-height: 1.8;
    margin: 0 0 30px 0;
}

.resist-question {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #ccc;
    letter-spacing: 4px;
    text-transform: lowercase;
    margin: 0 0 30px 0;
}

.resist-buttons {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.resist-btn {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 4px;
    padding: 10px 30px;
    cursor: pointer;
    text-transform: lowercase;
    transition: none;
}

.resist-yes:hover {
    border-color: #fff;
    color: #fff;
}

.resist-no:hover {
    border-color: #333;
    color: #444;
}
body.abyssal-vision .main-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 36px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #999;
    text-shadow: none;
    position: relative;
}
/* ========================================= */
/* --- SURVEILLANCE RAIN                 --- */
/* ========================================= */

.surveillance-rain {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
}

body.abyssal-vision .surveillance-rain {
    display: block;
}

body.abyssal-vision .surveillance-rain.active {
    opacity: 1;
}

/* Hide rain.gif in noir mode */
body.abyssal-vision.manor-body {
    background-image: none !important;
    background-color: #000 !important;
}
/* ========================================= */
/* --- RETRO TITLE                       --- */
/* ========================================= */

body.dmg-01-vision .main-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 22px;
    color: #9bbc0f;
    text-shadow:
        3px 3px 0px #306230,
        6px 6px 0px #0f380f;
    letter-spacing: 2px;
    image-rendering: pixelated;
}

.retro-title-char {
    display: inline-block;
    opacity: 0;
}

.retro-title-char.lit {
    opacity: 1;
}


body.dmg-01-vision.manor-body {
    background-image: none !important;
    background-color: #000 !important;
}
#retro-bg-canvas {
    opacity: 0.1;
}
body.dmg-01-vision .blood-roof {
    display: none;
}

body.dmg-01-vision .background-chase {
    display: none;
}
/* ========================================= */
/* --- ORACLE: CV2 DIALOGUE BOX         --- */
/* ========================================= */

.oracle-container {
    width: 280px;
    margin-bottom: 100px;
    animation: adam-wake 1s ease forwards;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0;
}

body.dmg-01-vision .oracle-container,
body.abyssal-vision .oracle-container {
    display: none !important;
}

/* --- PORTRAIT BOX --- */
.oracle-portrait-box {
    width: 78px;
    height: 100px;
    flex-shrink: 0;
    background: #020c02;
    border: 3px solid #c8922a;
    outline: 2px solid #7b3f8c;
    outline-offset: -4px;
    box-shadow:
        0 0 0 1px #000,
        4px 4px 0px #000;
    overflow: hidden;
    image-rendering: pixelated;
}

.oracle-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    image-rendering: pixelated;
    display: block;
}

/* --- DIALOGUE BOX --- */
.oracle-dialogue-box {
    flex: 1;
    height: 100px;
    background: #030d03;
    border: 3px solid #c8922a;
    outline: 2px solid #7b3f8c;
    outline-offset: -4px;
    box-shadow:
        0 0 0 1px #000,
        4px 4px 0px #000;
    margin-left: 4px;
    display: flex;
    flex-direction: column;
    padding: 6px 8px 5px 8px;
    box-sizing: border-box;
    image-rendering: pixelated;
    overflow: hidden;
}

.oracle-name-line {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #c8922a;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    text-shadow: 1px 1px 0px #000;
    border-bottom: 1px solid #1a2a1a;
    padding-bottom: 4px;
    flex-shrink: 0;
}

.oracle-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #e8e8e8;
    line-height: 1.9;
    margin: 0;
    text-shadow: 1px 1px 0px #000;
    flex: 1;
    overflow: hidden;
}

.oracle-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #1a2a1a;
    padding-top: 3px;
    flex-shrink: 0;
}

.oracle-progress {
    display: flex;
    gap: 3px;
    align-items: center;
}

.oracle-dot {
    width: 3px;
    height: 3px;
    background: #1a2a1a;
}

.oracle-dot.done    { background: #5a7a2a; }
.oracle-dot.current {
    background: #c8e840;
    animation: oracle-blink 0.7s step-end infinite;
}

.oracle-cursor {
    font-size: 7px;
    color: #e8e8e8;
    animation: oracle-blink 0.5s step-end infinite;
}

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

.oracle-next-btn {
    background: transparent;
    border: none;
    color: #7b3f8c;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 0;
    cursor: url('curse.png'), pointer !important;
    text-shadow: 1px 1px 0px #000;
    transition: none;
}

.oracle-next-btn:hover  { color: #c8922a; }

.oracle-next-btn.finished {
    opacity: 0.15;
    pointer-events: none;
}