@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* 0. KEYFRAMES & ANIMATIONS (Theatrical Effects) */
@keyframes spooky-pulse {
    /* Creates a pulsating shadow effect mixing Gold and Red */
    0% { box-shadow: 0 0 4px rgba(229, 193, 88, 0.4); } /* Soft Gold */
    50% { box-shadow: 0 0 10px rgba(229, 193, 88, 0.8), 0 0 8px rgba(179, 0, 0, 0.6); } /* Bright Gold/Red Mix */
    100% { box-shadow: 0 0 4px rgba(229, 193, 88, 0.4); }
}

/*
 * Custom Website Stylesheet - SPOOKY HOLLYWOOD DIRECTOR THEME
 * * Based on the Windows 98 OS structure, re-themed with deep reds, shadow colors,
 * and BRIGHTER GOLD accents, while preserving the 'Share Tech Mono' cyber font.
 */

/* 1. BODY & BASE STYLES (Deep Blood Red Background) */
body {
    /* Spooky, deep blood red for the desktop */
    background-color: #4D0404; 
    
    /* Font and Size maintained */
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px; 
    color: #C0C0C0; /* Pale script gray text for readability */
    margin: 0;
    padding: 0;
    line-height: 1.3;
    
    /* Taskbar space maintained */
    margin-bottom: 30px; 
}

/* 2. WINDOW/DIALOG STYLING (The core component) */
.window {
    background-color: #800000; /* Aged Velour Red */
    padding: 2px;
    
    /* Classic 3D Raised Bevel Effect */
    border-style: solid;
    border-width: 2px;
    /* Top/Left is Gold Light, Bottom/Right is Deep Shadow Red */
    border-color: #E5C158 #330000 #330000 #E5C158; /* UPDATED GOLD */
    box-shadow: 2px 2px 0 #000000; 

    width: 90%;
    max-width: 600px;
    margin: 50px auto; 
}

/* 3. WINDOW TITLE BAR (Active and Inactive States) */
.title-bar {
    background-color: #B30000; /* Dramatic Red Curtains (ACTIVE) */
    color: #C0C0C0; /* Pale Script Grey */
    padding: 3px 6px 3px 6px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    
    /* FANCY: Apply pulsating glow animation to the active title bar */
    animation: spooky-pulse 3s infinite ease-in-out; 
}

/* 3b. INACTIVE TITLE BAR STATE */
.title-bar.inactive {
    background-color: #590000; /* Muted Dark Red for INACTIVE state */
    color: #999999; 
    animation: none; /* Remove glow when inactive */
}

.title-bar-text {
    font-weight: bold;
    /* Classic light text with a shadow */
    text-shadow: 1px 1px #000000; 
}

/* Text style override for Inactive Title Bar */
.title-bar.inactive .title-bar-text {
    text-shadow: none; 
}


/* 4. CONTENT AREA (e.g., text inside the window) */
.content {
    padding: 10px;
    background-color: #330000; /* Deep Shadow Red for content background */
    color: #C0C0C0; /* Ensure content text remains Pale Script Grey */
    border: 1px solid #E5C158; /* UPDATED GOLD line separator */
}

/* 5. BUTTON STYLING (For standard buttons like OK, Cancel) */
button, .button {
    background-color: #800000; /* Aged Velour Red */
    color: #C0C0C0; /* Pale Script Grey text */
    padding: 4px 10px;
    margin: 5px;
    cursor: pointer;
    
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    
    /* Gold Light/Shadow Red Raised Effect */
    border-style: solid;
    border-width: 2px;
    border-color: #E5C158 #330000 #330000 #E5C158; /* UPDATED GOLD */
    
    /* FANCY: Add smooth transition for pressed effect */
    transition: all 0.05s linear;
}

/* Button Active/Click State (3D Pressed Down Look) */
button:active, .button:active {
    /* Invert the borders (Shadow Red on top/left, Gold Light on bottom/right) */
    border-color: #330000 #E5C158 #E5C158 #330000; /* UPDATED GOLD */
    padding-top: 5px; 
    padding-bottom: 3px;
    outline: none;
}

/* 6. LINKS (Dramatic Link Color) */
a {
    color: #C0C0C0; /* Default text color (Pale Script Grey) */
    text-decoration: none; 
    transition: color 0.1s;
}

a:hover {
    text-decoration: underline; 
    color: #FF3333; /* Bright Stage Light Red hover (Unchanged) */
}

/* 7. TITLE BAR CONTROLS (Minimize, Maximize, Close Buttons) */
.title-bar-controls {
    display: flex;
    gap: 2px;
}

.title-bar-button {
    background-color: #800000; /* Aged Velour Red */
    width: 16px; 
    height: 14px; 
    padding: 0;
    margin: 0;
    cursor: pointer;
    
    font-family: sans-serif; 
    font-size: 8px; 
    
    display: grid; 
    place-items: center; 
    
    color: #C0C0C0; /* Pale Script Grey symbols */
    font-weight: bold;
    
    /* Gold Light/Shadow Red Raised Effect */
    border-style: solid;
    border-width: 1px;
    border-color: #E5C158 #330000 #330000 #E5C158; /* UPDATED GOLD */
    box-shadow: none; 
    
    /* FANCY: Add smooth transition for pressed effect */
    transition: all 0.05s linear;
}

