/* Windows 91 - 1-bit Edition */
@font-face {
    font-family: "Victor Mono";
    src: url("fonts/VictorMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Victor Mono";
    src: url("fonts/VictorMono-Bold.woff2") format("woff2");
    font-weight: bold;
    font-display: swap;
}

/* Animation timing variables */
:root {
    --anim-fast: 0.1s;
    --anim-normal: 0.15s;
    --anim-slow: 0.25s;
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black: #000000;
    --white: #ffffff;
}

body {
    font-family: 'Victor Mono', 'W95FA', monospace;
    font-size: 11px;
    background: var(--white);
    color: var(--black);
    overflow: hidden;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="black" d="M0,0 L0,14 L3,11 L6,16 L8,15 L5,10 L9,10 Z"/><path fill="white" d="M1,2 L1,11 L3,9 L6,14 L7,14 L4,9 L7,9 Z"/></svg>') 0 0, auto;
    image-rendering: pixelated;
}

body.inverted {
    filter: invert(1);
}

/* 1-bit beveled border mixins - using box-shadow for pure black/white 3D effect */
.bevel-raised {
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    background: var(--white);
}

.bevel-sunken {
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
    background: var(--white);
}

/* Desktop */
#desktop {
    width: 100vw;
    height: calc(100vh - 32px);
    background-color: var(--white);
    background-image: var(--wallpaper, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC'));
    position: relative;
}

/* Desktop Icons */
.desktop-icons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.desktop-icons .icon {
    pointer-events: auto;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    cursor: pointer;
    padding: 4px;
    position: absolute;
    user-select: none;
    transition: transform var(--anim-fast) var(--ease-out);
}

.icon:hover {
    transform: scale(1.05);
}

.icon:active {
    transform: scale(0.95);
}

.icon.dragging {
    opacity: 0.7;
    z-index: 1000;
    transform: scale(1.1);
}

.icon-img {
    transition: filter var(--anim-fast) var(--ease-out);
}

.icon:hover .icon-img,
.icon:focus .icon-img {
    filter: invert(1);
    outline: 1px dotted var(--black);
}

.icon span {
    transition: background var(--anim-fast), color var(--anim-fast);
}

.icon:hover span,
.icon:focus span {
    background: var(--black);
    color: var(--white);
}

.icon-img {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    image-rendering: pixelated;
    background: var(--white);
}

.icon span {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
    box-shadow: 1px 1px 0 var(--black);
    text-align: center;
    font-size: 11px;
    word-wrap: break-word;
    padding: 1px 2px;
}

/* Taskbar */
#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: var(--white);
    border-top: 2px solid var(--black);
    box-shadow: inset 0 2px 0 var(--white), inset 0 -2px 0 var(--black);
    display: flex;
    align-items: center;
    padding: 2px 4px;
    gap: 4px;
}

#start-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    height: 24px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

#start-button:hover {
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white),
                inset 4px 4px 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

#start-button:active,
#start-button.active {
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
}

.start-logo {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

#taskbar-programs {
    flex: 1;
    display: flex;
    gap: 2px;
    overflow: hidden;
}

.taskbar-item {
    padding: 2px 8px;
    height: 22px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: box-shadow var(--anim-fast);
    animation: taskbarItemAppear var(--anim-normal) var(--ease-out);
}

@keyframes taskbarItemAppear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.taskbar-item:hover {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

.taskbar-item.active {
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

#clock {
    padding: 4px 8px;
    height: 22px;
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
    font-size: 11px;
    display: flex;
    align-items: center;
    background: var(--white);
}

/* Start Menu */
#start-menu {
    position: fixed;
    bottom: 32px;
    left: 0;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white), 4px 4px 0 var(--black);
    display: flex;
    min-width: 200px;
    z-index: 1000;
    /* Menu animation */
    transform-origin: bottom left;
    animation: menuSlideUp var(--anim-fast) var(--ease-out);
}

@keyframes menuSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#start-menu.hidden {
    display: none;
}

.start-menu-sidebar {
    width: 26px;
    background: var(--black);
    color: var(--white);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 8px 4px;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px;
}

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

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px 6px 4px;
    cursor: pointer;
}

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

.menu-item:hover .menu-icon {
    filter: invert(1);
}

.menu-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

.menu-item span {
    flex: 1;
}

.menu-item .arrow {
    font-size: 8px;
}

.menu-divider {
    height: 2px;
    background: var(--black);
    margin: 4px 8px;
}

/* Windows */
.window {
    position: absolute;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white), 4px 4px 0 var(--black);
    min-width: 200px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    /* Window open animation */
    animation: windowOpen var(--anim-normal) var(--ease-out);
}

@keyframes windowOpen {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Window closing animation */
.window.closing {
    animation: windowClose var(--anim-fast) var(--ease-out) forwards;
}

@keyframes windowClose {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Minimize animation */
.window.minimizing {
    animation: windowMinimize var(--anim-normal) var(--ease-out) forwards;
}

@keyframes windowMinimize {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.5) translateY(100vh);
    }
}

/* Restore from minimize animation */
.window.restoring {
    animation: windowRestore var(--anim-normal) var(--ease-out) forwards;
}

