/* Basic 80s Terminal Aesthetic with Glow and Scanlines */

/* ---- Retro Form Styling ---- */
.retro-form {
    background: rgba(0,0,0,0.96);
    border: 2px solid #00FF00;
    border-radius: 10px;
    box-shadow: 0 0 12px #00FF0070, 0 0 2px #00FF00;
    padding: 28px 32px 20px 32px;
    max-width: 820px;
    margin: 32px auto 0 auto;
    font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
    font-size: 1.03em;
    width: 100%;
}

.storyline-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding-left: 2px;
    line-height: 1.3;
}
.storyline-option:last-child {
    margin-bottom: 0;
}
.storyline-type {
    font-weight: bold;
    color: #00FF00;
    font-size: 1.08em;
    margin-right: 4px;
    text-shadow: 0 0 2px #00FF00;
    display: inline-block;
    min-width: 80px;
    letter-spacing: 0.02em;
}
.storyline-desc {
    color: #00FFAA;
    font-weight: normal;
    font-size: 1em;
    margin-left: 2px;
    text-shadow: 0 0 1.5px #00FFAA;
    display: inline-block;
    word-break: break-word;
    line-height: 1.3;
}

@media (max-width: 900px) {
    .retro-form {
        max-width: 98vw;
        padding: 16px 4vw 12px 4vw;
    }
}

@media (max-width: 600px) {
    .retro-form {
        max-width: 100vw;
        padding: 10px 2vw 10px 2vw;
        font-size: 0.82em;
        border-width: 1.5px;
        box-shadow: 0 0 6px #00FF0070, 0 0 1.5px #00FF00;
    }
    .retro-title {
        font-size: 1.2em;
        padding: 0 2vw;
    }
    .retro-section {
        padding: 10px 4px 8px 4px;
        margin-bottom: 18px;
        border-width: 1px;
    }
    .retro-section-title {
        font-size: 1em;
        margin-bottom: 7px;
    }
    .retro-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        margin-bottom: 11px;
    }
    .retro-form-row label {
        min-width: 0;
        font-size: 1em;
        margin-bottom: 2px;
    }
    .retro-form-row input[type="text"],
    .retro-form-row select,
    .retro-form-row textarea {
        font-size: 1em;
        padding: 5px 6px;
    }
    .retro-btn, .retro-btn-cancel {
        font-size: 1em;
        padding: 8px 10px;
        border-width: 1.5px;
    }
    .retro-form-actions {
        flex-direction: column;
        gap: 12px;
    }
    .form-check-label {
        font-size: 1em;
    }
    .form-text.text-muted {
        font-size: 0.88em;
    }
}

/* Prevent horizontal scroll on mobile */
body, html {
    max-width: 100vw;
    overflow-x: hidden;
}

.retro-section {
    border: 1.5px dashed #00FF00;
    border-radius: 7px;
    background: rgba(0,32,0,0.18);
    margin-bottom: 30px;
    padding: 18px 18px 12px 18px;
}

.retro-section-title {
    color: #00FF00;
    font-size: 1.1em;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
    text-shadow: 0 0 4px #00FF00;
}

.retro-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 18px;
}
.retro-form-row label {
    min-width: 150px;
    font-weight: bold;
    color: #00FF00;
    text-shadow: 0 0 2px #00FF00;
}
.retro-form-row input[type="text"],
.retro-form-row select,
.retro-form-row textarea {
    flex: 1;
    background: #000;
    border: 1.5px solid #00FF00;
    color: #00FF00;
    font-family: inherit;
    font-size: 1em;
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
    box-shadow: 0 0 2px #00FF00;
    margin-left: 0;
}
.retro-form-row textarea {
    min-height: 60px;
    resize: vertical;
}

.retro-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 18px;
    color: #00FF00;
    text-shadow: 0 0 6px #00FF00, 0 0 2px #00FF00;
    letter-spacing: 0.04em;
    font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
}

