/* =========================================================
   Anton Vasiliev — "2004 homepage" desktop cut. Windows 98/XP-ish
   chrome, draggable windows, a working console (real backend) and
   two of the site's real mini-games embedded in the Games tab.
   ========================================================= */

:root {
  --nd-accent: #ff8a00;
  --nd-blue-1: #3a93ff;
  --nd-blue-2: #0a5fe0;
  --nd-blue-3: #0a58d8;
  --nd-blue-4: #0a4fd0;
  --nd-panel: #ece9d8;
  --nd-panel-2: #d4d0c8;
  --nd-text-dim: #333;
}

html, body { overflow: hidden; background: #07060a; font-family: Tahoma, Verdana, sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; touch-action: manipulation; }
a { color: #0a3fc0; }
a:hover { color: #d00000; }

#nd-desktop {
  position: fixed;
  inset: 0;
  /* Fallback color only — it's what shows before #nd-wallpaper's iframe
     finishes loading, or if it fails to. The wallpaper itself supplies the
     actual background now, so there's no grid-line texture layered here
     anymore (it would just fight the animation for attention). */
  background-color: #0a0a0a;
  /* A slim, minimal arrow instead of the OS default — buttons/links keep
     their own pointer cursor since that's set directly on them, not inherited. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M2 2 L2 16 L6 12.3 L9 18.5 L11.8 17.2 L8.8 11 L15 11 Z' fill='white' stroke='%230a4fd0' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 2 2, auto;
}

/* The actual desktop wallpaper — a Wallpaper Engine "web" item (a p5.js
   particle sketch, static/wallpaper/blackhole/) running in its own iframe so
   its globals/canvas loop stay fully isolated from the page's own JS. Sits
   behind #nd-surface (z-index default 0 vs #nd-surface's own stacking
   context) and never receives input itself — pointer-events:none so it can
   never be the thing that "eats" a click/tap meant for an icon or window. */
#nd-wallpaper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* The desktop never scrolls: #nd-surface always exactly fills the viewport
   above the taskbar, and everything inside it is sized to fit — a fixed
   pixel canvas would either need scrolling on small screens or waste space
   on big ones, so window sizing instead comes from a responsive flex grid
   (see #nd-grid below). Dragging or resizing a window "detaches" it into
   free pixel positioning within this same fixed box (new_desktop.js). */
#nd-surface { position: absolute; inset: 0 0 40px 0; overflow: hidden; display: flex; }

/* ============ desktop icons ============ */
/* Icons fill top-to-bottom in a strip exactly one column wide. On a screen
   too short for all of them the rest wrap into a second column that spills
   out under the windows (they paint above it) instead of widening the strip
   and pushing every window aside — the Recycle Bin, last in line, goes first. */
#nd-icons { flex: 0 0 auto; width: 104px; padding: 10px 6px 10px 10px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 56px); grid-auto-columns: 88px; column-gap: 4px; min-height: 0; align-content: start; }
.nd-ico {
  background: none;
  color: #fff;
  font: 12px Tahoma, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 88px;
  height: 54px;
  flex: none;
  padding: 3px 4px;
  text-shadow: 1px 1px 0 #000;
  border-radius: 3px;
}
.nd-ico:hover, .nd-ico:focus-visible { background: rgba(58, 110, 220, 0.55); outline: 1px dotted #fff; }

/* ============ the 3-column responsive grid ============ */
#nd-grid { flex: 1 1 auto; display: flex; gap: 14px; padding: 10px 10px 10px 0; min-width: 0; min-height: 0; }
.nd-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.nd-col-left { flex: 1 1 clamp(200px, 15vw, 260px); min-width: 170px; }
.nd-col-mid { flex: 3 1 clamp(340px, 42vw, 760px); min-width: 280px; }
.nd-col-right { flex: 1.6 1 clamp(260px, 21vw, 440px); min-width: 210px; } /* wider on bigger monitors — GitHub/hh.ru/Contacts live here */

/* ============ windows ============ */
.nd-win {
  position: relative;
  flex: 1 1 0;
  min-height: 64px;
  background: var(--nd-panel);
  border: 3px solid var(--nd-blue-4);
  border-top: 0;
  border-radius: 9px 9px 3px 3px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #000;
}
/* visibility:hidden (not display:none) — a hidden window keeps its slot in
   the flex column, so showing/hiding one window never resizes its siblings */
.nd-win.nd-hidden { visibility: hidden; pointer-events: none; }
/* The template gives every window an inline max-height so it behaves in the
   responsive grid — but that same inline max-height silently caps a detached
   window's height forever (inline styles beat stylesheet rules unless
   !important), which is why dragging the resize handle used to make height
   stop growing partway through while width kept tracking the cursor. */
.nd-win.nd-detached { position: absolute; flex: none; max-height: none !important; }
/* A detached or maximized window is taken out of its column's flex flow
   (that's how CSS handles absolute/fixed positioning), which would otherwise
   free up its slot and make its siblings grow to fill the gap. This
   invisible placeholder takes its exact original flex-grow/max-height, so
   the column keeps its shape while the real window floats above it. Its
   border-box + a same-width (invisible) border have to match .nd-win's own
   box model exactly — a plain content-box div with no border computes a
   very slightly different flex size for the same flex-grow, which is what
   made every OTHER window in the column creep a pixel or two on each drag
   (compounding over a session into a visible jump). */
.nd-win-placeholder { flex: 1 1 0; min-height: 64px; visibility: hidden; box-sizing: border-box; border: 3px solid transparent; border-top: 0; }
.nd-win.nd-maximized {
  position: fixed !important;
  inset: 8px 8px 48px 8px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

/* Winamp / mini-games live outside #nd-grid (they start closed and float
   over the desktop instead of sharing a column with the always-open
   windows), so they need their own default box instead of one handed out
   by the responsive grid — new_desktop.js only takes over with inline
   left/top/width/height once the window is actually dragged or resized. */
#nd-win-music, #nd-win-games, #nd-win-videos, #nd-win-lol, .nd-app { position: absolute; }
#nd-win-music { left: 40px; top: 56px; width: 300px; height: 460px; }
#nd-win-games { left: 320px; top: 36px; width: 470px; height: 320px; }
#nd-win-videos { left: 200px; top: 90px; width: 480px; height: 420px; }
#nd-win-lol { left: 240px; top: 40px; width: 400px; height: 580px; }

.nd-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 0 50%, var(--nd-blue-4) 50% 58%, transparent 58% 66%, var(--nd-blue-4) 66% 74%, transparent 74% 82%, var(--nd-blue-4) 82% 90%, transparent 90%);
  opacity: 0.65;
}
.nd-resize:hover { opacity: 1; }
.nd-win.nd-maximized .nd-resize { display: none; }

.nd-tb {
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 8px;
  background: linear-gradient(var(--nd-blue-1), var(--nd-blue-2) 12%, var(--nd-blue-3) 60%, var(--nd-blue-4));
  color: #fff;
  font: bold 13px Tahoma, Verdana, sans-serif;
  text-shadow: 1px 1px 0 #002080;
  cursor: move;
  user-select: none;
  touch-action: none;
}
.nd-cap { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-tb-ico { flex: none; width: 16px; height: 16px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
.nd-tb button {
  width: 22px;
  height: 22px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(#5aa0ff, #1a5fe0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 13px Verdana;
}
.nd-tb button.nd-x { background: linear-gradient(#f08a6a, #c8371a); }
.nd-tb button:hover { filter: brightness(1.2); }

.nd-body { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 12px; font-size: 12.5px; line-height: 1.5; }
.nd-loading { color: var(--nd-text-dim); font-size: 12px; }

.nd-blink { animation: nd-blink 1s steps(2, start) infinite; }
@keyframes nd-blink { to { visibility: hidden; } }
.nd-tick { display: inline-block; white-space: nowrap; padding-left: 100%; animation: nd-tickmove 22s linear infinite; }
@keyframes nd-tickmove { to { transform: translateX(-100%); } }

/* ---- avatar window ---- */
.nd-avatar-body { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--nd-panel-2); }
/* .nd-avatar-pic { border: 3px inset #808080; background: #dfe9ff; } */
.nd-avatar-name {
  font: bold 20px Verdana, sans-serif;
  color: #0a2f8f;
  text-align: center;
  animation: rgb-shadow 3s linear infinite;
}

@keyframes rgb-shadow {
  0%   { text-shadow: 2px 2px 0 rgba(255, 0, 0, 0.6); }
  25%  { text-shadow: 2px 2px 0 rgba(255, 165, 0, 0.6); }
  50%  { text-shadow: 2px 2px 0 rgba(0, 255, 0, 0.6); }
  75%  { text-shadow: 2px 2px 0 rgba(255, 165, 0, 0.6); }
  100% { text-shadow: 2px 2px 0 rgba(255, 0, 0, 0.6); }
}
.nd-avatar-tagline { font: italic 12.5px Tahoma, Verdana, sans-serif; color: #555; text-align: center; padding: 0 6px; }
.nd-avatar-status { font-size: 12px; color: #000; }
.nd-avatar-status .nd-blink { color: #0a8a0a; }

/* ---- live-stat windows (steam / faceit / github) ---- */
.nd-win-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.nd-win-avatar-badge { width: 44px; height: 44px; flex: none; border-radius: 6px; background: #0e141b; color: #57cbde; display: flex; align-items: center; justify-content: center; font: bold 14px Verdana, sans-serif; overflow: hidden; }
.nd-win-avatar-badge img { width: 100%; height: 100%; object-fit: cover; }
.nd-win-name { font-weight: bold; font-size: 14px; }
.nd-win-sub { font-size: 11.5px; color: var(--nd-text-dim); }
.nd-win-link { font-size: 12px; }
.nd-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.nd-stat { background: #f2f2f2; border: 1px solid #c8c8c8; padding: 6px 8px; font-size: 11.5px; color: var(--nd-text-dim); }
.nd-stat b { display: block; font: bold 14px Verdana, sans-serif; color: #000; }
.nd-btn98 {
  display: inline-block;
  padding: 6px 12px;
  background: var(--nd-panel);
  border: 2px outset #fff;
  color: #000;
  font: bold 12px Tahoma, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
}
.nd-btn98:hover { color: #000; background: #fff8d0; }
.nd-btn98:active { border-style: inset; }
.nd-btn98.active { border-style: inset; background: #ffe6a8; }
.nd-block { display: block; }
.nd-not-connected { font-size: 12px; color: var(--nd-text-dim); }
.nd-not-connected code { background: #e6e6e6; padding: 1px 4px; font-family: 'Courier New', monospace; }

/* ---- steam / faceit specific ---- */
.nd-steam-body { background: linear-gradient(#1b2838, #171a21); color: #c7d5e0; }
.nd-steam-body .nd-not-connected { color: #8fb0c6; }
.nd-steam-body .nd-not-connected code { background: #0e141b; color: #c7d5e0; }
.nd-steam-status { font-size: 12px; color: #57cbde; }
.nd-steam-games-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #8fb0c6; margin: 8px 0 4px; }
.nd-steam-games { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.nd-steam-games li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.nd-steam-games img, .nd-steam-noicon { width: 20px; height: 20px; flex: none; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: #0e141b; }
.nd-steam-game-name { flex-grow: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nd-steam-hours { flex: none; color: #8fb0c6; font-family: 'Courier New', monospace; font-size: 11px; }
.nd-steam-dim { color: #8fb0c6; font-size: 12px; margin: 6px 0; }
.nd-steam-inv-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #8fb0c6; margin: 10px 0 4px; display: flex; justify-content: space-between; }
.nd-steam-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-bottom: 6px; }
.nd-steam-inv-item { width: 100%; background: #0e141b; border: 1px solid #2a475e; border-top: 3px solid var(--inv-color, #4b69ff); padding: 4px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; cursor: zoom-in; }
.nd-steam-inv-item img { max-width: 100%; max-height: 100%; }
.nd-steam-inv-item:hover, .nd-steam-inv-item:focus-visible { background: #16202c; border-color: var(--inv-color, #4b69ff); outline: 1px solid var(--inv-color, #4b69ff); }
.nd-steam-body .nd-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nd-steam-body .nd-stat { background: #0e141b; border: 1px solid #2a475e; color: #8fb0c6; }
.nd-steam-body .nd-stat b { color: #fff; }
.nd-faceit-body { background: #1f1f22; color: #e6e6e6; }
.nd-faceit-body .nd-not-connected { color: #b8b8b8; }
.nd-faceit-body .nd-not-connected code { background: #2a2a2e; color: #e6e6e6; }
.nd-faceit-body .nd-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nd-faceit-body .nd-stat { background: #2a2a2e; border: 1px solid #3a3a40; color: #b8b8b8; }
.nd-faceit-body .nd-stat b { color: #fff; }
.nd-faceit-country { font-size: 11.5px; color: #b8b8b8; }
.nd-faceit-matches-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #b8b8b8; margin: 10px 0 4px; }
.nd-faceit-matches { display: flex; gap: 5px; margin-bottom: 4px; }
.nd-faceit-match { width: 34px; height: 34px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: bold 11px Tahoma, Verdana, sans-serif; color: #fff; text-decoration: none; }
.nd-faceit-match.win { background: #2e8f3e; }
.nd-faceit-match.loss { background: #b03a3a; }
.nd-faceit-match.unknown { background: #4a4a50; }
.nd-faceit-match-kd { font: 9.5px 'Courier New', monospace; font-weight: normal; opacity: 0.9; }
.nd-faceit-level-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nd-faceit-lvl-ico { flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.nd-faceit-next { font-size: 10.5px; color: #8fd18f; background: rgba(46, 143, 62, 0.25); border: 1px solid #2e8f3e; border-radius: 3px; padding: 1px 5px; }
.nd-faceit-winbar-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 11.5px; color: #b8b8b8; }
.nd-faceit-winbar-label { flex: none; }
.nd-faceit-winbar { flex: 1 1 auto; height: 10px; background: #2a2a2e; border: 1px solid #3a3a40; overflow: hidden; }
.nd-faceit-winbar-fill { height: 100%; background: linear-gradient(90deg, #2e8f3e, #4fc766); }
.nd-faceit-winbar-pct { flex: none; font-weight: bold; color: #fff; }
.nd-faceit-form-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #b8b8b8; margin: 6px 0 4px; }
.nd-faceit-form { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.nd-faceit-bar { flex: 1 1 0; border-radius: 1px; min-height: 2px; }
.nd-faceit-bar.win { background: #2e8f3e; }
.nd-faceit-bar.loss { background: #b03a3a; }
.nd-faceit-bar.unknown { background: #4a4a50; }

/* ---- github window: avatar, extra stats, contribution heat strip ---- */
/* GitHub's own dark-mode palette, matching the Steam/FACEIT windows' pattern
   of theming the body to the service it represents. */
.nd-github-body { background: #0d1117; color: #c9d1d9; }
.nd-github-body .nd-win-name { color: #fff; }
.nd-github-body .nd-win-link { color: #58a6ff; }
.nd-github-body .nd-not-connected { color: #8b949e; }
.nd-github-body .nd-not-connected code { background: #161b22; color: #c9d1d9; }
.nd-gh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nd-gh-since { font-size: 11px; color: #8b949e; }
.nd-gh-lines { grid-column: 1 / -1; }
.nd-gh-lang-head { align-items: center; }
.nd-gh-switch { display: inline-flex; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; text-transform: none; letter-spacing: 0; }
.nd-gh-switch button { padding: 2px 8px; font-size: 11px; color: #8b949e; background: #0d1117; }
.nd-gh-switch button + button { border-left: 1px solid #30363d; }
.nd-gh-switch button:hover { color: #c9d1d9; }
.nd-gh-switch button.active { background: #1f6feb; color: #fff; }
.nd-gh-lines span { display: block; font-size: 10.5px; color: #6e7681; }
.nd-gh-cell.nd-gh-pad { visibility: hidden; }
.nd-gh-langbar { display: flex; height: 8px; gap: 2px; margin-bottom: 6px; border-radius: 4px; overflow: hidden; }
.nd-gh-langbar span { min-width: 4px; }
.nd-gh-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-bottom: 10px; font-size: 11.5px; color: #c9d1d9; }
.nd-gh-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.nd-gh-legend b { color: #8b949e; font-weight: normal; }

/* ---- Codewars window: their dark UI with the kyu-colored hexagon badges ---- */
.nd-codewars-body { background: #262729; color: #d6d6d6; }
.nd-codewars-body .nd-win-name { color: #fff; }
.nd-codewars-body .nd-not-connected { color: #a3a3a3; }
.nd-codewars-body .nd-stat { background: #303133; border: 1px solid #3f4043; color: #a3a3a3; }
.nd-codewars-body .nd-stat b { color: #fff; }
.nd-cw-hex { flex: none; display: block; }
.nd-cw-honor { font-size: 12px; color: #a3a3a3; }
.nd-cw-honor b { color: #ecb613; }
.nd-cw-langs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; font-size: 12px; }
.nd-cw-lang { display: inline-flex; align-items: center; gap: 5px; }
/* League of Legends: the client's navy-and-gold */
.nd-lol-body { padding: 0; background: #010a13; color: #a09b8c; }
.nd-lol-hero { position: relative; min-height: 170px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 12px; box-sizing: border-box; background: #0a1428 center 25% / cover no-repeat; border-bottom: 2px solid #c8aa6e; }
.nd-lol-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(1, 10, 19, 0) 30%, rgba(1, 10, 19, 0.92)); }
.nd-lol-hero > * { position: relative; }
.nd-lol-kicker { font: bold 10.5px Tahoma, Verdana, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #0ac8b9; }
.nd-lol-champ { font: bold 30px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: 0.05em; text-transform: uppercase; color: #f0e6d2; text-shadow: 0 2px 6px #000; }
.nd-lol-id { font-size: 11.5px; color: #c8aa6e; }
.nd-lol-mastery { flex: none; width: 54px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #c8aa6e; border-radius: 50%; background: radial-gradient(#1e2328, #010a13); box-shadow: 0 0 12px rgba(200, 170, 110, 0.45); color: #f0e6d2; font: bold 20px/1 Georgia, serif; }
.nd-lol-mastery span { margin-top: 2px; font: 8px Tahoma, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #c8aa6e; }
.nd-lol-stats { padding: 10px 12px 0; margin-bottom: 4px; }
.nd-lol-body .nd-stat { background: #0a1428; border: 1px solid #463714; color: #a09b8c; }
.nd-lol-body .nd-stat b { color: #f0e6d2; }
.nd-lol-stats .nd-stat span { display: block; font-size: 10.5px; color: #7e7a6f; }
.nd-lol-label { margin: 6px 12px 5px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.nd-lol-bars { display: flex; flex-direction: column; gap: 5px; padding: 0 12px; }
.nd-lol-bar { display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11.5px; }
.nd-lol-bar img { width: 24px; height: 24px; object-fit: cover; border: 1px solid #463714; }
.nd-lol-bar.main { color: #f0e6d2; font-weight: bold; }
.nd-lol-track { height: 8px; background: #1e2328; overflow: hidden; }
.nd-lol-track span { display: block; height: 100%; background: #5b5a56; }
.nd-lol-bar.main .nd-lol-track span { background: linear-gradient(90deg, #785a28, #c8aa6e); }
.nd-lol-pts { font: 11px 'Courier New', monospace; text-align: right; }
.nd-lol-links { display: flex; gap: 6px; padding: 12px 12px 0; }
.nd-lol-links .nd-btn98 { flex: 1 1 0; }
.nd-lol-note { padding: 8px 12px 12px; font-size: 10.5px; color: #5b5a56; }
.nd-github-body .nd-stat { background: #161b22; border: 1px solid #30363d; color: #8b949e; }
.nd-github-body .nd-stat b { color: #fff; }
.nd-gh-heat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #8b949e; margin: 4px 0 4px; display: flex; justify-content: space-between; }
.nd-gh-heat-wrap { overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.nd-gh-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 9px); gap: 2px; width: max-content; }
.nd-gh-cell { width: 9px; height: 9px; border-radius: 2px; background: #161b22; }
.nd-gh-cell[data-lvl="1"] { background: #0e4429; }
.nd-gh-cell[data-lvl="2"] { background: #006d32; }
.nd-gh-cell[data-lvl="3"] { background: #26a641; }
.nd-gh-cell[data-lvl="4"] { background: #39d353; }

/* ---- explorer window ---- */
.nd-addr { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #aca899; font-size: 12px; }
.nd-addr-val { flex-grow: 1; background: #fff; border: 1px solid #7f9db9; padding: 3px 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nd-explorer { flex-grow: 1; display: flex; min-height: 0; }
.nd-explorer-side { flex: none; width: 172px; background: linear-gradient(#7ba2e7, #6375d6); padding: 12px; display: flex; flex-direction: column; gap: 5px; box-sizing: border-box; color: #fff; }
.nd-explorer-side-title { font: bold 12px Tahoma, Verdana, sans-serif; margin-bottom: 4px; }
.nd-tabbtn { display: block; width: 100%; text-align: left; padding: 7px 10px; font: bold 13px Tahoma, Verdana, sans-serif; border-radius: 3px; color: #fff; }
.nd-tabbtn:hover { outline: 1px solid #316ac5; }
.nd-tabbtn.active { background: #316ac5; color: #fff; }
.nd-hint { margin-top: auto; background: var(--nd-panel); padding: 8px; font-size: 12px; color: #000; line-height: 1.4; }
.nd-explorer-main { flex-grow: 1; min-width: 0; background: #fff; overflow-y: auto; padding: 18px 22px; box-sizing: border-box; color: #000; }

.nd-h2 { font: bold 15px Tahoma, Verdana, sans-serif; color: #0a2f8f; border-bottom: 2px solid var(--nd-blue-4); padding-bottom: 4px; margin: 16px 0 8px; }
.nd-doc-name { font: bold 24px Verdana, sans-serif; color: #0a2f8f; }
.nd-doc-role { font-size: 14px; font-weight: bold; }
.nd-doc-meta { color: #222; font-size: 12.5px; margin-top: 2px; }
.nd-doc-about p { margin: 8px 0; font-size: 13px; line-height: 1.5; }
.nd-job { margin-bottom: 12px; }
.nd-job-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; }
.nd-job-head span { white-space: nowrap; color: #222; font-size: 12px; }
.nd-job p { margin: 4px 0; font-size: 12.5px; }
.nd-highlight { color: #a45a00; }
.nd-taskgroup { margin: 6px 0; }
.nd-taskcat { font-weight: bold; font-size: 12.5px; margin-bottom: 2px; }
.nd-job ul { margin: 2px 0 6px 18px; padding: 0; }
.nd-job li { font-size: 12px; color: #222; }
.nd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-chip { display: inline-block; padding: 3px 9px; background: var(--nd-panel); border: 1px solid #808080; font-size: 12px; color: #000; }

.nd-pdf-bar { display: flex; align-items: center; gap: 8px; background: var(--nd-panel-2); border: 2px outset #fff; padding: 6px 8px; flex-wrap: wrap; margin-bottom: 10px; }
.nd-pdf-bar b { font-size: 12px; margin-right: auto; }
.nd-pdf-preview { background: #5a5a5a; padding: 16px; display: flex; justify-content: center; border: 2px inset #808080; }
.nd-pdf-page { width: 320px; min-height: 400px; background: #fff; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6); padding: 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.45; color: #000; }
.nd-pdf-title { font: bold 17px Verdana, sans-serif; }
.nd-pdf-dim { color: #555; }
.nd-pdf-page hr { border: none; border-top: 1px solid #000; width: 100%; margin: 2px 0; }

.nd-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.nd-card { border: 2px outset #fff; background: var(--nd-panel); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.nd-card-title { font: bold 14px Tahoma, Verdana, sans-serif; color: #0a2f8f; }
/* Solid chips rather than thin monospace text — that one drowned in the scanlines overlay. */
.nd-card-stack { display: flex; flex-wrap: wrap; gap: 4px; }
.nd-card-stack span { padding: 2px 7px; background: #fff; border: 1px solid #7f9db9; font: bold 11px Tahoma, Verdana, sans-serif; color: #0a2f8f; }
.nd-card-desc { font-size: 12.5px; }
.nd-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nd-card-stars { flex: none; padding: 1px 7px; border: 1px solid #c9a227; border-radius: 9px; background: #fff6d6; font: bold 11px Tahoma, Verdana, sans-serif; color: #6b4200; white-space: nowrap; }
.nd-card-stars[hidden], .nd-featured-stars[hidden] { display: none; }
.nd-card-note { font-size: 11.5px; color: #a45a00; }
.nd-card-links a { font-size: 12px; margin-right: 10px; }
/* margin-top:auto pins the buttons to the card bottom, and wrap-reverse keeps
   the first one (GitHub) on the bottom line when a second link wraps — so
   GitHub buttons line up across a row either way. */
.nd-card-links { display: flex; flex-wrap: wrap-reverse; gap: 8px; margin-top: auto; padding-top: 8px; }
.nd-card-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  background: var(--nd-panel);
  border: 2px outset #fff;
  text-decoration: none;
  color: #000;
  font-weight: 700;
}
.nd-card-links a:active { border-style: inset; }
/* The featured project sits above the grid as one wide card in a slowly
   running rainbow frame (two backgrounds: the panel fill on padding-box, the
   rainbow on border-box showing through the transparent border). */
.nd-featured {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 4px solid transparent;
  background:
    linear-gradient(var(--nd-panel), var(--nd-panel)) padding-box,
    linear-gradient(90deg, #ff3b30, #ff9500, #ffd60a, #34c759, #0a84ff, #5e5ce6, #bf5af2, #ff3b30) 0 0 / 200% 100% border-box;
  animation: nd-rainbow 8s linear infinite;
}
@keyframes nd-rainbow {
  to { background-position: 0 0, 200% 0; }
}
.nd-featured-label { font: bold 11px Tahoma, Verdana, sans-serif; color: #a45a00; text-transform: uppercase; letter-spacing: 0.5px; }
.nd-featured-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nd-featured-head .nd-card-title { font-size: 17px; }
.nd-featured-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border: 1px solid #b8860b;
  border-radius: 12px;
  background: linear-gradient(#fff6c2, #ffd23f);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font: bold 13px Tahoma, Verdana, sans-serif;
  color: #5a3b00;
}
.nd-featured-list { margin: 2px 0 0; padding-left: 18px; font-size: 12.5px; }
.nd-featured-list li { margin: 2px 0; }

.nd-screens { display: flex; flex-direction: column; gap: 12px; }
.nd-big-shot-row { display: flex; align-items: stretch; gap: 8px; }
/* Capped max-width keeps the box near a normal screenshot's proportions —
   without it, a maximized (very wide) window stretches this to the full
   window width while height stays capped, producing huge empty letterbox
   bars on either side of the image. */
.nd-big-shot {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 200px;
  max-height: 62vh;
  max-width: 960px;
  margin: 0 auto;
  background: #000;
  border: 3px solid var(--nd-blue-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #7dff7d;
  font: 14px 'Courier New', monospace;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(125, 255, 125, 0.25);
}
.nd-big-shot img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  /* clicks go to the parent .nd-big-shot so one handler covers img + hint */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.nd-big-shot-hint {
  flex: none;
  font-size: 11px;
  color: #5a5;
  pointer-events: none;
  user-select: none;
}
.nd-big-shot-link { pointer-events: auto; } /* keep Steam link tappable */
.nd-big-shot-link { flex: none; font-size: 12px; }
.nd-big-shot-link a { color: #7dff7d; }
.nd-shot-nav { flex: none; align-self: center; width: 36px; height: 56px; background: var(--nd-panel); border: 2px outset #fff; font: bold 20px Tahoma, Verdana, sans-serif; color: #000; }
.nd-shot-nav:hover { background: #fff8d0; }
.nd-shot-nav:active { border-style: inset; }
.nd-shots-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.nd-shot { padding: 0; border: 2px solid var(--nd-blue-4); background: #000; overflow: hidden; }
.nd-shot:hover, .nd-shot:focus-visible { outline: 2px solid var(--nd-accent); }
.nd-shot.active { border-color: var(--nd-accent); outline: 2px solid var(--nd-accent); }
.nd-shot img { width: 100%; height: 56px; object-fit: cover; display: block; }

/* ---- Video app (large-icons grid, like a Windows Explorer icon view) ---- */
.nd-videos-grid, .nd-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; align-content: start; }
.nd-video-icon, .nd-folder-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; color: #000; text-align: center; font-size: 12px; border-radius: 4px; }
.nd-video-icon svg, .nd-video-icon img, .nd-folder-item svg { flex: none; object-fit: cover; border-radius: 2px; }
.nd-video-icon span, .nd-folder-item span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.nd-video-icon:hover, .nd-video-icon:focus-visible, .nd-folder-item:hover, .nd-folder-item:focus-visible { background: rgba(10, 79, 208, 0.12); outline: 1px dotted var(--nd-blue-4); }
.nd-folder-body { background: #fff; display: flex; flex-direction: column; }
.nd-folder-body .nd-folder-grid { flex: 1 1 auto; }
.nd-folder-status { flex: none; margin: 10px -12px -12px; padding: 3px 10px; border-top: 1px solid #aca899; background: var(--nd-panel); font-size: 11.5px; color: #333; }
/* Video's window body is its own flex column (unlike the generic .nd-body)
   so the player can flex-grow to fill however big the window currently is —
   a flat max-height cap meant the video stayed small even when the window
   was maximized, letterboxed inside a box much bigger than it needed. */
#nd-videos-body { display: flex; flex-direction: column; }
#nd-videos-app { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.nd-video-player { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
.nd-video-player video { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.nd-video-back { align-self: flex-start; }
.nd-video-title { font-size: 12.5px; text-align: center; }

/* ---- fullscreen lightbox (screenshots) ---- */
#nd-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  box-sizing: border-box;
}
#nd-lightbox[hidden] { display: none !important; }
#nd-lightbox img { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: contain; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7); }
#nd-lightbox-link { flex: none; color: #dce8ff; font-size: 13px; }
#nd-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: bold 22px Verdana, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
#nd-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.nd-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: bold 26px Verdana, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nd-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.nd-lightbox-prev { left: 16px; }
.nd-lightbox-next { right: 16px; }

/* ---- item popup (small card, not fullscreen) ---- */
#nd-item-popup {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
#nd-item-popup[hidden] { display: none !important; }
.nd-item-popup-box {
  position: relative;
  width: 240px;
  background: var(--nd-panel);
  border: 3px solid var(--nd-blue-4);
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
#nd-item-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(#f08a6a, #c8371a);
  color: #fff;
  font: bold 13px Verdana;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nd-item-popup-icon { width: 96px; height: 96px; background: #0e141b; border: 1px solid #2a475e; display: flex; align-items: center; justify-content: center; }
.nd-item-popup-icon img { max-width: 100%; max-height: 100%; }
.nd-item-popup-name { font: bold 13px Tahoma, Verdana, sans-serif; color: #0a2f8f; }
.nd-item-popup-meta { font-size: 12px; color: #333; line-height: 1.5; }
.nd-item-popup-price { font-weight: bold; color: #a45a00; }
.nd-item-popup-note { display: block; font-weight: normal; font-size: 10.5px; color: #777; }


/* ---- Winamp-style player chassis ---- */
.nd-music { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(#54546a, #2c2c3a); border: 2px outset #7a7a90; border-radius: 3px; padding: 10px; }
.nd-wa-display { display: flex; gap: 8px; align-items: stretch; }
.nd-wa-art { flex: none; width: 58px; height: 58px; border: 2px inset #444; display: flex; align-items: center; justify-content: center; font-size: 24px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.nd-wa-display-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nd-music-display { flex: 1 1 auto; display: flex; justify-content: space-between; align-items: center; background: #000; border: 2px inset #444; padding: 6px 10px; min-width: 0; }
.nd-music-time { font: bold 26px 'Courier New', monospace; color: #3cff3c; }
.nd-music-bars { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.nd-bar { width: 4px; height: 28px; background: linear-gradient(#ff3b30, #ffd400 45%, #3cff3c); transform-origin: bottom; transform: scaleY(0.12); }
.nd-music-bars.on .nd-bar { animation: nd-eq 0.55s ease-in-out infinite alternate; }
@keyframes nd-eq { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
.nd-wa-seek {
  height: 18px;
  background: #000;
  border: 1px inset #444;
  overflow: hidden;
  cursor: pointer;
  touch-action: none; /* allow horizontal drag without page scroll */
  position: relative;
  /* invisible extra hit padding via ::before for fat fingers */
  box-sizing: border-box;
}
.nd-wa-seek::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: -12px;
}
.nd-wa-seek-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3cff3c, #ffd400);
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.nd-wbtn.active {
  filter: brightness(1.35);
  box-shadow: inset 0 0 0 1px #3cff3c;
  color: #3cff3c;
}
.nd-music-ticker { background: #000; border: 2px inset #444; overflow: hidden; padding: 4px 0; font: 13px 'Courier New', monospace; color: #3cff3c; }
.nd-music-controls { display: flex; gap: 4px; }
.nd-wbtn { height: 28px; flex: 1; background: linear-gradient(#6a6a7e, #33333f); border: 1px solid #9a9aaa; border-radius: 2px; color: #fff; font: bold 13px Verdana, sans-serif; }
.nd-wbtn:hover { filter: brightness(1.3); }
.nd-wbtn:active { filter: brightness(0.85); }
.nd-wa-volume-row { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.nd-wa-volume-ico { flex: none; font-size: 13px; }
.nd-wa-volume { flex: 1 1 auto; -webkit-appearance: none; appearance: none; height: 4px; background: #000; border: 1px inset #444; border-radius: 2px; outline: none; }
.nd-wa-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 14px; background: linear-gradient(#8a8aa0, #4a4a58); border: 1px solid #9a9aaa; border-radius: 1px; cursor: pointer; }
.nd-wa-volume::-moz-range-thumb { width: 12px; height: 14px; background: linear-gradient(#8a8aa0, #4a4a58); border: 1px solid #9a9aaa; border-radius: 1px; cursor: pointer; }
.nd-music-playlist { background: #000; border: 2px inset #444; display: flex; flex-direction: column; padding: 4px 0; max-height: 140px; overflow-y: auto; }
.nd-plrow { display: flex; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; font: 12px 'Courier New', monospace; color: #c8c8c8; }
.nd-plrow:hover { background: #2a2a3a; }
.nd-plrow.active { color: #3cff3c; }
.nd-music-note { font-size: 12px; color: #c8c8d8; }
.nd-music-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(#54546a, #2c2c3a); border: 2px outset #7a7a90; border-radius: 3px; padding: 22px 16px; text-align: center; }
.nd-music-empty p { margin: 0; font-size: 12.5px; color: #d8d8e4; max-width: 280px; }
.nd-wa-art-empty { width: 58px; height: 58px; font-size: 24px; }

/* Winamp reads as its own standalone app, not another OS-chrome window —
   it gets a slim dark titlebar of its own instead of the shared blue XP
   gradient every Explorer/Steam/FACEIT/etc. window uses. */
#nd-win-music { border: 1px solid #05070a; border-radius: 3px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); background: #1c1c22; }
#nd-win-music .nd-tb { height: 22px; background: linear-gradient(#3a3a46, #1c1c22 60%, #101014); border-bottom: 1px solid #000; text-shadow: none; cursor: move; }
#nd-win-music .nd-cap { font: bold 11px Tahoma, Verdana, sans-serif; letter-spacing: 0.04em; color: #9adfff; }
#nd-win-music .nd-tb button { width: 17px; height: 15px; border: 1px solid #55555f; border-radius: 1px; background: linear-gradient(#5a5a68, #2a2a32); }
#nd-win-music .nd-tb button.nd-x { background: linear-gradient(#5a5a68, #2a2a32); }
#nd-win-music .nd-body { padding: 8px; background: #1c1c22; }
/* the resize grip in Winamp's own black instead of the XP-blue one every other window uses */
#nd-win-music .nd-resize { background: linear-gradient(135deg, transparent 0 50%, #000 50% 58%, transparent 58% 66%, #000 66% 74%, transparent 74% 82%, #000 82% 90%, transparent 90%); opacity: 1; }

.nd-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.nd-svc { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #fff; border: 2px outset #fff; text-decoration: none; color: #000; }
.nd-svc:hover { background: #fff8d0; color: #000; }
.nd-svc-tag { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font: bold 14px Verdana, sans-serif; }
.nd-svc-handle { font-size: 12px; color: #333; }
.nd-links-note { margin-top: 10px; font-size: 12px; color: #222; }

/* ---- console window ---- */
.nd-console-wrap {
  flex-grow: 1;
  background: #000;
  border: 2px inset #808080;
  margin: 4px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
  box-sizing: border-box;
  font: 14px 'Lucida Console', 'Courier New', monospace;
}
.nd-console-wrap #term-output { flex-grow: 1; min-height: 0; overflow-y: auto; white-space: pre-wrap; color: #7dff7d; font: 13px 'Lucida Console', 'Courier New', monospace; line-height: 1.4; }
.nd-console-wrap #term-output .cmd-line { color: #fff; }
.nd-console-wrap #term-output .term-ghost { color: #ff3b2f; text-shadow: 0 0 6px rgba(255, 40, 30, 0.5); }
.nd-console-wrap .term-input-row { flex: none; display: flex; align-items: center; gap: 8px; border-top: 1px solid #333; padding-top: 8px; margin-top: 6px; }
.nd-console-wrap .prompt { color: var(--nd-accent); font-weight: bold; white-space: nowrap; }
.nd-console-wrap #term-input { flex-grow: 1; background: transparent; border: 0; outline: 0; color: #fff; font: 14px 'Lucida Console', 'Courier New', monospace; padding: 0; min-width: 0; }

/* ============ start menu ============ */
#nd-start-menu {
  position: fixed;
  left: 4px;
  bottom: 44px;
  width: 340px;
  z-index: 155;
  border-radius: 8px 8px 3px 3px;
  overflow: hidden;
  box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--nd-blue-4);
}
#nd-start-menu[hidden] { display: none; }
.nd-sm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(var(--nd-blue-1), var(--nd-blue-4));
  color: #fff;
  font: bold 14px Tahoma, Verdana, sans-serif;
  text-shadow: 1px 1px 0 #002080;
}
.nd-sm-avatar { width: 40px; height: 40px; flex: none; display: flex; overflow: hidden; border: 2px solid #fff; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.nd-sm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nd-sm-sep { height: 1px; margin: 4px 6px; background: linear-gradient(90deg, transparent, #b9c6de, transparent); }
.nd-sm-body { display: flex; background: #fff; }
.nd-sm-col { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.nd-sm-col-alt { background: #dde8fb; }
.nd-sm-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 3px;
  font: 12.5px Tahoma, Verdana, sans-serif;
  text-align: left;
  color: #000;
  text-decoration: none;
}
.nd-sm-item:hover { background: var(--nd-blue-1); color: #fff; }
.nd-sm-other { background: var(--nd-panel); border-top: 1px solid #b9b6a5; padding: 6px; }
.nd-sm-other-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #555; padding: 3px 8px; }
.nd-sm-footer { display: flex; justify-content: flex-end; gap: 4px; padding: 6px 8px; background: linear-gradient(var(--nd-blue-2), var(--nd-blue-4)); }
.nd-sm-foot-btn { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 3px; color: #fff; font: 12px Tahoma, Verdana, sans-serif; }
.nd-sm-foot-btn svg { flex: none; }
.nd-sm-foot-btn:hover { background: rgba(255, 255, 255, 0.18); }
#nd-start.active { background: linear-gradient(#2f8a2f, #1f6a1f); box-shadow: 0 0 0 2px #123a12 inset; }

/* ============ taskbar ============ */
#nd-taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  z-index: 150;
  background: linear-gradient(var(--nd-blue-1), #1f5fd8 10%, #1a52c8 90%, #0f3fa0);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  box-sizing: border-box;
}
#nd-start {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px 0 10px;
  background: linear-gradient(#5cb85c, #2f8a2f 15%, #2f8a2f 85%, #1f6a1f);
  border-radius: 0 16px 16px 0;
  color: #fff;
  font: italic bold 20px Verdana, sans-serif;
  text-shadow: 1px 1px 2px #000;
  margin-right: 6px;
}
#nd-start:hover { filter: brightness(1.08); }
.nd-start-flag { flex: none; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.6)); }
#nd-tasks { flex-grow: 1; display: flex; gap: 4px; overflow: hidden; height: 30px; }
.nd-task {
  width: 34px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #5b9bf5;
  color: #fff;
  border: 1px solid #0a2f80;
  opacity: 0.75;
}
.nd-task svg { width: 18px; height: 18px; display: block; }
.nd-task.active { background: #0f3a98; border: 1px solid #06205c; box-shadow: inset 1px 1px 3px #000; opacity: 1; }
.nd-task:hover { opacity: 1; }
#nd-arrange, #nd-toggle-all {
  height: 28px;
  padding: 0 12px;
  background: var(--nd-panel);
  color: #000;
  border: 2px outset #fff;
  font: 12px Tahoma, Verdana, sans-serif;
  flex: none;
}
.nd-tray-ico { display: flex; align-items: center; justify-content: center; color: #dce8ff; flex: none; padding: 0 3px; }
.nd-tray-btn { font-size: 11px; font-weight: 700; color: #dce8ff; padding: 4px 7px; border-radius: 3px; text-decoration: none; flex: none; }
.nd-tray-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.nd-tray-clock { font-size: 12px; color: #fff; flex: none; padding: 0 4px; }

/* ============ scanlines ============ */
#nd-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 160;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

/* ============ games (games.js) — each one in its own window. games.js
   owns the markup; these rules are presentation only. ============ */
.nd-game-body { display: flex; flex-direction: column; overflow: hidden; padding: 10px; background: var(--nd-panel); }
.g-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.g-bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-bar-btns { display: flex; gap: 6px; }
.g-stats { font: 11.5px 'Courier New', monospace; color: var(--nd-text-dim); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.g-stats b { color: var(--nd-blue-4); }
/* fitCanvas() (games.js) sizes the canvas to the largest box that fits here,
   leaving room for this 2px border on each side. */
.g-stage { flex: 1 1 0; min-height: 140px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.g-stage canvas, .g-next canvas { display: block; border: 2px inset #fff; box-shadow: inset 1px 1px 0 #808080; background: #f7f6f0; box-sizing: content-box; }
.g-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; background: rgba(236, 233, 216, 0.84); color: #0a2f8f; text-align: center; font-size: 12.5px; cursor: pointer; }
.g-overlay[hidden] { display: none; }
.g-overlay b { font: bold 19px Tahoma, Verdana, sans-serif; }
.g-overlay span { color: #333; }
.g-overlay.g-overlay-soft { background: transparent; justify-content: flex-end; padding-bottom: 18%; pointer-events: none; }
.g-overlay.g-overlay-soft span { background: rgba(255, 255, 255, 0.88); padding: 3px 9px; border: 1px solid #c9c6b8; }
.g-hint { flex: none; font-size: 11px; color: #555; text-align: center; }
.g-led { display: inline-block; min-width: 46px; padding: 1px 4px; background: #000; color: #ff2a1a; font: bold 18px 'Courier New', monospace; text-align: right; border: 2px inset #fff; box-shadow: inset 1px 1px 0 #808080; letter-spacing: 1px; line-height: 1.15; box-sizing: border-box; }
.g-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; max-width: 288px; }
.g-best { font: 11.5px 'Courier New', monospace; color: #333; }
/* on-screen controls — only where there's no keyboard to speak of */
.g-pad { display: none; flex: none; justify-content: center; gap: 6px; }
.g-pad-btn { min-width: 50px; min-height: 44px; font-size: 17px; padding: 0; touch-action: none; }
@media (pointer: coarse) {
  .g-pad { display: flex; }
  .g-side-keys { display: none; }
}

/* ---- Minesweeper ---- */
.g-mines { align-items: center; }
.mines-head { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 288px; padding: 5px 6px; background: var(--nd-panel-2); border: 2px inset #fff; box-sizing: border-box; }
.mines-face { width: 34px; height: 34px; font-size: 19px; line-height: 1; border: 2px outset #fff; background: var(--nd-panel); display: flex; align-items: center; justify-content: center; }
.mines-face:active { border-style: inset; }
.mines-grid {
  display: grid;
  /* minmax(0,1fr) keeps revealed numbers/emoji from widening their column */
  grid-template-columns: repeat(9, minmax(0, 1fr));
  width: 100%;
  max-width: 288px;
  background: #9d9a8c;
  border: 3px inset #fff;
  box-sizing: border-box;
}
.mines-cell {
  min-width: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 3px solid;
  border-color: #fff #808080 #808080 #fff;
  background: #d4d0c8;
  font: bold 15px 'Courier New', monospace;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.mines-cell.revealed { border: 1px solid #a8a598; background: #f1efe7; cursor: default; }
.mines-cell.hit { background: #ff3b30; }
.mines-cell.wrong { background: #f4c7c3; }
.mines-cell[data-n="1"] { color: #1f3fd0; }
.mines-cell[data-n="2"] { color: #1b7d1b; }
.mines-cell[data-n="3"] { color: #d01818; }
.mines-cell[data-n="4"] { color: #0c1a8a; }
.mines-cell[data-n="5"] { color: #7d1010; }
.mines-cell[data-n="6"] { color: #0e7f7f; }
.mines-cell[data-n="7"] { color: #000; }
.mines-cell[data-n="8"] { color: #6b6b6b; }

/* ---- Slots ---- */
.g-help { width: 30px; padding: 6px 0; font-size: 14px; }
.slots-machine { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.slots-window { position: relative; display: flex; gap: 8px; padding: 12px 14px; background: linear-gradient(#c8141e, #7a0a0a); border: 4px solid #ffd400; border-radius: 8px; box-shadow: inset 0 0 0 2px #7a5a00, 3px 3px 0 rgba(0, 0, 0, 0.35); }
.slots-window.win { animation: slots-win 0.25s steps(2, start) 6; }
@keyframes slots-win { to { border-color: #fff; box-shadow: inset 0 0 0 2px #7a5a00, 0 0 18px 4px #ffd400; } }
.slots-reel { width: 62px; height: 132px; background: linear-gradient(#bdbdbd, #fff 28%, #fff 72%, #bdbdbd); border: 2px inset #808080; display: flex; flex-direction: column; overflow: hidden; }
.slots-cell { flex: 1 1 0; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; }
.slots-cell.dim { opacity: 0.35; transform: scale(0.78); }
.slots-reel.spinning .slots-cell { filter: blur(1.4px); }
.slots-payline { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 40, 30, 0.7); pointer-events: none; }
.sym-7 { font: bold 36px Georgia, 'Times New Roman', serif; color: #d0021b; text-shadow: 1px 1px 0 #ffd400, 2px 2px 0 #7a0a0a; }
.sym-bar { display: inline-block; padding: 3px 5px; background: #111; color: #ffd400; font: bold 13px Impact, 'Arial Black', sans-serif; letter-spacing: 1px; border-radius: 3px; border: 1px solid #ffd400; line-height: 1; }
.slots-bet { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.slots-bet-btn { padding: 4px 9px; }
.slots-bet-val { min-width: 52px; font-size: 16px; text-align: center; }
.slots-spin { font-size: 14px; padding: 8px 30px; }
.slots-msg { font: bold 12px 'Courier New', monospace; color: #0a2f8f; min-height: 16px; text-align: center; }
.slots-paytable { position: absolute; inset: -10px; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); }
.slots-paytable[hidden] { display: none; }
.slots-paytable-box { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 94%; max-height: 94%; overflow: auto; padding: 10px 14px; background: var(--nd-panel); border: 3px solid var(--nd-blue-4); border-radius: 6px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); box-sizing: border-box; }
.slots-paytable-title { font: bold 14px Tahoma, Verdana, sans-serif; color: #0a2f8f; }
.slots-paytable table { border-collapse: collapse; font-size: 12.5px; background: #fff; border: 2px inset #fff; }
.slots-paytable td { padding: 2px 10px; border-bottom: 1px solid #e6e3d6; }
.slots-pt-combo { font-size: 15px; white-space: nowrap; }
.slots-pt-combo small { font-size: 11px; color: #555; }
.slots-pt-combo .sym-7 { font-size: 17px; }
.slots-pt-combo .sym-bar { font-size: 9px; padding: 2px 3px; margin-right: 2px; }
.slots-pt-win { font-weight: bold; color: #a45a00; text-align: right; }
.slots-paytable-note { margin: 0; font-size: 11px; color: #333; text-align: center; max-width: 260px; }

/* ---- Tetris ---- */
.g-tetris-main { flex: 1 1 0; min-height: 0; display: flex; gap: 10px; }
.g-side { flex: none; width: 104px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.g-side-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #555; margin-top: 4px; }
.g-next { width: 100px; height: 76px; display: flex; align-items: center; justify-content: center; }
.g-side-keys { margin-top: auto; font-size: 10.5px; color: #555; line-height: 1.4; }

/* ---- 2048 ---- */
.g2048-stage { flex: 1 1 0; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; container-type: size; touch-action: none; }
.g2048-board { width: min(100cqw, 100cqh); aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3%; padding: 3%; background: #bbada0; border-radius: 6px; box-sizing: border-box; }
.g2048-cell { display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(238, 228, 218, 0.35); color: #776e65; font: bold clamp(14px, 8cqmin, 38px) Verdana, sans-serif; }
.g2048-cell.big { font-size: clamp(11px, 5.5cqmin, 28px); }
.g2048-cell.t2 { background: #eee4da; }
.g2048-cell.t4 { background: #ede0c8; }
.g2048-cell.t8 { background: #f2b179; color: #f9f6f2; }
.g2048-cell.t16 { background: #f59563; color: #f9f6f2; }
.g2048-cell.t32 { background: #f67c5f; color: #f9f6f2; }
.g2048-cell.t64 { background: #f65e3b; color: #f9f6f2; }
.g2048-cell.t128 { background: #edcf72; color: #f9f6f2; }
.g2048-cell.t256 { background: #edcc61; color: #f9f6f2; }
.g2048-cell.t512 { background: #edc850; color: #f9f6f2; }
.g2048-cell.t1024 { background: #edc53f; color: #f9f6f2; }
.g2048-cell.t2048 { background: #edc22e; color: #f9f6f2; box-shadow: 0 0 12px rgba(237, 194, 46, 0.6); }
.g2048-cell.t4096 { background: #3c3a32; color: #f9f6f2; }
.g2048-cell.new { animation: g2048-pop 0.18s ease-out; }
.g2048-cell.merged { animation: g2048-merge 0.18s ease-out; }
@keyframes g2048-pop { from { transform: scale(0.3); opacity: 0.3; } }
@keyframes g2048-merge { 50% { transform: scale(1.14); } }

/* ============ Task Manager / Calculator / Notepad ============ */
.nd-app-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--nd-panel); }

.tm { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 8px 0; font-size: 12px; }
.tm-tabs { display: flex; gap: 2px; padding-left: 4px; }
.tm-tab { position: relative; top: 1px; padding: 4px 10px; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #ecebe5); font-size: 12px; }
.tm-tab.active { z-index: 1; padding-top: 3px; background: #fcfcfe; border-top: 2px solid #e68b2c; }
.tm-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #fcfcfe; border: 1px solid #919b9c; }
.tm-list { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; border: 1px solid #7f9db9; }
.tm-list table { width: 100%; border-collapse: collapse; }
.tm-list th { position: sticky; top: 0; padding: 3px 6px; background: linear-gradient(#fff, #ebeadb); border-bottom: 1px solid #c7c5b2; border-right: 1px solid #e2e0cf; text-align: left; font-weight: normal; }
.tm-list td { padding: 2px 6px; white-space: nowrap; }
.tm-list td svg { vertical-align: -3px; margin-right: 6px; }
.tm-list .num { text-align: right; }
.tm-row { cursor: default; }
.tm-row.sel td { background: #316ac5; color: #fff; }
.tm-actions { flex: none; display: flex; justify-content: flex-end; gap: 6px; }
.tm-actions .nd-btn98 { font-weight: normal; padding: 4px 10px; }
.tm-status { flex: none; display: flex; margin: 0 -8px; border-top: 1px solid #aca899; font-size: 11.5px; }
.tm-status span { flex: 1 1 auto; padding: 3px 8px; border-right: 1px solid #aca899; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-perf { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 8px; align-content: start; }
.tm-perf fieldset { margin: 0; padding: 3px 6px 6px; border: 1px solid #d0d0bf; border-radius: 3px; min-width: 0; }
.tm-perf legend { padding: 0 3px; font-size: 11px; color: #0046d5; }
.tm-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.tm-meter { height: 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; background: #000; box-sizing: border-box; }
.tm-meter b { order: 2; color: #3cff3c; font: 11px 'Courier New', monospace; }
.tm-meter-bar { flex: 1 1 auto; width: 30px; display: flex; align-items: flex-end; background: repeating-linear-gradient(#0a3a0a 0 2px, #000 2px 3px); }
.tm-meter-bar div { width: 100%; background: repeating-linear-gradient(#3cff3c 0 2px, #000 2px 3px); }
.tm-graph { display: block; width: 100%; height: 70px; background: #000; }
.tm-kv { display: flex; justify-content: space-between; font-size: 11.5px; }

#nd-win-calc .nd-app-body { padding: 8px; }
.calc { display: flex; flex-direction: column; gap: 8px; }
.calc-display { min-height: 28px; padding: 4px 6px; background: #fff; border: 2px inset #fff; box-shadow: inset 1px 1px 0 #808080; text-align: right; font: 17px 'Lucida Console', 'Courier New', monospace; line-height: 1.2; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.calc-top { display: grid; grid-template-columns: 34px 1fr 1fr 1fr; gap: 5px; align-items: center; }
.calc-mem { height: 26px; display: flex; align-items: center; justify-content: center; border: 2px inset #fff; box-shadow: inset 1px 1px 0 #808080; font: bold 12px Tahoma, Verdana, sans-serif; box-sizing: border-box; }
.calc-grid { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 5px; }
.calc-key { height: 30px; padding: 0; border: 1px solid #7a8aa8; border-radius: 3px; background: linear-gradient(#fdfdfb, #e7e5dc); color: #1c2fd8; font: 12px Tahoma, Verdana, sans-serif; }
.calc-key:hover { box-shadow: inset 0 0 0 1px #f8b330; }
.calc-key:active { background: linear-gradient(#e2e0d6, #f4f3ee); }
.calc-key.op, .calc-key.m { color: #d11a1a; }

#nd-win-notepad .nd-app-body { background: #fff; }
.np { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.np-menubar { flex: none; display: flex; padding: 1px 2px; background: var(--nd-panel); border-bottom: 1px solid #aca899; font-size: 12px; }
.np-menu { position: relative; }
.np-menu-btn { padding: 3px 8px; font-size: 12px; }
.np-menu-btn:hover { background: #316ac5; color: #fff; }
.np-drop { position: absolute; top: 100%; left: 0; z-index: 5; min-width: 200px; padding: 2px; background: #fff; border: 1px solid #aca899; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); }
.np-drop[hidden] { display: none; }
.np-item { display: flex; align-items: center; width: 100%; padding: 3px 10px 3px 0; text-align: left; font-size: 12px; }
.np-item:hover { background: #316ac5; color: #fff; }
.np-check { flex: none; width: 22px; text-align: center; }
.np-item kbd { margin-left: auto; padding-left: 18px; font: inherit; opacity: 0.75; }
.np-text { flex: 1 1 auto; min-height: 0; padding: 4px 6px; border: 0; outline: 0; resize: none; background: #fff; color: #000; font: 13px 'Lucida Console', 'Courier New', monospace; line-height: 1.4; }
.np-text.nowrap { white-space: pre; overflow-x: auto; }

/* ============ Windows XP "Turn off computer" + shutdown screen ============ */
#nd-desktop { transition: filter 1.2s ease; }
#nd-desktop.nd-greyed { filter: grayscale(1) brightness(0.85); }
#nd-xp-off { position: fixed; inset: 0; z-index: 420; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.12); }
#nd-xp-off[hidden] { display: none; }
.xp-off-box { width: 314px; max-width: calc(100vw - 24px); overflow: hidden; border: 1px solid #0b2a7a; border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); font-family: Tahoma, Verdana, sans-serif; }
.xp-off-top { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; background: linear-gradient(#0937a7, #0a2f93); color: #fff; font: 17px 'Franklin Gothic Medium', 'Trebuchet MS', Tahoma, sans-serif; }
.xp-off-mid { display: flex; justify-content: space-around; padding: 22px 8px 18px; background: linear-gradient(90deg, #5a7edc, #86a3ec 45%, #5a7edc); border-top: 1px solid #b6c9f6; border-bottom: 1px solid #b6c9f6; }
.xp-off-btn { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 12px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.xp-off-btn:focus-visible { outline: none; }
.xp-orb { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 6px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), inset 0 12px 10px -6px rgba(255, 255, 255, 0.45); }
.xp-orb svg { width: 24px; height: 24px; }
.xp-orb-standby { background: linear-gradient(#ffcf4a, #e39a05); }
.xp-orb-off { background: linear-gradient(#f5795a, #c8261a); }
.xp-orb-restart { background: linear-gradient(#6ad04e, #2f9a1e); }
.xp-off-btn:hover .xp-orb, .xp-off-btn:focus-visible .xp-orb { filter: brightness(1.15); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 1px 1px 2px rgba(0, 0, 0, 0.4); }
.xp-off-bottom { display: flex; justify-content: flex-end; padding: 10px 14px; background: linear-gradient(#0a2f93, #0937a7); }
.xp-off-cancel { padding: 3px 18px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ece9d8); color: #000; font: 12px Tahoma, Verdana, sans-serif; }
.xp-off-cancel:hover { box-shadow: inset 0 0 0 1px #f8b330; }

#nd-xp-screen { position: fixed; inset: 0; z-index: 430; display: flex; flex-direction: column; background: #5a7edc; color: #fff; font-family: Tahoma, Verdana, sans-serif; cursor: wait; }
#nd-xp-screen[hidden] { display: none; }
.xp-screen-band { flex: 0 0 12%; background: #00309c; }
.xp-screen-band:first-child { border-bottom: 2px solid #7ea3ff; }
.xp-screen-band:last-child { border-top: 2px solid #f59f2a; }
.xp-screen-mid { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 0 20px; background: radial-gradient(ellipse at 18% 22%, #a8c0f6 0%, #5a7edc 42%, #3a62cc 100%); }
.xp-screen-logo { display: flex; align-items: center; gap: 12px; }
.xp-screen-brand { display: flex; flex-direction: column; }
.xp-screen-brand span { font-size: 13px; opacity: 0.9; }
.xp-screen-brand b { font: bold 40px 'Franklin Gothic Medium', 'Trebuchet MS', Tahoma, sans-serif; letter-spacing: -1px; line-height: 1; }
.xp-screen-brand sup { margin-left: 2px; color: #f59f2a; font-size: 20px; }
.xp-screen-msg { min-height: 60px; display: flex; align-items: center; padding-left: 48px; border-left: 1px solid rgba(255, 255, 255, 0.5); font-size: 20px; }
@media (max-width: 640px) {
  .xp-screen-mid { flex-direction: column; gap: 24px; }
  .xp-screen-msg { min-height: 0; padding: 0; border: 0; font-size: 17px; }
}
#nd-xp-standby { position: fixed; inset: 0; z-index: 440; background: #000; cursor: none; }
#nd-xp-standby[hidden] { display: none; }

/* ============ power cycle (boot.js): BIOS POST → XP loading → welcome ============ */
html.pc-off body { background: #000; }
html.pc-off #nd-desktop, html.pc-off #nd-scanlines { visibility: hidden; }
#nd-boot { position: fixed; inset: 0; z-index: 460; background: #000; color: #aaa; cursor: none; transition: opacity 0.45s ease; }
#nd-boot[hidden] { display: none; }
#nd-boot.boot-fade { opacity: 0; }
.boot-stage[hidden] { display: none !important; }

/* 80×25 text mode: the font scales so the whole screen always fits */
.boot-post { position: absolute; inset: 0; padding: 2vh 2vw; font: min(2vw, 3.3vh) / 1.2 'Lucida Console', 'Courier New', monospace; }
.boot-post pre { margin: 0; font: inherit; white-space: pre; color: #aaa; }
.boot-post-foot { position: absolute; left: 2vw; bottom: 2vh; }
/* "Press DEL to enter SETUP" — plain POST text that also takes a click/tap (phones have no DEL) */
.boot-del { font: inherit; color: inherit; background: none; border: 0; margin: -0.8em 0; padding: 0.8em 0; cursor: pointer; }
.boot-del:hover, .boot-del:focus-visible { color: #fff; outline: none; }
@media (pointer: coarse) { .boot-del { text-decoration: underline; } }

/* ---- BIOS setup (bios.js): Award-style, blue main menu, grey submenus ---- */
.boot-setup { position: absolute; inset: 0; cursor: default; }
.bios {
  --b-blue: #0000a8; --b-grey: #a8a8a8; --b-yellow: #fcfc54; --b-red: #a80000; --b-white: #fcfcfc;
  position: absolute; inset: 0; overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 0.7em; padding: 1.2em 1em;
  font: max(12px, min(1.6vw, 2.7vh)) / 1.4 'Lucida Console', 'Courier New', monospace;
}
:where(.bios) button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; text-align: left; cursor: pointer; outline: none; }
.bios-main { background: var(--b-blue); color: var(--b-yellow); }
.bios-sub { background: var(--b-grey); color: var(--b-blue); }
.bios-title { text-align: center; color: var(--b-white); }
.bios-sub .bios-title { color: var(--b-blue); }
.bios-box { width: min(100%, 78ch); border: 0.25em double var(--b-white); box-sizing: border-box; }
.bios-sub .bios-box { border-color: var(--b-blue); }
.bios-menu { display: grid; grid-template-columns: 1fr 1fr; }
.bios-col { display: flex; flex-direction: column; padding: 0.6em 1ch; }
.bios-col + .bios-col { border-left: 0.25em double var(--b-white); }
.bios-mi { padding: 0.1em 1ch; white-space: nowrap; }
.bios-mi.sel { background: var(--b-red); color: var(--b-white); }
.bios-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 3ch; padding: 0.4em 1ch; color: var(--b-white); }
.bios-main .bios-keys, .bios-desc { border-top: 0.25em double var(--b-white); }
.bios-sub .bios-keys { width: min(100%, 78ch); color: var(--b-blue); }
.bios-keys button:hover { color: var(--b-yellow); }
.bios-sub .bios-keys button:hover { color: var(--b-red); }
.bios-desc { padding: 0.4em 1ch; text-align: center; color: var(--b-white); }
.bios-body { display: grid; grid-template-columns: minmax(0, 1fr) 24ch; }
.bios-items { display: flex; flex-direction: column; padding: 0.6em 1ch; }
.bios-row { display: grid; grid-template-columns: 27ch minmax(0, 1fr); gap: 1ch; padding: 0.05em 1ch; }
.bios-gap { min-height: 1.4em; }
.bios-val { justify-self: start; }
.bios-set.sel .bios-val { background: var(--b-red); color: var(--b-white); }
.bios-set:hover .bios-lbl { color: var(--b-red); }
.bios-help { border-left: 0.25em double var(--b-blue); }
.bios-help-title { padding: 0.3em 1ch; text-align: center; border-bottom: 0.25em double var(--b-blue); }
.bios-help-text { padding: 0.5em 1.5ch; }
.bios-shade { position: absolute; inset: 0; }
.bios-pop, .bios .bios-dlg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 2em); box-sizing: border-box;
  border: 0.25em double var(--b-white); color: var(--b-white); box-shadow: 0.7em 0.7em 0 rgba(0, 0, 0, 0.55);
}
.bios-pop { min-width: 30ch; background: var(--b-blue); }
.bios-pop-title { padding: 0.2em 1ch; text-align: center; border-bottom: 0.25em double var(--b-white); }
.bios-pop-list { display: flex; flex-direction: column; padding: 0.4em 1ch; }
.bios-pop-opt { display: flex; justify-content: space-between; gap: 3ch; padding: 0.05em 1ch; }
.bios-pop-opt.sel { background: var(--b-red); }
.bios-pop-keys { padding: 0.2em 1ch; border-top: 0.25em double var(--b-white); }
.bios .bios-dlg { padding: 0.8em 3ch; background: var(--b-red); color: var(--b-yellow); text-align: center; white-space: nowrap; }
.bios-dlg-btns { display: flex; justify-content: center; gap: 4ch; margin-top: 0.5em; color: var(--b-white); }
.bios-dlg-btns button:hover { color: var(--b-yellow); }
.bios-cursor { animation: nd-blink 1s steps(2, start) infinite; }
@media (max-width: 700px) {
  .bios-menu, .bios-body { grid-template-columns: 1fr; }
  .bios-col + .bios-col { border-left: 0; border-top: 0.25em double var(--b-white); }
  .bios-help { border-left: 0; border-top: 0.25em double var(--b-blue); }
  .bios-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bios .bios-dlg { white-space: normal; }
}

/* ---- what the BIOS setup changes on the desktop (bios.js → apply) ---- */
html[data-wallpaper='classic'] #nd-desktop { background-color: #3a6ea5; }
html[data-wallpaper='classic'] #nd-wallpaper, html[data-wallpaper='off'] #nd-wallpaper { display: none; }
html.cmos-no-scanlines #nd-scanlines { display: none; }
html.cmos-mono #nd-desktop, html.cmos-mono #nd-boot { filter: grayscale(1); }
.boot-post-logo { position: absolute; top: 2vh; right: 3vw; width: 13em; height: auto; image-rendering: pixelated; }
.boot-post-logo[hidden] { display: none; }

.boot-xp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; color: #fff; font-family: Tahoma, Verdana, sans-serif; }
.boot-xp-logo { display: flex; align-items: center; gap: 14px; }
.boot-xp-logo .xp-screen-brand b { font-size: 52px; }
.boot-xp-logo .xp-screen-brand sup { font-size: 26px; }
.boot-xp-bar { position: relative; width: 160px; height: 16px; border: 2px solid #b2b2b2; border-radius: 4px; overflow: hidden; }
.boot-xp-blocks { position: absolute; top: 2px; left: 0; display: flex; gap: 2px; animation: boot-xp-slide 1.9s linear infinite; }
.boot-xp-blocks i { display: block; width: 9px; height: 8px; border-radius: 1px; background: linear-gradient(#aecbff, #2659d8 45%, #1a3fb0); }
@keyframes boot-xp-slide { from { transform: translateX(-36px); } to { transform: translateX(166px); } }
.boot-xp-copy { position: absolute; left: 24px; bottom: 20px; font-size: 12px; color: #fff; }
.boot-xp-brand { position: absolute; right: 26px; bottom: 16px; font: italic bold 20px 'Franklin Gothic Medium', 'Trebuchet MS', Tahoma, sans-serif; color: #fff; }

.boot-welcome { position: absolute; inset: 0; display: flex; flex-direction: column; background: #5a7edc; }
.boot-welcome-mid { justify-content: flex-start; padding-left: 16%; }
.boot-welcome-text { color: #fff; font: italic bold clamp(40px, 9vw, 96px) 'Franklin Gothic Medium', 'Trebuchet MS', Tahoma, sans-serif; letter-spacing: -1px; text-shadow: 2px 3px 6px rgba(0, 0, 60, 0.45); animation: boot-welcome-in 0.8s ease-out; }
@keyframes boot-welcome-in { from { opacity: 0; transform: translateX(-24px); } }

.boot-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: default; }
.boot-power { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #3a3a3a; background: radial-gradient(circle at 40% 35%, #3b3b3b, #151515 70%); color: #6a6a6a; box-shadow: 0 0 0 6px #0c0c0c, 0 6px 16px rgba(0, 0, 0, 0.8); cursor: pointer; transition: color 0.2s, box-shadow 0.2s; }
.boot-power svg { width: 34px; height: 34px; }
.boot-power:hover, .boot-power:focus-visible { color: #6ee06e; outline: none; box-shadow: 0 0 0 6px #0c0c0c, 0 0 22px rgba(110, 224, 110, 0.45); }
.boot-off-hint { color: #5a5a5a; font: 13px Tahoma, Verdana, sans-serif; text-align: center; padding: 0 16px; }

.boot-crt { position: absolute; inset: 0; background: #000; }
.boot-crt[hidden] { display: none; }
.boot-crt.on::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 0 18px 6px rgba(200, 220, 255, 0.6); animation: boot-crt-off 0.6s ease-in forwards; }
@keyframes boot-crt-off {
  0% { transform: scaleY(180) scaleX(1); opacity: 0.9; }
  45% { transform: scaleY(1) scaleX(1); opacity: 1; }
  80% { transform: scaleX(0.004); opacity: 1; }
  100% { transform: scaleX(0.004); opacity: 0; }
}

/* Task Manager → "Новая задача…" */
.nd-app-body { position: relative; }
.tm-run { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); }
.tm-run[hidden] { display: none; }
.tm-run-box { width: min(360px, 92%); display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; background: var(--nd-panel); border: 3px solid var(--nd-blue-4); border-radius: 6px 6px 3px 3px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); font-size: 12px; box-sizing: border-box; }
.tm-run-title { margin: 0 -12px; padding: 5px 10px; background: linear-gradient(var(--nd-blue-1), var(--nd-blue-4)); color: #fff; font-weight: bold; }
.tm-run-box p { margin: 0; }
.tm-run-box label { display: flex; align-items: center; gap: 8px; }
.tm-run-box input { flex: 1 1 auto; min-width: 0; padding: 3px 5px; border: 1px solid #7f9db9; font: 12px Tahoma, Verdana, sans-serif; }
.tm-run-err { color: #c00000; }
.tm-run-err:empty { display: none; }
.tm-run-btns { display: flex; justify-content: flex-end; gap: 6px; }
.tm-run-btns .nd-btn98 { min-width: 72px; padding: 4px 10px; font-weight: normal; }

/* ============ responsive ============ */
@media (max-width: 900px) {
  /* Every window becomes a fixed, full-screen, pixel-positioned overlay
     below (see .nd-win) — a layout that a pinch- or double-tap-zoom can
     throw out of sync with real touch coordinates on some mobile browsers
     (fixed-position elements don't always track a zoomed visual viewport
     correctly), which reads as "nothing is tappable anymore" until the
     zoom resets. Zooming this fake-desktop UI was never useful anyway
     (same reasoning as dragging/resizing already being JS-disabled here),
     so heading it off with touch-action is cheap insurance. */
  #nd-desktop { touch-action: manipulation; }
  /* CRITICAL (iOS Safari): a position:fixed window that is a DESCENDANT of
     an overflow:auto/scroll container gets broken hit-testing — taps land on
     the scrolling ancestor instead of buttons/links inside the window. That
     is exactly "titlebar works, content buttons don't". Keep #nd-surface
     non-scrolling; only the icon column scrolls if needed. */
  #nd-surface {
    display: block;
    overflow: visible;
    touch-action: manipulation;
  }
  #nd-icons {
    max-height: calc(100% - 8px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
  }
  /* A 1500-particle canvas animation is a lot to ask of a phone GPU/battery
     for a purely decorative background — same reasoning as dragging/resizing
     already being off below this breakpoint. Windows go full-screen here
     anyway, so there's rarely open desktop for it to show through. */
  #nd-wallpaper { display: none; }
  #nd-icons { width: auto; flex-direction: row; flex-wrap: wrap; padding: 8px; }
  /* display:contents drops the grid/column boxes from layout without hiding
     their .nd-win children — those go position:fixed below, so they'd
     vanish under a display:none ancestor instead of escaping it */
  #nd-grid, .nd-col { display: contents; }
  .nd-win {
    position: fixed !important;
    left: 6px !important;
    top: 6px !important;
    right: 6px;
    bottom: 46px;
    width: auto !important;
    height: auto !important;
  }
  .nd-explorer { flex-direction: column; }
  /* .nd-tabbtn is width:100% by default (a proper vertical sidebar on
     desktop) — on a phone that made "row + wrap" wrap ONE button per line
     anyway, so the section list ate most of the screen before any content
     showed. A single scrollable row keeps it to one compact strip instead. */
  .nd-explorer-side { width: auto; flex-direction: row; flex-wrap: nowrap; flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; padding: 8px; }
  .nd-explorer-side-title { display: none; }
  .nd-tabbtn { width: auto; flex: none; white-space: nowrap; }
  .nd-hint { display: none; }
  #nd-tasks { overflow-x: auto; }
  .nd-resize, .nd-max { display: none !important; } /* resizing/maximizing is moot on mobile — windows are already fixed full-screen */
  #nd-arrange { display: none; } /* dragging is off on mobile, so "arrange" has nothing to do */
  #nd-toggle-all { display: none; } /* windows start closed on mobile (new_desktop.js) — a "show all" would just re-stack every full-screen window at once */
  /* .nd-tb sets touch-action:none so a titlebar drag on a touchscreen
     desktop doesn't fight the browser's own panning — but the used
     touch-action for a tap is the INTERSECTION of the target and all its
     ancestors, so that none was silently swallowing taps on the close/
     minimize buttons nested inside it too (only "Пуск", outside .nd-tb,
     kept working). Dragging is already JS-disabled below 900px, so it's
     safe to hand touch-action back to the buttons here. */
  .nd-tb { touch-action: manipulation; }
  /* Belt-and-suspenders: force every interactive element inside a window to
     the same permissive value directly, rather than relying on it merely
     not being restricted by an ancestor — removes any doubt on real devices
     this environment can't fully emulate for verification. */
  .nd-win, .nd-win * { touch-action: manipulation; }
  /* ...except game boards, which handle their own swipes/drags */
  .nd-win .g-stage, .nd-win .g-stage *, .nd-win .g2048-stage, .nd-win .g2048-stage *, .nd-win .g-pad-btn, .nd-win .nd-wa-seek { touch-action: none; }
  .nd-win button, .nd-win input, .nd-win a, .nd-win .nd-btn98, .nd-win .mines-cell {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(10, 79, 208, 0.25);
    pointer-events: auto;
  }
  .nd-body {
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    /* stop iOS long-press callout from eating the first tap */
    -webkit-touch-callout: none;
  }
  .nd-body a, .nd-body button, .nd-btn98, .mines-cell, .nd-tabbtn, .nd-shot, .nd-video-icon {
    cursor: pointer;
    pointer-events: auto;
  }
  /* iPhone: 22×22 titlebar buttons are nearly impossible to hit reliably.
     Grow the close/minimize hit targets; hide max (already display:none). */
  .nd-tb button {
    width: 40px;
    height: 32px;
    min-width: 40px;
    min-height: 32px;
    -webkit-tap-highlight-color: transparent;
  }
  .nd-tabbtn {
    padding: 10px 14px;
    min-height: 40px;
    -webkit-tap-highlight-color: transparent;
  }
  .nd-ico {
    min-height: 64px;
    -webkit-tap-highlight-color: transparent;
  }
  /* Keep console input above the iOS keyboard / home indicator when focused */
  #nd-win-console .nd-body { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #nd-win-console, #nd-console-root, #term-output, .term-input-row, #term-input {
    pointer-events: auto;
    touch-action: manipulation;
  }
  #nd-console-root { -webkit-overflow-scrolling: touch; }
  #term-output {
    -webkit-overflow-scrolling: touch;
    /* Without this, iOS treats the first long-ish tap as "select text" and
       never focuses the input — user had to press-and-hold to type. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .term-input-row {
    min-height: 48px;
    padding: 12px 4px 8px;
    /* whole row is a big hit target */
    cursor: text;
  }
  #term-input {
    font-size: 16px; /* prevents iOS zoom-on-focus */
    -webkit-user-select: text;
    user-select: text;
    min-height: 32px;
    width: 100%;
    /* make the caret/tap target obvious */
    caret-color: #3cff3c;
  }
  /* Make links printed in the terminal easy to hit */
  #term-output a {
    color: #7dff7d;
    text-decoration: underline;
    word-break: break-all;
    -webkit-user-select: auto;
    user-select: auto;
    pointer-events: auto;
    padding: 2px 0;
  }
  /* Links inside explorer cards — real buttons on phone */
  .nd-card-links a {
    min-height: 44px;
    padding: 10px 14px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(10, 79, 208, 0.3);
  }
  /* Lightbox must sit above fixed full-screen windows (z~10–30) and taskbar */
  #nd-lightbox, #nd-item-popup {
    z-index: 500 !important;
    touch-action: manipulation;
  }
  #nd-lightbox-close, .nd-lightbox-nav {
    width: 48px;
    height: 48px;
    font-size: 22px;
    touch-action: manipulation;
  }
  #nd-big-shot, #nd-big-shot img {
    touch-action: manipulation;
    cursor: pointer;
  }
  .nd-shot {
    min-height: 44px;
    touch-action: manipulation;
  }
  .nd-wa-seek {
    height: 28px;
  }
  .nd-wbtn {
    min-height: 40px;
    font-size: 15px;
  }
  .nd-music-controls {
    gap: 6px;
  }
}



@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}