/* Quiver OS — a Windows 95 / XP style desktop shell.
   The retro look is almost entirely the classic two-tone bevel trick:
   a light top-left border + dark bottom-right border = a raised 3D edge,
   swapped on :active to look pressed in. Everything else is period defaults
   (teal background, silver panels, Tahoma, square corners). The XP skin is
   the same markup restyled under [data-era="xp"]. */

/* Authentic bitmap UI font (from the 98.css project), with Tahoma as a
   robust fallback if the CDN is unreachable. */
@font-face {
  font-family: "MS Sans Serif";
  src: url("https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff2") format("woff2"),
       url("https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MS Sans Serif";
  src: url("https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff2") format("woff2"),
       url("https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px "MS Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif;
  color: #111;
  overflow: hidden;
  background: #008080;
}
.desktop[data-era="xp"],
.desktop[data-era="xp"] button,
.desktop[data-era="xp"] input { font-family: Tahoma, "Segoe UI", sans-serif; }

body.busy, body.busy * { cursor: wait !important; }

button, input, select, textarea { font: inherit; }

/* Raised bevel: light = top/left, dark = bottom/right. */
.bevel {
  background: silver;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
}

button {
  background: silver;
  color: #111;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  padding: 5px 12px;
  cursor: pointer;
}
button:active { border-color: #404040 #fff #fff #404040; } /* sunken when pressed */
button:disabled { color: #808080; cursor: default; }
button:focus-visible,
a:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

input, textarea, select {
  background: #fff;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080; /* sunken field */
  padding: 4px 6px;
}

a { color: navy; }
[hidden] { display: none !important; }

/* ---------- Desktop ---------- */
.desktop {
  position: relative;
  height: 100dvh;
  min-height: 420px;
  overflow: hidden;
  background: var(--desktop-color, #008080);
}

/* The logo PNG has ~120px of transparent padding above the ink at 220px wide
   (about 81px at 150px wide), so the offsets below pull the artwork itself up
   to roughly 12px from the top edge. */
.desktop-brand {
  position: absolute;
  top: -107px;
  right: 18px;
  pointer-events: none;
}
/* The logo PNG is dark ink on a transparent background; invert it to white
   so it reads on the teal desktop and on dark wallpapers. */
.corner-logo {
  display: block;
  width: 220px;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(1px 2px 0 #0004);
  opacity: .92;
}
@media (max-width: 700px) {
  .desktop-brand { top: -69px; }
  .corner-logo { width: 150px; }
}

.desktop-icons {
  position: absolute;
  inset: 12px 0 52px 12px;
  overflow: auto;   /* icons are absolutely placed; scrolls if they overflow */
}

.shortcut {
  position: absolute;
  width: 84px;
  padding: 8px 4px;
  background: none;
  border: 1px solid transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  text-shadow: 1px 1px #222;
  user-select: none;
  touch-action: none;
}
.shortcut.selected {
  background: #0000809c;
  border: 1px dotted #fff;
}
.shortcut.selected .label { background: navy; }
.rename-input {
  width: 78px;
  font-size: 11px;
  padding: 1px 2px;
  text-align: center;
}
.shortcut:hover,
.shortcut:focus-visible { background: #0000804d; border: 1px dotted #fff; }
.shortcut .glyph {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 #0005);
}
.shortcut .glyph svg { width: 40px; height: 40px; }

/* ---------- Windows ---------- */
/* The layer covers the desktop but must not block clicks on the icons
   underneath; only the windows themselves catch pointer events. */
.windows { position: absolute; inset: 0 0 44px 0; pointer-events: none; }

.window {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  min-height: 140px;
  padding: 3px;
  background: silver;
  border: 2px solid;
  border-color: #fff #222 #222 #fff;
  box-shadow: 2px 3px #0005;
}
.window.maximized {
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 3px 3px 6px;
  background: #808080;
  color: #fff;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.window.active .titlebar { background: navy; }
.titlebar .tb-icon { width: 16px; height: 16px; flex: none; }
.titlebar .tb-icon svg { width: 16px; height: 16px; display: block; }
.titlebar strong {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.window-controls { display: flex; gap: 3px; }
.window-controls [data-act="popout"] { margin-right: 4px; }
.window-controls button {
  width: 22px; height: 20px;
  padding: 0;
  font: 700 12px Arial;
  line-height: 14px;
}

.window-body {
  flex: 1;
  overflow: auto;
  background: #fff;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}
.window-body.flush { padding: 0; }
.window-body iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Taskbar ---------- */
.taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  z-index: 9000;
}
#start-button {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  padding: 2px 10px 2px 6px;
}
#start-button .flag { font-size: 18px; }
#tasks { flex: 1; display: flex; gap: 4px; overflow: auto; }
#tasks button {
  min-width: 120px;
  max-width: 180px;
  height: 30px;
  text-align: left;
  font-size: 12px;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}
#tasks button .tb-icon { width: 14px; height: 14px; flex: none; }
#tasks button.selected { border-color: #404040 #fff #fff #404040; background: #cdcdcd; }
.tray {
  display: flex;
  align-items: center;
  padding: 0 4px;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  height: 30px;
}
.tray time { font-size: 11px; padding: 0 6px; }

/* ---------- Start menu ---------- */
.start-menu {
  position: absolute;
  left: 3px;
  bottom: 42px;
  width: 240px;
  display: flex;
  z-index: 9001;
}
.start-stripe {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: #808080;
  color: #fff;
  padding: 12px 8px;
  font: 700 20px Georgia, serif;
  letter-spacing: 1px;
}
.start-stripe b { color: #fff; }
.start-items { flex: 1; padding: 4px; }
.start-items button,
.start-items a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 0;
  background: transparent;
  color: #111;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
}
.start-items .start-icon { width: 20px; height: 20px; flex: none; }
.start-items button:hover,
.start-items a:hover,
.start-items button:focus-visible { background: navy; color: #fff; }
.start-items hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 4px 2px; }

/* ---------- App bodies ---------- */
.app-pad { padding: 16px; line-height: 1.6; }
.app-pad h2 { margin: 0 0 10px; font: 700 18px Georgia, serif; }
.notepad {
  width: 100%; height: 100%;
  resize: none;
  border: 0;
  padding: 8px;
  font: 13px "Lucida Console", Consolas, monospace;
}
.iframe-note {
  padding: 6px 8px;
  font-size: 11px;
  color: #333;
  background: silver;
  border-bottom: 1px solid #808080;
}

/* ========== Windows XP skin ========== */
.desktop[data-era="xp"] { background: linear-gradient(#5aa7f0, #2973cb 40%, #1b57a8); }
.desktop[data-era="xp"] .window {
  border: 3px solid #0759df;
  border-radius: 8px 8px 0 0;
  padding: 0;
  background: #ece9d8;
}
.desktop[data-era="xp"] .titlebar {
  min-height: 30px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#6da5f9 0, #1467ef 15%, #004be1 85%, #2679f5);
  text-shadow: 1px 1px #134386;
}
.desktop[data-era="xp"] .window:not(.active) .titlebar {
  background: linear-gradient(#93b7ed, #6c93d4);
}
.desktop[data-era="xp"] .window-controls button {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(#87b9fc, #1669dd);
  text-shadow: 1px 1px #333;
}
.desktop[data-era="xp"] .window-controls button:last-child {
  background: linear-gradient(#f6a284, #d93413);
}
.desktop[data-era="xp"] .window-body { border: 0; }
.desktop[data-era="xp"] .taskbar {
  height: 40px;
  padding: 0 4px 0 0;
  background: linear-gradient(#398af9, #245cdd 18% 85%, #1b43b1);
}
.desktop[data-era="xp"] #start-button {
  height: 40px;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(#72bb73, #2b942d 20%, #267a25 80%, #155415);
  color: #fff;
  font: 700 italic 18px Arial;
  text-shadow: 1px 2px #214d17;
  padding: 0 18px 0 12px;
}
.desktop[data-era="xp"] #tasks button {
  color: #fff;
  border: 1px solid #1a4bbb;
  border-radius: 3px;
  background: #347deb;
  box-shadow: inset 1px 1px #5aa0ff;
}
.desktop[data-era="xp"] #tasks button.selected { background: #1751b7; }
.desktop[data-era="xp"] .tray {
  border: 0;
  background: #118be7;
  height: 40px;
  color: #fff;
  border-left: 1px solid #64b7f9;
}
.desktop[data-era="xp"] .start-menu {
  border: 2px solid #1764cf;
  border-radius: 8px 8px 0 0;
  background: #fff;
}
.desktop[data-era="xp"] .start-stripe {
  background: linear-gradient(#1764cf, #3f92f6);
}
.desktop[data-era="xp"] .start-items button:hover,
.desktop[data-era="xp"] .start-items a:hover { background: #2c74dc; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  .window {
    left: 0 !important; top: 0 !important;
    width: 100% !important;
    height: calc(100% - 44px) !important;
  }
  .desktop-icons { inset: 10px 0 52px 10px; }
  .tray time { display: none; }
}

/* ===================== Added: 95 authenticity pass ===================== */

/* Window resize grip */
.window-resize {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  color: #555;
  cursor: nwse-resize;
  user-select: none;
  touch-action: none;
}
.window.maximized .window-resize { display: none; }

/* Open / close animation */
@keyframes winOpen { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes winClose { from { transform: scale(1); opacity: 1; } to { transform: scale(.85); opacity: 0; } }
.window.opening { animation: winOpen .12s ease-out; }
.window.closing { animation: winClose .12s ease-in forwards; pointer-events: none; }

/* Marquee rubber-band selection */
.marquee {
  position: absolute;
  border: 1px dotted #fff;
  background: #ffffff26;
  z-index: 5;
  pointer-events: none;
}

/* Context menu */
.context-menu {
  position: fixed;
  z-index: 30000;
  min-width: 150px;
  padding: 2px;
  background: silver;
}
.context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 5px 20px 5px 12px;
  font-size: 12px;
}
.context-menu button:hover:not(:disabled) { background: navy; color: #fff; }
.context-menu button:disabled { color: #808080; }
.context-menu hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 3px 2px; }

/* Dialogs */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  background: #0003;
}
.window.dialog {
  position: relative;
  left: auto; top: auto;
  width: min(400px, 92vw);
  min-width: 0;
  min-height: 0;
  height: auto;
}
.dialog-body { display: flex; gap: 16px; align-items: flex-start; padding: 20px 18px 10px; background: silver; }
.dialog-icon { width: 34px; height: 34px; flex: none; }
.dialog-icon svg { width: 34px; height: 34px; }
.dialog-msg { font-size: 13px; line-height: 1.5; padding-top: 2px; }
.dialog-buttons { display: flex; justify-content: center; gap: 10px; padding: 8px 0 16px; background: silver; }
.dialog-buttons button { min-width: 78px; }

/* Display Properties */
.field { display: block; margin: 8px 0; font-size: 13px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.swatch { width: 40px; height: 30px; padding: 0; border: 2px solid; border-color: #808080 #fff #fff #808080; cursor: pointer; }
.swatch.selected { outline: 2px solid navy; outline-offset: 1px; }

/* ---- Minesweeper ---- */
.mine { display: inline-flex; flex-direction: column; background: silver; user-select: none; -webkit-user-select: none; min-width: 100%; }
.mine-menu { display: flex; padding: 1px 2px; border-bottom: 1px solid #808080; }
.mine-menu-item { padding: 1px 7px; border-color: transparent; background: transparent; }
.mine-menu-item:hover { background: navy; color: #fff; }
.mine-inner { display: inline-flex; flex-direction: column; gap: 6px; padding: 6px; border: 3px solid; border-color: #fff #808080 #808080 #fff; margin: 0; }
.mine-panel { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.mine-led { font: 700 20px/1 "Courier New", monospace; color: #f00; background: #000; padding: 1px 2px; letter-spacing: 1px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.mine-face { width: 26px; height: 26px; padding: 0; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.mine-board { display: grid; grid-auto-rows: 16px; border: 3px solid; border-color: #808080 #fff #fff #808080; cursor: default; }
.mine-cell {
  width: 16px; height: 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  background: silver; border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
.mine-cell.flag, .mine-cell.open { font-size: 10px; }
.mine-cell.open { border: 1px solid #808080; border-width: 1px 0 0 1px; }
.mine-cell.boom { background: #f00; }
.mine-cell.wrong { position: relative; }
.mine-cell.wrong::after { content: ''; position: absolute; inset: 1px; background: linear-gradient(45deg, transparent 44%, #f00 44%, #f00 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #f00 44%, #f00 56%, transparent 56%); }
.mine-cell.n1 { color: #0000ff; }
.mine-cell.n2 { color: #008000; }
.mine-cell.n3 { color: #ff0000; }
.mine-cell.n4 { color: #000080; }
.mine-cell.n5 { color: #800000; }
.mine-cell.n6 { color: #008080; }
.mine-cell.n7 { color: #000000; }
.mine-cell.n8 { color: #808080; }

/* ---- Mini Golf ---- */
.golf { display: inline-flex; flex-direction: column; background: silver; user-select: none; -webkit-user-select: none; min-width: 100%; }
.golf-canvas { display: block; margin: 4px; border: 2px solid; border-color: #808080 #fff #fff #808080; cursor: crosshair; touch-action: none; }
.golf-status { display: flex; gap: 3px; padding: 2px 4px 4px; font-size: 11px; }
.golf-status span { flex: 1; padding: 1px 5px; border: 1px solid; border-color: #808080 #fff #fff #808080; white-space: nowrap; }

/* ---- Photo of the Week ---- */
.potw { display: flex; flex-direction: column; height: 100%; background: silver; }
.potw-toolbar { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-bottom: 1px solid #808080; }
.potw-toolbar button { padding: 2px 10px; font-size: 11px; }
.potw-since { margin-left: auto; font-size: 11px; color: #333; padding-right: 4px; }
.potw-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 6px; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #3a3a3a; overflow: hidden; }
.potw-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.potw-frame { max-width: 100%; max-height: 100%; padding: 10px; background: #f4f1e8; box-shadow: 0 2px 8px rgba(0,0,0,.5); display: flex; }
.potw-frame img { display: block; max-width: calc(100% - 0px); max-height: 100%; object-fit: contain; }
.potw-msg { color: #ddd; text-align: center; font-size: 12px; line-height: 1.6; padding: 20px; }
.potw-msg small { color: #aaa; }
.potw-caption { margin: 0 6px 6px; padding: 6px 8px; border: 1px solid; border-color: #808080 #fff #fff #808080; font-size: 11px; line-height: 1.5; }
.potw-title { font-weight: 700; font-size: 13px; }
.potw-meta { color: #333; }
.potw-blurb { margin-top: 4px; font-style: italic; }