.retro-form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 18px;
    margin-bottom: 0;
}
.retro-btn {
    background: #000;
    border: 2px solid #00FF00;
    color: #00FF00;
    font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
    font-size: 1em;
    padding: 10px 28px;
    border-radius: 6px;
    text-shadow: 0 0 3px #00FF00;
    box-shadow: 0 0 8px #00FF0030;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.2s;
    margin-bottom: 0;
    margin-top: 0;
}
.retro-btn:hover,
.retro-btn:focus {
    background: #003300;
    color: #FFFF00;
    border-color: #FFFF00;
    box-shadow: 0 0 12px #FFFF00;
}
.retro-btn-cancel {
    background: #1a0000;
    border-color: #FF0055;
    color: #FF0055;
    text-shadow: 0 0 2px #FF0055;
}
.retro-btn-cancel:hover,
.retro-btn-cancel:focus {
    background: #330000;
    color: #FF00AA;
    border-color: #FF00AA;
    box-shadow: 0 0 10px #FF00AA;
}

.form-check-input[type="radio"] {
    accent-color: #00FF00;
    box-shadow: 0 0 2px #00FF00;
}

.form-check-label {
    color: #00FF00;
    text-shadow: 0 0 2px #00FF00;
    margin-left: 6px;
    font-family: inherit;
}

.form-text.text-muted {
    color: #00FFAA;
    font-size: 0.92em;
    margin-top: 2px;
    margin-bottom: 6px;
    display: block;
    text-shadow: 0 0 2px #00FFAA;
}

html {
    height: 100%; /* Ensure html takes full height */
}

body {
    background-color: #000000;
    color: #00FF00;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    font-size: 16px;
    text-shadow: 0 0 3px #00FF00;
    position: relative;
    overflow-x: hidden;
    /* Flexbox for full height layout */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Use min-height on body */
    /* Remove padding-bottom added for absolute footer */
}

/* Refactored Header */
header {
    background-color: #111; /* Slightly lighter black for separation */
    padding: 10px 20px;
    border-bottom: 1px solid #00FF00; /* Green border */
    flex-shrink: 0; /* Prevent header from shrinking */
    /* Flexbox layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.5em;
    display: inline-block; /* Keep inline-block or let flex handle? Keep for now */
}

/* Refactored Header Nav */
/* header nav inherits header flex layout */

/* Footer styling (separated from header) */
footer {
    background-color: #111; /* Slightly lighter black for separation */
    padding: 15px; /* Original footer padding */
    border-top: 1px solid #00FF00; /* Original footer border */
    border-bottom: none;
    flex-shrink: 0; /* Prevent footer from shrinking */
    text-align: center;
    font-size: 0.9em;
    /* Removed absolute positioning properties */
}

main {
    padding: 20px; /* Restore padding */
    flex-grow: 1; /* Make main content area expand within the wrapper */
    /* Make main a flex container so pages can fit-to-viewport without page scrolling */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Critical: allow children to shrink and use internal scrolling */
}

/* New rule for the content wrapper */
.content-wrapper {
    width: 100%;        /* Take full available width initially */
    max-width: 1440px;  /* Apply the maximum width limit */
    margin-left: auto;  /* Center the wrapper horizontally */
    margin-right: auto; /* Center the wrapper horizontally */
    /* padding: 20px; */  /* Remove padding from wrapper */
    flex-grow: 1;       /* Wrapper MUST grow to push footer */
    display: flex;      /* Use flex to layout main and bmc inside */
    flex-direction: column; /* Stack main and bmc vertically */
}

a {
    color: #00FF00; /* Green links */
    text-decoration: none; /* Optional: remove underline */
}

a:hover {
    color: #80FF80; /* Lighter green on hover */
    text-decoration: underline;
}

