:root {
    --os-teal: #008080;
    --os-gray: #c0c0c0;
    --os-dark-gray: #808080;
    --os-blue: #000080;
    --os-text: #000;
    --font-ui: 'VT323', monospace;
}

* { box-sizing: border-box; }

body {
    background: #000;
    color: var(--os-text);
    font-family: var(--font-ui);
    margin: 0; padding: 0;
    height: 100vh; overflow: hidden;
    user-select: none;
}

/* ===== BOOT SCREEN ===== */
#boot-screen {
    position: fixed; top:0; left:0; width:100vw; height:100vh;
    background: #000; color: #aaa; z-index: 99999;
    font-family: 'VT323', monospace; font-size: 1.3rem;
    padding: 30px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start;
}
#boot-text { white-space: pre-wrap; line-height: 1.4; }
.boot-highlight { color: #fff; }
.boot-ok { color: #0f0; }
.boot-warn { color: #ff0; }

/* ===== SHUTDOWN ===== */
#shutdown-screen {
    position: fixed; top:0; left:0; width:100vw; height:100vh;
    background: #ff8800; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.shutdown-text {
    color: #fff; font-family: var(--font-ui); font-size: 2.5rem;
    text-align: center; text-shadow: 2px 2px #000;
}

/* ===== CRT EFFECTS ===== */
.crt::before {
    content: ""; display: block; position: fixed;
    top:0;left:0;bottom:0;right:0;
    background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
                linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
    z-index: 10000; background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}
.scanlines {
    width:100%;height:100px;z-index:10005;
    position:fixed;top:-100px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0) 50%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0));
    animation:scanline 8s linear infinite;
}
@keyframes scanline { 0%{transform:translateY(-100px)} 100%{transform:translateY(100vh)} }

/* ===== DESKTOP ===== */
.os-container { display:flex; flex-direction:column; height:100vh; }
.desktop {
    flex-grow:1; position:relative; padding:15px;
    overflow:hidden; background: var(--os-teal);
}

/* Desktop Shortcut Icons */
.desktop-icon {
    display: flex; flex-direction: column; align-items: center;
    width: 75px; padding: 5px; cursor: pointer; text-align: center;
    color: #fff; text-shadow: 1px 1px 2px #000;
}
.desktop-icon:hover { background: rgba(0,0,128,0.4); }
.desktop-icon .di-img {
    width: 40px; height: 40px; margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; image-rendering: pixelated;
}
.desktop-icon .di-label { font-size: 1rem; word-break: break-word; }