@keyframes windowRestore {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(100vh);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.window.minimized {
    display: none;
}

.window-titlebar {
    background: var(--black);
    color: var(--white);
    padding: 2px 4px;
    display: flex;
    align-items: center;
    cursor: move;
    user-select: none;
    height: 22px;
}

.window:not(.focused) .window-titlebar {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
    color: var(--black);
}

.window-titlebar span {
    flex: 1;
    font-weight: bold;
    font-size: 11px;
    padding-left: 2px;
}

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

.window-controls button {
    width: 18px;
    height: 16px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -1px -1px 0 var(--black), inset 1px 1px 0 var(--white);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.window-controls button:active {
    box-shadow: inset 1px 1px 0 var(--black), inset -1px -1px 0 var(--white);
}

.window-menubar {
    background: var(--white);
    border-bottom: 2px solid var(--black);
    padding: 2px 4px;
    display: flex;
    gap: 0;
    position: relative;
}

.window-menubar > span {
    padding: 2px 8px;
    cursor: pointer;
    position: relative;
}

.window-menubar > span:hover {
    background: var(--black);
    color: var(--white);
}

/* Dropdown menus */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white), 2px 2px 0 var(--black);
    min-width: 150px;
    z-index: 100;
    display: none;
    transform-origin: top left;
}

.dropdown-menu.open {
    display: block;
    animation: dropdownOpen var(--anim-fast) var(--ease-out);
}

@keyframes dropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    padding: 4px 24px 4px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.dropdown-item:hover {
    background: var(--black);
    color: var(--white);
}

.dropdown-item.disabled {
    color: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
    pointer-events: none;
}

.dropdown-divider {
    height: 2px;
    background: var(--black);
    margin: 2px 4px;
}

.dropdown-item .shortcut {
    float: right;
    margin-left: 16px;
    opacity: 0.7;
}

.window-content {
    flex: 1;
    padding: 8px;
    overflow: auto;
    background: var(--white);
}

.window-statusbar {
    background: var(--white);
    border-top: 2px solid var(--black);
    box-shadow: inset 0 2px 0 var(--white);
    padding: 2px 8px;
    font-size: 10px;
}

/* Window resize handle */
.window-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect x="10" y="14" width="2" height="2" fill="black"/><rect x="14" y="14" width="2" height="2" fill="black"/><rect x="14" y="10" width="2" height="2" fill="black"/><rect x="6" y="14" width="2" height="2" fill="black"/><rect x="14" y="6" width="2" height="2" fill="black"/><rect x="10" y="10" width="2" height="2" fill="black"/></svg>');
}

/* Shutdown Dialog */
#shutdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

#shutdown-overlay.hidden {
    display: none;
}

#shutdown-dialog {
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white), 4px 4px 0 var(--black);
    min-width: 320px;
}

.dialog-titlebar {
    background: var(--black);
    color: var(--white);
    padding: 2px 4px;
    display: flex;
    align-items: center;
    height: 22px;
}

.dialog-titlebar span {
    flex: 1;
    font-weight: bold;
}

.dialog-titlebar .close-btn {
    width: 18px;
    height: 16px;
    background: var(--white);
    border: 2px solid var(--black);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

.dialog-content {
    padding: 24px;
    text-align: center;
}

.shutdown-icon-large {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="20" fill="none" stroke="black" stroke-width="3"/><rect x="22" y="8" width="4" height="18" fill="black"/></svg>');
}

.dialog-content p {
    margin-bottom: 12px;
}

.dialog-content .small {
    font-size: 10px;
}

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

.dialog-buttons button,
button.btn {
    padding: 6px 20px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--ease-out);
}

button.btn:hover {
    transform: translateY(-1px);
}

.dialog-buttons button:active,
button.btn:active {
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
    transform: translateY(1px);
}

/* Specific window content styles */
.about-content {
    text-align: center;
    padding: 16px;
}

.about-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    image-rendering: pixelated;
}

.about-content h1 {
    font-size: 18px;
    margin-bottom: 4px;
}

.about-content p {
    margin: 6px 0;
}

/* Notepad specific */
.notepad-textarea {
    width: 100%;
    height: calc(100% - 24px);
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
    resize: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    outline: none;
    background: var(--white);
    color: var(--black);
    padding: 4px;
    display: block;
}

/* File list */
.file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    gap: 8px;
    padding: 8px;
}

.file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    cursor: pointer;
}

.file-item:hover span {
    background: var(--black);
    color: var(--white);
}

.file-item:hover .file-icon {
    filter: invert(1);
}

.file-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    image-rendering: pixelated;
}

.file-item span {
    font-size: 10px;
    text-align: center;
    padding: 1px 2px;
}

/* Paint canvas */
#paint-canvas {
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
    cursor: crosshair;
    image-rendering: pixelated;
}

.paint-toolbar {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px;
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    background: var(--white);
}

.paint-tool {
    width: 26px;
    height: 26px;
    border: 2px solid var(--black);
    box-shadow: inset -1px -1px 0 var(--black), inset 1px 1px 0 var(--white);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    image-rendering: pixelated;
}

