.titlebar .left{display:flex;align-items:center;gap:8px} .titlebar .title{font-weight:bold;font-size:13px} .titlebar .controls button{background:linear-gradient(#4b86d6,#2b5fb8);border:1px solid rgba(0,0,0,0.2);color:#fff;padding:2px 6px;border-radius:2px;cursor:pointer} .content{padding:8px;background:#f8fbff} /* Notepad specific override to mimic Windows XP Notepad */ #notepadWin .titlebar{height:26px;background:linear-gradient(#2d73d9,#125aa6);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15)} #notepadWin .titlebar .title{font-size:12px;color:#fff;padding-left:6px} #notepadWin .content{padding:6px;background:#f0f0f0} #notepadWin .menu-bar{background:#efefef;border:1px solid #d4d4d4;padding:3px 6px;border-radius:2px} #notepadWin .menu{position:relative} #notepadWin .menu > span{font-size:11px;color:#000;padding:3px 8px;display:inline-block;border:1px solid transparent} #notepadWin .menu > span:hover{background:#e1f0ff;border:1px solid #c0d8ef} #notepadWin .submenu{position:absolute;left:0;top:100%;margin-top:0;box-shadow:2px 2px 4px rgba(0,0,0,0.3);border:1px solid #666;z-index:3000} #notepadWin .submenu div{padding:6px 10px;background:#fff;color:#000;white-space:nowrap} #notepadWin .submenu div:hover{background:#e6f0ff} #notepadWin .submenu .disabled{color:#888;opacity:0.7} #notepadWin textarea{width:100%;height:220px;font-size:13px;font-family:Tahoma, sans-serif;background:#fff;border:1px solid #cfcfcf;padding:6px;resize:none} #notepadWin .retro-text{font-family:Tahoma, Arial, sans-serif} #taskbar{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(#2f63b8,#0c3a86);display:flex;align-items:center;color:#fff;padding:4px 8px} /* XP-like taskbar */ #taskbar{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(#1b59c2,#083a86);display:flex;align-items:center;color:#fff;padding:6px 10px;border-top:1px solid rgba(255,255,255,0.05)} #start{width:56px;height:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#0d63c6,#0a4fa0);border-radius:4px;cursor:pointer;border:1px solid rgba(255,255,255,0.08)} #start svg{width:20px;height:20px;display:block} /* Start menu XP-like */ .start-menu{width:360px;background:#fff;border:2px solid #0b4fa0;border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,0.5);overflow:hidden;color:#013a6f} .sm-item:hover{background:#dfeeff} .sm-link:hover{background:rgba(255,255,255,0.5)} #task-list{flex:1;display:flex;gap:8px;margin-left:12px} .task{background:linear-gradient(#cfe6ff,#e6f2ff);color:#012a6b;padding:6px 10px;border-radius:4px;cursor:pointer;border:1px solid rgba(0,0,0,0.12);transition:box-shadow 180ms ease,background 180ms} .task .task-icon svg{width:16px;height:16px;display:inline-block;vertical-align:middle} .task.active{background:linear-gradient(#fff,#dfefff);box-shadow:inset 0 -2px 0 rgba(0,0,0,0.08);} .task.minimized{opacity:0.8;filter:grayscale(0.2);} #clock{width:160px;text-align:right;font-size:12px} table{width:100%;border-collapse:collapse} th,td{padding:6px;border-bottom:1px solid #e6eef9} tr.selected{background:#eef6ff} /* Explorer-specific visuals */ .explorer-container{display:flex;gap:10px} .explorer-left{width:200px;background:linear-gradient(#dbe9ff,#a8cfff);padding:8px;border-right:1px solid #c8ddff;border-radius:4px} .explorer-left h4{margin:6px 0;color:#012a6b;font-weight:bold;font-size:12px} .explorer-left .link{display:block;padding:4px 4px;color:#033d80;text-decoration:none;border-radius:3px;font-size:12px} .explorer-left .link:hover{background:rgba(255,255,255,0.6)} .explorer-toolbar button{background:#e9f6ff;border:1px solid #bcdcff;padding:6px;border-radius:3px;cursor:pointer;color:#023f78} #files th{background:linear-gradient(#f7fbff,#eaf6ff);text-align:left;padding:6px;color:#013a6f;font-size:12px} #files td{padding:6px;border-bottom:1px solid #e6eef9;font-size:12px} #files tr:hover{background:#eef6ff} tr.selected{background:linear-gradient(#cfe8ff,#dff4ff)} .file-entry{display:flex;align-items:center;gap:8px} .file-icon svg{width:16px;height:16px;display:block} .retro-text{font-family:Tahoma, Arial, sans-serif;font-size:13px} .disabled{ color:#999 !important; opacity:0.6; pointer-events:none; cursor:default; } /* Camera window visuals */ .cam-screen{background:#000;display:flex;align-items:center;justify-content:center;position:relative} .cam-screen img{max-width:100%;max-height:100%;filter:contrast(1.05) saturate(0.9) brightness(0.9)} .cam-overlay{position:absolute;left:0;right:0;bottom:8px;padding:6px 8px;color:#0f0;font-family:monospace;text-shadow:0 0 6px rgba(0,0,0,0.8);font-size:12px} .cam-scanlines{pointer-events:none;position:absolute;left:0;right:0;top:0;bottom:0;background-image:linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.06) 50%);background-size:100% 4px;mix-blend-mode:overlay} .cam-vignette{pointer-events:none;position:absolute;left:-10%;right:-10%;top:-10%;bottom:-10%;box-shadow:inset 0 0 120px rgba(0,0,0,0.6);} /* Window minimize / restore animations */ .window{transition:transform 260ms cubic-bezier(.2,.8,.2,1),opacity 260ms cubic-bezier(.2,.8,.2,1);transform-origin:center top;} .window.minimizing{transform:translateY(18px) scale(.85);opacity:0} .window.restoring{transform:translateY(18px) scale(.85);opacity:0} .window.restore-active{transform:none;opacity:1} /* Custom scrollbars (thin, subtle like classic XP) */ /* WebKit / Blink */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:linear-gradient(#f3f6fb,#e9f1ff)} ::-webkit-scrollbar-thumb{background:linear-gradient(#c7dffb,#b3d0f9);border-radius:6px;border:2px solid rgba(255,255,255,0.6)} ::-webkit-scrollbar-thumb:hover{background:linear-gradient(#9cc3f5,#88b8f1)} /* Firefox */ *{scrollbar-width:thin;scrollbar-color:#b3d0f9 #e9f1ff} /* calendar widget (XP-like improved style) */ .calendar-ui { font-family: Tahoma, Arial, sans-serif; color:#000; } .calendar-ui table { width:100%; border-collapse:collapse; font-size:11px; } .calendar-ui th { color:#000;padding:6px;font-weight:bold;background:linear-gradient(#d6dff7,#c6d5f0);border:1px solid #aaa;font-size:11px } .calendar-ui td { width:14.28%; height:60px; vertical-align:top; padding:4px; border:1px solid #bbb; cursor:pointer; background:#fff;position:relative;transition:all 0.2s } .calendar-ui td:hover { background:#fff8dc;border-color:#5090d0;box-shadow:0 2px 4px rgba(80,144,208,0.25) } .calendar-ui .today { background:linear-gradient(#fff6d9,#ffe8b3); border:2px solid #f0a000 } .calendar-ui .event-day { background:linear-gradient(#e6f2ff,#d0e8ff); border:1px solid #5090d0;font-weight:bold } .calendar-ui .day-num { font-size:12px; color:#000;font-weight:bold;margin-bottom:2px;display:block } .calendar-ui .moon-icon { font-size:10px;position:absolute;bottom:3px;right:3px;opacity:0.6 } .month-btn.active{background:linear-gradient(#e6e6e6,#d0d0d0)!important;border-color:#666!important} /* Minesweeper visuals */ .mines-grid { display:grid; gap:0; background:#c0c0c0; padding:0; font-size:0; line-height:0; } .mines-grid button { width:20px; height:20px; background:linear-gradient(135deg, #fff 0%, #c0c0c0 50%, #808080 100%); border:1px outset #c0c0c0; font-weight:bold; cursor:pointer; padding:0; font-size:11px; font-family:sans-serif; margin:0; vertical-align:top; } .mines-grid button:active { border-style:inset; } .mines-grid button.revealed { background:#c0c0c0; border:1px solid #808080; cursor:default; color:#000; } .mines-grid button.flagged { background:linear-gradient(135deg, #fff 0%, #c0c0c0 50%, #808080 100%); color:#f00; } .mines-grid button.mine-exploded { background:#f00; color:#000; } .tamagotchi-screen{width:100%;height:100%;background:url("https://i.pinimg.com/736x/89/aa/b3/89aab327bf691c0fe1914dbfca9113ab.jpg");background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;position:relative;padding-bottom:20px} #center-area{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative} .tamagotchi-pet{width:60px;image-rendering:pixelated;filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.4));transition:all 0.3s ease} .emotion-bubble{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#ffffff,#f8f8f8);border:2px solid #4a7c59;padding:3px 5px;border-radius:10px;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.8);z-index:10;opacity:0;transform:translateX(-50%) scale(0.8) translateY(-3px);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);min-width:26px;text-align:center} .emotion-bubble.show{opacity:1;transform:translateX(-50%) scale(1) translateY(0px)} .emotion-bubble::after{content:"";position:absolute;bottom:-6px;left:35%;width:6px;height:6px;background:linear-gradient(135deg,#ffffff,#f8f8f8);border:2px solid #4a7c59;border-radius:50%;transform:scale(0.6);box-shadow:0 2px 3px rgba(0,0,0,0.15)} #notepadContent{background:#fff;border:1px inset #c0c0c0;font-family:'Lucida Console',monospace;font-size:12px;padding:2px;margin:0;resize:none;outline:none;color:#000} #taskbar{position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,#245edc,#1941a5);border-top:1px solid #4578dc;display:flex;align-items:center;padding:0 8px} .start-button{background:linear-gradient(to bottom,#3d8b37,#2d6b28);border:1px outset #5cb85c;border-radius:3px;color:#fff;padding:4px 12px;cursor:pointer;font-weight:bold;margin-right:8px} .start-button:active{border:1px inset #5cb85c} .taskbar-items{display:flex;gap:2px;flex:1} .taskbar-item{background:linear-gradient(to bottom,#245edc,#1941a5);border:1px outset #4578dc;color:#fff;padding:2px 8px;cursor:pointer;border-radius:2px;font-size:11px} .taskbar-item:active{border:1px inset #4578dc} .taskbar-time{color:#fff;font-size:11px;margin-left:auto} .tamagotchi-stats{padding:4px;background:#555;color:#fff;font-size:8px;text-align:center;border-top:1px solid #333}