/* ===========================================================
   Windows 3.11 for Workgroups — core.css
   Base reset, fonts, desktop chrome, colour schemes
   =========================================================== */

@font-face {
  font-family: "W311Sans";
  src: local("MS Sans Serif"), local("Microsoft Sans Serif"), local("Liberation Sans"), local("Arial");
}

/* The IBM VGA character ROM, for everything drawn before Windows starts:
   POST, the DOS boot messages, the BIOS password prompt. The boot screen
   asked for "Perfect DOS VGA 437" for a long time without anything ever
   supplying it, so it silently fell back to Courier New for every visitor.
   These are the real code page 437 glyphs rather than a recreation of them.
   Credit and licence: assets/fonts/README.txt (CC BY-SA 4.0, VileR). */
@font-face {
  font-family: "IBM VGA 437";
  src: url("../assets/fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display: block;   /* never flash Courier before the real thing loads */
}

:root{
  /* ---- "Windows Default" scheme (16-colour VGA) ---- */
  --w-desktop:        #c0c0c0;
  --w-active-title:   #000080;
  --w-active-title2:  #000080;
  --w-active-text:    #ffffff;
  --w-inactive-title: #808080;
  --w-inactive-title2:#808080;
  --w-inactive-text:  #c0c0c0;
  --w-menu:           #c0c0c0;
  --w-menu-text:      #000000;
  --w-window-bg:      #ffffff;
  --w-window-text:    #000000;
  --w-btn-face:       #c0c0c0;
  --w-btn-shadow:     #808080;
  --w-btn-dkshadow:   #000000;
  --w-btn-hilight:    #ffffff;
  --w-btn-light:      #dfdfdf;
  --w-btn-text:       #000000;
  --w-frame:          #000000;
  --w-scrollbar:      #c0c0c0;
  --w-selected-bg:    #000080;
  --w-selected-text:  #ffffff;
  --w-cursor: default;
}

*{ box-sizing:border-box; }

/* The Windows 3.1 hourglass. Shown whenever the machine is "thinking" —
   a real 486 made you wait, and instant response is the least authentic
   thing this recreation could do. */
body.win-busy, body.win-busy *{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Crect x='3' y='1' width='10' height='1.8' fill='black'/%3E%3Crect x='3' y='13.2' width='10' height='1.8' fill='black'/%3E%3Cpath d='M4.3 2.8h7.4v2.1L8 8l3.7 3.1v2.1H4.3v-2.1L8 8 4.3 4.9z' fill='white' stroke='black' stroke-width='1'/%3E%3Cpath d='M5.5 3.6h5v1L8 6.5 5.5 4.6z' fill='black'/%3E%3Cpath d='M8 9.4l2.6 2.3v.9H5.4v-.9z' fill='black'/%3E%3C/svg%3E") 8 8, wait !important; }

html,body{
  margin:0; padding:0; width:100%; height:100%;
  overflow:hidden;
  font-family:"W311Sans","MS Sans Serif","Microsoft Sans Serif",Arial,sans-serif;
  font-size:13.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  user-select:none;
  cursor:default;
}

::selection{ background:var(--w-selected-bg); color:var(--w-selected-text); }

/* ---------------- Boot screen ---------------- */
/* The VGA font, the 8x16 metrics and the disabled smoothing belong to the
   TEXT of the boot screen only. #logo-screen — the splash — is a child of
   #boot-screen, so putting them here meant the splash inherited them too
   and its wordmark rendered unsmoothed and jagged. Keep the padding and
   the black ground on the parent: the splash is positioned against the
   padding box, which is what insets it from the screen edges the way the
   real 640x480 bitmap was. */
#boot-screen{
  position:fixed; inset:0; background:#000; color:#fff;
  padding:24px; z-index:9999;
}
#boot-text{
  font-family:"IBM VGA 437","Perfect DOS VGA 437","Courier New",monospace;
  /* The glyphs are an 8x16 cell, so at 24px they are 12x24 and the lines
     sit directly on top of one another with no leading — VGA text mode had
     no gap between rows, and any line-height above 1 reads as a terminal
     emulator rather than as the machine itself. */
  font-size:24px; line-height:1;
  /* Bitmap glyphs must not be smoothed: antialiasing puts grey fringes on
     edges that were hard pixels on the real hardware. */
  -webkit-font-smoothing:none;
  font-smooth:never;
  white-space:pre-wrap;
}
#boot-screen.hidden{ display:none; }

/* The real Windows for Workgroups 3.11 startup screen: a STATIC bitmap on
   light blue, with the flag dissolving into squares to the left and heavy
   black type. No animation of any kind — it never moved.

   It was a fixed 640x480 image, centred on black. That matters: sizing the
   pieces independently in px makes them drift apart as the window grows, so
   everything below is expressed in em against one font-size that scales the
   whole panel as a unit. 1em = 10 original pixels, so the panel is 64 x 48em
   and every measurement is a tenth of its value in the real bitmap. */
#logo-screen{
  position:absolute; inset:0; background:#000;
  display:flex; align-items:center; justify-content:center;
  color:#000; text-align:center;
  /* 1em = 10 original pixels, so 10px pins the panel at its true 640x480 and
     it is centred on black rather than stretched. It shrinks below that only
     when the window is too small, using whichever of width or height runs out
     first, minus the 24px padding #boot-screen holds on each side. */
  font-size:min(10px, calc((100vw - 48px) / 64), calc((100vh - 48px) / 48));
}
#logo-screen.hidden{ display:none; }