.paint-tool:hover {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

.paint-tool.active {
    box-shadow: inset 1px 1px 0 var(--black), inset -1px -1px 0 var(--white);
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

.paint-separator {
    width: 2px;
    height: 26px;
    background: var(--black);
    margin: 0 4px;
}

.paint-colors {
    display: flex;
    gap: 2px;
}

.paint-color {
    width: 20px;
    height: 20px;
    border: 2px solid var(--black);
    cursor: pointer;
}

.paint-color.black {
    background: var(--black);
}

.paint-color.white {
    background: var(--white);
}

.paint-color.dither {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

.paint-color.active {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

.brush-sizes {
    display: flex;
    gap: 2px;
}

.brush-size {
    width: 26px;
    height: 26px;
    border: 2px solid var(--black);
    box-shadow: inset -1px -1px 0 var(--black), inset 1px 1px 0 var(--white);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brush-size.active {
    box-shadow: inset 1px 1px 0 var(--black), inset -1px -1px 0 var(--white);
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

.brush-dot {
    background: var(--black);
    border-radius: 0;
}

.canvas-container {
    overflow: auto;
    flex: 1;
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
    background: var(--white);
}

/* Control Panel */
.control-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 90px);
    gap: 16px;
    padding: 16px;
}

.cp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
}

.cp-item:hover span {
    background: var(--black);
    color: var(--white);
}

.cp-item:hover .cp-icon {
    filter: invert(1);
}

.cp-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    image-rendering: pixelated;
}

.cp-item span {
    font-size: 11px;
    text-align: center;
    padding: 2px;
}

/* Settings panels */
.settings-panel {
    padding: 16px;
}

.settings-group {
    border: 2px solid var(--black);
    padding: 12px;
    margin-bottom: 16px;
}

.settings-group-title {
    font-weight: bold;
    margin-bottom: 12px;
    background: var(--white);
    position: relative;
    top: -20px;
    display: inline-block;
    padding: 0 4px;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px;
    margin: -4px;
}

.checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--anim-fast);
}

.checkbox:hover {
    transform: scale(1.1);
}

.checkbox:active {
    transform: scale(0.95);
}

.checkbox.checked::after {
    content: '✓';
    font-size: 14px;
    font-weight: bold;
    animation: checkmarkAppear var(--anim-fast) var(--ease-out);
}

@keyframes checkmarkAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Wallpaper grid */
.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(4, 48px);
    gap: 8px;
    margin-top: 8px;
}

.wallpaper-tile {
    width: 48px;
    height: 48px;
    border: 2px solid var(--black);
    cursor: pointer;
    image-rendering: pixelated;
}

