:root {
  --menu-h: 28px;
  --glass: rgba(255,255,255,0.22);
  --glass-border: rgba(255,255,255,0.4);
  --win-bg: #ececec;
  --win-border: rgba(0,0,0,0.22);
  --text: #fff;
  --ink: #1d1d1f;
  --accent: #2b7de9;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  background: #1a6fd6;
}

/* ---------- Desktop ---------- */
.desktop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(90,170,255,0.6), transparent 65%),
    radial-gradient(ellipse 60% 45% at 55% 40%, rgba(255,255,255,0.25), transparent 60%),
    linear-gradient(180deg, #1a6fd6 0%, #3a8fe8 45%, #0d4fb8 100%);
}
.desktop-layer { position: fixed; inset: var(--menu-h) 0 0 0; }

/* ---------- Menu bar ---------- */
.menubar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--menu-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  z-index: 9000;
}
.menubar .left, .menubar .right { display: flex; align-items: center; height: 100%; }
.menubar .right { gap: 16px; padding-right: 6px; }
.menu-root {
  position: relative; height: 100%;
  display: flex; align-items: center;
  padding: 0 10px; border-radius: 5px; cursor: default;
}
.menu-root.apple { font-size: 17px; padding: 0 12px; }
.menu-root.app { font-weight: 700; }
.menu-root.open { background: rgba(255,255,255,0.35); text-shadow: none; color: #111; }
.dropdown {
  position: absolute; top: calc(100% + 2px); left: 0;
  min-width: 220px; padding: 5px;
  background: rgba(240,240,240,0.92);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.5);
  color: #111; font-size: 13px; font-weight: 400; text-shadow: none;
  display: none;
}
.menu-root.open .dropdown { display: block; }
.dropdown .item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 22px 4px 10px; border-radius: 5px; white-space: nowrap;
}
.dropdown .item:hover { background: var(--accent); color: #fff; }
.dropdown .item.disabled { color: rgba(0,0,0,0.3); }
.dropdown .item.disabled:hover { background: none; color: rgba(0,0,0,0.3); }
.dropdown .item .key { opacity: 0.55; font-size: 12px; margin-left: 24px; }
.dropdown .item:hover .key { opacity: 0.9; }
.dropdown .sep { height: 1px; margin: 5px 10px; background: rgba(0,0,0,0.12); }

/* ---------- Desktop icons ---------- */
.icon {
  position: absolute; width: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; font-size: 12px; font-weight: 500; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  cursor: default; touch-action: none;
}
.icon .glyph {
  width: 62px; height: 62px; border-radius: 13px;
  display: grid; place-items: center; font-size: 32px;
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  pointer-events: none;
}
.icon .label { padding: 1px 6px; border-radius: 4px; pointer-events: none; }
.icon.selected .label { background: var(--accent); text-shadow: none; }
.icon.selected .glyph { background: rgba(255,255,255,0.4); }
.icon.dragging { opacity: 0.75; z-index: 500; }

/* ---------- Dock ---------- */
.dock-wrap {
  position: fixed; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; pointer-events: none; z-index: 8000;
}
.dock {
  pointer-events: auto;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 12px; border-radius: 22px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.dock .sep { width: 1px; height: 44px; background: rgba(255,255,255,0.45); margin: 0 4px 6px; }
.app-icon {
  position: relative; width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; font-size: 28px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform .15s ease, margin .15s ease;
  cursor: pointer; color: #fff;
}
.app-icon:hover { transform: translateY(-14px) scale(1.25); margin: 0 10px; }
.app-icon::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
  background: rgba(40,40,40,0.85); color: #fff; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.app-icon:hover::after { opacity: 1; }
.app-icon.running::before {
  content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,0.55);
}
.app-icon.drop-target { transform: translateY(-14px) scale(1.3); outline: 3px solid rgba(255,255,255,0.8); }
.app-icon.bounce { animation: bounce .5s ease 2; }
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-22px);} }

