/* Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--taskbar-height);
    background-color: var(--win-bg);
    border-top: 2px solid var(--win-light);
    display: flex;
    align-items: center;
    padding: var(--spacing-xs);
    z-index: var(--z-taskbar);
}

.start-button {
    background-color: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    padding: var(--spacing-xs) 6px;
    font-size: var(--font-size-md);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: inherit;
    height: 22px;
}

.start-button:active,
.start-button.active {
    border-color: var(--border-inset);
}

.start-logo {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    background: linear-gradient(135deg, #ff0000 25%, #00ff00 25% 50%, #0000ff 50% 75%, #ffff00 75%);
}

.taskbar-divider {
    width: 2px;
    height: 20px;
    border-left: 1px solid var(--win-dark);
    border-right: 1px solid var(--win-light);
    margin: 0 var(--spacing-xs);
}

.taskbar-windows {
    display: flex;
    gap: var(--spacing-xs);
    flex: 1;
    overflow: hidden;
    margin: 0 var(--spacing-xs);
}

.taskbar-item {
    background-color: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    padding: var(--spacing-xs) 6px;
    font-size: var(--font-size-md);
    cursor: pointer;
    max-width: 160px;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 22px;
}

.taskbar-item.active {
    border-color: var(--border-inset);
    background: #dfdfdf;
}

.taskbar-item-icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
}

.systray {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid;
    border-color: var(--border-inset);
    height: 22px;
    margin-left: auto;
}

.systray-icon {
    font-size: 12px;
    cursor: pointer;
    padding: 0 var(--spacing-xs);
}

.taskbar-clock {
    font-size: var(--font-size-md);
    padding: 0 var(--spacing-sm);
}

/* Quick Launch Bar */
.quick-launch {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    margin-left: var(--spacing-xs);
}

.quick-launch-item {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-size-lg);
}

.quick-launch-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.quick-launch-divider {
    width: 2px;
    height: 20px;
    border-left: 1px solid var(--win-dark);
    border-right: 1px solid var(--win-light);
    margin: 0 var(--spacing-xs);
}

/* Start menu */
.start-menu {
    position: fixed;
    bottom: var(--taskbar-height);
    left: 0;
    background-color: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: var(--z-start-menu);
    min-width: 180px;
}

.start-menu.active {
    display: flex;
}

.start-menu-banner {
    width: 22px;
    background: linear-gradient(to top, #000080, #1084d0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
}

.banner-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #c0c0c0;
    font-weight: bold;
    font-size: var(--font-size-xl);
    letter-spacing: 1px;
}

.banner-95 {
    color: var(--color-white);
}

.start-menu-items {
    flex: 1;
    padding: var(--spacing-xs) 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-sm) 20px var(--spacing-sm) var(--spacing-sm);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.menu-item:hover {
    background-color: var(--win-title);
    color: var(--color-white);
}

.menu-item.has-submenu > .submenu {
    position: absolute;
    left: 100%;
    top: -2px;
    background-color: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    display: none;
    min-width: 180px;
    padding: var(--spacing-xs) 0;
    z-index: var(--z-submenu);
}

.menu-item.has-submenu::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 15px;
    height: 100%;
}

.menu-item.has-submenu:hover > .submenu {
    display: block;
}

.menu-icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.menu-text {
    font-size: var(--font-size-md);
    flex: 1;
}

.menu-arrow {
    font-size: 8px;
    margin-left: auto;
}

.menu-divider {
    height: 1px;
    background: var(--win-dark);
    margin: 3px var(--spacing-xs);
    border-bottom: 1px solid var(--win-light);
}

