/* Windows 98 Theme CSS */

/* Custom Font Loading */
@font-face {
    font-family: 'MS Sans Serif Custom';
    src: url('assets/Font/MS Sans Serif 1.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DelaGothic';
    src: url('assets/font/DelaGothicOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'MS Sans Serif Custom', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
}

body {
    font-family: 'MS Sans Serif Custom', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    background: #008080;
    overflow: hidden !important;
    user-select: none;
    cursor: url('assets/cursors/default.png'), default;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Context Menu */
.context-menu {
    position: fixed;
    min-width: 180px;
    background: #C0C0C0;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
    z-index: 2000;
    user-select: none;
}

.context-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    color: #000;
}

.context-menu-item:hover {
    background: #000080;
    color: #fff;
}

.context-menu-separator {
    height: 1px;
    margin: 4px 0;
    background: #808080;
}

/* Context Menu */
.context-menu {
    position: fixed;
    min-width: 180px;
    background: #C0C0C0;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
    z-index: 2000;
    user-select: none;
}

.context-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    color: #000;
}

.context-menu-item:hover {
    background: #000080;
    color: #fff;
}

.context-menu-separator {
    height: 1px;
    margin: 4px 0;
    background: #808080;
}

/* Custom Cursor Styles */
button, .desktop-icon, .start-button, .taskbar-item, .start-menu-item, .win98-button {
    cursor: url('assets/cursors/Pointer.png'), pointer;
}

.title-bar {
    cursor: url('assets/cursors/Pointer.png'), move;
}

input, textarea, .notepad-textarea {
    cursor: text;
}



.notification-message {
    font-size: 12px;
    color: #E8F4FD;
    line-height: 1.4;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.notification-close {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #FF6B6B, #FF5252);
    border: 2px solid #D32F2F;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.notification-close:hover {
    background: linear-gradient(135deg, #FF5252, #D32F2F);
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.notification-alert.hidden {
    animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Welcome Login Screen */
.welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #008080;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.5s ease-out;
}



.login-container {
    background: #C0C0C0;
    border: 3px outset #C0C0C0;
    border-radius: 0;
    padding: 0;
    width: 400px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    text-align: center;
    overflow: hidden;
}

.login-gradient-bar {
    height: 40px;
    background: linear-gradient(90deg, #01017B 0%, #1084D1 100%);
    width: 100%;
}

.login-header {
    margin-bottom: 25px;
    padding: 30px 30px 0 30px;
}

.login-header {
    margin-bottom: 25px;
}

.windows-logo {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.windows-logo img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.login-header h1 {
    font-size: 24px;
    color: #000;
    margin: 10px 0;
    font-weight: bold;
}

.login-header p {
    font-size: 14px;
    color: #333;
    margin: 5px 0;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
    padding: 0 30px;
}

.input-group label {
    display: block;
    font-size: 14px;
    color: #000;
    margin-bottom: 5px;
    font-weight: bold;
}

.password-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-container input {
    width: 100%;
    padding: 8px 12px;
    border: 2px inset #C0C0C0;
    background: #FFFFFF;
    font-size: 14px;
    color: #000;
    box-sizing: border-box;
    padding-right: 40px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.password-toggle input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 2px outset #C0C0C0;
    background: #FFFFFF;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.checkbox-custom:hover {
    background: #F0F0F0;
}

.password-toggle input[type="checkbox"]:checked + .checkbox-custom {
    background: #000080;
    border: 2px inset #C0C0C0;
}

.password-toggle input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 1px;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.input-group input {
    width: 100%;
    padding: 8px 12px;
    border: 2px inset #C0C0C0;
    background: #FFFFFF;
    font-size: 14px;
    color: #000;
    box-sizing: border-box;
}

.input-group input:focus {
    outline: none;
    border: 2px inset #000080;
}

.login-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0 30px;
}

.login-buttons .win98-button {
    min-width: 80px;
    padding: 8px 16px;
    font-family: 'MS Sans Serif Custom', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-top: 1px solid #DBDBDB !important;
    border-left: 1px solid #DBDBDB !important;
    border-bottom: 1px solid #808080 !important;
    border-right: 1px solid #808080 !important;
    position: relative;
}



.login-buttons .win98-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    pointer-events: none;
}

.login-buttons .win98-button:hover::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px dotted #000000;
    pointer-events: none;
}



.login-hint {
    background: #FFFFE1;
    border: 1px solid #FFD700;
    border-radius: 4px;
    padding: 10px;
    margin: 15px 30px 30px 30px;
}

.login-hint p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.welcome-screen.hidden {
    animation: fadeOut 0.5s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Maximized window styles */
.window.maximized {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    z-index: 1000 !important;
}

.window.maximized .window-content {
    height: calc(100% - 37px) !important;
    padding: 0 !important;
}

/* Enhanced title bar for notepad */
.window .title-bar {
    height: 37px !important; /* Half of 75px for better proportion */
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.window .title-bar-text {
    font-size: 18px !important; /* Bigger text */
    font-weight: bold;
    flex: 1;
}

.window .title-bar-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.window .title-bar-controls button {
    width: 32px !important; /* Back to original button size */
    height: 32px !important; /* Back to original button size */
    font-size: 28px !important; /* Even bigger symbols */
    font-weight: bold;
    border: 2px outset #C0C0C0;
    background: #C0C0C0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* Special positioning for minimize button underscore */
.window .title-bar-controls .minimize-button {
    align-items: flex-end !important;
    padding-bottom: 8px !important;
}

.window .title-bar-controls button:hover {
    border: 2px inset #C0C0C0;
    background: #D0D0D0;
}

.window .title-bar-controls button:active {
    border: 2px inset #C0C0C0;
    background: #A0A0A0;
}

/* Desktop */
.desktop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 54px);
    background: #C0C0C0;
    padding: 30px;
    display: none; /* hidden by default to prevent flash before login */
    overflow: hidden;
    box-sizing: border-box;
    /* Strict height limit */
    max-height: calc(100vh - 54px);
    min-height: calc(100vh - 54px);
    /* Prevent any scrolling */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Desktop Icons */
.desktop-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 90px;
    cursor: pointer;
    text-align: center;
    color: #000;
    font-size: 13px;
    line-height: 1.2;
    transition: all 0.1s ease;
}

/* Custom Assets Support */
.desktop-icon.custom-asset img {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    object-fit: contain;
    /* Crisp rendering for high-quality PNG icons */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    /* Prevent blur on scaling */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* SVG specific optimizations */
.desktop-icon.custom-asset svg {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
}

/* High DPI display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .desktop-icon.custom-asset img {
        image-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.desktop-icon:active {
    background: rgba(255, 255, 255, 0.3);
}

.desktop-icon img {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

.desktop-icon span {
    width: 84px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #008080;
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

/* Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 54px;
    background: #C0C0C0;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    display: none; /* hidden by default to prevent flash before login */
    align-items: center;
    padding: 0 4px;
    z-index: 1000;
}

.start-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    background: #C0C0C0;
    border: 2px outset #C0C0C0;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    height: 48px;
    min-width: 100px;
}

.start-button:hover {
    border: 2px inset #C0C0C0;
}

.start-button img,
.start-button .start-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    /* Crisp rendering for custom logo */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.taskbar-items {
    flex: 1;
    display: flex;
    gap: 2px;
    margin-left: 8px;
}

.taskbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #C0C0C0;
    border: 2px inset #C0C0C0;
    padding: 6px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #000;
    user-select: text;
    white-space: nowrap;
}

.taskbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #C0C0C0;
    border: 2px outset #C0C0C0;
    color: #000;
    font-size: 11px;
    cursor: pointer;
}

.taskbar-item.active {
    border: 2px inset #C0C0C0;
}

.taskbar-item img {
    width: 16px;
    height: 16px;
}

.system-tray {
    display: flex;
    align-items: center;
    gap: 4px;
}

.clock {
    padding: 8px 12px;
    background: #C0C0C0;
    border: 2px inset #C0C0C0;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

/* Start Menu */
.start-menu {
    position: fixed;
    bottom: 54px;
    left: 0;
    width: 200px;
    background: #C0C0C0;
    border: 2px outset #C0C0C0;
    display: none;
    z-index: 15000; /* above all windows and overlays */
}

.start-menu.show {
    display: block;
}

.start-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #000080;
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.start-menu-header img {
    width: 16px;
    height: 16px;
}

.start-menu-items {
    padding: 4px 0;
}

.start-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 16px;
    color: #000;
}

.start-menu-item:hover {
    background: #000080;
    color: white;
}

.start-menu-item.shutdown {
    border-top: 1px solid #808080;
    margin-top: 6px;
    padding-top: 12px;
}

.start-menu-item img {
    width: 24px;
    height: 24px;
}

/* Windows */
.window {
    position: absolute;
    background: #C0C0C0;
    border: 2px outset #C0C0C0;
    min-width: 300px;
    min-height: 200px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.window.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
}

/* Title Bar */
.title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000080;
    color: white;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 11px;
    cursor: move;
}

