/* ══════════════════════════════════════════════════════════════ WIN95 THEME — RemindMe Toggle by adding class="win95" to ══════════════════════════════════════════════════════════════ */ /* Google Font — VT323 for that CRT terminal feel */ @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); html.win95, html.win95 * { box-sizing: border-box; } /* ══════════════════════════════════════════════════════════════ WIN95 DESKTOP LAYOUT — hide normal app, show desktop + windows ══════════════════════════════════════════════════════════════ */ /* Hide the whole normal app layout in win95 mode */ html.win95 .header { display: none !important; } html.win95 .mc-bar { display: none !important; } html.win95 .page { display: none !important; } html.win95 .mc-results { display: none !important; } html.win95 .desktop-layout { display: none !important; } html.win95 .desktop-layout * { display: none !important; } html.win95 .left-sidebar { display: none !important; } html.win95 .sidebar-nav { display: none !important; } html.win95 .content-area { display: none !important; } html.win95 #homeScreen { display: none !important; } html.win95 .header-search { display: none !important; } html.win95 #demoBanner { display: none !important; } html.win95 .add-fab { display: none !important; } /* Desktop fills the whole viewport above the taskbar */ .w95-desktop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 36px; /* taskbar height */ overflow: hidden; z-index: 1; } html.win95 .w95-desktop { display: block; } /* ── UPCOMING REMINDERS WIDGET (desktop only, top-right) ── */ .w95-widget { display: none; position: absolute; top: 14px; right: 14px; width: 200px; background: #c0c0c0; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; z-index: 2; font-family: 'VT323', monospace; } html.win95 .w95-widget { display: block; } @media (max-width: 768px) { html.win95 .w95-widget { display: none !important; } } .w95-widget-title { background: linear-gradient(90deg, #000080 0%, #1084d0 100%); color: #fff; font-size: 13px; padding: 3px 6px; font-weight: bold; } .w95-widget-body { padding: 4px 4px 4px; max-height: 200px; overflow-y: auto; } .w95-widget-empty { font-size: 13px; color: #555; padding: 6px 4px; text-align: center; } .w95-widget-item { display: flex; align-items: flex-start; gap: 5px; padding: 3px 4px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #d0d0d0; } .w95-widget-item:hover { background: #000080; color: #fff; } .w95-widget-item:hover div { color: #ccc !important; } .w95-widget-item:last-child { border-bottom: none; } /* Left column of desktop icons */ .w95-desktop-icons { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 16px; z-index: 2; max-height: calc(100% - 16px); overflow: visible; } /* Desktop icon */ .w95-dicon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 6px 4px; cursor: pointer; border: 1px solid transparent; text-align: center; flex-shrink: 0; } .w95-dicon:hover { border-color: rgba(255,255,255,0.6); background: rgba(0,0,128,0.35); } .w95-dicon-img { font-size: 36px; line-height: 1; pointer-events: none; } .w95-dicon-lbl { font-family: 'VT323', monospace; font-size: 13px; color: #fff; text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0 0 6px #000; line-height: 1.2; word-break: break-word; max-width: 74px; pointer-events: none; } .w95-pix-icon { width: 36px; height: 36px; display: inline-block; position: relative; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.42)); } .w95-pix-folder::before { content: ''; position: absolute; left: 3px; top: 11px; width: 31px; height: 20px; background: linear-gradient(135deg,#fff8aa 0 18%,#f2df61 19% 62%,#b69b28 100%); border: 1px solid #5e5016; border-right-color: #3a3008; border-bottom-color: #3a3008; transform: skewX(-7deg); box-shadow: inset 2px 2px #fff6ba, inset -2px -2px #8f7615; } .w95-pix-folder::after { content: ''; position: absolute; left: 6px; top: 7px; width: 14px; height: 7px; background: linear-gradient(#fff8aa,#ead655); border: 1px solid #5e5016; border-bottom: none; transform: skewX(-7deg); } .w95-pix-add::before { content: ''; position: absolute; left: 7px; top: 7px; width: 24px; height: 24px; background: linear-gradient(135deg,#fff,#c8c8c8 65%,#777); border: 1px solid #303030; box-shadow: inset 2px 2px #fff, inset -2px -2px #888; } .w95-pix-add::after { content: '+'; position: absolute; left: 10px; top: -1px; font: bold 32px Arial, sans-serif; color: #008000; text-shadow: 1px 1px #bfffbf, -1px 0 #005000; } .w95-pix-calendar::before { content: '17'; position: absolute; left: 6px; top: 5px; width: 25px; height: 28px; background: linear-gradient(#d43c3c 0 7px,#f8f8f8 8px 100%); border: 1px solid #444; border-right-color: #111; border-bottom-color: #111; color: #000; font: bold 13px Arial, sans-serif; text-align: center; line-height: 28px; box-shadow: inset 1px 1px #fff, inset -2px -2px #bbb, 2px 2px 0 #8a8a8a; } .w95-pix-earthcal::before { content: ''; position: absolute; left: 3px; top: 3px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#21a65b 0 16%,transparent 17% 30%,#32c26a 31% 48%,transparent 49% 60%,#18824a 61% 74%,transparent 75%), radial-gradient(circle at 50% 50%,#45c9ff 0 52%,#064b91 78%,#021f48 100%); border: 1px solid #001848; box-shadow: inset 2px 2px #bdf4ff, inset -4px -4px #04234c, 2px 2px 0 #5d5d5d; } .w95-pix-earthcal::after { content: '17'; position: absolute; right: 1px; bottom: 2px; width: 15px; height: 14px; background: linear-gradient(#d43c3c 0 4px,#fff 5px 100%); border: 1px solid #333; color: #000; font: bold 8px Arial, sans-serif; line-height: 15px; text-align: center; } .w95-pix-bell::before { content: ''; position: absolute; left: 10px; top: 8px; width: 17px; height: 19px; background: radial-gradient(circle at 35% 28%,#fff6a0 0 18%,#ffd321 19% 58%,#9f7b00 100%); border: 1px solid #5b4500; border-radius: 10px 10px 3px 3px; box-shadow: inset 2px 2px #fff7a3, inset -2px -2px #936f00, 2px 2px 0 #5d5d5d; } .w95-pix-bell::after { content: ''; position: absolute; left: 11px; top: 25px; width: 17px; height: 4px; background: #7d6200; border-radius: 0 0 8px 8px; box-shadow: 7px 4px 0 -2px #3f3300, 6px -20px 0 -1px #5b4500; } .w95-pix-check::before { content: ''; position: absolute; left: 8px; top: 8px; width: 23px; height: 23px; background: linear-gradient(135deg,#6bff6b,#16b216 62%,#067006); border: 1px solid #064806; box-shadow: inset 2px 2px #aaffaa, inset -2px -2px #0b690b, 2px 2px 0 #555; } .w95-pix-check::after { content: ''; position: absolute; left: 13px; top: 14px; width: 14px; height: 8px; border-left: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(-45deg); filter: drop-shadow(1px 1px 0 #075507); } .w95-pix-chat::before { content: ''; position: absolute; left: 5px; top: 8px; width: 26px; height: 19px; background: linear-gradient(135deg,#fff,#e8e8e8 65%,#bdbdbd); border: 1px solid #777; border-radius: 9px; box-shadow: inset 2px 2px #fff, inset -2px -2px #c0c0c0, 2px 2px 0 #777; } .w95-pix-chat::after { content: ''; position: absolute; left: 11px; top: 17px; width: 3px; height: 3px; background: #777; box-shadow: 7px 0 #777, 14px 0 #777, -3px 10px 0 1px #f5f5f5, -4px 10px 0 2px #777; } .w95-pix-duke::before { content: ''; position: absolute; left: 2px; top: 6px; width: 32px; height: 22px; background-image: url('/duke_nukem11.webp'); background-size: 82px 48px; background-position: 50% 18%; border: 1px solid #111; box-shadow: inset 1px 1px rgba(255,255,255,.75), inset -1px -1px rgba(0,0,0,.65), 2px 2px 0 #555; } .w95-pix-duke::after { content: ''; position: absolute; left: 8px; top: 29px; width: 20px; height: 3px; background: #c0c0c0; border: 1px solid #555; box-shadow: inset 1px 1px #fff, inset -1px -1px #777; } .w95-pix-pong::before { content: ''; position: absolute; left: 4px; top: 8px; width: 29px; height: 21px; background: #050505; border: 2px solid #efefef; box-shadow: inset 13px 0 0 -11px #fff, inset -13px 0 0 -11px #fff, 2px 2px 0 #555; } .w95-pix-pong::after { content: ''; position: absolute; left: 17px; top: 17px; width: 4px; height: 4px; background: #fff; } .w95-pix-checkers::before { content: ''; position: absolute; left: 5px; top: 6px; width: 28px; height: 28px; background: linear-gradient(45deg, #111 25%, transparent 25% 75%, #111 75%), linear-gradient(45deg, #111 25%, #e6d4a3 25% 75%, #111 75%); background-color: #e6d4a3; background-position: 0 0, 7px 7px; background-size: 14px 14px; border: 1px solid #222; box-shadow: inset 1px 1px #fff, inset -1px -1px #777, 2px 2px 0 #555; } .w95-pix-checkers::after { content: ''; position: absolute; left: 11px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #b00000; box-shadow: 9px 9px 0 #111, 2px 2px 0 rgba(255,255,255,.45), 11px 11px 0 rgba(255,255,255,.2); } .w95-pix-mine::before { content: ''; position: absolute; left: 7px; top: 13px; width: 22px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 31% 28%, #fff 0 6%, transparent 7%), radial-gradient(circle at 45% 42%, #9a9a9a 0 18%, #555 19% 52%, #151515 53% 100%); border: 1px solid #050505; box-shadow: -5px -6px 0 -3px #151515, 5px -6px 0 -3px #151515, -6px 2px 0 -3px #151515, 6px 2px 0 -3px #151515, -4px 8px 0 -3px #151515, 4px 8px 0 -3px #151515, inset 2px 2px #cfcfcf, inset -2px -2px #000, 2px 2px 0 #777; } .w95-pix-mine::after { content: ''; position: absolute; left: 19px; top: 6px; width: 11px; height: 8px; border-top: 2px solid #222; border-right: 2px solid #222; border-radius: 0 8px 0 0; box-shadow: 7px -3px 0 -2px #ffdf39, 9px -5px 0 -3px #ff4040, 11px -2px 0 -3px #fff; transform: rotate(-18deg); } .w95-pix-calc::before { content: ''; position: absolute; left: 7px; top: 4px; width: 22px; height: 29px; background: linear-gradient(135deg,#d8f4f0,#2db6aa 70%,#0b645f); border: 1px solid #10423f; box-shadow: inset 2px 2px #eaffff, inset -2px -2px #08716a, 2px 2px 0 #555; } .w95-pix-calc::after { content: ''; position: absolute; left: 11px; top: 9px; width: 14px; height: 4px; background: #edf9dc; box-shadow: 0 8px #fff, 6px 8px #fff, 12px 8px #fff, 0 14px #fff, 6px 14px #fff, 12px 14px #fff; } .w95-pix-note::before { content: ''; position: absolute; left: 8px; top: 4px; width: 22px; height: 29px; background: repeating-linear-gradient(#fff 0 5px,#c8d8ff 5px 6px); border: 1px solid #555; transform: rotate(-2deg); box-shadow: inset 2px 2px #fff, inset -2px -2px #d3d3d3, 2px 2px 0 #777; } .w95-pix-note::after { content: ''; position: absolute; left: 17px; top: 17px; width: 18px; height: 5px; background: linear-gradient(90deg,#fff199,#f4c542 70%,#8f5a00); border: 1px solid #7a4a00; transform: rotate(-35deg); } .w95-pix-disk::before { content: ''; position: absolute; left: 6px; top: 5px; width: 25px; height: 26px; background: linear-gradient(135deg,#6da0d8,#245a9a 55%,#102040); border: 1px solid #1b3150; box-shadow: inset 2px 2px #9cc5f0, inset -2px -2px #102040, 2px 2px 0 #555; } .w95-pix-disk::after { content: ''; position: absolute; left: 10px; top: 7px; width: 14px; height: 8px; background: #c0c0c0; box-shadow: 0 16px 0 2px #fff; } .w95-pix-computer::before { content: ''; position: absolute; left: 6px; top: 5px; width: 24px; height: 20px; background: linear-gradient(135deg,#f4f4f4,#bdbdbd 65%,#777); border: 1px solid #555; box-shadow: inset 2px 2px #fff, inset -2px -2px #888, 2px 2px 0 #555; } .w95-pix-computer::after { content: ''; position: absolute; left: 11px; top: 10px; width: 14px; height: 9px; background: radial-gradient(circle at 45% 50%,#b8ffec 0 3px,#2b7fd0 4px 100%); border: 1px solid #1d3760; box-shadow: -2px 18px 0 2px #d7d7d7, -5px 21px 0 1px #777, 10px 17px 0 -1px #444; } .w95-pix-space::before { content: ''; position: absolute; inset: 4px; background: radial-gradient(circle at 60% 40%,#fff 0 2px,transparent 3px), radial-gradient(circle at 35% 65%,#9cf 0 2px,transparent 3px), radial-gradient(circle at 50% 50%,#402090,#080018); border: 2px solid #111; } .w95-pix-lang::before { content: 'A'; position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; background: #e8e8e8; border: 2px solid #555; color: #003399; font: bold 18px Arial, sans-serif; line-height: 24px; text-align: center; box-shadow: inset 2px 2px #fff, inset -2px -2px #aaa; } .w95-pix-lang::after { content: ''; position: absolute; left: 22px; top: 20px; width: 8px; height: 8px; border-right: 2px solid #008000; border-bottom: 2px solid #008000; transform: rotate(-45deg); } .w95-pix-lock::before { content: ''; position: absolute; left: 9px; top: 15px; width: 20px; height: 16px; background: #d5c76d; border: 2px solid #5f5720; box-shadow: inset 2px 2px #fff3a3, inset -2px -2px #8f802b; } .w95-pix-lock::after { content: ''; position: absolute; left: 13px; top: 6px; width: 12px; height: 13px; border: 3px solid #777; border-bottom: none; border-radius: 8px 8px 0 0; } .w95-pix-power::before { content: ''; position: absolute; left: 11px; top: 10px; width: 15px; height: 15px; border: 3px solid #333; border-top-color: transparent; border-radius: 50%; } .w95-pix-power::after { content: ''; position: absolute; left: 17px; top: 6px; width: 3px; height: 14px; background: #333; } .w95-title-pix { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; } .w95-title-pong { background:#000; border:1px solid #fff; box-shadow: inset 3px 0 #fff, inset -3px 0 #fff; } /* ══════════════════════════════════════════════════════════════ WIN95 WINDOWS ══════════════════════════════════════════════════════════════ */ .w95-win { display: none; position: fixed; min-width: 320px; min-height: 180px; max-height: calc(100vh - 60px); background: #c0c0c0; box-shadow: inset -1px -1px #404040, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf, 3px 3px 0 rgba(0,0,0,0.35); flex-direction: column; z-index: 5000; /* default positions — staggered so multiple windows look natural */ } html.win95 .w95-win.w95-open { display: flex; } html.win95 .w95-win.w95-maximized { top: 0 !important; left: 0 !important; width: 100vw !important; height: calc(100vh - 36px) !important; max-height: calc(100vh - 36px) !important; } .w95-resizable { min-width: 320px; min-height: 180px; } #w95win-pong.w95-resizable { min-height: 250px; } .w95-resize-grip { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; cursor: nwse-resize; z-index: 3; } .w95-resize-grip::before, .w95-resize-grip::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 8px; height: 8px; border-right: 1px solid #808080; border-bottom: 1px solid #808080; box-shadow: 1px 1px #fff; } .w95-resize-grip::after { right: 5px; bottom: 5px; width: 4px; height: 4px; } html.win95 .w95-win.w95-maximized .w95-resize-grip { display: none; } /* Title bar */ .w95-win-titlebar { background: linear-gradient(90deg, #000080 0%, #1084d0 100%); color: #fff; display: flex; align-items: center; padding: 3px 4px 3px 6px; gap: 5px; cursor: move; flex-shrink: 0; user-select: none; -webkit-user-select: none; } .w95-win-icon { font-size: 15px; flex-shrink: 0; } .w95-win-title { flex: 1; font-family: 'VT323', monospace; font-size: 16px; font-weight: bold; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Title bar buttons */ .w95-win-btns { display: flex; gap: 2px; flex-shrink: 0; } .w95-wbtn { width: 18px; height: 16px; background: #c0c0c0; border: none; box-shadow: inset -1px -1px #404040, inset 1px 1px #ffffff; font-size: 11px; font-family: 'VT323', monospace; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: #000; flex-shrink: 0; line-height: 1; } .w95-wbtn:active { box-shadow: inset 1px 1px #404040, inset -1px -1px #ffffff; } .w95-wbtn-save { width: 26px; font-size: 13px; margin-right: 4px; } /* Toolbar below title bar */ .w95-win-toolbar { background: #c0c0c0; border-bottom: 1px solid #808080; padding: 3px 5px; display: flex; gap: 4px; align-items: center; flex-shrink: 0; flex-wrap: wrap; } .w95-toolbar-btn { font-family: 'VT323', monospace; font-size: 14px; background: #c0c0c0; color: #000; border: none; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0; padding: 2px 10px; cursor: pointer; white-space: nowrap; } .w95-toolbar-btn:active { box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #404040, inset -2px -2px #c0c0c0; } .w95-pong-wrap { background: #c0c0c0; padding: 6px; font-family: 'VT323', monospace; flex: 1; min-height: 0; display: flex; flex-direction: column; } .w95-pong-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; color: #000; flex-shrink: 0; flex-wrap: wrap; } .w95-pong-diff { margin-left: auto; display: flex; gap: 2px; } .w95-pong-diff-btn.active { background: #d8d8d8; box-shadow: inset 1px 1px #404040, inset -1px -1px #fff; } .w95-pong-stage { flex: 1; min-height: 150px; background: #000; box-shadow: inset 1px 1px #404040, inset -1px -1px #ffffff, inset 2px 2px #000, inset -2px -2px #808080; overflow: hidden; } #pongCanvas { width: 100%; height: 100%; display: block; background: #000; image-rendering: pixelated; } .w95-todo-input { flex: 1; font-family: 'VT323', monospace; font-size: 15px; background: #fff; color: #000; border: none; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; padding: 2px 6px; min-width: 100px; } /* Scrollable content area */ .w95-win-content { flex: 1; overflow-y: auto; background: #fff; padding: 0; min-height: 80px; /* Win95 inset border */ box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #404040, inset -2px -2px #dfdfdf; margin: 4px; } /* Folder window icons */ .w95-folder-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px; padding: 6px 4px; cursor: pointer; border: 1px solid transparent; text-align: center; border-radius: 0; } .w95-folder-icon:hover { background: #000080; border-color: #000080; } .w95-folder-icon:hover .w95-fi-lbl { color: #fff; } .w95-fi-img { font-size: 32px; line-height: 1; pointer-events: none; } .w95-fi-lbl { font-family: 'VT323', monospace; font-size: 13px; color: #000; line-height: 1.2; word-break: break-word; pointer-events: none; } /* ── CSS ART SETTINGS ICON — DESKTOP ── */ .w95-settings-icon { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; } /* monitor body / bezel */ .w95-settings-screen { width: 38px; height: 28px; background: #000; box-shadow: inset -1px -1px #404040, inset 1px 1px #dfdfdf, inset -3px -3px #808080, inset 3px 3px #c0c0c0; padding: 4px 5px 7px; border-radius: 2px 2px 0 0; position: relative; } /* the 4-color Windows flag grid */ .w95-settings-flag { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: #111; box-shadow: inset 1px 1px #000; } .w95-settings-flag > div { display: block; } .w95-settings-neck { width: 12px; height: 5px; background: #a8a8a8; } .w95-settings-base { width: 26px; height: 5px; background: #b0b0b0; box-shadow: inset 1px 1px #d0d0d0, inset -1px -1px #707070; border-radius: 0 0 2px 2px; } /* ── DISPLAY PROPERTIES DIALOG ── */ .w95-dp-tabs { background: #c0c0c0; padding: 5px 6px 0; display: flex; gap: 2px; border-bottom: 2px solid #808080; flex-shrink: 0; } .w95-dp-tab { font-family: 'VT323', monospace; font-size: 13px; padding: 3px 10px; cursor: pointer; background: #c0c0c0; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #808080; color: #444; white-space: nowrap; } .w95-dp-tab-active { color: #000; font-weight: bold; background: #c0c0c0; border-bottom: 2px solid #c0c0c0; margin-bottom: -2px; padding-top: 4px; } .w95-dp-body { flex: 1; background: #c0c0c0; padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-height: 0; } /* Monitor preview in dialog */ .w95-dp-preview-wrap { display: flex; justify-content: center; flex-shrink: 0; } .w95-dp-monitor { display: flex; flex-direction: column; align-items: center; } .w95-dp-monitor-body { width: 200px; height: 138px; background: #a0a0a0; box-shadow: inset -3px -3px #404040, inset 3px 3px #e0e0e0, inset -6px -6px #808080, inset 6px 6px #c8c8c8; padding: 8px 10px 16px; border-radius: 4px 4px 2px 2px; position: relative; } .w95-dp-screen { width: 100%; height: 100%; background: #008080; box-shadow: inset 2px 2px #000, inset -1px -1px #666; position: relative; overflow: hidden; transition: background 0.25s; } .w95-dp-mini-taskbar { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: #c0c0c0; box-shadow: inset 0 1px #dfdfdf; } .w95-dp-mini-icons { position: absolute; top: 4px; left: 4px; display: flex; flex-direction: column; gap: 4px; } .w95-dp-mini-icon { width: 8px; height: 8px; background: rgba(255,255,255,0.7); box-shadow: 1px 1px rgba(0,0,0,0.4); } .w95-dp-monitor-neck { width: 30px; height: 10px; background: #909090; } .w95-dp-monitor-base { width: 70px; height: 8px; background: #a0a0a0; box-shadow: inset 1px 1px #c0c0c0, inset -1px -1px #707070; border-radius: 0 0 3px 3px; } /* Wallpaper section */ .w95-dp-section { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; } .w95-dp-label { font-family: 'VT323', monospace; font-size: 13px; font-weight: bold; color: #000; margin-bottom: 2px; } .w95-dp-row { flex: 1; display: flex; gap: 6px; min-height: 0; } .w95-dp-list { flex: 1; background: #fff; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #404040; overflow-y: auto; min-height: 0; } .w95-dp-list-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .w95-dp-side-btn { width: 72px !important; white-space: nowrap; } .w95-dp-display-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 2px; } .w95-dp-select { font-family: 'VT323', monospace; font-size: 13px; background: #fff; border: none; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #404040; padding: 1px 4px; color: #000; width: 110px; } .w95-dp-footer { background: #c0c0c0; padding: 6px 10px 8px; display: flex; justify-content: flex-end; gap: 6px; flex-shrink: 0; border-top: 1px solid #808080; } /* Wallpaper list items */ .w95-wp-item { display: flex; align-items: center; gap: 8px; padding: 3px 8px; font-family: 'VT323', monospace; font-size: 14px; cursor: pointer; color: #000; white-space: nowrap; } .w95-wp-item.w95-wp-sel, .w95-wp-item.w95-wp-hover { background: #000080; color: #fff; } .w95-wp-dot { width: 16px; height: 16px; border: 1.5px solid #808080; flex-shrink: 0; } /* ── CALCULATOR ── */ .calc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 3px; } .calc-btn { font-family: 'VT323', monospace; font-size: 15px; background: #c0c0c0; border: none; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; cursor: pointer; padding: 3px 2px; min-height: 26px; line-height: 1; color: #000; } .calc-btn:active { box-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; } .calc-fn { color: #000080; } .calc-op { color: #880000; font-weight: bold; } .calc-eq { color: #000080; font-weight: bold; } /* ── MINESWEEPER ── */ .w95-msw-grid-wrap { flex: 1; min-height: 120px; padding: 4px 8px 8px; overflow: auto; display: flex; align-items: center; justify-content: center; } /* ── CHECKERS ── */ .w95-checkers-wrap { background: #c0c0c0; padding: 8px; display: flex; flex: 1; min-height: 300px; align-items: center; justify-content: center; } .w95-checkers-board { --chk-cell: 36px; width: calc(var(--chk-cell) * 8); height: calc(var(--chk-cell) * 8); display: grid; grid-template-columns: repeat(8, var(--chk-cell)); grid-template-rows: repeat(8, var(--chk-cell)); box-shadow: inset 1px 1px #404040, inset -1px -1px #fff, 2px 2px 0 #777; border: 2px solid #808080; } .chk-square { width: var(--chk-cell); height: var(--chk-cell); border: 0; padding: 0; position: relative; cursor: pointer; } .chk-light { background: #d8c7a3; } .chk-dark { background: #5b3a24; } .chk-square.chk-selected { outline: 3px solid #ffff00; outline-offset: -3px; } .chk-square.chk-move::after { content: ''; position: absolute; inset: calc(var(--chk-cell) * .33); border-radius: 50%; background: rgba(255,255,0,.7); } .chk-piece { position: absolute; left: calc(var(--chk-cell) * .14); top: calc(var(--chk-cell) * .14); width: calc(var(--chk-cell) * .72); height: calc(var(--chk-cell) * .72); border-radius: 50%; box-shadow: inset 2px 2px rgba(255,255,255,.45), inset -2px -2px rgba(0,0,0,.55), 1px 2px 0 rgba(0,0,0,.45); } .chk-red { background: #b00000; } .chk-black { background: #111; } .chk-piece.king::after { content: 'K'; position: absolute; inset: 0; color: #ffd700; font: bold calc(var(--chk-cell) * .47) 'VT323', monospace; display: flex; align-items: center; justify-content: center; text-shadow: 1px 1px #000; } /* Status bar */ .w95-win-statusbar { background: #c0c0c0; border-top: 1px solid #808080; padding: 2px 8px; font-family: 'VT323', monospace; font-size: 13px; color: #000; flex-shrink: 0; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; margin: 0 4px 4px; } /* ── WINDOW LIST ITEMS ── */ .w95-list-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #dfdfdf; cursor: pointer; font-family: 'VT323', monospace; font-size: 15px; color: #000; } .w95-list-item:hover { background: #000080; color: #fff; } .w95-list-item:hover .w95-item-meta { color: #ccc; } .w95-list-item:hover .w95-item-badge { background: rgba(255,255,255,0.2) !important; color: #fff !important; } .w95-list-item.w95-done { opacity: 0.5; } .w95-list-item.w95-overdue { background: #fff0f0; } .w95-list-item.w95-overdue:hover { background: #800000; color: #fff; } .w95-item-check { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; } .w95-item-body { flex: 1; min-width: 0; } .w95-item-title { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w95-item-meta { font-size: 12px; color: #555; margin-top: 1px; } .w95-item-badge { font-size: 12px; padding: 1px 6px; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff; background: #c0c0c0; color: #000; white-space: nowrap; flex-shrink: 0; } .w95-item-badge.overdue { background: #800000; color: #fff; box-shadow: none; } .w95-win-empty { padding: 24px; text-align: center; font-family: 'VT323', monospace; font-size: 16px; color: #808080; } /* Notes in window */ .w95-note-group { border-bottom: 1px solid #dfdfdf; } .w95-note-header { background: #000080; color: #fff; padding: 4px 10px; font-family: 'VT323', monospace; font-size: 15px; display: flex; align-items: center; gap: 8px; cursor: pointer; } .w95-note-header:hover { background: #0000a0; } .w95-note-entry { padding: 5px 20px; border-bottom: 1px solid #dfdfdf; font-family: 'VT323', monospace; font-size: 14px; color: #000; } .w95-note-entry:hover { background: #000080; color: #fff; } /* Taskbar window buttons — update to show open windows */ html.win95 .w95-task-btn.active-window { box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #404040, inset -2px -2px #c0c0c0; } /* ── VARIABLES ── */ html.win95 { --w95-bg: #008080; /* teal desktop */ --w95-face: #c0c0c0; /* button face gray */ --w95-dark: #808080; /* shadow edge */ --w95-darker: #404040; --w95-white: #ffffff; --w95-black: #000000; --w95-titlebar: #000080; /* classic navy */ --w95-titletext: #ffffff; --w95-text: #000000; --w95-text2: #444444; --w95-accent: #000080; --w95-danger: #800000; --w95-success: #008000; --w95-border-out: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-white), inset -2px -2px var(--w95-darker), inset 2px 2px var(--w95-face); --w95-border-in: inset 1px 1px var(--w95-dark), inset -1px -1px var(--w95-white), inset 2px 2px var(--w95-darker), inset -2px -2px var(--w95-face); --w95-window-border: inset -1px -1px var(--w95-darker), inset 1px 1px var(--w95-white); } /* ── GLOBAL RESET ── */ html.win95 body { font-family: 'VT323', 'Courier New', monospace !important; background: var(--w95-bg) !important; color: var(--w95-text) !important; font-size: 16px !important; } /* Hide the star canvas */ html.win95 #stars-canvas { display: none !important; } /* ── HEADER → TITLE BAR ── */ html.win95 .header { background: var(--w95-face) !important; border: none !important; border-bottom: 2px solid var(--w95-darker) !important; backdrop-filter: none !important; height: auto !important; padding: 4px 6px !important; gap: 6px !important; } /* ── RM LOGO → WIN95 ICON ── */ html.win95 .rm-logo { background: var(--w95-face) !important; border: none !important; box-shadow: var(--w95-border-out) !important; border-radius: 0 !important; width: 48px !important; height: 48px !important; } html.win95 .rm-logo::before { display: none !important; } html.win95 .rm-R { animation: none !important; text-shadow: none !important; color: var(--w95-titlebar) !important; font-family: 'VT323', monospace !important; font-size: 32px !important; } html.win95 .rm-M { animation: none !important; text-shadow: none !important; color: var(--w95-accent) !important; font-family: 'VT323', monospace !important; font-size: 18px !important; } /* ── TITLE → TITLE BAR GRADIENT ── */ html.win95 .header h1 { background: linear-gradient(90deg, var(--w95-titlebar) 0%, #1084d0 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; font-family: 'VT323', monospace !important; font-size: 24px !important; letter-spacing: 1px !important; } /* ── NAV TABS → WIN95 TABS ── */ html.win95 .nav-tabs { background: transparent !important; border-radius: 0 !important; padding: 0 !important; gap: 2px !important; } html.win95 .nav-tab { font-family: 'VT323', monospace !important; font-size: 15px !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; padding: 4px 14px !important; border: none !important; position: relative; top: 0; } html.win95 .nav-tab.active { background: var(--w95-face) !important; color: var(--w95-text) !important; box-shadow: var(--w95-border-in) !important; top: 1px; } html.win95 .nav-tab.notes-tab.active { color: var(--w95-text) !important; } html.win95 .nav-tab.sms-tab.active { color: var(--w95-text) !important; } /* ── HEADER RIGHT BUTTONS ── */ html.win95 .sync-btn, html.win95 .notif-btn, html.win95 .logout-btn { font-family: 'VT323', monospace !important; font-size: 15px !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; padding: 4px 10px !important; white-space: nowrap; } html.win95 .sync-btn:hover, html.win95 .notif-btn:hover, html.win95 .logout-btn:hover { background: var(--w95-face) !important; border-color: transparent !important; } html.win95 .sync-btn:active, html.win95 .notif-btn:active, html.win95 .logout-btn:active { box-shadow: var(--w95-border-in) !important; } html.win95 .notif-btn.granted { color: var(--w95-success) !important; background: var(--w95-face) !important; } html.win95 .notif-btn.default { color: var(--w95-danger) !important; background: var(--w95-face) !important; } /* ── CLOCK ── */ html.win95 .live-clock { background: var(--w95-face) !important; box-shadow: var(--w95-border-in) !important; padding: 3px 8px !important; } html.win95 .clock-time { font-family: 'VT323', monospace !important; font-size: 16px !important; color: var(--w95-text) !important; } html.win95 .clock-date { font-family: 'VT323', monospace !important; color: var(--w95-text2) !important; font-size: 11px !important; } /* ── WEATHER ── */ html.win95 .weather-widget { background: var(--w95-face) !important; border: none !important; box-shadow: var(--w95-border-in) !important; border-radius: 0 !important; font-family: 'VT323', monospace !important; } html.win95 .weather-temp { font-family: 'VT323', monospace !important; color: var(--w95-text) !important; } /* ── MISSION CONTROL BAR ── */ html.win95 .mc-bar { background: var(--w95-face) !important; backdrop-filter: none !important; border-bottom: 2px solid var(--w95-darker) !important; top: 68px !important; } html.win95 .mc-search-row { background: var(--w95-white) !important; border: none !important; box-shadow: var(--w95-border-in) !important; border-radius: 0 !important; } html.win95 .mc-search-input, html.win95 .mc-search-input::placeholder { font-family: 'VT323', monospace !important; font-size: 15px !important; color: var(--w95-text) !important; background: transparent !important; } html.win95 .mc-search-input::placeholder { color: var(--w95-text2) !important; } html.win95 .mc-cat { font-family: 'VT323', monospace !important; font-size: 14px !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; padding: 3px 10px !important; } html.win95 .mc-cat.active, html.win95 .mc-cat[data-cat="appointments"].active, html.win95 .mc-cat[data-cat="ideas"].active, html.win95 .mc-cat[data-cat="notes"].active { background: var(--w95-titlebar) !important; border: none !important; color: var(--w95-white) !important; box-shadow: var(--w95-border-in) !important; } /* ── PAGES ── */ html.win95 .page { background: transparent !important; } /* ── STAT CARDS → WIN95 WINDOWS ── */ html.win95 .stat-card { background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .stat-num { font-family: 'VT323', monospace !important; font-size: 28px !important; } html.win95 .stat-num.active { color: var(--w95-titlebar) !important; } html.win95 .stat-num.overdue { color: var(--w95-danger) !important; } html.win95 .stat-num.done { color: var(--w95-success) !important; } html.win95 .stat-label { font-family: 'VT323', monospace !important; font-size: 13px !important; color: var(--w95-text) !important; } /* ── CALENDAR CARD ── */ html.win95 .cal-card { background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; color: var(--w95-text) !important; } html.win95 .cal-card h3, html.win95 .cal-card p { color: var(--w95-text) !important; opacity: 1 !important; font-family: 'VT323', monospace !important; } html.win95 .cal-white-btn { background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; color: var(--w95-text) !important; font-family: 'VT323', monospace !important; } /* ── QUICK ADD ── */ html.win95 .quick-add { background: var(--w95-white) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-in) !important; } html.win95 .quick-input { font-family: 'VT323', monospace !important; font-size: 16px !important; color: var(--w95-text) !important; background: transparent !important; } html.win95 .quick-input::placeholder { color: var(--w95-text2) !important; } html.win95 .quick-add-btn { background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; font-family: 'VT323', monospace !important; font-size: 15px !important; } html.win95 .quick-add-btn:hover { background: var(--w95-face) !important; } html.win95 .quick-add-btn:active { box-shadow: var(--w95-border-in) !important; } html.win95 .mic-btn { background: var(--w95-face) !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .mic-btn.listening { background: var(--w95-danger) !important; animation: none !important; } /* ── SECTION HEADERS ── */ html.win95 .section-header, html.win95 .column-header { font-family: 'VT323', monospace !important; font-size: 15px !important; color: var(--w95-text) !important; background: var(--w95-titlebar) !important; color: var(--w95-white) !important; padding: 3px 8px !important; letter-spacing: 0.5px !important; border: none !important; text-transform: none !important; } /* ── FILTER TABS ── */ html.win95 .filter-tabs { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; gap: 2px !important; } html.win95 .filter-tab { font-family: 'VT323', monospace !important; font-size: 13px !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .filter-tab.active { background: var(--w95-titlebar) !important; color: var(--w95-white) !important; box-shadow: var(--w95-border-in) !important; } /* ── REMINDER CARDS → WIN95 WINDOWS ── */ html.win95 .reminder-card { background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .reminder-card:hover { box-shadow: var(--w95-border-out) !important; } html.win95 .reminder-card.overdue { background: var(--w95-face) !important; border: 2px solid var(--w95-danger) !important; box-shadow: none !important; } html.win95 .card-title { font-family: 'VT323', monospace !important; font-size: 17px !important; color: var(--w95-text) !important; } html.win95 .card-title.done { color: var(--w95-text2) !important; } html.win95 .card-notes-text { font-family: 'VT323', monospace !important; font-size: 14px !important; color: var(--w95-text2) !important; } /* ── CHECK BUTTON ── */ html.win95 .check-btn { border-radius: 0 !important; border: none !important; box-shadow: var(--w95-border-in) !important; background: var(--w95-white) !important; } html.win95 .check-btn.checked { background: var(--w95-face) !important; box-shadow: var(--w95-border-in) !important; color: var(--w95-success) !important; } /* ── BADGES ── */ html.win95 .badge { font-family: 'VT323', monospace !important; font-size: 13px !important; border-radius: 0 !important; } html.win95 .badge-time { background: var(--w95-face) !important; color: var(--w95-titlebar) !important; box-shadow: var(--w95-border-out) !important; } html.win95 .badge-overdue { background: var(--w95-danger) !important; color: var(--w95-white) !important; } html.win95 .badge-done { background: var(--w95-success) !important; color: var(--w95-white) !important; } html.win95 .badge-sms { background: var(--w95-face) !important; color: var(--w95-text) !important; box-shadow: var(--w95-border-out) !important; } html.win95 .badge-repeat { background: var(--w95-face) !important; color: var(--w95-text) !important; box-shadow: var(--w95-border-out) !important; } /* ── ACTION BUTTONS ── */ html.win95 .action-btn { font-family: 'VT323', monospace !important; font-size: 14px !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .action-btn:hover { background: var(--w95-face) !important; color: var(--w95-text) !important; } html.win95 .action-btn:active { box-shadow: var(--w95-border-in) !important; } html.win95 .action-btn.del { background: var(--w95-face) !important; color: var(--w95-danger) !important; box-shadow: var(--w95-border-out) !important; border: none !important; } html.win95 .action-btn.move { background: var(--w95-face) !important; color: var(--w95-titlebar) !important; box-shadow: var(--w95-border-out) !important; border: none !important; } /* ── DRAG HANDLE ── */ html.win95 .drag-handle { color: var(--w95-dark) !important; } /* ── NOTES / NOTEBOOKS ── */ html.win95 .note-group, html.win95 .notebook { background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .note-group.notebook { border: none !important; } html.win95 .note-group.notebook::before { display: none !important; } html.win95 .note-group-header, html.win95 .notebook-cover { background: var(--w95-titlebar) !important; border-bottom: 2px solid var(--w95-darker) !important; } html.win95 .note-group-subject, html.win95 .notebook-title { color: var(--w95-white) !important; font-family: 'VT323', monospace !important; font-size: 18px !important; } html.win95 .note-group-desc, html.win95 .notebook-subtitle { color: rgba(255,255,255,0.8) !important; font-family: 'VT323', monospace !important; } html.win95 .note-group-count, html.win95 .notebook-badge { background: var(--w95-white) !important; color: var(--w95-titlebar) !important; border-radius: 0 !important; font-family: 'VT323', monospace !important; } html.win95 .note-group-chevron, html.win95 .notebook-chevron { color: var(--w95-white) !important; } html.win95 .note-item { border-bottom-color: var(--w95-dark) !important; } html.win95 .note-item:hover { background: #d0d0d0 !important; } html.win95 .note-content { font-family: 'VT323', monospace !important; font-size: 16px !important; color: var(--w95-text) !important; } html.win95 .note-time { font-family: 'VT323', monospace !important; color: var(--w95-text2) !important; } html.win95 .note-action-btn, html.win95 .notebook-action { font-family: 'VT323', monospace !important; background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; color: var(--w95-text) !important; } html.win95 .note-action-btn:active, html.win95 .notebook-action:active { box-shadow: var(--w95-border-in) !important; } html.win95 .note-action-btn.del:hover, html.win95 .notebook-action.del:hover { color: var(--w95-danger) !important; background: var(--w95-face) !important; border: none !important; } html.win95 .notebook-line { border-bottom-color: var(--w95-dark) !important; font-family: 'VT323', monospace !important; } html.win95 .notebook-line:hover { background: #d0d0d0 !important; } html.win95 .notebook-line-body { color: var(--w95-text) !important; } html.win95 .notebook-line-time { color: var(--w95-text2) !important; font-family: 'VT323', monospace !important; } html.win95 .notebook-pages { border-top-color: var(--w95-dark) !important; } /* ── NOTES ADD BAR ── */ html.win95 .notes-add-bar input, html.win95 .notes-subject-input, html.win95 .notes-content-input { font-family: 'VT323', monospace !important; font-size: 16px !important; background: var(--w95-white) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-in) !important; } html.win95 .notes-add-btn { font-family: 'VT323', monospace !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .notes-add-btn:active { box-shadow: var(--w95-border-in) !important; } /* ── NOTES SEARCH BAR ── */ html.win95 .notes-search-bar { background: var(--w95-white) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-in) !important; } html.win95 .notes-search-bar input { font-family: 'VT323', monospace !important; font-size: 16px !important; color: var(--w95-text) !important; background: transparent !important; } /* ── SMS BUBBLES ── */ html.win95 .sms-bubble.out .sms-text { background: var(--w95-titlebar) !important; color: var(--w95-white) !important; border-radius: 0 !important; font-family: 'VT323', monospace !important; font-size: 15px !important; } html.win95 .sms-bubble.in .sms-text { background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-in) !important; font-family: 'VT323', monospace !important; font-size: 15px !important; } html.win95 .sms-meta { font-family: 'VT323', monospace !important; color: var(--w95-text2) !important; } /* ── FAB → WIN95 BUTTON ── */ html.win95 .add-fab { background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out), 0 4px 8px rgba(0,0,0,0.4) !important; font-size: 22px !important; } html.win95 .add-fab:hover { background: var(--w95-face) !important; transform: none !important; } html.win95 .add-fab:active { box-shadow: var(--w95-border-in) !important; } html.win95 .add-fab.notes-mode { background: var(--w95-face) !important; box-shadow: var(--w95-border-out) !important; } /* ── MODALS → WIN95 DIALOG BOXES ── */ html.win95 .modal-overlay { background: rgba(0,0,0,0.5) !important; backdrop-filter: none !important; } html.win95 .modal { background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; animation: none !important; } html.win95 .modal h2 { font-family: 'VT323', monospace !important; font-size: 18px !important; color: var(--w95-white) !important; background: var(--w95-titlebar) !important; margin: -24px -24px 16px !important; padding: 6px 10px !important; letter-spacing: 0.5px; } html.win95 .form-group label { font-family: 'VT323', monospace !important; font-size: 14px !important; color: var(--w95-text) !important; text-transform: none !important; } html.win95 .form-group input, html.win95 .form-group textarea, html.win95 .form-group select { font-family: 'VT323', monospace !important; font-size: 16px !important; background: var(--w95-white) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-in) !important; } html.win95 .btn { font-family: 'VT323', monospace !important; font-size: 16px !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .btn:active { box-shadow: var(--w95-border-in) !important; transform: none !important; } html.win95 .btn-primary { background: var(--w95-face) !important; color: var(--w95-titlebar) !important; font-weight: 700 !important; } html.win95 .btn-primary:hover { background: var(--w95-face) !important; } html.win95 .btn-secondary { background: var(--w95-face) !important; color: var(--w95-text) !important; } html.win95 .btn-danger { background: var(--w95-face) !important; color: var(--w95-danger) !important; border: none !important; } html.win95 .cal-url-box { background: var(--w95-white) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-in) !important; color: var(--w95-titlebar) !important; font-family: 'Courier New', monospace !important; } /* ── TOAST ── */ html.win95 .toast { background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; font-family: 'VT323', monospace !important; font-size: 16px !important; } /* ── CONTEXT MENU ── */ html.win95 .ctx-menu { background: var(--w95-face) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .ctx-item { font-family: 'VT323', monospace !important; font-size: 16px !important; color: var(--w95-text) !important; border-radius: 0 !important; } html.win95 .ctx-item:hover { background: var(--w95-titlebar) !important; color: var(--w95-white) !important; } html.win95 .ctx-item.ctx-danger { color: var(--w95-danger) !important; } html.win95 .ctx-item.ctx-danger:hover { background: var(--w95-danger) !important; color: var(--w95-white) !important; } html.win95 .ctx-divider { background: var(--w95-dark) !important; } /* ── EMPTY STATES ── */ html.win95 .empty { color: var(--w95-text2) !important; } html.win95 .empty-icon { filter: grayscale(1) !important; } /* ── SMART HINT ── */ html.win95 .smart-hint { font-family: 'VT323', monospace !important; color: var(--w95-titlebar) !important; font-size: 14px !important; } /* ── TODO INPUT ── */ html.win95 .todo-input { font-family: 'VT323', monospace !important; font-size: 16px !important; background: var(--w95-white) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-in) !important; } html.win95 .todo-add-btn { font-family: 'VT323', monospace !important; background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; } html.win95 .todo-add-btn:active { box-shadow: var(--w95-border-in) !important; } /* ── COL DIVIDER ── */ html.win95 .col-divider { background: var(--w95-dark) !important; } html.win95 .section-sep { background: var(--w95-dark) !important; } /* ── DEMO BANNER ── */ html.win95 #demoBanner { font-family: 'VT323', monospace !important; font-size: 16px !important; } /* ── WIN95 THEME TOGGLE BUTTON ── */ .win95-toggle { padding: 4px 10px; border-radius: 0; font-family: 'VT323', 'Courier New', monospace; font-size: 15px; cursor: pointer; white-space: nowrap; border: none; transition: none; } /* default (modern) mode styling */ .win95-toggle { background: rgba(30,45,69,0.8); color: #94a3b8; border: 1.5px solid #334155; border-radius: 9px; padding: 6px 10px; font-size: 13px; font-family: inherit; } /* win95 mode styling */ html.win95 .win95-toggle { background: var(--w95-face) !important; color: var(--w95-text) !important; border: none !important; border-radius: 0 !important; box-shadow: var(--w95-border-out) !important; font-family: 'VT323', monospace !important; font-size: 15px !important; } html.win95 .win95-toggle:active { box-shadow: var(--w95-border-in) !important; } /* ══════════════════════════════════════════════════════════════ WIN95 TASKBAR + START MENU ══════════════════════════════════════════════════════════════ */ /* Only show taskbar in win95 mode */ .w95-taskbar { display: none; } html.win95 .w95-taskbar { display: flex; } /* ── TASKBAR ── */ .w95-taskbar { position: fixed; bottom: 0; left: 0; right: 0; height: 36px; background: #c0c0c0; box-shadow: inset 0 2px 0 #ffffff, inset 0 -1px 0 #808080; z-index: 10000; align-items: center; padding: 2px 4px; gap: 4px; font-family: 'VT323', 'Courier New', monospace; user-select: none; } /* Hide the normal FAB when taskbar is active — taskbar takes over */ html.win95 .add-fab { display: none !important; } /* ── START BUTTON ── */ .w95-start-btn { display: flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; height: 28px; background: #c0c0c0; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0; border: none; cursor: pointer; font-family: 'VT323', monospace; font-size: 17px; font-weight: bold; color: #000; letter-spacing: 0.5px; flex-shrink: 0; } .w95-start-btn:active, .w95-start-btn.open { box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #404040, inset -2px -2px #c0c0c0; } .w95-start-logo { width: 20px; height: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; flex-shrink: 0; } .w95-start-logo span { display: block; border-radius: 1px; } .w95-start-logo span:nth-child(1) { background: #ff0000; } .w95-start-logo span:nth-child(2) { background: #00aa00; } .w95-start-logo span:nth-child(3) { background: #0000ff; } .w95-start-logo span:nth-child(4) { background: #ffaa00; } /* ── TASKBAR DIVIDER ── */ .w95-divider { width: 2px; height: 24px; background: #808080; box-shadow: 1px 0 0 #ffffff; flex-shrink: 0; margin: 0 2px; } /* ── TASKBAR RM LOGO ── */ .w95-rm-logo-tray { margin-left: auto; display: flex; align-items: center; justify-content: center; padding: 0 7px; height: 30px; width: 36px; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; cursor: pointer; margin-right: 3px; background: #c0c0c0; } .w95-rm-logo-tray:hover { box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0; } .w95-rm-logo-tray img { width: 22px; height: 22px; display: block; border-radius: 50%; } /* ── TASKBAR CLOCK ── */ .w95-tray { margin-left: 0; display: flex; align-items: center; gap: 8px; padding: 2px 8px; height: 26px; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; font-family: 'VT323', monospace; font-size: 15px; color: #000; white-space: nowrap; } /* ── ACTIVE WINDOW BUTTONS (taskbar middle) ── */ .w95-task-btn { display: flex; align-items: center; gap: 5px; padding: 2px 8px; height: 26px; background: #c0c0c0; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0; border: none; cursor: pointer; font-family: 'VT323', monospace; font-size: 15px; color: #000; min-width: 80px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .w95-task-btn.active-window { box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #404040, inset -2px -2px #c0c0c0; } /* ── START MENU ── */ .w95-start-menu { position: fixed; bottom: 36px; left: 0; width: 220px; background: #c0c0c0; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0, 4px 0 8px rgba(0,0,0,0.4); display: none; z-index: 10001; font-family: 'VT323', monospace; } .w95-start-menu.open { display: flex; flex-direction: column; } /* Sidebar stripe */ .w95-start-menu::before { content: 'RemindMe 95'; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(180deg, #000080 0%, #1084d0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: 'VT323', monospace; font-size: 14px; color: #c0c0c0; letter-spacing: 1px; font-weight: bold; } .w95-menu-items { margin-left: 24px; display: flex; flex-direction: column; } .w95-menu-sep { height: 1px; background: #808080; box-shadow: 0 1px 0 #ffffff; margin: 3px 4px; } /* ── MENU ITEMS ── */ .w95-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; cursor: pointer; font-size: 16px; color: #000; position: relative; white-space: nowrap; } .w95-menu-item:hover, .w95-menu-item.open { background: #000080; color: #ffffff; } .w95-menu-item-icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .w95-menu-rm-icon { width: 20px; height: 20px; border-radius: 50%; display: block; } .w95-menu-item-icon .w95-pix-icon, .w95-sub-icon .w95-pix-icon, .w95-sub-pix { width: 22px; height: 22px; transform: scale(.62); transform-origin: center; filter: none; } .w95-menu-item-label { flex: 1; } .w95-menu-item-arrow { font-size: 11px; opacity: 0.7; } /* ── SUBMENU (flies out to the right) ── */ .w95-submenu { position: fixed; background: #c0c0c0; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0, 4px 4px 8px rgba(0,0,0,0.4); display: none; z-index: 10002; font-family: 'VT323', monospace; min-width: 260px; max-width: 340px; max-height: 60vh; overflow-y: auto; } .w95-submenu.open { display: block; } .w95-submenu-title { background: #000080; color: #ffffff; font-size: 14px; padding: 4px 10px; letter-spacing: 0.5px; } .w95-sub-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 15px; color: #000; border-bottom: 1px solid rgba(0,0,0,0.06); } .w95-sub-item:hover { background: #000080; color: #fff; } .w95-sub-item:hover .w95-sub-meta { color: #ccc; } .w95-sub-icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding-top: 1px; } .w95-sub-body { flex: 1; min-width: 0; } .w95-sub-title { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w95-sub-meta { font-size: 12px; color: #555; margin-top: 1px; } .w95-sub-empty { padding: 12px; font-size: 14px; color: #666; text-align: center; } /* Extra bottom padding so taskbar doesn't cover content */ html.win95 .page { padding-bottom: 52px !important; } html.win95 .mc-results { padding-bottom: 52px !important; } /* ══════════════════════════════════════════════════════════════ WIN98 DESKTOP BACKGROUNDS ══════════════════════════════════════════════════════════════ */ html.win95.w98-bg-teal body { background: #008080 !important; } html.win95.w98-bg-clouds body { background: #4a90d9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Cellipse cx='50' cy='60' rx='45' ry='28' fill='white' opacity='.7'/%3E%3Cellipse cx='90' cy='50' rx='38' ry='22' fill='white' opacity='.8'/%3E%3Cellipse cx='140' cy='65' rx='50' ry='30' fill='white' opacity='.6'/%3E%3Cellipse cx='175' cy='55' rx='30' ry='18' fill='white' opacity='.75'/%3E%3C/svg%3E") repeat !important; } html.win95.w98-bg-hills body { background: linear-gradient(180deg,#87ceeb 0%,#87ceeb 55%,#5a9e3a 55%,#4a8c2a 100%) !important; } /* Hills override — rolling hills with sky depth */ html.win95.w98-bg-plaid body { background-color: #800000 !important; background-image: repeating-linear-gradient(0deg,transparent,transparent 14px,rgba(0,0,0,.15) 14px,rgba(0,0,0,.15) 15px),repeating-linear-gradient(90deg,transparent,transparent 14px,rgba(0,0,0,.15) 14px,rgba(0,0,0,.15) 15px) !important; } html.win95.w98-bg-bricks body { background-color: #b03020 !important; background-image: repeating-linear-gradient(0deg,transparent,transparent 13px,rgba(0,0,0,.4) 13px,rgba(0,0,0,.4) 14px), repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 1px,transparent 1px,transparent 32px) !important; } html.win95.w98-bg-space body { background: radial-gradient(ellipse at 20% 30%,#1a0040 0%,#000010 60%) !important; } html.win95.w98-bg-maze body { background-color: #000080 !important; background-image: repeating-linear-gradient(0deg,transparent,transparent 11px,rgba(255,255,255,.1) 11px,rgba(255,255,255,.1) 12px),repeating-linear-gradient(90deg,transparent,transparent 11px,rgba(255,255,255,.1) 11px,rgba(255,255,255,.1) 12px) !important; } html.win95.w98-bg-black body { background: #000000 !important; } html.win95.w98-bg-bliss body { background: linear-gradient(180deg,#2a6abb 0%,#4a9de0 20%,#7ec8f0 45%,#7ec8f0 52%,#6ecf3a 52%,#52b825 62%,#3a9018 78%,#2a7010 100%) !important; } html.win95.w98-bg-luna body { background: radial-gradient(ellipse at 24% 18%,rgba(255,255,255,.72) 0,rgba(255,255,255,.34) 18%,transparent 36%), radial-gradient(ellipse at 72% 80%,rgba(125,185,242,.55) 0,transparent 46%), linear-gradient(135deg,#073b7d 0%,#1767b2 44%,#7db9f2 100%) !important; } html.win95.w98-bg-azul body { background: radial-gradient(ellipse at 76% 18%,rgba(255,255,255,.78) 0,rgba(255,255,255,.35) 18%,transparent 30%), linear-gradient(180deg,#0c5aa6 0%,#1f8bd1 44%,#8fd6ff 72%,#d8f5ff 100%) !important; } html.win95.w98-bg-tulips body { background: radial-gradient(ellipse 64px 130px at 24% 66%,#e03a7a 0 30%,transparent 31%), radial-gradient(ellipse 70px 130px at 42% 68%,#f4c542 0 30%,transparent 31%), radial-gradient(ellipse 62px 120px at 61% 67%,#ef5b3f 0 30%,transparent 31%), radial-gradient(ellipse 68px 128px at 78% 69%,#f7d54a 0 30%,transparent 31%), linear-gradient(180deg,#3d85c6 0%,#9fd7ff 46%,#219653 47%,#176f3b 100%) !important; } html.win95.w98-bg-stonehenge body { background: linear-gradient(180deg,#4b287c 0%,#c65b73 30%,#f49b45 50%,#f4d06f 62%,#5f4430 63%,#1c1715 100%) !important; } html.win95.w98-bg-stucco body { background-color: #b8a898 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='rgba(0,0,0,.08)'/%3E%3Crect width='1' height='1' x='2' y='2' fill='rgba(255,255,255,.12)'/%3E%3C/svg%3E") !important; } html.win95.w98-bg-sandstone body { background-color: #c8a96e !important; background-image: repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 1px,transparent 0,transparent 50%),repeating-linear-gradient(-45deg,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 1px,transparent 0,transparent 50%); background-size: 8px 8px !important; } html.win95.w98-bg-forest body { background: linear-gradient(180deg,#1a3a0a 0%,#2d5c14 40%,#1a3a0a 100%) !important; } html.win95.w98-bg-leaves body { background-color: #8b4513 !important; background-image: radial-gradient(ellipse 60px 40px at 20% 30%, #d4821e 0%, transparent 70%), radial-gradient(ellipse 50px 35px at 70% 60%, #c0601a 0%, transparent 70%), radial-gradient(ellipse 70px 50px at 50% 80%, #a05010 0%, transparent 70%), linear-gradient(135deg,#8b4513,#c0601a,#d4821e,#8b4513) !important; } html.win95.w98-bg-denim body { background-color: #3a5f95 !important; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 6px), repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0,rgba(0,0,0,.1) 1px,transparent 1px,transparent 6px), linear-gradient(180deg,#4a6fa5,#3a5f95) !important; } html.win95.w98-bg-gold body { background-color: #c8a830 !important; background-image: repeating-linear-gradient(45deg,rgba(255,220,80,.3) 0,rgba(255,220,80,.3) 2px,transparent 2px,transparent 10px), repeating-linear-gradient(-45deg,rgba(160,120,0,.2) 0,rgba(160,120,0,.2) 2px,transparent 2px,transparent 10px), linear-gradient(135deg,#b89020,#f0d060,#c8a830) !important; } html.win95.w98-bg-rivets body { background-color: #888 !important; background-image: radial-gradient(circle 5px at 12px 12px, #ddd 0%, #aaa 40%, #777 100%), repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 1px,transparent 1px,transparent 24px), repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 1px,transparent 1px,transparent 24px) !important; background-size: 24px 24px, 24px 24px, 24px 24px !important; } html.win95.w98-bg-pipes body { background-color: #c0c0c0 !important; background-image: repeating-linear-gradient(0deg,rgba(128,128,128,.4) 0,rgba(128,128,128,.4) 2px,transparent 2px,transparent 22px), repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 2px,transparent 2px,transparent 22px) !important; } html.win95.w98-bg-bubbles body { background: radial-gradient(circle at 15% 20%,rgba(100,180,255,.25) 0,rgba(100,180,255,.25) 30px,transparent 30px), radial-gradient(circle at 70% 60%,rgba(180,100,255,.2) 0,rgba(180,100,255,.2) 50px,transparent 50px), radial-gradient(circle at 45% 80%,rgba(100,255,180,.2) 0,rgba(100,255,180,.2) 40px,transparent 40px), #001020 !important; } html.win95.w98-bg-duke body { background-color: #1a0800 !important; background-image: repeating-linear-gradient(0deg,rgba(255,120,0,.04) 0,rgba(255,120,0,.04) 1px,transparent 1px,transparent 4px), radial-gradient(ellipse at 50% 100%,rgba(255,80,0,.35) 0%,transparent 60%), radial-gradient(ellipse at 10% 50%,rgba(255,160,0,.15) 0%,transparent 40%), radial-gradient(ellipse at 90% 30%,rgba(200,50,0,.2) 0%,transparent 35%) !important; } /* ── BACKGROUND PICKER in Start menu ── */ .w95-bg-picker { position: fixed; bottom: 36px; left: 220px; background: #c0c0c0; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0, 4px 4px 8px rgba(0,0,0,0.4); display: none; z-index: 10002; font-family: 'VT323', monospace; width: 200px; } .w95-bg-picker.open { display: block; } .w95-bg-picker-title { background: #000080; color: #fff; font-size: 14px; padding: 4px 10px; } .w95-bg-swatch { display: flex; align-items: center; gap: 10px; padding: 6px 12px; cursor: pointer; font-size: 15px; color: #000; } .w95-bg-swatch:hover { background: #000080; color: #fff; } .w95-bg-dot { width: 18px; height: 18px; border: 2px solid #808080; flex-shrink: 0; } /* ── DESKTOP ICON (return to classic RemindMe) ── */ .w95-desktop-icon { display: none; position: fixed; top: 80px; left: 20px; z-index: 500; cursor: pointer; text-align: center; width: 72px; } html.win95 .w95-desktop-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; } .w95-desktop-icon-img { width: 48px; height: 48px; background: linear-gradient(135deg,#0a0f1e,#1a2235); border: 2px solid #3b82f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); } .w95-desktop-icon-label { font-family: 'VT323', monospace; font-size: 13px; color: #ffffff; text-shadow: 1px 1px 2px #000, -1px -1px 2px #000; text-align: center; line-height: 1.2; width: 72px; word-break: break-word; } html.win95 .w95-desktop-icon-img:hover { outline: 1px dotted #fff; background: rgba(59,130,246,0.3); } /* ── DUKE NUKEM DESKTOP ICON ── */ .w95-duke-icon { display: none; position: fixed; top: 160px; left: 20px; z-index: 500; cursor: pointer; text-align: center; width: 72px; } html.win95 .w95-duke-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; } .w95-duke-icon-img { width: 48px; height: 48px; background: linear-gradient(135deg, #8b0000, #cc4400); border: 2px solid #ff8800; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 0 8px rgba(255,100,0,.6), 0 2px 8px rgba(0,0,0,.5); } .w95-duke-icon-label { font-family: 'VT323', monospace; font-size: 13px; color: #ffcc00; text-shadow: 1px 1px 2px #000, -1px -1px 2px #000; text-align: center; line-height: 1.2; width: 72px; word-break: break-word; } html.win95 .w95-duke-icon-img:hover { outline: 1px dotted #ffcc00; background: linear-gradient(135deg, #aa2200, #ff6600); } /* ══════════════════════════════════════════════════════════════ SNAKE GAME WINDOW ══════════════════════════════════════════════════════════════ */ .snake-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 20000; align-items: center; justify-content: center; } .snake-overlay.open { display: flex; } .snake-window { background: #c0c0c0; box-shadow: inset -1px -1px #404040, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #c0c0c0, 6px 6px 0 rgba(0,0,0,.4); font-family: 'VT323', monospace; user-select: none; min-width: 340px; min-height: 500px; max-width: 95vw; max-height: 95vh; position: relative; display: flex; flex-direction: column; } .snake-titlebar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; display: flex; align-items: center; padding: 3px 4px 3px 8px; gap: 6px; font-size: 15px; font-weight: bold; letter-spacing: 0.3px; cursor: default; } .snake-titlebar-icon { font-size: 16px; } .snake-titlebar-title { flex: 1; } .snake-close-btn { width: 18px; height: 18px; background: #c0c0c0; border: none; box-shadow: inset -1px -1px #404040, inset 1px 1px #ffffff; cursor: pointer; font-size: 13px; font-family: 'VT323', monospace; display: flex; align-items: center; justify-content: center; color: #000; padding: 0; flex-shrink: 0; } .snake-close-btn:active { box-shadow: inset 1px 1px #404040, inset -1px -1px #ffffff; } .snake-body { padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: auto; } .snake-info { display: flex; justify-content: space-between; width: 300px; font-size: 16px; color: #000; padding: 4px 0; } #snakeCanvas { display: block; box-shadow: inset 1px 1px #404040, inset -1px -1px #ffffff; background: #000; image-rendering: pixelated; } .snake-controls { font-size: 13px; color: #444; text-align: center; line-height: 1.6; } /* Mobile D-pad tap zones */ .snake-dpad-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; } .snake-dpad-mid { display: flex; align-items: center; gap: 0; } .snake-dpad-up, .snake-dpad-down { width: 300px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; user-select: none; background: rgba(0,0,0,0.06); color: #555; display: none; /* hidden on desktop */ } .snake-dpad-left, .snake-dpad-right { width: 36px; height: 300px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; user-select: none; background: rgba(0,0,0,0.06); color: #555; display: none; /* hidden on desktop */ } .snake-dpad-up:active, .snake-dpad-down:active, .snake-dpad-left:active, .snake-dpad-right:active { background: rgba(0,0,128,0.2); } @media (max-width: 768px) { .snake-dpad-up, .snake-dpad-down, .snake-dpad-left, .snake-dpad-right { display: flex; } .snake-info { width: 260px; } #snakeCanvas { width: 260px !important; height: 260px !important; } .snake-dpad-up, .snake-dpad-down { width: 332px; } .snake-dpad-left, .snake-dpad-right { height: 260px; } } .snake-btn { background: #c0c0c0; border: none; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #c0c0c0; font-family: 'VT323', monospace; font-size: 16px; padding: 4px 18px; cursor: pointer; color: #000; } .snake-btn:active { box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #404040, inset -2px -2px #c0c0c0; } .snake-msg { font-size: 18px; color: #000080; text-align: center; min-height: 22px; } /* ══════════════════════════════════════════════════════════════ MINESWEEPER CELLS ══════════════════════════════════════════════════════════════ */ .msw-cell { display: inline-flex; align-items: center; justify-content: center; font-family: 'VT323', monospace; font-weight: bold; cursor: pointer; user-select: none; -webkit-user-select: none; float: left; } .msw-hidden { background: #c0c0c0; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, inset -2px -2px #404040, inset 2px 2px #dfdfdf; } .msw-hidden:active { box-shadow: inset 1px 1px #808080; background: #c0c0c0; } .msw-revealed { background: #c0c0c0; box-shadow: inset 1px 1px #808080; } /* Mine counter + timer — classic red LCD style */ .msw-counter { font-family: 'Courier New', monospace; font-size: 22px; font-weight: bold; color: #ff0000; background: #000; padding: 2px 4px; letter-spacing: 2px; min-width: 42px; text-align: center; box-shadow: inset 1px 1px #404040, inset -1px -1px #808080; } /* ══════════════════════════════════════════════════════════════ MONITOR BEZEL WRAP (landscape mobile) Sits as a fixed overlay — pointer-events: none so it never blocks clicks. The actual screen/body is inset by padding on the html element. ══════════════════════════════════════════════════════════════ */ .w95-monitor-wrap { display: none; } /* Only show in win95 mode + landscape mobile */ @media (max-width: 1024px) and (orientation: landscape) { html.win95 .w95-monitor-wrap { display: block; } } .w95-monitor-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 99990; } /* Top bezel bar */ .w95-monitor-top-bezel { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 0 rgba(255,255,255,0.05); } .w95-monitor-brand { font-family: 'VT323', monospace; font-size: 14px; font-weight: bold; color: #aaa; letter-spacing: 2px; text-transform: uppercase; } /* Bottom bezel bar */ .w95-monitor-bottom-bezel { position: absolute; bottom: 0; left: 0; right: 0; height: 22px; background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%); display: flex; align-items: center; padding: 0 14px; gap: 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); } /* Glowing power LED */ .w95-monitor-led { width: 7px; height: 7px; border-radius: 50%; background: #00ff44; box-shadow: 0 0 5px #00ff44, 0 0 10px rgba(0,255,68,0.5); flex-shrink: 0; animation: ledPulse 3s ease-in-out infinite; } @keyframes ledPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .w95-monitor-model { font-family: 'VT323', monospace; font-size: 11px; color: #666; letter-spacing: 1px; flex: 1; } /* Fake monitor adjustment knobs */ .w95-monitor-knobs { display: flex; gap: 5px; flex-shrink: 0; } .w95-monitor-knobs span { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #444, #222); box-shadow: inset 1px 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.5); display: block; } /* Left/right bezel sides */ .w95-monitor-wrap::before, .w95-monitor-wrap::after { content: ''; position: absolute; top: 22px; bottom: 22px; width: 10px; background: #2a2a2a; } .w95-monitor-wrap::before { left: 0; box-shadow: inset -3px 0 4px rgba(0,0,0,0.3); } .w95-monitor-wrap::after { right: 0; box-shadow: inset 3px 0 4px rgba(0,0,0,0.3); } /* CRT scan lines */ .w95-scanlines { position: absolute; top: 22px; left: 10px; right: 10px; bottom: 22px; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px ); pointer-events: none; } /* Subtle screen glare */ .w95-screen-glare { position: absolute; top: 22px; left: 10px; width: 35%; height: 40%; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04) 0%, transparent 70%); pointer-events: none; } /* ══════════════════════════════════════════════════════════════ LANDSCAPE MOBILE — body inset to fit inside bezel ══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) and (orientation: landscape) { html.win95 { background: #1e1e1e !important; /* top/bottom padding reveals the bezel bars */ padding: 22px 10px !important; box-sizing: border-box; } html.win95 body { height: calc(100vh - 44px); overflow: hidden; position: relative; } /* Taskbar fits inside the screen */ html.win95 .w95-taskbar { height: 28px !important; padding: 1px 3px !important; } html.win95 .w95-start-btn { height: 22px !important; font-size: 14px !important; padding: 1px 8px 1px 4px !important; } html.win95 .w95-task-btn { height: 22px !important; font-size: 12px !important; min-width: 50px !important; max-width: 90px !important; padding: 0 5px !important; } html.win95 .w95-tray { height: 20px !important; font-size: 13px !important; padding: 1px 6px !important; } html.win95 .w95-rm-logo-tray { height: 22px !important; width: 28px !important; padding: 0 4px !important; margin-right: 2px !important; } html.win95 .w95-rm-logo-tray img { width: 17px !important; height: 17px !important; } /* Desktop fits inside the screen */ html.win95 .w95-desktop { bottom: 28px !important; } /* Start menu pops up from smaller taskbar */ html.win95 .w95-start-menu { bottom: 28px !important; } /* Icons — 2 columns in landscape */ html.win95 .w95-desktop-icons { flex-direction: row !important; flex-wrap: wrap !important; max-width: 168px !important; top: 8px !important; left: 8px !important; gap: 4px !important; align-content: flex-start; } html.win95 .w95-dicon { width: 72px !important; padding: 4px 2px !important; } html.win95 .w95-dicon-img { font-size: 28px !important; } html.win95 .w95-dicon-lbl { font-size: 11px !important; } /* Windows — sensible size for small landscape screen */ html.win95 .w95-win { max-height: calc(100vh - 44px - 28px) !important; max-width: calc(100vw - 20px) !important; } } /* ══════════════════════════════════════════════════════════════ PORTRAIT MOBILE — 2-column icon grid, full-width windows ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) and (orientation: portrait) { /* 2-col icon grid */ html.win95 .w95-desktop-icons { flex-direction: row !important; flex-wrap: wrap !important; max-width: 172px !important; gap: 10px !important; top: 12px !important; left: 10px !important; align-content: flex-start; } html.win95 .w95-dicon { width: 76px !important; padding: 6px 2px !important; } html.win95 .w95-dicon-img { font-size: 32px !important; } html.win95 .w95-dicon-lbl { font-size: 12px !important; } /* Windows fill most of the screen */ html.win95 .w95-win { left: 4px !important; top: 4px !important; width: calc(100vw - 8px) !important; max-height: calc(100vh - 48px) !important; min-width: unset !important; } /* Compact start menu */ html.win95 .w95-start-menu { width: 200px !important; } html.win95 .w95-menu-item { font-size: 15px !important; padding: 8px 10px !important; } /* Compact taskbar */ html.win95 .w95-task-btn { min-width: 50px !important; max-width: 70px !important; font-size: 12px !important; padding: 0 4px !important; } /* Submenus go full-width on small screens */ html.win95 .w95-submenu { left: 0 !important; right: 0 !important; bottom: 36px !important; max-width: 100vw !important; width: 100vw !important; } } /* General mobile touch improvements */ @media (max-width: 1024px) { html.win95 .w95-dicon { -webkit-tap-highlight-color: transparent; } html.win95 .w95-wbtn { width: 22px !important; height: 20px !important; } html.win95 .w95-win-titlebar { padding: 4px 6px !important; } } /* ══════════════════════════════════════════════════════════════ IMPROVED WIN95/98 WALLPAPERS ══════════════════════════════════════════════════════════════ */ /* Clouds — rich sky gradient with puffy cumulus clouds */ html.win95.w98-bg-clouds body { background-color: #3a80cc !important; background-image: /* bottom haze */ linear-gradient(180deg, transparent 60%, rgba(200,230,255,0.5) 100%), /* sky gradient */ linear-gradient(180deg, #1a5fa8 0%, #3a8fd4 30%, #6ab4f5 65%, #b8daf8 100%), /* cloud cluster 1 — left */ radial-gradient(ellipse 120px 55px at 12% 38%, white 0%, rgba(255,255,255,0.0) 70%), radial-gradient(ellipse 80px 40px at 18% 30%, white 0%, rgba(255,255,255,0.0) 70%), radial-gradient(ellipse 60px 30px at 8% 35%, rgba(255,255,255,0.85) 0%, transparent 70%), /* cloud cluster 2 — center */ radial-gradient(ellipse 140px 60px at 50% 25%, white 0%, rgba(255,255,255,0.0) 70%), radial-gradient(ellipse 100px 45px at 58% 20%, white 0%, rgba(255,255,255,0.0) 70%), radial-gradient(ellipse 70px 35px at 43% 28%, rgba(255,255,255,0.9) 0%, transparent 70%), /* cloud cluster 3 — right */ radial-gradient(ellipse 110px 50px at 82% 42%, white 0%, rgba(255,255,255,0.0) 70%), radial-gradient(ellipse 75px 38px at 90% 35%, white 0%, rgba(255,255,255,0.0) 70%), radial-gradient(ellipse 55px 28px at 76% 40%, rgba(255,255,255,0.85) 0%, transparent 70%), /* small clouds mid */ radial-gradient(ellipse 60px 28px at 32% 55%, rgba(255,255,255,0.7) 0%, transparent 70%), radial-gradient(ellipse 50px 24px at 68% 60%, rgba(255,255,255,0.65) 0%, transparent 70%) !important; } /* Hills override — bright sky fading to rolling green */ html.win95.w98-bg-hills body { background-color: #87ceeb !important; background-image: linear-gradient(180deg, #1e6eb5 0%, #3a8fd4 18%, #6ab9ef 42%, #9dd4f5 54%, #6ecf3a 54%, #52b825 64%, #3a9018 80%, #2a7010 100%), radial-gradient(ellipse 60% 20% at 50% 54%, rgba(100,220,50,0.4) 0%, transparent 100%) !important; } /* Sandy Beach */ html.win95.w98-bg-sandy body { background-color: #c8a96e !important; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 8px), linear-gradient(180deg, #d4a853 0%, #c8a96e 50%, #b8945a 100%) !important; } /* Straw Mat — woven look */ html.win95.w98-bg-straw body { background-color: #d4b483 !important; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 2px, transparent 2px, transparent 10px), repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 10px), repeating-linear-gradient(45deg, rgba(200,160,100,0.3) 0px, rgba(200,160,100,0.3) 1px, transparent 1px, transparent 14px) !important; } /* Black Thatch */ html.win95.w98-bg-thatch body { background-color: #ffffff !important; background-image: repeating-linear-gradient(45deg, #000 0px, #000 1px, transparent 1px, transparent 8px), repeating-linear-gradient(-45deg, #000 0px, #000 1px, transparent 1px, transparent 8px) !important; } /* Pinstripe (vertical) */ html.win95.w98-bg-pinstripe body { background-color: #003366 !important; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 10px) !important; } /* Metal Links */ html.win95.w98-bg-metal body { background-color: #888 !important; background-image: radial-gradient(ellipse 10px 6px at 10px 8px, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(ellipse 10px 6px at 25px 18px, rgba(255,255,255,0.4) 0%, transparent 100%), repeating-linear-gradient(30deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 1px, transparent 30px) !important; background-size: 30px 24px, 30px 24px, 60px 60px !important; } /* Feather */ html.win95.w98-bg-feather body { background-color: #f0e8d8 !important; background-image: repeating-linear-gradient(30deg, rgba(180,140,100,0.15) 0px, rgba(180,140,100,0.15) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-30deg, rgba(180,140,100,0.15) 0px, rgba(180,140,100,0.15) 1px, transparent 1px, transparent 20px), radial-gradient(ellipse at 50% 50%, #f8f0e0 0%, #e8d8c0 100%) !important; } /* Houndstooth */ html.win95.w98-bg-hounds body { background-color: #222 !important; background-image: conic-gradient(#fff 0deg 90deg, #222 90deg 180deg, #fff 180deg 270deg, #222 270deg 360deg) !important; background-size: 20px 20px !important; } /* Duke Nukem — black background with real image */ html.win95.w98-bg-duke body { background: #000 !important; } /* ══════════════════════════════════════════════════════════════ DUKE NUKEM SCENE ══════════════════════════════════════════════════════════════ */ .w95-duke-scene { display: none; } html.win95.w98-bg-duke .w95-duke-scene { display: flex; } .w95-duke-scene { position: fixed; inset: 0; bottom: 36px; pointer-events: none; z-index: 0; /* below desktop icons (z-index:1) */ flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 5%; } /* Title */ .w95-duke-title { font-family: 'VT323', monospace; font-size: clamp(36px, 7vw, 80px); font-weight: bold; color: #ffcc00; text-shadow: 0 0 20px #ff6600, 0 0 40px #ff4400, 4px 4px 0 #882200; letter-spacing: 6px; text-align: center; line-height: 1; flex-shrink: 0; } .w95-duke-title span { color: #ff4400; font-size: 0.6em; vertical-align: super; text-shadow: 0 0 10px #ff2200; } /* The actual image */ .w95-duke-img { width: min(600px, 90vw); max-height: calc(100% - 120px); object-fit: contain; margin-top: 12px; flex-shrink: 1; filter: drop-shadow(0 0 24px rgba(255,80,0,0.5)); } .w95-duke-tagline { font-family: 'VT323', monospace; font-size: clamp(16px, 3vw, 28px); color: #ff8800; text-shadow: 0 0 8px #ff4400; letter-spacing: 2px; text-align: center; margin-top: 8px; flex-shrink: 0; } /* Mobile — shift right so left-side icon column stays clear */ @media (max-width: 600px) { .w95-duke-scene { padding-left: 90px; } .w95-duke-title { font-size: 28px; letter-spacing: 2px; } .w95-duke-img { width: min(320px, 70vw); } .w95-duke-tagline { font-size: 13px; } }