.wallpaper-tile.active {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

.wallpaper-tile:hover {
    outline: 2px dotted var(--black);
    outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
    border: 1px solid var(--black);
}

::-webkit-scrollbar-thumb {
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
}

::-webkit-scrollbar-button {
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -1px -1px 0 var(--black), inset 1px 1px 0 var(--white);
}

/* ===== LEGIBILITY FIXES ===== */

/* Dropdown menu items - ensure black text on white background */
.dropdown-menu {
    background: var(--white);
    color: var(--black);
}

.dropdown-item {
    background: var(--white);
    color: var(--black);
}

.dropdown-item:hover {
    background: var(--black);
    color: var(--white);
}

/* Desktop icon labels - add white backdrop for legibility against wallpaper */
.icon span {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
    box-shadow: 1px 1px 0 var(--black);
    background: var(--white);
    border: 1px solid var(--black);
    padding: 1px 3px;
    margin-top: 2px;
    box-shadow: 1px 1px 0 var(--black);
}

.icon:hover span,
.icon:focus span {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

/* Start menu items - ensure visibility */
.menu-item {
    background: var(--white);
    color: var(--black);
}

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

/* Window menubar items */
.window-menubar > span {
    color: var(--black);
    background: var(--white);
}

.window-menubar > span:hover {
    background: var(--black);
    color: var(--white);
}

/* Ensure taskbar items are legible */
.taskbar-item {
    background: var(--white);
    color: var(--black);
}

/* ===== ICON LABEL FIX - Higher specificity ===== */
.desktop-icons .icon span {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
    box-shadow: 1px 1px 0 var(--black);
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 2px 4px !important;
    display: inline-block !important;
    box-shadow: 1px 1px 0 #000000;
    max-width: 64px;
    word-wrap: break-word;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
}

.desktop-icons .icon:hover span {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Also fix the icon images to have white background */
.desktop-icons .icon .icon-img {
    background-color: #ffffff;
    padding: 2px;
}

/* FINAL FIX: Desktop icon labels must be legible */
.desktop-icons .icon span,
.icon span {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 2px 4px !important;
    box-shadow: 1px 1px 0 #000000 !important;
    display: inline-block;
}

.icon:hover span,
.icon:focus span,
.desktop-icons .icon:hover span {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ===== MINESWEEPER STYLES ===== */
.minesweeper-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--white);
}

.ms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 4px;
    margin-bottom: 8px;
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
    background: var(--white);
}

.ms-counter {
    font-family: 'Victor Mono', monospace;
    font-size: 20px;
    font-weight: bold;
    background: var(--black);
    color: var(--white);
    padding: 2px 6px;
    min-width: 45px;
    text-align: center;
}

.ms-face {
    width: 32px;
    height: 32px;
    font-size: 18px;
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-face:active {
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
}

.ms-grid {
    display: grid;
    grid-template-columns: repeat(9, 24px);
    grid-template-rows: repeat(9, 24px);
    gap: 0;
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
}

.ms-cell {
    width: 24px;
    height: 24px;
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Victor Mono', monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.ms-cell:hover:not(.revealed) {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="1" y="1" width="1" height="1" fill="black"/></svg>');
}

.ms-cell.revealed {
    box-shadow: inset 1px 1px 0 var(--black);
    background: var(--white);
    cursor: default;
}

.ms-cell.mine {
    background: var(--black);
    color: var(--white);
}

.ms-cell[data-num="1"] { color: #000; }
.ms-cell[data-num="2"] { color: #000; font-style: italic; }
.ms-cell[data-num="3"] { color: #000; text-decoration: underline; }
.ms-cell[data-num="4"] { color: #000; }
.ms-cell[data-num="5"] { color: #000; }
.ms-cell[data-num="6"] { color: #000; }
.ms-cell[data-num="7"] { color: #000; }
.ms-cell[data-num="8"] { color: #000; }

/* ===== MOBILE / TOUCH SUPPORT ===== */
@media (max-width: 768px) {
    body {
        font-size: 12px;
    }
    
    #desktop {
        height: calc(100vh - 40px);
        overflow: auto;
    }
    
    #taskbar {
        height: 40px;
        padding: 4px;
    }
    
    #start-button {
        height: 32px;
        padding: 4px 12px;
        font-size: 12px;
    }
    
    .start-logo {
        width: 24px;
        height: 24px;
    }
    
    #clock {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .taskbar-item {
        height: 28px;
        padding: 4px 8px;
        font-size: 11px;
    }
    
    /* Larger touch targets for icons */
    .desktop-icons {
        padding: 12px;
        gap: 16px;
    }
    
    .icon {
        width: 80px;
        padding: 8px;
    }
    
    .icon-img {
        width: 40px;
        height: 40px;
    }
    
    .icon span {
        font-size: 10px;
        padding: 2px 4px;
    }
    
    /* Windows */
    .window {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 60px);
    }
    
    .window-titlebar {
        height: 28px;
        padding: 4px 8px;
    }
    
    .window-controls button {
        width: 24px;
        height: 20px;
        font-size: 14px;
    }
    
    .window-menubar {
        flex-wrap: wrap;
    }
    
    .window-menubar > span {
        padding: 6px 12px;
    }
    
    /* Start menu */
    #start-menu {
        bottom: 40px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    
    .menu-item {
        padding: 10px 16px 10px 8px;
    }
    
    .menu-icon {
        width: 24px;
        height: 24px;
    }
    
    /* Dropdown menus */
    .dropdown-menu {
        min-width: 180px;
    }
    
    .dropdown-item {
        padding: 10px 16px;
    }
    
    /* Minesweeper */
    .ms-cell {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .ms-grid {
        grid-template-columns: repeat(9, 28px);
        grid-template-rows: repeat(9, 28px);
    }
    
    .ms-face {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .ms-counter {
        font-size: 18px;
        padding: 4px 8px;
    }
    
    /* Paint */
    .paint-tool {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .paint-color {
        width: 24px;
        height: 24px;
    }
    
    .brush-size {
        width: 32px;
        height: 32px;
    }
    
    /* Control panel / Display settings */
    .wallpaper-tile {
        width: 56px;
        height: 56px;
    }
    
    .wallpaper-grid {
        grid-template-columns: repeat(3, 56px);
    }
    
    .checkbox {
        width: 20px;
        height: 20px;
    }
    
    /* Dialog buttons */
    .dialog-buttons button,
    button.btn {
        padding: 10px 24px;
        font-size: 12px;
    }
}

/* Touch-specific: prevent text selection during drag */
.dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* Visual feedback for touch */
.touch-active {
    opacity: 0.8;
}

/* Long-press indicator */
.long-press-indicator {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid var(--black);
    border-radius: 50%;
    pointer-events: none;
    animation: long-press-ring 0.5s ease-out forwards;
    z-index: 9999;
}

@keyframes long-press-ring {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ===== SYSTEM 7 GLOBAL MENU BAR ===== */
.global-menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    background: var(--white);
    border-bottom: 2px solid var(--black);
    display: flex;
    align-items: center;
    padding: 0 4px;
    z-index: 10000;
    font-size: 11px;
}

.global-menu-bar.hidden {
    display: none;
}

.gmb-app-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 16px;
    border-right: 1px solid var(--black);
    margin-right: 8px;
}

.gmb-apple {
    font-size: 16px;
    font-weight: bold;
}

.gmb-app-name {
    font-weight: bold;
}

.gmb-menus {
    display: flex;
    gap: 0;
    flex: 1;
}

.gmb-menu-item {
    padding: 2px 10px;
    cursor: pointer;
    position: relative;
    font-size: 11px;
}

.gmb-menu-item:hover {
    background: var(--black);
    color: var(--white);
}

.gmb-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    min-width: 180px;
    display: none;
    z-index: 10001;
}

.gmb-dropdown.open {
    display: block;
}

.gmb-dropdown-item {
    padding: 4px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    background: var(--white);
    color: var(--black);
    font-size: 11px;
}

.gmb-dropdown-item:hover {
    background: var(--black);
    color: var(--white);
}

.gmb-shortcut {
    margin-left: 24px;
    opacity: 0.7;
}

.gmb-divider {
    height: 2px;
    background: var(--black);
    margin: 4px 8px;
}

.gmb-right {
    margin-left: auto;
    padding-left: 16px;
}

.gmb-clock {
    font-weight: bold;
}

/* Adjust layout when menu bar is enabled */
body.system7-menubar #desktop {
    top: 24px;
    height: calc(100vh - 56px);
}

body.system7-menubar .global-menu-bar {
    height: 22px;
}

body.system7-menubar #taskbar {
    /* Taskbar stays at bottom */
}

body.system7-menubar .window-menubar {
    display: none !important;
}

/* Mobile adjustments for menu bar */
@media (max-width: 768px) {
    .global-menu-bar {
        height: 36px;
        padding: 0 4px;
        font-size: 12px;
    }
    
    .gmb-apple-menu {
        min-width: 44px;
        min-height: 32px;
        padding: 4px 14px !important;
    }
    
    .gmb-apple-menu svg {
        width: 20px;
        height: 20px;
    }
    
    .gmb-menu-item {
        padding: 8px 12px;
        min-height: 32px;
    }
    
    .gmb-dropdown {
        min-width: 240px;
    }
    
    .gmb-dropdown-item {
        padding: 12px 16px;
        min-height: 44px;
    }
    
    .gmb-has-check .gmb-check {
        width: 20px;
        font-size: 14px;
    }
    
    .gmb-section-title {
        padding: 8px 16px 4px 16px;
        font-size: 10px;
    }
    
    .gmb-volume-control {
        min-width: 44px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .gmb-volume-control svg {
        width: 18px;
        height: 18px;
    }
    
    body.system7-menubar #desktop {
        top: 36px;
        height: calc(100vh - 68px);
    }
    
    /* Larger checkboxes on mobile */
    .checkbox {
        width: 22px;
        height: 22px;
    }
    
    .checkbox.checked::after {
        font-size: 16px;
    }
    
    .checkbox-wrapper {
        padding: 8px;
        margin: -8px;
        gap: 12px;
    }
    
    .volume-mute {
        padding: 8px;
    }
    
    .volume-mute input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
    
    .volume-mute input[type="checkbox"]:checked::after {
        font-size: 16px;
        line-height: 18px;
    }
}

/* ===== UPDATED SYSTEM 7 MENU BAR STYLES ===== */
.gmb-left {
    display: flex;
    align-items: center;
}

.gmb-apple-menu {
    font-size: 18px;
    font-weight: bold;
    padding: 2px 12px !important;
}

.gmb-apple-dropdown {
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
}

.gmb-dropdown-label {
    padding: 4px 12px;
    font-size: 10px;
    color: var(--black);
    background: var(--white);
    font-weight: bold;
}

.gmb-has-check {
    display: flex;
    align-items: center;
}

.gmb-check {
    width: 20px;
    text-align: center;
    font-weight: bold;
}

.gmb-wallpaper-item {
    font-size: 11px;
}

/* Make sure dropdown items stay legible */
.gmb-dropdown-item {
    background: var(--white) !important;
    color: var(--black) !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gmb-dropdown-item:hover {
    background: var(--black) !important;
    color: var(--white) !important;
}

.gmb-dropdown-item:hover .gmb-check {
    color: var(--white);
}

.gmb-dropdown-item:hover .gmb-item-icon svg {
    filter: invert(1);
}

/* Apple menu improvements */
.gmb-apple-menu {
    padding: 2px 12px !important;
    min-width: 32px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gmb-apple-menu svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.gmb-apple-dropdown {
    min-width: 200px;
    font-size: 11px;
}

.gmb-section-title {
    padding: 4px 12px 2px 12px;
    font-size: 9px;
    font-weight: bold;
    color: var(--black);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="1" y="1" width="1" height="1" fill="black"/></svg>');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gmb-about-item {
    font-weight: bold;
    font-size: 11px;
}

.gmb-item-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gmb-item-icon svg {
    width: 16px;
    height: 16px;
}

.gmb-has-check {
    padding-left: 6px !important;
    font-size: 11px;
}

.gmb-has-check .gmb-check {
    width: 14px;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}

.gmb-wallpaper-item {
    font-size: 11px;
}

/* System 7 menu bar right side */
.gmb-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

.gmb-volume-control {
    cursor: pointer;
    padding: 2px 4px;
    position: relative;
}

.gmb-volume-control:hover {
    background: var(--black);
}

.gmb-volume-control:hover svg {
    filter: invert(1);
}

.gmb-volume-control svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.gmb-volume-control.muted svg path:last-child {
    display: none;
}

/* Volume popup for menubar */
.gmb-volume-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    padding: 8px;
    z-index: 10002;
}

.gmb-volume-popup.hidden {
    display: none;
}

.gmb-volume-popup input[type="range"] {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 20px;
    height: 80px;
}


/* ===== CUSTOM DIALOG SYSTEM ===== */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    animation: dialogOverlayFadeIn var(--anim-fast) var(--ease-out);
}

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

.dialog-box {
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white), 4px 4px 0 var(--black);
    min-width: 300px;
    max-width: 450px;
    animation: dialogBoxAppear var(--anim-normal) var(--ease-out);
}

@keyframes dialogBoxAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dialog-box .dialog-titlebar {
    background: var(--black);
    color: var(--white);
    padding: 2px 4px;
    display: flex;
    align-items: center;
    height: 22px;
}

.dialog-box .dialog-titlebar span {
    flex: 1;
    font-weight: bold;
    font-size: 11px;
}

.dialog-body {
    display: flex;
    padding: 16px;
    gap: 16px;
    align-items: flex-start;
}

.dialog-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.dialog-icon svg {
    width: 32px;
    height: 32px;
}

.dialog-message {
    flex: 1;
}

.dialog-message p {
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.dialog-input {
    width: 100%;
    padding: 4px;
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
    font-family: inherit;
    font-size: 11px;
    background: var(--white);
}

.dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 0 16px 16px 16px;
}

/* ===== CALCULATOR STYLES ===== */
.calc-container {
    padding: 8px;
    background: var(--white);
}

.calc-display {
    width: 100%;
    padding: 8px 12px;
    font-family: 'Victor Mono', monospace;
    font-size: 24px;
    text-align: right;
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
    background: var(--white);
    margin-bottom: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.calc-btn {
    padding: 12px 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    cursor: pointer;
}

.calc-btn:active {
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
}

.calc-btn:hover {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

.calc-op {
    background: var(--black);
    color: var(--white);
    box-shadow: inset -2px -2px 0 #444, inset 2px 2px 0 #888;
}

.calc-op:hover {
    background: #333;
}

.calc-zero {
    grid-column: span 2;
}

.calc-equals {
    background: var(--black);
    color: var(--white);
}

.calc-clear {
    font-size: 12px;
}

/* ===== SPLASH & BOOT SCREEN ===== */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    cursor: pointer;
}

.splash-content {
    text-align: center;
    color: var(--white);
}

.splash-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    filter: invert(1);
    animation: splashLogoPulse 2s ease-in-out infinite;
}

@keyframes splashLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.splash-logo svg {
    width: 64px;
    height: 64px;
}

.splash-content h1 {
    font-size: 32px;
    margin: 0 0 8px 0;
}

.splash-click {
    margin-top: 32px;
    animation: splash-blink 1.5s ease-in-out infinite;
}

@keyframes splash-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    transition: opacity 0.3s ease-out;
}

#boot-screen.boot-fade-out {
    opacity: 0;
}