.title-bar-text {
    flex: 1;
    margin-left: 4px;
}

.title-bar-controls {
    display: flex;
    gap: 2px;
}

.minimize-button,
.maximize-button,
.close-button {
    width: 16px;
    height: 14px;
    background: #C0C0C0;
    border: 1px outset #C0C0C0;
    color: #000;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.minimize-button:hover,
.maximize-button:hover,
.close-button:hover {
    border: 1px inset #C0C0C0;
}

.close-button:hover {
    background: #FF0000;
    color: white;
}

/* Window Content */
.window-content {
    padding: 0;
    background: #C0C0C0;
    height: calc(100% - 20px);
    overflow: auto;
}

/* Fart window quick tweaks */
#fart-window .window-content { padding: 8px; position: relative; overflow: hidden; }
.fart-grid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; image-rendering: pixelated; pointer-events: none; }

 

/* Welcome Content */
.welcome-content {
    text-align: center;
    color: #000;
}

.welcome-content h1 {
    font-size: 18px;
    margin-bottom: 16px;
    color: #000080;
}

.welcome-content p {
    font-size: 12px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.feature-list {
    text-align: left;
    margin: 20px 0;
    padding: 16px;
    background: #FFFFFF;
    border: 2px inset #C0C0C0;
}

.feature-list h3 {
    font-size: 14px;
    margin-bottom: 12px;
    color: #000080;
}

.feature-list ul {
    list-style: none;
    padding-left: 0;
}

.feature-list li {
    font-size: 12px;
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative;
}

.feature-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000080;
}

