/* =====================================================================
   nocturne.theme: the default look.
   Windows 95/98 chrome re-inked in the navy of the dithered wallpaper:
   square corners, 2px bevels lit from the top-left, sunken fields,
   2x2 checker dithers instead of soft gradients, pixel-drawn glyphs.
   Every rule is scoped under html[data-theme="nocturne"].
   ===================================================================== */

/* ------------------------------------------------------------ palette + tokens */
html[data-theme="nocturne"] {
  /* the six colours the wallpaper is dithered to */
  --nc-ink: #02060f;
  --nc-night: #0a1428;
  --nc-deep: #1a2c4c;
  --nc-steel: #3b5578;
  --nc-mist: #7f9bbd;
  --nc-paper: #d4e0ee;
  --nc-white: #ffffff;
  --nc-black: #000000;
  --nc-olive: #8a9a3c; /* the one accent: LEDs, side labels, small details only */
  --nc-red: #a8434a; /* errors / close / danger glyphs only */

  --nc-ui: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --nc-serif: "Times New Roman", Times, Georgia, serif;
  --nc-mono: "Courier New", Courier, monospace;

  /* Win95 2px bevels, light from the top-left.
     raised:  outer TL mist,  inner TL steel  | inner BR night, outer BR ink
     pressed: outer TL ink,   inner TL night  | inner BR steel, outer BR mist
     sunken:  outer TL night, inner TL ink    | inner BR steel, outer BR mist  (fields) */
  --nc-raised: inset -1px -1px var(--nc-ink), inset 1px 1px var(--nc-mist), inset -2px -2px var(--nc-night), inset 2px 2px var(--nc-steel);
  --nc-pressed: inset 1px 1px var(--nc-ink), inset -1px -1px var(--nc-mist), inset 2px 2px var(--nc-night), inset -2px -2px var(--nc-steel);
  --nc-sunken: inset 1px 1px var(--nc-night), inset -1px -1px var(--nc-mist), inset 2px 2px var(--nc-ink), inset -2px -2px var(--nc-steel);
  /* 1px versions for status panels and small wells */
  --nc-sunken-1: inset 1px 1px var(--nc-night), inset -1px -1px var(--nc-steel);
  /* etched separator (a dark line over a light line) */
  --nc-etch-bottom: inset 0 -1px var(--nc-steel), inset 0 -2px var(--nc-night);

  /* 2x2 checker dithers (1px cells), used for selection, pressed toggles and wells */
  --nc-dither: repeating-conic-gradient(var(--nc-steel) 0 25%, var(--nc-deep) 0 50%) 0 0 / 2px 2px;
  --nc-dither-dark: repeating-conic-gradient(var(--nc-night) 0 25%, var(--nc-ink) 0 50%) 0 0 / 2px 2px;
  --nc-dither-track: repeating-conic-gradient(var(--nc-deep) 0 25%, var(--nc-night) 0 50%) 0 0 / 2px 2px;

  /* base.css theme hooks */
  --taskbar-h: 30px; /* Win95 taskbar */
  --icon-size: 32px; /* 16px pixel art at 2x */
}

/* Room light: the wallpaper's navy spilling up and out of the monitor. Kept off
   while the BSOD is up so base.css can turn the room blue. */
html[data-theme="nocturne"]:not(.is-bsod) {
  --ambient-top: rgba(80, 112, 158, 0.65); /* steel, thrown upward */
  --ambient-corner: rgba(127, 155, 189, 0.42); /* a little mist pooling in the top corners */
  --ambient-edge: rgba(26, 44, 76, 0.6); /* deep navy hugging the bezel */
  --ambient-strength: 0.9;
}

/* ------------------------------------------------------------ the screen */
html[data-theme="nocturne"] #screen {
  background-color: var(--nc-ink);
  image-rendering: pixelated; /* the wallpaper is pixel art: keep it crisp when scaled */
  color: var(--nc-paper);
  font: 11px/1.3 var(--nc-ui);
  -webkit-font-smoothing: none;
}
/* No colour emoji in 1995: glyphs the apps put in their labels (Minesweeper's flag-mode
   button, for one) render as plain monochrome text symbols in the current colour.
   Set on every element because the `font` shorthands below would reset an inherited value. */
html[data-theme="nocturne"] #screen,
html[data-theme="nocturne"] #screen * { font-variant-emoji: text; }
/* photos are only ever scaled down; let them average instead of shimmering */
html[data-theme="nocturne"] #screen img { image-rendering: auto; }

html[data-theme="nocturne"] #screen ::selection { background: var(--nc-steel); color: var(--nc-white); }

/* reset native button chrome. Only border here: this selector is strong (1,1,2), so fonts,
   colours and backgrounds are left to each control (swatches keep their var(--c)). */
html[data-theme="nocturne"] #screen button {
  border: 0;
  border-radius: 0;
}
/* Win95 dotted focus rectangle, drawn inside controls (text fields are left alone) */
html[data-theme="nocturne"] #screen :is(button, a):focus-visible { outline: 1px dotted var(--nc-paper); outline-offset: -4px; }

/* ------------------------------------------------------------ scrollbars (Win95, chunky) */
html[data-theme="nocturne"] #screen ::-webkit-scrollbar { width: 16px; height: 16px; }
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-track { background: var(--nc-dither-track); }
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-thumb { background: var(--nc-deep); box-shadow: var(--nc-raised); }
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-corner { background: var(--nc-deep); }
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:vertical:start:decrement,
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:vertical:end:increment,
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:horizontal:start:decrement,
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:horizontal:end:increment {
  display: block;
  width: 16px;
  height: 16px;
  /* longhands only: this selector outranks the arrow rules below, and a `background`
     shorthand here would reset their background-image to none */
  background-color: var(--nc-deep);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: var(--nc-raised);
}
/* pressed arrow: as many pseudo-classes as the rule above, so it actually wins */
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:start:decrement:active,
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:end:increment:active {
  box-shadow: var(--nc-pressed);
  background-position: calc(50% + 1px) calc(50% + 1px);
}
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:vertical:start:increment,
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:vertical:end:decrement,
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:horizontal:start:increment,
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
/* 7x4 / 4x7 paper arrows */
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23d4e0ee' d='M3 0h1v1h-1zM2 1h3v1h-3zM1 2h5v1h-5zM0 3h7v1h-7z'/%3E%3C/svg%3E");
}
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23d4e0ee' d='M0 0h7v1h-7zM1 1h5v1h-5zM2 2h3v1h-3zM3 3h1v1h-1z'/%3E%3C/svg%3E");
}
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23d4e0ee' d='M3 0h1v1h-1zM2 1h2v1h-2zM1 2h3v1h-3zM0 3h4v1h-4zM1 4h3v1h-3zM2 5h2v1h-2zM3 6h1v1h-1z'/%3E%3C/svg%3E");
}
html[data-theme="nocturne"] #screen ::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23d4e0ee' d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h3v1h-3zM0 3h4v1h-4zM0 4h3v1h-3zM0 5h2v1h-2zM0 6h1v1h-1z'/%3E%3C/svg%3E");
}
/* Firefox has no scrollbar pseudo-elements; colour the native ones instead.
   (Chrome ignores ::-webkit-scrollbar once scrollbar-color is set, hence the @supports.) */
