/* ============================================================
   Britannica CD 2000 — period desktop & window chrome
   Win95/98-era system surfaces: desktop, windows, menus,
   buttons, bevels, dialogs, taskbar, status bars, scrollbars.
   ============================================================ */

:root {
  --gray: #c0c0c0;
  --gray-lt: #dfdfdf;
  --gray-dk: #808080;
  --black: #0a0a0a;
  --navy: #000080;
  --navy-2: #1084d0;
  --eb-navy: #0b1c3f;
  --eb-navy-2: #16295c;
  --eb-gold: #c9a227;
  --eb-gold-lt: #e6c86e;
  --link: #0000ee;
  --visited: #551a8b;
  --ui-font: Tahoma, "MS Sans Serif", "Segoe UI", Geneva, Verdana, sans-serif;
  --serif: "Times New Roman", Times, serif;
  --hourglass: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M6 2h12v3l-4 6 4 6v5H6v-5l4-6-4-6z' fill='%23fff' stroke='%23000' stroke-width='1.5'/><path d='M8 4h8l-3.2 5H11.2z' fill='%23008080'/><path d='M11.2 16h1.6L16 21H8z' fill='%23ffff00'/></svg>") 12 12, wait;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #008080;
  font-family: var(--ui-font);
  font-size: 11px;
  color: #000;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

body.busy, body.busy * { cursor: var(--hourglass) !important; }

::selection { background: var(--navy); color: #fff; }

/* ---------- desktop ---------- */
#desktop {
  position: fixed;
  inset: 0;
  background: #008080;
  overflow: hidden;
}
#desktop.boot-glow { animation: crt-on 900ms ease-out 1; }
@keyframes crt-on {
  0% { filter: brightness(0); transform: scaleY(0.004); }
  35% { filter: brightness(2.2); transform: scaleY(0.006); }
  60% { filter: brightness(1.2); transform: scaleY(1.02); }
  100% { filter: brightness(1); transform: scaleY(1); }
}

#desktop-icons {
  position: absolute;
  top: 10px;
  left: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 14px 8px;
  max-height: calc(100% - 60px);
  align-content: flex-start;
}
#windows-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 30px;
  overflow: hidden;
}
.desktop-icon {
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
  border: 1px dotted transparent;
}
.desktop-icon.selected { background: rgba(0,0,128,0.45); border-color: #fff; }
.desktop-icon.selected .di-label { color: #fff; }
.desktop-icon .di-art { width: 34px; height: 34px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.55)); }
.di-label {
  color: #fff;
  font-size: 11px;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
  line-height: 1.25;
  max-width: 76px;
  overflow-wrap: break-word;
}

#desktop-hint {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  padding: 7px 12px 7px 14px;
  font-size: 11px;
  border-radius: 3px;
  z-index: 5;
}
#desktop-hint::after {
  content: "";
  position: absolute;
  left: 16px; bottom: -6px;
  border: 6px solid transparent;
  border-top-color: #ffffe1;
  border-bottom: 0;
  filter: drop-shadow(0 1px 0 #000);
}
#desktop-hint b { color: var(--navy); }

/* ---------- taskbar ---------- */
#taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: var(--gray);
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 var(--gray-dk) inset;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 2px;
  z-index: 5000;
}
#start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px 0 4px;
  min-width: 58px;
  justify-content: center;
  font: bold 11px var(--ui-font);
}
#start-button.active {
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  background: #c0c0c0;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25);
}
.start-flag {
  width: 15px; height: 15px;
  background:
    linear-gradient(135deg, #ff3b30 0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ff3b30 75%),
    #fff;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 45% 50%, 100% 60%, 100% 100%, 0 100%, 0 60%, 55% 50%, 0 40%);
  border: 1px solid #7a0f0a;
}
#task-buttons {
  flex: 1;
  display: flex;
  gap: 3px;
  overflow: hidden;
}
.task-button {
  min-width: 60px;
  max-width: 160px;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
}
.task-button .tb-icon { width: 14px; height: 14px; flex: none; }
.task-button.active {
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25);
  background: #c0c0c0;
  font-weight: bold;
}
#tray {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  border-style: solid;
  border-width: 1px;
  box-shadow: inset 1px 1px 0 #fff;
}
#tray-cd {
  width: 15px; height: 15px;
  background: radial-gradient(circle at 50% 50%, #d8d8e8 0 3px, #9aa4c0 3px 4px, #6a76a0 4px 6px, #d8d8e8 6px);
  border-radius: 50%;
  border: 1px solid #4a5578;
  position: relative;
}
#tray-cd.spinning::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: conic-gradient(rgba(255,255,255,0.85) 0 12deg, transparent 12deg 72deg);
  animation: cdspin 0.9s linear infinite;
}
@keyframes cdspin { to { transform: rotate(360deg); } }
#tray-sound {
  width: 17px; height: 15px;
  padding: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14'><path d='M2 5h3l4-4v12l-4-4H2z' fill='%23000'/><path d='M11 4c1.5 1.5 1.5 5 0 6M13 2c2.5 2.5 2.5 8 0 10' stroke='%23000' fill='none' stroke-width='1.3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