/* Menu icons */
.programs-icon { background: linear-gradient(135deg, #ffff00 50%, #808000 50%); }
.documents-icon { background: linear-gradient(135deg, #ffffff, #c0c0c0); border: 1px solid #808080; }
.settings-icon { background: linear-gradient(135deg, #c0c0c0, #808080); }
.find-icon { background: linear-gradient(135deg, #00ffff, #008080); }
.help-icon { background: linear-gradient(135deg, #ffff00, #808000); }
.run-icon { background: linear-gradient(135deg, #ffffff, #808080); }
.shutdown-icon { background: linear-gradient(135deg, #ff0000, #800000); }
.folder-icon { background: linear-gradient(135deg, #ffff00, #c0a000); }
.ie-icon { background: linear-gradient(135deg, #0000ff, #00ffff); }
.notepad-icon { background: linear-gradient(135deg, #ffffff, #e0e0e0); border: 1px solid #808080; }
.dos-icon { background: #000000; border: 1px solid #808080; }
.calc-icon { background: linear-gradient(135deg, #c0c0c0, #808080); }
.paint-icon { background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ffff00); }
.mine-icon { background: #c0c0c0; border: 1px solid #808080; }
.explorer-icon { background: linear-gradient(135deg, #ffff00, #c0a000); }
.solitaire-icon { background: linear-gradient(135deg, #008000, #00ff00); }
.wordpad-icon { background: linear-gradient(135deg, #0000ff, #000080); }
.control-icon { background: linear-gradient(135deg, #c0c0c0, #808080); }
.display-icon { background: linear-gradient(135deg, #008080, #004040); }
.printer-icon { background: linear-gradient(135deg, #e0e0e0, #a0a0a0); }
.txt-icon { background: linear-gradient(135deg, #ffffff, #e0e0e0); }
.bmp-icon { background: linear-gradient(135deg, #ff00ff, #800080); }

/* Desktop icons */
.desktop-icons {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--taskbar-height);
    z-index: var(--z-desktop);
    pointer-events: none;
    visibility: hidden;
}

.desktop-icons.initialized {
    visibility: visible;
}

.desktop-icon {
    position: absolute;
    width: 70px;
    text-align: center;
    cursor: pointer;
    padding: var(--spacing-xs);
    pointer-events: auto;
    z-index: 1;
}

.desktop-icon:hover .desktop-icon-label {
    background: var(--win-title);
    color: var(--color-white);
}

.desktop-icon.selected .desktop-icon-img {
    filter: brightness(0.7) sepia(1) hue-rotate(180deg) saturate(5);
}

.desktop-icon.selected .desktop-icon-label {
    background: var(--win-title);
    color: var(--color-white);
}

.desktop-icon.dragging {
    opacity: 0.7;
    z-index: 2;
}

.desktop-icon-img {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    margin: 0 auto var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.desktop-icon-label {
    font-size: var(--font-size-md);
    color: var(--color-white);
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
    word-break: break-word;
    line-height: 1.2;
    padding: 1px var(--spacing-xs);
}

.icon-computer,
.icon-trash {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
}

.icon-documents {
    background: linear-gradient(135deg, #ffff00, #c0a000);
    border: 1px solid #808080;
}

.icon-network {
    background: linear-gradient(135deg, #0080ff, #004080);
    border: 1px solid #808080;
}

.icon-ie {
    background: linear-gradient(135deg, #0000ff, #00ffff);
    border: 1px solid #808080;
}

.icon-notepad {
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    border: 1px solid #808080;
}

/* Wallpaper list */
.wallpaper-list {
    border: 2px solid;
    border-color: var(--border-inset);
    background: var(--color-white);
    height: 80px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.wallpaper-item {
    padding: var(--spacing-xs) 6px;
    cursor: pointer;
}

.wallpaper-item:hover,
.wallpaper-item.active {
    background: var(--win-title);
    color: var(--color-white);
}

.wallpaper-preview {
    width: 120px;
    height: 90px;
    border: 2px solid;
    border-color: var(--border-inset);
    background: var(--desktop-bg);
    margin: 0 auto;
    position: relative;
}

.wallpaper-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--win-bg);
    border-top: 1px solid var(--win-light);
}

.wallpaper-upload-container {
    margin-top: 10px;
    padding: var(--spacing-md);
    border: 1px solid var(--win-dark);
}

.wallpaper-display-options {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.wallpaper-display-options label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

body.wallpaper-centered {
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

body.wallpaper-tiled {
    background-size: auto !important;
    background-repeat: repeat !important;
}

body.wallpaper-stretched {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* Calendar Popup */
.calendar-popup {
    position: fixed;
    bottom: 30px;
    right: var(--spacing-sm);
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    padding: var(--spacing-md);
    z-index: var(--z-submenu);
    display: none;
}

.calendar-popup.active {
    display: block;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.calendar-header button {
    background: var(--win-bg);
    border: 1px solid var(--win-dark);
    cursor: pointer;
    padding: var(--spacing-xs) 6px;
}

.calendar-title {
    font-weight: bold;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 24px);
    gap: 1px;
    margin-bottom: var(--spacing-sm);
}

.calendar-weekday {
    text-align: center;
    font-weight: bold;
    font-size: var(--font-size-sm);
    color: var(--win-dark);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 24px);
    gap: 1px;
}

.calendar-day {
    width: 24px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    cursor: pointer;
}

.calendar-day:hover {
    background: var(--win-title);
    color: var(--color-white);
}

.calendar-day.today {
    background: var(--win-title);
    color: var(--color-white);
    font-weight: bold;
}

.calendar-day.other-month {
    color: var(--win-dark);
}

/* Volume Popup */
.volume-popup {
    position: fixed;
    bottom: 30px;
    right: var(--spacing-sm);
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    padding: var(--spacing-md);
    z-index: var(--z-submenu);
    display: none;
    width: 60px;
}

.volume-popup.active {
    display: block;
}

.volume-slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.volume-slider {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 20px;
    height: 80px;
}

.volume-mute {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Alt+Tab Overlay */
.alt-tab-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    padding: var(--spacing-lg);
    z-index: 100000;
    display: none;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

.alt-tab-overlay.active {
    display: block;
}

.alt-tab-items {
    display: flex;
    gap: var(--spacing-md);
}

.alt-tab-item {
    width: 64px;
    text-align: center;
    padding: var(--spacing-md);
    border: 2px solid transparent;
}

.alt-tab-item.selected {
    border-color: var(--win-title);
    background: rgba(0, 0, 128, 0.1);
}

.alt-tab-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.alt-tab-title {
    font-size: var(--font-size-sm);
    word-break: break-word;
    line-height: 1.2;
}

/* Drag overlay for files */
.drag-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 100000;
    opacity: 0.7;
}

/* Boot screen */
.boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--z-boot);
}

.boot-screen.hidden {
    display: none;
}

.boot-logo {
    text-align: center;
    margin-bottom: 40px;
}

.boot-flag {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    transform: perspective(200px) rotateY(-10deg);
}

.flag-part {
    animation: wave 1s ease-in-out infinite;
}

.flag-part.red { background: #ff0000; animation-delay: 0s; }
.flag-part.green { background: #00ff00; animation-delay: 0.1s; }
.flag-part.blue { background: #0000ff; animation-delay: 0.2s; }
.flag-part.yellow { background: #ffff00; animation-delay: 0.3s; }

.boot-text {
    color: var(--color-white);
    font-size: var(--font-size-xxl);
    font-family: var(--font-family-serif);
}

.boot-text-large {
    color: var(--color-white);
    font-size: 48px;
    font-weight: bold;
    font-family: var(--font-family-serif);
}

.boot-text-large .win95 {
    font-size: 28px;
    vertical-align: super;
}

.boot-progress {
    width: 200px;
    height: 20px;
    border: 2px solid #404040;
    background: var(--color-black);
    margin-bottom: 20px;
}

.boot-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #000080, #0080ff);
    animation: boot-loading 2.5s ease-out forwards;
}

.boot-starting {
    color: #808080;
    font-size: var(--font-size-lg);
}

/* Welcome Screen */
.welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #000080 0%, #1084d0 100%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99996;
    animation: fadeIn 0.5s ease-out;
}

.welcome-screen.active {
    display: flex;
}

.welcome-content {
    text-align: center;
    animation: welcomeZoom 1.5s ease-out;
}

.welcome-flag {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    animation: wave 1s ease-in-out infinite;
}

.welcome-text {
    color: var(--color-white);
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Shutdown Screen */
.shutdown-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-black);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-bsod);
}

.shutdown-screen.active {
    display: flex;
}

.shutdown-content {
    text-align: center;
}

.shutdown-message {
    color: var(--color-white);
    font-size: 24px;
    margin-bottom: 20px;
    font-family: var(--font-family-serif);
}

.shutdown-message.orange {
    color: #ff8800;
}

.shutdown-progress {
    width: 200px;
    height: 16px;
    border: 2px solid #404040;
    background: var(--color-black);
    margin: 0 auto;
}

.shutdown-progress.hidden {
    display: none;
}

.shutdown-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #000080, #0080ff);
    animation: shutdownLoading 2s ease-out forwards;
}

/* Screensaver */
.screensaver {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-black);
    z-index: var(--z-screensaver);
    display: none;
    cursor: none;
}

.screensaver.active {
    display: block;
}

.screensaver canvas {
    width: 100%;
    height: 100%;
}

/* BSOD */
.bsod {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0000aa;
    color: var(--color-white);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-lg);
    padding: 40px;
    z-index: var(--z-bsod);
    display: none;
}

.bsod.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bsod-title {
    background: #a8a8a8;
    color: #0000aa;
    padding: var(--spacing-xs) 10px;
    margin-bottom: 24px;
}

.bsod-text {
    text-align: center;
    line-height: 1.8;
    white-space: pre-wrap;
    max-width: 600px;
}

/* Clippy */
.clippy-container {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 9998;
    display: none;
}

.clippy-container.active {
    display: block;
}

.clippy-character {
    width: 100px;
    height: 120px;
    font-size: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: clippyBounce 2s ease-in-out infinite;
}

.clippy-bubble {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #ffffcc;
    border: 1px solid var(--color-black);
    border-radius: 8px;
    padding: var(--spacing-md);
    max-width: 200px;
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-md);
}

.clippy-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffcc;
}

.clippy-close {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

/* Easter Egg - Hall of Tortured Souls */
.hall-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-black);
    z-index: 999998;
    display: none;
}

.hall-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hall-content {
    text-align: center;
    color: var(--color-green);
    font-family: 'Courier New', monospace;
}

.hall-title {
    font-size: 24px;
    margin-bottom: 20px;
    animation: glitch 0.5s infinite;
}

.hall-credits {
    font-size: var(--font-size-lg);
    line-height: 2;
}

/* Developer Credits */
.credits-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #000080, #000040);
    z-index: 999997;
    display: none;
    overflow: hidden;
}

.credits-overlay.active {
    display: block;
}

.credits-scroll {
    position: absolute;
    width: 100%;
    text-align: center;
    color: var(--color-white);
    animation: creditsScroll 20s linear forwards;
}

.credits-scroll h1 {
    font-size: 32px;
    margin-bottom: 40px;
}

.credits-scroll p {
    font-size: var(--font-size-xl);
    margin: 10px 0;
}

/* CRT Effect */
.crt-enabled {
    position: relative;
}

.crt-enabled::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 99990;
}

.crt-enabled::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 90%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    z-index: 99991;
}

.crt-enabled .crt-flicker {
    animation: crtFlicker 0.15s infinite;
}

.crt-screen-curve {
    border-radius: 20px / 15px;
    overflow: hidden;
}