button, input[type="text"], textarea { /* Added textarea */
    background-color: #222;
    color: #00FF00;
    border: 1px solid #00FF00;
    padding: 8px 12px;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

button:hover {
    background-color: #333;
}

input[type="text"], textarea { /* Added textarea */
    cursor: text;
}

input[type="text"]::placeholder, textarea::placeholder { /* Added textarea */
    color: #008000; /* Darker green for placeholder */
    opacity: 0.7;
}

/* Specific styling for the custom prompt textarea */
#custom_prompt {
    width: 90%; /* Make it wider */
    min-height: 80px; /* Ensure a decent minimum height */
    resize: vertical; /* Allow vertical resizing, disable horizontal */
}

h1, h2, h3 {
    color: #00FF00; /* Ensure headings are also green */
    border-bottom: 1px dashed #00FF00; /* Optional: dashed underline for headings */
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* Remove inline styles from templates if desired now */
.home-container {
    text-align: center;
    padding: 40px;
    flex-grow: 1; /* Allow home container to grow */
    display: flex; /* Center content vertically too */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

.button { /* General button styling if needed, overrides default button */
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #005000; /* Dark Green */
    color: #00FF00;
    text-decoration: none;
    border: 1px solid #00FF00;
    border-radius: 0px; /* Sharp corners */
    cursor: pointer;
}
.google-login {
    background-color: #550000; /* Dark Red */
    border-color: #FF8080;
    color: #FF8080;
}
.button:hover {
    opacity: 0.9;
    background-color: #007000;
}
.google-login:hover {
    background-color: #770000;
}

#game-display { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; border: 1px dashed #00FF00; padding: 15px; /* Removed flex-grow: 1 */}
#narrative-area { flex: 2; min-width: 300px; }
#image-area { flex: 1; min-width: 200px; text-align: center; }
#image-area img { border: 1px solid #00FF00; max-width: 100%; height: auto; background-color: #111; box-sizing: border-box; } /* Style image, ensure border is included in width */
#choice-area input[type="text"] { width: 70%; margin-right: 5px; }

#loading-indicator {
    color: #FFFF00; /* Yellow for loading text */
}

pre {
    background-color: #111;
    border: 1px solid #008000;
    padding: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 300px;
    overflow-y: auto;
}


/* --- CRT Scanlines Overlay --- */
body::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Fainter scanlines */
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
z-index: 2;
background-size: 100% 4px, 3px 100%; /* Adjust line thickness/spacing */
pointer-events: none;
/* animation: flicker 0.15s infinite; */ /* Removed flicker */
}

/* Removed Flicker Animation */
/* @keyframes flicker { ... } */


/* --- Dice Roller Styles --- */
.hidden {
    display: none !important; /* Force hide */
}

#dice-roller-overlay {
    position: fixed; /* Or absolute within a container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Darker semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
    opacity: 0; /* Start hidden for fade-in */
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Allow clicks through when hidden */
}

#dice-roller-overlay:not(.hidden) {
    opacity: 1; /* Fade in when not hidden */
    pointer-events: auto; /* Allow interaction when visible */
}


#dice-roller-box {
    background-color: #111; /* Dark background like terminal */
    border: 2px solid #00FF00; /* Green border */
    padding: 30px 40px;
    text-align: center;
    color: #00FF00; /* Green text */
    font-family: 'Courier New', monospace; /* Or your chosen retro font */
    min-width: 300px;
    box-shadow: 0 0 15px #00FF00; /* Add glow to the box */
}

#dice-container {
    font-size: 3em; /* Make dice character large */
    margin: 20px 0;
    min-height: 50px; /* Prevent layout shift during animation */
    color: #FFFF00; /* Yellow dice text? */
    /* Basic animation placeholder - refine this */
    transition: transform 0.1s ease-in-out;
}

/* Example simple shake animation */
.dice-rolling {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0) rotate(5deg); }
  20%, 80% { transform: translate3d(2px, 0, 0) rotate(-5deg); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0) rotate(8deg); }
  40%, 60% { transform: translate3d(4px, 0, 0) rotate(-8deg); }
}


