/* Sizes and colors measured 1:1 from thumbnail/P6.webp (1024x768) */
html, body {
  margin: 0;
  height: 100%;
  background: #000;
}

/* blurred background_widescreen.png (pre-blurred 800x450 WebP, source: bg_blur.webp),
   inlined so it paints together with the box */
html {
  background: #000 url("data:image/webp;base64,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") center / cover no-repeat;
}

body {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.panel {
  position: relative;
  flex: none;
  width: 380px;
  height: 74px;
  background: #767676;
  border-radius: 6px;
}

.label {
  position: absolute;
  left: 16px;
  top: 10px;
  font: bold 10px/10px Tahoma, Verdana, sans-serif;
  color: #fff;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

.trough {
  position: absolute;
  left: 20px;
  top: 34px;
  box-sizing: border-box;
  width: 340px;
  height: 24px;
  padding: 3px;
  display: flex;
  gap: 4px;
  background: #555;
  border: 1px solid;
  border-color: #343434 #b7b7b7 #b7b7b7 #343434;
}

.seg {
  flex: none;
  width: 8px;
  height: 16px;
  background: #fff;
}

/* keep the 380px panel on screen for narrow phones */
@media (max-width: 411px) {
  .panel { transform: scale(0.82); }
}

/* Windows XP arrow cursor (from windows-xp-1.zip, converted to PNG) */
html, body, body * {
  cursor: url("cursors/arrow.png") 10 10, default;
}

/* ---------- 2004 skin: green VGUI dialog, measured 1:1 from thumbnail/2004loading.jpg ---------- */
.vgui { display: none; }
html.old .panel { display: none; }
html.old .vgui {
  display: block;
  position: relative;
  flex: none;
  width: 379px;
  height: 112px;
  font-family: Tahoma, Verdana, sans-serif;
  color: #d8ded3;
  background: #4b5743;
  border: 1px solid;
  border-color: #869189 #262b20 #262b20 #869189;
  -webkit-font-smoothing: none;
}
.vgui-icon { position: absolute; left: 5px; top: 6px; width: 17px; height: 17px; }
.vgui-title {
  position: absolute;
  left: 46px;
  top: 9px;
  font: bold 10px/10px Tahoma, Verdana, sans-serif;
  letter-spacing: 0.5px;
  color: #fff;
}
.vgui-status {
  position: absolute;
  left: 18px;
  top: 36px;
  font: 13px/15px Tahoma, Verdana, sans-serif;
  color: #eef2ea;
}
.vgui-trough {
  position: absolute;
  left: 19px;
  top: 63px;
  box-sizing: border-box;
  width: 260px;
  height: 24px;
  padding: 3px 5px;
  display: flex;
  gap: 4px;
  background: #3c4534;
  border: 1px solid;
  border-color: #20291a #899080 #899080 #20291a;
}
.vgui-trough .seg { background: #c4b556; }
.vgui-btn {
  position: absolute;
  padding: 0;
  font: 12px Tahoma, Verdana, sans-serif;
  color: #d8ded3;
  background: #4b5743;
  border: 1px solid;
  border-color: #889480 #202b1a #202b1a #889480;
}
.vgui-btn:active { border-color: #202b1a #889480 #889480 #202b1a; }
.vgui-close { left: 353px; top: 7px; width: 18px; height: 17px; font-size: 11px; line-height: 1; color: #a0aa95; }
.vgui-cancel { left: 287px; top: 63px; width: 72px; height: 24px; padding-left: 5px; text-align: left; }

@media (max-width: 411px) {
  html.old .vgui { transform: scale(0.82); }
}