/* Classic web-safe font and custom cursor */
body {
    font-family: 'Times New Roman', Times, serif;
    overflow: hidden;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAANNJREFUOI2lkE0KwCAIRd/dJ/yD/g2K/sNQYyFNozQZ2gXfS1I2oABMhY3ZkGzKzYxkQjKkG2MhfkSoeO4/oJCRfHAgS0aB1aAc2yAIAhTrgYgA1yCCggkI4wT4wA2MMsCIM8AAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAMsAAfAGeDBVcljX4iAAAAAElFTkSuQmCC'), auto;
    user-select: none;
}

/* Windows 2000-style desktop background */
.desktop-bg {
    background-color: #008080;
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* Desktop icon styling */
.desktop-icon {
    position: absolute;
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}
.desktop-icon:hover, .desktop-icon-active {
    background-color: rgba(0, 0, 128, 0.5);
    outline: 1px dotted rgba(255,255,255,0.5);
}
.desktop-icon img {
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
    pointer-events: none; /* Prevent image from interfering with clicks */
}
.desktop-icon span {
    pointer-events: none; /* Prevent span from interfering with clicks */
}

/* Generic Window Style */
.window {
    position: absolute;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    background-color: #c0c0c0;
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
    min-width: 200px;
    min-height: 150px;
    pointer-events: auto; /* Make windows interactive */
}

#windows-container {
    pointer-events: none; /* Allow clicks to pass through to desktop icons */
}

