*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --z is the browser zoom level (set in index.html). The arcade module ignores zoom;
     only the key labels follow it (the XP windows and popups are in px, so they zoom anyway). */
  --z: 1;
  --taskbar: 30px;
  --u: min(calc((100vh - var(--taskbar)) / 100), 1.45vw);
  --bg: #060a1a;
  --ink: #2c2f33;
  /* One palette for the whole site: silver chrome, XP Luna blue, amber LED. */
  --amber: #ffb938;
  --amber-glow: rgba(255, 170, 40, .85);
  --luna-hi: #3d95ff;
  --luna: #0a5fe6;
  --luna-lo: #0031a8;
  --text: #e9ecf2;
}

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Chakra Petch", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* No WebGL: still show the background picture, just without ripples. */
.no-webgl body { background: #060a1a url("../img/background.webp") center / 100% 100% no-repeat; }
@media (max-aspect-ratio: 9/10) { .no-webgl body { background: #0b4fb8 url("../img/background-portrait.webp") center / cover no-repeat; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

#water { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.no-webgl #water { display: none; }

.sheen {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 35%, rgba(200, 205, 255, .08));
  box-shadow: inset 0 0 10em rgba(0, 0, 0, .75);
}

/* ---------- Module (spine, bezel, LED screen) ---------- */

#stage {
  position: fixed; left: 0; z-index: 2;
  top: calc((100vh - var(--taskbar) - 100 * var(--u)) / 2);
  width: 100%; height: calc(100 * var(--u));
  pointer-events: none;
}

.module { animation: moduleIn .7s cubic-bezier(.2, .8, .2, 1) .15s both; }

.spine, .ring {
  position: absolute; left: 0; top: 0;
  height: 100%; width: calc(38 * var(--u));
  overflow: visible;
}
.spine { z-index: 2; }
.ring  { z-index: 4; }

.ring .arrow { fill: var(--amber); transition: fill .15s, filter .15s; }
.ring .arrow.on { filter: drop-shadow(0 0 3px var(--amber-glow)); }
.ring .arrow.blink { fill: #fff3d0; }

.screen {
  position: absolute; z-index: 3;
  left: calc(5.2 * var(--u)); top: calc(5.2 * var(--u));
  /* Explicit height, not aspect-ratio: in Safari the canvas's pixel size could
     otherwise stretch the screen into a tall oval at high zoom. */
  width: calc(23.6 * var(--u)); height: calc(23.6 * var(--u));
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #141414, #050505 70%);
}
.screen canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; filter: blur(.4px) brightness(1.15); }
.screen::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 34% 24%, rgba(255, 255, 255, .2), transparent 42%);
  box-shadow: inset 0 0 calc(2.2 * var(--u)) rgba(0, 0, 0, .9);
}

@keyframes moduleIn { from { transform: translateX(-60%); opacity: 0; } }

/* ---------- Menu keys ---------- */

#keys {
  position: absolute; left: 0; top: 50%; z-index: 1;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  pointer-events: auto;
}

/* --w and --sl are in "pitch tenths": the stack is sized so 8 keys fill 80u.
   Each key's slant ends where the next key's top-right corner starts. */
.key {
  --p: calc(var(--u) * min(10, 82 / var(--n)));
  --s: calc(var(--sl) * var(--p) / 10);
  position: relative; display: block;
  width: calc(var(--w) * var(--p) / 10); height: var(--p);
  color: #2f3033; text-decoration: none; cursor: pointer;
  border: 0; background: none; font: inherit; text-align: left; outline: none;
  transform: translateX(-110%);
  animation: keyIn .42s cubic-bezier(.2, .9, .3, 1.12) forwards;
  animation-delay: calc(.95s + var(--i) * .075s);
}

@keyframes keyIn { to { transform: translateX(0); } }

/* The plate is a skewed box: skewing (instead of clipping) keeps the slanted
   edge and still allows rounded corners and soft bevel shadows. */
