/* Windows 2000 desktop environment of the setup sketch (desktop.js): desktop icons, windows, taskbar, Start menu,
   tooltips, message boxes, pointers. 800 x 600 stage; metrics follow Windows 2000 at 800 x 600 (taskbar 28 px). */
.stage.desktop{background:#3a6ea5!important}
.stage.desktop>:not(.splash):not(.env):not(#about):not(#runas):not(video){display:none!important}
/* the real game (index.html launch): laid out from the start (hidden until its first DirectDraw frame), then on top */
.gameframe{position:absolute;left:0;top:0;width:800px;height:600px;border:0;background:#000;z-index:1000;visibility:hidden}
.stage.playing>.gameframe{visibility:visible}
.stage.stopped>.gameframe{visibility:hidden}
/* stop screen (bsod.js): 1024 x 768 canvas shown on the 800 x 600 tube */
.bsod{position:absolute;left:0;top:0;width:800px;height:600px;z-index:1001;outline:none}
.stage.blank>.bsod{visibility:visible}
.stage:not(.desktop)>.env:not(.mbox):not(.shield){display:none!important} /* message boxes: also over the setup (alpha prompt) */
.i16{display:block;width:16px;height:16px;image-rendering:auto}
.i32{display:block;width:32px;height:32px;image-rendering:auto}

/* pointers: Windows arrow, arrow + hourglass while a program starts, the game's own pointer in the game */
.stage,.stage *{cursor:var(--cur-arrow),default}
.stage input:not([type]),.stage input[type=text]{cursor:text}
.stage.busy,.stage.busy *{cursor:var(--cur-busy),progress!important}
.stage.game,.stage.game *{cursor:var(--cur-game),default!important}

/* desktop icons: column-major grid from the top-left; one click selects, double-click or Enter opens */
.desk{left:0;top:0;width:800px;height:572px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:2px;padding:9px 4px 4px} /* clear of the curved glass corner */
.dicon{width:75px;height:70px;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:2px;color:#fff;font:11px/1.25 Tahoma,sans-serif;text-align:center}
.dicon .img{position:relative;width:32px;height:32px;flex:none}
.dicon .sc{position:absolute;left:0;bottom:0;width:11px;height:11px}
.dicon .lbl{padding:0 2px;max-width:75px}
.dicon:focus{outline:none}
.dicon:focus .lbl,.dicon.sel .lbl{background:#0a246a}
.dicon:focus .lbl{outline:1px dotted #fff;outline-offset:-1px}
.dicon .img::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:repeating-conic-gradient(#0a246a 0 25%,transparent 0 50%) 0 0/2px 2px;
  -webkit-mask:var(--m) 0 0/32px 32px;mask:var(--m) 0 0/32px 32px}
.dicon:focus .img::after,.dicon.sel .img::after{opacity:1} /* selected: 50 % navy dither over the icon's own pixels */
.band{position:absolute;border:1px dotted #fff;outline:1px dotted #000;outline-offset:-1px;pointer-events:none}

/* taskbar */
.taskbar{left:0;right:0;bottom:0;height:28px;display:flex;align-items:center;gap:2px;padding:3px 2px 1px;z-index:900;
  background:#d4d0c8;box-shadow:inset 0 1px #d4d0c8,inset 0 2px #fff}
.taskbar .start{display:flex;align-items:center;gap:3px;height:22px;flex:none;padding:0 6px 0 3px;font:bold 11px Tahoma,sans-serif;color:#000;
  box-shadow:inset -1px -1px #404040,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #d4d0c8}
.taskbar .start[aria-expanded=true]{box-shadow:inset 1px 1px #404040,inset -1px -1px #fff,inset 2px 2px #808080;padding:1px 5px 0 4px}
.taskbar .start:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.taskbar .sep{width:2px;height:22px;flex:none;margin:0 2px;box-shadow:inset 1px 0 #808080,inset -1px 0 #fff}
.taskbar .grip{width:3px;height:20px;flex:none;margin-right:2px;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080}
.taskbar .quick{display:flex;gap:1px;flex:none}
.taskbar .quick button{width:23px;height:22px;display:grid;place-items:center}
.taskbar .quick button:hover,.taskbar .quick button:focus-visible{outline:none;box-shadow:inset -1px -1px #808080,inset 1px 1px #fff}
.taskbar .quick button:active{box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.taskbar .tasks{flex:1;display:flex;gap:3px;min-width:0;padding:0 2px}
.taskbar .task{flex:0 1 160px;min-width:0;height:22px;display:flex;align-items:center;gap:4px;padding:0 6px 0 4px;font:11px Tahoma,sans-serif;color:#000;
  box-shadow:inset -1px -1px #404040,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #d4d0c8}
.taskbar .task span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.taskbar .task.on{font-weight:bold;padding-top:1px;box-shadow:inset 1px 1px #404040,inset -1px -1px #fff,inset 2px 2px #808080;
  background:repeating-conic-gradient(#fff 0 25%,#d4d0c8 0 50%) 0 0/2px 2px}
.taskbar .task:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.taskbar .tray{display:flex;align-items:center;gap:8px;height:22px;flex:none;padding:0 10px 0 6px;font:11px Tahoma,sans-serif;color:#000;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.taskbar .tray button{width:16px;height:16px}
.taskbar .tray button:focus-visible{outline:1px dotted #000}

/* menus (Start and its cascades) */
.menu{position:absolute;z-index:950;display:flex;padding:3px;background:#d4d0c8;font:11px Tahoma,sans-serif;color:#000;
  box-shadow:inset -1px -1px #404040,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #d4d0c8}
.menu .banner{width:21px;flex:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;background:linear-gradient(#000080,#1084d0)}
.menu .banner span{writing-mode:vertical-rl;rotate:180deg;color:#d4d0c8;font:16px Tahoma,sans-serif;white-space:nowrap}
.menu .banner b{color:#fff}
.menu ul{list-style:none;margin:0;padding:0;min-width:150px}
.menu.large ul{min-width:170px}
.menu li>button{display:flex;align-items:center;gap:8px;width:100%;height:22px;padding:0 18px 0 4px;color:inherit;text-align:left;position:relative;white-space:nowrap}
.menu.large li>button{height:34px;gap:10px;padding-left:6px}
.menu li>button[aria-haspopup]::after{content:"";position:absolute;right:6px;top:50%;translate:0 -50%;border:4px solid transparent;border-left-color:currentColor;border-right:0}
.menu li>button:hover,.menu li>button:focus-visible,.menu li>button.open{outline:none;background:#0a246a;color:#fff}
.menu li>button:disabled{color:#808080;text-shadow:1px 1px #fff;background:none}
.menu hr{border:0;margin:3px 2px;height:2px;box-shadow:inset 0 1px #808080,inset 0 -1px #fff}

/* windows */
.xwin{position:absolute;display:flex;flex-direction:column;padding:3px;background:#d4d0c8;font:11px Tahoma,sans-serif;color:#000;
  border:1px solid;border-color:#d4d0c8 #404040 #404040 #d4d0c8;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080}
.xwin[hidden]{display:none}
.xbar{height:18px;flex:none;display:flex;align-items:center;gap:3px;padding:0 2px;color:#d4d0c8;font-weight:bold;background:linear-gradient(90deg,#808080,#c0c0c0)}
.xwin.on .xbar{color:#fff;background:linear-gradient(90deg,#0a246a,#a6caf0)}
.xbar>span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.xbar button{width:16px;height:14px;display:grid;place-items:center;background:#d4d0c8;color:#000;box-shadow:inset -1px -1px #404040,inset 1px 1px #fff,inset -2px -2px #808080}
.xbar button:active{box-shadow:inset 1px 1px #404040,inset -1px -1px #fff}
.xbar button.x{margin-left:2px}
.xmenu{display:flex;gap:0;height:19px;align-items:center;padding:0 2px;flex:none;box-shadow:0 1px #fff,inset 0 -1px #808080}
.xmenu span{padding:1px 6px}
.xaddr{display:flex;align-items:center;gap:6px;height:24px;padding:2px 4px;flex:none;color:#000}
.xaddr .path{flex:1;height:20px;display:flex;align-items:center;gap:4px;padding:0 3px;background:#fff;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #404040,inset -2px -2px #d4d0c8}
.xview{flex:1;min-height:0;overflow:auto;background:#fff;padding:6px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px 6px;outline:none;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #404040,inset -2px -2px #d4d0c8}
.xview.list{flex-direction:column;flex-wrap:wrap;gap:0 10px}
.xitem{width:76px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0;color:#000;text-align:center}
.xview.list .xitem{width:auto;max-width:180px;flex-direction:row;gap:3px;padding:0;text-align:left;height:18px}
.xitem span{padding:0 2px;word-break:break-word}
.xview.list .xitem span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xitem:focus{outline:none}
.xitem:focus span{background:#0a246a;color:#fff;outline:1px dotted #fff;outline-offset:-1px}
.xstatus{height:20px;flex:none;display:flex;align-items:center;padding:0 4px;margin-top:2px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}

/* message box + tooltip */
.mbox{position:absolute;z-index:980;min-width:260px;max-width:420px;padding:3px;background:#d4d0c8;font:11px Tahoma,sans-serif;color:#000;
  border:1px solid;border-color:#d4d0c8 #404040 #404040 #d4d0c8;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080,4px 4px 0 rgba(0,0,0,.3)}
.mbox .xbar{color:#fff;background:linear-gradient(90deg,#0a246a,#a6caf0)}
.mbox .msg{display:flex;gap:14px;align-items:flex-start;padding:14px 14px 8px;white-space:pre-line;line-height:1.35}
.mbox .btns{display:flex;justify-content:center;gap:6px;padding:6px 10px 8px}
.shield{position:absolute;inset:0;z-index:970}
.tip2k{position:absolute;z-index:999;pointer-events:none;padding:1px 4px 2px;background:#ffffe1;border:1px solid #000;font:11px Tahoma,sans-serif;color:#000;white-space:nowrap}
.xview.notepad{display:block;margin:0;padding:2px 4px;font:12px/1.25 "Lucida Console",monospace;white-space:pre;overflow:auto}
.stage.desktop>#about{z-index:975}
/* a program's own window (desktop.js openWin spec.body): the CD's AutoRun 1:1, a movie */
.xwin.xdlg .xbody{position:relative;outline:none;flex:none}
.arun{width:520px;height:390px;background:url(cd/autorun/BITMAP1.png) no-repeat}
.arb{position:absolute;width:138px;height:37px;padding:0;border:0;margin:0;background:var(--U) no-repeat;outline:none}
.arb:not(:disabled):hover,.arb:not(:disabled):focus-visible{background-image:var(--F)}
.arb:not(:disabled):active{background-image:var(--D)}
.arb:disabled{background-image:var(--X)}
.xmovie{display:block;width:640px;height:480px;background:#000;object-fit:contain}
.game-sc[hidden]{display:none!important} /* not installed yet (desktop.js sync) */