/* ===== WINDOWS ===== */
.window {
    position: absolute;
    background-color: var(--os-gray);
    border: 2px solid; border-color: #dfdfdf #000 #000 #dfdfdf;
    min-width: 250px; min-height: 120px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    resize: both; overflow: auto; z-index: 10;
}
.title-bar {
    background: linear-gradient(90deg, #000080, #1084d0); /* Win98 gradient! */
    color: #fff; padding: 3px 5px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.2rem; cursor: default; flex-shrink: 0;
}
.inactive-title { background: linear-gradient(90deg, #808080, #b0b0b0); }
.title-bar.dark-bar { background: linear-gradient(90deg, #000, #333); }

.window-controls { display:flex; gap: 2px; }
.window-controls span {
    background-color: var(--os-gray); color: var(--os-text);
    padding: 0 5px; border: 1px solid; border-color: #fff #000 #000 #fff;
    cursor: pointer; line-height: 1; font-size: 1rem;
}
.window-controls span:hover { background: #ddd; }
.window-controls span:active { border-color: #000 #fff #fff #000; }

.window-content {
    background-color: #fff; margin: 3px;
    border: 2px solid; border-color: #808080 #fff #fff #808080;
    flex-grow: 1; position: relative;
    display: flex; flex-direction: column; overflow: hidden;
}

.app-frame { width:100%;height:100%;flex-grow:1;border:none;background:#000; }

/* File Grid */
.path-bar { font-size:1.2rem;padding:5px;border-bottom:2px solid var(--os-gray);background:#fff; }
.file-grid {
    display:flex;flex-wrap:wrap;align-content:flex-start;
    gap:10px;padding:10px;background:#fff;flex-grow:1;overflow-y:auto;
}
.file-icon {
    display:flex;flex-direction:column;align-items:center;
    color:var(--os-text);padding:5px;cursor:pointer;
    width:75px;height:fit-content;max-height:70px; text-align:center;
}
.file-icon:hover { background:var(--os-blue);color:#fff; }
.icon-img {
    width:32px;height:32px;margin-bottom:4px;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;image-rendering:pixelated;
}

/* Terminal */
.cmd-content { background:#000;color:#ccc;font-size:1.2rem;line-height:1.2;padding:10px;overflow-y:auto; }
.cmd-content p { margin:2px 0; }
.blink { animation:blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity:0 } }
#news_ticker { margin-top:10px;color:#0f0; }
.news-item { margin-bottom:5px;border-left:2px solid #005500;padding-left:5px; }

/* ===== TASKBAR ===== */
.taskbar {
    height:36px; background:var(--os-gray);
    border-top:2px solid #fff;
    display:flex; align-items:center; padding:0 3px; gap:3px;
    z-index:5000; flex-shrink:0;
}
.taskbar-apps { display:flex; gap:3px; flex-grow:1; overflow:hidden; }
.taskbar-tray {
    display:flex; align-items:center; gap:5px;
    border:2px inset #fff; padding:0 8px; height:26px; background:var(--os-gray);
}
.tray-icon { cursor:pointer; font-size:14px; }
.clock { font-size:1.15rem; }

.taskbar-btn {
    border:2px solid; border-color:#fff #000 #000 #fff;
    padding:2px 8px; font-size:1.1rem; cursor:pointer;
    background:var(--os-gray); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; display:flex; align-items:center;
    gap:4px; max-width:140px; height:26px;
}
.taskbar-btn.active { border-color:#000 #fff #fff #000; background:#e0e0e0; }
.start-btn {
    font-weight:bold; font-size:1.2rem; margin-right:5px; padding:2px 10px;
}
.start-btn.pressed { border-color:#000 #fff #fff #000; }
.start-icon { font-size:16px; }

/* ===== START MENU ===== */
.start-menu {
    position:fixed; bottom:36px; left:0; z-index:9000;
    background:var(--os-gray); border:2px solid; border-color:#fff #000 #000 #fff;
    display:flex; min-width:250px; box-shadow:4px -4px 12px rgba(0,0,0,0.4);
}
.start-menu-sidebar {
    background: linear-gradient(180deg, #000080, #1084d0);
    color:#fff; writing-mode:vertical-rl; text-orientation:mixed;
    transform:rotate(180deg); padding:10px 5px; font-size:1.5rem;
    font-weight:bold; letter-spacing:3px;
}
.start-menu-items { flex-grow:1; padding:3px 0; }
.sm-item {
    padding:6px 20px 6px 10px; font-size:1.3rem; cursor:pointer;
    display:flex; align-items:center; gap:8px;
}
.sm-item:hover { background:var(--os-blue); color:#fff; }
.sm-sep { border-top:1px solid #808080; border-bottom:1px solid #fff; margin:3px 5px; }
.sm-icon { font-size:18px; width:22px; text-align:center; }

/* ===== CONTEXT MENU ===== */
.context-menu {
    position:fixed; z-index:9500;
    background:var(--os-gray); border:2px solid; border-color:#fff #000 #000 #fff;
    min-width:180px; padding:3px 0; box-shadow:3px 3px 8px rgba(0,0,0,0.4);
}
.ctx-item {
    padding:5px 20px; font-size:1.2rem; cursor:pointer;
    display:flex; align-items:center; gap:6px;
}
.ctx-item:hover { background:var(--os-blue); color:#fff; }
.ctx-sep { border-top:1px solid #808080; border-bottom:1px solid #fff; margin:2px 5px; }

/* About modal */
.about-overlay {
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    background:rgba(0,0,0,0.3);z-index:8000;
    display:flex;align-items:center;justify-content:center;
}
.about-box {
    background:var(--os-gray);border:2px solid;border-color:#fff #000 #000 #fff;
    width:350px;box-shadow:4px 4px 15px rgba(0,0,0,0.5);
}
.about-title { background:linear-gradient(90deg,#000080,#1084d0);color:#fff;padding:4px 8px;font-size:1.2rem; }
.about-body { padding:15px;text-align:center;font-size:1.3rem; }
.about-body h3 { margin:0 0 5px; }
.about-body p { margin:5px 0; }
.about-ok {
    display:block;margin:15px auto 0;padding:5px 30px;font-family:inherit;font-size:1.2rem;
    background:var(--os-gray);border:2px solid;border-color:#fff #000 #000 #fff;cursor:pointer;
}
.about-ok:active { border-color:#000 #fff #fff #000; }