.plate {
  position: absolute; overflow: hidden;
  top: calc(.22 * var(--u)); bottom: calc(.22 * var(--u));
  left: calc(-2 * var(--p)); right: 0;
  border-radius: calc(.16 * var(--p));
  transform-origin: 100% 0;
  transform: skewX(calc(-1 * atan2(var(--s), var(--p))));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .1) 12%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(90deg, rgba(232, 234, 240, .97) 0%, rgba(214, 218, 230, .9) 50%, rgba(178, 186, 206, .55) 80%, rgba(146, 156, 186, .36) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .8),
    inset -2px 0 2px rgba(255, 255, 255, .45),
    inset 0 -3px 5px rgba(20, 28, 60, .28),
    0 calc(.5 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
  backdrop-filter: blur(5px) saturate(1.15);
  transition: filter .15s ease, box-shadow .15s ease, translate .18s cubic-bezier(.2, .8, .2, 1);
}
/* Soft glossy streak across the top half */
.plate::before {
  content: ""; position: absolute; left: 4%; right: 3%; top: 8%; height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

.fill {
  position: absolute; inset: 0; opacity: 0;
  /* Same blue as the XP window title bars; fades in from the chrome on the left. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 20, 80, .25) 100%),
    linear-gradient(90deg, rgba(10, 95, 230, 0) 8%, rgba(10, 95, 230, .85) 50%, var(--luna) 75%, var(--luna-lo));
  transition: opacity .15s ease;
}

.label {
  position: absolute; z-index: 2; top: 50%; right: calc(var(--p) * .625);
  transform: translateY(-50%);
  display: flex; align-items: center; gap: .35em;
  /* --ls: zoom-driven label scale, already clamped in index.html (Safari rejects clamp() here). */
  /* XP lettering: Trebuchet MS bold in Title Case, like XP title bars and the Start menu. */
  font-family: "Trebuchet MS", Tahoma, "Segoe UI", sans-serif;
  font-size: calc(var(--p) * .36 * var(--ls, 1)); font-weight: 700; line-height: 1;
  text-transform: capitalize; letter-spacing: 0; white-space: nowrap;
  color: #1c2a4a;
  text-shadow: 0 0 1px #fff, 0 0 .1em rgba(255, 255, 255, .85), 0 0 .2em rgba(255, 255, 255, .45);
  transition: color .15s, translate .18s cubic-bezier(.2, .8, .2, 1);
}
/* White arrow in front of the selected item, like XP menus */
.label::before { content: "\25B8"; font-size: .8em; opacity: 0; margin-right: -.2em; transition: opacity .15s; }
.key.is-sel .label::before { opacity: 1; }
.key.locked .label::before { display: none; }
.label svg { height: .62em; width: auto; margin-top: -.08em; }

.key.is-sel .plate {
  translate: calc(1.4 * var(--u)) 0;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .8),
    inset -2px 0 2px rgba(255, 255, 255, .45),
    inset 0 -3px 5px rgba(20, 28, 60, .28),
    0 0 calc(1.6 * var(--u)) rgba(61, 149, 255, .7),
    0 calc(.5 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .35);
}
.key.is-sel .fill { opacity: 1; }
/* XP's orange "hot" highlight along the top edge of the selected button */
.fill::after {
  content: ""; position: absolute; left: 30%; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, rgba(255, 199, 60, 0), #ffc73c 40%, #e68b2c);
  box-shadow: 0 1px 4px rgba(255, 170, 40, .7);
}
.key.is-sel .label {
  color: #fff;
  translate: calc(1.4 * var(--u)) 0;
  text-shadow: 1px 1px 0 #0f1089, 0 0 .3em rgba(0, 20, 90, .5);
}