.finder  { background: linear-gradient(180deg,#5fb0ff,#1e72e8); }
.notes   { background: linear-gradient(180deg,#fff7c2,#f5d852); color:#5a4400; }
.safari  { background: linear-gradient(180deg,#6ec6ff,#1a7ae0); }
.mail    { background: linear-gradient(180deg,#8fd0ff,#2d8cf0); }
.spotify { background: #1db954; }
.photos  { background: conic-gradient(#f6c344,#f26d7d,#9b7bf5,#5bc0eb,#7ed957,#f6c344); }
.terminal{ background: #1d1d1f; color:#8ff28f; font-family: ui-monospace, Menlo, monospace; font-size: 18px; }
.trash   { background: linear-gradient(180deg,#e9eef5,#b8c2d0); color:#333; }
.settings{ background: linear-gradient(180deg,#9aa0a6,#5f6368); }

/* ---------- Windows ---------- */
.window {
  position: absolute; min-width: 320px; min-height: 180px;
  background: var(--win-bg); color: var(--ink);
  border-radius: 11px;
  border: 1px solid var(--win-border);
  box-shadow: 0 22px 70px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.3) inset;
  display: flex; flex-direction: column; overflow: hidden;
  font-size: 13px;
  transition: opacity .18s ease, transform .18s ease;
}
.window.inactive { box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.window.inactive .titlebar { color: rgba(0,0,0,0.4); }
.window.inactive .light { background: #d6d6d6 !important; }
.window.minimized { opacity: 0; transform: translateY(400px) scale(0.3); pointer-events: none; }
.window.maximized { border-radius: 0; }
.titlebar {
  height: 38px; flex: none;
  display: flex; align-items: center;
  padding: 0 12px;
  background: linear-gradient(180deg,#e8e8e8,#d6d6d6);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  font-weight: 600; font-size: 13px;
  cursor: default; position: relative;
}
.lights { display: flex; gap: 8px; position: relative; z-index: 1; }
.light {
  width: 12px; height: 12px; border-radius: 50%;
  border: 0.5px solid rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 0; cursor: default;
}
.light svg {
  width: 12px; height: 12px; display: block;
  fill: none; stroke: rgba(0,0,0,0.6); stroke-width: 1.3; stroke-linecap: round;
  opacity: 0; transition: opacity .1s;
}
.lights:hover .light svg { opacity: 1; }
.window.inactive .lights:hover .light svg { opacity: 0; }
.light.close { background: #ff5f57; }
.light.min { background: #febc2e; }
.light.max { background: #28c840; }
.titlebar .title {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
}
.titlebar .title .ticon { margin-right: 6px; }
.win-body { flex: 1; overflow: auto; background: #fff; display: flex; min-height: 0; }
.win-body.pad { padding: 16px; display: block; }
.resize-handle { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }

/* Finder-like layout */
.sidebar {
  width: 170px; flex: none; padding: 10px 8px;
  background: rgba(235,235,238,0.95); border-right: 1px solid rgba(0,0,0,0.1);
  font-size: 12px;
}
.sidebar h4 { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .04em; margin: 8px 8px 4px; }
.sidebar .s-item { padding: 5px 8px; border-radius: 6px; display: flex; gap: 8px; align-items: center; }
.sidebar .s-item.active, .sidebar .s-item:hover { background: rgba(0,0,0,0.08); }
.sidebar .s-item[data-view] { cursor: pointer; }
.main { flex: 1; padding: 14px; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, 92px); gap: 14px; }
.file {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 4px; border-radius: 8px; text-align: center; font-size: 12px;
}
.file:hover { background: rgba(0,0,0,0.06); }
.file { min-width: 0; }
.file .fname { max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.file .fglyph { font-size: 40px; }
.empty { color: #999; text-align: center; padding: 50px 20px; width: 100%; }
.toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px; background: #f5f5f7; border-bottom: 1px solid rgba(0,0,0,0.1);
}
.btn {
  padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.18);
  background: linear-gradient(180deg,#fff,#f0f0f0); font-size: 12px; cursor: pointer; color: var(--ink);
}
.btn:hover { background: linear-gradient(180deg,#fafafa,#e6e6e6); }
.btn.danger { color: #c0392b; }
.row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; }
.row:hover { background: rgba(0,0,0,0.05); }
.row .grow { flex: 1; }

/* Notes */
.notes-list { width: 190px; flex: none; background: #fbfbf6; border-right: 1px solid rgba(0,0,0,0.1); }
.note-item { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: default; }
.note-item.active { background: #fef3b4; }
.note-item b { display: block; font-size: 13px; }
.note-item span { font-size: 11px; color: #777; }
.note-body { flex: 1; padding: 20px 24px; background: #fffef7; line-height: 1.55; font-size: 14px; }
.note-body h2 { margin-bottom: 8px; }
.note-body { overflow-y: auto; min-height: 0; }
.note-sub { color: #777; margin-bottom: 10px; }
.note-body p + p { margin-top: 10px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.check {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 0; border: 0; background: none;
  font: inherit; color: #1d1d1f; text-align: left; cursor: pointer;
}
.check-dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #b8b8b8; background: #fff;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.check.on .check-dot { background: #f5b400; border-color: #f5b400; }
.check.on .check-dot::after {
  content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check.on .check-text { color: #9a9a9a; }
.note-link { margin-top: 10px; border: 0; background: none; padding: 4px 0; color: #c98d00; font: inherit; font-weight: 600; cursor: pointer; }
.check-reset { margin-top: 12px; border: 0; background: none; padding: 4px 0; color: #c98d00; font: inherit; font-size: 13px; cursor: pointer; }
body.mobile .check { padding: 10px 0; }

/* Spotify */
.spot { flex: 1; background: linear-gradient(180deg,#2a2a2a,#121212); color: #fff; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cover { width: 160px; height: 160px; border-radius: 10px; background: linear-gradient(135deg,#1db954,#0b5f2b); display: grid; place-items: center; font-size: 60px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.spot .controls { display: flex; gap: 22px; font-size: 22px; align-items: center; }
.bar { height: 4px; background: #444; border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 35%; background: #1db954; }

/* About */
.about { display: flex; gap: 24px; align-items: center; }
.about .avatar { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg,#5fb0ff,#1e72e8); display: grid; place-items: center; font-size: 48px; flex: none; }
.about h1 { font-size: 22px; font-weight: 700; }
.about p { margin: 3px 0; color: #444; }

/* Screens */
.screen-off {
  position: fixed; inset: 0; background: #000; z-index: 10000;
  display: none; place-items: center; color: #999; font-size: 14px;
}
.screen-off.on { display: grid; }

/* ---------- Image icons ---------- */
.icon .glyph.has-img { background: none; border: none; box-shadow: none; }
.icon .glyph.has-img img { width: 62px; height: 62px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.file .fglyph img, img.fglyph { width: 44px; height: 44px; border-radius: 10px; }
.row-icon img { width: 26px; height: 26px; border-radius: 6px; vertical-align: middle; }
.row-icon span { font-size: 22px; }
.app-icon img { width: 56px; height: 56px; border-radius: 14px; display: block; }
.app-icon.img { background: none; box-shadow: none; }

/* ---------- Safari ---------- */
.browser { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.urlbar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: #f0f0f2; border-bottom: 1px solid rgba(0,0,0,0.1);
}
.urlbar .nav {
  width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent;
  font-size: 18px; color: #444; cursor: pointer; display: grid; place-items: center; text-decoration: none;
}
.urlbar .nav:hover { background: rgba(0,0,0,0.07); }
.urlbar .nav:disabled { color: #bbb; cursor: default; background: none; }
.urlbar .url {
  flex: 1; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.12);
  background: #fff; padding: 0 12px; font-size: 13px; text-align: center; color: #333;
  font-family: inherit; outline: none; user-select: text;
}
.urlbar .url:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,125,233,0.2); text-align: left; }
.favbar { display: flex; gap: 14px; padding: 5px 14px; background: #f7f7f8; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 12px; }
.fav-chip { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 5px; cursor: default; }
.fav-chip:hover { background: rgba(0,0,0,0.07); }
.chip-icon { width: 16px; height: 16px; border-radius: 4px; }
.page { flex: 1; min-height: 0; position: relative; background: #fff; }
.page iframe { width: 100%; height: 100%; border: 0; display: block; }
.start { padding: 40px 48px; background: #f5f5f7; height: 100%; overflow: auto; }
.start h3 { font-size: 20px; margin-bottom: 18px; color: #333; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, 90px); gap: 22px; }
.fav { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: #333; cursor: default; }
.fav-icon { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
span.fav-icon { display: grid; place-items: center; background: #fff; font-size: 30px; }
.fav:hover .fav-icon { transform: translateY(-2px); }

/* ---------- Snake ---------- */
.snake-wrap { position: relative; flex: 1; display: flex; flex-direction: column; background: #0f380f; }
.snake-hud {
  display: flex; gap: 18px; align-items: center; padding: 10px 14px; height: 44px;
  background: #0f380f; color: #9bbc0f; font: 13px ui-monospace, Menlo, monospace;
}
.snake-hud b { color: #fff; }
.snake-hud .hint { margin-left: auto; opacity: 0.6; }
canvas.snake { display: block; }
.snake-overlay {
  position: absolute; left: 0; right: 0; top: 44px; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(15,56,15,0.75); color: #9bbc0f; font: 14px ui-monospace, Menlo, monospace; text-align: center;
}
.snake-overlay .big { font-size: 34px; font-weight: 800; letter-spacing: .12em; color: #fff; }

/* ---------- Title bar image icon ---------- */
.t-img { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- TextEdit (Keys) ---------- */
.textedit { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #e9e9e9; }
.te-ruler { padding: 6px 12px; font-size: 12px; color: #555; background: #f3f3f3; border-bottom: 1px solid rgba(0,0,0,0.1); }
.te-page {
  flex: 1; overflow: auto; background: #fff; padding: 28px 36px;
  font: 14px/1.6 Helvetica, Arial, sans-serif; color: #111; outline: none; user-select: text;
}
.te-page h3 { font-size: 15px; margin: 18px 0 6px; }
.te-page .mono { font: 12.5px/1.7 ui-monospace, Menlo, monospace; word-break: break-all; }
.te-page .warn { color: #c0392b; font-weight: 700; text-align: center; letter-spacing: .03em; }

/* ---------- Preview (Resume.pdf) ---------- */
.pdf { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #7f7f84; }
.pdf-bar {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 14px;
  font-size: 12px; color: #444; background: #f3f3f3; border-bottom: 1px solid rgba(0,0,0,0.15);
}
.pdf-pages { color: #888; }
.pdf-scroll { flex: 1; overflow: auto; padding: 22px 16px; }
.rs-page {
  background: #fff; max-width: 600px; margin: 0 auto; padding: 38px 46px 42px;
  box-shadow: 0 3px 16px rgba(0,0,0,0.45); border-radius: 2px;
  font: 13px/1.55 Helvetica, Arial, sans-serif; color: #222; user-select: text;
}
.rs-head { text-align: center; padding-bottom: 14px; border-bottom: 2px solid #222; }
.rs-head h1 { font-size: 26px; letter-spacing: 0.04em; margin: 0; }
.rs-sub { font-size: 13px; color: #555; margin-top: 3px; letter-spacing: 0.12em; text-transform: uppercase; }
.rs-contact { font-size: 12px; color: #777; margin-top: 6px; }
.rs-h {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: #333;
  margin: 22px 0 8px; padding-bottom: 3px; border-bottom: 1px solid #ccc;
}
.rs-job { margin-bottom: 13px; }
.rs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rs-role { font-weight: 700; }
.rs-dates { font-size: 12px; color: #777; white-space: nowrap; }
.rs-org { font-size: 12px; color: #666; font-style: italic; margin-top: 1px; }
.rs-job ul { margin: 5px 0 0 18px; padding: 0; }
.rs-job li { margin: 2px 0; color: #333; }
.rs-skills { color: #333; line-height: 1.8; }
body.mobile .pdf-scroll { padding: 12px 8px; }
body.mobile .rs-page { padding: 24px 20px 28px; }
body.mobile .rs-row { flex-direction: column; gap: 0; }

/* ---------- LimeWire ---------- */
.lw { flex: 1; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg,#eaf5e0,#d7ebc6); color: #183a12; font-size: 12px; }
.lw-top { display: flex; gap: 16px; align-items: center; padding: 16px 18px 10px; }
.lw-top img { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
.lw-now { flex: 1; min-width: 0; background: #0f2a0b; color: #9df07a; border-radius: 6px; padding: 10px 12px; font-family: ui-monospace, Menlo, monospace; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); }
.lw-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9ff9e; }
.lw-artist { opacity: 0.75; margin: 2px 0 8px; }
.lw-bar { height: 6px; background: #24451d; border-radius: 3px; overflow: hidden; cursor: pointer; }
.lw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#5fd33a,#c7f54b); transition: width .3s linear; }
.lw-times { display: flex; justify-content: space-between; font-size: 11px; margin-top: 4px; opacity: 0.8; }
.lw-controls { display: flex; justify-content: center; gap: 14px; padding: 4px 0 10px; }
.lw-controls button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid #3c8a25; cursor: pointer;
  background: linear-gradient(180deg,#f7fff0,#bfe5a8); font-size: 15px; color: #1b4a10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.lw-controls button.big { width: 46px; height: 46px; font-size: 18px; }
.lw-controls button:active { transform: translateY(1px); }
.lw-search { margin: 0 14px 6px; padding: 5px 10px; background: #fff; border: 1px solid #9cc985; border-radius: 4px; color: #666; }
.lw-search span { color: #222; }
.lw-list { margin: 0 14px 14px; border-collapse: collapse; background: #fff; border: 1px solid #9cc985; font-size: 12px; }
.lw-list th { text-align: left; padding: 5px 8px; background: linear-gradient(180deg,#f4fbef,#d8edc9); border-bottom: 1px solid #9cc985; font-weight: 600; }
.lw-list td { padding: 5px 8px; border-bottom: 1px solid #eef4ea; white-space: nowrap; }
.lw-list tr[data-i]:hover td { background: #f0f9e9; }
.lw-list tr.on td { background: #3c8a25; color: #fff; }

/* ---------- Minesweeper ---------- */
.ms { flex: 1; display: flex; flex-direction: column; align-items: center; background: #c0c0c0; font-family: Tahoma, Verdana, sans-serif; }
.ms-levels { width: 100%; display: flex; gap: 2px; align-items: center; padding: 4px 8px; background: #d4d0c8; border-bottom: 1px solid #808080; font-size: 12px; color: #000; }
.ms-lv { padding: 3px 8px; cursor: default; }
.ms-lv:hover { background: #fff; outline: 1px solid #808080; }
.ms-lv.on { font-weight: 700; }
.ms-best { margin-left: auto; color: #333; }
.ms-frame {
  margin: 10px 0; padding: 6px; background: #c0c0c0;
  border: 3px solid; border-color: #fff #808080 #808080 #fff;
}
.ms-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 5px; margin-bottom: 6px;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
.ms-led {
  width: 52px; padding: 1px 3px; background: #000; color: #ff1a1a; text-align: center;
  font: 700 24px/1 "Courier New", ui-monospace, monospace; letter-spacing: 1px;
  border: 1px solid; border-color: #808080 #fff #fff #808080;
}
.ms-face {
  width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer; background: #c0c0c0; padding: 0;
  border: 3px solid; border-color: #fff #808080 #808080 #fff;
}
.ms-face:active { border-color: #808080 #fff #fff #808080; }
.ms-board { display: grid; border: 3px solid; border-color: #808080 #fff #fff #808080; }
.ms-c {
  width: 24px; height: 24px; display: grid; place-items: center;
  background: #c0c0c0; font: 700 15px/1 Tahoma, Verdana, sans-serif; cursor: default;
  border: 3px solid; border-color: #fff #808080 #808080 #fff;
}
.ms-c.flag { font-size: 12px; }
.ms-c:not(.open):active { border: 1px solid #808080; border-width: 1px 0 0 1px; }
.ms-c.open { border: 0; border-right: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; }
.ms-c.mine { font-size: 13px; }
.ms-c.hit { background: #ff2a2a; }
.ms-c.wrong { font-size: 11px; }
.ms-c.n1 { color: #0000ff; } .ms-c.n2 { color: #008000; } .ms-c.n3 { color: #ff0000; } .ms-c.n4 { color: #000080; }
.ms-c.n5 { color: #800000; } .ms-c.n6 { color: #008080; } .ms-c.n7 { color: #000; }     .ms-c.n8 { color: #808080; }

/* ---------- Snake stage (desktop + phone) ---------- */
.snake-stage { position: relative; }
.snake-hud .storm { margin-left: auto; color: #ffd84d; font-weight: 700; }
.snake-hud .storm[hidden], .snake-hud .hint[hidden] { display: none; }
.snake-bonus {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; z-index: 2;
  font: 800 13px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #ffd84d;
  text-shadow: 0 0 2px #0f380f, 0 2px 0 #0f380f, 0 0 8px rgba(0,0,0,0.6);
  animation: snake-bonus 1s ease-out forwards;
}
@keyframes snake-bonus { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -190%); } }
.snake-stage .snake-overlay { top: 0; cursor: pointer; }

/* =========================================================
   Phone mode: body.mobile (set by desktop.js under 700px)
   The Mac desktop becomes an iPhone-style home screen.
   ========================================================= */
.m-clock, .home-bar, .ms-mode { display: none; }

body.mobile { --menu-h: 44px; }
body.mobile .menubar {
  padding: env(safe-area-inset-top) 22px 0; height: calc(var(--menu-h) + env(safe-area-inset-top));
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-size: 15px; font-weight: 600;
}
body.mobile .menubar .left, body.mobile .d-only { display: none; }
body.mobile .m-clock { display: block; }
body.mobile .menubar .right { gap: 8px; padding: 0; }
body.mobile.app-open .menubar { background: rgba(0,0,0,0.85); color: #fff; }

/* Home screen grid */
body.mobile .desktop-layer {
  top: calc(var(--menu-h) + env(safe-area-inset-top));
  display: grid; grid-template-columns: repeat(4, 1fr); align-content: start;
  row-gap: 22px; padding: 18px 14px 130px; overflow-y: auto;
}
body.mobile .icon { position: static; width: auto; font-size: 12px; }
body.mobile .icon .glyph, body.mobile .icon .glyph.has-img img { width: 62px; height: 62px; border-radius: 15px; }
body.mobile .icon .glyph { background: rgba(255,255,255,0.28); }
body.mobile .icon .label { max-width: 82px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; }
body.mobile .icon:active .glyph { transform: scale(0.92); filter: brightness(0.85); }
body.mobile .icon.selected .label { background: none; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

/* Dock: 4 apps, no hover magnify */
body.mobile .m-hide { display: none !important; }
body.mobile .dock-wrap { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 0 12px; }
body.mobile .dock { width: 100%; max-width: 380px; justify-content: space-around; border-radius: 30px; padding: 12px 14px; }
body.mobile .app-icon { width: 60px; height: 60px; border-radius: 15px; }
body.mobile .app-icon img { width: 60px; height: 60px; border-radius: 15px; }
body.mobile .app-icon:hover { transform: none; margin: 0; }
body.mobile .app-icon::after, body.mobile .app-icon.running::before { display: none; }
body.mobile .app-icon:active { transform: scale(0.92); }
body.mobile.app-open .dock-wrap, body.mobile.app-open .desktop-layer > .icon { visibility: hidden; }

/* Apps open full screen */
body.mobile .window {
  position: fixed;
  left: 0 !important; right: 0; width: 100% !important;
  top: calc(var(--menu-h) + env(safe-area-inset-top)) !important;
  height: calc(100% - var(--menu-h) - env(safe-area-inset-top) - 28px - env(safe-area-inset-bottom)) !important;
  min-width: 0; border-radius: 0; border: 0; box-shadow: none;
}
body.mobile .window.inactive { visibility: hidden; }
body.mobile .window.minimized { transform: translateY(100%) scale(0.6); }
body.mobile .light.max, body.mobile .resize-handle { display: none; }
body.mobile .titlebar { height: 44px; }
body.mobile .lights { gap: 12px; }
body.mobile .light { width: 16px; height: 16px; }
body.mobile .light svg { opacity: 1; width: 16px; height: 16px; }
body.mobile .light::before { content: ""; position: absolute; width: 40px; height: 40px; margin: -12px; } /* bigger tap area */
body.mobile .light { position: relative; }
body.mobile .titlebar .title { left: 90px; right: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 74px; }

/* Home indicator */
body.mobile.app-open .home-bar {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
  height: calc(28px + env(safe-area-inset-bottom)); background: #000; cursor: pointer;
}
body.mobile.app-open .home-bar::after {
  content: ""; position: absolute; left: 50%; top: 11px; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.85);
}

/* Finder, Notes, Safari, LimeWire on small screens */
body.mobile .sidebar { display: none; }
body.mobile .grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
body.mobile .notes-list { width: 120px; }
body.mobile .note-body { padding: 16px; }
body.mobile .urlbar .nav[data-nav="fwd"], body.mobile .urlbar .ext { display: none; }
body.mobile .urlbar .url { font-size: 16px; } /* 16px stops iOS zooming on focus */
body.mobile .lw { overflow-y: auto; }
body.mobile .lw-top img { width: 56px; height: 56px; }
body.mobile .lw-list { margin: 0 10px 14px; }
body.mobile .lw-list th:nth-child(1), body.mobile .lw-list td:nth-child(1),
body.mobile .lw-list th:nth-child(5), body.mobile .lw-list td:nth-child(5) { display: none; }
body.mobile .lw-list td { white-space: normal; }
body.mobile .te-page { padding: 18px; }
body.mobile .about { flex-direction: column; text-align: center; }

/* Snake on a phone: board scales to width, d-pad below */
body.mobile .snake-wrap { overflow-y: auto; touch-action: none; }
body.mobile .snake-hud { font-size: 12px; gap: 12px; }
body.mobile canvas.snake { width: 100%; height: auto; }
.snake-pad {
  display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 56px);
  gap: 8px; justify-content: center; padding: 16px 0 20px;
  grid-template-areas: ". up ." "left down right";
}
.snake-pad button {
  border: 0; border-radius: 14px; background: #306230; color: #9bbc0f; font-size: 22px;
  box-shadow: 0 3px 0 #0f380f; touch-action: manipulation;
}
.snake-pad button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0f380f; }
.snake-pad .up { grid-area: up; } .snake-pad .left { grid-area: left; }
.snake-pad .down { grid-area: down; } .snake-pad .right { grid-area: right; }

/* Minesweeper on a phone: board scrolls if wider than the screen */
body.mobile .ms { overflow: auto; align-items: stretch; }
body.mobile .ms-levels { font-size: 11px; flex-wrap: wrap; }
body.mobile .ms-lv { padding: 6px 7px; }
body.mobile .ms-frame { margin: 10px auto; max-width: calc(100% - 12px); overflow-x: auto; }
body.mobile .ms-board { width: max-content; touch-action: manipulation; }
body.mobile .ms-c { width: 30px !important; height: 30px; }
body.mobile .ms-mode {
  display: inline-block; margin-left: 6px; width: 34px; height: 30px; font-size: 16px;
  background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; padding: 0;
}
body.mobile .ms-mode.on { border-color: #808080 #fff #fff #808080; background: #ffd7d7; }

/* ---------- Cydia (iOS 4 era look) ---------- */
.cydia { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #c5ccd4; font-family: Helvetica, Arial, sans-serif; }
.cy-bar {
  height: 44px; flex: none; display: grid; place-items: center; color: #fff; font-size: 19px; font-weight: 700;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  background: linear-gradient(180deg, #a68c74 0%, #8a6d55 50%, #7b5e47 51%, #6e5340 100%);
  border-bottom: 1px solid #3e2c1f;
}
.cy-body { flex: 1; overflow-y: auto; padding: 10px 10px 16px; background: repeating-linear-gradient(90deg, #c5ccd4 0 6px, #cbd2d8 6px 8px); }
.cy-hero {
  display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 12px;
  background: #fff; border: 1px solid #a9abae; border-radius: 10px;
}
.cy-hero img { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.cy-hero h2 { font-size: 20px; color: #333; } .cy-hero p { color: #666; font-size: 13px; margin-top: 2px; }
.cy-group { font-size: 15px; font-weight: 700; color: #4c566c; text-shadow: 0 1px 0 #fff; margin: 12px 8px 6px; }
.cy-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #fff;
  border: 1px solid #a9abae; border-top-width: 0; color: #000;
}
.cy-group + .cy-row { border-top-width: 1px; border-radius: 10px 10px 0 0; }
.cy-row:last-child { border-radius: 0 0 10px 10px; }
.cy-group + .cy-row:last-child { border-radius: 10px; }
.cy-ic {
  width: 32px; height: 32px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: linear-gradient(180deg,#a68c74,#6e5340); color: #fff; font-weight: 700;
}
.cy-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cy-txt b { font-size: 15px; }
.cy-txt span { font-size: 12px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-btn {
  flex: none; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff;
  border: 1px solid #2f5a99; background: linear-gradient(180deg,#7fa6e0,#3a6fc4); text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.cy-btn.on { border-color: #8f2a2a; background: linear-gradient(180deg,#e78a8a,#c43a3a); }
.cy-btn:disabled { opacity: 0.7; }
.cy-search { padding: 4px 0 8px; }
.cy-search input { width: 100%; height: 32px; border-radius: 16px; border: 1px solid #8e939b; padding: 0 14px; font-size: 15px; outline: none; }
.cy-results .cy-row:first-child { border-top-width: 1px; border-radius: 10px 10px 0 0; }
.cy-tabs {
  flex: none; display: flex; height: 52px;
  background: linear-gradient(180deg, #3a3a3a 0%, #1f1f1f 50%, #0c0c0c 51%, #000 100%);
}
.cy-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 700; color: #999; cursor: default; margin: 3px 2px; border-radius: 4px;
}
.cy-tab span { font-size: 18px; filter: grayscale(1) brightness(1.4); }
.cy-tab.on { color: #fff; background: rgba(255,255,255,0.15); }
.cy-tab.on span { filter: none; }

/* ---------- Menu bar status menus ---------- */
.menubar .right { gap: 0; }
.menu-root.right-menu .dropdown { left: auto; right: 0; }
.dropdown .m-head { padding: 4px 10px 6px; font-weight: 700; }
.m-user { display: flex; gap: 10px; align-items: center; padding: 6px 10px; }
.m-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg,#5fb0ff,#1e72e8); }
.cal { padding: 6px 10px 4px; width: 240px; }
.cal-h { font-weight: 700; margin-bottom: 6px; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.cal-g b { color: #888; font-weight: 600; font-size: 11px; }
.cal-g span { padding: 4px 0; border-radius: 50%; }
.cal-g span.today { background: #ff3b30; color: #fff; font-weight: 700; }
.cal-e { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.05); font-size: 12px; }

/* ---------- Wallpapers ---------- */
body.wp-sunset .desktop, .wp-swatch.wp-sunset {
  background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255,220,150,0.6), transparent 60%),
              linear-gradient(180deg,#ff7e5f 0%,#feb47b 40%,#6a3093 100%); }
body.wp-graphite .desktop, .wp-swatch.wp-graphite {
  background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,255,255,0.25), transparent 60%),
              linear-gradient(180deg,#6b7280 0%,#374151 60%,#1f2937 100%); }
body.wp-night .desktop, .wp-swatch.wp-night {
  background: radial-gradient(ellipse 60% 40% at 75% 25%, rgba(120,90,255,0.45), transparent 60%),
              radial-gradient(ellipse 50% 40% at 20% 80%, rgba(0,180,255,0.3), transparent 60%),
              linear-gradient(180deg,#0b1026 0%,#141a3a 60%,#05060f 100%); }
body.wp-lime .desktop, .wp-swatch.wp-lime {
  background: radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,160,0.55), transparent 60%),
              linear-gradient(180deg,#8be04e 0%,#3aa13a 55%,#0f5a24 100%); }
.wp-swatch.wp-aqua {
  background: radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255,255,255,0.45), transparent 60%),
              linear-gradient(180deg,#1a6fd6 0%,#3a8fe8 45%,#0d4fb8 100%); }
body.no-magnify .app-icon:hover { transform: none; margin: 0; }
body.no-dock .dock-wrap { display: none; }

/* ---------- About This Mac ---------- */
.about-mac { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 22px 22px 14px; background: #f5f5f7; text-align: center; }
.am-avatar { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 50px; background: linear-gradient(135deg,#5fb0ff,#1e72e8); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.about-mac h1 { font-size: 22px; margin-top: 12px; }
.am-ver { color: #777; font-size: 12px; margin-bottom: 12px; }
.about-mac dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; text-align: left; width: 100%; }
.about-mac dt { text-align: right; font-weight: 600; color: #333; }
.about-mac dd { color: #555; }
.am-btns { display: flex; gap: 8px; margin: 14px 0 10px; }
.am-foot { font-size: 10px; color: #999; margin-top: auto; }
table.report { border-collapse: collapse; width: 100%; font-size: 13px; }
table.report th { text-align: left; padding: 6px 10px; width: 150px; color: #555; background: #f5f5f7; border-bottom: 1px solid #eee; }
table.report td { padding: 6px 10px; border-bottom: 1px solid #eee; }

/* ---------- System Settings ---------- */
.settings-main { overflow-y: auto; padding: 18px 22px; }
.settings-main h2 { font-size: 20px; margin-bottom: 12px; }
.set-card { background: #f5f5f7; border-radius: 10px; padding: 4px 6px; }
.set-card .row { border-bottom: 1px solid rgba(0,0,0,0.06); border-radius: 0; }
.set-card .row:last-child { border-bottom: 0; }
.set-note { color: #888; font-size: 12px; margin-top: 12px; }
.walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.wall { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 12px; cursor: default; }
.wp-swatch { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.wall.on .wp-swatch { outline: 3px solid var(--accent); outline-offset: 2px; }
.upd { display: flex; gap: 14px; align-items: center; padding: 16px; }
.upd-ic { font-size: 36px; }
.upd small { color: #888; }
.btn.primary { background: linear-gradient(180deg,#5aa0ff,#2b7de9); color: #fff; border-color: #2365c0; }
.btn:disabled { opacity: 0.5; }

/* ---------- Force Quit ---------- */
.fq { flex: 1; display: flex; flex-direction: column; padding: 14px 16px; background: #ececec; font-size: 12px; }
.fq-list { flex: 1; margin: 10px 0; background: #fff; border: 1px solid #c8c8c8; overflow-y: auto; }
.fq-row { padding: 5px 10px; cursor: default; }
.fq-row.on { background: var(--accent); color: #fff; }
.fq-tip { color: #888; font-size: 11px; }
.fq-btns { display: flex; justify-content: flex-end; margin-top: 10px; }
.desktop-layer.relaunch > .icon { animation: relaunch .9s ease; }
@keyframes relaunch { 0% { opacity: 1; } 30%, 60% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- System screens: sleep, lock, restart, shut down ---------- */
.sys-screen {
  position: fixed; inset: 0; z-index: 30000; opacity: 0; transition: opacity .6s ease;
  display: grid; place-items: center; color: #fff; cursor: default;
}
.sys-screen.in { opacity: 1; }
.sys-screen.black { background: #000; }
.sys-screen.off { cursor: none; }
/* After Shut Down: a power button in the middle of the black screen turns the computer back on. */
.power-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: power-in 1.2s ease both; }
@keyframes power-in { from { opacity: 0; transform: scale(0.9); } }
.power-btn {
  display: grid; place-items: center; width: 96px; height: 96px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #cfd6df; border: 1px solid rgba(255,255,255,0.14);
  background: radial-gradient(circle at 50% 30%, #3a3d42, #16181b 70%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.15), 0 0 0 0 rgba(120, 200, 255, 0.4);
  animation: power-glow 2.4s ease-in-out infinite; transition: color .2s, transform .1s;
}
@keyframes power-glow { 50% { box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.15), 0 0 0 10px rgba(120, 200, 255, 0); } }
.power-btn:hover, .power-btn:focus-visible { color: #fff; outline: none; }
.power-btn:hover svg, .power-btn:focus-visible svg { filter: drop-shadow(0 0 6px rgba(140, 210, 255, 0.9)); }
.power-btn:active { transform: scale(0.95); }
.power-btn:disabled { color: #7fd8ff; cursor: default; animation: none; }
.power-label { color: #6b7078; font-size: 13px; letter-spacing: 0.3px; }
@media (prefers-reduced-motion: reduce) { .power-btn, .power-wrap { animation: none; } }
.off-video { display: block; width: 3vw; aspect-ratio: 16 / 9; background: #000; opacity: 0; transition: opacity 1.5s ease; }
.off-video.on { opacity: 1; transition-duration: .3s; }
.off-video.on.done { opacity: 0; transition-duration: 1.5s; }
.sys-screen.off.tap-sound { cursor: pointer; }
.sys-screen.off.tap-sound::after { content: "🔇 Click for sound"; position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; color: #555; font-size: 12px; }
.sys-screen.lock {
  place-items: start center; grid-template-rows: auto auto 1fr; padding-top: 12vh;
  background: rgba(10,30,70,0.35);
  backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%);
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.lk-time { font-size: clamp(64px, 12vw, 110px); font-weight: 600; letter-spacing: -2px; line-height: 1; }
.lk-date { font-size: 20px; font-weight: 500; margin-top: 6px; opacity: .9; }
.lk-user { align-self: end; margin-bottom: 14vh; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; outline: none; }
.lk-ava {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 50px;
  background: linear-gradient(135deg,#5fb0ff,#1e72e8); box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  transition: transform .2s ease;
}
.lk-user:hover .lk-ava, .lk-user:focus .lk-ava { transform: scale(1.06); }
.lk-name { font-size: 18px; font-weight: 600; }
.lk-hint { font-size: 13px; opacity: .75; }
.lk-user.busy .lk-ava { animation: pulse 0.7s ease infinite; }
@keyframes pulse { 50% { transform: scale(0.94); } }
.boot { display: flex; flex-direction: column; align-items: center; gap: 48px; transition: opacity .5s; }
.boot.done { opacity: 0; }
.boot-logo svg { width: 76px !important; height: 92px !important; color: #fff; }
.boot-bar { width: 200px; height: 5px; border-radius: 3px; background: #333; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }

/* ---------- Dock: extra app tiles, minimized windows, right-click menu ---------- */
.snake-ic { background: linear-gradient(180deg,#9bbc0f,#306230); }
.textedit-ic { background: linear-gradient(180deg,#ffffff,#dfe3e8); }
.app-icon.img:has(img:is([src*="minesweeper"], [src*="/img/paint"])) img { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
.app-icon.min-tile { background: none; box-shadow: none; }
.mt-card {
  width: 56px; height: 44px; border-radius: 5px; background: #fff; overflow: hidden; position: relative;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.mt-bar { height: 8px; background: linear-gradient(180deg,#e8e8e8,#d6d6d6); }
.mt-ic {
  position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; font-size: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.mt-ic img { width: 26px; height: 26px; border-radius: 7px; }
.app-icon.poof { transform: translateY(-40px) scale(0.2) !important; opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.ctx-menu { display: block; position: fixed; top: auto; right: auto; z-index: 9500; min-width: 190px; }
.window.fq-shake { animation: fqshake .35s ease; }
@keyframes fqshake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Game sound toggle ---------- */
.sfx-btn { border: 0; background: transparent; font-size: 15px; padding: 2px 4px; cursor: pointer; line-height: 1; border-radius: 4px; }
.snake-hud .sfx-btn:hover { background: rgba(155,188,15,0.2); }
.ms-levels .sfx-btn { margin-left: 6px; }
.ms-levels .sfx-btn:hover { background: #fff; outline: 1px solid #808080; }

/* ---------- LimeWire: easier clicking ---------- */
.lw-list { width: calc(100% - 28px); }
.lw-list tr[data-i] { cursor: pointer; }
.lw-list tr[data-i] td { padding-top: 8px; padding-bottom: 8px; }
.lw-list tr.downloading td { background: #fff3a8; color: #6b4e00; font-style: italic; }
.lw-bar { height: 10px; border-radius: 5px; }

/* ---------- The "virus" ---------- */
.virus-layer { position: fixed; inset: 0; z-index: 25000; pointer-events: none; }
.virus-layer .vpop {
  position: fixed; background: #ececec; color: #1d1d1f; font-size: 13px;
  border: 1px solid rgba(0,0,0,0.22); border-radius: 11px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4); animation: vpop .14s ease-out;
}
@keyframes vpop { from { transform: scale(0.85); opacity: 0; } }
.vp-bar {
  position: relative; display: flex; align-items: center; height: 30px; padding: 0 10px;
  background: linear-gradient(180deg,#e8e8e8,#d6d6d6); border-bottom: 1px solid rgba(0,0,0,0.15);
}
.vp-bar { touch-action: none; }
.vp-bar .lights { position: relative; z-index: 1; }
.vp-bar .light { cursor: pointer; }
.vp-title { position: absolute; left: 70px; right: 70px; text-align: center; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-body { display: flex; gap: 12px; align-items: center; padding: 16px 16px 8px; line-height: 1.45; background: #f5f5f5; }
.vp-ic { font-size: 34px; }
.vp-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 14px 14px; background: #f5f5f5; }
.vp-btns button {
  min-width: 72px; padding: 4px 12px; font-size: 13px; cursor: pointer; border-radius: 6px;
  background: linear-gradient(180deg,#fff,#f0f0f0); border: 1px solid rgba(0,0,0,0.2); color: #1d1d1f;
}
.vp-btns button.primary { background: linear-gradient(180deg,#5aa0ff,#2b7de9); border-color: #2365c0; color: #fff; }
.sys-screen.panic { background: #000; }
.panic-box { max-width: 620px; margin: 0 24px; text-align: center; font-size: 14px; line-height: 1.55; color: #e6e6e6; }
.panic-ic { color: #fff; margin-bottom: 18px; display: flex; justify-content: center; }
.panic-box p { margin: 10px 0; }
.panic-box small { display: block; margin-top: 22px; color: #666; }
.virus-layer .vpop { pointer-events: auto; }
.virus-layer.shaky { animation: vshake .25s linear infinite; }
.virus-layer.glitch { animation: vglitch .12s steps(2) infinite; }
@keyframes vshake { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, 3px); } }
@keyframes vglitch {
  0% { filter: hue-rotate(0) invert(0); transform: translate(0, 0) skewX(0); }
  50% { filter: hue-rotate(160deg) invert(1) saturate(4); transform: translate(-12px, 6px) skewX(8deg); }
  100% { filter: hue-rotate(300deg) contrast(3); transform: translate(10px, -8px) skewX(-6deg); }
}

/* ---------- Terminal ---------- */
.term { flex: 1; overflow-y: auto; background: #1d1d1f; color: #e6e6e6; padding: 10px 12px; font: 13px/1.45 ui-monospace, Menlo, monospace; cursor: text; }
.term-out > div { white-space: pre-wrap; word-break: break-word; }
.term-out .dim { color: #8a8a8a; }
.term-out .ok { color: #8ff28f; }
.term-out .bad { color: #ff6b6b; font-weight: 700; }
.term-out .pre { white-space: pre; }
.term-ps { color: #8ff28f; margin-right: 6px; }
.term-line { display: flex; align-items: center; }
.term-in { flex: 1; background: transparent; border: 0; outline: none; color: #e6e6e6; font: inherit; caret-color: #8ff28f; padding: 0; }

/* ---------- Notifications ---------- */
.notif {
  position: fixed; top: calc(var(--menu-h) + 10px); right: 12px; z-index: 26000; width: 340px; max-width: calc(100vw - 24px);
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: rgba(245,245,247,0.88); color: #1d1d1f; font-size: 13px;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.6);
  transform: translateX(120%); transition: transform .4s cubic-bezier(.2,.9,.3,1.2);
}
.notif.in { transform: translateX(0); }
.nf-ic { font-size: 30px; flex: none; }
.nf-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.nf-txt small { color: #666; }

/* ---------- Force Quit: the virus row ---------- */
.fq-row.bad { color: #c0392b; font-weight: 600; }
.fq-row.bad.on { color: #fff; }
body.mobile .term-in { font-size: 16px; }

/* ---------- Stacking order: system UI always on top (like a real Mac) ----------
   windows: 100+ · dock, menu bar, menus, notifications, home bar: 2,000,000+
   virus pop-ups: 2,500,000 (above all of that) · system screens: 3,000,000 */
.menubar { z-index: 2000000; }
.dock-wrap { z-index: 1999000; }
.ctx-menu { z-index: 2001000; }
.notif { z-index: 2002000; }
body.mobile.app-open .home-bar { z-index: 2000500; }
.sys-screen { z-index: 3000000; }

/* ---------- Cydia: cursor packages ---------- */
.cy-ic-cur { background: linear-gradient(180deg,#5a7bb5,#2c4a80); font-size: 18px; }
.cy-ic-cur img { width: 26px; height: 26px; }
.cy-note { margin: 0 8px 6px; font-size: 12px; color: #6b6f78; }

/* ---------- Virus pop-ups sit above everything ----------
   Windows, AIM, the Dock, the menu bar, and notifications all go under them. Only system screens
   (the kernel panic, restart) and alerts like Safe Mode go above. */
.virus-layer { z-index: 2500000; }

/* ---------- Dock magnify: grow from the bottom (like macOS) ----------
   The old "move up + grow" pulled the icon out from under the mouse near its bottom edge,
   so hover flickered on and off. Growing from the bottom keeps the mouse inside the icon. */
.app-icon { transform-origin: 50% 100%; }
.app-icon:hover { transform: scale(1.3); }
.app-icon.drop-target { transform: scale(1.35); }
body.no-magnify .app-icon:hover, body.mobile .app-icon:hover { transform: none; }

/* ---------- AIM-inspired messenger ---------- */
.pingpal-ic { background: linear-gradient(#fffbe0, #efc43a); }
.pingpal-ic img { width: 70%; height: 80%; }
.icon .glyph.has-img img[src="/img/aim.svg"] { padding: 6px; background: linear-gradient(#fffbe0, #efc43a); }
/* The AIM content is always classic gray. The frame follows the theme:
   Mac windows by default, the classic gray Windows frame under the XP theme. */
.pingpal, .window[data-app="pingpal"] { background: #d4d0c8; color: #000; font: 12px Tahoma, Verdana, sans-serif; }
.pingpal {
  position: fixed; right: 14px; top: calc(var(--menu-h) + 14px); z-index: 1500000;
  width: 250px; height: min(530px, calc(100dvh - var(--menu-h) - 120px));
  display: none; flex-direction: column; overflow: hidden;
  border-radius: 11px; border: 1px solid var(--win-border); box-shadow: 0 22px 70px rgba(0,0,0,0.45);
}
body.pp-open .pingpal { display: flex; }
.pingpal.tall { height: calc(100dvh - var(--menu-h) - 110px); }
.pingpal.in-window { position: static; display: flex; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.pingpal.in-window .pp-top { display: none; }
.window[data-app="pingpal"] .ticon img { width: 16px; height: 18px; vertical-align: middle; }
/* Buddy List title bar, Mac style: traffic lights on the left, title centered */
.pp-top {
  display: flex; align-items: center; flex: none; height: 30px; padding: 0 62px 0 10px; gap: 6px;
  background: linear-gradient(180deg, #e8e8e8, #d6d6d6); border-bottom: 1px solid rgba(0,0,0,0.15); color: #1d1d1f;
}
.pp-top .lights { order: -1; gap: 8px; margin-right: auto; }
.pp-top .light { padding: 0; }
.pp-top .light.close { order: -1; }
.pp-title-icon { width: 15px; height: 18px; }
.pp-title { font: 600 13px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; margin-right: auto; }
/* XP theme: the classic gray Windows frame */
body.wb-xp .pingpal, body.wb-xp .window[data-app="pingpal"] {
  border: 2px solid; border-color: #fff #404040 #404040 #fff; border-radius: 0; box-shadow: 2px 3px 0 #0005, 0 12px 32px #0003;
}
body.wb-xp .pingpal { padding: 2px; }
body.wb-xp .pp-top, body.wb-xp .window[data-app="pingpal"] .titlebar {
  display: flex; align-items: center; flex: none; height: 25px; padding: 2px 3px; gap: 0;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; border: 0; text-shadow: none;
}
body.wb-xp .pp-title-icon { width: 17px; height: 20px; margin-right: 5px; }
body.wb-xp .pp-title { font: bold 12px Tahoma, Verdana, sans-serif; margin-right: 0; }
body.wb-xp .pp-top .lights, body.wb-xp .window[data-app="pingpal"] .lights { order: 2; margin-left: auto; margin-right: 0; gap: 2px; }
body.wb-xp .pp-top .light, body.wb-xp .window[data-app="pingpal"] .light {
  width: 18px; height: 18px; border: 2px solid; border-color: #fff #404040 #404040 #fff;
  border-radius: 0; background: #d4d0c8 !important; color: #000; cursor: pointer;
}
body.wb-xp .pp-top .light.close, body.wb-xp .window[data-app="pingpal"] .light.close { order: 3; }
body.wb-xp .pp-top .light svg, body.wb-xp .window[data-app="pingpal"] .light svg {
  opacity: 1 !important; width: 10px; height: 10px; stroke: #000; stroke-width: 1.8; stroke-linecap: square;
}
body.wb-xp .window[data-app="pingpal"] .titlebar .title {
  position: static; text-align: left; padding-left: 0; font: bold 12px Tahoma, sans-serif;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; order: 1;
}
body.wb-xp .window[data-app="pingpal"].inactive .titlebar { background: linear-gradient(90deg, #777, #aaa); color: #eee; }
.pp-menu { display: flex; gap: 2px; padding: 2px 0; flex: none; }
.pp-menu button, .pp-chat-bar button { padding: 3px 7px; border: 1px solid transparent; background: none; color: #000; font: inherit; cursor: pointer; }
.pp-menu button:hover, .pp-chat-bar button:hover { border-color: #fff #808080 #808080 #fff; }
.pp-brand { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 15px 8px; flex: none; background: #fff; border: 1px solid #808080; }
.pp-logo { width: 49px; height: 58px; }
.pp-brand b { display: block; font: bold italic 20px/1.02 Arial, sans-serif; letter-spacing: -1px; color: #161658; }
.pp-brand small { display: block; margin-top: 8px; font: 9px Arial, sans-serif; color: #666; }
.pp-me { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 5px; flex: none; }
.pp-me > b { font-size: 12px; }
.pp-status { margin-left: auto; border: 0; padding: 2px 0; background: none; font: 10px Tahoma, sans-serif; cursor: pointer; color: #222; }
.pp-status::before { content: '● '; color: #168000; }
.pp-status.away::before { color: #a56800; }
.pp-list-heading { align-self: flex-start; padding: 4px 14px; border: 1px solid; border-color: #fff #808080 transparent #fff; font-weight: bold; background: #eee; }
.pp-list { flex: 1; min-height: 55px; overflow-y: auto; background: #fff; padding: 6px 3px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.pp-group { padding: 5px 5px 3px; font-weight: bold; }
.pp-group::before { content: '⊟'; font: 13px monospace; margin-right: 6px; color: #555; }
.pp-pal { display: flex; align-items: center; gap: 5px; width: 100%; padding: 3px 5px 3px 25px; border: 0; background: transparent; color: #000; text-align: left; font: 12px Tahoma, sans-serif; cursor: default; }
.pp-pal:hover { background: #efefef; }
.pp-pal.off { color: #777; }
.pp-pal.sel { background: #000080; color: #fff; }
.pp-pal.unread .pp-sn { font-weight: bold; }
.pp-pal-ic { display: grid; place-items: center; width: 14px; height: 17px; }
.pp-pal-ic img { width: 13px; height: 16px; }
.pp-dot { margin-left: auto; width: 7px; height: 7px; background: #e5ab00; }
.pp-away-note { padding: 6px 3px; text-align: center; font: 10px Tahoma, sans-serif; color: #555; border-bottom: 1px solid #999; }
.pp-tools { display: flex; justify-content: space-around; padding: 4px; flex: none; border-top: 1px solid #fff; }
.pp-tools button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 55px; padding: 3px 6px; border: 1px solid transparent; background: none; color: #000; font: 11px Tahoma, sans-serif; cursor: pointer; }
.pp-tools button:hover { border-color: #fff #808080 #808080 #fff; }
.pp-tool-icon { font: bold 26px/1 Georgia, serif; color: #635000; text-shadow: 1px 1px #fff; }
.pp-footer { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid; border-color: #999 #fff #fff #999; font-size: 9px; }
.pp-connection { width: 6px; height: 6px; background: #168000; }
.pp-version { margin-left: auto; color: #666; }
.pp-fold-btn { position: fixed; right: 16px; bottom: 22px; z-index: 1500000; display: none; align-items: center; gap: 6px; padding: 4px 10px; border: 2px solid; border-color: #fff #404040 #404040 #fff; background: #d4d0c8; color: #000; font: 12px Tahoma, sans-serif; cursor: pointer; }
.pp-fold-btn img { width: 21px; height: 26px; }
body.pp-folded .pp-fold-btn { display: flex; }
.pp-badge { font-style: normal; padding: 2px 5px; background: #000080; color: #fff; }
body.mobile .pp-fold-btn, body.mobile .pingpal:not(.in-window) { display: none !important; }
.pp-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #d4d0c8; font: 12px Tahoma, sans-serif; color: #000; }
.pp-chat-bar { display: flex; align-items: center; padding: 2px; flex: none; }
.pp-chat-bar > span { margin-left: auto; padding-right: 6px; color: #666; font: 10px Arial, sans-serif; }
.pp-recipient { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid #fff; font-size: 11px; }
.pp-recipient > span { margin-left: auto; font-size: 10px; }
.pp-log { flex: 1; min-height: 60px; overflow-y: auto; overflow-wrap: anywhere; margin: 0 6px; padding: 8px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; font: 13px/1.5 Arial, sans-serif; user-select: text; }
.pp-msg b.me { color: #0000ff; }
.pp-msg b.them { color: #ff0000; }
.pp-message-text { white-space: pre-wrap; }
.pp-t { color: #777; font-size: 10px; }
.pp-sys { color: #666; font: 11px Arial, sans-serif; margin: 2px 0 8px; }
.pp-typing { height: 20px; flex: none; padding: 3px 9px; font-size: 10px; color: #555; }
.pp-fmt { display: flex; gap: 3px; align-items: center; margin: 0 6px; padding: 4px 0; border-top: 1px solid #999; }
.pp-font-name { min-width: 95px; padding: 3px 6px; background: #fff; border: 1px solid #888; margin-right: 6px; font-size: 11px; }
.pp-fmt button { width: 25px; height: 23px; border: 1px solid transparent; background: none; font: 14px Georgia, serif; cursor: pointer; color: #000; }
.pp-fmt button:hover { border-color: #fff #808080 #808080 #fff; }
.pp-fmt button[aria-pressed="true"] { border-color: #808080 #fff #fff #808080; background: #eee; }
.pp-fmt-divider { height: 18px; border-left: 1px solid #999; border-right: 1px solid #fff; margin: 0 4px; }
.pp-fmt .pp-smiley { color: #805d00; font: 23px/1 Arial; }
.pp-compose { display: flex; margin: 0 6px; }
.pp-in { width: 100%; min-width: 0; resize: none; border: 2px solid; border-color: #808080 #fff #fff #808080; padding: 6px; font: 13px Arial, sans-serif; background: #fff; color: #000; }
.pp-chat .bold { font-weight: bold; }
.pp-chat .italic { font-style: italic; }
.pp-chat .underline { text-decoration: underline; }
.pp-chat-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px; flex: none; }
.pp-chat-bottom > span { font-size: 9px; color: #555; }
.pp-send { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 85px; padding: 5px 12px; border: 2px solid; border-color: #fff #404040 #404040 #fff; background: #d4d0c8; color: #000; font: bold 12px Tahoma, sans-serif; cursor: pointer; }
.pp-send:active { border-color: #404040 #fff #fff #404040; }
.pingpal button:focus-visible, .pp-chat button:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.pp-in:focus-visible { outline: 1px solid #000080; outline-offset: -3px; }
.pp-ava { display: grid; place-items: center; background: #fff; border: 2px inset #ddd; }
.pp-ava.big { width: 64px; height: 64px; font-size: 38px; margin: 0 auto 8px; }
.pp-info { flex: 1; text-align: center; padding: 20px; background: #d4d0c8; font: 12px Tahoma, sans-serif; }
.pp-info h3 { font-size: 16px; margin-bottom: 4px; }
.pp-info p { color: #444; margin: 4px 0; }
.pp-info .q { font-style: italic; color: #000080; margin-top: 10px; }
body.mobile.wb-xp .window[data-app="pingpal"] .titlebar { height: 44px; }
body.mobile.wb-xp .window[data-app="pingpal"] .titlebar .title { padding: 0; }
body.mobile.wb-xp .window[data-app="pingpal"] .light { width: 27px; height: 27px; }
body.mobile .pp-in { font-size: 16px; }
body.mobile .pp-pal { padding-top: 9px; padding-bottom: 9px; }
body.mobile .pp-tools button { min-height: 44px; }

/* =========================================================
   Mail (classic Mac Mail look)
   ========================================================= */
.ml { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; font-size: 13px; }
.ml-bar { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: linear-gradient(180deg,#f4f4f6,#e2e2e6); border-bottom: 1px solid rgba(0,0,0,0.12); }
.ml-tb { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; font-size: 17px; cursor: pointer; }
.ml-tb span { font-size: 10px; color: #444; }
.ml-tb:hover:not(:disabled) { background: rgba(0,0,0,0.07); }
.ml-tb:disabled { opacity: 0.35; }
.ml-search { margin-left: auto; width: 180px; padding: 5px 10px; border-radius: 7px; background: #fff; border: 1px solid rgba(0,0,0,0.15); color: #999; font-size: 12px; }
.ml-main { flex: 1; display: flex; min-height: 0; }
.ml-boxes { width: 170px; flex: none; padding: 8px 6px; background: rgba(232,234,240,0.95); border-right: 1px solid rgba(0,0,0,0.1); overflow-y: auto; }
.ml-boxes h4 { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .04em; margin: 8px 8px 4px; }
.ml-box { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ml-box:hover { background: rgba(0,0,0,0.06); }
.ml-box.on { background: rgba(43,125,233,0.18); }
.ml-box b { margin-left: auto; font-size: 11px; color: #fff; background: #8e8e93; border-radius: 9px; padding: 0 6px; }
.ml-list { width: 260px; flex: none; overflow-y: auto; border-right: 1px solid rgba(0,0,0,0.1); }
.ml-item { padding: 9px 12px 9px 18px; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: default; position: relative; }
.ml-item.unread::before { content: ""; position: absolute; left: 6px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #2b7de9; }
.ml-item.on { background: #2b7de9; color: #fff; }
.ml-item.on .ml-item-top span { color: rgba(255,255,255,0.8); }
.ml-item-top { display: flex; justify-content: space-between; gap: 8px; }
.ml-item-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-item-top span { color: #888; font-size: 11px; flex: none; }
.ml-item-sub { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-read { flex: 1; min-width: 0; overflow-y: auto; }
.ml-head { display: flex; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.ml-head-ava { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg,#8e9aaf,#5d6b84); }
.ml-head span { color: #888; font-size: 12px; }
.ml-subj { font-size: 16px; font-weight: 700; margin-top: 3px; }
.ml-to { font-size: 11px; color: #888; margin-top: 2px; }
.ml-body { padding: 18px 20px; line-height: 1.6; user-select: text; }
.ml-body p { margin-bottom: 10px; }
.ml-body ul { padding-left: 20px; }
.ml-note { color: #888; font-style: italic; font-size: 12px; }

/* The contact card */
.ml-card {
  max-width: 420px; margin: 6px auto; padding: 26px 24px; text-align: center; border-radius: 16px; color: #fff;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.35), transparent 55%), linear-gradient(160deg,#3a8fe8,#1d57b8 60%,#6a3093);
  box-shadow: 0 12px 30px rgba(29,87,184,0.35);
}
.ml-card-ava { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.6); }
.ml-card h2 { font-size: 21px; margin-bottom: 6px; }
.ml-card p { opacity: .92; margin-bottom: 14px; }
.ml-addr { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 16px; padding: 8px 10px 8px 14px; width: fit-content; max-width: 100%;
  border-radius: 10px; background: rgba(0,0,0,0.25); font: 600 15px ui-monospace, Menlo, monospace; user-select: text; }
.ml-addr span { overflow: hidden; text-overflow: ellipsis; }
.ml-card-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ml-card .btn { text-decoration: none; display: inline-block; }

/* Compose */
.mlc { flex: 1; display: flex; flex-direction: column; background: #fff; }
.mlc-bar { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: linear-gradient(180deg,#f4f4f6,#e2e2e6); border-bottom: 1px solid rgba(0,0,0,0.12); }
.mlc-hint { font-size: 11px; color: #888; }
.mlc-row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; }
.mlc-row span { width: 60px; color: #888; text-align: right; }
.mlc-row input { flex: 1; border: 0; outline: none; font: 13px -apple-system, sans-serif; padding: 4px 0; }
.mlc-text { flex: 1; border: 0; outline: none; resize: none; padding: 14px; font: 14px/1.5 -apple-system, sans-serif; }

/* Phones: stack the list above the message */
body.mobile .ml-boxes, body.mobile .ml-search { display: none; }
body.mobile .ml-main { flex-direction: column; overflow-y: auto; }
body.mobile .ml-list { width: auto; max-height: 38%; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.1); flex: none; }
body.mobile .ml-read { overflow: visible; }
body.mobile .mlc-row input, body.mobile .mlc-text { font-size: 16px; }

/* ---------- Virus: video pop-ups ---------- */
.vp-video { position: relative; background: #000; cursor: pointer; }
.vp-video video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vp-mute { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; }

/* ---------- Virus: cheat-code buttons (phones) ---------- */
.vp-pad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 4px 14px 2px; background: #f5f5f5; }
.vp-pad button { height: 38px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.2); background: linear-gradient(180deg,#fff,#e8e8e8); font: 700 16px -apple-system, sans-serif; touch-action: manipulation; }
.vp-pad button.hit { background: #2b7de9; color: #fff; }
.vp-video { cursor: default; }

/* ---------- Billy's photo as his avatar ---------- */
.me-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.am-avatar, .lk-ava, .m-ava, .ml-card-ava, .ml-head-ava { overflow: hidden; padding: 0; }
.ml-card-ava .me-photo { border-radius: 50%; }

/* ---------- Minesweeper and Paint icons: no box, just the mine or the palette ---------- */
.icon .glyph.has-img img:is([src*="minesweeper"], [src*="/img/paint"]) { box-shadow: none; border-radius: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); }
body.mobile .icon .glyph.has-img img:is([src*="minesweeper"], [src*="/img/paint"]) { border-radius: 0; }
:is(.app-icon.img, .mt-ic, .file) img:is([src*="minesweeper"], [src*="/img/paint"]) { border-radius: 0; box-shadow: none; }

/* =========================================================
   Stocks (dark, like the Mac Stocks app)
   ========================================================= */
.stocks-ic { background: linear-gradient(180deg,#2b2b2e,#0d0d0f); }
.st { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, sans-serif; }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 8px; }
.st-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.st-head span { color: #8e8e93; font-size: 13px; font-weight: 600; }
.st-list { flex: 1; overflow-y: auto; padding: 0 18px; }
.st-group { color: #8e8e93; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 14px 0 4px; }
.st-row { display: grid; grid-template-columns: 1fr auto 86px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #1c1c1e; }
.st-sym { display: flex; flex-direction: column; min-width: 0; }
.st-sym b { font-size: 17px; }
.st-sym span { color: #8e8e93; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.st-pill { border: 0; border-radius: 6px; padding: 5px 0; font: 600 14px -apple-system, sans-serif; color: #fff; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }
.st-pill.up { background: #30d158; }
.st-pill.down { background: #ff453a; }
.st-pill.flat { background: #3a3a3c; }
.st .empty { color: #8e8e93; }
.st-foot { padding: 10px 18px 14px; color: #636366; font-size: 11px; border-top: 1px solid #1c1c1e; }

/* ---------- Mail icon: the stamp shape, no box ---------- */
.app-icon.img img[src*="/img/mail.png"], .mt-ic img[src*="/img/mail.png"] { border-radius: 0; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
.mt-ic:has(img[src*="/img/mail.png"]) { box-shadow: none; }
#dock .app-icon.img img[src*="/img/mail.png"] { transform: scale(1.12); }

/* ---------- Cydia: navigation, Billy's Repo, project pages ---------- */
.cy-bar { position: relative; }
.cy-back {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  padding: 5px 10px 5px 8px; border-radius: 6px; font: 700 12px Helvetica, Arial, sans-serif; color: #fff;
  border: 1px solid #3e2c1f; background: linear-gradient(180deg, #9a7f67, #6e5340); text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); cursor: pointer;
}
.cy-link { cursor: pointer; }
.cy-link:active { background: #e8eef7; }
.cy-chev { flex: none; color: #9a9ea6; font-size: 24px; line-height: 1; padding-right: 2px; }
.cy-btn { cursor: pointer; }
.cy-btn.cy-open { margin-right: -4px; }
.cy-ic.cy-ic-img { background: none; overflow: hidden; }
.cy-ic.cy-ic-img img { width: 32px; height: 32px; object-fit: cover; border-radius: 7px; }
.cy-dep-head { display: flex; gap: 14px; align-items: center; padding: 4px 4px 12px; }
.cy-dep-head img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.cy-dep-head h2 { font-size: 21px; color: #222; }
.cy-dep-head span { font-size: 13px; color: #5f6672; }
.cy-big-btn {
  width: 100%; padding: 10px; border-radius: 9px; font: 700 15px Helvetica, Arial, sans-serif; color: #fff; cursor: pointer;
  border: 1px solid #2f5a99; background: linear-gradient(180deg, #7fa6e0, #3a6fc4); text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.cy-card { background: #fff; border: 1px solid #a9abae; border-radius: 10px; padding: 10px 12px; color: #222; font-size: 13px; line-height: 1.5; }
.cy-card p + p { margin-top: 8px; }
.cy-details > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.cy-details > div + div { border-top: 1px solid #e3e5e8; }
.cy-details span { color: #6b6f78; }
.cy-details b { text-align: right; }

/* ---------- Safari: offline page ---------- */
.offline { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; background: #f5f5f7; color: #555; }
.offline h2 { font-size: 22px; color: #333; }
.offline-hint { font-size: 12px; color: #888; }
.menu-root.net-off { opacity: 0.4; }

/* ---------- SBSettings tray ---------- */
.sbs {
  position: fixed; top: var(--menu-h); left: 50%; transform: translateX(-50%); z-index: 1999500;
  width: min(440px, calc(100vw - 16px)); display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.sbs-handle {
  pointer-events: auto; cursor: pointer; padding: 2px 14px 4px; border: 0; border-radius: 0 0 10px 10px;
  font: 700 10px/1.4 Helvetica, Arial, sans-serif; letter-spacing: .04em; color: #ddd;
  background: rgba(20,20,22,0.78); box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.sbs-handle::after { content: " ▾"; }
.sbs-tray {
  position: absolute; top: 0; left: 0; right: 0; pointer-events: auto;
  padding: 12px 14px 14px; border-radius: 0 0 18px 18px; color: #fff;
  background: linear-gradient(180deg, rgba(42,42,46,0.96), rgba(18,18,20,0.96));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12); border-top: 0;
  transform: translateY(-110%); visibility: hidden;
  transition: transform .3s cubic-bezier(.2,.9,.3,1), visibility 0s linear .3s;
}
.sbs.open .sbs-tray { transform: translateY(0); visibility: visible; transition: transform .3s cubic-bezier(.2,.9,.3,1); }
.sbs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-family: Helvetica, Arial, sans-serif; }
.sbs-head b { font-size: 15px; }
.sbs-head span { font-size: 12px; color: #aaa; }
.sbs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 12px 6px; }
.sbs-t { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; color: #ccc; cursor: pointer; font: inherit; }
.sbs-c {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: radial-gradient(circle at 50% 30%, #4a4a50, #1c1c1f 70%); border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(0,0,0,0.5);
  filter: grayscale(1) brightness(0.75); transition: filter .15s, background .15s, box-shadow .15s;
}
.sbs-t.on .sbs-c {
  filter: none; background: radial-gradient(circle at 50% 30%, #8df08d, #2fa82f 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 12px rgba(80,230,80,0.55);
}
.sbs-t small { font: 600 11px Helvetica, Arial, sans-serif; }
.sbs-t.on small { color: #fff; }
.sbs-bright { display: flex; align-items: center; gap: 10px; margin: 14px 2px 12px; font-size: 16px; }
.sbs-bright input { flex: 1; accent-color: #4cd964; }
.sbs-btns { display: flex; gap: 8px; }
.sbs-btns button {
  flex: 1; padding: 8px; border-radius: 8px; cursor: pointer; font: 700 13px Helvetica, Arial, sans-serif; color: #fff;
  border: 1px solid #000; background: linear-gradient(180deg, #55555b, #2a2a2e); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.sbs-btns .sbs-respring { background: linear-gradient(180deg, #ff8a5c, #d9381e); }
.sbs-dim { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 2900000; transition: opacity .1s; }
/* Phones: the tab sits in the middle of the status bar, and the tray slides over it. */
body.mobile .sbs { top: 0; z-index: 2000100; }
body.mobile .sbs-handle { margin-top: calc(env(safe-area-inset-top) + 12px); border-radius: 10px; font-size: 0; padding: 2px 12px 3px; }
body.mobile .sbs-handle::after { content: "SBS ▾"; font-size: 10px; }
body.mobile .sbs-tray { padding-top: calc(env(safe-area-inset-top) + 14px); }

/* ---------- Respring ---------- */
.sys-screen.respring { background: #000; transition-duration: .35s; }
.sp-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18); border-top-color: #fff; animation: sp-spin .8s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
.desktop-layer.respring-in > .icon { animation: respring-in .6s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes respring-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* ---------- Safe Mode ---------- */
.safe-tag {
  height: 20px !important; margin: auto 6px; padding: 0 8px; border-radius: 4px; cursor: pointer;
  background: #ffcc33; color: #3b2a00; font-weight: 700; text-shadow: none;
}
.ios-alert-wrap { position: fixed; inset: 0; z-index: 2800000; display: grid; place-items: center; background: rgba(0,0,0,0.35); }
.ios-alert {
  width: min(310px, calc(100vw - 32px)); padding: 16px 14px 12px; border-radius: 12px; text-align: center; color: #fff;
  font-family: Helvetica, Arial, sans-serif; border: 2px solid rgba(255,255,255,0.85);
  background: linear-gradient(180deg, rgba(92,112,160,0.96) 0%, rgba(42,62,110,0.96) 45%, rgba(20,36,82,0.96) 100%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.55); text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
.ios-alert b { font-size: 17px; }
.ios-alert p { font-size: 14px; line-height: 1.4; margin: 8px 0 14px; }
.ios-alert-btns { display: flex; gap: 8px; }
.ios-alert-btns button {
  flex: 1; padding: 9px 6px; border-radius: 6px; cursor: pointer; font: 700 14px Helvetica, Arial, sans-serif; color: #fff; white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.5); background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 51%);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
.ios-alert-btns button[data-x="exit"] { background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 51%); }

/* ---------- WinterBoard window ---------- */
.wb-ic { background: linear-gradient(180deg, #8fb7ff, #3b5fd9); }
.wb { flex: 1; display: flex; flex-direction: column; min-width: 0; font-family: Helvetica, Arial, sans-serif; }
.wb-bar {
  height: 44px; flex: none; display: grid; place-items: center; color: #fff; font-size: 19px; font-weight: 700;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5); border-bottom: 1px solid #2d3642;
  background: linear-gradient(180deg, #b0bccd 0%, #889bb3 50%, #8195af 51%, #6d84a2 100%);
}
.wb-body { flex: 1; overflow-y: auto; padding: 12px 12px 16px; background: repeating-linear-gradient(90deg, #c5ccd4 0 6px, #cbd2d8 6px 8px); }
.wb-group { font-size: 15px; font-weight: 700; color: #4c566c; text-shadow: 0 1px 0 #fff; margin: 0 6px 6px; }
.wb-list { background: #fff; border: 1px solid #a9abae; border-radius: 10px; overflow: hidden; }
.wb-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: #000; }
.wb-row + .wb-row { border-top: 1px solid #d9dbde; }
.wb-row:active { background: #e8eef7; }
.wb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wb-txt b { font-size: 15px; }
.wb-txt small { font-size: 12px; color: #777; }
.wb-check { width: 18px; flex: none; color: #324f85; font-size: 18px; font-weight: 700; }
.wb-swatch { width: 40px; height: 40px; flex: none; border-radius: 9px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.wb-sw-xp {
  background:
    radial-gradient(ellipse 120% 55% at 30% 112%, #5aa52c 0 58%, transparent 59%),
    linear-gradient(180deg, #2160d6, #a9cdf3 70%);
}
.wb-sw-hacker { background: repeating-linear-gradient(0deg, rgba(0,255,70,0.25) 0 1px, transparent 1px 4px), #020a04; }
.wb-note { font-size: 12px; color: #5f6672; text-align: center; margin: 12px 8px; text-shadow: 0 1px 0 #fff; }
.wb-apply {
  width: 100%; padding: 11px; border-radius: 9px; cursor: pointer; font: 700 15px Helvetica, Arial, sans-serif; color: #fff;
  border: 1px solid #8f2a2a; background: linear-gradient(180deg, #ff8a5c, #d9381e); text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

/* ---------- WinterBoard theme: Windows XP ---------- */
body.wb-xp { font-family: Tahoma, "Trebuchet MS", Verdana, sans-serif; --accent: #316ac5; }
/* The XP theme's wallpaper (also selectable in System Settings while the theme is on) */
body.wp-hills .desktop, .wp-swatch.wp-hills {
  background:
    radial-gradient(ellipse 22% 7% at 24% 20%, rgba(255,255,255,0.8), transparent 70%),
    radial-gradient(ellipse 18% 6% at 70% 13%, rgba(255,255,255,0.65), transparent 70%),
    radial-gradient(ellipse 120% 55% at 30% 112%, #5aa52c 0 58%, transparent 59%),
    radial-gradient(ellipse 90% 45% at 96% 108%, #47901f 0 58%, transparent 59%),
    linear-gradient(180deg, #2160d6 0%, #4f8fe6 35%, #a9cdf3 62%, #d7e8f8 72%);
}
body.wb-xp .menubar {
  background: linear-gradient(180deg, #3168d5 0%, #4993e6 8%, #2157d7 40%, #2663e0 88%, #1941a5 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
body.wb-xp .menu-root.apple {
  margin-left: -8px; padding: 0 18px 0 12px; border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #3c9a3c 0%, #5cb85c 10%, #2f8a2f 60%, #1f6d1f 100%);
  font: italic 700 15px "Trebuchet MS", Tahoma, sans-serif; box-shadow: 2px 0 4px rgba(0,0,0,0.35);
}
body.wb-xp .menu-root.apple.open { background: linear-gradient(180deg, #1f6d1f 0%, #2f8a2f 40%, #3c9a3c 100%); color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }
body.wb-xp .menu-root.apple > svg { display: none !important; }
body.wb-xp .menu-root.apple::before { content: "start"; }
body.wb-xp .menu-root.apple .dropdown { font: 400 13px Tahoma, Verdana, sans-serif; padding: 0 0 4px; min-width: 250px; overflow: hidden; }
body.wb-xp .dropdown .item { font-style: normal; }
.xp-start-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px;
  background: linear-gradient(180deg, #1868ce, #0e60cb 15%, #0e60cb 80%, #1a4fa3); color: #fff;
  font: 700 14px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  border-bottom: 2px solid #e08a2c;
}
.xp-start-head img { width: 36px; height: 36px; object-fit: cover; border: 2px solid #fff; border-radius: 3px; }
body.wb-xp .menu-root.open { background: rgba(255,255,255,0.25); color: #fff; }
body.wb-xp .menubar .right {
  height: 100%; margin-right: -8px; padding: 0 10px; border-left: 1px solid #092e7d;
  background: linear-gradient(180deg, #0c59b9 0%, #139ee9 10%, #18b9ff 14%, #139ee9 45%, #0c59b9 100%);
}
body.wb-xp .dropdown { background: #fff; border: 1px solid #aca899; border-radius: 0; box-shadow: 2px 2px 4px rgba(0,0,0,0.4); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.wb-xp .dropdown .item { border-radius: 0; }
body.wb-xp .window { border-radius: 8px 8px 0 0; border: 3px solid #0831d9; border-top: 0; background: #ece9d8; }
body.wb-xp .window.inactive { border-color: #7a96df; }
body.wb-xp .titlebar {
  height: 30px; border-bottom: 0; color: #fff; font: 700 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px #0f1089;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 10%, #0050ee 45%, #0066ff 85%, #003dd7 100%);
}
body.wb-xp .window.inactive .titlebar { color: #d8e0f6; background: linear-gradient(180deg, #7a96df, #9db1e8 40%, #94a7e0); }
body.wb-xp .titlebar .title { text-align: left; padding-left: 12px; }
body.wb-xp .lights { margin-left: auto; gap: 2px; }
body.wb-xp .light { width: 21px; height: 21px; border-radius: 3px; border: 1px solid #fff; background: linear-gradient(180deg, #3c8cf8, #1758d8); }
body.wb-xp .light.close { order: 3; background: linear-gradient(180deg, #e9805e, #c4401c); }
body.wb-xp .window.inactive .light { background: linear-gradient(180deg, #8fa8e6, #6d8ad8) !important; }
body.wb-xp .light svg { opacity: 1 !important; width: 13px; height: 13px; stroke: #fff; stroke-width: 1.8; }
body.wb-xp .dock { border-radius: 6px; border: 1px solid #0c2f8f; background: linear-gradient(180deg, #3168d5, #2157d7 40%, #1941a5); }
body.wb-xp .icon { font-family: Tahoma, Verdana, sans-serif; font-size: 11px; text-shadow: 1px 1px 2px #000; }
body.wb-xp .icon .glyph:not(.has-img) { background: none; border: 0; box-shadow: none; font-size: 42px; }
body.wb-xp .icon.selected .label { background: #316ac5; }

/* ---------- WinterBoard theme: Hacker ---------- */
body.wb-hacker { font-family: ui-monospace, Menlo, Consolas, monospace; --accent: #00c853; }
/* The Hacker theme's wallpaper */
body.wp-mainframe .desktop, .wp-swatch.wp-mainframe {
  background:
    repeating-linear-gradient(0deg, rgba(0,255,70,0.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(0,255,90,0.16), transparent 70%),
    #020a04;
  overflow: hidden;
}
body.wp-mainframe .desktop::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0,255,90,0.07) 50%, transparent);
  animation: hk-scan 6s linear infinite;
}
@keyframes hk-scan { from { transform: translateY(-100%); } to { transform: translateY(350%); } }
body.wb-hacker .menubar { background: rgba(0,0,0,0.92); color: #33ff66; text-shadow: 0 0 6px rgba(51,255,102,0.7); border-bottom: 1px solid #11ff55; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.wb-hacker .menu-root.open { background: #0b3; color: #000; text-shadow: none; }
body.wb-hacker .dropdown { background: #000; color: #33ff66; border: 1px solid #11ff55; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.wb-hacker .dropdown .item.disabled { color: #1a7a33; }
body.wb-hacker .dropdown .item:hover { background: #0b3; color: #000; }
body.wb-hacker .window { background: #000; border: 1px solid #11ff66; border-radius: 4px; box-shadow: 0 0 24px rgba(0,255,90,0.35); }
body.wb-hacker .titlebar { background: #000; color: #33ff66; border-bottom: 1px solid #11ff66; font-family: inherit; text-shadow: 0 0 6px rgba(51,255,102,0.7); }
body.wb-hacker .window.inactive .titlebar { color: #1a7a33; }
body.wb-hacker .light { background: transparent !important; border: 1px solid #33ff66; }
body.wb-hacker .light svg { stroke: #33ff66; }
/* Window contents: flip light apps to dark (dark apps and photos stay as they are),
   then tint everything phosphor green like an old monitor. */
body.wb-hacker .win-body { filter: invert(1) grayscale(1) contrast(1.15); }
body.wb-hacker .window:is([data-app="snake"], [data-app="terminal"], [data-app="stocks"], [data-app="photos"], [data-app="quicktime"]) .win-body { filter: grayscale(1) contrast(1.15); }
body.wb-hacker .window::after {
  content: ""; position: absolute; left: 0; right: 0; top: 38px; bottom: 0;
  background: #2bff6a; mix-blend-mode: multiply; pointer-events: none;
}
body.wb-hacker .pingpal, body.wb-hacker .icon .glyph, body.wb-hacker .app-icon { filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(4); }
body.wb-hacker .icon { color: #33ff66; text-shadow: 0 0 6px rgba(51,255,102,0.8); }
body.wb-hacker .icon .glyph:not(.has-img) { background: rgba(0,30,10,0.6); border-color: #11ff55; }
body.wb-hacker .dock { background: rgba(0,0,0,0.85); border: 1px solid #11ff55; box-shadow: 0 0 18px rgba(0,255,90,0.35); }
body.wb-hacker .notif { background: #000; color: #33ff66; border: 1px solid #11ff55; }

/* ---------- Windows XP theme: the menu bar becomes a taskbar at the bottom (computers only) ---------- */
body.wb-xp:not(.mobile) { --menu-h: 0px; }
body.wb-xp:not(.mobile) .menubar { top: auto; bottom: 0; height: 32px; padding: 0 0 0 8px; justify-content: flex-start; border-top: 1px solid #0c2f8f; }
body.wb-xp:not(.mobile) .menubar .left .menu-root:not(.apple) { display: none; }
body.wb-xp:not(.mobile) .menubar .right { margin-left: auto; }
body.wb-xp:not(.mobile) .desktop-layer { bottom: 32px; }
body.wb-xp:not(.mobile) .dock-wrap { display: none; }
body.wb-xp:not(.mobile) .dropdown { top: auto; bottom: calc(100% + 2px); }
body.wb-xp:not(.mobile) .notif { top: auto; bottom: 44px; }
body.wb-xp:not(.mobile) .pp-fold-btn { bottom: 44px; }
/* Quick Launch: the dock, shrunk into the taskbar */
body.wb-xp .menubar .dock {
  height: 100%; padding: 0 8px; gap: 5px; align-items: center; border-radius: 0;
  background: none; border: 0; border-right: 1px solid rgba(0,0,0,0.3); box-shadow: 1px 0 0 rgba(255,255,255,0.2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.wb-xp.no-dock .menubar .dock { display: none; }
body.wb-xp .menubar .app-icon { width: 22px; height: 22px; border-radius: 4px; font-size: 13px; box-shadow: none; }
body.wb-xp .menubar .app-icon img { width: 22px; height: 22px; border-radius: 4px; }
body.wb-xp .menubar .app-icon:hover { transform: none; margin: 0; filter: brightness(1.25); }
body.wb-xp .menubar .app-icon::before, body.wb-xp .menubar .dock .sep, body.wb-xp .menubar .min-tile { display: none; }
body.wb-xp .menubar .app-icon::after { bottom: calc(100% + 10px); font: 11px Tahoma, sans-serif; background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; }
/* A button for each open window */
.xp-tasks { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 3px; padding: 0 6px; overflow: hidden; }
.xp-task {
  flex: 0 1 165px; min-width: 0; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  border: 1px solid #1941a5; border-radius: 3px; cursor: pointer; color: #fff; text-shadow: none; font: 11px Tahoma, Verdana, sans-serif;
  background: linear-gradient(180deg, #3c81f3, #2a6ce8 40%, #1f5ad8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.xp-task:hover { filter: brightness(1.1); }
.xp-task.on { background: linear-gradient(180deg, #1a4aa8, #1e52b7); box-shadow: inset 1px 1px 3px rgba(0,0,0,0.55); }
.xp-task-ic { flex: none; display: flex; align-items: center; font-size: 13px; }
.xp-task-ic img { width: 16px; height: 16px; }
.xp-task-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

/* ---------- Photos ---------- */
.ph { flex: 1; min-width: 0; position: relative; display: flex; background: #fff; }
.ph-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
.ph-month { font-size: 20px; font-weight: 700; color: #1d1d1f; margin: 6px 2px 10px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 3px; margin-bottom: 18px; }
.ph-cell { aspect-ratio: 1; padding: 0; border: 0; background: #e5e5ea; cursor: pointer; overflow: hidden; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.ph-cell:hover img { transform: scale(1.04); }
.ph-count { text-align: center; color: #8e8e93; font-size: 12px; margin-top: 4px; }
.ph-empty { flex: 1; display: grid; place-items: center; color: #8e8e93; font-size: 14px; }
.ph-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: #111; color: #fff; z-index: 1; }
.ph-view-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #1c1c1e; font-size: 13px; }
.ph-back { border: 0; background: none; color: #0a84ff; font: inherit; font-size: 14px; cursor: pointer; padding: 2px 4px; }
.ph-date { flex: 1; text-align: center; font-weight: 600; }
.ph-pos { color: #98989d; min-width: 60px; text-align: right; }
.ph-stage { flex: 1; min-height: 0; position: relative; }
.ph-stage img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; display: block; }
.ph-cell.pixel img, .ph-stage img.pixel { image-rendering: pixelated; }
.ph-nav {
  z-index: 1;
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.ph-nav:hover { background: rgba(255,255,255,0.28); }
.ph-nav.prev { left: 12px; } .ph-nav.next { right: 12px; }
.ph-nav[hidden] { display: none; }
body.mobile .ph-scroll { padding: 10px 6px 16px; }
body.mobile .ph-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }

/* ---------- Screensaver ---------- */
.saver { position: fixed; inset: 0; z-index: 2950000; background: #000; cursor: none; overflow: hidden; animation: saver-in .6s ease; }
@keyframes saver-in { from { opacity: 0; } to { opacity: 1; } }
body.saver-on #bv-cursor, body.saver-on .fx-trail { display: none !important; }
.saver-logo {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 14px;
  font-family: "Arial Black", Impact, Helvetica, sans-serif; line-height: 1; will-change: transform; transition: color .15s;
}
.saver-logo b { font-size: 64px; font-style: italic; letter-spacing: -2px; transform: skewX(-8deg); }
.saver-logo i {
  margin-top: 4px; padding: 3px 22px; border-radius: 50%; font: 900 15px/1.2 Helvetica, Arial, sans-serif; letter-spacing: 8px;
  background: currentColor; -webkit-text-fill-color: #000; font-style: normal;
}
.saver-corner {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%) scale(0.6); opacity: 0; white-space: nowrap;
  font: 900 34px Helvetica, Arial, sans-serif; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,0.6);
}
.saver-corner.show { animation: saver-corner 2.6s ease forwards; }
@keyframes saver-corner { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 15% { opacity: 1; transform: translateX(-50%) scale(1.1); } 75% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }

/* ---------- Guestbook preview (GeoCities style, shown inside Safari) ---------- */
.gb {
  height: 100%; overflow-y: auto; padding: 0 0 24px; color: #fff; text-align: center;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  background:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 70px 90px, #ffe680, transparent),
    radial-gradient(1.5px 1.5px at 130px 50px, #fff, transparent), radial-gradient(1px 1px at 160px 140px, #9fd7ff, transparent),
    #0b0b3b;
  background-size: 180px 180px;
}
.gb-preview { position: sticky; top: 0; z-index: 1; padding: 6px; font: 600 12px -apple-system, Helvetica, sans-serif; color: #3b2a00; background: #ffcc33; }
.gb-title {
  margin: 18px 10px 6px; font: 900 34px "Comic Sans MS", cursive;
  background: linear-gradient(90deg, #ff4d4d, #ffb84d, #fff04d, #5dff4d, #4dc3ff, #b84dff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 2px 0 #000);
}
.gb-marquee { overflow: hidden; white-space: nowrap; margin: 4px auto 12px; max-width: 640px; color: #fff04d; font-weight: 700; }
.gb-marquee span { display: inline-block; padding-left: 100%; animation: gb-marquee 14s linear infinite; }
@keyframes gb-marquee { to { transform: translateX(-100%); } }
.gb-counter { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; margin-bottom: 12px; }
.gb-digits { display: inline-flex; gap: 2px; padding: 3px; background: #222; border: 2px inset #888; }
.gb-digits span { width: 16px; padding: 2px 0; background: #000; color: #39ff14; font: 700 18px/1 "Courier New", monospace; text-shadow: 0 0 6px #39ff14; }
.gb-construction {
  max-width: 640px; margin: 0 auto 16px; padding: 6px; color: #000; font-weight: 700; font-size: 13px;
  background: repeating-linear-gradient(45deg, #ffd400 0 14px, #111 14px 28px); text-shadow: 0 0 3px #ffd400, 0 0 3px #ffd400, 0 0 3px #ffd400;
}
.gb-form, .gb-entry { max-width: 560px; margin: 0 auto 14px; padding: 12px 16px; text-align: left; color: #000; background: #c0c0c0; border: 3px outset #eee; }
.gb-form h2 { font-size: 18px; color: #000080; margin-bottom: 8px; }
.gb-form label { display: block; margin-bottom: 8px; font: 13px Tahoma, Verdana, sans-serif; }
.gb-form input, .gb-form select, .gb-form textarea { display: block; width: 100%; margin-top: 3px; padding: 3px 5px; border: 2px inset #eee; font: 13px Tahoma, Verdana, sans-serif; background: #fff; color: #000; }
.gb-smileys { display: flex; gap: 4px; margin-bottom: 10px; }
.gb-smileys button, .gb-actions button { padding: 3px 10px; border: 2px outset #eee; background: #d4d0c8; font: 12px Tahoma, sans-serif; color: #000; cursor: pointer; }
.gb-smileys button:active, .gb-actions button:active { border-style: inset; }
.gb-actions { display: flex; gap: 8px; }
.gb-actions .gb-sign { font-weight: 700; }
.gb-h { margin: 18px 0 10px; font-size: 20px; color: #fff04d; }
.gb-entry-head { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #808080; padding-bottom: 4px; margin-bottom: 4px; }
.gb-entry-head b { color: #000080; font-size: 15px; }
.gb-entry-head span, .gb-via { font: 11px Tahoma, Verdana, sans-serif; color: #444; }
.gb-entry p { margin-top: 6px; font-size: 14px; }
.gb-entry.gb-new { animation: gb-new .6s ease; outline: 2px solid #fff04d; }
@keyframes gb-new { from { transform: scale(0.95); opacity: 0; } }
.gb-foot { margin-top: 18px; font-size: 12px; color: #9fd7ff; }

/* ---------- Solitaire ---------- */
.sol { flex: 1; display: flex; flex-direction: column; min-width: 0; user-select: none; font-family: Tahoma, Verdana, sans-serif; }
.sol-bar, .sol-status { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #ece9d8; color: #000; font-size: 12px; }
.sol-bar { border-bottom: 1px solid #aca899; }
.sol-status { justify-content: space-between; border-top: 1px solid #aca899; }
.sol-bar button { padding: 3px 12px; border: 1px solid #8a8a8a; border-radius: 3px; background: linear-gradient(#fff, #e3e3e3); font: 12px Tahoma, sans-serif; color: #000; cursor: pointer; }
.sol-bar button:disabled { color: #999; cursor: default; }
.sol-tip { margin-left: auto; color: #666; }
.sol-board {
  flex: 1; position: relative; overflow: hidden; touch-action: none;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, #14984d, #0a6b2e 70%, #06501f);
}
.sol-slot {
  position: absolute; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * 0.08);
  border: 2px solid rgba(255,255,255,0.28); display: grid; place-items: center;
  color: rgba(255,255,255,0.28); font: 700 calc(var(--cw) * 0.34) Georgia, serif;
}
.sol-slot[data-loc="stock"] { cursor: pointer; }
.card {
  position: absolute; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * 0.08);
  font-size: calc(var(--cw) * 0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.45); cursor: pointer;
}
.card.up { background: #fff; border: 1px solid #8a8a8a; color: #111; }
.card.red { color: #d0021b; }
.card.down {
  border: calc(var(--cw) * 0.055) solid #fff; outline: 1px solid #777; outline-offset: -1px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.2) 0 1.5px, transparent 1.5px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.2) 0 1.5px, transparent 1.5px 6px),
    linear-gradient(135deg, #2f66d8, #163c9a);
}
.c-tl, .c-br { position: absolute; font: 700 1em/1.05 Georgia, "Times New Roman", serif; text-align: center; }
.c-tl { left: 0.22em; top: 0.22em; }
.c-br { right: 0.22em; bottom: 0.22em; transform: rotate(180deg); }
.c-mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5em; line-height: 1; }
.c-mid.c-court { font: 700 2.2em Georgia, serif; }
.c-mid.c-court small { font-size: 0.55em; margin-left: 0.05em; }
.card.dragging { box-shadow: 0 10px 22px rgba(0,0,0,0.45); cursor: grabbing; }
.card.nope { animation: sol-nope .3s ease; }
@keyframes sol-nope { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
.sol-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2000; cursor: pointer; }
.sol-won {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2001;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 26px;
  background: #ece9d8; color: #000; border: 2px outset #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.5); font: 13px Tahoma, sans-serif;
}
.sol-won b { font-size: 20px; }
.sol-won button { padding: 4px 16px; border: 1px solid #8a8a8a; border-radius: 3px; background: linear-gradient(#fff, #e3e3e3); font: 12px Tahoma, sans-serif; cursor: pointer; }
body.mobile .sol-tip { display: none; }

/* ---------- Restart under the XP theme: boot screen, then the welcome screen ---------- */
.xpboot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; background: #000; color: #fff; }
.xpboot-logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; font-family: "Franklin Gothic Medium", "Trebuchet MS", Tahoma, sans-serif; }
.xpboot-logo small { font: 700 16px Arial, Helvetica, sans-serif; margin: 0 0 2px 4px; letter-spacing: .02em; }
.xpboot-logo b { font-size: 68px; font-weight: 700; letter-spacing: -1px; }
.xpboot-logo sup { font-size: 0.42em; vertical-align: super; }
.xpboot-logo b sup { color: #ff6c00; font-style: italic; margin-left: 4px; }
.xpboot-bar { position: relative; width: 156px; height: 20px; padding: 2px; border: 2px solid #b8b8b8; border-radius: 4px; overflow: hidden; }
.xpboot-bar span {
  position: absolute; top: 2px; bottom: 2px; left: -40px; width: 34px;
  background: linear-gradient(180deg, #8eaaf7, #2a4bd0 55%, #1a35a8);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px); mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px);
  animation: xpboot-slide 2.2s linear infinite;
}
@keyframes xpboot-slide { to { left: 160px; } }
.xpboot-foot { position: absolute; left: 32px; right: 32px; bottom: 24px; display: flex; justify-content: space-between; font: 13px Arial, Helvetica, sans-serif; color: #fff; }
.xpboot-foot sup { font-size: 0.7em; }
.xp-welcome {
  position: absolute; inset: 0; animation: xp-welcome-in .6s ease;
  background: radial-gradient(ellipse 55% 45% at 22% 32%, rgba(255,255,255,0.38), transparent 62%), #5a7edc;
}
.xp-welcome::before, .xp-welcome::after { content: ""; position: absolute; left: 0; right: 0; height: 13%; background: #00309c; }
.xp-welcome::before { top: 0; border-bottom: 2px solid #9db8f2; }
.xp-welcome::after { bottom: 0; border-top: 2px solid #f39c4b; }
.xp-welcome i {
  position: absolute; right: 22%; top: 42%; color: #fff; font: italic 700 64px "Franklin Gothic Medium", "Trebuchet MS", Tahoma, sans-serif;
  text-shadow: 3px 3px 5px rgba(0,0,60,0.45);
}
@keyframes xp-welcome-in { from { opacity: 0; } }

/* ---------- XP theme: virus pop-ups look like XP message boxes ---------- */
body.wb-xp .virus-layer .vpop {
  border-radius: 8px 8px 0 0; border: 3px solid #0831d9; border-top: 0; background: #ece9d8; color: #000;
  font: 12px Tahoma, Verdana, sans-serif; box-shadow: 2px 4px 14px rgba(0,0,0,0.45);
}
body.wb-xp .vp-bar {
  height: 30px; padding: 0 3px 0 8px; border-bottom: 0; color: #fff;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 10%, #0050ee 45%, #0066ff 85%, #003dd7 100%);
}
body.wb-xp .vp-title {
  position: static; order: 1; flex: 1; min-width: 0; text-align: left;
  font: 700 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px #0f1089;
}
body.wb-xp .vp-bar .lights { order: 2; }
body.wb-xp .vp-bar .light.min, body.wb-xp .vp-bar .light.max { display: none; }   /* message boxes only have a close button */
body.wb-xp .vp-body, body.wb-xp .vp-btns, body.wb-xp .vp-pad { background: #ece9d8; }
body.wb-xp .vp-body { padding: 16px 18px 10px; }
body.wb-xp .vp-btns { justify-content: center; padding: 6px 14px 14px; }
body.wb-xp .vp-btns button {
  min-width: 75px; padding: 4px 10px; border-radius: 3px; border: 1px solid #003c74; color: #000;
  font: 12px Tahoma, Verdana, sans-serif; background: linear-gradient(180deg, #fff, #ece9d8 86%, #d6d0c5);
}
body.wb-xp .vp-btns button:hover { box-shadow: inset 0 0 0 2px #f8b636; }
body.wb-xp .vp-btns button.primary { box-shadow: inset 0 0 0 2px #6c9bea; }
body.wb-xp .vp-btns button.primary:hover { box-shadow: inset 0 0 0 2px #f8b636; }

/* ---------- Missions: achievement pop-up (Xbox 360 style) ---------- */
.ach {
  position: fixed; left: 50%; bottom: 110px; z-index: 3100000; transform: translate(-50%, 40px); opacity: 0;
  display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; min-width: 300px; cursor: pointer;
  border-radius: 40px; color: #fff; background: linear-gradient(180deg, #4a4f57, #24272c 55%, #1b1d21);
  border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
}
.ach.in { transform: translate(-50%, 0); opacity: 1; }
.ach-ic {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(circle at 35% 30%, #9cf06a, #3d9e1c 70%); box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 0 0 2px rgba(255,255,255,0.25);
}
.ach-txt { display: flex; flex-direction: column; line-height: 1.25; font-family: "Segoe UI", -apple-system, Helvetica, sans-serif; }
.ach-txt small { font-size: 12px; color: #c8c8c8; }
.ach-txt b { font-size: 15px; }
body.wb-xp:not(.mobile) .ach { bottom: 60px; }
body.mobile .ach { bottom: calc(120px + env(safe-area-inset-bottom)); min-width: 0; width: calc(100vw - 32px); }

/* ---------- Missions window ---------- */
.msn { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #f4f4f6; }
.msn-head { flex: none; padding: 14px 16px 12px; background: #fff; border-bottom: 1px solid #e2e2e6; }
.msn-count { font-size: 13px; color: #555; margin-bottom: 8px; }
.msn-count b { font-size: 18px; color: #1d1d1f; }
.msn-bar { height: 10px; border-radius: 5px; background: #e4e4e8; overflow: hidden; }
.msn-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #5bd12f, #2fa84f); transition: width .5s ease; }
.msn-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.msn-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #e8e8ec; }
.msn-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: #e4e4e8; filter: grayscale(1); opacity: 0.55; }
.msn-row.done .msn-ic { filter: none; opacity: 1; background: radial-gradient(circle at 35% 30%, #c8f7a8, #6fd13f 75%); }
.msn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msn-txt b { font-size: 13px; color: #8a8a8e; }
.msn-row.done .msn-txt b { color: #1d1d1f; }
.msn-txt span { font-size: 12px; color: #8a8a8e; }
.msn-row.done .msn-txt span { color: #2fa84f; }
.msn-check { width: 22px; flex: none; color: #2fa84f; font-size: 18px; font-weight: 700; text-align: center; }

/* ---------- XP theme: the hills at night (SBSettings' Night under the XP theme) ---------- */
body.wp-hills-night .desktop, .wp-swatch.wp-hills-night {
  background:
    radial-gradient(circle at 80% 17%, #fffbe8 0 30px, rgba(255, 246, 200, 0.35) 34px, rgba(255, 246, 200, 0.08) 70px, transparent 120px),
    radial-gradient(ellipse 120% 55% at 30% 112%, #24521a 0 58%, transparent 59%),
    radial-gradient(ellipse 90% 45% at 96% 108%, #1a4313 0 58%, transparent 59%),
    radial-gradient(1.5px 1.5px at 30px 40px, #fff, transparent),
    radial-gradient(1px 1px at 90px 110px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 150px 60px, #fff8d0, transparent),
    radial-gradient(1px 1px at 60px 20px, rgba(200,220,255,0.9), transparent),
    linear-gradient(180deg, #030b2e 0%, #0a1f5c 45%, #1b3f8a 64%, #2a5aa6 74%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 230px 170px, 170px 130px, 310px 210px, 130px 150px, 100% 100%;
}
.wp-swatch.wp-hills-night {
  background:
    radial-gradient(circle at 80% 22%, #fffbe8 0 6px, rgba(255, 246, 200, 0.3) 8px, transparent 18px),
    radial-gradient(ellipse 120% 55% at 30% 112%, #24521a 0 58%, transparent 59%),
    radial-gradient(1px 1px at 12px 10px, #fff, transparent),
    radial-gradient(1px 1px at 40px 22px, #fff, transparent),
    linear-gradient(180deg, #030b2e 0%, #0a1f5c 45%, #1b3f8a 68%);
  background-size: 100% 100%, 100% 100%, 60px 40px, 70px 50px, 100% 100%;
}

/* ---------- Snake leaderboard: a Mac Stickies-style note on the desktop ---------- */
/* Shows up to six names, then the list scrolls. The bottom-right corner resizes the note (Mac Stickies style). */
.sticky {
  position: absolute; z-index: 50; width: 230px; color: #3b3200;
  display: flex; flex-direction: column; overflow: hidden;
  resize: both; min-width: 180px; min-height: 90px; max-width: 90vw; max-height: calc(100vh - 160px);
  background: linear-gradient(180deg, #fff9b8, #fdf28c); border: 1px solid rgba(160, 140, 20, 0.35);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.2);
  font-family: "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive;
}
.sticky-bar { flex: none; height: 14px; background: linear-gradient(180deg, #f7ea6e, #efdc55); border-bottom: 1px solid rgba(120, 100, 0, 0.18); cursor: default; touch-action: none; }
.sticky.rolled { height: auto !important; min-height: 0; resize: none; }
.sticky.rolled .sticky-body { display: none; }
.sticky-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 10px; }
.sticky h3 { flex: none; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.sticky-list { list-style: none; padding: 0; margin: 0; min-height: 0; overflow-y: auto; max-height: calc(6 * (14px * 1.45 + 2px)); }
.sticky.sized .sticky-list { flex: 1; max-height: none; }
.sticky-list li { display: flex; align-items: baseline; gap: 6px; padding: 1px 3px; font-size: 14px; line-height: 1.45; border-radius: 3px; }
.sticky-list li.mine { background: rgba(255, 160, 0, 0.3); }
.sticky-list .r { width: 26px; flex: none; text-align: right; color: #8a7400; }
.sticky-list .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-list .s { flex: none; font-variant-numeric: tabular-nums; }
.sticky-note { font-size: 14px; line-height: 1.4; color: #6b5d00; }
.sticky-play { flex: none; align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: #8a5a00; text-decoration: underline; cursor: pointer; }
body.mobile .sticky { display: none; }

/* ---------- Snake: name entry for the leaderboard on the game-over screen ---------- */
.snake-submit { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 14px; border: 2px solid #9bbc0f; background: rgba(15,56,15,0.9); }
.snake-submit label { font-size: 12px; color: #c8e06a; }
.snake-submit-row { display: flex; gap: 6px; }
.snake-submit input {
  width: 170px; padding: 5px 8px; border: 2px solid #9bbc0f; background: #0f380f; color: #e8f5b0;
  font: 14px ui-monospace, Menlo, monospace; outline: none;
}
.snake-submit input:focus { border-color: #e8f5b0; }
.snake-submit button { padding: 5px 12px; border: 2px solid #9bbc0f; background: #9bbc0f; color: #0f380f; font: 700 13px ui-monospace, Menlo, monospace; cursor: pointer; }
.snake-submit button:disabled { opacity: 0.6; cursor: default; }
.snake-submit-msg { min-height: 1em; font-size: 12px; color: #ffd84d; }
.snake-submit-done { margin-top: 10px; font-size: 15px; font-weight: 700; color: #ffd84d; }
body.mobile .snake-submit input { font-size: 16px; }

/* ---------- Screensaver: running count of corner hits ---------- */
.saver-count {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; pointer-events: none;
  font: 700 15px "Arial Black", Helvetica, Arial, sans-serif; letter-spacing: .08em; color: rgba(255,255,255,0.4);
}
.saver-count.bump { animation: saver-bump 1.4s ease; }
@keyframes saver-bump { 0% { color: #ffd84d; transform: scale(1.5); } 25% { color: #ffd84d; transform: scale(1); } 100% { color: rgba(255,255,255,0.4); } }

/* ---------- Microsoft Paint (Windows XP theme only) ---------- */
.window[data-app="paint"] .win-body { display: flex; }
.mp { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #d4d0c8; color: #000; font: 11px Tahoma, Verdana, sans-serif; }
.mp-main { flex: 1; min-height: 0; display: flex; }
.mp-tools { flex: none; width: 56px; padding: 4px; display: grid; grid-template-columns: 24px 24px; grid-auto-rows: 24px; gap: 1px; align-content: start; border-right: 1px solid #808080; }
.mp-tool { display: grid; place-items: center; padding: 0; border: 1px solid; border-color: #fff #404040 #404040 #fff; background: #d4d0c8; font-size: 13px; line-height: 1; cursor: default; }
.mp-tool.on { border-color: #404040 #fff #fff #404040; background: #e8e6e0; }
.mp-sizes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 3px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.mp-size { display: grid; place-items: center; height: 18px; padding: 0; border: 0; background: none; cursor: default; }
.mp-size i { display: block; border-radius: 50%; background: #000; }
.mp-size.on { background: #0a246a; }
.mp-size.on i { background: #fff; }
.mp-well { position: relative; flex: 1; min-width: 0; overflow: auto; padding: 4px; background: #808080; }
.mp-canvas { display: block; max-width: 100%; background: #fff; touch-action: none; cursor: crosshair; image-rendering: pixelated; }
.mp-bottom { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px; border-top: 1px solid #fff; }
.mp-current { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid; border-color: #808080 #fff #fff #808080; background: #e8e6e0; }
.mp-current i { position: absolute; width: 14px; height: 14px; border: 1px solid #808080; }
.mp-fg { left: 3px; top: 3px; z-index: 1; }
.mp-bg { right: 3px; bottom: 3px; }
.mp-palette { display: grid; grid-template-columns: repeat(14, 15px); grid-auto-rows: 15px; gap: 1px; }
.mp-color { padding: 0; border: 1px solid; border-color: #808080 #fff #fff #808080; cursor: default; }
.mp-actions { margin-left: auto; display: flex; gap: 4px; }
.mp-btn { padding: 3px 8px; border: 1px solid; border-color: #fff #404040 #404040 #fff; background: #d4d0c8; font: inherit; color: #000; cursor: default; white-space: nowrap; }
.mp-btn:active { border-color: #404040 #fff #fff #404040; }
.mp-btn:disabled { color: #808080; }
.mp-submit { font-weight: 700; }
.mp-status { flex: none; padding: 2px 6px; border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The verdict banner, in the spirit of "Not Hotdog" */
.mp-verdict { position: absolute; left: 4px; right: 4px; top: 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px; text-align: center; color: #fff; cursor: pointer; animation: mp-drop .35s cubic-bezier(.2, 1.4, .4, 1); }
.mp-verdict[hidden] { display: none; }
.mp-verdict.yes { background: #1fa33a; box-shadow: 0 4px 0 #13702a; }
.mp-verdict.no { background: #e3262a; box-shadow: 0 4px 0 #9b1518; }
.mp-verdict b { font: 900 30px "Arial Black", Helvetica, Arial, sans-serif; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.mp-verdict span { font: 600 14px Tahoma, Verdana, sans-serif; max-width: 420px; }
.mp-verdict small { font-size: 10px; opacity: .8; }
@keyframes mp-drop { from { transform: translateY(-30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-verdict { animation: none; } }
body.mobile .mp-bottom { flex-wrap: wrap; }

/* ---------- QuickTime Player (videos from Downloads) ---------- */
.qt { flex: 1; min-width: 0; background: #000; display: flex; }
.qt video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ---------- Local Legends: a purple Stickies note (top left) ---------- */
.sticky.legends { color: #3a1f4f; background: linear-gradient(180deg, #f6e3ff, #e9c9ff); border-color: rgba(120, 60, 160, 0.35); }
.sticky.legends .sticky-bar { background: linear-gradient(180deg, #e2b8fb, #d6a3f5); border-bottom-color: rgba(90, 40, 130, 0.2); }
.sticky.legends .sticky-list .r { color: #7a4a9a; }
.sticky.legends .sticky-list li.mine { background: rgba(160, 80, 255, 0.25); }
.sticky.legends .sticky-note { color: #5b3a78; }
.sticky.legends .sticky-play { color: #6a2fa0; }

/* ---------- Local Legend celebration (above everything, even the virus) ---------- */
.legend-party {
  position: fixed; inset: 0; z-index: 3200000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(80, 30, 140, 0.88), rgba(8, 4, 24, 0.95));
  animation: lp-in .5s ease;
}
.legend-party.out { opacity: 0; transition: opacity .4s; }
@keyframes lp-in { from { opacity: 0; } }
.lp-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lp-card {
  position: relative; width: min(460px, 100%); padding: 26px 24px 18px; text-align: center; color: #fff;
  border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px rgba(190, 120, 255, 0.35);
  backdrop-filter: blur(6px); animation: lp-card-in .7s cubic-bezier(.2,1.4,.4,1) both .1s;
}
@keyframes lp-card-in { from { transform: scale(0.4) rotate(-6deg); opacity: 0; } }
.lp-trophy { font-size: 84px; line-height: 1; filter: drop-shadow(0 0 22px rgba(255, 210, 60, 0.8)); animation: lp-bounce 1.2s ease-in-out infinite; }
@keyframes lp-bounce { 50% { transform: translateY(-10px) rotate(4deg); } }
.lp-card h1 {
  margin: 10px 0 4px; font: 900 clamp(34px, 9vw, 52px)/1 "Arial Black", Impact, sans-serif; letter-spacing: 2px;
  background: linear-gradient(90deg, #ffd84d, #ff7ad9, #7fd8ff, #ffd84d); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lp-shine 3s linear infinite;
}
@keyframes lp-shine { to { background-position: 300% 0; } }
.lp-sub { margin: 6px 0 2px; font-size: 15px; opacity: 0.85; }
.lp-time { font: 800 40px/1.1 ui-monospace, Menlo, monospace; color: #ffd84d; text-shadow: 0 0 18px rgba(255, 216, 77, 0.6); }
.lp-form { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.lp-form label { font-size: 13px; opacity: 0.9; }
.lp-row { display: flex; gap: 8px; width: 100%; max-width: 340px; }
.lp-row input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12); color: #fff; font-size: 15px; outline: none;
}
.lp-row input::placeholder { color: rgba(255,255,255,0.55); }
.lp-row input:focus { border-color: #ffd84d; box-shadow: 0 0 0 3px rgba(255, 216, 77, 0.3); }
.lp-row button { padding: 9px 16px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #ffe27a, #ffbf1f); color: #3b2300; font-weight: 800; cursor: pointer; }
.lp-row button:disabled { opacity: 0.6; cursor: default; }
.lp-msg { min-height: 1.2em; font-size: 13px; color: #ffd84d; }
.lp-done { margin-top: 18px; font-size: 22px; font-weight: 800; color: #ffd84d; }
.lp-done small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: #fff; opacity: 0.8; }
.lp-later { margin-top: 10px; padding: 4px 10px; border: 0; background: none; color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: underline; cursor: pointer; }
body.mobile .lp-row input { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .lp-trophy, .lp-card h1, .lp-card { animation: none; } }

/* ---------- Missions: finish time and the Local Legends claim button ---------- */
.msn-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.msn-claim { padding: 3px 10px; border: 0; border-radius: 6px; background: linear-gradient(180deg, #c38bff, #8a3ff0); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }