/* =====================================================================
   PENTIUM 133 MHz VIRUS SIMULATOR WIN 95
   styles.css - room layout, CRT bezel furniture, Windows 95 dialog shell
   happystoner5420 Games - 2026 - 100% offline
   ===================================================================== */

:root{
  --w95-face:#c0c0c0;
  --w95-light:#ffffff;
  --w95-shadow:#808080;
  --w95-dark:#000000;
  --w95-title:#000080;
  --w95-title2:#1084d0;
  --w95-titletext:#ffffff;
  --w95-desktop:#008080;
  --room-scale:1;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:#05060a;
  color:#e8e8e8;
  font-family:Tahoma,"MS Sans Serif","Segoe UI",Verdana,sans-serif;
  font-size:12px;
  overflow:hidden;
  -webkit-font-smoothing:none;
  user-select:none;
  cursor:default;
}

/* ---------------------------------------------------------------------
   ROOM: 1600x900 design space, scaled to fit the viewport
   --------------------------------------------------------------------- */
#viewport{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 12%, #14161d 0%, #0a0b10 45%, #05060a 100%);
}
#room{
  position:relative;
  flex:0 0 auto;
  width:1600px; height:900px;
  transform:scale(var(--room-scale));
  transform-origin:center center;
  will-change:transform;
}
#rig{ position:absolute; inset:0; width:1600px; height:900px; display:block; }

/* monitor face: the actual picture of the simulated PC.
   z-index 2 keeps the room glow and room vignette BEHIND the tube - they used to
   paint over the picture and wash it out. */
#screenWrap{
  position:absolute; left:380px; top:140px; width:840px; height:630px;
  z-index:2;
  background:#000;
  box-shadow:
    0 0 0 2px #0d0d0d,
    inset 0 0 60px rgba(0,0,0,.95);
  overflow:hidden;
}
#screen{ position:absolute; inset:0; width:840px; height:630px; display:block; background:#000; }
#glass{ position:absolute; inset:0; width:840px; height:630px; display:block; pointer-events:none; }
#screenHud{ position:absolute; inset:0; pointer-events:none; }

/* phosphor glow spilling onto the bezel + room (behind the tube) */
#roomFade{
  position:absolute; left:300px; top:60px; width:1000px; height:790px;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(58% 58% at 50% 50%, rgba(150,205,255,.20), rgba(120,180,255,.07) 55%, rgba(0,0,0,0) 78%);
  mix-blend-mode:screen;
  opacity:.55;
  transition:opacity .5s linear, background .5s linear;
}
#vignetteRoom{
  position:absolute; inset:0; pointer-events:none;
  z-index:1;
  background:radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,.45) 90%, rgba(0,0,0,.78) 100%);
}

/* power/reset/turbo/degauss + drive bay click targets on the tower */
#hotspots{ position:absolute; inset:0; pointer-events:none; }
.hot{
  position:absolute; pointer-events:auto; padding:0; margin:0;
  background:transparent; border:0; cursor:pointer;
  border-radius:4px;
  transition:background .12s linear, box-shadow .12s linear;
}
.hot:hover{
  background:rgba(255,255,255,.09);
  box-shadow:0 0 14px rgba(180,220,255,.35), inset 0 0 0 1px rgba(255,255,255,.25);
}
.hot:active{ background:rgba(255,255,255,.16); }
#hot-power  { left:1312px; top:352px; width:78px;  height:78px; border-radius:50%; }
#hot-reset  { left:1330px; top:452px; width:44px;  height:44px; border-radius:50%; }
#hot-turbo  { left:1404px; top:452px; width:64px;  height:40px; border-radius:6px; }
#hot-degauss{ left:398px;  top:100px; width:60px;  height:34px; border-radius:5px; }
#hot-floppy { left:1330px; top:548px; width:150px; height:26px; border-radius:3px; }
#hot-cd     { left:1330px; top:590px; width:150px; height:34px; border-radius:3px; }

/* ---------------------------------------------------------------------
   FRONT-END SHELL (real world dialogs, crisp - not warped by the tube)
   --------------------------------------------------------------------- */
#shell{ position:fixed; inset:0; pointer-events:none; z-index:50; }
#shell .dialog{ pointer-events:auto; }

.dialog{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  min-width:420px; max-width:min(880px,92vw);
  max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--w95-face);
  color:#000;
  border:2px solid;
  border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:4px 4px 0 rgba(0,0,0,.55), 0 26px 70px rgba(0,0,0,.75);
  animation:dlgIn .14s ease-out;
}
@keyframes dlgIn{ from{ transform:translate(-50%,-50%) scale(.96); opacity:.4 } to{ transform:translate(-50%,-50%) scale(1); opacity:1 } }
.dialog.hidden{ display:none; }

.titlebar{
  display:flex; align-items:center; gap:8px;
  height:24px; padding:0 3px 0 6px;
  background:linear-gradient(90deg,var(--w95-title) 0%,var(--w95-title2) 100%);
  color:var(--w95-titletext);
  font-weight:bold; font-size:12px; letter-spacing:.02em;
  flex:0 0 auto;
}
.titlebar .titles{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.titlebar .tb-txt{ font-weight:normal; opacity:.85; font-size:11px; }
.tb-btns{ display:flex; gap:2px; }
.tb-btn{
  width:18px; height:18px; line-height:15px; text-align:center;
  background:var(--w95-face); color:#000;
  border:1px solid;
  border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  font-size:11px; font-weight:bold; cursor:pointer;
}
.tb-btn:active{ border-color:var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark); }