.welcome-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

/* Windows 98 Buttons */
.win98-button {
    padding: 6px 16px;
    background: #C0C0C0;
    border: 2px outset #C0C0C0;
    color: #000;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.win98-button img,
.win98-button svg {
    width: 16px;
    height: 16px;
    object-fit: contain;
    /* SVG optimization for crisp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    shape-rendering: geometricPrecision;
}

/* High DPI button icons */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .win98-button img {
        image-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
}

.win98-button:hover {
    border: 2px inset #C0C0C0;
}

.win98-button:active {
    border: 2px inset #C0C0C0;
    background: #A0A0A0;
}

/* Notepad */
.notepad-content {
    height: 100%;
}

.notepad-textarea {
    width: 100%;
    height: 100%;
    border: none;
    background: #FFFFFF;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 1.4;
    padding: 8px;
    resize: none;
    outline: none;
    border: 2px inset #C0C0C0;
}

.notepad-textarea::placeholder {
    color: #808080;
}

/* Dino Game */
.dino-game-content {
    padding: 10px;
    background: #FFFFFF;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dino-board {
    background-color: #F0F0F0;
    border: 2px inset #C0C0C0;
    margin: 10px 0;
    max-width: none;
    height: auto;
    width: 1500px !important; /* 2x of 750 */
    height: 500px !important; /* 2x of 250 */
    image-rendering: pixelated;
}

.dino-controls {
    text-align: center;
    margin-top: 10px;
}

/* Rocket Game */
.rocket-game-content { padding: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.rocket-topstrip { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.rocket-instruction { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.rocket-main { display: flex; width: 100%; flex: 1; height: auto; }
.rocket-leftstrip { display: flex; align-items: stretch; flex-shrink: 0; }
.rocket-leftstrip img { display: block; width: auto; height: 100%; image-rendering: pixelated; }
.rocket-canvas-wrap { flex: 1; width: auto; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
#rocket-fart-counter.rocket-counter { position: absolute; top: 8px; right: 10px; color: #FFFF33; font-family: 'DelaGothic', 'Dela Gothic One', Arial, sans-serif; font-size: clamp(28px, 5vw, 66px); font-weight: 700; background: rgba(0,0,0,0.35); padding: 8px 14px; border: 1px solid #242731; border-radius: 2px; pointer-events: none; line-height: 1; }
/* 1000x badge top-left */
#rocket-1000x-badge.rocket-badge { position: absolute; top: 8px; left: 10px; height: clamp(84px, 12vh, 220px); width: auto; image-rendering: pixelated; pointer-events: none; z-index: 7; }
#rocket-space-hint.rocket-hint { position: absolute; bottom: 62px; right: 10px; color: #FFFF33; font-family: 'DelaGothic', 'Dela Gothic One', Arial, sans-serif; font-size: clamp(16px, 2vw, 22px); font-weight: 700; background: rgba(0,0,0,0.5); padding: 8px 12px; border: 1px solid #242731; border-radius: 2px; pointer-events: none; z-index: 999; }
.rocket-highscore#rocket-highscore { position: absolute; right: 10px; color: #FFFF33; font-family: 'DelaGothic', 'Dela Gothic One', Arial, sans-serif; font-size: clamp(12px, 2vw, 18px); font-weight: 700; background: rgba(0,0,0,0.35); padding: 6px 10px; border: 1px solid #242731; border-radius: 2px; pointer-events: none; }

/* Responsive window bounds to avoid overflow on desktop screens */
.window { max-width: 96vw; max-height: calc(100vh - 64px); }
.window .window-content { max-height: calc(100% - 37px); overflow: auto; }

@media (max-width: 1400px) {
  .rocket-topstrip { height: auto; }
}

/* Share overlay buttons styling */
#fartcard-overlay .win98-button {
    font-family: 'DelaGothic', 'Dela Gothic One', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    background: #FF00FF !important; /* button color */
    color: #000000 !important;
    border: 2px solid #242731 !important;
    border-radius: 4px !important;
}

#fartcard-overlay .win98-button:hover {
    filter: brightness(0.95);
}
#rocket-window { position: relative; overflow: visible; }
#rocket-window .title-bar { position: relative; z-index: 3; }
#rocket-canvas { background: linear-gradient(#001430, #003f7a); border: 2px inset #C0C0C0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.rocket-controls { display: none; }

/* Force Rocket window to exactly match viewport and prevent inner scrolling */
#rocket-window { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: calc(100vh - 54px) !important; overflow: hidden !important; }
#rocket-window.window { border: none; }
#rocket-window .window-content { height: calc(100vh - 37px - 54px) !important; overflow: hidden !important; padding: 0 !important; }
.rocket-game-content, .rocket-main, .rocket-canvas-wrap { height: 100% !important; }

.dino-controls p {
    margin: 5px 0;
    font-size: 12px;
    color: #000000;
}

/* Secret Folder Window */
.folder-content {
    padding: 10px;
    background: #FFFFFF;
    height: 400px;
    display: flex;
    gap: 10px;
}

.folder-left-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.folder-right-panel {
    flex: 1.5;
    min-width: 0;
    border-left: 2px solid #808080;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
}

.folder-toolbar {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #C0C0C0;
}

.folder-toolbar .win98-button {
    font-size: 11px;
    padding: 2px 8px;
}

.folder-items {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 10px;
}

.folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 11px;
    color: #000000;
}

.folder-item:hover {
    background: rgba(0, 0, 255, 0.1);
    border: 1px solid #0000FF;
}

.folder-item img {
    margin-bottom: 5px;
}

.folder-item span {
    word-break: break-word;
    line-height: 1.2;
}

.folder-status {
    padding: 5px 10px;
    background: #C0C0C0;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    font-size: 11px;
    color: #000000;
}

.image-viewer {
    padding: 0;
    background: #FFFFFF;
    text-align: center;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000000;
}

#our-computer-image-window {
    border: 1px solid #000000;
}

#our-computer-image-window .window-content {
    border-bottom: 1px solid #000000;
}

#do-not-window .image-viewer {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: unset !important;
    display: block !important;
    text-align: left !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

#do-not-window .image-viewer img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    line-height: 0 !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.countdown-timer {
    position: fixed;
    top: 440px;
    left: 380px;
    background: #000080;
    color: white;
    padding: 8px 15px;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    border: 2px outset #C0C0C0;
    z-index: 10;
    text-align: center;
    min-width: 80px;
    transform: translateX(-50%);
}