@supports not selector(::-webkit-scrollbar) {
  html[data-theme="nocturne"] #screen * { scrollbar-color: var(--nc-steel) var(--nc-night); }
}

/* ------------------------------------------------------------ boot */
html[data-theme="nocturne"] .boot {
  background: var(--nc-black);
  color: var(--nc-paper);
  font: 11px/1.3 var(--nc-ui);
  gap: 28px;
  transition-timing-function: steps(4); /* fades out in a few hard frames, like an old card */
}
html[data-theme="nocturne"] .boot-logo { gap: 22px; }
html[data-theme="nocturne"] .boot-name {
  font: 34px/1 var(--nc-serif);
  text-transform: uppercase;
  letter-spacing: 0.5em;
  margin-right: -0.5em; /* letter-spacing trails the last letter; keep it optically centred */
  color: var(--nc-paper);
}
/* Win9x segmented progress: chunky blocks marching through a sunken frame */
html[data-theme="nocturne"] .boot-bar {
  width: 224px;
  height: 20px;
  padding: 3px;
  border: 1px solid;
  border-color: var(--nc-steel) var(--nc-mist) var(--nc-mist) var(--nc-steel);
  background: var(--nc-ink);
  /* clip the marching blocks at the content box, so no 1-2px slivers creep into the
     3px gutter as they enter and leave (browsers without this clip at the padding) */
  overflow: clip;
  overflow-clip-margin: content-box;
}
html[data-theme="nocturne"] .boot-bar-fill {
  width: 80px; /* 8 blocks; base slides it -100% → 250% = 280px = 28 block pitches */
  background: repeating-linear-gradient(90deg, var(--nc-mist) 0 8px, transparent 8px 10px);
  animation-duration: 2.8s;
  animation-timing-function: steps(28); /* jump one block at a time */
  animation-delay: -0.3s; /* start with 3 blocks already in, not an empty bar */
}
html[data-theme="nocturne"] .boot-hint {
  color: var(--nc-mist);
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

/* ------------------------------------------------------------ desktop icons */
html[data-theme="nocturne"] .desk-icon {
  color: var(--nc-white);
  font: 11px/1.25 var(--nc-ui);
}
/* Labels may spill 4px past each side of the 75px cell, so names like "demo_tape.wav" and
   "nocturne.theme" stay on one line instead of breaking mid-word. (The flex column centres
   the overflow evenly; neighbouring labels only touch if both are that long.) */
html[data-theme="nocturne"] .desk-icon-label,
html[data-theme="nocturne"] .file-tile-label {
  width: max-content; /* otherwise the flex item stops at the cell's width */
  max-width: calc(100% + 8px);
  padding: 0 1px;
}
html[data-theme="nocturne"] .desk-icon-label {
  /* a hard 1px ink outline plus the black drop shadow, so labels still read where
     the collage is near-white (the cassette, the treble clef) */
  text-shadow:
    -1px 0 0 var(--nc-ink), 1px 0 0 var(--nc-ink), 0 -1px 0 var(--nc-ink), 0 1px 0 var(--nc-ink),
    -1px -1px 0 var(--nc-ink), 1px -1px 0 var(--nc-ink), -1px 1px 0 var(--nc-ink),
    1px 1px 0 var(--nc-black), 2px 2px 0 var(--nc-black);
}
html[data-theme="nocturne"] .desk-icon.selected .desk-icon-label {
  background: var(--nc-steel);
  color: var(--nc-white);
  text-shadow: none;
  outline: 1px dotted var(--nc-paper);
}
/* Win95 "selected" icon: a 50% checker of the highlight colour (steel) laid over the icon.
   The checker is masked by the icon's brightness (feColorMatrix -> alpha), so it lands on
   the light fills but leaves the black outlines and the transparent background alone and
   the icon keeps its shape on the busy wallpaper. 2px cells line up with the 2x pixel art.
   Browsers without url() filters simply skip the tint (the label still highlights). */
html[data-theme="nocturne"] .desk-icon.selected .desk-icon-img > svg,
html[data-theme="nocturne"] .file-tile.selected .file-tile-img > svg {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='s' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB' primitiveUnits='userSpaceOnUse'%3E%3CfeColorMatrix in='SourceGraphic' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0.6 0.6 0 -0.2' result='m'/%3E%3CfeFlood flood-color='%233b5578' x='0' y='0' width='2' height='2' result='a'/%3E%3CfeOffset in='a' dx='2' dy='2' result='b'/%3E%3CfeMerge x='0' y='0' width='4' height='4' result='t'%3E%3CfeMergeNode in='a'/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3CfeTile in='t'/%3E%3CfeComposite in2='m' operator='in' result='d'/%3E%3CfeMerge%3E%3CfeMergeNode in='SourceGraphic'/%3E%3CfeMergeNode in='d'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#s");
}

/* ------------------------------------------------------------ windows */
html[data-theme="nocturne"] .win {
  padding: 3px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font: 11px/1.3 var(--nc-ui);
  box-shadow: var(--nc-raised), 2px 2px 0 var(--nc-black);
}
html[data-theme="nocturne"] .win.maximized { padding: 0; box-shadow: none; }

/* old OSes didn't animate: a two-frame pop in, gone instantly on close */
html[data-theme="nocturne"] .win.opening { animation: nc-win-pop 0.12s steps(2); }
html[data-theme="nocturne"] .win.closing { animation: none; visibility: hidden; }
@keyframes nc-win-pop { from { transform: scale(0.94); } }

html[data-theme="nocturne"] .win-titlebar {
  height: 20px;
  margin-bottom: 2px;
  padding: 0 2px 0 3px;
  gap: 4px;
  background: var(--nc-deep); /* inactive: flat, the title just sits on the frame */
  color: var(--nc-mist);
}
html[data-theme="nocturne"] .win.focused .win-titlebar {
  background: linear-gradient(90deg, var(--nc-night), var(--nc-steel)); /* the one gradient: Win98 */
  color: var(--nc-paper);
}
html[data-theme="nocturne"] .win-title {
  font: bold 12px/20px var(--nc-serif);
  letter-spacing: 0.12em;
}
html[data-theme="nocturne"] .win-controls { align-items: center; }

/* 16x14 bevelled caption buttons with pixel glyphs drawn on the inner span */
html[data-theme="nocturne"] .win-btn {
  width: 16px;
  height: 14px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] .win-btn:active { box-shadow: var(--nc-pressed); }
html[data-theme="nocturne"] .win-btn:active span { translate: 1px 1px; }
html[data-theme="nocturne"] .win-btn span { margin: 0; background: currentColor; }
html[data-theme="nocturne"] .win-close { margin-left: 2px; }
html[data-theme="nocturne"] .win-close:hover { background: var(--nc-red); color: var(--nc-white); }
/* _ : a 6x2 bar at the bottom */
html[data-theme="nocturne"] .win-min span { inset: auto auto 3px 4px; width: 6px; height: 2px; }
/* [] : 9x9 box with a thick top edge */
html[data-theme="nocturne"] .win-max span {
  inset: 2px auto auto 3px;
  width: 9px;
  height: 9px;
  background: none;
  border: 1px solid currentColor;
  border-top-width: 2px;
}
/* restore: two overlapping boxes */
html[data-theme="nocturne"] .win.maximized .win-max span {
  inset: 2px auto auto 4px;
  width: 8px;
  height: 9px;
  border: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 0h6v1h-6zM2 1h6v1h-6zM2 2h1v1h-1zM7 2h1v1h-1zM0 3h6v1h-6zM7 3h1v1h-1zM0 4h6v1h-6zM7 4h1v1h-1zM0 5h1v1h-1zM5 5h3v1h-3zM0 6h1v1h-1zM5 6h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1zM0 8h6v1h-6z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 0h6v1h-6zM2 1h6v1h-6zM2 2h1v1h-1zM7 2h1v1h-1zM0 3h6v1h-6zM7 3h1v1h-1zM0 4h6v1h-6zM7 4h1v1h-1zM0 5h1v1h-1zM5 5h3v1h-3zM0 6h1v1h-1zM5 6h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1zM0 8h6v1h-6z'/%3E%3C/svg%3E") no-repeat;
}
/* X : the Win95 8x7 cross */
html[data-theme="nocturne"] .win-close span {
  inset: 3px auto auto 4px;
  width: 8px;
  height: 7px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h2v1h-2zM6 0h2v1h-2zM1 1h2v1h-2zM5 1h2v1h-2zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM1 5h2v1h-2zM5 5h2v1h-2zM0 6h2v1h-2zM6 6h2v1h-2z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h2v1h-2zM6 0h2v1h-2zM1 1h2v1h-2zM5 1h2v1h-2zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM1 5h2v1h-2zM5 5h2v1h-2zM0 6h2v1h-2zM6 6h2v1h-2z'/%3E%3C/svg%3E") no-repeat;
}

/* Win95 dialogs (message boxes, the lavi32 loader) only have a close button */
html[data-theme="nocturne"] .win:is([data-app="msgbox"], [data-app="lavi32-dialog"]) :is(.win-min, .win-max) { display: none; }
/* fixed-size windows (Minesweeper): maximize is there but greyed out */
html[data-theme="nocturne"] .win.no-resize .win-max { pointer-events: none; color: var(--nc-steel); }

html[data-theme="nocturne"] .win-body {
  background: var(--nc-night);
  color: var(--nc-paper);
}

/* size grip: three diagonal pixel ridges in the bottom-right corner */
html[data-theme="nocturne"] .win-resize {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%237f9bbd' d='M11 0h1v1h-1zM10 1h1v1h-1zM9 2h1v1h-1zM8 3h1v1h-1zM7 4h1v1h-1zM11 4h1v1h-1zM6 5h1v1h-1zM10 5h1v1h-1zM5 6h1v1h-1zM9 6h1v1h-1zM4 7h1v1h-1zM8 7h1v1h-1zM3 8h1v1h-1zM7 8h1v1h-1zM11 8h1v1h-1zM2 9h1v1h-1zM6 9h1v1h-1zM10 9h1v1h-1zM1 10h1v1h-1zM5 10h1v1h-1zM9 10h1v1h-1zM0 11h1v1h-1zM4 11h1v1h-1zM8 11h1v1h-1z'/%3E%3Cpath fill='%2302060f' d='M11 1h1v1h-1zM10 2h2v1h-2zM9 3h2v1h-2zM8 4h2v1h-2zM7 5h2v1h-2zM11 5h1v1h-1zM6 6h2v1h-2zM10 6h2v1h-2zM5 7h2v1h-2zM9 7h2v1h-2zM4 8h2v1h-2zM8 8h2v1h-2zM3 9h2v1h-2zM7 9h2v1h-2zM11 9h1v1h-1zM2 10h2v1h-2zM6 10h2v1h-2zM10 10h2v1h-2zM1 11h2v1h-2zM5 11h2v1h-2zM9 11h2v1h-2z'/%3E%3C/svg%3E") no-repeat right 3px bottom 3px;
}

/* ------------------------------------------------------------ taskbar */
html[data-theme="nocturne"] .taskbar {
  padding: 3px 2px 1px;
  gap: 3px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font: 11px/1.3 var(--nc-ui);
  box-shadow: inset 0 1px var(--nc-mist), inset 0 2px var(--nc-steel);
}
html[data-theme="nocturne"] .start-btn {
  height: 22px;
  padding: 0 6px 0 4px;
  gap: 4px;
  background: var(--nc-deep);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] .start-btn:active,
html[data-theme="nocturne"] .start-btn.active { box-shadow: var(--nc-pressed); }
html[data-theme="nocturne"] .start-btn:active > *,
html[data-theme="nocturne"] .start-btn.active > * { translate: 1px 1px; }
html[data-theme="nocturne"] .start-label { font-weight: bold; letter-spacing: 0.02em; }

html[data-theme="nocturne"] .task-group { gap: 3px; }
html[data-theme="nocturne"] .task-btn {
  height: 22px;
  padding: 0 6px 0 4px;
  gap: 4px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] .task-btn:active { box-shadow: var(--nc-pressed); }
/* the focused window's button: pushed in, checker-dithered, bold */
html[data-theme="nocturne"] .task-btn.active {
  background: var(--nc-dither);
  box-shadow: var(--nc-pressed);
  font-weight: bold;
  color: var(--nc-white);
}
html[data-theme="nocturne"] .task-btn.active > * { translate: 1px 1px; }

html[data-theme="nocturne"] .tray {
  height: 22px;
  gap: 7px;
  padding: 0 9px 0 7px;
  box-shadow: var(--nc-sunken-1);
}
/* a little olive "tape running" LED */
html[data-theme="nocturne"] .tray::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--nc-olive);
  box-shadow: 0 0 0 1px var(--nc-ink);
}
html[data-theme="nocturne"] .tray-time { font-size: 11px; }
html[data-theme="nocturne"] .tray-date { display: none; }