#tray-sound.muted {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14'><path d='M2 5h3l4-4v12l-4-4H2z' fill='%23000'/><path d='M11 4l5 6M16 4l-5 6' stroke='%23c00' stroke-width='1.6'/></svg>");
}
#tray-clock { font-size: 11px; min-width: 52px; text-align: center; }

/* ---------- start menu ---------- */
#start-menu {
  position: absolute;
  left: 2px;
  bottom: 32px;
  width: 210px;
  background: var(--gray);
  border: 1px solid;
  border-color: #dfdfdf #0a0a0a #0a0a0a #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--gray-dk), 3px 3px 6px rgba(0,0,0,0.4);
  z-index: 6000;
  display: flex;
  padding: 2px;
}
.start-banner {
  width: 26px;
  background: linear-gradient(180deg, #000080, #1084d0);
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  font: bold 15px var(--ui-font);
  letter-spacing: 1px;
  padding: 8px 2px 4px;
  margin-right: 3px;
}
.start-items { flex: 1; display: flex; flex-direction: column; }
.start-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 11px;
}
.start-item:hover { background: var(--navy); color: #fff; }
.start-item .si-icon { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.start-sep { height: 1px; margin: 3px 4px; background: var(--gray-dk); border-bottom: 1px solid #fff; }

/* ---------- bevels & controls ---------- */
.bevel-out, .btn95, .win95-titlebar, .field95 {
  border: 1px solid;
  border-color: #dfdfdf #0a0a0a #0a0a0a #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--gray-dk);
}
.bevel-in, .field95 {
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow: inset 1px 1px 0 #0a0a0a, inset -1px -1px 0 #dfdfdf;
  background: #fff;
}

.btn95 {
  background: var(--gray);
  font: 11px var(--ui-font);
  padding: 4px 12px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.btn95:active:not(:disabled), .btn95.pressed {
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
  padding: 5px 11px 3px 13px;
}
.btn95:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn95:disabled { color: var(--gray-dk); text-shadow: 1px 1px 0 #fff; }
.btn95.primary { font-weight: bold; border: 2px solid #000; border-radius: 0; min-width: 74px; }

.field95 {
  font: 11px var(--ui-font);
  padding: 3px 4px;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
input.field95 { width: 100%; }

.toolbar-btn {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 11px var(--ui-font);
  color: #000;
}
.toolbar-btn:hover:not(:disabled) { border-color: #fff #808080 #808080 #fff; }
.toolbar-btn:active:not(:disabled), .toolbar-btn.pressed {
  border-color: #808080 #fff #fff #808080;
  background: #c8c8c8;
}
.toolbar-btn:disabled { color: #7d7d7d; opacity: 0.6; }
.toolbar-btn:disabled svg { opacity: 0.4; }

/* ---------- windows ---------- */
.win95 {
  position: absolute;
  background: var(--gray);
  border: 1px solid;
  border-color: #dfdfdf #0a0a0a #0a0a0a #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--gray-dk), 4px 4px 9px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  min-height: 110px;
  padding: 2px;
}
.win95.maximized { box-shadow: none; }
.win95-dialog .win-body { padding: 12px; }

.win95-titlebar {
  height: 20px;
  background: linear-gradient(90deg, var(--navy), var(--navy-2));
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 0 3px;
  font: bold 11px var(--ui-font);
  box-shadow: none;
  cursor: default;
  flex: none;
  border: none;
  border-top: 1px solid #dfdfdf;
  user-select: none;
}
.win95.focused .win95-titlebar { background: linear-gradient(90deg, var(--navy), var(--navy-2)); }
.win95:not(.focused) .win95-titlebar { background: linear-gradient(90deg, #7a7a7a, #b5b5b5); }
.win95:not(.focused) .win-body { filter: saturate(0.85); }
.win-title-icon { width: 14px; height: 14px; flex: none; }
.win-title-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2px; }
.win-title-buttons { display: flex; gap: 2px; }
.tbtn {
  width: 16px; height: 14px;
  background: var(--gray);
  border: 1px solid;
  border-color: #fff #4a4a4a #4a4a4a #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tbtn:active { border-color: #4a4a4a #fff #fff #4a4a4a; }
.tbtn svg { display: block; }
.tbtn.disabled { pointer-events: none; }
.tbtn.disabled svg { opacity: 0.4; }

.win-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative; }

/* window resize handles */
.win95 .rsz { position: absolute; z-index: 2; }
.rsz-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rsz-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rsz-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rsz-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rsz-se { right: -3px; bottom: -3px; width: 10px; height: 10px; cursor: nwse-resize; }
.rsz-sw { left: -3px; bottom: -3px; width: 10px; height: 10px; cursor: nesw-resize; }
.rsz-ne { right: -3px; top: -3px; width: 10px; height: 10px; cursor: nesw-resize; }
.rsz-nw { left: -3px; top: -3px; width: 10px; height: 10px; cursor: nwse-resize; }

/* ---------- menus ---------- */
.menubar {
  display: flex;
  gap: 1px;
  padding: 1px 2px;
  background: var(--gray);
  flex: none;
  border-bottom: 1px solid #fff;
  box-shadow: 0 1px 0 var(--gray-dk);
}
.menubar-item { padding: 3px 8px 4px; font: 11px var(--ui-font); background: transparent; border: 1px solid transparent; }
.menubar-item:hover, .menubar-item.open { background: var(--navy); color: #fff; }
.menu-popup {
  position: absolute;
  min-width: 168px;
  background: var(--gray);
  border: 1px solid;
  border-color: #dfdfdf #0a0a0a #0a0a0a #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--gray-dk), 3px 3px 6px rgba(0,0,0,0.4);
  padding: 2px;
  z-index: 9500;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 22px;
  font: 11px var(--ui-font);
  position: relative;
  white-space: nowrap;
}
.menu-item:hover:not(.disabled) { background: var(--navy); color: #fff; }
.menu-item.disabled { color: var(--gray-dk); text-shadow: 1px 1px 0 #fff; }
.menu-item .mi-check { position: absolute; left: 6px; font-size: 10px; }
.menu-item .mi-label { flex: 1; }
.menu-item .mi-accel { color: inherit; opacity: 0.65; padding-left: 18px; }
.menu-item .mi-arrow { font-size: 9px; }
.menu-sep { height: 1px; margin: 3px 2px; background: var(--gray-dk); border-bottom: 1px solid #fff; }

/* ---------- status bar ---------- */
.statusbar {
  height: 20px;
  flex: none;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--gray);
  border-top: 1px solid #fff;
}
.status-cell {
  border: 1px solid;
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow: inset 1px 1px 0 #0a0a0a00;
  padding: 1px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-cell.grow { flex: 1; }

/* ---------- dialogs ---------- */
.modal-veil {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
  z-index: 9000;
}
.dlg-buttons { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.dlg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dlg-title { font: bold 12px var(--ui-font); margin-bottom: 8px; }

/* progress indicator inside windows */
.prog95 {
  height: 16px;
  border: 1px solid;
  border-color: var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow: inset 1px 1px 0 #0a0a0a;
  background: #fff;
  padding: 1px;
  overflow: hidden;
}
.prog95 > div {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(90deg, var(--navy) 0 9px, #fff 9px 12px);
  background-size: 12px 100%;
  transition: width 160ms linear;
}

/* ---------- scrollbars (best-effort period skin) ---------- */
* { scrollbar-width: thin; scrollbar-color: #c0c0c0 #dfdfdf; }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #dfdfdf; }
::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #4a4a4a #4a4a4a #fff;
  box-shadow: inset -1px -1px 0 #808080;
}
::-webkit-scrollbar-thumb:hover { background: #d4d0c8; }
::-webkit-scrollbar-corner { background: #dfdfdf; }
::-webkit-scrollbar-button:single-button {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #4a4a4a #4a4a4a #fff;
  display: block;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M3.5 0 7 4H0z' fill='%23000'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M3.5 4 0 0h7z' fill='%23000'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7'><path d='M0 3.5 4 0v7z' fill='%23000'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7'><path d='M4 3.5 0 0v7z' fill='%23000'/></svg>");
}

/* ---------- splash ---------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: radial-gradient(120% 100% at 50% 30%, #14285a 0%, #0b1c3f 55%, #060f24 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splash-in 420ms ease-out;
}
#splash[hidden] { display: none !important; }
@keyframes splash-in { from { opacity: 0; } }
.splash-inner {
  width: min(480px, 88vw);
  text-align: center;
  color: #fff;
  position: relative;
}
.splash-emblem {
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  background: conic-gradient(from 180deg at 50% 60%, #8a6d1c, #e6c86e, #8a6d1c, #f2dfa0, #8a6d1c);
  clip-path: polygon(50% 0, 63% 18%, 82% 12%, 84% 32%, 100% 42%, 88% 58%, 90% 78%, 68% 76%, 50% 92%, 32% 76%, 10% 78%, 12% 58%, 0 42%, 16% 32%, 18% 12%, 37% 18%);
  filter: drop-shadow(0 0 14px rgba(230, 200, 110, 0.55));
  animation: emblem-glow 2.4s ease-in-out infinite;
}
@keyframes emblem-glow { 50% { filter: drop-shadow(0 0 22px rgba(230,200,110,0.85)); } }
.splash-wordmark {
  font: 400 30px/1 "Times New Roman", Times, serif;
  letter-spacing: 0.32em;
  color: #f2dfa0;
  text-shadow: 0 1px 0 #6a5416, 0 0 18px rgba(230,200,110,0.35);
}
.splash-wordmark2 {
  font: 700 44px/1.05 "Times New Roman", Times, serif;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #f7e9bd, #d9b955 55%, #9a7c25);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  margin-top: 4px;
}
.splash-edition {
  margin-top: 12px;
  font: 400 11px var(--ui-font);
  letter-spacing: 0.28em;
  color: #9db0dd;
}
.splash-progress {
  width: 76%;
  margin: 26px auto 8px;
  height: 14px;
  border: 1px solid #7a8bc0;
  box-shadow: inset 1px 1px 0 #050c1e;
  background: #0a1631;
  padding: 1px;
}
.splash-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #f2dfa0, #c9a227);
  background-size: 100% 100%;
  transition: width 180ms linear;
}
.splash-status {
  min-height: 15px;
  font: 11px var(--ui-font);
  color: #c9d4f2;
}
.splash-copy {
  position: absolute;
  bottom: -64px;
  left: 0; right: 0;
  font: 10px var(--ui-font);
  color: #5f709d;
  letter-spacing: 0.04em;
}
.splash-skip {
  margin-top: 16px;
  background: transparent;
  color: #9db0dd;
  border: 1px solid #45507a;
  padding: 3px 10px;
  font: 11px var(--ui-font);
}
.splash-skip:hover { color: #fff; border-color: #9db0dd; }
.splash-disc {
  position: absolute;
  right: 7%;
  bottom: 9%;
  width: 74px; height: 74px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0b1c3f 0 14px, transparent 14px),
    conic-gradient(#c9a227 0 8deg, #2a3c74 8deg 46deg, #46609e 46deg 74deg, #22315e 74deg 150deg, #c9a227 150deg 158deg, #22315e 158deg 250deg, #46609e 250deg 288deg, #22315e 288deg 352deg, #c9a227 352deg);
  box-shadow: 0 0 18px rgba(120,140,200,0.35), inset 0 0 0 1px rgba(255,255,255,0.2);
  animation: cdspin 1.15s linear infinite;
  opacity: 0.85;
}
@keyframes cdspin { to { transform: rotate(360deg); } }

/* utility */
.hidden { display: none !important; }
.dragging, .dragging * { cursor: default !important; }