#do-not-window .window-content {
    height: 100% !important;
    padding: 0;
    margin: 0;
}

#poster-window .image-viewer, #poster2-window .image-viewer, #poster3-window .image-viewer, #poster4-window .image-viewer, #poster5-window .image-viewer, #poster6-window .image-viewer, #poster7-window .image-viewer, #poster8-window .image-viewer {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: unset !important;
    display: block !important;
    text-align: left !important;
}

#poster-window .image-viewer img, #poster2-window .image-viewer img, #poster3-window .image-viewer img, #poster4-window .image-viewer img, #poster5-window .image-viewer img, #poster6-window .image-viewer img, #poster7-window .image-viewer img, #poster8-window .image-viewer img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    line-height: 0 !important;
}

#poster-window .window-content, #poster2-window .window-content, #poster3-window .window-content, #poster4-window .window-content, #poster5-window .window-content, #poster6-window .window-content, #poster7-window .window-content, #poster8-window .window-content {
    height: 100% !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border: 3px solid #000080;
    border-radius: 8px;
}

#poster-window .image-viewer, #poster2-window .image-viewer, #poster3-window .image-viewer, #poster4-window .image-viewer, #poster5-window .image-viewer, #poster6-window .image-viewer, #poster7-window .image-viewer, #poster8-window .image-viewer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    max-height: calc(100% - 120px);
    overflow: hidden;
}