.boot-content {
    text-align: center;
    color: var(--white);
}

.boot-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    filter: invert(1);
}

.boot-logo svg {
    width: 64px;
    height: 64px;
}

.boot-content h1 {
    font-size: 32px;
    margin: 0 0 8px 0;
}

.boot-content p {
    margin: 8px 0;
}

.boot-progress {
    width: 300px;
    height: 20px;
    border: 2px solid var(--white);
    margin: 24px auto;
    background: var(--black);
}

.boot-progress-bar {
    height: 100%;
    width: 0;
    background: var(--white);
    transition: width 0.15s ease-out;
}

.boot-status {
    font-size: 12px;
    opacity: 0.8;
}

/* ===== HELP WINDOW STYLES ===== */
.help-content {
    padding: 8px;
    line-height: 1.5;
}

.help-content h2 {
    font-size: 16px;
    margin: 0 0 16px 0;
    border-bottom: 2px solid var(--black);
    padding-bottom: 8px;
}

.help-section {
    margin-bottom: 16px;
}

.help-section h3 {
    font-size: 12px;
    margin: 0 0 6px 0;
    background: var(--black);
    color: var(--white);
    padding: 2px 6px;
    display: inline-block;
}

.help-section p {
    margin: 4px 0;
    font-size: 11px;
}