#roll-button {
    background-color: #00FF00;
    color: #000;
    border: none;
    padding: 10px 20px; /* Base padding */
    font-family: inherit;
    font-size: 1em; /* Base font size */
    cursor: pointer;
    margin-top: 10px; /* Base margin */
    text-transform: uppercase;
    font-weight: bold;
}

#roll-button:hover {
    background-color: #80FF80;
}

#roll-button:disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
}

/* --- Styles moved from game_view.html --- */
.game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px dashed #00FF00; padding-bottom: 10px;}
#game-stats span { margin-left: 20px; }
#inventory-display { font-style: italic; color: #ccc; } /* Style inventory slightly */
.game-container {
    padding: 20px;
    flex: 1 1 auto; /* Fill available height within <main> */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Critical for internal scroll panes */
    overflow: hidden; /* Prevent page scroll; scroll inside panels instead */
}

/* --- Single-screen Game Layout (two columns, internal scroll panes) --- */
#game-container #left-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#game-container #left-pane #narrative-area {
    flex: 1 1 auto;
    min-height: 0;
}

#game-container #left-pane #choice-area {
    flex: 0 0 auto;
    margin-top: 10px;
}

#game-container .game-header,
#game-container #toggle-notes-btn,
#game-container #loading-indicator,
#game-container #game-over-area,
#game-container #dice-roller-overlay {
    flex: 0 0 auto;
}

#game-container #notes-section {
    flex: 0 0 auto;
    max-height: 25vh;
    overflow: auto;
}

/* Two-column layout that consumes remaining viewport height */
#game-container #game-display {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 20px;
    margin-bottom: 12px;
    border: 1px dashed #00FF00;
    padding: 15px;
}

#game-container #narrative-area,
#game-container #image-area {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Scroll the narrative internally */
#game-container #narrative-text,
#game-container #loading-narrative {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding-right: 10px;
}

/* Make the image fit its pane */
#game-container #image-area img,
#game-container #matrix-placeholder {
    width: 100% !important;
    max-width: none;
    height: 100% !important;
    max-height: 100%;
    object-fit: contain;
    box-sizing: border-box;
}

#game-container #choice-buttons {
    max-height: 18vh;
    overflow: auto;
}

@media (max-width: 900px) {
    #game-container #game-display {
        grid-template-columns: 1fr;
    }
}

/* Apply similar grow to the generic container used on other pages */
/* This might need adjustment if .container is used elsewhere */
.container {
    flex-grow: 1; /* Already expands */
    display: flex; /* Add flex display */
    flex-direction: column; /* Stack children vertically */
}
/* Note: #game-display styles already exist above, merging/overriding might be needed if different */
/* #game-display { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; border: 1px dashed #00FF00; padding: 15px;} */
#narrative-area { flex: 2; min-width: 300px; } /* Base styles */
#image-area { flex: 1; min-width: 200px; text-align: center; } /* Base styles */
/* Note: #image-area img styles already exist above, merging/overriding might be needed if different */
/* #image-area img { border: 1px solid #00FF00; max-width: 100%; height: auto; background-color: #111; transition: opacity 0.5s ease-in-out; opacity: 1;} */
#image-area {
    width: 100%;
    max-width: 436px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}
#matrix-placeholder {
    width: 100% !important;
    max-width: 436px;
    height: auto !important;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}

/* --- Gallery --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    align-items: start;
}
.gallery-thumb-btn {
    padding: 0;
    border: 1px solid #00FF00;
    background: #111;
    cursor: zoom-in;
}
.gallery-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* --- Saved Games list layout --- */
.saved-game-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.saved-game-thumb {
    flex: 0 0 180px;
}
.saved-game-info {
    flex: 1 1 auto;
    min-width: 0;
}
.thumb-placeholder {
    width: 180px;
    height: 180px;
    border: 1px solid #00FF00;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    opacity: 0.75;
}
.pagination-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}