#poster-window .image-viewer img, #poster2-window .image-viewer img, #poster3-window .image-viewer img, #poster4-window .image-viewer img, #poster5-window .image-viewer img, #poster6-window .image-viewer img, #poster7-window .image-viewer img, #poster8-window .image-viewer img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.poster-buttons {
    display: flex !important;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: #C0C0C0 !important;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    flex-shrink: 0;
    height: 90px;
    align-items: center;
    position: relative;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}

.poster-btn {
    flex: 1;
    height: 50px;
    font-size: 16px;
    padding: 8px 16px;
    font-weight: bold;
    min-width: 0;
    text-align: center;
    font-family: 'MS Sans Serif Custom', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid #000000;
}

@keyframes flash {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #FF0000;
        box-shadow: 0 0 25px rgba(255, 0, 0, 0.8), 0 0 50px rgba(255, 255, 0, 0.6);
        transform: scale(1.02);
    }
}

@keyframes flash2 {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #00FF00;
        box-shadow: 0 0 25px rgba(0, 255, 0, 0.8), 0 0 50px rgba(0, 255, 255, 0.6);
        transform: scale(1.02);
    }
}

@keyframes flash3 {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #0000FF;
        box-shadow: 0 0 25px rgba(0, 0, 255, 0.8), 0 0 50px rgba(255, 0, 255, 0.6);
        transform: scale(1.02);
    }
}

@keyframes flash4 {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #FF00FF;
        box-shadow: 0 0 25px rgba(255, 0, 255, 0.8), 0 0 50px rgba(255, 255, 0, 0.6);
        transform: scale(1.02);
    }
}

@keyframes flash5 {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #00FFFF;
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 50px rgba(255, 0, 0, 0.6);
        transform: scale(1.02);
    }
}

@keyframes flash6 {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #FFFF00;
        box-shadow: 0 0 25px rgba(255, 255, 0, 0.8), 0 0 50px rgba(0, 0, 255, 0.6);
        transform: scale(1.02);
    }
}