/* ------------------------------------------------------------ start menu */
html[data-theme="nocturne"] .start-menu {
  min-width: 190px;
  padding: 3px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font: 11px/1.3 var(--nc-ui);
  box-shadow: var(--nc-raised), 2px 2px 0 var(--nc-black);
}
/* the Win95 side banner, reading bottom-to-top */
html[data-theme="nocturne"] .sm-banner {
  display: flex;
  flex: none;
  width: 24px;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 0;
  background: linear-gradient(0deg, var(--nc-night), var(--nc-steel));
}
html[data-theme="nocturne"] .sm-banner span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: bold 16px/24px var(--nc-serif);
  letter-spacing: 0.3em;
  color: var(--nc-paper);
}
html[data-theme="nocturne"] .sm-main { padding-left: 1px; }
html[data-theme="nocturne"] .sm-header {
  padding: 5px 8px 7px 6px;
  margin-bottom: 2px;
  box-shadow: var(--nc-etch-bottom);
}
html[data-theme="nocturne"] .sm-avatar {
  padding: 2px;
  width: 36px;
  height: 36px;
  background: var(--nc-night);
  box-shadow: var(--nc-sunken-1);
}
html[data-theme="nocturne"] .sm-user {
  font: bold 12px var(--nc-serif);
  letter-spacing: 0.08em;
}
html[data-theme="nocturne"] .sm-item,
html[data-theme="nocturne"] .sm-power {
  min-height: 38px;
  padding: 3px 26px 3px 6px;
  gap: 10px;
  background: none;
  color: var(--nc-paper);
  text-align: left;
}
/* Win95's main start menu uses 32px icons; 16px art stays crisp at exactly 2x */
html[data-theme="nocturne"] .sm-item-icon,
html[data-theme="nocturne"] .sm-power-icon { width: 32px; height: 32px; }
html[data-theme="nocturne"] .sm-item:hover,
html[data-theme="nocturne"] .sm-item:focus-visible,
html[data-theme="nocturne"] .sm-power:hover,
html[data-theme="nocturne"] .sm-power:focus-visible {
  background: var(--nc-steel);
  color: var(--nc-white);
}
html[data-theme="nocturne"] .sm-sep {
  height: 2px;
  margin: 3px 2px;
  box-shadow: inset 0 1px var(--nc-night), inset 0 -1px var(--nc-steel);
}
html[data-theme="nocturne"] .sm-footer {
  margin-top: 3px;
  padding-top: 3px;
  box-shadow: inset 0 1px var(--nc-night), inset 0 2px var(--nc-steel);
}
html[data-theme="nocturne"] .sm-power { flex: 1; }