@media (max-width: 700px) {
    .saved-game-row {
        flex-direction: column;
    }
    .saved-game-thumb {
        flex: 0 0 auto;
    }
    .thumb-placeholder {
        width: 100%;
    }
    .gallery-thumb {
        height: 220px;
    }
}
#image-area img.fade-out { opacity: 0; } /* Added fade class back */

@media (max-width: 600px) {
  #image-area {
    max-width: 100vw;
    padding: 0;
  }
  #matrix-placeholder {
    max-width: 100vw;
  }
}

/* Note: #choice-area input styles already exist above */
/* #choice-area input[type="text"] { width: 70%; margin-right: 5px; } */
#choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    margin-top: 10px;
}
#choice-buttons .choice-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    font-size: 1em;
    background: #111;
    color: #00FF00;
    border: 1px solid #00FF00;
    border-radius: 2px;
    text-align: left;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}
#choice-buttons .choice-btn:hover:not(:disabled) {
    background: #00FF00;
    color: #111;
}
@media (max-width: 600px) {
    #choice-buttons .choice-btn {
        font-size: 0.95em;
        padding: 8px 8px;
    }
}



/* --- Responsive Styles --- */
@media (max-width: 768px) {
    /* Adjust Game Layout */
    #game-display {
        flex-direction: column-reverse; /* Image above narrative */
    }

    #narrative-area,
    #image-area {
        flex: none; /* Remove flex sizing */
        width: 100%;
        min-width: unset; /* Override min-width */
    }

    /* Improve Text Readability */
    #narrative-area { /* Apply to container holding narrative text */
        font-size: 1.1em;
        line-height: 1.6;
    }

    /* Enlarge Buttons/Tap Targets */
    #choice-buttons button,
    #roll-button,
    .button /* Apply to general buttons too */
     {
        padding: 15px; /* Larger padding */
        font-size: 1.1em; /* Larger font */
        margin: 10px 0; /* Consistent vertical margin */
    }

    #choice-buttons button { /* Make choice buttons full width */
         display: block;
         width: 100%;
         box-sizing: border-box; /* Include padding in width calculation */
         margin-left: 0; /* Reset horizontal margin if any */
         margin-right: 0; /* Reset horizontal margin if any */
    }

    /* Optional: Header nav adjustments if needed */
    /* header nav { */
        /* Example: stack links */
        /* float: none; */
        /* text-align: center; */
        /* width: 100%; */
        /* margin-top: 10px; */
    /* } */
    /* header { */
        /* Example: allow header items to wrap */
        /* flex-wrap: wrap; */
        /* justify-content: center; */
    /* } */
}

/* --- Buy Me A Coffee Link Styles --- */
.bmc-container {
    /* text-align: center; */ /* Replaced by flex centering */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    padding: 40px 20px; /* Restore padding */
    margin-bottom: 20px; /* Increased space before the footer */
    flex-shrink: 0; /* Prevent shrinking */
    border-top: 1px dashed #00FF00; /* Optional: add a separator line */
    margin-top: 30px; /* Increased space above the container */
}

.bmc-note {
    color: #00FF00; /* Standard green text */
    font-size: 0.9em;
    margin-bottom: 25px; /* Increased space between note and button */
    line-height: 1.5;
    max-width: 600px; /* Limit width for readability */
    text-align: center; /* Ensure text within the note is centered */
    /* margin-left/right auto no longer needed due to flex centering */
}

.bmc-link {
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center; /* Vertically center icon and text */
    padding: 10px 20px; /* Slightly larger padding for the button */
    background-color: #222; /* Dark background */
    color: #FFD700; /* Gold color for text */
    border: 1px solid #FFD700; /* Gold border */
    text-decoration: none;
    font-family: 'Press Start 2P', 'Courier New', monospace; /* Retro pixel font (add fallback) */
    font-size: 1em; /* Slightly larger font for the button */
    text-shadow: 0 0 3px #FFD700; /* Gold glow */
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* Subtle gold box shadow */
}