/* Shutdown Screen */
.shutdown-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.5s ease-out;
}

.shutdown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.shutdown-message {
    color: #FFFFFF;
    font-size: 24px;
    font-family: 'MS Sans Serif Custom', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    text-align: center;
    line-height: 1.5;
    animation: fadeIn 1s ease-out 0.5s both;
}

.restart-button {
    font-size: 16px;
    padding: 12px 24px;
    animation: fadeIn 1s ease-out 1s both;
    font-family: 'MS Sans Serif Custom', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    border: none !important;
    border-top: 1px solid #DBDBDB !important;
    border-left: 1px solid #DBDBDB !important;
    border-bottom: 1px solid #808080 !important;
    border-right: 1px solid #808080 !important;
    position: relative;
}



.restart-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    pointer-events: none;
}

.restart-button:hover::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px dotted #000000;
    pointer-events: none;
}



@keyframes flash7 {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #FF8000;
        box-shadow: 0 0 25px rgba(255, 128, 0, 0.8), 0 0 50px rgba(128, 0, 255, 0.6);
        transform: scale(1.02);
    }
}

@keyframes flash8 {
    0%, 50% {
        border-color: #C0C0C0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
    25%, 75% {
        border-color: #8000FF;
        box-shadow: 0 0 25px rgba(128, 0, 255, 0.8), 0 0 50px rgba(0, 255, 0, 0.6);
        transform: scale(1.02);
    }
}

#poster-window {
    animation: flash 1.5s infinite;
}

#poster2-window {
    animation: flash2 1.5s infinite;
}

#poster3-window {
    animation: flash3 1.5s infinite;
}

#poster4-window {
    animation: flash4 1.5s infinite;
}

#poster5-window {
    animation: flash5 1.5s infinite;
}

#poster6-window {
    animation: flash6 1.5s infinite;
}

#poster7-window {
    animation: flash7 1.5s infinite;
}

#poster8-window {
    animation: flash8 1.5s infinite;
}



.obstacle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 2px;
    height: 2px;
    background: #000000;
}

.game-controls {
    text-align: center;
    margin-top: 10px;
}

.game-controls p {
    margin-bottom: 10px;
    color: #000000;
    font-weight: bold;
}

.game-controls .win98-button {
    margin: 0 5px;
}

/* Responsive Design */
@media (max-width: 820px) {
    .mobile-overlay { display: flex; }
    .desktop {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        overflow: hidden;
        max-height: calc(100vh - 54px);
    }
    
    .desktop-icon {
        width: 60px;
        height: 60px;
        font-size: 10px;
    }
    
    .desktop-icon img {
        width: 24px;
        height: 24px;
    }
    
    .window {
        min-width: 250px;
        min-height: 150px;
    }
    
    .welcome-content h1 {
        font-size: 16px;
    }
    
    .welcome-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Mobile/tablet overlay */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    text-align: center;
    padding: 24px;
}
.mobile-overlay-box {
    max-width: 640px;
    font-family: 'MS Sans Serif Custom', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    font-size: clamp(16px, 3.5vw, 24px);
    line-height: 1.5;
    background: #111;
    border: 2px solid #444;
    padding: 24px 28px;
}

/* Scrollbar Styling */
.window-content::-webkit-scrollbar {
    width: 16px;
}

.window-content::-webkit-scrollbar-track {
    background: #C0C0C0;
    border: 1px solid #808080;
}

.window-content::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border: 2px outset #C0C0C0;
}

.window-content::-webkit-scrollbar-thumb:hover {
    background: #A0A0A0;
}

/* Animation for window opening */
@keyframes windowOpen {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.window {
    animation: windowOpen 0.2s ease-out;
}

/* Focus states */
.window:focus-within {
    z-index: 101;
}

.window:focus-within .title-bar {
    background: #000080;
}

/* Drag and drop visual feedback */
.window.dragging {
    opacity: 0.8;
    transform: rotate(1deg);
}

/* Selection styling */
::selection {
    background: #000080;
    color: white;
}

::-moz-selection {
    background: #000080;
    color: white;
}