/* ------------------------------------------------------------ shared controls */
html[data-theme="nocturne"] .btn {
  min-height: 23px;
  padding: 3px 10px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font: 11px/1.2 var(--nc-ui);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] .btn:active,
html[data-theme="nocturne"] .btn.active {
  box-shadow: var(--nc-pressed);
  padding: 4px 9px 2px 11px; /* content nudges 1px down-right when pushed */
}
html[data-theme="nocturne"] .btn.active { background: var(--nc-dither); color: var(--nc-white); }

/* square bevelled arrows instead of round ones (glyphs drawn with masks) */
html[data-theme="nocturne"] .btn-round { width: 30px; height: 22px; min-height: 0; padding: 0; font-size: 0; }
html[data-theme="nocturne"] .btn-round:active { padding: 1px 0 0 1px; }
html[data-theme="nocturne"] .btn-round::before {
  content: "";
  width: 4px;
  height: 7px;
  background: var(--nc-paper);
}
html[data-theme="nocturne"] .btn-round.prev::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h1v1h-1zM2 1h2v1h-2zM1 2h3v1h-3zM0 3h4v1h-4zM1 4h3v1h-3zM2 5h2v1h-2zM3 6h1v1h-1z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h1v1h-1zM2 1h2v1h-2zM1 2h3v1h-3zM0 3h4v1h-4zM1 4h3v1h-3zM2 5h2v1h-2zM3 6h1v1h-1z'/%3E%3C/svg%3E") no-repeat;
}
html[data-theme="nocturne"] .btn-round.next::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h3v1h-3zM0 3h4v1h-4zM0 4h3v1h-3zM0 5h2v1h-2zM0 6h1v1h-1z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM0 1h2v1h-2zM0 2h3v1h-3zM0 3h4v1h-4zM0 4h3v1h-3zM0 5h2v1h-2zM0 6h1v1h-1z'/%3E%3C/svg%3E") no-repeat;
}

/* segmented progress (lavi32 loader), same marching blocks as the boot bar */
html[data-theme="nocturne"] .progress {
  height: 20px;
  padding: 3px;
  border: 1px solid;
  border-color: var(--nc-night) var(--nc-mist) var(--nc-mist) var(--nc-night);
  background: var(--nc-ink);
  overflow: clip; /* same content-box clip as the boot bar */
  overflow-clip-margin: content-box;
}
html[data-theme="nocturne"] .progress > div {
  width: 80px;
  background: repeating-linear-gradient(90deg, var(--nc-mist) 0 8px, transparent 8px 10px);
  animation-duration: 2.8s;
  animation-timing-function: steps(28);
}

/* combobox: sunken ink field + a raised drop button drawn in the background */
html[data-theme="nocturne"] #screen select {
  -webkit-appearance: none;
  appearance: none;
  height: 21px;
  padding: 2px 22px 2px 5px;
  border: 0;
  border-radius: 0;
  background: var(--nc-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' shape-rendering='crispEdges'%3E%3Crect width='16' height='17' fill='%2302060f'/%3E%3Crect width='15' height='16' fill='%237f9bbd'/%3E%3Crect x='1' y='1' width='14' height='15' fill='%230a1428'/%3E%3Crect x='1' y='1' width='13' height='14' fill='%233b5578'/%3E%3Crect x='2' y='2' width='12' height='13' fill='%231a2c4c'/%3E%3Cpath fill='%23d4e0ee' d='M4 6h7v1h-7zM5 7h5v1h-5zM6 8h3v1h-3zM7 9h1v1h-1z'/%3E%3C/svg%3E") no-repeat right 2px top 2px;
  color: var(--nc-paper);
  font: 11px var(--nc-ui);
  box-shadow: var(--nc-sunken);
  cursor: pointer;
}
html[data-theme="nocturne"] #screen select:focus-visible { outline: 1px dotted var(--nc-paper); outline-offset: -5px; }
html[data-theme="nocturne"] #screen option { background: var(--nc-night); color: var(--nc-paper); }