/* ===== NOTEPAD STATUS BAR ===== */
.notepad-statusbar {
    background: var(--white);
    border-top: 2px solid var(--black);
    padding: 2px 8px;
    font-size: 10px;
    display: flex;
    justify-content: flex-end;
}

.notepad-status {
    border: 1px solid var(--black);
    padding: 1px 8px;
    background: var(--white);
}

/* ===== RECYCLE BIN ===== */
.recycle-content {
    text-align: center;
    padding: 40px 20px;
}

.recycle-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
}

.recycle-icon svg {
    width: 48px;
    height: 48px;
}

.recycle-content p {
    margin: 8px 0;
}

.recycle-tip {
    font-size: 10px;
    opacity: 0.7;
}

/* ===== SOUND SETTINGS ===== */
.volume-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 20px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 20px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    cursor: pointer;
}

#volume-display {
    min-width: 40px;
    text-align: right;
    font-weight: bold;
}

.sound-test-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sound-test-buttons .btn {
    padding: 4px 12px;
    font-size: 10px;
}

/* ===== SHUTDOWN SCREEN ===== */
#shutdown-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
}

#shutdown-screen.hidden {
    display: none;
}

.shutdown-message {
    text-align: center;
    color: #ff8c00;
    font-size: 24px;
    font-family: 'Victor Mono', monospace;
    animation: shutdown-blink 1s ease-in-out infinite;
}