.title-bar {
    background: linear-gradient(to right, #000080, #1084d0);
    color: white;
    padding: 3px 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    flex-shrink: 0;
}
.title-bar.inactive {
     background: linear-gradient(to right, #808080, #c0c0c0);
}

.title-bar-buttons button {
    background-color: #c0c0c0;
    border: 1px solid #808080;
    border-top-color: #fff;
    border-left-color: #fff;
    font-family: monospace;
    font-size: 10px;
    padding: 0 4px;
    line-height: 1.2;
    min-width: 18px;
}

.window-content { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; }
.browser-toolbar { background-color: #c0c0c0; border-bottom: 1px solid #808080; padding: 4px; display: flex; align-items: center; gap: 4px; position: relative; }
.toolbar-button { background-color: #c0c0c0; border: 1px solid #808080; border-top-color: #fff; border-left-color: #fff; padding: 2px 5px; }
.toolbar-button:disabled { color: #808080; text-shadow: 1px 1px #fff; }
.toolbar-button:active:not(:disabled) { border-color: #000; border-top-color: #808080; border-left-color: #808080; }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #c0c0c0;
    border: 1px solid #808080;
    border-top-color: #fff;
    border-left-color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    z-index: 100;
    padding: 2px;
}
.dropdown-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 2px 15px;
    background: none;
    border: none;
}
.dropdown-menu button:hover {
    background-color: #000080;
    color: white;
}


.address-bar { background-color: white; border: 1px solid #808080; padding: 2px 4px; width: 100%; font-size: 14px; }
.browser-content { background-color: white; height: 100%; overflow-y: auto; position: relative; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 10000; }
.modal-box { background-color: #c0c0c0; padding: 20px; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; width: 350px; text-align: center; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.modal-box h3 { font-weight: bold; margin-bottom: 1rem; }
.progress-bar-container { border: 1px solid #808080; background-color: white; padding: 1px; }
.progress-bar { background-color: #000080; height: 20px; width: 0%; transition: width 1s linear; }

.file-window-content { background-color: white; color: black; font-family: 'Lucida Console', Monaco, monospace; font-size: 14px; padding: 5px; height: 100%; overflow-y: auto; white-space: pre-wrap; border-top: 1px solid #808080; }
.folder-content { background-color: white; color: black; height: 100%; overflow-y: auto; padding: 5px; }
.file-icon { display: flex; align-items: center; gap: 8px; padding: 4px; cursor: pointer; }
.file-icon:hover { background-color: #000080; color: white; }
.file-icon img { width: 24px; height: 24px; }

@keyframes browser-glitch { 0%, 100% { transform: translate(0, 0) skew(0); } 10% { transform: translate(-3px, 3px) skew(-2deg); } 20% { transform: translate(3px, -3px) skew(2deg); } 30% { transform: translate(-3px, -3px) skew(0); } 40% { transform: translate(3px, 3px) skew(2deg); } 50% { transform: translate(0, 0) skew(0); } }
.glitching { animation: browser-glitch 0.2s infinite; }
@keyframes text-glitch { 0% { text-shadow: 1px 1px red, -1px -1px cyan; } 50% { text-shadow: -1px 1px red, 1px -1px cyan; } 100% { text-shadow: 1px -1px red, -1px 1px cyan; } }
.corrupted-text { animation: text-glitch 0.1s infinite; color: white; }

/* Call/Task Manager windows */
#skype-call, #task-manager { z-index: 2000; }
.caller-id { background-color: #3C97E2; color: white; padding: 10px; text-align: center; }
.caller-avatar { background-color: black; padding: 20px; text-align: center; }
.caller-avatar img { filter: brightness(0.4) contrast(2) grayscale(1); mix-blend-mode: lighten; animation: static-flicker 0.1s infinite; }
@keyframes static-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; transform: scale(1.01); } }
.call-buttons { display: flex; justify-content: space-around; padding: 15px; background-color: #f0f0f0; }
.call-btn { padding: 8px 16px; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; }
.answer-btn { background-color: #4CAF50; }
.decline-btn { background-color: #f44336; }
.task-list { background-color: white; color: black; font-family: 'Lucida Console', Monaco, monospace; padding: 5px; height: 100%; overflow-y: auto; }
.task-item { display: flex; justify-content: space-between; padding: 2px 5px; }
.task-item.selected { background-color: #000080; color: white; }

/* Final Event Styling */
#final-event-overlay, #reboot-overlay, #shutdown-overlay { background-color: black; z-index: 9999; }
#final-jumpscare { width: 100%; height: 100%; object-fit: cover; animation: static-flicker 0.1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.blinking-text { animation: blink 1s linear infinite; }

/* Website Specific Styles */
.site-body { background-image: url('https://www.transparenttextures.com/patterns/stardust.png'); background-color: #2a004f; color: #ffff00; min-height: 100%; }
.site-content { max-width: 800px; margin: 0 auto; background-color: rgba(0,0,50,0.5); border: 2px double #ffff00; padding: 10px; }
.site-header { text-align: center; padding: 10px; border-bottom: 4px ridge #ff00ff; }
.site-nav { padding: 10px; text-align: center; border-bottom: 4px ridge #ff00ff; }
.site-nav a { color: #00ff00; text-decoration: underline; margin: 0 15px; cursor: pointer; }
.site-nav a:hover { color: #ff00ff; }
.main-section { padding: 20px; }
.guestbook-entry { border: 1px dotted #00ffff; padding: 8px; margin-bottom: 10px; background-color: rgba(0,0,0,0.2); }

/* Solitaire Game Styles */
#solitaire-content { background-color: #008000; padding: 10px; height: 100%; display: flex; flex-direction: column; gap: 10px; font-family: Arial, sans-serif; }
.solitaire-top { display: flex; justify-content: space-between; }
.solitaire-stock-waste { display: flex; gap: 10px; }
.solitaire-foundations { display: flex; gap: 10px; }
.solitaire-tableau { display: flex; gap: 10px; justify-content: center; flex-grow: 1; }
.card-pile { position: relative; width: 71px; min-height: 96px; }
.card, .card-placeholder { width: 71px; height: 96px; border: 1px solid #777; border-radius: 5px; background-color: #fefefe; position: absolute; top: 0; left: 0; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; }
.card-placeholder { border: 2px dotted #aaa; background: rgba(0,0,0,0.1); }
.card.red { color: red; }
.card.black { color: black; }
.card.face-down { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Card_back_01.svg/71px-Card_back_01.svg.png'); background-size: cover; color: transparent; }
.card.selected { box-shadow: 0 0 10px 3px yellow; z-index: 50; }
.solitaire-win-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: lime; padding: 20px; border: 2px solid lime; font-size: 2rem; z-index: 100; }

/* Taskbar and Start Menu */
#taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background-color: #c0c0c0; border-top: 2px solid #fff; z-index: 9000; display: flex; align-items: center; padding: 0 2px; }
#start-button { background-color: #c0c0c0; border: 1px solid #808080; border-top-color: #fff; border-left-color: #fff; border-right-color: #000; border-bottom-color: #000; padding: 2px 6px; font-weight: bold; display: flex; align-items: center; gap: 4px; cursor: pointer;}
#start-button:active { border-top-color: #000; border-left-color: #000; border-right-color: #fff; border-bottom-color: #fff; }
#start-menu { position: absolute; bottom: 30px; left: 0; width: 200px; background-color: #c0c0c0; border: 2px solid #fff; border-right-color: #000; border-bottom-color: #000; z-index: 8999; }
#start-menu:not(.hidden) { display: flex; }
.start-menu-side-bar { background-color: #000080; color: white; writing-mode: vertical-rl; text-orientation: mixed; padding: 10px 2px; font-size: 1.5rem; font-weight: bold; }
.start-menu-items { list-style: none; padding: 2px; margin: 0; width: 100%; }
.start-menu-items li { display: flex; align-items: center; gap: 5px; padding: 5px; cursor: pointer; }
.start-menu-items li:hover { background-color: #000080; color: white; }
.start-menu-items hr { border-color: #808080; border-bottom-color: #fff; margin: 2px 0; }
#taskbar-items { flex-grow: 1; display: flex; align-items: center; gap: 2px; height: 100%; padding: 0 4px; }
.taskbar-item { height: 24px; min-width: 100px; max-width: 150px; background-color: #c0c0c0; border: 1px solid #808080; border-top-color: #fff; border-left-color: #fff; border-right-color: #000; border-bottom-color: #000; padding: 2px 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.taskbar-item.active { border-top-color: #000; border-left-color: #000; border-right-color: #fff; border-bottom-color: #fff; background-color: #e0e0e0; }
#clock { border: 1px solid #808080; border-top-color: #000; border-left-color: #000; padding: 2px 5px; margin-left: auto; }

/* Endless Runner */
#runner-canvas { background-color: #87ceeb; image-rendering: pixelated; width: 100%; height: 100%; }

/* Loft Point-and-Click Scene */
#loft-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1a1a2e;
    background-image: radial-gradient(circle at top left, #16222a, #3a6073 150%);
    z-index: 11000;
    color: white;
    font-family: 'Courier New', Courier, monospace;
}
.loft-object {
    position: absolute;
    cursor: pointer;
    transition: filter 0.3s ease, transform 0.3s ease;
}
.loft-object:hover {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 100, 0.7));
    transform: scale(1.02);
}
#loft-desk {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    height: 30vh;
    background-color: #3d2c21;
    border-top: 5px solid #573f2f;
}
#loft-pc {
    position: absolute;
    bottom: 30vh;
    left: 50%;
    transform: translateX(-60%);
    width: 15vw;
    height: 20vh;
}
#loft-pc-screen {
    width: 100%;
    height: 80%;
    background-color: #050510;
    border: 10px solid #888;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
    animation: screen-flicker 15s infinite;
}
@keyframes screen-flicker {
    0%, 100% { opacity: 0.9; }
    2% { opacity: 0.7; }
    4% { opacity: 0.9; }
    5% { opacity: 0.8; }
    5.5% { opacity: 0.9; }
}
#loft-window {
    top: 15vh;
    right: 10vw;
    width: 25vw;
    height: 40vh;
    background-color: #000;
    border: 20px solid #4a3a3a;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
#loft-notepad {
    bottom: 31vh;
    left: calc(50% + 5vw);
    width: 10vw;
    height: 15vh;
    background-color: #f5f5dc;
    transform: rotate(5deg);
    padding: 10px;
    color: #333;
    font-size: 0.8rem;
}
#loft-door {
    top: 10vh;
    left: 5vw;
    width: 15vw;
    height: 70vh;
    background-color: #6b4f3a;
    border: 5px solid #4a3a3a;
}
#loft-frame {
    position: absolute;
    top: 25vh;
    left: 28vw;
    width: 10vw;
    height: 15vh;
    background-color: #e1c699;
    border: 15px solid #5c3d28;
    padding: 5px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    transition: transform 0.5s ease-in-out;
}
#loft-safe {
    position: absolute;
    top: 27vh;
    left: 29vw;
    width: 8vw;
    height: 12vh;
    background-color: #7f8c8d;
    border: 5px solid #2c3e50;
    border-radius: 50%;
}
#loft-back-arrow {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    text-shadow: 2px 2px 4px #000;
}
#thought-bubble {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    background: rgba(0,0,0,0.7);
    border: 2px solid white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    z-index: 12000;
}
#loft-cabinet {
    background-color: #52525b;
    border: 5px solid #3f3f46;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.4);
}


/* Messenger Window Styles */
.chat-log {
    flex-grow: 1;
    overflow-y: auto;
    background-color: white;
    color: black;
    font-family: 'Tahoma', 'Verdana', sans-serif;
    font-size: 14px;
}
.message {
    padding: 8px 12px;
    border-radius: 15px;
    margin-bottom: 8px;
    max-width: 80%;
    line-height: 1.4;
}
.message.sent {
    background-color: #dcf8c6;
    align-self: flex-end;
    text-align: right;
}
.message.received {
    background-color: #f1f0f0;
    align-self: flex-start;
}
.message .timestamp {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}
.chat-input-area {
    background-color: #f0f0f0;
    padding: 5px;
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
}
.chat-input-area input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 4px;
}
.typing-indicator {
    font-size: 12px;
    font-style: italic;
    color: #888;
    height: 18px;
    display: block;
    width: 150px;
}

/* NEW Hallway Scene Styles */

#hallway-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #262626;
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.4), transparent, rgba(0,0,0,0.4)),
        linear-gradient(to bottom, #262626, #404040);
    z-index: 11000;
    font-family: 'Courier New', Courier, monospace;
    perspective: 900px; /* Gives depth to the scene */
}
.hallway-object {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}
.hallway-object:hover {
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 150, 0.5));
    transform: translateZ(10px) rotateY(var(--base-rotate-y, 0deg)); /* Add slight pop-out effect on hover */
}
#hallway-loft-door {
    left: 10%;
    bottom: 0;
    width: 250px;
    height: 650px;
    background-color: #6b4f3a;
    border: 10px solid #4a3a3a;
    transform-origin: left;
    --base-rotate-y: 50deg;
    transform: rotateY(var(--base-rotate-y));
}
#hallway-door-1 {
    left: 35%;
    bottom: 0;
    width: 180px;
    height: 550px;
    background-color: #8f8f8f;
    border: 10px solid #a3a3a3;
    transform: translateZ(-250px);
}
#hallway-door-2 {
    left: 55%;
    bottom: 0;
    width: 180px;
    height: 550px;
    background-color: #8f8f8f;
    border: 10px solid #a3a3a3;
    transform: translateZ(-250px);
}
#hallway-picture {
    left: 42%;
    top: 15%;
    width: 80px;
    height: 120px;
    background-color: #e0e0e0;
    border: 15px solid #2c1e12;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    transform: translateZ(-245px); /* Slightly in front of the back wall */
}
#hallway-table {
    right: 0; /* Changed from 5% to 0 */
    bottom: 0;
    width: 300px;
    height: 280px;
    background-color: #5c3d28;
    border-top: 5px solid #3d2c21;
    transform-origin: right;
    --base-rotate-y: -45deg;
    transform: rotateY(var(--base-rotate-y));
}
#hallway-plant {
    position: absolute;
    bottom: 100%;
    left: 40px;
    width: 60px;
    height: 50px;
    background-color: #7f5539;
}
#hallway-plant::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background-color: #2d6a4f;
    border-radius: 50%;
}
#hallway-telephone {
    position: absolute;
    bottom: 100%;
    right: 40px;
    width: 80px;
    height: 40px;
    background-color: #1a1a1a;
}
#hallway-stairs {
    left: 70%;
    bottom: 0;
    width: 400px;
    height: 100%;
    background: repeating-linear-gradient(45deg, #4d4d4d, #4d4d4d 20px, #3c3c3c 20px, #3c3c3c 40px);
    transform: translateZ(-300px);
}
#hallway-trashbin {
    left: 28%;
    bottom: 0;
    width: 40px;
    height: 60px;
    background-color: #333;
    border: 2px solid #222;
    transform: translateZ(-200px);
}