.dialogbody{ padding:12px; overflow:hidden; display:block; flex:1 1 auto; }
.dialogbody.scroll{ overflow:auto; max-height:64vh; }
.dialogfoot{
  display:flex; gap:8px; justify-content:flex-end;
  padding:8px 12px 12px; border-top:1px solid var(--w95-shadow);
  flex:0 0 auto;
}

/* Windows 95 buttons */
.w95btn{
  font-family:inherit; font-size:12px; color:#000;
  background:var(--w95-face);
  border:2px solid;
  border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  padding:4px 14px; min-width:78px; cursor:pointer;
  text-align:center;
}
.w95btn:hover{ background:#cacaca; }
.w95btn:active{
  border-color:var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow:inset 1px 1px 0 #808080;
  padding:5px 13px 3px 15px;
}
.w95btn.big{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-width:0; padding:9px 12px; text-align:left; width:100%;
}
.w95btn.big b{ font-size:14px; }
.w95btn.big i{ font-style:normal; font-size:11px; color:#404040; }
.w95btn.big.danger b{ color:#7a0000; }
.w95btn:focus{ outline:1px dotted #000; outline-offset:-4px; }

.menu-body{ display:flex; flex-direction:column; gap:12px; width:min(760px,88vw); }
.menu-brand{
  background:#0b0b12; color:#dfe6ff; padding:10px 14px; text-align:center;
  border:2px solid; border-color:#808080 #fff #fff #808080;
  background-image:
    linear-gradient(180deg, rgba(80,120,255,.22), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.brand-line1{ font-size:30px; font-weight:bold; letter-spacing:.06em; color:#eef3ff;
  text-shadow:0 0 14px rgba(120,170,255,.75), 0 2px 0 #000; }
.brand-line2{ font-size:15px; letter-spacing:.36em; color:#9fd0ff; margin-top:4px; }
.brand-line3{ font-size:11px; color:#7b8aa8; margin-top:6px; letter-spacing:.08em; }
.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.menu-grid .w95btn.big:first-child{ grid-column:1 / span 2; }
.menu-foot{
  display:flex; justify-content:space-between; font-size:11px; color:#333;
  border-top:1px solid var(--w95-shadow); padding-top:6px;
}
.blink-slow{ animation:blink 1.6s steps(2,end) infinite; color:#004000; }
@keyframes blink{ 50%{ opacity:.15 } }

.pause-body{ display:flex; flex-direction:column; gap:7px; width:min(460px,86vw); }

h4{ margin:14px 0 6px; font-size:13px; letter-spacing:.04em; color:#000080; }
h4:first-child{ margin-top:0; }
p{ margin:6px 0; line-height:1.55; font-size:12px; }
ul{ margin:6px 0 6px 18px; padding:0; line-height:1.6; }
code{ background:#e6e6e6; border:1px solid #999; padding:0 3px; font-family:"Lucida Console",Consolas,monospace; font-size:11px; }
.fine{ font-size:11px; color:#404040; }

.credits-body{ width:min(620px,86vw); }
.credit-logo{ text-align:center; margin:6px 0 16px; }
.cl-1{ font-size:34px; font-weight:bold; letter-spacing:.02em; color:#000080;
  text-shadow:2px 2px 0 #b9b9ff; }
.cl-2{ font-size:14px; letter-spacing:.62em; color:#404040; margin-top:2px; }
.credits-table{ width:100%; border-collapse:collapse; font-size:12px; }
.credits-table td{ padding:4px 6px; border-bottom:1px solid #b0b0b0; vertical-align:top; }
.credits-table td:first-child{ color:#404040; width:52%; }
.credits-table td:last-child{ text-align:right; }

.report-body{ font-family:"Lucida Console",Consolas,monospace; font-size:12px;
  white-space:pre-wrap; background:#000; color:#41ff6a; padding:12px; width:min(640px,84vw);
  min-height:220px; border:2px solid; border-color:#808080 #fff #fff #808080;
  text-shadow:0 0 6px rgba(65,255,106,.6); }

.row{ display:flex; align-items:center; gap:12px; margin:9px 0; }
.row label{ width:170px; flex:0 0 auto; }
.row input[type=range]{ flex:1 1 auto; accent-color:#000080; }
.row input[type=checkbox]{ width:16px; height:16px; accent-color:#000080; }
#dlg-settings .dialogbody{ width:min(520px,86vw); }

#bootBadge{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  font-size:10px; letter-spacing:.28em; color:#5d6478; pointer-events:none;
  text-shadow:0 0 8px rgba(0,0,0,.9);
}

/* ---------------------------------------------------------------------
   PANIC: the one control a virus can never cover. It lives outside the
   tube (and outside the warped canvas), so a dialog storm, a crawl or a
   lockout can never hide it.
   --------------------------------------------------------------------- */
#panicBtn{
  position:absolute; right:16px; bottom:16px;
  pointer-events:auto; z-index:60;
  display:flex; align-items:center; gap:8px;
  font-family:inherit; font-size:12px; color:#000;
  background:var(--w95-face);
  border:2px solid;
  border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080, 0 8px 22px rgba(0,0,0,.65);
  padding:7px 14px; cursor:pointer;
}
#panicBtn b{ color:#7a0000; letter-spacing:.04em; }
#panicBtn span{
  font-size:10px; color:#404040; letter-spacing:.1em;
  border-left:1px solid var(--w95-shadow); padding-left:8px;
}
#panicBtn:hover{ background:#d2d2d2; }
#panicBtn:active{
  border-color:var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow:inset 1px 1px 0 #808080;
  padding:8px 13px 6px 15px;
}
#panicBtn.hidden{ display:none; }

@media (max-width:820px){
  .menu-grid{ grid-template-columns:1fr; }
  .menu-grid .w95btn.big:first-child{ grid-column:1; }
  .brand-line1{ font-size:22px; }
}