@keyframes shutdown-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Shutdown options */
.shutdown-options {
    margin: 16px 0;
    text-align: left;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* ===== TASKBAR TRAY & VOLUME CONTROL ===== */
#taskbar-tray {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tray-icon {
    width: 24px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}

.tray-icon:hover {
    border: 1px solid var(--black);
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQImWNgYGD4z8DAwMAAABECA/9s+WLrAAAAAElFTkSuQmCC');
}

.tray-icon svg {
    width: 16px;
    height: 16px;
}

#volume-popup {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white), 2px 2px 0 var(--black);
    padding: 8px;
    z-index: 1001;
}

#volume-popup.hidden {
    display: none;
}

.volume-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 40px;
}

#tray-volume-slider,
#gmb-volume-slider {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 80px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
    cursor: pointer;
}

#tray-volume-slider::-webkit-slider-thumb,
#gmb-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 12px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -1px -1px 0 var(--black), inset 1px 1px 0 var(--white);
    cursor: pointer;
}

#tray-volume-slider::-moz-range-thumb,
#gmb-volume-slider::-moz-range-thumb {
    width: 20px;
    height: 12px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -1px -1px 0 var(--black), inset 1px 1px 0 var(--white);
    cursor: pointer;
    border-radius: 0;
}

#tray-volume-slider::-webkit-slider-runnable-track,
#gmb-volume-slider::-webkit-slider-runnable-track {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="2" height="2" fill="black"/><rect x="2" y="2" width="2" height="2" fill="black"/></svg>');
}

#tray-volume-slider::-moz-range-track,
#gmb-volume-slider::-moz-range-track {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="2" height="2" fill="black"/><rect x="2" y="2" width="2" height="2" fill="black"/></svg>');
}

#tray-volume-display {
    font-size: 10px;
    font-weight: bold;
}

.volume-mute {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    cursor: pointer;
    padding: 4px;
}

.volume-mute input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 2px solid var(--black);
    box-shadow: inset 1px 1px 0 var(--black);
    background: var(--white);
    cursor: pointer;
    flex-shrink: 0;
}

.volume-mute input[type="checkbox"]:checked {
    background: var(--white);
}

.volume-mute input[type="checkbox"]:checked::after {
    content: '✓';
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
}

/* Muted state */
.tray-icon.muted svg path:last-child {
    display: none;
}

.tray-icon.muted::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 16px;
    background: var(--black);
    transform: rotate(45deg);
}


/* ===== MS-DOS PROMPT / TERMINAL ===== */
.terminal-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--black);
    color: var(--white);
    font-family: 'Victor Mono', monospace;
    font-size: 13px;
    padding: 4px;
}

.terminal-output {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 4px;
    line-height: 1.4;
}

.terminal-line {
    min-height: 1em;
}

.terminal-cmd-echo {
    color: var(--white);
}

.terminal-input-line {
    display: flex;
    align-items: center;
    padding: 4px;
    flex-shrink: 0;
}

.terminal-prompt {
    color: var(--white);
    white-space: nowrap;
    margin-right: 4px;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-family: inherit;
    font-size: inherit;
    caret-color: var(--white);
}

.terminal-input::selection {
    background: var(--white);
    color: var(--black);
}

/* Blinking cursor effect */
.terminal-input:focus {
    animation: terminal-blink 1s step-end infinite;
}

@keyframes terminal-blink {
    50% {
        border-right: 2px solid var(--white);
    }
}

/* Terminal scrollbar */
.terminal-output::-webkit-scrollbar {
    width: 16px;
    background: var(--white);
}

.terminal-output::-webkit-scrollbar-track {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="1" y="1" width="1" height="1" fill="black"/></svg>');
}

.terminal-output::-webkit-scrollbar-thumb {
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
}

/* ===== SCREENSAVER ===== */
#screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    z-index: 99999;
    cursor: none;
}

#screensaver-canvas {
    width: 100%;
    height: 100%;
}

.screensaver-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: 'Victor Mono', monospace;
    font-size: 12px;
    opacity: 0.5;
}

/* ===== SCREENSAVER SETTINGS ===== */
.screensaver-preview {
    width: 100%;
    height: 80px;
    background: var(--black);
    border: 2px solid var(--black);
    position: relative;
    overflow: hidden;
}

.preview-logo {
    position: absolute;
    color: var(--white);
    font-weight: bold;
    font-size: 14px;
    font-family: monospace;
    border: 2px solid var(--white);
    padding: 2px 4px;
}

.settings-select {
    padding: 4px 8px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset 1px 1px 0 var(--black);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    margin-left: 8px;
}

.settings-select:focus {
    outline: 1px dotted var(--black);
}

/* ===== CONTEXT MENU ===== */
.context-menu {
    position: fixed;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white), 2px 2px 0 var(--black);
    min-width: 150px;
    z-index: 10000;
    animation: contextMenuAppear var(--anim-fast) var(--ease-out);
}

@keyframes contextMenuAppear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    padding: 4px 24px 4px 8px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-menu-item:hover {
    background: var(--black);
    color: var(--white);
}

.context-menu-item.disabled {
    color: #888;
    cursor: default;
}

.context-menu-item.disabled:hover {
    background: transparent;
    color: #888;
}

.context-menu-divider {
    height: 2px;
    background: var(--black);
    margin: 4px 0;
}

