/* Rytmikarz Reaktywacja: our layer on top of 98.css / XP.css */

/* Wine Tahoma (LGPL-2.1+, see vendor/wine-tahoma/LICENSE.txt): vector Tahoma clone.
   Used for XP everywhere, and for 98 when the pixel font would blur (fractional DPR). */
/* lou's pixel MS Sans Serif + our Polish/CE glyphs (CC BY-SA, see vendor/ms-sans-serif-pl/LICENSE.txt).
   Same family name as 98.css/XP.css declare; defined later, so these files win. */
@font-face { font-family: "Pixelated MS Sans Serif"; src: url(vendor/ms-sans-serif-pl/ms_sans_serif.woff2) format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Pixelated MS Sans Serif"; src: url(vendor/ms-sans-serif-pl/ms_sans_serif_bold.woff2) format("woff2"); font-weight: 700; font-style: normal; }
/* Go Mono (BSD, by Bigelow & Holmes, the Lucida designers): a Lucida Console look-alike that is the same on every OS */
@font-face { font-family: "Go Mono"; src: url(vendor/go-mono/Go-Mono.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Go Mono"; src: url(vendor/go-mono/Go-Mono-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Wine Tahoma"; src: url(vendor/wine-tahoma/tahoma.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Wine Tahoma"; src: url(vendor/wine-tahoma/tahomabd.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* brand colours, sampled from the Rytmikarz logo (orange letters on a glossy red orb) */
  --logo-red: #b43926;         /* orb */
  --logo-red-glow: #e44328;    /* the glow at the bottom of the orb */
  --logo-red-dark: #4f0702;    /* orb shadow */
  --logo-orange: #efa73d;      /* letters */
  --logo-cream: #f3c67f;       /* letter highlight */
  --white: #ffffff;
  --rain-bg: #000;
  --teal98: #008080;
  --tb-h: 28px;          /* taskbar height: 98 = 28px, XP = 30px (real 96 DPI metrics) */
  --tb-zoom: 1;          /* taskbar + Start menu scale; 1 = real size everywhere (matches the 1x windows on phones) */
  --gutter: 16px;
  --font-vector: Tahoma, "Wine Tahoma", Arial, sans-serif;
  --font-98: "Pixelated MS Sans Serif", var(--font-vector);
  --font-ui: var(--font-98);
  --font-mono: "Go Mono", monospace;   /* Notatnik, Zegar, blue pill */
}
html[data-os="xp"] { --tb-h: 30px; --font-ui: var(--font-vector); }
/* pixel font only stays crisp at integer device-pixel ratios */
html.fractional { --font-98: var(--font-vector); --font-ui: var(--font-vector); }

/* the libs assume content-box (e.g. XP .title-bar is height:21px + padding), so border-box only on our own parts */
.screen, .app, .icons, button.icon, .taskbar, .taskbar *, .startmenu, .startmenu *, .wizard, .wiz-side, .wiz-main, .wiz-btns,
.pbar, .eula, .files, .grave, .boot-bar, .notepad, .menubar, #readme-text { box-sizing: border-box; }

/* fonts: XP uses Tahoma (XP.css leaves .window on Arial); 98 swaps the pixel font out when it would blur */
html[data-os="xp"] :is(.window, button, input, label, textarea, select, option, .status-bar-field),
html.fractional[data-os="98"] :is(.window, button, input, label, textarea, select, option, .title-bar) { font-family: var(--font-vector); }
html[data-os="xp"] .title-bar { font-family: "Trebuchet MS", "Wine Tahoma", Tahoma, sans-serif; }
[hidden] { display: none !important; }   /* never let a display rule beat the hidden attribute */
/* 98.css/XP.css draw a dotted focus frame on any focused button/checkbox label/link; only show it for keyboard use */
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
input:focus:not(:focus-visible) + label { outline: none; }
.app:focus { outline: none; }   /* windows take focus when opened (keyboard users land inside them) */
/* disabled controls: 98.css/XP.css 0.2.6 ship this rule as "&:disabled{…}", which never matches at the top level */
html[data-os="98"] button:disabled, html[data-os="98"] :disabled + label { color: #808080; text-shadow: 1px 1px 0 #fff; }
html[data-os="xp"] button:disabled, html[data-os="xp"] :disabled + label { color: #a1a192; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: #0a0a0a; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; }
body[data-screen="tomb"] #tomb,
body[data-screen="desktop"] #desktop,
body[data-screen="boot"] #boot,
body[data-screen="pill"] #pill { display: flex; }
body[data-screen="dos"] #dos { display: block; }
#dos { background: #000; padding: 10px 12px; cursor: none; }
#dos p { margin: 0; color: #c0c0c0; font: 16px/1.2 "Perfect DOS VGA 437 Win", "Courier New", monospace; }
.dos-cursor { animation: dos-blink 1s steps(1) infinite; }
@keyframes dos-blink { 50% { visibility: hidden; } }
body[data-screen="black"] { background: #000; }

/* ---------- tombstone (copied from rytmikarz.pl, wrapped for scaling) ---------- */
#tomb { background: #0a0a0a; justify-content: center; align-items: center; }
.tomb-fit, .grave-fit { transform: scale(var(--s, 1)); transform-origin: center; }
.tombstone{width:340px;height:520px;background:linear-gradient(145deg,#2c2c2c 0%,#111 100%);border-radius:170px 170px 15px 15px;border:2px solid #856a1d;box-shadow:0 0 50px rgba(139,0,0,0.15),0 30px 60px rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;padding:80px 30px 0;text-align:center;position:relative;box-sizing:border-box;font-family:Georgia,serif}
.tombstone .rip{font-size:1.2rem;margin-bottom:25px;font-weight:bold;color:#8b0000;letter-spacing:6px;text-shadow:0 0 8px rgba(255,215,0,0.2)}
.tombstone .name{font-size:2.4rem;margin-bottom:15px;font-weight:bold;line-height:1.1;background:linear-gradient(to bottom,#fcf6ba 0%,#bf953f 22%,#8f6b29 45%,#fbf5b7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.8))}
.tombstone .date-label{font-size:0.8rem;text-transform:uppercase;color:#8b0000;margin-bottom:5px;letter-spacing:1px}
.tombstone .death-date{font-size:1.3rem;margin-bottom:12px;color:#d4af37;border-top:1px solid rgba(139,0,0,0.4);padding-top:12px;width:85%}
.tombstone .quote{font-style:italic;font-size:1.05rem;line-height:1.5;color:#999;border-left:2px solid #bf953f;padding-left:15px;margin-top:50px;text-align:left}
.tombstone .base{width:420px;height:50px;background:#1a1a1a;position:absolute;bottom:-40px;border-radius:4px;border-top:3px solid #856a1d;box-shadow:0 15px 40px rgba(0,0,0,1)}

/* ---------- glitch transition ---------- */
#glitch { position: fixed; inset: 0; pointer-events: none; z-index: 100; display: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(215,38,30,.25), rgba(0,255,255,.18));
  mix-blend-mode: screen; }
body.glitching #glitch { display: block; animation: glitch-ov .6s steps(6) forwards; }
body.glitching #tomb .tomb-fit { animation: glitch-tomb .6s steps(8) forwards; }
@keyframes glitch-tomb {
  0%   { transform: scale(var(--s,1)); filter: none; clip-path: none; }
  15%  { transform: scale(var(--s,1)) translate(-14px, 2px) skewX(10deg); filter: hue-rotate(120deg) saturate(4); }
  30%  { clip-path: inset(18% 0 52% 0); transform: scale(var(--s,1)) translate(22px, 0); }
  45%  { clip-path: inset(60% 0 8% 0); transform: scale(var(--s,1)) translate(-30px, -4px); filter: invert(1); }
  60%  { clip-path: inset(5% 0 75% 0); transform: scale(calc(var(--s,1) * 1.08)) translate(10px, 0); }
  80%  { clip-path: inset(40% 0 40% 0); transform: scale(var(--s,1)) skewX(-25deg); filter: brightness(3); }
  100% { clip-path: inset(50% 0 50% 0); filter: brightness(5); }
}
@keyframes glitch-ov {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; transform: translateY(-6px); }
  50% { opacity: .6; transform: translateY(8px); }
  90% { opacity: 1; background-color: rgba(255,255,255,.6); }
  100% { opacity: 0; }
}

/* ---------- desktop ---------- */
#desktop { background: var(--teal98); flex-direction: column; }
html[data-os="xp"] #desktop { background: var(--rain-bg); }
#rain { position: absolute; inset: 0; width: 100%; height: 100%; display: none; touch-action: none; }
html[data-os="xp"] #rain { display: block; }

html[data-os="98"] [data-os-only="xp"],
html[data-os="xp"] [data-os-only="98"] { display: none !important; }

/* desktop icons */
.icons { position: absolute; top: 12px; left: 8px; bottom: calc(var(--tb-h) + 8px);
  display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; align-content: flex-start; z-index: 1; }
button.icon { all: unset; cursor: pointer; width: 75px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center; color: #fff; font: 11px/1.25 var(--font-ui); word-break: break-word; padding: 2px; }
html[data-os="xp"] button.icon { text-shadow: 1px 1px 1px #000; }
button.icon svg { width: 32px; height: 32px; }
button.icon:focus-visible span, button.icon:hover span { background: #0b246a; outline: 1px dotted #fff; }
html[data-os] button.icon.dark { color: #000; text-shadow: none; }   /* beats the desktop label shadow */
button.icon.dark:focus-visible span, button.icon.dark:hover span { color: #fff; }

/* windows */
.windows { position: absolute; inset: 0 0 calc(var(--tb-h) * var(--tb-zoom)) 0; pointer-events: none; z-index: 2; }
.app { position: absolute; pointer-events: auto; max-width: calc(100% - 2 * var(--gutter)); max-height: calc(100% - 2 * var(--gutter));
  display: flex; flex-direction: column; }
.app .window-body { overflow: auto; }
/* the tombstone is scaled with a transform (layout box stays full size): clip, never scroll */
.app .window-body.grave { overflow: hidden; }
/* edge-to-edge bodies (Notatnik, nagrobek, exe) must stay inside the frame: 98 frames with padding, XP with
   3px inset shadows on a padding-less .window, so XP needs the 3px as margin */
.window-body.flush { margin: 0; }
html[data-os="xp"] .window-body.flush { margin: 0 3px; }
.app .title-bar { touch-action: none; user-select: none; -webkit-user-select: none; }
/* inactive windows (not on top): grey caption in 98, washed-out Luna caption in XP. The libs have no such style. */
html[data-os="98"] .app:not(.is-top) > .title-bar { background: linear-gradient(90deg, #808080, #b5b5b5); }
html[data-os="98"] .app:not(.is-top) > .title-bar .title-bar-text { color: #c0c0c0; }
html[data-os="xp"] .app:not(.is-top) > .title-bar { filter: saturate(.45) brightness(1.18); }
html[data-os="xp"] .app:not(.is-top) > .title-bar .title-bar-text { color: #e4ecfa; }
/* a message box is modal for the windows behind it (the taskbar still works, like in 98) */
.windows.modal .app:not(#w-msg) { pointer-events: none; }
.btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.row-icon { display: flex; gap: 12px; align-items: flex-start; }
.row-icon p { margin: 0; line-height: 1.4; }
svg.big { width: 32px; height: 32px; flex: none; }
.small { font-size: 11px; }
.dim { color: #777; }
.indent { margin: 0 0 8px 24px; }

/* 98 scrollbar thumb: silver face + button bevel, like the arrow buttons (98.css paints it #dfdfdf) */
html[data-os="98"] ::-webkit-scrollbar-thumb { background-color: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; }

/* O programie */
.about { display: flex; flex-direction: column; gap: 8px; }
.app .window-body.about { overflow-x: hidden; }   /* everything wraps: never scroll sideways (the banner sits flush with the edge, a sub-pixel rounding was enough) */
.about-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: -2px 0 0; color: #fff;   /* no sideways bleed: it made the body scroll 2px */
  background: linear-gradient(90deg, var(--logo-red-dark), #78180d 45%, var(--logo-red)); }
.about-banner img { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.about-banner p { margin: 0; line-height: 1.45; }
.about-banner b { font: bold 16px Georgia, "Times New Roman", serif; color: var(--logo-orange); }
.about-text p { margin: 0 0 6px; line-height: 1.4; }
/* Scrolling white boxes (EULA, install log, credits) get the sunken 98 bevel as a border-image, not inset shadows:
   content scrolls inside the padding box and would paint over inset shadows; borders sit outside it. */
.sunken { border: 2px solid transparent; box-shadow: none;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23808080' d='M0 0h4v1H1v3H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H0V4h4z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H2v1H1z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H1V3h2z'/%3E%3C/svg%3E") 2; }
.about-credits { height: 110px; overflow: hidden auto; background: #fff; padding: 2px 4px; font-size: 11px; }
html[data-os="xp"] .about-credits { border: 1px solid #7f9db9; border-image: none; }
.about-credits ul { margin: 0; padding-left: 14px; }
.about-credits li { margin: 0 0 3px; line-height: 1.35; }
/* Notatnik menu: only "Pomoc" is live */
.menubar .menu-btn { all: unset; cursor: pointer; padding: 0 3px; margin: 0 -3px; }
.menubar .menu-btn:hover, .menubar .menu-btn:focus-visible { background: #316ac5; color: #fff; }

/* game-CD launcher (autorun), after the late-90s game launchers: splash, option, stacked buttons */
.launcher { margin: 6px; }
.splash { padding: 2px; background: #000; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.splash svg { display: block; width: 100%; height: auto; }
.lopt { justify-content: center; margin: 8px 0 7px; }
.lbtns { display: flex; flex-direction: column; gap: 2px; }
.lbtns button { width: 100%; min-height: 23px; padding: 0 8px; }
.lbtns button.primary { min-height: 32px; margin-bottom: 4px; }
.btns.center { justify-content: center; }
#msg-text { white-space: pre-line; }
#w-installer.no-log .log { display: none; }
/* Win98 default button: 1px black frame around the normal bevel (98.css has no such style) */
html[data-os="98"] button.default { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #0a0a0a, inset -2px -2px #0a0a0a, inset 2px 2px #fff, inset -3px -3px #808080, inset 3px 3px #dfdfdf; }
html[data-os="98"] button.default:not(:disabled):active { box-shadow: inset 0 0 0 1px #0a0a0a, inset 2px 2px #808080, inset -2px -2px #808080; }

/* installer wizard */
.wizard { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: minmax(0, 1fr) auto; min-height: 340px; padding: 0; margin: 0; }
.wiz-side { grid-row: 1; background: linear-gradient(180deg, #2a0502 0%, var(--logo-red-dark) 35%, var(--logo-red) 78%, var(--logo-red-glow) 100%); color: #fff; display: flex;
  flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 10px; text-align: center;
  font: bold 16px/1.15 Georgia, serif; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.wiz-side img { width: 96px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.wiz-main { padding: 12px 16px; overflow: auto; display: flex; flex-direction: column; min-height: 0; }   /* min-height 0: a long EULA scrolls inside its box instead of stretching the window */
/* EULA and install-log pages: the text box takes all the leftover height (window size stays the same on every step) */
.step[data-step="2"].on, .step[data-step="6"].on { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.step[data-step="2"] .eula { flex: 1 1 0; height: 0; min-height: 140px; }   /* height 0: fill the leftover space, never grow the window */
.step[data-step="6"] .log { flex: 1 1 0; height: 0; min-height: 128px; }
/* Wizard97 style: bold 8pt step titles, Verdana Bold welcome title (the pixel font only works at 11px) */
.wiz-main h2 { font: bold 11px var(--font-ui); margin: 0 0 12px; }
.wiz-main .step[data-step="1"] h2, .wiz-main .step[data-step="7"] h2 { font: bold 16px Verdana, "Wine Tahoma", Tahoma, sans-serif; }
.wiz-main p { line-height: 1.45; }
.wiz-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; }   /* etched groove, Wizard97 style */
.step { display: none; }
.step.on { display: block; }
.eula p, .eula ul { margin: 0 0 8px; }
.eula ul { padding-left: 16px; }
.eula { height: 140px; overflow: auto; background: #fff; padding: 4px; font-size: 11px; margin-bottom: 8px; }   /* bevel: .sunken */
.path-row input { flex: 1; min-width: 0; }
.pbar { height: 22px; border: 2px inset #ddd; background: #fff; padding: 2px; }
.pbar-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 9px, transparent 9px 11px); }
/* overflow-x: clip truncates sideways but lets capital accents (Ć, Ź…) poke above the 10px ascent */
#prog-msg { margin: 0 0 6px; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; }
/* NSIS-style install log: sunken white list, newest line at the bottom */
.log { list-style: none; margin: 8px 0 0; padding: 2px 2px 1px; height: 128px; overflow-y: auto; background: #fff; font: 11px var(--font-ui); }   /* bevel: .sunken */
.log li { white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; line-height: 15px; }
@media (max-width: 640px), (max-height: 500px) {
  .step[data-step="2"] .eula { min-height: calc(100vh - 185px); min-height: calc(100dvh - 185px); }
  .step[data-step="6"] .log { min-height: calc(100vh - 215px); min-height: calc(100dvh - 215px); }
}

/* notepad */
.notepad { padding: 0; background: #fff; }
.menubar { display: flex; gap: 12px; padding: 2px 6px; border-bottom: 1px solid #ccc; font-size: 11px; background: #f5f5f5; }
#readme-text { margin: 0; padding: 8px 10px; font: 13px/1.4 var(--font-mono);
  white-space: pre-wrap; word-break: break-word; color: #000; background: #fff; }
#readme-text * { font: inherit; }   /* XP.css puts a DOS VGA font on `pre *` */
#readme-text a { color: #00c; }

/* Rytmikarz.exe + boot neon */
.exe { text-align: center; }
.neon-btn { all: unset; cursor: pointer; display: inline-block; padding: 8px; }
img.neon { width: 180px; max-width: 60vw;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--logo-orange)) drop-shadow(0 0 18px var(--logo-red)); }
.exe { background: #0b0b0d; color: #fff; }
.exe p { margin: 4px 0 10px; }
img.neon.flicker { animation: flicker 1.1s linear 1; }
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--logo-orange)) drop-shadow(0 0 18px var(--logo-red)); }
  20%, 24%, 55% { opacity: .25; filter: none; }
}

/* clock */
.clockwin { text-align: center; }
.cd { font: bold 28px/1.2 var(--font-mono); margin: 6px 0 12px; color: var(--logo-red); }

/* recycle bin */
/* Explorer-style: flush white file area, status bar straight under it */
.files { background: #fff; min-height: 110px; padding: 10px; }
.bin .status-bar { margin: 0; }
.grave { background: #0a0a0a; display: flex; justify-content: center; align-items: center; height: 340px; overflow: hidden; padding: 0; }

/* ---------- taskbar + start menu ---------- */
/* Real 96 DPI metrics. 98: 28px bar, 22px buttons, Start 54px. XP: 30px bar, 24px task buttons. */
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb-h); zoom: var(--tb-zoom); display: flex; align-items: center;
  z-index: 5; font: 11px var(--font-ui); }
.taskbar button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 3px;
  white-space: nowrap; overflow: hidden; }
.taskbar button > span { min-width: 0; overflow-x: clip; text-overflow: ellipsis; }   /* min-width 0: unlike overflow:hidden, clip does not let a flex item shrink by itself */
.taskbar svg { width: 16px; height: 16px; flex: none; }
.tasks { flex: 1; display: flex; min-width: 0; overflow: hidden; }
.tasks button { min-width: 0; flex: 0 1 160px; }
.tray { margin-left: auto; flex: none; }

/* 98 */
html[data-os="98"] .taskbar { background: #c0c0c0; color: #000; padding: 3px 2px 2px; gap: 2px;
  border-top: 1px solid #dfdfdf; box-shadow: inset 0 1px #fff; }
html[data-os="98"] .taskbar button { height: 22px; padding: 0 4px; background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
html[data-os="98"] .taskbar .start { width: 54px; font-weight: bold; padding: 0 3px; }
html[data-os="98"] .taskbar .tasks { gap: 3px; }
html[data-os="98"] .taskbar .tasks button { padding: 0 4px 0 3px; }
html[data-os="98"] .taskbar button.on { font-weight: bold; padding-top: 1px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; }   /* the 98 dither */
html[data-os="98"] .taskbar .grip { flex: none; width: 2px; height: 20px; margin: 0 2px; box-shadow: inset 1px 0 #808080, inset -1px 0 #fff; }
html[data-os="98"] .taskbar .tray { height: 22px; padding: 0 9px; background: #c0c0c0; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }

/* XP (Luna gradients, logo colours on the Start button) */
html[data-os="xp"] .taskbar { color: #fff; padding: 0; gap: 0;
  background: linear-gradient(180deg, #1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%,
    #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%); }
html[data-os="xp"] .taskbar .grip { display: none; }
html[data-os="xp"] .taskbar .start { height: 30px; padding: 0 22px 2px 9px; gap: 5px; border-radius: 0 10px 10px 0; text-transform: lowercase;
  font: italic bold 18px "Trebuchet MS", "Wine Tahoma", Tahoma, sans-serif; text-shadow: 1px 1px 3px rgba(0,0,0,.55);
  background: radial-gradient(ellipse 90% 60% at 50% 18%, rgba(255,255,255,.45), transparent 70%),
    linear-gradient(180deg, var(--logo-cream) 0%, var(--logo-orange) 32%, #dc7f26 72%, var(--logo-red) 100%);
  box-shadow: inset -3px 0 4px rgba(0,0,0,.28), 2px 0 3px rgba(0,0,0,.35); }
html[data-os="xp"] .taskbar .start svg { width: 20px; height: 20px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4)); }
html[data-os="xp"] .taskbar .tasks { gap: 3px; padding: 0 6px 0 10px; }
html[data-os="xp"] .taskbar .tasks button { height: 24px; padding: 0 8px 0 6px; gap: 5px; border-radius: 3px; background: #3c81f3;
  box-shadow: inset -1px 0 rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.2); }
html[data-os="xp"] .taskbar .tasks button:hover { background: #53a3ff; }
html[data-os="xp"] .taskbar .tasks button.on { background: #1e52b7; box-shadow: inset 0 0 1px 1px rgba(0,0,0,.2), inset 1px 0 1px rgba(0,0,0,.7); }
html[data-os="xp"] .taskbar .tray { height: 30px; padding: 0 12px; border-left: 1px solid #1042af; box-shadow: inset 1px 0 1px #18bbff;
  background: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%,
    #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%); }

/* Start menu */
.startmenu { position: absolute; left: 0; bottom: var(--tb-h); zoom: var(--tb-zoom); z-index: 6; font: 11px var(--font-ui); }
.startmenu ul { list-style: none; margin: 0; padding: 0; }
.startmenu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; width: 100%; }
.startmenu svg { flex: none; }

/* 98: grey menu with the vertical banner on the left */
html[data-os="98"] .startmenu { display: flex; background: #c0c0c0; padding: 3px; min-width: 180px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; }
html[data-os="98"] .sm-head { width: 21px; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center;
  padding: 6px 0; background: linear-gradient(0deg, #000080, #1084d0); color: #c0c0c0; font: bold 16px Arial, sans-serif; letter-spacing: .5px; }
html[data-os="98"] .sm-head svg { display: none; }
html[data-os="98"] .sm-head b { color: #fff; }
html[data-os="98"] .startmenu ul { flex: 1; }
html[data-os="98"] .startmenu button { height: 38px; padding: 0 14px 0 4px; gap: 8px; }
html[data-os="98"] .startmenu svg { width: 32px; height: 32px; }
html[data-os="98"] .startmenu button:hover, html[data-os="98"] .startmenu button:focus-visible { background: #000080; color: #fff; }

/* XP: blue header, white list */
html[data-os="xp"] .startmenu { width: 230px; background: #fff; border: 1px solid #1c50c6; border-radius: 7px 7px 0 0; overflow: hidden;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4); }
html[data-os="xp"] .sm-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: #fff;
  font: bold 14px "Trebuchet MS", "Wine Tahoma", Tahoma, sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #1868ce, #0e60cb 70%, #0a4fb0); border-bottom: 2px solid var(--logo-orange); }
html[data-os="xp"] .sm-head svg { width: 36px; height: 36px; background: #fff; border: 2px solid #d6dff5; border-radius: 3px; padding: 2px; }
html[data-os="xp"] .startmenu ul { padding: 6px 0; }
html[data-os="xp"] .startmenu button { padding: 4px 10px; gap: 8px; color: #000; }
html[data-os="xp"] .startmenu svg { width: 24px; height: 24px; }
html[data-os="xp"] .startmenu .sep { border-top: 1px solid #d5d2c3; margin: 4px 8px 0; padding-top: 4px; }
html[data-os="xp"] .startmenu .sep button { padding-left: 2px; }
html[data-os="xp"] .startmenu button:hover, html[data-os="xp"] .startmenu button:focus-visible { background: #316ac5; color: #fff; }

/* ---------- boot splash ---------- */
#boot { background: #000; flex-direction: column; justify-content: center; align-items: center; gap: 18px; color: #fff; }
#boot img.neon { animation: boot-in 1.6s ease-out .2s both; }
@keyframes boot-in {
  from { opacity: 0; transform: scale(.94); filter: drop-shadow(0 0 0 transparent); }
  to   { opacity: 1; transform: none; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--logo-orange)) drop-shadow(0 0 18px var(--logo-red)); }
}
.boot-title { font: 22px Georgia, serif; margin: 0; letter-spacing: 1px; }
.boot-title b { color: var(--logo-orange); }
.boot-bar { width: 140px; height: 16px; border: 2px solid #b2b2b2; border-radius: 4px; padding: 2px; overflow: hidden; display: flex; gap: 2px; }
.boot-bar span { width: 9px; height: 100%; border-radius: 1px; background: linear-gradient(180deg, #fbefd9, var(--logo-orange) 45%, var(--logo-red-glow));
  animation: boot-slide 1.6s linear infinite; }
@keyframes boot-slide { from { transform: translateX(-40px); } to { transform: translateX(150px); } }

/* ---------- blue pill ---------- */
/* blue pill = the Win98 "safe to turn off" screen: orange on black, big chunky letters (pixel font at exactly 3x / 2x) */
#pill { background: #000; justify-content: center; align-items: center; padding: var(--gutter); cursor: none; }
#pill-text { margin: 0 0 6vh; color: #ff8c00; font: bold 33px/1.35 var(--font-98); text-align: center; white-space: pre-line;
  max-width: 34em; -webkit-font-smoothing: none; }
@media (max-width: 640px), (max-height: 500px) { #pill-text { font-size: 22px; } }

/* ---------- phones: one window at a time ---------- */
@media (max-width: 640px), (max-height: 500px) {
  .icons { display: none; }
  /* more than one task: icon-only task buttons so they don't shrink to "C." and "K." */
  .tasks:has(button:nth-child(2)) button { flex: none; width: auto; }
  .tasks:has(button:nth-child(2)) button > span { display: none; }
  .app { left: 8px !important; right: 8px; top: 8px !important; width: auto !important; max-width: none; max-height: calc(100% - 16px); }
  .app:not(.is-top) { display: none; }
  .wizard { grid-template-columns: 1fr; min-height: 0; }
  .wiz-side { display: none; }
  .wiz-btns { flex-wrap: wrap; }
}
/* short screens (phones in landscape): a smaller splash so the launcher buttons fit without scrolling */
@media (max-height: 500px) {
  .splash { width: fit-content; max-width: 100%; margin-inline: auto; box-sizing: border-box; }
  .splash svg { width: auto; max-width: 100%; height: 26vh; }
}

/* ---------- touch: bigger hit areas, same look (real 96 DPI controls are 14-23px tall) ---------- */
@media (pointer: coarse) {
  /* title-bar buttons: an invisible extension around each button */
  .title-bar-controls button { position: relative; }
  .title-bar-controls button::after { content: ""; position: absolute; inset: -9px -2px; }
  .title-bar-controls button[aria-label="Close"]::after { right: -8px; }
  /* 98 taskbar: buttons fill the bar's full 27px height, the extra rows are transparent border (the bevel stays 22px) */
  html[data-os="98"] .taskbar { padding-top: 0; padding-bottom: 0; }
  html[data-os="98"] .taskbar button, html[data-os="98"] .taskbar .tray { height: 27px; border-top: 3px solid transparent; border-bottom: 2px solid transparent; background-clip: padding-box; }
  /* checkbox rows and the Notatnik "Pomoc" menu: padding outward, cancelled by negative margin */
  .lopt, .step .field-row:has(> input[type="checkbox"]:not(:disabled)) { padding-block: 8px; margin-block: -8px; }
  .lopt { margin-block: 0 -1px; }
  .menubar .menu-btn { padding: 6px 3px; margin: -6px -3px; }
  .lbtns button { min-height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  body.glitching #glitch, body.glitching #tomb .tomb-fit, img.neon.flicker, #boot img.neon, .boot-bar span, .dos-cursor { animation: none !important; }
}