.logo-panel{
  width:64em; height:48em;
  background:#63a2be;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* the lighter keyline inset from the panel edge */
  box-shadow: inset 0 0 0 .2em #7fb8cf, inset 0 0 0 .9em #63a2be, inset 0 0 0 1.1em #4d8ba6;
  position:relative;
}

#logo-bitmap{
  /* The real bitmap, when one is present: drawn at its own size and centred
     both ways, with black all around it. Nearest-neighbour so an era bitmap
     stays crisp if it ever does have to shrink. The old cap of 620px left it
     marooned in the middle of a large screen; it is shown at its own size,
     centred both ways, and only shrinks if the window is smaller than it. */
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  image-rendering:pixelated;
}
#logo-bitmap.hidden{ display:none; }
/* when a real bitmap is supplied it replaces the vector recreation entirely */
#logo-screen.has-bitmap .logo-panel{ display:none; }

.logo-inner{ display:flex; flex-direction:column; align-items:center; }

/* Flag plus its dissolving trail. The SVG viewBox is 300x190 and holds both,
   so it is sized as one block: 27em wide is the pair at the proportion the
   bitmap had them. */
.logo-flag{ width:27em; height:17.1em; margin-bottom:.4em; }

.logo-word{ display:flex; align-items:flex-end; justify-content:center; line-height:.86; }
/* "Microsoft" ran vertically up the left-hand side of the W, reading bottom
   to top — not horizontally in front of it. */
.logo-word .ms{
  font-family:"W311Sans",Arial,sans-serif; font-weight:bold;
  font-size:1.45em; letter-spacing:-.02em;
  writing-mode:vertical-rl; transform:rotate(180deg);
  margin-right:.25em; padding-bottom:.2em;
  align-self:flex-end;
}
.logo-word .ms sup{ font-size:.6em; }
.logo-word .win{
  font-family:Impact,Haettenschweiler,"Arial Narrow","Arial Black",sans-serif;
  font-size:5.6em; letter-spacing:-.02em; font-weight:normal;
  transform:scaleX(1.04); transform-origin:left bottom;
}
.logo-word .tm{ font-size:.95em; padding-bottom:3.4em; }

.logo-fw{
  font-family:Impact,Haettenschweiler,"Arial Narrow","Arial Black",sans-serif;
  font-size:3.1em; letter-spacing:-.01em; margin-top:-.05em;
}
/* F and W were set a size larger than the letters that follow them. */
.logo-fw .cap{ font-size:1.2em; }

.logo-version{
  margin-top:1.7em; font-family:"W311Sans",Arial,sans-serif;
  font-size:1.7em; letter-spacing:.02em;
}
.logo-legal{
  margin-top:2.6em;
  font-family:"W311Sans",Arial,sans-serif; font-size:1.1em; line-height:1.45; color:#000;
}

/* ---------------- Desktop ---------------- */
#desktop{
  position:fixed; inset:0; background:var(--w-desktop);
  overflow:hidden;
}
#desktop.hidden{ display:none; }

#desktop-icons{
  position:absolute; top:6px; left:6px; bottom:40px; right:6px;
  display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start;
  gap:2px;
}

#minimized-tray{
  position:absolute; left:4px; bottom:4px; right:4px; height:34px;
  display:flex; flex-direction:row; align-items:flex-end; gap:4px;
  pointer-events:none;
}
#minimized-tray > *{ pointer-events:auto; }

.hidden{ display:none !important; }

/* ---------------- CRT monitor simulation ----------------
   Purely decorative: pointer-events:none throughout so it can never
   swallow a click. Sits above the desktop but below nothing that
   matters, because it is not interactive at all. */
#crt-overlay{
  position:fixed; inset:0; z-index:10000;
  pointer-events:none;
  mix-blend-mode:multiply;
}
#crt-overlay.crt-off{ display:none; }
#crt-overlay > div{ position:absolute; inset:0; pointer-events:none; }

/* horizontal scanlines */
#crt-overlay .crt-scan{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,1) 0px,
    rgba(255,255,255,1) 1px,
    rgba(196,196,206,.90) 2px,
    rgba(196,196,206,.90) 3px);
  animation:crtFlicker 5.5s steps(60) infinite;
}
/* vertical shadow mask — the phosphor triads */
#crt-overlay .crt-mask{
  background:repeating-linear-gradient(
    to right,
    rgba(255,60,60,.028) 0px,
    rgba(60,255,60,.028) 1px,
    rgba(60,60,255,.028) 2px,
    rgba(255,255,255,0) 3px);
}
/* Glass vignette.
   Kept deliberately faint. Under mix-blend-mode:multiply a strong radial
   falloff drags the whole picture down toward the edges, and because
   Windows 3.1 is built from large flat fields of #c0c0c0 and white, that
   reads instantly as a lit dome rather than as a screen — the flatness
   IS the period look. Only the outermost few percent gets any falloff. */
#crt-overlay .crt-vig{
  background:radial-gradient(ellipse at 50% 50%,
    rgba(255,255,255,1) 88%,
    rgba(246,246,250,1) 97%,
    rgba(238,238,244,1) 100%);
}
@keyframes crtFlicker{
  0%,100%{ opacity:1; }
  47%{ opacity:.985; }
  48%{ opacity:.955; }
  49%{ opacity:.99; }
}
/* a very slightly warmer, softer picture underneath the glass */
body.crt-active #desktop, body.crt-active #boot-screen{
  filter:saturate(1.06) contrast(1.03);
}