.context-menu-icon {
    width: 16px;
    height: 16px;
}

.context-menu-icon svg {
    width: 16px;
    height: 16px;
}

/* ===== CARD MATCHING GAME ===== */
.cards-container {
    padding: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset 2px 2px 0 var(--black);
}

.cards-moves, .cards-timer {
    font-weight: bold;
    min-width: 80px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex: 1;
}

.card {
    aspect-ratio: 3/4;
    cursor: pointer;
    perspective: 400px;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-out);
}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 2px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-front {
    background: var(--black);
    /* Decorative pattern */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(255,255,255,0.1) 4px,
        rgba(255,255,255,0.1) 8px
    );
}

.card-front::after {
    content: '?';
    color: var(--white);
    font-size: 24px;
    font-weight: bold;
}

.card-back {
    background: var(--white);
    transform: rotateY(180deg);
    font-size: 32px;
}

.card:hover .card-inner {
    transform: scale(1.05);
}

.card.flipped:hover .card-inner {
    transform: rotateY(180deg) scale(1.05);
}

.cards-message {
    text-align: center;
    padding: 8px;
    font-weight: bold;
    min-height: 24px;
}

.cards-win {
    background: var(--black);
    color: var(--white);
    animation: winPulse 0.5s ease-in-out 3;
}

@keyframes winPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== MEDIA PLAYER ===== */
.media-container {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--black);
    height: 100%;
}

.media-display {
    background: var(--black);
    border: 2px solid var(--white);
    padding: 8px;
    text-align: center;
}

.media-visualizer {
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    margin-bottom: 8px;
}

.viz-bar {
    width: 8px;
    background: var(--white);
    transition: height 0.1s;
}

.media-title {
    color: var(--white);
    font-weight: bold;
    font-size: 12px;
}

.media-progress {
    height: 8px;
    background: var(--white);
    border: 2px solid var(--white);
}

.media-progress-bar {
    height: 100%;
    background: var(--black);
    width: 0%;
    transition: width 0.3s linear;
}

.media-time {
    color: var(--white);
    text-align: center;
    font-size: 10px;
}

.media-controls {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.media-btn {
    width: 36px;
    height: 28px;
    background: var(--white);
    border: 2px solid var(--white);
    box-shadow: inset -2px -2px 0 var(--black), inset 2px 2px 0 var(--white);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-btn:active {
    box-shadow: inset 2px 2px 0 var(--black), inset -2px -2px 0 var(--white);
}

.media-play {
    width: 48px;
}

.media-btn.playing {
    background: var(--black);
    color: var(--white);
}

/* ===== INTERNET EXPLORER ===== */
.ie-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ie-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--white);
    border-bottom: 2px solid var(--black);
}

.ie-btn {
    width: 28px;
    height: 24px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: inset -1px -1px 0 var(--black), inset 1px 1px 0 var(--white);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ie-btn:active {
    box-shadow: inset 1px 1px 0 var(--black), inset -1px -1px 0 var(--white);
}

.ie-address {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    margin-left: 8px;
}

.ie-address span {
    font-size: 11px;
}

.ie-url {
    flex: 1;
    height: 20px;
    border: 2px solid var(--black);
    box-shadow: inset 1px 1px 0 var(--black);
    padding: 0 4px;
    font-family: inherit;
    font-size: 11px;
}

.ie-go {
    width: 32px;
}

.ie-content {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: var(--white);
}

.ie-content > *:not(.ie-iframe) {
    padding: 16px;
}

.ie-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--white);
}

.ie-external {
    margin-top: 24px;
}

.ie-ext-input {
    width: 250px;
    height: 24px;
    border: 2px solid var(--black);
    box-shadow: inset 1px 1px 0 var(--black);
    padding: 0 4px;
    font-family: inherit;
    margin-right: 4px;
}

.ie-home {
    text-align: center;
}

.ie-home h1 {
    font-size: 24px;
    margin-bottom: 8px;
}

.ie-links {
    margin: 24px 0;
    padding: 16px;
    border: 2px solid var(--black);
    display: inline-block;
}

.ie-links a {
    display: block;
    color: var(--black);
    margin: 8px 0;
}

.ie-links a:hover {
    background: var(--black);
    color: var(--white);
}

.ie-search {
    margin-top: 24px;
}

.ie-search-input {
    width: 200px;
    height: 24px;
    border: 2px solid var(--black);
    box-shadow: inset 1px 1px 0 var(--black);
    padding: 0 4px;
    font-family: inherit;
}

.ie-page {
    text-align: left;
}

.ie-page h1 {
    border-bottom: 2px solid var(--black);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.ie-page h2 {
    font-size: 14px;
    margin-bottom: 16px;
}

.ie-page ul {
    margin: 16px 0 16px 24px;
}

.ie-page li {
    margin: 8px 0;
}

.ie-page code {
    background: var(--black);
    color: var(--white);
    padding: 2px 4px;
    font-family: 'Victor Mono', monospace;
}

.ie-page a {
    color: var(--black);
    font-weight: bold;
}

.ie-status {
    padding: 2px 8px;
    border-top: 2px solid var(--black);
    font-size: 11px;
    background: var(--white);
}

.ie-nosearch {
    color: var(--black);
    font-style: italic;
}