/* The operating system around the museum: program windows, desktop icons, menus, dialogs,
   the shutdown / boot / blue-screen / screensaver overlays, and the programs themselves (Paint, Minesweeper...). */

/* the museum's scenes leave the empty desktop clickable (icons, right-click) */
.stage, .scene { pointer-events: none; }
.scene > .win { pointer-events: auto; }

.os-layer { inset: 0; pointer-events: none; position: absolute; }
.os-layer > * { pointer-events: auto; }

/* ---------- desktop icons (system column, next to the decade folders) ---------- */
.sys-icons {
  display: grid; gap: 2px; grid-auto-columns: 92px; grid-auto-flow: column; grid-template-rows: repeat(9, minmax(0, 84px));
  inset: 6px 100px 6px auto; position: absolute;
}
.sys-icons .icon { position: relative; }
.icon .ico32 { display: block; height: 32px; shape-rendering: crispEdges; width: 32px; }
.icon.is-sel .label { background: var(--select); outline: 1px dotted var(--title-text); outline-offset: -1px; }
.icon.is-sel .ico32 { filter: url(#sel-dither); }
.icon .shortcut { bottom: 0; height: 11px; left: 0; position: absolute; width: 11px; }
.icon .ico-wrap { position: relative; }
.icon input.rename {
  border: 1px solid #000; font: inherit; font-size: 12.5px; padding: 0 2px; text-align: center; width: 86px;
}

/* icons in title bars, menus and the Start menu */
.titlebar .ico32 { flex: none; height: 16px; width: 16px; }
.menu-items .mi .ico32 { flex: none; height: 26px; width: 26px; }
.submenu .mi .ico32 { flex: none; height: 20px; width: 20px; }
.ico32 { shape-rendering: crispEdges; }

/* ---------- program windows ---------- */
.oswin { left: 120px; min-height: 80px; min-width: 160px; position: absolute; top: 40px; }
.oswin .os-body { display: flex; flex: 1; flex-direction: column; min-height: 0; position: relative; }
.oswin.is-max { inset: 0 !important; height: auto !important; position: fixed; translate: none !important; width: auto !important; }
.oswin.is-max { bottom: calc(var(--tb-h) + var(--credit-h)) !important; }
.oswin .grip {
  bottom: 3px; cursor: nesw-resize; height: 13px; left: 3px; position: absolute; width: 13px;
  background:
    linear-gradient(45deg, transparent 0 22%, var(--hilight) 22% 30%, var(--shadow) 30% 40%, transparent 40% 52%, var(--hilight) 52% 60%, var(--shadow) 60% 70%, transparent 70%);
}
.oswin.is-max .grip { display: none; }
.oswin .statusbar { padding-inline-end: 14px; }
.oswin .menubar { position: relative; }
.oswin .menubar button { background: none; border: none; padding: 2px 7px; }
.oswin .menubar button.open { background: var(--select); color: var(--title-text); }

/* dropdown menus (also the desktop's right-click menu) */
.os-menu {
  background: var(--face); box-shadow: var(--raised-window); display: flex; flex-direction: column; min-width: 180px;
  padding: 3px; position: fixed; z-index: 120;
}
.os-menu .mi { font-size: 13px; gap: 6px; min-height: 24px; padding: 2px 6px 2px 18px; position: relative; white-space: nowrap; }
.os-menu .mi::after { display: none; }
.os-menu .mi .key { color: inherit; margin-inline-start: auto; padding-inline-start: 24px; }
.os-menu .mi[aria-checked="true"]::before { content: "✓"; font-size: 12px; inset-inline-start: 5px; position: absolute; }
.os-menu .mi:disabled { color: var(--shadow); cursor: default; text-shadow: 1px 1px var(--hilight); }
.os-menu .mi:disabled:hover, .os-menu .mi:disabled:focus { background: none; color: var(--shadow); }
.os-menu .mi b { font-weight: 700; }

/* ---------- taskbar: programs and tray ---------- */
.os-tasks { display: flex; flex: 0 1 auto; gap: 3px; height: 100%; min-width: 0; }
.os-tasks .tb { flex: 0 1 160px; font-weight: 400; justify-content: flex-start; min-width: 32px; overflow: hidden; }
.os-tasks .tb .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-tasks .tb[aria-pressed="true"] { background: var(--dither); box-shadow: var(--pressed); font-weight: 700; }
.os-tasks .tb .ico32 { height: 16px; width: 16px; }
.tray .tray-btn { background: none; border: none; display: flex; padding: 0; }
.tray .tray-btn .ico32 { height: 16px; width: 16px; }
.tray-clock { cursor: default; font-variant-numeric: tabular-nums; }

/* volume popup */
.vol-pop {
  align-items: center; background: var(--face); bottom: calc(var(--tb-h) + 2px); box-shadow: var(--raised-window);
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; position: fixed; z-index: 110;
}
.vol-pop input[type=range] { height: 110px; writing-mode: vertical-lr; direction: rtl; }
.vol-pop label { font-size: 12.5px; }

/* ---------- folder views (My Computer, Recycle Bin, drives) ---------- */
.os-folder .well { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.os-folder ul { display: grid; gap: 4px 2px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); list-style: none; }
.os-folder .fi .ico32 { height: 32px; width: 32px; }
.os-folder .fi.is-sel .label { background: var(--select); color: var(--title-text); }
.os-folder .fi.is-sel .ico32 { filter: url(#sel-dither); }
.os-folder .fi .label { word-break: break-word; }
.os-folder .empty { color: var(--text-muted); font-size: 13px; padding: 10px; }

/* ---------- message boxes and dialogs ---------- */
.os-dialog .dialog-body { padding: 14px 14px 10px; }
.os-msg-row { align-items: flex-start; display: flex; gap: 14px; }
.os-msg-row .ico32 { flex: none; height: 32px; width: 32px; }
.os-msg-row p { line-height: 1.5; max-width: 42ch; white-space: pre-line; }
.os-dialog .dialog-buttons { justify-content: center; }
.os-dialog .btn { min-width: 80px; }
.os-dialog label.radio { align-items: center; display: flex; gap: 6px; margin: 4px 0; }
.os-dialog .field { align-items: center; display: flex; gap: 8px; margin-top: 10px; }
.os-dialog .field input[type=text], .os-dialog select {
  background: var(--window); border: none; box-shadow: var(--sunken); flex: 1; font: inherit; min-height: 28px; padding: 3px 6px;
}
.os-tabs { display: flex; gap: 0; margin-bottom: -1px; padding-inline-start: 2px; position: relative; z-index: 1; }
.os-tabs button {
  background: var(--face); border: none; border-radius: 3px 3px 0 0; box-shadow: inset 1px 1px var(--hilight), inset -1px 0 var(--dark), inset -2px 0 var(--shadow);
  font-size: 13px; padding: 4px 12px 3px;
}
.os-tabs button[aria-selected="true"] { padding-bottom: 6px; position: relative; top: -2px; }
.os-tabpanel { box-shadow: var(--raised-window); padding: 12px; }
.os-tabpanel[hidden] { display: none; }

/* display properties: the little monitor */
.monitor { background: #c0c0c0; border-radius: 6px 6px 2px 2px; box-shadow: var(--raised); height: 120px; margin: 0 auto 24px; padding: 8px 8px 16px; position: relative; width: 170px; }
.monitor .scr { background: var(--desktop); box-shadow: var(--sunken-thin); height: 100%; overflow: hidden; position: relative; }
.monitor canvas { display: block; height: 100%; width: 100%; }
.monitor::after { background: #c0c0c0; bottom: -14px; box-shadow: var(--raised); content: ""; height: 10px; left: 55px; position: absolute; width: 60px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.swatches button { border: 1px solid #000; height: 20px; padding: 0; width: 20px; }
.swatches button[aria-pressed="true"] { outline: 2px solid var(--select); outline-offset: 1px; }
.listbox { background: var(--window); box-shadow: var(--sunken); height: 110px; overflow: auto; padding: 2px; }
.listbox button { background: none; border: none; display: block; font-size: 13px; padding: 1px 4px; text-align: start; width: 100%; }
.listbox button[aria-selected="true"] { background: var(--select); color: var(--title-text); }

/* ---------- full-screen overlays ---------- */
.os-dim { background: repeating-conic-gradient(rgba(0,0,0,.55) 0 25%, transparent 0 50%) 0 0 / 2px 2px; inset: 0; position: fixed; z-index: 150; }
.os-dim > .win { left: 50%; position: absolute; top: 45%; translate: -50% -50%; }
.power { background: #000; color: #c0c0c0; cursor: default; inset: 0; position: fixed; z-index: 300; }
.power .safe { align-items: center; color: #ff8c1a; display: flex; font-family: var(--display); font-size: clamp(22px, 4vw, 44px); inset: 0; justify-content: center; padding: 24px; position: absolute; text-align: center; }
.power .bios { direction: ltr; font: 15px/1.45 "Courier New", monospace; padding: 24px; text-align: left; white-space: pre-wrap; }
.power .splash {
  align-items: center; background: linear-gradient(#2c69c9, #8fc0ef 70%, #dfefff); display: flex; flex-direction: column;
  inset: 0; justify-content: center; overflow: hidden; position: absolute;
}
.power .splash .cloud { background: #fff; border-radius: 50%; filter: blur(2px); opacity: .85; position: absolute; }
.power .splash h1 { color: #fff; font-family: var(--display); font-size: clamp(30px, 6vw, 64px); position: relative; text-shadow: 2px 2px 0 #1a3f80; }
.power .splash h1 b { color: #ffe36b; font-family: var(--ui); }
.power .splash .bar { background: repeating-linear-gradient(90deg, #1a3f80 0 30px, #4f8be0 30px 60px, #9cc6f5 60px 90px); bottom: 0; height: 14px; left: 0; position: absolute; right: 0; animation: bootbar 1s linear infinite; }
@keyframes bootbar { to { background-position: 90px 0; } }
.power .wait { align-items: center; color: #fff; display: flex; font-family: var(--display); font-size: clamp(20px, 3vw, 34px); inset: 0; justify-content: center; position: absolute; }

.bsod { background: #0000aa; color: #fff; cursor: none; direction: ltr; display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 6vh 10vw; position: fixed; z-index: 310; }
.bsod pre { font: clamp(13px, 1.6vw, 20px)/1.5 "Courier New", monospace; margin: 0 auto; max-width: 80ch; white-space: pre-wrap; }
.bsod .label { background: #aaa; color: #0000aa; display: block; font-weight: 700; margin: 0 auto 1.5em; padding: 0 .4em; width: max-content; }

.saver { background: #000; cursor: none; inset: 0; position: fixed; z-index: 290; }
.saver canvas { display: block; height: 100%; width: 100%; }
.xyzzy { background: #fff; height: 1px; left: 0; pointer-events: none; position: fixed; top: 0; width: 1px; z-index: 400; }
.xyzzy.mine { background: #000; }

/* the credits easter egg */
.os-credits .sky { background: linear-gradient(#2b6fd0, #9cc8f2); flex: 1; min-height: 0; overflow: hidden; position: relative; }
.os-credits .cloud { background: #fff; border-radius: 50%; filter: blur(3px); opacity: .8; position: absolute; }
.os-credits .roll { color: #fff; font-size: 15px; inset-inline: 0; line-height: 1.6; position: absolute; text-align: center; text-shadow: 1px 1px 0 #13336b; top: 100%; }
.os-credits .roll h3 { color: #ffe36b; font-size: 18px; margin-top: 18px; }

/* ---------- phones: programs take the whole desktop ---------- */
@media (max-width: 820px) {
  .sys-icons { display: none; }
  .oswin { height: auto !important; inset: 0 !important; translate: none !important; width: auto !important; }
  .oswin .grip { display: none; }
  .os-tasks .tb { flex: 0 0 40px; justify-content: center; }
  .os-tasks .tb .label { display: none; }
  .tray-clock { display: none; }
  .os-menu .mi { min-height: 40px; }
}
@media (min-width: 821px) and (max-height: 600px) { .sys-icons { display: none; } }

/* ================= programs ================= */

/* Notepad */
.np { background: var(--window); border: none; box-shadow: var(--sunken); color: #000; flex: 1; font: 14px/1.4 "Courier New", "Arimo", monospace; min-height: 0; padding: 4px 6px; resize: none; width: 100%; }
.np:focus { outline: none; }

/* Calculator */
.calc { padding: 8px 8px 10px; width: 260px; }
.calc-disp { background: #fff; box-shadow: var(--sunken); font: 16px "Courier New", monospace; margin-bottom: 10px; overflow: hidden; padding: 4px 6px; text-align: right; white-space: nowrap; }
.calc-top { align-items: center; display: flex; gap: 6px; margin-bottom: 8px; }
.calc-top .mem { box-shadow: var(--sunken-thin); font-weight: 700; height: 26px; line-height: 26px; text-align: center; width: 34px; }
.calc-top button { flex: 1; }
.calc-keys { display: grid; gap: 5px; grid-template-columns: repeat(6, 1fr); }
.calc button { background: var(--face); border: none; box-shadow: var(--raised); font-size: 13px; height: 28px; padding: 0; }
.calc button:active, .calc button.down { box-shadow: var(--pressed); }
.calc button.red { color: #c00; }
.calc button.blue { color: #00c; }
.calc-keys button:nth-child(6n + 1) { margin-inline-end: 6px; }

/* DOS */
.dos-host { background: #000; }
.dos { background: #000; color: #c0c0c0; cursor: text; flex: 1; font: 15px/1.35 "Courier New", monospace; min-height: 0; overflow: auto; padding: 6px 8px; text-align: left; white-space: pre-wrap; word-break: break-all; }
.dos.full { font-size: clamp(14px, 1.6vw, 20px); height: 100%; padding: 16px 20px; width: 100%; }
.dos .in { background: transparent; border: none; caret-color: #c0c0c0; color: #c0c0c0; font: inherit; outline: none; padding: 0; width: 60%; }

/* Paint */
.paint { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.pt-main { display: flex; flex: 1; gap: 2px; min-height: 0; }
.pt-side { display: flex; flex: none; flex-direction: column; gap: 4px; padding: 2px; width: 58px; }
.pt-tools { display: grid; gap: 0; grid-template-columns: 25px 25px; justify-content: center; }
.pt-tools button { align-items: center; background: var(--face); border: none; box-shadow: var(--raised); display: flex; height: 25px; justify-content: center; padding: 0; width: 25px; }
.pt-tools button[aria-pressed="true"] { background: var(--dither); box-shadow: var(--pressed); }
.pt-tools svg { height: 16px; shape-rendering: crispEdges; width: 16px; }
.pt-opts { align-items: center; box-shadow: var(--sunken-thin); display: flex; flex-direction: column; gap: 2px; min-height: 70px; padding: 3px; }
.pt-opts button { align-items: center; background: none; border: none; display: flex; font-size: 11px; justify-content: center; min-height: 14px; padding: 1px; width: 100%; }
.pt-opts button[aria-pressed="true"] { background: var(--select); color: #fff; }
.pt-opts .dot { background: currentColor; display: block; }
.pt-opts .bar { background: currentColor; display: block; width: 36px; }
.pt-opts .spray { background: radial-gradient(circle, currentColor 1px, transparent 1.5px) 0 0 / 4px 4px; border-radius: 50%; display: block; }
.pt-opts .fs { border: 1px solid currentColor; display: block; height: 10px; width: 30px; }
.pt-opts .fs.both { background: var(--shadow); }
.pt-opts .fs.fill { background: currentColor; border-color: var(--shadow); }
.pt-textopts { display: flex; flex-direction: column; font-size: 11px; gap: 3px; }
.pt-textopts select { font-size: 11px; width: 50px; }
.pt-wrap { background: #808080; box-shadow: var(--sunken); direction: ltr; flex: 1; min-width: 0; overflow: auto; padding: 4px; }
.pt-sheet { position: relative; }
.pt-sheet canvas { display: block; height: 100%; image-rendering: pixelated; left: 0; position: absolute; top: 0; width: 100%; }
.pt-sheet canvas.over { cursor: crosshair; touch-action: none; }
.pt-sheet[data-tool="select"] canvas.over { cursor: default; }
.pt-sheet[data-tool="text"] canvas.over { cursor: text; }
.pt-sheet[data-tool="fill"] canvas.over, .pt-sheet[data-tool="picker"] canvas.over, .pt-sheet[data-tool="zoom"] canvas.over { cursor: pointer; }
.pt-text { border: 1px dashed #000; line-height: 1.2; outline: none; padding: 1px 2px; position: absolute; resize: none; z-index: 2; }
.pt-colors { align-items: center; display: flex; flex: none; gap: 4px; padding: 4px 2px 2px; }
.pt-cur { background: var(--dither); box-shadow: var(--sunken-thin); flex: none; height: 32px; position: relative; width: 32px; }
.pt-cur span { border: 1px solid #000; box-shadow: 0 0 0 1px #fff; height: 14px; position: absolute; width: 14px; }
.pt-cur .fgc { right: 4px; top: 4px; }
.pt-cur .bgc { bottom: 4px; left: 4px; }
.pt-pal { direction: ltr; display: grid; gap: 0; grid-template-columns: repeat(14, 16px); }
.pt-pal button { border: none; box-shadow: var(--sunken-thin); height: 16px; padding: 0; width: 16px; }

/* Minesweeper */
.mines { background: var(--face); box-shadow: inset 3px 3px var(--hilight), inset -3px -3px var(--shadow); padding: 8px; }
.m-top { align-items: center; box-shadow: inset 2px 2px var(--shadow), inset -2px -2px var(--hilight); display: flex; justify-content: space-between; margin-bottom: 8px; padding: 4px 6px; }
.m-top .led { background: #000; color: #f00; font: bold 22px/1 "Courier New", monospace; letter-spacing: 1px; padding: 1px 2px; text-shadow: 0 0 2px #f00; }
.m-top .face { background: var(--face); border: none; box-shadow: var(--raised); height: 26px; padding: 2px; width: 26px; }
.m-top .face:active { box-shadow: var(--pressed); }
.m-top .face svg { display: block; height: 20px; width: 20px; }
.m-grid { box-shadow: inset 3px 3px var(--shadow), inset -3px -3px var(--hilight); display: grid; padding: 3px; }
.m-grid .c { background: var(--face); border: none; box-shadow: inset -2px -2px var(--shadow), inset 2px 2px var(--hilight); color: #000; font: bold 13px/16px Arial, sans-serif; height: 16px; padding: 0; position: relative; text-align: center; width: 16px; }
.m-grid .c.open { box-shadow: inset 1px 1px var(--shadow); }
.m-grid .c.n1 { color: #0000ff; }
.m-grid .c.n2 { color: #008000; }
.m-grid .c.n3 { color: #ff0000; }
.m-grid .c.n4 { color: #000080; }
.m-grid .c.n5 { color: #800000; }
.m-grid .c.n6 { color: #008080; }
.m-grid .c.n7 { color: #000; }
.m-grid .c.n8 { color: #808080; }
.m-grid .c.flag::after {
  background: linear-gradient(135deg, #f00 0 50%, transparent 50%) 1px 0 / 6px 6px no-repeat, linear-gradient(#000, #000) 5px 0 / 1px 8px no-repeat, linear-gradient(#000, #000) 1px 8px / 7px 2px no-repeat;
  content: ""; display: block; height: 10px; margin: 2px auto 0; width: 8px;
}
.m-grid .c.mine::after, .m-grid .c.wrong::after {
  background: radial-gradient(circle at 40% 40%, #fff 0 1px, #000 1.5px 4px, transparent 4.5px), linear-gradient(#000, #000) center / 12px 2px no-repeat, linear-gradient(#000, #000) center / 2px 12px no-repeat;
  content: ""; display: block; height: 14px; margin: 1px auto; width: 14px;
}
.m-grid .c.hit { background: #f00; }
.m-grid .c.wrong::before { color: #f00; content: "✕"; font-size: 14px; inset: 0; position: absolute; }

/* Solitaire */
.sol-cv { background: #008000; display: block; flex: 1; min-height: 0; touch-action: none; width: 100%; }
.sol-backs { display: grid; gap: 8px; grid-template-columns: repeat(4, auto); }
.sol-backs button { align-items: center; background: none; border: 2px solid transparent; display: flex; flex-direction: column; font-size: 11.5px; gap: 3px; padding: 3px; }
.sol-backs button[aria-pressed="true"] { border-color: var(--select); }

/* DOOM */
.doomwin { background: #000; position: relative; }
.doomwin canvas { display: block; height: auto; image-rendering: pixelated; max-height: calc(100svh - var(--tb-h) - var(--credit-h) - 90px); max-width: min(640px, calc(100vw - 24px)); touch-action: none; width: 640px; }
.doomwin canvas:focus { outline: none; }
.doom-msg { align-items: center; color: #e33; display: flex; font: bold 16px "Courier New", monospace; inset: 0; justify-content: center; padding: 20px; position: absolute; text-align: center; }
.doom-pad { direction: ltr; display: none; gap: 4px; grid-template-columns: repeat(8, 1fr); padding: 4px; }
.doom-pad button { background: var(--face); border: none; box-shadow: var(--raised); font-size: 13px; min-height: 40px; touch-action: none; user-select: none; }
@media (pointer: coarse) { .doom-pad { display: grid; } }
@media (max-width: 820px) { .doomwin canvas { width: 100%; max-width: 100%; } }

/* 3D Pinball (the original, from an external server): a notice first, then the frame with a credit strip */
.sc-win .os-body { background: var(--face); }
.sc-gate { align-items: center; background: #000 radial-gradient(circle at 50% 30%, #1a2a6b, #000 70%); display: flex; flex: 1; justify-content: center; min-height: 0; overflow: auto; padding: 16px; }
.sc-card { background: var(--face); box-shadow: var(--raised-window); line-height: 1.5; max-width: 470px; padding: 14px 16px 12px; }
.sc-head { align-items: center; display: flex; gap: 10px; margin-bottom: 8px; }
.sc-head .ico32 { height: 32px; width: 32px; }
.sc-card p { margin-bottom: 8px; }
.sc-card .en { color: var(--text-muted); font-size: 12.5px; text-align: left; }
.sc-card .cr { font-size: 12.5px; }
.sc-card a, .sc-strip a { color: #0000ee; }
.sc-stage { background: #000; box-shadow: var(--sunken); flex: 1; min-height: 0; padding: 2px; position: relative; }
.sc-stage iframe { background: #000; border: 0; display: block; height: 100%; width: 100%; }
.sc-loading { align-items: center; color: #9fd0ff; display: flex; font: bold 14px var(--ui); inset: 0; justify-content: center; pointer-events: none; position: absolute; }
.sc-strip { box-shadow: var(--sunken-thin); font-size: 11.5px; line-height: 1.4; margin-top: 2px; padding: 3px 6px; }
.sc-strip .cr { color: var(--text-muted); }