.bmc-link:hover {
    background-color: #333;
    color: #FFF; /* White text on hover */
    border-color: #FFF;
    text-shadow: 0 0 5px #FFF;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Brighter white glow on hover */
    text-decoration: none; /* Remove underline on hover */
}

.bmc-icon {
    width: 22px; /* Slightly larger icon */
    height: 22px;
    margin-right: 10px; /* Increased space between icon and text */
    vertical-align: middle; /* Align icon nicely */
    /* Ensure SVG fills correctly */
    fill: currentColor; /* Use link's color for SVG fill */
}

/* SVG Steam Animation */
@keyframes steam-animation {
    0% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-4px);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-8px);
        opacity: 0;
    }
}

.bmc-icon .steam {
    stroke: #FFF; /* White steam */
    animation: steam-animation 1.5s infinite ease-out;
}

/* Ensure pixelated rendering for SVG if possible */
.bmc-icon {
    image-rendering: pixelated; /* Suggest pixelated rendering */
    shape-rendering: crispEdges; /* For sharp SVG edges */
}

/* --- VHS Overlay Effect --- */
/* Apply this class to the container holding the image (e.g., #image-area) */
.vhs-overlay {
    position: relative; /* Needed for absolute positioning of pseudo-elements */
    overflow: hidden; /* Keep effects contained */
}

/* Static Effect */
.vhs-overlay::before {
    content: "";
    z-index: 3; /* Ensure it's above the image but below other UI */
    animation: vhs-static 0.1s infinite steps(1); /* Fast flicker */
}

/* Scanline Effect */
.vhs-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 3px; /* Thinner scanlines */
    opacity: 0.15; /* Fainter scanlines */
    pointer-events: none;
    z-index: 4; /* Above static */
    animation: vhs-scanlines-anim 12s linear infinite; /* Use new animation name and slower scroll */
}

/* Renamed and adjusted static animation */
@keyframes vhs-static-anim {
  0% { background-position: 0px 0px; opacity: 0.1; }
  25% { background-position: -3px -4px; opacity: 0.15; }
  50% { background-position: 4px 2px; opacity: 0.08; }
  75% { background-position: -2px 5px; opacity: 0.18; }
  100% { background-position: 0px -3px; opacity: 0.1; }
}

/* Renamed and adjusted scanline animation */
@keyframes vhs-scanlines-anim {
    from { background-position-y: 0; }
    to { background-position-y: -12px; } /* Slower scroll speed */
}

/* Optional: Add a subtle horizontal glitch/jitter effect */
/* Apply this animation to the #image-area.vhs-overlay element itself */
/*
@keyframes vhs-jitter {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
  75% { transform: translateX(-0.5px); }
}
#image-area.vhs-overlay {
    animation: vhs-jitter 0.3s infinite steps(2);
}

/* Debugging rule removed */
*/

/* Add @font-face for 'Press Start 2P' if not already loaded */
/* Example:
@font-face {
  font-family: 'Press Start 2P';
  src: url('/path/to/press-start-2p-v9-latin-regular.woff2') format('woff2'),
       url('/path/to/press-start-2p-v9-latin-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*/

/* Matrix Placeholder Canvas Styling */
#matrix-placeholder {
    border: 1px solid #00FF00;
    background-color: #050505;
    box-sizing: border-box; /* Include border in element's total size */
    /* Ensure it doesn't accidentally inherit other image styles if any */
    max-width: 100%; /* Optional: prevent overflow if container is smaller */
    height: auto; /* Maintain aspect ratio if max-width kicks in */
    vertical-align: middle; /* Align nicely if needed */
}