/* Control Button Active/Click State (3D Pressed Down Look) */
.title-bar-button:active {
    /* Invert the borders (Shadow Red on top/left, Gold Light on bottom/right) */
    border-color: #330000 #E5C158 #E5C158 #330000; /* UPDATED GOLD */
}

/* 8. TASKBAR STYLING */
.taskbar {
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px; 
    background-color: #800000; /* Aged Velour Red */
    border-top: 2px solid #E5C158; /* UPDATED GOLD bevel top border */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
    box-sizing: border-box;
    z-index: 1000; 
}

/* 9. START BUTTON STYLING */
.start-button {
    background-color: #800000; /* Aged Velour Red */
    font-weight: bold;
    color: #C0C0C0; /* Pale Script Grey text */
    font-size: 13px; 
    height: 22px; 
    line-height: 1.2;
    padding: 2px 10px 2px 10px;
    margin: 0 4px 0 0; 
    
    /* Gold Light/Black Shadow */
    border-style: solid;
    border-width: 2px;
    border-color: #E5C158 #000000 #000000 #E5C158; /* UPDATED GOLD */
    
    /* FANCY: Add transition and initial shadow */
    box-shadow: 2px 2px 0 #000000;
    transition: all 0.1s ease;
}

/* FANCY: Gold glow on hover for dramatic effect */
.start-button:hover {
    box-shadow: 2px 2px 10px #E5C158, 0 0 10px #E5C158; 
}

/* 10. SYSTEM TRAY (Time/Icons area) */
.taskbar-tray {
    height: 22px;
    padding: 0 4px;
    font-size: 11px;
    display: flex;
    align-items: center;
    
    /* Sunken Gold/Shadow Red Effect */
    border-style: solid;
    border-width: 2px;
    border-color: #330000 #E5C158 #E5C158 #330000; /* UPDATED GOLD */
    background-color: #800000; /* Aged Velour Red */
}

/* 11. FORM ELEMENTS (Inputs, Textareas) - Cyber Terminal Style */
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="number"],
textarea {
    width: calc(100% - 10px); 
    padding: 3px;
    margin: 4px 0;
    
    /* Sunken 3D Effect maintained */
    border-style: solid;
    border-width: 2px;
    border-color: #330000 #E5C158 #E5C158 #330000; /* Shadow Red/UPDATED GOLD */
    
    /* TERMINAL OVERRIDE - Black background with Pale Text and Gold Cursor */
    background-color: #000000; 
    color: #C0C0C0; /* Pale Script Grey text */
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    caret-color: #E5C158; /* UPDATED GOLD Cursor */
}

input[type="text"]:focus, 
textarea:focus {
    outline: none; 
}

/* 12. SCROLL BAR STYLING (Spooky Red/Gold Style) */
/* Requires Webkit for broad cross-browser support */
.window::-webkit-scrollbar,
.content::-webkit-scrollbar {
    width: 16px; 
    height: 16px;
}

.window::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track {
    background: #800000; /* Aged Velour Red track */
    /* Sunken Gold/Shadow Red effect for the track */
    border-style: solid;
    border-width: 1px;
    border-color: #330000 #E5C158 #E5C158 #330000; /* UPDATED GOLD */
}

.window::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb {
    background: #800000; /* Aged Velour Red thumb */
    /* Raised Gold Light/Shadow Red effect for the thumb */
    border-style: solid;
    border-width: 2px;
    border-color: #E5C158 #330000 #330000 #E5C158; /* UPDATED GOLD */
}

.window::-webkit-scrollbar-thumb:active,
.content::-webkit-scrollbar-thumb:active {
    /* Pressed effect */
    border-color: #330000 #E5C158 #E5C158 #330000; /* UPDATED GOLD */
}

/* Scrollbar Corner */
.window::-webkit-scrollbar-corner,
.content::-webkit-scrollbar-corner {
    background: #800000;
}

/* 13. CHECKBOXES AND RADIO BUTTONS (Spooky Red/Gold Style) */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    width: 13px;
    height: 13px;
    margin: 0 4px 0 0;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;

    /* Sunken Gold/Shadow Red Effect */
    background-color: #800000; /* Aged Velour Red fill */
    border-style: solid;
    border-width: 1px;
    border-color: #330000 #E5C158 #E5C158 #330000; /* UPDATED GOLD */
    outline: none;
}

/* Style for Checkbox tick mark */
input[type="checkbox"]:checked::before {
    content: ''; 
    display: block;
    width: 9px;
    height: 9px;
    margin: 2px;
    background-color: #E5C158; /* UPDATED GOLD Checkmark */
}

/* Style for Radio button center dot */
input[type="radio"] {
    border-radius: 50%; 
}

input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    margin: 3px;
    border-radius: 50%;
    background: #E5C158; /* UPDATED GOLD Center Dot */
}

/* 14. IMAGES (Aged Gold Frame) */
img {
    max-width: 100%; 
    height: auto;
    
    /* MODIFIED: Increased frame size maintained */
    border-style: solid;
    border-width: 3px; 
    /* Sunken Gold/Shadow Red effect for the frame border */
    border-color: #330000 #E5C158 #E5C158 #330000; /* UPDATED GOLD */
    
    padding: 3px; 
    background-color: #E5C158; /* UPDATED GOLD FRAME BACKGROUND */
    
    display: block; 
}