/* ============================================================
   NO-FUNDS IT  —  Windows 95 prank aesthetic
   Palette is deliberately the real Win95 system palette:
   teal desktop #008080, silver chrome #c0c0c0, navy titlebars
   ============================================================ */
:root{
  --silver:#c0c0c0;
  --silver-d:#808080;
  --silver-dd:#000000;
  --silver-l:#dfdfdf;
  --silver-ll:#ffffff;
  --navy:#000080;
  --navy-l:#1084d0;
  --teal:#008080;
  --warn:#ffff00;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;}
body{
  background:var(--teal);
  font-family:"MS Sans Serif","Pixelated MS Sans Serif",Tahoma,Geneva,sans-serif;
  font-size:12px;
  -webkit-font-smoothing:none;
  cursor:default;
  user-select:none;
}
.hidden{display:none!important;}

/* ---------- BOOT ---------- */
#boot{
  position:fixed;inset:0;background:#000;color:#c0c0c0;
  font-family:"Courier New",monospace;font-size:14px;
  padding:24px;z-index:9999;white-space:pre-wrap;line-height:1.4;
}
#boot-text{margin:0;}

/* ---------- DESKTOP ---------- */
#desktop{position:fixed;inset:0;}
.icons{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:18px;flex-wrap:wrap;max-height:88vh;width:90px;}
.icon{width:80px;text-align:center;color:#fff;cursor:pointer;padding:3px;}
.icon span{display:block;margin-top:3px;text-shadow:1px 1px 0 rgba(0,0,0,.6);line-height:1.15;}
.icon.sel span{background:#000080;outline:1px dotted #fff;}
.icon.sel .icon-img{filter:brightness(.7) sepia(1) hue-rotate(180deg);}
.icon-img{width:32px;height:32px;margin:0 auto;background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated;}

/* pixel-art icons drawn as inline SVG data-uris */
.ico-doc{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect x='6' y='2' width='18' height='28' fill='white' stroke='black'/><polygon points='20,2 24,6 20,6' fill='%23c0c0c0' stroke='black'/><line x1='9' y1='9' x2='21' y2='9' stroke='%23000080' stroke-width='1'/><line x1='9' y1='13' x2='21' y2='13' stroke='gray'/><line x1='9' y1='16' x2='21' y2='16' stroke='gray'/><line x1='9' y1='19' x2='18' y2='19' stroke='gray'/></svg>");}
.ico-pc{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect x='4' y='5' width='24' height='16' fill='%23c0c0c0' stroke='black'/><rect x='6' y='7' width='20' height='12' fill='%23008080'/><rect x='9' y='23' width='14' height='5' fill='%23c0c0c0' stroke='black'/><rect x='4' y='21' width='24' height='3' fill='%23808080' stroke='black'/></svg>");}
.ico-bin{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><polygon points='8,10 24,10 22,28 10,28' fill='%23c0c0c0' stroke='black'/><rect x='6' y='7' width='20' height='4' fill='%23dfdfdf' stroke='black'/><line x1='13' y1='13' x2='14' y2='25' stroke='gray'/><line x1='16' y1='13' x2='16' y2='25' stroke='gray'/><line x1='19' y1='13' x2='18' y2='25' stroke='gray'/></svg>");}
.ico-net{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='14' r='9' fill='%2300a0a0' stroke='black'/><ellipse cx='16' cy='14' rx='9' ry='4' fill='none' stroke='%23004040'/><line x1='16' y1='5' x2='16' y2='23' stroke='%23004040'/><rect x='10' y='25' width='12' height='4' fill='%23c0c0c0' stroke='black'/></svg>");}
.ico-virus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='9' fill='%2320c020' stroke='black'/><g stroke='black' stroke-width='1.5'><line x1='16' y1='2' x2='16' y2='7'/><line x1='16' y1='25' x2='16' y2='30'/><line x1='2' y1='16' x2='7' y2='16'/><line x1='25' y1='16' x2='30' y2='16'/><line x1='6' y1='6' x2='10' y2='10'/><line x1='22' y1='22' x2='26' y2='26'/><line x1='26' y1='6' x2='22' y2='10'/><line x1='10' y1='22' x2='6' y2='26'/></g><circle cx='13' cy='14' r='1.5'/><circle cx='19' cy='14' r='1.5'/></svg>");}
.ico-money{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><rect x='5' y='3' width='18' height='26' fill='white' stroke='black'/><rect x='5' y='3' width='18' height='5' fill='%23008000'/><text x='14' y='22' font-size='14' text-anchor='middle' fill='%23008000' font-family='monospace'>$0</text></svg>");}
.ico-off{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='6' fill='none' stroke='red' stroke-width='2'/><line x1='8' y1='2' x2='8' y2='8' stroke='red' stroke-width='2'/></svg>");}

/* ---------- BEVELS (the heart of Win95) ---------- */
.outset{
  border:2px solid;
  border-color:var(--silver-ll) var(--silver-dd) var(--silver-dd) var(--silver-ll);
  box-shadow:inset 1px 1px 0 var(--silver-l), inset -1px -1px 0 var(--silver-d);
  background:var(--silver);
}
.inset{
  border:2px solid;
  border-color:var(--silver-dd) var(--silver-ll) var(--silver-ll) var(--silver-dd);
  box-shadow:inset 1px 1px 0 var(--silver-d), inset -1px -1px 0 var(--silver-l);
  background:#fff;
}

/* ---------- WINDOWS ---------- */
.win{
  position:absolute;min-width:240px;background:var(--silver);
  border:2px solid;border-color:var(--silver-ll) var(--silver-dd) var(--silver-dd) var(--silver-ll);
  box-shadow:inset 1px 1px 0 var(--silver-l), inset -1px -1px 0 var(--silver-d), 2px 2px 0 rgba(0,0,0,.4);
  display:flex;flex-direction:column;
}
.win.active .titlebar{background:linear-gradient(90deg,var(--navy),var(--navy-l));}
.titlebar{
  background:linear-gradient(90deg,#7f7f7f,#b5b5b5);
  color:#fff;font-weight:bold;padding:2px 3px;display:flex;align-items:center;
  cursor:move;height:20px;
}
.titlebar .t-ico{width:16px;height:16px;margin-right:4px;flex:0 0 16px;background-size:contain;background-repeat:no-repeat;}
.titlebar .t-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.titlebar .t-btns{display:flex;gap:2px;}
.tbtn{
  width:16px;height:14px;background:var(--silver);color:#000;font-size:9px;font-weight:bold;
  border:1px solid;border-color:var(--silver-ll) var(--silver-dd) var(--silver-dd) var(--silver-ll);
  display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;padding-bottom:2px;
}
.tbtn:active{border-color:var(--silver-dd) var(--silver-ll) var(--silver-ll) var(--silver-dd);}
.menubar{display:flex;gap:0;padding:1px 2px;border-bottom:1px solid var(--silver-d);}
.menubar span{padding:2px 6px;}
.menubar span:hover{background:var(--navy);color:#fff;}
.win-body{padding:10px;background:var(--silver);overflow:auto;flex:1;}
.win-body.white{background:#fff;}

/* generic dialog content */
.dlg{display:flex;gap:12px;padding:14px;align-items:flex-start;}
.dlg .big-ico{font-size:32px;line-height:1;flex:0 0 auto;}
.dlg .msg{flex:1;padding-top:2px;}
.btn-row{display:flex;justify-content:center;gap:8px;padding:4px 0 12px;}
button.w95{
  min-width:75px;padding:4px 10px;font-family:inherit;font-size:12px;background:var(--silver);
  border:2px solid;border-color:var(--silver-ll) var(--silver-dd) var(--silver-dd) var(--silver-ll);
  box-shadow:inset 1px 1px 0 var(--silver-l), inset -1px -1px 0 var(--silver-d);cursor:pointer;
}
button.w95:active{border-color:var(--silver-dd) var(--silver-ll) var(--silver-ll) var(--silver-dd);box-shadow:none;padding:5px 9px 3px 11px;}
button.w95.default{outline:1px dotted #000;outline-offset:-4px;}

/* progress bar (chunky blocks) */
.prog{height:18px;background:#fff;padding:2px;display:flex;gap:2px;overflow:hidden;}
.prog i{width:8px;height:100%;background:var(--navy);flex:0 0 8px;}

/* ---------- TASKBAR ---------- */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:30px;background:var(--silver);
  border-top:2px solid var(--silver-ll);display:flex;align-items:center;padding:2px;gap:4px;z-index:5000;
}
#start-btn{
  display:flex;align-items:center;gap:4px;font-weight:bold;font-size:12px;padding:2px 7px 3px;height:24px;
  background:var(--silver);border:2px solid;border-color:var(--silver-ll) var(--silver-dd) var(--silver-dd) var(--silver-ll);
  box-shadow:inset 1px 1px 0 var(--silver-l);cursor:pointer;font-family:inherit;
}
#start-btn.open{border-color:var(--silver-dd) var(--silver-ll) var(--silver-ll) var(--silver-dd);box-shadow:none;}
.flag{width:16px;height:14px;background:
  linear-gradient(135deg,#ff0000 0 50%,#00a000 50% 100%);
  background-size:8px 7px;background-position:0 0,8px 0,0 7px,8px 7px;
  background-image:
    linear-gradient(#ff3b3b,#ff3b3b),linear-gradient(#3bdb3b,#3bdb3b),
    linear-gradient(#3b8bff,#3b8bff),linear-gradient(#ffe23b,#ffe23b);
  background-repeat:no-repeat;display:inline-block;transform:skewX(-8deg);}
#tasks{flex:1;display:flex;gap:3px;overflow:hidden;height:24px;}
.task-tab{
  min-width:120px;max-width:160px;height:24px;display:flex;align-items:center;gap:4px;padding:0 6px;
  background:var(--silver);border:2px solid;border-color:var(--silver-ll) var(--silver-dd) var(--silver-dd) var(--silver-ll);
  font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.task-tab.active{border-color:var(--silver-dd) var(--silver-ll) var(--silver-ll) var(--silver-dd);
  background:repeating-conic-gradient(#bbb 0% 25%,#c8c8c8 0% 50%) 50%/4px 4px;font-weight:bold;}
.task-tab .t-ico{width:14px;height:14px;flex:0 0 14px;}
#tray{display:flex;align-items:center;gap:6px;padding:2px 6px;height:24px;
  border:1px solid;border-color:var(--silver-d) var(--silver-ll) var(--silver-ll) var(--silver-d);}
.tray-ico{font-size:13px;cursor:default;}
#clock{font-size:11px;min-width:54px;text-align:center;}

/* ---------- START MENU ---------- */
#start-menu{
  position:fixed;bottom:30px;left:2px;width:260px;background:var(--silver);z-index:6000;display:flex;
  border:2px solid;border-color:var(--silver-ll) var(--silver-dd) var(--silver-dd) var(--silver-ll);
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.start-side{
  width:26px;background:linear-gradient(var(--navy),#000040);color:#b0b0b0;font-weight:bold;
  writing-mode:vertical-lr;transform:rotate(180deg);text-align:right;padding:8px 4px;font-size:18px;letter-spacing:1px;
}
#start-menu ul{list-style:none;margin:0;padding:2px;flex:1;}
#start-menu li{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:pointer;}
#start-menu li:hover{background:var(--navy);color:#fff;}
#start-menu li.sep{height:2px;padding:0;margin:3px 2px;background:var(--silver-d);border-bottom:1px solid var(--silver-ll);pointer-events:none;}
.mi-ico{width:20px;height:20px;flex:0 0 20px;background-size:contain;background-repeat:no-repeat;}

/* ---------- DODGING BUTTON ---------- */
.dodger{position:relative;transition:none;}

/* ---------- BSOD ---------- */
#bsod{position:fixed;inset:0;background:#0000aa;color:#fff;z-index:99999;
  font-family:"Courier New",monospace;font-size:15px;padding:6% 10%;line-height:1.5;}
#bsod .center{text-align:center;}
#bsod b{background:#aaaaaa;color:#0000aa;padding:0 6px;}

/* nuisance: spawned popups float */
@keyframes jiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}

/* reduced motion: kill the worst of it */
@media (prefers-reduced-motion: reduce){
  .dodger{transition:none!important;}
  *{animation:none!important;}
}

@media (max-width:600px){
  .icons{gap:12px;}
  .win{max-width:94vw;}
}