.key.locked { cursor: not-allowed; }
.key.locked .plate { filter: saturate(.4) brightness(.8); opacity: .75; }
.key.locked .fill { display: none; }
.key.locked .label, .key.locked.is-sel .label { color: #5a5f69; text-shadow: 0 0 1px #fff, 0 0 .1em rgba(255, 255, 255, .85), 0 0 .2em rgba(255, 255, 255, .45); }

.key.press .plate { animation: press .28s ease-out; }
.key.shake .plate { animation: shake .36s ease; }

@keyframes press { from { filter: brightness(1.35); } }
@keyframes shake {
  20%, 60% { translate: calc(1.6 * var(--u)) 0; }
  40%, 80% { translate: calc(.4 * var(--u)) 0; }
}

/* ---------- Windows XP windows (projects / player) ---------- */

/* Windows float above the page; the layer itself never blocks clicks. */
.xp-layer { position: fixed; inset: 0 0 var(--taskbar) 0; z-index: 20; pointer-events: none; }
.xp-layer .xp-window { pointer-events: auto; }
.xp-window[hidden] { display: none !important; }

.xp-window {
  --tahoma: Tahoma, "Segoe UI", Verdana, sans-serif;
  --trebuchet: "Trebuchet MS", Tahoma, sans-serif;
  position: fixed;
  display: flex; flex-direction: column;
  width: min(920px, 100%);
  padding: 0 3px 3px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #0831d9, #166aee 3px, #0831d9 6px, #0831d9 calc(100% - 6px), #166aee calc(100% - 3px), #0831d9);
  box-shadow: 0 0 0 1px #0019b0, 0 18px 50px rgba(0, 0, 0, .6);
  font: 11px/1.35 var(--tahoma); color: #000; user-select: text;
  -webkit-font-smoothing: auto;
}
.xp-window.pop { animation: winPop .18s ease-out; }
@keyframes winPop { from { transform: scale(.95); opacity: 0; } }

/* Title bar */
.xp-title {
  display: flex; align-items: center; gap: 5px;
  height: 30px; margin: 0 -3px; padding: 0 5px 0 7px; flex-shrink: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg,
    #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  box-shadow: inset 0 1px 0 #3e97ff, inset 1px 0 0 #1b62dd, inset -1px 0 0 #1b62dd;
  cursor: move; touch-action: none; user-select: none;
}
.xp-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.xp-icon svg { width: 100%; height: 100%; }
.xp-title h2 {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 13px var(--trebuchet); color: #fff; letter-spacing: .2px;
  text-shadow: 1px 1px 0 #0f1089;
}
.xp-controls { display: flex; gap: 2px; }
.xp-ctl {
  position: relative; width: 21px; height: 21px; padding: 0; cursor: pointer;
  border: 1px solid #fff; border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 80%, #a3bbec 100%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .25);
}
.xp-ctl:hover { filter: brightness(1.15); }
.xp-ctl:active { filter: brightness(.9); }
.xp-close { background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 100%); }
.xp-ctl span { position: absolute; }
.xp-close span { inset: 0; }
.xp-min span { left: 5px; bottom: 5px; width: 7px; height: 3px; background: #fff; }
.xp-max span { left: 4px; top: 4px; width: 11px; height: 11px; border: 1px solid #fff; border-top-width: 3px; box-sizing: border-box; }
.maximized .xp-max span { left: 6px; top: 3px; width: 9px; height: 9px; box-shadow: -3px 3px 0 -1px #2263d5, -3px 3px 0 0 #fff; }
.xp-close span::before, .xp-close span::after {
  content: ""; position: absolute; left: 3px; top: 8.5px; width: 13px; height: 2px; background: #fff; border-radius: 1px;
}
.xp-close span::before { transform: rotate(45deg); }
.xp-close span::after { transform: rotate(-45deg); }
.xp-ctl:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }

/* Menu bar (Explorer only) */
.xp-menubar {
  display: none; align-items: center; gap: 2px; height: 22px; padding: 0 2px;
  background: #ece9d8; border-bottom: 1px solid #d8d2bd; user-select: none;
}
.has-menubar .xp-menubar { display: flex; }
.xp-menubar span { padding: 2px 7px; }
.xp-menubar span:not(.xp-flag):hover { background: #316ac5; color: #fff; }
.xp-flag {
  margin-left: auto; width: 34px; height: 20px; padding: 0 !important;
  background: linear-gradient(90deg, #f35325 0 48%, transparent 48% 52%, #81bc06 52%) top / 16px 9px no-repeat,
              linear-gradient(90deg, #05a6f0 0 48%, transparent 48% 52%, #ffba08 52%) bottom / 16px 9px no-repeat;
  background-position: 9px 1px, 9px 10px;
  border-left: 1px solid #d8d2bd;
}

.xp-body { flex: 1; min-height: 0; overflow: auto; background: #ece9d8; }
.xp-status {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0;
  height: 22px; padding: 0 26px 0 6px;
  background: #ece9d8; border-top: 1px solid #d8d2bd; box-shadow: inset 0 1px 0 #fff;
}
.xp-status:empty { display: none; }
.st-right { display: flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid #c9c5b3; }

.ic { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.ic.big { width: 22px; height: 22px; }
.ic svg { width: 100%; height: 100%; }

/* Explorer */
.xp-body.explorer { display: flex; flex-direction: column; overflow: hidden; }
.xp-toolbar {
  display: flex; align-items: center; gap: 1px; padding: 2px 4px; flex-shrink: 0;
  background: linear-gradient(180deg, #fbfbf8, #ece9d8); border-bottom: 1px solid #d8d2bd;
}
.tb-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 3px; background: none;
  font: 11px var(--tahoma); color: #000; cursor: pointer;
}
.tb-btn:not(:disabled):not(.deco):hover { border-color: #cecec3; background: linear-gradient(180deg, #fff, #ebe8dc); box-shadow: inset 0 -1px 0 #d8d2bd; }
.tb-btn:disabled { opacity: .45; cursor: default; filter: grayscale(1); }
.tb-btn.deco { cursor: default; }
.tb-btn.pressed { border-color: #b9b6a8; background: #e3e0d3; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .15); }
.tb-sep { width: 1px; height: 28px; margin: 0 4px; background: #c9c5b3; box-shadow: 1px 0 0 #fff; }

.xp-address {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px; flex-shrink: 0;
  background: #ece9d8; border-bottom: 1px solid #d8d2bd;
}
.addr-label { color: #6b6b6b; }
.addr-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; height: 21px; padding: 0 4px;
  background: #fff; border: 1px solid #7f9db9;
}
.addr-box span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.addr-go { display: inline-flex; align-items: center; gap: 4px; }

.explorer-main { flex: 1; min-height: 0; display: flex; }
.tasks {
  width: 210px; flex-shrink: 0; overflow: auto; padding: 12px;
  background: linear-gradient(180deg, #7ba2e7, #6375d6);
}
.task { margin-bottom: 12px; border-radius: 4px 4px 0 0; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.task h3 {
  padding: 5px 10px; font: 700 11px var(--tahoma); color: #215dc6;
  background: linear-gradient(90deg, #fff, #c6d3f7);
}
.task ul { list-style: none; padding: 8px 10px; background: #d6dff7; border: 1px solid #fff; border-top: 0; }
.task li + li { margin-top: 5px; }
.task a, .task-link {
  display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  font: 11px var(--tahoma); color: #215dc6; text-decoration: none; cursor: pointer; text-align: left;
}
.task a:hover, .task-link:hover { color: #428eff; text-decoration: underline; }
.task-link.on { font-weight: 700; }
.det { padding: 8px 10px; background: #d6dff7; border: 1px solid #fff; border-top: 0; }
.det strong { display: block; font-size: 11px; }
.det span { display: block; color: #5a5a5a; margin-bottom: 6px; }
.det p { margin-top: 4px; }
.det-tags { color: #5a5a5a; }

.files {
  flex: 1; min-width: 0; overflow: auto; list-style: none; padding: 10px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 8px; align-content: start;
  background: #fff;
}
.tile {
  display: flex; gap: 8px; padding: 5px; border: 1px solid transparent; border-radius: 1px;
  color: #000; text-decoration: none;
}
.tile-icon { width: 48px; height: 44px; flex-shrink: 0; }
.tile-text { min-width: 0; display: flex; flex-direction: column; }
.tile-name { font-size: 11px; color: #000; }
.tile-type, .tile-desc { color: #6b6b6b; }
.tile-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile:hover .tile-name, .tile:focus .tile-name { background: #316ac5; color: #fff; padding: 0 2px; margin: 0 -2px; align-self: flex-start; }
.tile:hover .tile-icon, .tile:focus .tile-icon { filter: sepia(.2) hue-rotate(185deg) saturate(1.6) brightness(.85); }
.tile:focus { outline: 1px dotted #000; outline-offset: -1px; }

/* Properties dialog */
.xp-body.dialog { padding: 8px 8px 10px; display: flex; flex-direction: column; }
.xp-tabs { display: flex; padding-left: 2px; position: relative; z-index: 1; }
.xp-tabs [role="tab"] {
  margin-right: -1px; padding: 3px 9px 2px; cursor: pointer;
  font: 11px var(--tahoma); color: #000;
  border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #fff, #ecebe5 80%, #d8d5c6);
  position: relative; top: 2px;
}
.xp-tabs [role="tab"]:hover { box-shadow: inset 0 2px 0 #ffc73c; }
.xp-tabs [role="tab"][aria-selected="true"] {
  top: 1px; padding-bottom: 4px; background: #fcfcfe;
  box-shadow: inset 0 3px 0 #ffc73c, inset 0 4px 0 #e68b2c;
  z-index: 1;
}
.xp-tabs [role="tab"]:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.xp-tabpanel {
  flex: 1; min-height: 0; overflow: auto; padding: 12px;
  background: linear-gradient(180deg, #fcfcfe, #f4f3ee);
  border: 1px solid #919b9c; box-shadow: 1px 1px 0 #d0d0bf;
}

.gen { display: flex; flex-wrap: wrap; gap: 24px; padding: 6px 4px; }
.gen-art { flex: 0 0 160px; text-align: center; margin: 0 auto; }
.gen-portrait {
  position: relative; width: 160px; height: 160px; padding: 4px;
  background: #fff; border: 1px solid #919b9c; box-shadow: 2px 2px 0 #d0d0bf;
}
.gen-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  font: 700 90px var(--trebuchet); color: #fff; background: linear-gradient(180deg, #3d95ff, #0a49cb);
}
.p1 {
  position: absolute; left: -8px; top: -8px; padding: 1px 6px;
  font: italic 700 14px var(--trebuchet); color: #fff;
  background: linear-gradient(180deg, #ff6a4d, #c4130b); border: 1px solid #fff; border-radius: 3px;
}
.gen-quote { margin-top: 10px; font-style: italic; color: #215dc6; }
.gen-info { flex: 1 1 220px; }
.gen-h { margin-top: 12px; }
.gen-h:first-child { margin-top: 0; }
.gen-v { padding-left: 20px; }
.gen-name { font: 700 22px/1.2 var(--trebuchet); color: #0b3ba8; padding-left: 18px; }

.group {
  margin-bottom: 12px; padding: 8px 12px 12px;
  border: 1px solid #d0d0bf; border-radius: 4px;
}
.group legend { padding: 0 3px; color: #0046d5; }
.skills { list-style: none; display: grid; gap: 9px; }
.skills li { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 8px; }
.sk-val { text-align: right; }
.xp-progress {
  height: 15px; padding: 2px; border: 1px solid #686868; border-radius: 3px;
  background: #fff; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .15);
}
.xp-progress span {
  display: block; height: 100%; width: calc(var(--v) * 1%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .08)),
    repeating-linear-gradient(90deg, #2fcf2f 0 7px, transparent 7px 9px);
  transform-origin: left; animation: barFill .9s steps(12) both; animation-delay: var(--d);
}
@keyframes barFill { from { transform: scaleX(0); } }

.listview { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #7f9db9; }
.listview th {
  padding: 3px 8px; text-align: left; font-weight: 400;
  background: linear-gradient(180deg, #fff, #f1efe2 85%, #e2dfd0); border-right: 1px solid #d0d0bf; border-bottom: 2px solid #d6d2c2;
}
.listview td { padding: 4px 8px; }
.listview tbody tr:hover td, .listview tbody tr:focus td { background: #316ac5; color: #fff; }
.listview tbody tr:focus { outline: 1px dotted #000; }
.lv-input { font-weight: 700; letter-spacing: 1px; }
.hint { color: #5a5a5a; }

.dlg-buttons { display: flex; justify-content: flex-end; gap: 6px; padding-top: 10px; flex-shrink: 0; }
.xp-button {
  min-width: 75px; height: 23px; padding: 0 10px; cursor: pointer;
  font: 11px var(--tahoma); color: #000;
  border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
}
.xp-button:hover:not(:disabled) { box-shadow: inset 0 -1px 0 #e5a01a, inset 0 0 0 2px #f8b33a; }
.xp-button:focus-visible { box-shadow: inset 0 0 0 2px #98b8ea; outline: 1px dotted #000; outline-offset: -4px; }
.xp-button:active:not(:disabled) { background: linear-gradient(180deg, #e5e4de, #e3e2da 86%, #f2f1ee); }
.xp-button:disabled { color: #aca899; border-color: #c9c7ba; cursor: default; }

/* Moved, resized, minimized, maximized: position is set inline from panels.js */
.xp-window.maximized { border-radius: 0; padding: 0; }
.xp-window.maximized .xp-title { border-radius: 0; margin: 0; }
.maximized .xp-title { cursor: default; }
.xp-window.rolled { height: auto !important; min-height: 0; }
.xp-window.rolled > :not(.xp-title) { display: none !important; }
body.xp-dragging, body.xp-dragging * { user-select: none !important; }

.xp-grip { position: absolute; z-index: 2; touch-action: none; }
.xp-grip[data-dir="n"]  { top: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.xp-grip[data-dir="s"]  { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.xp-grip[data-dir="e"]  { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.xp-grip[data-dir="w"]  { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.xp-grip[data-dir="ne"] { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.xp-grip[data-dir="nw"] { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.xp-grip[data-dir="sw"] { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
/* Visible XP-style dotted size grip in the bottom-right corner */
.xp-grip[data-dir="se"] {
  bottom: 3px; right: 3px; width: 16px; height: 16px; cursor: nwse-resize;
  background: radial-gradient(circle, #fff 1px, transparent 1.3px) 1px 1px / 4px 4px,
              radial-gradient(circle, #a09c8c 1.1px, transparent 1.4px) 0 0 / 4px 4px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.maximized .xp-grip { display: none; }
@media (pointer: coarse) { .xp-grip[data-dir="se"] { width: 26px; height: 26px; } }

@media (max-width: 640px) {
  .tasks, .tb-label.deco, .xp-address .addr-label { display: none; }
}
@media (max-aspect-ratio: 9/10) {
  .panel-backdrop { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-window.pop, .xp-progress span { animation: none; }
}

/* ---------- Boot screen ---------- */

/* Hold the menu's slide-in until the boot screen is gone. */
.booting .module, .booting .key { animation-play-state: paused; }

.boot {
  position: fixed; inset: 0; z-index: 50; background: #000; cursor: pointer;
  font-family: "Trebuchet MS", Tahoma, sans-serif; color: #fff;
  transition: opacity .45s ease;
}
.boot.out { opacity: 0; pointer-events: none; }
.boot-center {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.boot-logo { display: flex; align-items: center; gap: 16px; }
.boot-emblem {
  display: grid; grid-template-columns: repeat(2, 22px); gap: 3px;
  transform: perspective(120px) rotateY(-18deg) skewY(-6deg);
}
.boot-emblem i { width: 22px; height: 20px; border-radius: 3px 5px 3px 5px; }
.boot-emblem i:nth-child(1) { background: linear-gradient(135deg, #ff8a4c, #e5421b); }
.boot-emblem i:nth-child(2) { background: linear-gradient(135deg, #a4e05a, #4aa312); }
.boot-emblem i:nth-child(3) { background: linear-gradient(135deg, #5ec8ff, #1a7fe0); }
.boot-emblem i:nth-child(4) { background: linear-gradient(135deg, #ffe066, #f2a900); }
.boot-word {
  font: italic 700 clamp(34px, 6vw, 56px)/1 "Trebuchet MS", "Franklin Gothic Medium", sans-serif;
  letter-spacing: -1px;
}
.boot-word sup {
  margin-left: 4px; font-size: .5em; font-weight: 700; color: #ff7a00; vertical-align: super;
}
.boot-bar {
  position: relative; width: 150px; height: 22px; overflow: hidden;
  border: 2px solid #b2b2b2; border-radius: 5px;
}
.boot-bar span {
  position: absolute; top: 2px; left: 0; width: 40px; height: 14px;
  background:
    linear-gradient(90deg, transparent 0 2px, #2838c7 2px 10px, transparent 10px 14px, #2838c7 14px 22px, transparent 22px 26px, #2838c7 26px 34px, transparent 34px);
  box-shadow: inset 0 3px 3px rgba(130, 150, 255, .7);
  animation: bootBar 1.6s linear infinite;
}
@keyframes bootBar { from { transform: translateX(-40px); } to { transform: translateX(150px); } }
.boot-foot { position: absolute; bottom: 24px; font-size: 13px; color: #d7d7d7; }
.boot-left { left: 28px; }
.boot-right { right: 28px; font-weight: 700; font-style: italic; }
.boot-skip { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: 11px; color: #6b6b6b; }

/* ---------- Sound toggle: XP system-tray style ---------- */

.sound-toggle {
  position: fixed; z-index: 15; top: 0; right: 0;
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 12px; cursor: pointer;
  border: 0; border-left: 1px solid #1042af; border-bottom: 1px solid #0b3b9c;
  border-radius: 0 0 0 10px;
  background: linear-gradient(180deg, #0c59b9 0%, #139ee9 5%, #18b5f2 10%, #139beb 14%, #1290e8 19%,
    #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  box-shadow: inset 1px 0 1px #18bbff, 0 4px 14px rgba(0, 0, 0, .35);
  font: 11px Tahoma, "Segoe UI", Verdana, sans-serif; color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}
.sound-toggle:hover { filter: brightness(1.1); }
.sound-toggle:active { filter: brightness(.95); }
.sound-toggle:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
.sound-toggle svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.sound-toggle .waves { display: none; }
.sound-toggle.on .waves { display: inline; }
.sound-toggle.on .mute { display: none; }
.sound-sep { width: 1px; height: 18px; background: #0b3b9c; box-shadow: 1px 0 0 #3fbaff; }

/* XP balloon tip under the tray */
.xp-balloon {
  position: fixed; z-index: 27; bottom: calc(var(--taskbar) + 12px); right: 60px; width: 250px;
  padding: 8px 26px 10px 10px; border-radius: 8px;
  background: #ffffe1; border: 1px solid #000;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .35);
  font: 11px Tahoma, "Segoe UI", Verdana, sans-serif; color: #000;
  animation: balloonIn .25s ease-out;
}
.xp-balloon::before, .xp-balloon::after {
  content: ""; position: absolute; right: 38px; border: 10px solid transparent; border-bottom: 0;
}
.xp-balloon::before { bottom: -11px; border-top: 11px solid #000; }
.xp-balloon::after { bottom: -9px; border-top: 10px solid #ffffe1; right: 39px; border-width: 10px 9px 0; }
.xp-balloon strong { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.xp-balloon strong i {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font: italic 700 11px Georgia, serif; color: #fff; background: radial-gradient(circle at 35% 30%, #6fa8ff, #1a4fc4);
}
.xp-balloon button {
  position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; padding: 0; cursor: pointer;
  border: 1px solid #a8a8a8; border-radius: 3px; background: #fff; font: 10px/1 Tahoma, sans-serif; color: #555;
}
@keyframes balloonIn { from { opacity: 0; transform: translateY(4px); } }

/* ---------- MSN toast ---------- */

.msn-toast {
  position: fixed; z-index: 24; right: 8px; bottom: calc(var(--taskbar) + 8px); width: 250px;
  display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0;
  border: 1px solid #5b8ac7; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #f2f8ff, #b9d4f2);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  font: 11px Tahoma, Verdana, sans-serif; color: #10233f;
  transform: translateY(140%); transition: transform .5s cubic-bezier(.2, .9, .3, 1.1);
}
.msn-toast.show { transform: none; }
.msn-toast:focus-visible { outline: 2px solid #ffab45; outline-offset: 2px; }
.msn-head {
  display: flex; justify-content: space-between; padding: 4px 8px;
  font-weight: 700; color: #2b5aa0; background: linear-gradient(180deg, #fff, #dce9f9);
}
.msn-x { color: #7a8fa8; }
.msn-x:hover { color: #c4130b; }
.msn-row { display: flex; gap: 10px; align-items: center; padding: 10px 10px 12px; }
.msn-buddy, .msn-dot {
  flex-shrink: 0; width: 26px; height: 30px;
  background:
    radial-gradient(circle at 50% 30%, #6fe35a 0 7px, transparent 7.5px),
    radial-gradient(ellipse 12px 9px at 50% 100%, #2fa82a 0 100%, transparent 100%);
}
.msn-text strong { display: block; font-size: 13px; }
.msn-text em { display: block; margin-top: 3px; color: #2b5aa0; text-decoration: underline; font-style: normal; }

/* ---------- MSN conversation window ---------- */

.xp-body.msn { display: flex; flex-direction: column; background: linear-gradient(180deg, #e6effb, #c9dbf3); }
.msn-bar { display: flex; gap: 2px; padding: 3px 6px; border-bottom: 1px solid #a7bfe0; }
.msn-bar .tb-btn { height: 26px; }
.msn-to { display: flex; align-items: center; gap: 6px; padding: 5px 10px; color: #333; }
.msn-dot { width: 16px; height: 18px; transform: scale(.8); }
.msn-np { margin: -2px 10px 6px; color: #2b5aa0; font-size: 11px; }
.msn-np em { font-style: italic; }
.msn-np-toast { display: block; margin-top: 2px; color: #5a6f8a; font-style: italic; }
.msn-log {
  flex: 1; min-height: 120px; overflow: auto; margin: 0 8px; padding: 8px 10px;
  background: #fff; border: 1px solid #7f9db9; font-size: 12px;
}
.msn-msg + .msn-msg { margin-top: 8px; }
.msn-who { display: block; color: #6b6b6b; }
.msn-said { display: block; padding-left: 12px; color: #000; }
.msn-msg.me .msn-said { color: #1d3f8a; }
.msn-mail { display: inline-flex; align-items: center; margin-top: 6px; text-decoration: none; }
.msn-replies { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; min-height: 31px; }
.msn-replies .xp-button { min-width: 0; }
.msn-compose { display: flex; gap: 6px; padding: 8px; }
.msn-compose textarea {
  flex: 1; resize: none; padding: 4px 6px; font: 12px Tahoma, Verdana, sans-serif;
  border: 1px solid #7f9db9; background: #fff; color: #000;
}
.msn-compose textarea:focus { outline: 1px solid #316ac5; }
.msn-compose .xp-button { height: auto; }
.msn-typing { color: #555; font-style: italic; }
.xp-window.nudge { animation: nudge .5s linear; }
@keyframes nudge {
  10%, 50%, 90% { translate: -6px 3px; }
  30%, 70% { translate: 6px -3px; }
}

/* Explorer: preview in the Details pane */
.det-thumb {
  display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: 8px;
  border: 1px solid #fff; box-shadow: 0 0 0 1px #9db3e6; background: #fff;
}

/* ---------- Konami: error storm ---------- */

.err-storm { position: fixed; inset: 0; z-index: 40; }
.err-win {
  position: absolute; width: 320px;
  padding: 0 3px 3px; border-radius: 8px 8px 0 0; background: #0831d9;
  box-shadow: 0 0 0 1px #0019b0, 4px 6px 14px rgba(0, 0, 0, .4);
  font: 11px Tahoma, Verdana, sans-serif; color: #000;
  animation: errIn .08s ease-out;
}
@keyframes errIn { from { transform: scale(.9); } }
.err-title {
  display: flex; justify-content: space-between; align-items: center;
  height: 26px; margin: 0 -3px; padding: 0 4px 0 8px; border-radius: 8px 8px 0 0;
  font: 700 12px "Trebuchet MS", Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 0 #0f1089;
  background: linear-gradient(180deg, #0997ff, #0053ee 10%, #0050ee 45%, #0066ff 90%, #003dd7);
}
.err-close {
  position: relative; width: 19px; height: 19px; border: 1px solid #fff; border-radius: 3px; cursor: pointer;
  background: radial-gradient(circle at 90% 90%, #cc4600, #dc6527 55%, #ffccb2);
}
.err-close::before, .err-close::after {
  content: ""; position: absolute; left: 3px; top: 7.5px; width: 11px; height: 2px; background: #fff;
}
.err-close::before { transform: rotate(45deg); }
.err-close::after { transform: rotate(-45deg); }
.err-body { display: flex; gap: 12px; align-items: center; padding: 14px 12px 8px; background: #ece9d8; }
.err-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 45%, #fff 45% 55%, transparent 55%) center / 18px 18px no-repeat,
    linear-gradient(-45deg, transparent 45%, #fff 45% 55%, transparent 55%) center / 18px 18px no-repeat,
    radial-gradient(circle at 40% 35%, #ff7b6b, #c4130b);
}
.err-actions { display: flex; justify-content: center; padding: 4px 0 12px; background: #ece9d8; }

@media (prefers-reduced-motion: reduce) {
  .boot-bar span, .xp-window.nudge, .err-win { animation: none; }
  .msn-toast { transition: none; }
  .xp-balloon { animation: none; }
}

/* Inactive windows: the faded XP title bar */
.xp-window.inactive { background: linear-gradient(90deg, #7a96df, #8aa5e8 3px, #7a96df 6px, #7a96df calc(100% - 6px), #8aa5e8 calc(100% - 3px), #7a96df); box-shadow: 0 0 0 1px #5e7cd0, 0 10px 30px rgba(0, 0, 0, .45); }
.xp-window.inactive .xp-title { background: linear-gradient(180deg, #a6c1f5 0%, #7b9ae3 10%, #7a96df 50%, #8aa6ea 90%, #6d8ad8 100%); box-shadow: none; }
.xp-window.inactive .xp-title h2 { color: #d8e4f8; text-shadow: none; }
.xp-window.inactive .xp-ctl { opacity: .7; }
.xp-window:focus { outline: none; }

/* Notepad */
.xp-body.notepad { background: #fff; border: 1px solid #7f9db9; margin: 0 0 0 0; }
.np-text {
  margin: 0; padding: 6px 8px; min-height: 100%;
  font: 13px/1.45 "Lucida Console", "Courier New", monospace; color: #000;
  white-space: pre-wrap; word-break: break-word; user-select: text; outline: none;
}
.np-text::selection { background: #316ac5; color: #fff; }

/* Document viewer (resume) */
.xp-body.viewer { display: flex; flex-direction: column; overflow: hidden; }
.viewer-page { flex: 1; min-height: 0; padding: 10px; background: #808080; }
.viewer-page iframe { width: 100%; height: 100%; border: 0; background: #fff; box-shadow: 2px 2px 8px rgba(0, 0, 0, .5); }
a.tb-btn { text-decoration: none; }

/* ---------- Taskbar ---------- */

.taskbar {
  position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: var(--taskbar);
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #3168d5 0%, #4993e6 3%, #2157d7 10%, #2663da 70%, #245cd0 94%, #1941a5 100%);
  border-top: 1px solid #0c1e7a; box-shadow: inset 0 1px 0 #6ea7f2;
  font: 11px Tahoma, "Segoe UI", Verdana, sans-serif; color: #fff;
}
.start-btn {
  display: flex; align-items: center; gap: 5px; padding: 0 20px 0 10px; margin-right: 8px; cursor: pointer;
  border: 0; border-radius: 0 10px 10px 0;
  background: radial-gradient(circle at 50% -40%, #6ed36b 0%, #3c9f3a 45%, #2b8f2a 60%, #378d34 100%);
  box-shadow: inset 0 1px 1px #9ae59a, inset -2px 0 3px rgba(0, 0, 0, .25), 2px 0 3px rgba(0, 0, 0, .3);
  font: italic 700 17px/1 "Trebuchet MS", Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
  text-transform: lowercase;
}
.start-btn:hover, .start-btn.open { filter: brightness(1.1); }
.start-btn.open { box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .45); }
.start-btn:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
.start-flag { display: grid; grid-template-columns: repeat(2, 7px); gap: 1px; transform: skewY(-8deg); }
.start-flag i { width: 7px; height: 6px; border-radius: 1px 2px 1px 2px; }
.start-flag i:nth-child(1) { background: #ff6a3d; } .start-flag i:nth-child(2) { background: #8fd14f; }
.start-flag i:nth-child(3) { background: #3fb6ff; } .start-flag i:nth-child(4) { background: #ffd23f; }

.tasks-strip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.task-btn {
  display: flex; align-items: center; gap: 6px; flex: 0 1 180px; min-width: 40px; height: 24px; padding: 0 8px; cursor: pointer;
  border: 1px solid #1a4bc7; border-radius: 3px; color: #fff; font: 11px Tahoma, Verdana, sans-serif; text-align: left;
  background: linear-gradient(180deg, #5b95f5, #3c80f4 20%, #3179f1 80%, #2e6de4);
  box-shadow: inset 0 1px 0 #7eb2ff;
}
.task-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-btn:hover { filter: brightness(1.08); }
.task-btn.active { background: linear-gradient(180deg, #1e4fbf, #1e52c4 80%, #1a4ab5); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .45); }
.task-btn:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }

.tray {
  display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px;
  background: linear-gradient(180deg, #0c59b9 0%, #139ee9 5%, #18b5f2 10%, #139beb 14%, #1290e8 19%,
    #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  border-left: 1px solid #1042af; box-shadow: inset 1px 0 1px #18bbff;
}
.tray-clock { white-space: nowrap; text-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.tray-counter { display: flex; align-items: center; gap: 5px; }
.tray-counter[hidden] { display: none; }
.tc-label { opacity: .9; }
.tc-digits {
  padding: 1px 4px; border-radius: 2px; background: #000; box-shadow: inset 0 0 0 1px #0a3a8a;
  font: 700 12px/1 "Courier New", monospace; letter-spacing: 1px; color: #ff3b2b; text-shadow: 0 0 4px #ff3b2b;
}

/* ---------- Start menu ---------- */

.start-menu {
  position: fixed; z-index: 26; left: 0; bottom: var(--taskbar); width: min(400px, 100vw);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #0831d9; border-radius: 8px 8px 0 0; background: #fff;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, .45);
  font: 11px Tahoma, "Segoe UI", Verdana, sans-serif; color: #000;
}
.start-menu[hidden] { display: none; }
.sm-top {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: linear-gradient(180deg, #1868ce 0%, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%, #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb 100%);
  font: 700 15px "Trebuchet MS", Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}
.sm-top img { width: 42px; height: 42px; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px #0f4aa8; object-fit: cover; }
.sm-cols { display: flex; border-top: 2px solid #e5891f; }
.sm-cols ul { list-style: none; padding: 6px 0; }
.sm-left { flex: 1; background: #fff; }
.sm-right { flex: 0 0 44%; background: #d3e5fa; border-left: 1px solid #95bdee; }
.sm-left button, .sm-right a, .sm-right button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; border: 0; background: none; cursor: pointer;
  font: 11px Tahoma, Verdana, sans-serif; color: #000; text-align: left; text-decoration: none;
}
.sm-right a, .sm-right button { color: #0a246a; font-weight: 700; }
.sm-left button span { display: flex; flex-direction: column; }
.sm-left small { color: #6b6b6b; }
.sm-left button:hover, .sm-left button:focus-visible, .sm-right a:hover, .sm-right a:focus-visible, .sm-right button:hover, .sm-right button:focus-visible { background: #316ac5; color: #fff; outline: none; }
.sm-left button:hover small, .sm-left button:focus-visible small { color: #dfe8ff; }
.sm-left button:disabled { opacity: .45; cursor: default; background: none; color: #000; }
.start-menu::after {
  content: ""; height: 12px; flex-shrink: 0;
  background: linear-gradient(180deg, #4282d6, #3786e4 30%, #2374df 60%, #1162d1);
}
.sm-sep { height: 1px; margin: 5px 10px; background: #95bdee; padding: 0 !important; }
/* Screensaver */
.screensaver { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; background: #000; cursor: none; }
.screensaver-logo { position: fixed; left: 0; top: 0; z-index: 71; pointer-events: none; transform-origin: center; }
.screensaver-logo[hidden] { display: none; }

/* Language switch in the tray */
.lang-toggle {
  padding: 1px 5px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .55); border-radius: 3px;
  background: rgba(0, 40, 140, .35); font: 700 10px Tahoma, Verdana, sans-serif; color: #fff; letter-spacing: .5px;
}
.lang-toggle:hover { background: rgba(255, 255, 255, .2); }
.lang-toggle:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }
body > .lang-toggle { position: fixed; top: 8px; right: 8px; z-index: 30; }

/* Sound toggle inside the tray */
.taskbar .sound-toggle {
  position: static; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 4px;
}
.taskbar .sound-toggle .sound-sep { display: none; }
.taskbar .sound-toggle svg { width: 16px; height: 16px; }

/* ---------- Desktop icons ---------- */

.desk-icons {
  position: fixed; z-index: 3; top: 18px; right: 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.desk-icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 4px 2px;
  border: 1px solid transparent; background: none; cursor: pointer;
  font: 12px Tahoma, "Segoe UI", Verdana, sans-serif; color: #fff; text-align: center;
}
.desk-icon i { display: block; width: 48px; height: 48px; filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, .35)); }
.desk-icon i svg { width: 100%; height: 100%; }
.desk-icon span { padding: 0 3px; text-shadow: 1px 1px 1px #000, 0 0 2px rgba(0, 0, 0, .6); line-height: 1.25; }
.desk-icon:hover span { text-decoration: underline; }
.desk-icon.selected i { filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, .35)) sepia(.3) hue-rotate(185deg) saturate(2) brightness(.8); }
.desk-icon.selected span { background: #316ac5; text-shadow: none; }
.desk-icon:focus-visible { outline: none; }
.desk-icon:focus-visible span { outline: 1px dotted #fff; }
/* Phones: the menu fills the screen; these live in the Start menu instead. */
@media (max-aspect-ratio: 9/10), (max-height: 480px) { .desk-icons { display: none; } }

/* Generic folders */
.files-wrap { flex: 1; min-width: 0; overflow: auto; background: #fff; display: flex; flex-direction: column; }
.files-wrap .files { flex: 1; overflow: visible; }
.files-group { margin: 10px 10px 0; padding-bottom: 3px; font: 700 11px Tahoma, sans-serif; color: #0046d5; border-bottom: 1px solid #99b4e8; }
button.tile { width: 100%; border: 1px solid transparent; background: none; cursor: default; font: 11px Tahoma, Verdana, sans-serif; text-align: left; }
.tile-ic { width: 48px; height: 48px; flex-shrink: 0; }
.tile-ic svg { width: 100%; height: 100%; }
button.tile.selected .tile-name { background: #316ac5; color: #fff; padding: 0 2px; margin: 0 -2px; align-self: flex-start; }
button.tile.selected .tile-ic { filter: sepia(.2) hue-rotate(185deg) saturate(1.6) brightness(.85); }
.new-badge { color: #e2620a; font-weight: 700; }
.files-empty { padding: 20px; color: #6b6b6b; font-style: italic; }

/* Small XP message box */
.xp-notice {
  position: fixed; left: 50%; top: 40%; translate: -50% -50%; width: 340px; pointer-events: auto;
  padding: 0 3px 3px; border-radius: 8px 8px 0 0; background: #0831d9;
  box-shadow: 0 0 0 1px #0019b0, 4px 6px 18px rgba(0, 0, 0, .45);
  font: 11px Tahoma, Verdana, sans-serif; color: #000;
}
.xp-notice .err-close { border: 1px solid #fff; padding: 0; }
.note-icon {
  flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font: italic 700 20px Georgia, serif; color: #fff; background: radial-gradient(circle at 35% 30%, #6fa8ff, #1a4fc4);
}

/* Phones / portrait: a header strip at the top shows the logo painted in the portrait
   background; the menu sits right under it and fills the rest of the screen. */
@media (max-aspect-ratio: 9/10) {
  :root {
    --hdr: 13vh;
    --u: min(calc((100vh - var(--taskbar) - var(--hdr) - 1.5vh) / 100), 1.7vw);
  }
  #stage { top: var(--hdr); }
  .msn-toast { width: 210px; right: 6px; }
  .msn-toast .msn-row { padding: 7px 8px 9px; }
  .xp-balloon { width: 210px; right: 8px; }
}
@media (max-width: 600px) {
  .taskbar .sound-label { display: none; }
  .task-btn { flex-basis: 44px; }
  .task-btn span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .module, .key { animation: none; transform: none; }
  .plate, .fill { transition: none; }
  .key.press .plate { animation: none; }
}