/* trackbar: sunken groove + a raised slab of a thumb */
html[data-theme="nocturne"] #screen input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 22px;
  margin: 0;
  background: none;
  cursor: pointer;
}
html[data-theme="nocturne"] #screen input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--nc-ink);
  box-shadow: inset 1px 1px var(--nc-night), inset -1px -1px var(--nc-mist);
}
html[data-theme="nocturne"] #screen input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 20px;
  margin-top: -8px;
  border: 0;
  border-radius: 0;
  background: var(--nc-deep);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] #screen input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--nc-ink);
  box-shadow: inset 1px 1px var(--nc-night), inset -1px -1px var(--nc-mist);
}
html[data-theme="nocturne"] #screen input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: var(--nc-deep);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] #screen input[type="range"]:focus-visible { outline: 1px dotted var(--nc-paper); outline-offset: 0; }

html[data-theme="nocturne"] #screen input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
html[data-theme="nocturne"] #screen input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
html[data-theme="nocturne"] #screen input[type="color"]::-moz-color-swatch { border: 0; border-radius: 0; }

html[data-theme="nocturne"] #screen textarea { border-radius: 0; }

/* ------------------------------------------------------------ message box */
html[data-theme="nocturne"] .msgbox { background: var(--nc-deep); }
html[data-theme="nocturne"] .msgbox-text { padding-top: 3px; line-height: 1.45; }
/* the default button gets the extra black rim, like Win95 */
html[data-theme="nocturne"] .msgbox .btn { box-shadow: 0 0 0 1px var(--nc-black), var(--nc-raised); }
html[data-theme="nocturne"] .msgbox .btn:active { box-shadow: 0 0 0 1px var(--nc-black), var(--nc-pressed); }

/* ------------------------------------------------------------ about: a cassette J-card */
html[data-theme="nocturne"] .about {
  display: flex; /* column, so the spine below can sit at the bottom of whatever height the window has */
  flex-direction: column;
  padding: 16px 18px 14px;
  background: var(--nc-night);
  box-shadow: var(--nc-sunken);
}
/* the J-card spine: a strip between two dashed fold lines along the bottom, the tape's
   title (the theme: a nocturne) on the left, the tape stamp on the right. The right half
   is joined with en spaces (U+2002), which justify doesn't stretch, so only the one real
   space between the halves grows. */
html[data-theme="nocturne"] .about::after {
  content: "nocturne the\2002 one\2002 and\2002 only"; /* "\2002 " = one en space; the space ends the escape */
  flex: none;
  margin-top: auto;
  padding: 0 2px 0 3px;
  border-top: 1px dashed var(--nc-steel);
  border-bottom: 1px dashed var(--nc-steel);
  font: 12px/24px var(--nc-serif);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
  overflow: hidden;
  color: var(--nc-mist);
}
html[data-theme="nocturne"] .about-card {
  gap: 18px;
  align-items: flex-end;
  padding-bottom: 14px;
  border-bottom: 3px double var(--nc-steel);
}
/* photo-booth print: paper frame with a worn, dithered edge and a fat bottom margin */
html[data-theme="nocturne"] .about-avatar {
  width: 76px;
  height: 86px;
  padding: 4px 4px 14px;
  border: 2px solid transparent;
  /* layers: dark "photo" area, paper frame, dithered worn edge */
  background:
    repeating-conic-gradient(var(--nc-night) 0 25%, var(--nc-ink) 0 50%) 0 0 / 2px 2px content-box,
    linear-gradient(var(--nc-paper), var(--nc-paper)) padding-box,
    repeating-conic-gradient(var(--nc-paper) 0 25%, var(--nc-steel) 0 50%) 0 0 / 2px 2px border-box;
  box-shadow: 3px 3px 0 var(--nc-ink);
}
html[data-theme="nocturne"] .about-avatar > svg,
html[data-theme="nocturne"] .about-avatar > img {
  width: 64px;
  height: 64px; /* 16px art at exactly 4x */
}
html[data-theme="nocturne"] .about-id { min-width: 0; padding-bottom: 2px; }
/* the little print along the top of a tape label */
html[data-theme="nocturne"] .about-id::before {
  content: "the one and only";
  display: block;
  margin-bottom: 8px;
  font: 9px/1 var(--nc-ui);
  letter-spacing: 0.25em;
  color: var(--nc-mist);
}
html[data-theme="nocturne"] .about-name {
  font: normal 32px/1.05 var(--nc-serif);
  text-transform: uppercase;
  letter-spacing: 0.45em;
  margin-right: -0.45em;
  color: var(--nc-white);
}
html[data-theme="nocturne"] .about-tag {
  margin-top: 6px;
  font: italic 15px/1.25 var(--nc-serif);
  letter-spacing: 0.02em;
  color: var(--nc-mist);
}

/* specs as a typed tracklist: "A1 OS ............ lavinux 1.0" */
html[data-theme="nocturne"] .about-specs {
  display: block;
  margin: 14px 0 16px;
  counter-reset: nc-track;
  font: 13px/1.6 var(--nc-mono);
}
html[data-theme="nocturne"] .about-spec { display: flex; align-items: baseline; }
html[data-theme="nocturne"] .about-specs dt {
  flex: 1;
  display: flex;
  align-items: baseline;
  min-width: 0;
  counter-increment: nc-track;
  color: var(--nc-paper);
}
html[data-theme="nocturne"] .about-specs dt::before {
  content: "A" counter(nc-track);
  flex: none;
  width: 3.2ch;
  color: var(--nc-olive);
  font-weight: bold;
}
/* dotted leader, one pixel dot every three */
html[data-theme="nocturne"] .about-specs dt::after {
  content: "";
  flex: 1;
  min-width: 2ch;
  height: 1px;
  margin: 0 8px;
  background: repeating-linear-gradient(90deg, var(--nc-mist) 0 1px, transparent 1px 3px);
}
html[data-theme="nocturne"] .about-specs dd { flex: none; max-width: 60%; text-align: right; color: var(--nc-white); }

/* the bio: a photocopied paper insert */
html[data-theme="nocturne"] .about-bio {
  margin: 0 0 18px;
  padding: 10px 13px 11px;
  background: var(--nc-paper);
  color: var(--nc-ink);
  font: 14px/1.5 var(--nc-serif);
  box-shadow: inset 0 0 0 1px var(--nc-mist), 3px 3px 0 var(--nc-ink);
}
html[data-theme="nocturne"] .about-bio-lead { font-variant: small-caps; letter-spacing: 0.06em; }

html[data-theme="nocturne"] .about-links-title {
  margin-bottom: 8px;
  font: normal 12px/1 var(--nc-serif);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--nc-mist);
}
html[data-theme="nocturne"] .about-links-title::before {
  content: "B-SIDE / ";
  color: var(--nc-olive);
  font-weight: bold;
}
html[data-theme="nocturne"] .about-links { gap: 5px; margin-bottom: 18px; }
html[data-theme="nocturne"] .about-link {
  height: 26px;
  padding: 0 9px 0 6px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  box-shadow: var(--nc-raised);
  font: 11px var(--nc-ui);
}
html[data-theme="nocturne"] .about-link:active { box-shadow: var(--nc-pressed); }
html[data-theme="nocturne"] .about-link:active > * { translate: 1px 1px; }
html[data-theme="nocturne"] .about-link:hover .about-link-label { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ explorer */
html[data-theme="nocturne"] .explorer { background: var(--nc-deep); }
html[data-theme="nocturne"] .explorer-bar {
  align-items: center;
  gap: 6px;
  padding: 3px 4px 4px;
}
html[data-theme="nocturne"] .explorer-bar::before { content: "Address"; color: var(--nc-mist); }
html[data-theme="nocturne"] .explorer-path {
  flex: 1;
  min-width: 0;
  height: 21px;
  padding: 3px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--nc-ink);
  color: var(--nc-paper);
  font: 12px/15px var(--nc-mono);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .explorer-count { color: var(--nc-mist); white-space: nowrap; }
html[data-theme="nocturne"] .explorer-grid {
  margin: 0 4px 4px;
  background: var(--nc-ink);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .explorer-status {
  margin: 0 4px 3px;
  padding: 2px 18px 2px 6px;
  color: var(--nc-mist);
  box-shadow: var(--nc-sunken-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="nocturne"] .explorer-empty { color: var(--nc-mist); font-style: italic; }
html[data-theme="nocturne"] .file-tile { color: var(--nc-paper); font: 11px/1.25 var(--nc-ui); }
html[data-theme="nocturne"] .file-tile.selected .file-tile-label {
  background: var(--nc-steel);
  color: var(--nc-white);
  outline: 1px dotted var(--nc-paper);
}
/* the theme that's on screen right now (label stays regular weight so
   "nocturne.theme" still fits on one line) */
html[data-theme="nocturne"] .file-tile.current::after {
  content: "(current)";
  font-size: 10px;
  color: var(--nc-olive);
}
/* picture thumbnails in a raised frame */
html[data-theme="nocturne"] .file-tile-img.thumb {
  padding: 4px;
  background: var(--nc-deep);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] .file-tile.selected .file-tile-img.thumb { background: var(--nc-dither); }

/* ------------------------------------------------------------ photo viewer */
html[data-theme="nocturne"] .viewer { background: var(--nc-deep); }
html[data-theme="nocturne"] .viewer-stage {
  margin: 0 3px;
  background: var(--nc-dither-dark);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .viewer-stage img { box-shadow: 0 0 0 1px var(--nc-black), 3px 3px 0 var(--nc-black); }
html[data-theme="nocturne"] .viewer-bar { gap: 8px; padding: 4px; }
html[data-theme="nocturne"] .viewer-count {
  min-width: 64px;
  padding: 3px 8px;
  text-align: center;
  background: var(--nc-ink);
  color: var(--nc-olive);
  font: bold 12px/15px var(--nc-mono);
  box-shadow: var(--nc-sunken-1);
}

/* ------------------------------------------------------------ lavpad */
html[data-theme="nocturne"] .textedit { background: var(--nc-deep); }
html[data-theme="nocturne"] .textedit-menu { gap: 0; padding: 1px 2px 2px; }
html[data-theme="nocturne"] .textedit-menu span { display: inline-block; padding: 2px 7px; cursor: default; }
html[data-theme="nocturne"] .textedit-menu span::first-letter { text-decoration: underline; } /* Alt-key hints */
html[data-theme="nocturne"] .textedit-menu span:hover { background: var(--nc-steel); color: var(--nc-white); }
html[data-theme="nocturne"] .textedit-text {
  margin: 0 3px 3px;
  padding: 7px 9px;
  background: var(--nc-ink);
  color: var(--nc-paper);
  caret-color: var(--nc-paper);
  font: 13px/1.5 var(--nc-mono);
  box-shadow: var(--nc-sunken);
}

/* ------------------------------------------------------------ lavPaint (MS Paint 95) */
html[data-theme="nocturne"] .paint { background: var(--nc-deep); }
html[data-theme="nocturne"] .paint-toolbar { padding: 3px 4px 5px; }
html[data-theme="nocturne"] .paint-tools { gap: 0; }
html[data-theme="nocturne"] .paint-tool {
  width: 26px;
  height: 26px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font-size: 13px;
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] .paint-tool:active { box-shadow: var(--nc-pressed); }
html[data-theme="nocturne"] .paint-tool.active { background: var(--nc-dither); box-shadow: var(--nc-pressed); }
html[data-theme="nocturne"] .paint-tool:active > *,
html[data-theme="nocturne"] .paint-tool.active > * { translate: 1px 1px; }
html[data-theme="nocturne"] .paint-size { color: var(--nc-mist); }
html[data-theme="nocturne"] .paint-actions { gap: 3px; }
/* the grey Paint workspace, here a dark dither, with the canvas sat on it */
html[data-theme="nocturne"] .paint-area {
  margin: 0 3px;
  padding: 6px;
  background: var(--nc-dither-dark);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .paint-area canvas { box-shadow: 2px 2px 0 var(--nc-black); }
html[data-theme="nocturne"] .paint-palette { gap: 2px; padding: 4px 4px 3px; }
html[data-theme="nocturne"] .paint-current {
  margin-right: 5px;
  padding: 4px;
  background: var(--nc-ink);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .paint-current span { box-shadow: 0 0 0 1px var(--nc-black); }
html[data-theme="nocturne"] .paint-swatch { box-shadow: var(--nc-sunken); }
html[data-theme="nocturne"] .paint-swatch:active { box-shadow: var(--nc-pressed); }
html[data-theme="nocturne"] .paint-custom { margin-left: 4px; }
html[data-theme="nocturne"] .paint-custom input {
  padding: 3px;
  background: var(--nc-deep);
  box-shadow: var(--nc-sunken);
}

/* ------------------------------------------------------------ notes: list + index card */
html[data-theme="nocturne"] .notes { background: var(--nc-deep); }
html[data-theme="nocturne"] .notes-side-bar { padding: 3px 4px 5px 3px; gap: 3px; }
html[data-theme="nocturne"] .notes-side-bar .btn { padding-left: 8px; padding-right: 8px; }
html[data-theme="nocturne"] .notes-side-bar .btn:active { padding-left: 9px; padding-right: 7px; }
html[data-theme="nocturne"] .notes-list {
  margin: 0 4px 3px 3px;
  padding: 3px;
  background: var(--nc-ink);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .notes-list li { padding: 3px 5px; color: var(--nc-paper); }
html[data-theme="nocturne"] .notes-list li:hover { background: var(--nc-night); }
html[data-theme="nocturne"] .notes-list li.active {
  background: var(--nc-steel);
  color: var(--nc-white);
  outline: 1px dotted var(--nc-paper);
  outline-offset: -1px;
}
/* ruled index card: 20px lines, the header rule in olive, ink typewriter text */
html[data-theme="nocturne"] .notes-text {
  margin: 3px 3px 3px 0;
  padding: 9px 12px 9px 14px;
  font: 13px/20px var(--nc-mono);
  color: var(--nc-ink);
  caret-color: var(--nc-ink);
  background-color: var(--nc-paper);
  background-image:
    linear-gradient(var(--nc-olive), var(--nc-olive)),
    repeating-linear-gradient(180deg, transparent 0 19px, var(--nc-mist) 19px 20px);
  background-size: 100% 2px, 100% 20px;
  background-position: 0 28px, 0 9px;
  background-repeat: no-repeat, repeat;
  background-attachment: local;
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .notes-text::placeholder { color: var(--nc-steel); }

/* ------------------------------------------------------------ minesweeper (Win95, in navy) */
html[data-theme="nocturne"] .mines {
  padding: 7px 8px 8px;
  background: var(--nc-deep);
}
html[data-theme="nocturne"] .mines-menu { align-items: center; gap: 4px; margin-bottom: 7px; }
html[data-theme="nocturne"] .mines-hud {
  margin-bottom: 7px;
  padding: 5px 6px;
  box-shadow: var(--nc-sunken);
}
/* 7-segment-ish LCDs: olive digits over faint unlit "888"s */
html[data-theme="nocturne"] .mines-lcd {
  position: relative;
  z-index: 0; /* own stacking context, so the unlit "888" (z -1) sits under the lit digits */
  min-width: 0;
  padding: 2px 3px 1px;
  background: var(--nc-black);
  color: var(--nc-olive);
  font: bold 22px/1 var(--nc-mono);
  letter-spacing: 0.02em;
  box-shadow: inset 1px 1px var(--nc-night), inset -1px -1px var(--nc-mist);
}
html[data-theme="nocturne"] .mines-lcd::before {
  content: "888";
  position: absolute;
  inset: 2px 3px 1px;
  color: #161b08; /* olive, unlit */
  z-index: -1;
}
html[data-theme="nocturne"] .mines-face {
  position: relative;
  width: 28px;
  height: 28px;
  font-size: 16px;
  background: var(--nc-deep);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] .mines-face svg { width: 16px; height: 16px; }
html[data-theme="nocturne"] .mines-face:active { box-shadow: var(--nc-pressed); }
html[data-theme="nocturne"] .mines-face:active > * { translate: 1px 1px; }

/* the board sits in a 3px sunken well; cells are real borders so they're never covered.
   20px cells (Win95 used 16): chunky enough to hit, and Hard (30 wide) stays well inside
   a 1024x768 screen even from a cascaded window position. */
html[data-theme="nocturne"] .mines-board {
  --size: 20px;
  border: 3px solid;
  border-color: var(--nc-ink) var(--nc-mist) var(--nc-mist) var(--nc-ink);
  background: var(--nc-night);
}
html[data-theme="nocturne"] .mines-board.won { border-color: var(--nc-ink) var(--nc-olive) var(--nc-olive) var(--nc-ink); }
html[data-theme="nocturne"] .mines-board.lost { border-color: var(--nc-ink) var(--nc-red) var(--nc-red) var(--nc-ink); }
html[data-theme="nocturne"] .mines-board.won .cell,
html[data-theme="nocturne"] .mines-board.lost .cell { cursor: default; }
html[data-theme="nocturne"] .cell {
  position: relative;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font: bold 13px/1 var(--nc-ui);
  box-shadow: var(--nc-raised);
}
html[data-theme="nocturne"] #screen .cell:focus-visible { outline-offset: -5px; }
/* pressing an unopened cell shows it flat, like the real thing */
html[data-theme="nocturne"] .mines-board:not(.won):not(.lost) .cell:not(.open):not(.flag):active {
  background: var(--nc-night);
  box-shadow: inset 1px 1px var(--nc-ink);
}
/* revealed: flat night with a 1px ink grid on the top/left of every cell */
html[data-theme="nocturne"] .cell.open {
  background: var(--nc-night);
  box-shadow: inset 1px 1px var(--nc-ink);
}
html[data-theme="nocturne"] .cell[data-n="1"] { color: var(--nc-mist); }
html[data-theme="nocturne"] .cell[data-n="2"] { color: var(--nc-olive); }
html[data-theme="nocturne"] .cell[data-n="3"] { color: var(--nc-red); }
html[data-theme="nocturne"] .cell[data-n="4"] { color: var(--nc-paper); }
html[data-theme="nocturne"] .cell[data-n="5"] { color: #c58b4a; }
html[data-theme="nocturne"] .cell[data-n="6"] { color: #5fa8a0; }
html[data-theme="nocturne"] .cell[data-n="7"] { color: var(--nc-white); }
html[data-theme="nocturne"] .cell[data-n="8"] { color: var(--nc-steel); }
html[data-theme="nocturne"] .cell.boom { background: var(--nc-red); }
/* a flag where there was no mine: crossed out with a red pixel X */
html[data-theme="nocturne"] .cell.wrong::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 14px;
  background: var(--nc-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h2v1h-2zM6 0h2v1h-2zM1 1h2v1h-2zM5 1h2v1h-2zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM1 5h2v1h-2zM5 5h2v1h-2zM0 6h2v1h-2zM6 6h2v1h-2z'/%3E%3C/svg%3E") center / 16px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h2v1h-2zM6 0h2v1h-2zM1 1h2v1h-2zM5 1h2v1h-2zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM1 5h2v1h-2zM5 5h2v1h-2zM0 6h2v1h-2zM6 6h2v1h-2z'/%3E%3C/svg%3E") center / 16px 14px no-repeat;
}

/* ------------------------------------------------------------ terminal */
html[data-theme="nocturne"] .term {
  padding: 7px 9px;
  background: var(--nc-ink);
  color: var(--nc-paper);
  font: 13px/1.35 var(--nc-mono);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .term-accent { color: var(--nc-mist); }
html[data-theme="nocturne"] .term-echo { color: var(--nc-mist); }
html[data-theme="nocturne"] .term-ps1 { color: var(--nc-olive); font-weight: bold; }
html[data-theme="nocturne"] .term-line input { caret-color: var(--nc-paper); }

/* ------------------------------------------------------------ lavi32 loader */
/* the window has a fixed 300x150 size; centre the text + bar instead of leaving a gap below */
html[data-theme="nocturne"] .lavi32-dlg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px 12px;
  background: var(--nc-deep);
}

/* your profile picture: 50px pixel art shown at exactly 2x inside the photo-booth print */
html[data-theme="nocturne"] .about-avatar:has(> img) { width: 112px; height: 122px; }
html[data-theme="nocturne"] .about-avatar > img { width: 100px; height: 100px; }
html[data-theme="nocturne"] #screen .about-avatar > img { image-rendering: pixelated; } /* beats the #screen img rule above */

/* ------------------------------------------------------------ log-on screen */
/* a Win95 "Welcome to Windows" dialog, re-inked in navy, over a dimmed wallpaper */
html[data-theme="nocturne"] .login { background: rgba(2, 6, 15, 0.45); }
html[data-theme="nocturne"] .login-box {
  padding: 3px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font: 11px/1.35 var(--nc-ui);
  box-shadow: var(--nc-raised), 3px 3px 0 var(--nc-black);
}
html[data-theme="nocturne"] .login-title {
  height: 20px;
  padding: 0 4px;
  background: linear-gradient(90deg, var(--nc-night), var(--nc-steel));
  color: var(--nc-paper);
  font: bold 12px/20px var(--nc-serif);
  letter-spacing: 0.12em;
}
html[data-theme="nocturne"] .login-avatar {
  padding: 3px;
  width: 106px;
  height: 106px;
  background: var(--nc-dither-dark);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] #screen .login-avatar img { image-rendering: pixelated; }
html[data-theme="nocturne"] .login-msg { font: italic 14px/1.2 var(--nc-serif); color: var(--nc-paper); }
html[data-theme="nocturne"] .login-label { color: var(--nc-mist); }
html[data-theme="nocturne"] .login-row input {
  height: 22px;
  padding: 2px 5px;
  border: 0;
  outline: 0;
  background: var(--nc-ink);
  color: var(--nc-paper);
  font: 11px var(--nc-ui);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .login-row input:focus { outline: 1px dotted var(--nc-mist); outline-offset: -4px; }
/* locked user name: greyed like a disabled Win95 field */
html[data-theme="nocturne"] .login-row .login-user {
  background: var(--nc-dither-track);
  color: var(--nc-mist);
  letter-spacing: 0.04em;
}
html[data-theme="nocturne"] .login-hint { color: var(--nc-olive); font-size: 11px; }
html[data-theme="nocturne"] .login-ok { font-weight: bold; }

/* ------------------------------------------------------------ right-click menu */
html[data-theme="nocturne"] .ctx-menu {
  padding: 3px;
  background: var(--nc-deep);
  color: var(--nc-paper);
  font: 11px/1.3 var(--nc-ui);
  box-shadow: var(--nc-raised), 2px 2px 0 var(--nc-black);
}
html[data-theme="nocturne"] .ctx-item { padding: 4px 14px 4px 20px; color: inherit; font: inherit; }
html[data-theme="nocturne"] .ctx-item:not(:disabled):hover,
html[data-theme="nocturne"] .ctx-item:not(:disabled):focus-visible,
html[data-theme="nocturne"] .ctx-item:not(:disabled):focus { background: var(--nc-steel); color: var(--nc-white); }
/* Win95 disabled text: etched, with a light copy offset under it */
html[data-theme="nocturne"] .ctx-item:disabled { color: var(--nc-steel); text-shadow: 1px 1px 0 var(--nc-night); }
html[data-theme="nocturne"] .ctx-hint { font-family: var(--nc-mono); opacity: 1; color: var(--nc-mist); }
html[data-theme="nocturne"] .ctx-item:not(:disabled):hover .ctx-hint,
html[data-theme="nocturne"] .ctx-item:not(:disabled):focus .ctx-hint { color: var(--nc-paper); }
html[data-theme="nocturne"] .ctx-sep { height: 2px; margin: 3px 2px; box-shadow: var(--nc-etch-bottom); }

/* ------------------------------------------------------------ rename prompt + lavpad status */
html[data-theme="nocturne"] .prompt { background: var(--nc-deep); color: var(--nc-paper); }
html[data-theme="nocturne"] .prompt-label span { color: var(--nc-mist); }
html[data-theme="nocturne"] .prompt-input {
  height: 22px;
  padding: 2px 5px;
  border: 0;
  outline: 0;
  background: var(--nc-ink);
  color: var(--nc-paper);
  font: 11px var(--nc-ui);
  box-shadow: var(--nc-sunken);
}
html[data-theme="nocturne"] .prompt-input::selection { background: var(--nc-steel); color: var(--nc-white); }
html[data-theme="nocturne"] .textedit-status {
  background: var(--nc-deep);
  color: var(--nc-mist);
  font: 11px/18px var(--nc-ui);
  box-shadow: var(--nc-sunken-1);
}
html[data-theme="nocturne"] .desk-icon-img.thumb { box-shadow: 0 0 0 1px var(--nc-black), 2px 2px 0 var(--nc-black); }
/* saved images are crushed to ~64px on purpose: keep their pixels hard (beats the #screen img rule) */
html[data-theme="nocturne"] #screen .desk-icon-img.thumb img,
html[data-theme="nocturne"] #screen .viewer-stage img.pixelated { image-rendering: pixelated; }