:root {
  --ink: #eef2f6;
  --muted: #9aa7b4;
  --line: #394452;
  --surface: #2a2f3c;
  --surface-soft: #333e4d;
  --blue: #e0a83a;
  --blue-dark: #c8801e;
  --green: #2f8a4f;
  --orange: #d9832e;
  --desktop-viewport-height: 100vh;
  --taskbar-height: 36px;
  --taskbar-safe-height: calc(var(--taskbar-height) + env(safe-area-inset-bottom, 0px));
  --ui-scale: 1;
  font-family: var(--sys-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  color: var(--ink);
}

@supports (height: 100dvh) {
  :root { --desktop-viewport-height: 100dvh; }
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-size: 13px; background: #153d56; user-select: none; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, .desktop-icon-link:focus-visible { outline: 2px solid #303745; outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.desktop { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; transform-origin: top left; display: flex; flex-direction: column; }
.wallpaper-art { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #398fbd 0%, #80bdd1 55%, #d7dc9f 56%, #789759 100%); z-index: -2; transition: filter .35s, background .35s; }
.wallpaper-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.11), transparent 40%), radial-gradient(circle at 76% 20%, rgba(255,255,255,.25), transparent 18%); }
.sun-glow { position: absolute; width: 400px; height: 400px; right: 7%; top: -16%; border-radius: 50%; background: radial-gradient(circle, rgba(255,245,183,.75), rgba(255,255,255,.15) 35%, transparent 70%); }
.ridge { position: absolute; width: 120%; left: -10%; border-radius: 50% 55% 0 0 / 85% 95% 0 0; transform: rotate(-3deg); }
.ridge-far { height: 44%; bottom: -13%; left: 11%; background: linear-gradient(160deg, #9fb473, #688b59 75%); box-shadow: inset 0 18px 30px rgba(255,255,255,.11); }
.ridge-near { height: 35%; bottom: -17%; left: -29%; background: linear-gradient(170deg, #78955d, #436842); transform: rotate(8deg); box-shadow: inset 0 20px 35px rgba(255,255,255,.08); }
.terrain-grid { position: absolute; left: -15%; right: -15%; height: 34%; bottom: -8%; opacity: .12; transform: perspective(400px) rotateX(58deg); transform-origin: bottom; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(transparent, #000); }
.desktop[data-wallpaper="dusk"] .wallpaper-art { background: linear-gradient(180deg, #4e476e, #9b6f79 56%, #b28a69 57%, #554f50); }
.desktop[data-wallpaper="dusk"] .ridge-far { background: linear-gradient(160deg, #967e74, #675e61 75%); }
.desktop[data-wallpaper="dusk"] .ridge-near { background: linear-gradient(170deg, #6b5d5d, #383a46); }
.desktop[data-wallpaper="slate"] .wallpaper-art { background: linear-gradient(180deg, #425f70, #7c9ca5 56%, #8b9a8f 57%, #435a55); filter: saturate(.55); }
.desktop[data-wallpaper="slate"] .ridge-far { background: linear-gradient(160deg, #899d91, #576f69 75%); }
.desktop[data-wallpaper="slate"] .ridge-near { background: linear-gradient(170deg, #61786e, #354b47); }

.desktop-icons { position: absolute; z-index: 3; top: 18px; left: 14px; display: grid; width: 88px; gap: 11px; }
.desktop-icon { width: 86px; min-height: 76px; padding: 5px 3px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: white; text-align: center; text-shadow: 0 1px 2px #163444, 0 1px 4px #163444; cursor: default; }
.desktop-icon:hover, .desktop-icon:focus { background: rgba(30,92,133,.35); border-color: rgba(255,255,255,.45); }
.desktop-icon-link { display: block; text-decoration: none; }
.desktop-icon-art { width: 43px; height: 43px; margin: 0 auto 4px; display: grid; place-items: center; filter: drop-shadow(0 2px 1px rgba(24,48,60,.45)); }
.desktop-icon-art svg { width: 39px; height: 39px; }
.desktop-icon > span:last-child { display: block; line-height: 1.25; font-size: 12px; }


/* ---------- command terminal shell: topbar + rail + one filled panel + statusbar ---------- */
.topbar { position: relative; z-index: 4; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 16px; background: rgba(8,10,12,.78); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.topbar-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.topbar-mark { width: 22px; height: 22px; border-radius: 3px; flex: 0 0 auto; }
.topbar-word { display: flex; align-items: center; gap: 7px; font-family: var(--display-font, inherit); font-weight: 400; font-size: 15px; letter-spacing: .02em; color: var(--ink); text-shadow: 0 0 12px rgba(224,168,58,.28); white-space: nowrap; }
.topbar-word span { color: var(--blue); text-shadow: 0 0 10px rgba(224,168,58,.6), 0 0 22px rgba(224,168,58,.3); }
.topbar-sub { font-size: 10.5px; letter-spacing: .13em; color: var(--muted); font-family: ui-monospace, "SF Mono", Consolas, monospace; white-space: nowrap; }
.topbar-readouts { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.topbar-readout { display: flex; flex-direction: column; gap: 1px; font-size: 9.5px; letter-spacing: .07em; color: var(--muted); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.topbar-readout b { color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.topbar-clock { text-align: right; }
.topbar-clock strong { display: block; font-size: 13px; color: var(--ink); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.topbar-shutdown { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.topbar-shutdown:hover { color: #e0604a; border-color: #e0604a; }
.topbar-shutdown svg { width: 15px; height: 15px; }
.game-shortcut { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--blue); border-radius: 3px; background: rgba(224,168,58,.08); color: var(--blue); cursor: pointer; font-size: 12px; white-space: nowrap; }
.game-shortcut:hover { background: rgba(224,168,58,.16); }
.game-shortcut-art { position: relative; width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 3px; }
.game-shortcut-art img, .game-shortcut-art svg { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; }
.game-shortcut .shortcut-arrow { position: static; width: auto; height: auto; background: none; border: 0; font-size: 11px; }

.terminal-body { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; }

nav.rail { flex: 0 0 208px; display: flex; flex-direction: column; padding: 12px 0 0; overflow-y: auto; background: rgba(6,8,10,.55); border-right: 1px solid var(--line); }
.rail-group-label { padding: 11px 16px 5px; font-size: 10px; letter-spacing: .15em; color: var(--muted); opacity: .75; }
.rail-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 16px 7px 14px; border-left: 2px solid transparent; font-size: 12.5px; color: var(--muted); transition: color .12s, border-color .12s, background .12s; }
.rail-item:hover { color: var(--ink); background: rgba(224,168,58,.05); }
.rail-item.is-active { color: var(--blue); border-left-color: var(--blue); background: linear-gradient(90deg, rgba(224,168,58,.1), transparent 72%); text-shadow: 0 0 10px rgba(224,168,58,.5); }
.rail-glyph { color: var(--green); font-size: 10px; width: 1em; text-align: center; flex: 0 0 auto; }
.rail-item.is-active .rail-glyph { color: var(--blue); text-shadow: 0 0 8px rgba(224,168,58,.7); }
.rail-item-link { color: var(--muted); text-decoration: none; }
.rail-item .shortcut-arrow { margin-left: auto; opacity: .6; font-style: normal; }
.rail-foot { margin-top: auto; padding: 11px 16px 14px; font-size: 10px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); }

.window-layer { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; overflow: hidden; background: var(--surface); }
.window { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--surface); }
.window.is-open { display: flex; }
.titlebar { flex: 0 0 auto; height: 38px; min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: var(--ink); background: rgba(6,8,10,.5); border-bottom: 1px solid var(--line); box-shadow: none; cursor: default; }

.statusbar { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 6px 16px; font-size: 10.5px; color: var(--muted); background: rgba(6,8,10,.7); border-top: 1px solid var(--line); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.statusbar-brand { color: var(--blue); font-weight: 600; letter-spacing: .07em; }
.statusbar-sep { color: var(--line); }
.statusbar-log { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.statusbar-storage strong { color: var(--ink); margin-left: 4px; font-weight: 600; }
.titlebar-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: bold; text-shadow: 0 1px #17415d; min-width: 0; }
.titlebar-app-icon { display: grid; place-items: center; width: 22px; height: 22px; padding: 2px; border-radius: 3px; background: rgba(255,255,255,.18); }
.titlebar-app-icon svg { width: 19px; height: 19px; }
.titlebar-app-icon img { width: 21px; height: 21px; object-fit: contain; }
.window-controls { display: flex; align-items: center; gap: 3px; }
.window-controls button { width: 25px; height: 23px; padding: 0 0 3px; display: grid; place-items: center; color: #fff; background: linear-gradient(#423217, #362911); border: 1px solid rgba(255,255,255,.58); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(15,70,108,.4); text-shadow: 0 1px #214b65; cursor: pointer; line-height: 1; }
.window-controls button:last-child { background: linear-gradient(#541812, #43140f 60%, #421510); border-color: #454e63; font-size: 18px; }
.window-controls button:hover { filter: brightness(1.12); }
.window-body { flex: 1; min-height: 0; }

/* Mod and isolated game-data managers. These use the launcher desktop's
   existing window chrome while keeping large package/file lists scrollable. */
.mod-manager-body, .game-data-manager-body, .custom-map-manager-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; color: #c2a470; background: #5d4b2d; }
.manager-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.manager-heading h1 { margin: 1px 0 4px; font-size: 23px; color: #d8aa5a; }
.manager-heading p { max-width: 610px; margin: 0; color: #c6cad2; line-height: 1.45; }
.manager-heading .eyebrow { color: #e7c892; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.active-context-badge { max-width: 250px; padding: 9px 12px; border: 1px solid #b59152; border-radius: 4px; color: #dcad5a; background: #684d1e; font-size: 12px; font-weight: 700; text-align: center; }
.mod-import-panel, .installed-mods-panel, .compatibility-override-panel, .game-data-context, .custom-map-import-panel, .custom-map-list-panel { border: 1px solid #414a5e; border-radius: 5px; background: #333333; box-shadow: 0 1px 2px rgba(24,60,80,.08); }
.mod-import-panel { display: grid; grid-template-columns: minmax(220px, 1fr) 180px 125px auto; gap: 10px; align-items: end; padding: 13px; }
.mod-import-panel h2, .installed-mods-panel h2 { margin: 0 0 3px; font-size: 16px; color: #d7aa5b; }
.mod-import-panel p, .installed-mods-panel header p { margin: 0; color: #c6cad2; font-size: 11px; line-height: 1.4; }
.mod-import-panel label { display: grid; gap: 4px; color: #c6cad2; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.mod-import-panel input { min-width: 0; padding: 7px 8px; border: 1px solid #3c4354; border-radius: 3px; background: #333333; font: inherit; text-transform: none; }
.mod-import-actions { display: flex; gap: 7px; }
.mod-import-progress { grid-column: 1 / -1; min-height: 28px; padding: 7px 9px; border-radius: 3px; color: #cbb286; background: #674d21; font-size: 11px; }
.installed-mods-panel { margin-top: 13px; padding: 13px; }
.installed-mods-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.installed-mods-panel > header > div:last-child { display: flex; gap: 7px; }
.installed-mod-list { display: grid; gap: 7px; }
.installed-mod-card { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #475065; border-radius: 4px; background: #2a2f3c; }
.installed-mod-card.is-enabled { border-color: #aa8749; background: #6a4f1f; }
.installed-mod-selection { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.installed-mod-selection span { display: grid; gap: 2px; }
.installed-mod-selection strong { color: #d7aa5b; }
.installed-mod-selection small { color: #c6cad2; }
.installed-mod-card code { color: #c6cad2; font-size: 10px; }
.installed-mod-controls { display: flex; gap: 4px; }
.installed-mod-controls button, .game-data-file-row button { padding: 5px 8px; border: 1px solid #373e4f; border-radius: 3px; color: #cbaa6f; background: #333333; font-size: 11px; cursor: pointer; }
.installed-mod-controls button:disabled { opacity: .4; cursor: default; }
.installed-mod-warning { grid-column: 1 / -1; margin: 1px 0 0; padding: 6px 8px; border-left: 3px solid #2b313e; color: #dfa853; background: #765c19; font-size: 11px; }
.installed-mod-archives { grid-column: 1 / -1; border-top: 1px solid #475066; color: #ccb388; background: rgba(255,255,255,.65); font-size: 11px; }
.installed-mod-archives summary { padding: 7px 8px; color: #c6cad2; cursor: pointer; font-weight: 700; }
.installed-mod-archives[open] summary { border-bottom: 1px solid #475066; color: #cbaa6f; }
.installed-mod-archive-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 12px; padding: 8px; }
.installed-mod-content-id { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: #c6cad2; font-size: 10px; }
.installed-mod-archives label { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px; cursor: pointer; }
.installed-mod-archives label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.installed-mod-archives label small { color: #c6cad2; }
.manager-empty { display: grid; place-items: center; gap: 5px; padding: 24px; color: #c6cad2; text-align: center; }
.manager-empty svg { width: 36px; height: 36px; }
.manager-empty strong { color: #cbb286; }
.manager-empty[hidden] { display: none; }
.game-data-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.game-data-status { margin-bottom: 10px; padding: 8px 10px; border: 1px solid #465065; border-radius: 3px; color: #c6cad2; background: #624c25; font-size: 11px; }
.game-data-context-list { display: grid; gap: 10px; }
.game-data-context { overflow: hidden; }
.game-data-context.is-active { border-color: #a17f44; box-shadow: 0 0 0 1px #8ec5e2; }
.game-data-context > header { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #475066; background: #5b4a2c; }
.game-data-context > header div { display: grid; gap: 2px; }
.game-data-context > header strong { color: #d8aa5a; }
.game-data-context > header em { padding: 2px 5px; border-radius: 3px; color: white; background: #372910; font-size: 9px; font-style: normal; }
.game-data-context > header span { color: #c6cad2; font-size: 11px; }
.game-data-file-row { display: grid; grid-template-columns: 28px minmax(180px, 1fr) auto; gap: 8px; align-items: center; padding: 8px 11px; border-top: 1px solid #475066; }
.game-data-context > header + .game-data-file-row { border-top: 0; }
.game-data-file-row > span:first-child svg { width: 22px; height: 22px; color: #e3cea9; }
.game-data-file-row > span:nth-child(2) { display: grid; gap: 2px; }
.game-data-file-row small { color: #c6cad2; }
.game-data-file-row > div { display: flex; gap: 5px; }
.game-data-context-empty { margin: 0; padding: 13px; color: #c6cad2; font-style: italic; }
.compatibility-override-panel { display: grid; grid-template-columns: 1fr 220px; gap: 10px 16px; align-items: center; margin-bottom: 10px; padding: 12px; border-color: #313847; background: #765719; }
.compatibility-override-panel > div:first-child { display: grid; gap: 2px; color: #d8a75a; }
.compatibility-override-panel label { display: grid; gap: 4px; color: #c7a36b; font-size: 11px; }
.compatibility-override-panel select { padding: 6px; }
.compatibility-override-panel .compatibility-risk { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 7px; padding: 8px; border: 1px solid #40485c; background: #333333; font-weight: 700; }
.compatibility-override-panel > div:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; }
.custom-map-import-panel { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 10px 16px; align-items: center; padding: 13px; }
.custom-map-import-panel h2, .custom-map-list-panel h2 { margin: 0 0 3px; color: #d7aa5b; font-size: 16px; }
.custom-map-import-panel p, .custom-map-list-panel header p { margin: 0; color: #c6cad2; font-size: 11px; line-height: 1.4; }
.custom-map-import-panel code { color: #c6cad2; font-size: 10px; }
.custom-map-import-actions { display: flex; gap: 7px; }
.custom-map-import-panel .mod-import-progress { grid-column: 1 / -1; }
.custom-map-list-panel { margin-top: 13px; padding: 13px; }
.custom-map-list-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.custom-map-list { display: grid; gap: 7px; }
.custom-map-card { display: grid; grid-template-columns: 34px minmax(180px, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid #475065; border-radius: 4px; background: #2a2f3c; }
.custom-map-card-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #384051; border-radius: 3px; background: #766419; }
.custom-map-card-icon svg { width: 25px; height: 25px; }
.custom-map-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.custom-map-card strong { overflow: hidden; color: #d7aa5b; text-overflow: ellipsis; white-space: nowrap; }
.custom-map-card small { overflow: hidden; color: #c6cad2; text-overflow: ellipsis; white-space: nowrap; }
.custom-map-card button { padding: 5px 8px; border: 1px solid #373e4f; border-radius: 3px; color: #cbaa6f; background: #333333; font-size: 11px; cursor: pointer; }
.custom-map-help { margin: 11px 2px 0; color: #c6cad2; font-size: 11px; line-height: 1.45; }
@media (max-width: 780px) {
  .manager-heading, .installed-mods-panel > header, .custom-map-list-panel > header { align-items: stretch; flex-direction: column; }
  .mod-import-panel { grid-template-columns: 1fr; }
  .mod-import-progress { grid-column: 1; }
  .installed-mod-card { grid-template-columns: 1fr auto; }
  .installed-mod-controls { grid-column: 1 / -1; }
  .game-data-file-row { grid-template-columns: 25px 1fr; }
  .game-data-file-row > div { grid-column: 1 / -1; }
  .compatibility-override-panel { grid-template-columns: 1fr; }
  .compatibility-override-panel .compatibility-risk, .compatibility-override-panel > div:last-child { grid-column: 1; }
  .custom-map-import-panel { grid-template-columns: 1fr; }
  .custom-map-import-panel .mod-import-progress { grid-column: 1; }
  .custom-map-card { grid-template-columns: 30px 1fr; }
  .custom-map-card button { grid-column: 1 / -1; }
}

.setup-body { display: grid; grid-template-columns: 220px 1fr; }
.wizard-side { position: relative; padding: 30px 24px 22px; color: white; overflow: hidden; background: linear-gradient(160deg, #143d5a, #12334a 62%, #1c5367); }
.wizard-side::before { content: ""; position: absolute; width: 290px; height: 290px; left: -105px; bottom: -170px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 72px rgba(255,255,255,.02); }
.wizard-side::after { content: ""; position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, transparent 25%, #000); pointer-events: none; }
.wizard-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; letter-spacing: 2px; font-size: 12px; }
.wizard-brand div { display: grid; line-height: 1; }
.wizard-brand strong { color: #eed6a0; font-size: 15px; }
.brand-mark { position: relative; display: inline-flex; align-items: flex-end; gap: 2px; width: 30px; height: 31px; transform: skew(-12deg); }
.brand-mark i { display: block; width: 8px; background: #24603a; box-shadow: inset -2px 0 rgba(14,63,81,.25); }
.brand-mark i:nth-child(1) { height: 15px; }
.brand-mark i:nth-child(2) { height: 24px; background: #4b3910; }
.brand-mark i:nth-child(3) { height: 31px; }
.brand-mark.large { width: 54px; height: 57px; gap: 4px; }
.brand-mark.large i { width: 14px; }
.brand-mark.large i:nth-child(1) { height: 28px; }.brand-mark.large i:nth-child(2) { height: 43px; }.brand-mark.large i:nth-child(3) { height: 57px; }
.wizard-side-copy { position: relative; z-index: 1; margin: 33px 0 38px; font-size: 21px; line-height: 1.28; letter-spacing: -.4px; color: rgba(255,255,255,.92); }
.wizard-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wizard-steps::before { content: ""; position: absolute; left: 14px; top: 25px; bottom: 28px; border-left: 1px solid rgba(255,255,255,.22); }
.wizard-steps li { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 0; opacity: .48; }
.wizard-steps li > span { z-index: 1; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: #173d55; font-weight: bold; font-size: 11px; }
.wizard-steps li div { display: grid; gap: 2px; }
.wizard-steps strong { font-size: 11px; }.wizard-steps small { color: rgba(255,255,255,.66); font-size: 9px; }
.wizard-steps li.is-current, .wizard-steps li.is-complete { opacity: 1; }
.wizard-steps li.is-current > span { color: #d0a862; background: #4b3910; border-color: #424b5f; box-shadow: 0 0 0 3px rgba(230,182,74,.12); }
.wizard-steps li.is-complete > span { color: white; background: #2f8a4f; border-color: #363d4e; font-size: 0; }
.wizard-steps li.is-complete > span::after { content: "✓"; font-size: 12px; }
.wasm-badge { position: absolute; z-index: 2; left: 24px; bottom: 22px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font-size: 8px; line-height: 1.35; letter-spacing: .4px; }
.wasm-badge strong { color: rgba(255,255,255,.86); font-weight: normal; }
.wasm-cube { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); transform: rotate(45deg); color: #eed6a0; font-weight: bold; }
.wasm-cube + span { margin-left: 3px; }
.wasm-cube::first-letter { transform: rotate(-45deg); }

.wizard-main { min-width: 0; position: relative; overflow: auto; background: #5f4d2e; }
.wizard-page { min-height: 100%; display: none; padding: 34px 42px 28px; }
.wizard-page.is-visible { display: flex; flex-direction: column; animation: pageIn .22s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: none; } }
.wizard-heading { max-width: 520px; }
.eyebrow { margin: 0 0 7px; color: #e4c794; font-size: 9px; font-weight: bold; letter-spacing: 1.6px; }
.wizard-heading h1, .programs-hero h1, .settings-panel h1 { margin: 0; color: #c2a470; font-size: 26px; line-height: 1.15; letter-spacing: -.6px; }
.wizard-heading > p:last-child, .programs-hero > div > p:last-child { margin: 10px 0 0; color: #c6cad2; font-size: 12px; line-height: 1.5; }
.compact-heading h1 { font-size: 23px; }
.compact-heading > p:last-child { margin-top: 7px; }
.source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 27px; }
.source-card { position: relative; min-height: 106px; display: grid; grid-template-columns: 38px 1fr 15px; align-items: center; gap: 12px; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.015); box-shadow: none; cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; }
.source-card:hover { border-color: var(--blue); background: rgba(224,168,58,.04); box-shadow: 0 0 22px -6px rgba(224,168,58,.4); transform: none; }
.source-card:disabled { opacity: .55; cursor: wait; transform: none; }
.source-card::before, .source-card::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--blue-dark); opacity: 0; transition: opacity .14s; pointer-events: none; }
.source-card:hover::before, .source-card:hover::after { opacity: 1; }
.source-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.source-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.source-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 3px; background: transparent; border: 1px solid var(--line); color: var(--green); }
.source-icon.folder { color: var(--blue); }.source-icon svg { width: 19px; height: 19px; }
.source-copy { display: grid; gap: 5px; }.source-copy strong { color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .01em; }.source-copy small { color: var(--muted); font-size: 10px; }
.source-arrow { color: var(--blue); font: 400 20px system-ui, sans-serif; opacity: .7; }
.folder-compatibility-picker { min-height: 22px; display: block; margin: 5px 0 0 auto; padding: 3px 0; color: #e3c592; border: 0; background: transparent; font-size: 9px; text-decoration: underline; cursor: pointer; }
.folder-compatibility-picker:hover { color: #ddaf5f; }
.folder-compatibility-picker:disabled { color: #c7cad1; cursor: wait; }
.launcher-quick-settings { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 9px 11px; color: #c6cad2; border: 1px solid #475066; border-radius: 4px; background: #5d4b2d; font-size: 8px; line-height: 1.4; }
.launcher-quick-settings strong { color: #cab184; }
.launcher-quick-settings button { flex: 0 0 auto; min-height: 27px; padding: 0 10px; color: #e0b56c; border: 1px solid #363d4d; border-radius: 2px; background: linear-gradient(#333333, #624a21); font-weight: bold; font-size: 8px; }
.ownership-help { margin-top: 13px; border: 1px solid #454e63; border-radius: 4px; background: #333333; }
.ownership-help > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; background: linear-gradient(#624d29, #5b492c); border-bottom: 1px solid #475066; }
.ownership-help h2 { margin: 0; color: #c6a979; font-size: 13px; }
.ownership-help .eyebrow { margin-bottom: 3px; }
.purchase-links { display: flex; gap: 6px; }
.purchase-links a { min-height: 26px; display: inline-flex; align-items: center; padding: 0 9px; color: #fff; border: 1px solid #ad8238; border-radius: 2px; background: linear-gradient(#362a15, #372910); font-size: 8px; font-weight: bold; text-decoration: none; white-space: nowrap; }
.ownership-help details + details { border-top: 1px solid #475066; }
.ownership-help summary { padding: 10px 12px; color: #cdb48a; cursor: pointer; font-size: 10px; font-weight: bold; }
.ownership-help details[open] summary { background: #5d4c2d; border-bottom: 1px solid #475066; }
.ownership-path { padding: 4px 15px 13px; color: #c6cad2; user-select: text; font-size: 9px; line-height: 1.55; }
.ownership-path h3 { margin: 11px 0 3px; color: #c6cad2; font-size: 10px; }
.ownership-path ol { margin: 5px 0 10px; padding-left: 20px; }
.ownership-path li { margin: 5px 0; }
.ownership-path p { margin: 9px 0 0; }
.ownership-path code { padding: 1px 3px; color: #c7aa78; background: #5b4a2c; font: 8px "Lucida Console", Consolas, monospace; }
.selected-media { margin-top: 12px; overflow: hidden; border: 1px solid #444d62; border-radius: 4px; background: #333333; }
.selected-media > header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-bottom: 1px solid #475066; background: #5b4a2c; }
.selected-media > header div { display: flex; align-items: baseline; gap: 7px; }.selected-media > header strong { color: #c6cad2; font-size: 10px; }.selected-media > header span { color: #c6cad2; font-size: 8px; }
.selected-media > header button { padding: 3px 7px; color: #e4c793; border: 0; background: transparent; font-size: 9px; cursor: pointer; }.selected-media > header button:hover { text-decoration: underline; }.selected-media > header button:disabled { color: #c7cad1; cursor: wait; text-decoration: none; }
.selected-media ul { max-height: 124px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.selected-media li { min-height: 39px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto 24px; align-items: center; gap: 7px; padding: 5px 8px; border-bottom: 1px solid #475066; }.selected-media li:last-child { border-bottom: 0; }
.selected-media-icon { width: 23px; height: 23px; display: grid; place-items: center; color: #dbc7a5; border: 1px solid #465065; border-radius: 50%; background: #624c25; font-size: 11px; }.selected-media-name { min-width: 0; display: grid; gap: 2px; }.selected-media-name strong { overflow: hidden; color: #c6cad2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.selected-media-name span, .selected-media-size { color: #c7cad1; font-size: 8px; }
.selected-media-remove { width: 22px; height: 22px; padding: 0; color: #df9890; border: 1px solid transparent; border-radius: 2px; background: transparent; font-size: 15px; line-height: 20px; cursor: pointer; }.selected-media-remove:hover { border-color: #40495c; background: #6d2017; }.selected-media-remove:disabled { opacity: .45; cursor: wait; }
.demo-link, .text-button { align-self: flex-start; margin: 15px 0 0; padding: 3px 2px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #e4c793; font-size: 10px; cursor: pointer; }
.demo-link:hover, .text-button:hover { border-bottom-color: currentColor; }.demo-link span { color: #eed1a0; margin-right: 4px; }
.privacy-note { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: #24603a; border: 1px solid #475066; border-radius: 4px; color: #88d8a5; }
.privacy-note svg { flex: 0 0 auto; width: 25px; height: 25px; }.privacy-note p { margin: 0; font-size: 9px; line-height: 1.45; }.privacy-note strong { display: block; color: #6ecf92; font-size: 10px; }
.scan-panel { margin: 17px 0 0; padding: 13px; border: 1px solid #464f64; border-radius: 4px; background: #6a4e20; }
.scan-title { display: flex; align-items: center; gap: 8px; color: #c6cad2; font-size: 10px; }.scan-title strong { flex: 1; }.scan-title > span:last-child { color: #e4c796; font-weight: bold; }
.scan-spinner { width: 14px; height: 14px; border: 2px solid #c2a470; border-top-color: #2979aa; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.scan-track { height: 5px; margin: 9px 0 7px; background: #544428; border-radius: 5px; overflow: hidden; }.scan-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #342813, #2f8a4f); transition: width .18s; }
.scan-panel p { margin: 0; color: #c6cad2; font-size: 9px; }

.detected-strip { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 10px 12px; border: 1px solid #475066; border-radius: 4px; background: #624d27; }
.detected-icon { width: 31px; height: 31px; }.detected-icon svg { width: 100%; height: 100%; }.detected-strip > div:nth-child(2) { flex: 1; display: grid; gap: 3px; }.detected-strip strong { color: #c6cad2; font-size: 10px; }.detected-strip span { color: #c6cad2; font-size: 9px; }.detected-strip .detected-ok { color: #87d7a4; font-weight: bold; }
.detected-media-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.detected-media-item { max-width: 210px; display: flex; align-items: center; gap: 5px; padding: 4px 5px 4px 8px; color: #c6cad2; border: 1px solid #475066; border-radius: 12px; background: #333333; font-size: 8px; }
.detected-media-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detected-media-item .selected-media-remove { width: 17px; height: 17px; font-size: 12px; line-height: 14px; }
.storage-options { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; border: 0; }
.storage-choice { min-height: 63px; display: grid; grid-template-columns: 17px 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #475066; border-radius: 4px; background: #333333; cursor: pointer; transition: .12s; }
.storage-choice:hover { background: #6c5020; border-color: #bc9b63; }.storage-choice.is-selected { background: #6a4f1f; border-color: #a17f45; box-shadow: inset 3px 0 #367eae; }
.storage-choice.is-disabled { opacity: .55; cursor: not-allowed; }.storage-choice.is-disabled:hover { background: #333333; border-color: #475066; }
.storage-choice input { position: absolute; opacity: 0; }.choice-radio { width: 15px; height: 15px; border: 1px solid #373e4d; border-radius: 50%; background: #333333; }.storage-choice.is-selected .choice-radio { border: 4px solid #a8813d; }
.choice-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; color: #fff; font-size: 20px; font-weight: bold; }.choice-icon.bolt { background: #312817; }.choice-icon.bookmark { background: #2f8a4f; font-size: 17px; }.choice-icon.package { background: #6a4a1c; }.choice-icon.package svg { width: 27px; height: 27px; }
.choice-text { display: grid; gap: 3px; }.choice-text strong { color: #c6cad2; font-size: 11px; }.choice-text small { color: #c6cad2; font-size: 9px; }.choice-meta { color: #c6cad2; font-size: 9px; font-weight: bold; white-space: nowrap; }
.optional-content-choice { position: relative; display: grid; grid-template-columns: 18px 1fr 20px; align-items: center; gap: 10px; margin-top: 9px; padding: 10px 12px; border: 1px solid #475066; border-radius: 4px; background: #5f4d2e; cursor: pointer; }
.optional-content-choice:hover { border-color: #3d4658; background: #674f24; }.optional-content-choice.is-selected { border-color: #b18c4c; background: #6a4f1f; }
.optional-content-choice.is-disabled { opacity: .65; cursor: not-allowed; }.optional-content-choice.is-disabled:hover { border-color: #475066; background: #5f4d2e; }
.optional-content-choice > input { position: absolute; opacity: 0; pointer-events: none; }.optional-content-check { width: 17px; height: 17px; display: grid; place-items: center; color: transparent; border: 1px solid #383f4e; border-radius: 3px; background: #333333; font-size: 11px; font-weight: bold; }.optional-content-choice.is-selected .optional-content-check { color: #fff; border-color: #af8337; background: #372910; }
.optional-content-copy { display: grid; gap: 3px; }.optional-content-copy strong { color: #c6cad2; font-size: 10px; }.optional-content-copy small { color: #c6cad2; font-size: 9px; }.option-badge { margin-left: 5px; padding: 1px 5px; color: #c6cad2; border: 1px solid #454e63; border-radius: 8px; font-size: 7px; font-weight: bold; text-transform: uppercase; }
.option-tooltip { width: 18px; height: 18px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #181b23; font: bold 10px/1 sans-serif; cursor: help; outline-offset: 2px; }.option-tooltip-popover { position: absolute; z-index: 4; right: 7px; bottom: calc(100% + 7px); width: min(310px, calc(100% - 14px)); padding: 8px 10px; color: #fff; border-radius: 4px; background: #304956; box-shadow: 0 4px 14px rgba(27,48,60,.22); font-size: 8px; line-height: 1.5; opacity: 0; visibility: hidden; transform: translateY(3px); transition: .12s; pointer-events: none; }.option-tooltip:hover + .option-tooltip-popover, .option-tooltip:focus + .option-tooltip-popover { opacity: 1; visibility: visible; transform: none; }
.space-warning { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 8px 10px; color: #cea87a; border: 1px solid #454e63; background: #765a19; border-radius: 4px; }.space-warning > span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #432d0f; font-weight: bold; }.space-warning p { margin: 0; font-size: 8px; line-height: 1.4; }
.wizard-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; padding-top: 13px; border-top: 1px solid #475066; }
.button { min-height: 34px; padding: 0 17px; border-radius: 3px; font-weight: bold; font-size: 10px; cursor: pointer; }.button.primary { color: #fff; border: 1px solid #b8852e; background: linear-gradient(#352812, #372910); box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(33,70,93,.18); }.button.primary:hover { filter: brightness(1.08); }.button.secondary { color: #c6cad2; border: 1px solid #444c61; background: linear-gradient(#333333, #2a2f3c); }.button.small { min-height: 30px; padding: 0 12px; font-size: 9px; }
.button span { margin-left: 8px; font-size: 16px; vertical-align: -1px; }

.wizard-page.is-preparing > :not(.library-progress-panel) { display: none; }
.library-progress-panel { flex: 1; min-height: 0; flex-direction: column; justify-content: center; padding: 20px 13px 12px; }
.library-progress-panel:not([hidden]) { display: flex; }
.library-progress-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid #363d4d; border-radius: 5px; background: linear-gradient(#333333, #624a20); box-shadow: inset 1px 1px #fff, 1px 2px 4px rgba(0,0,0,.16); }
.library-progress-icon svg { width: 42px; height: 42px; }
.library-progress-heading h2 { margin: 3px 0 7px; color: #dcad5b; font: normal 27px/1.15 var(--display-font, "Trebuchet MS", Tahoma, sans-serif); }
.library-progress-heading > p:last-child { max-width: 500px; margin: 0; color: #c6cad2; font-size: 11px; line-height: 1.55; }
.library-progress-readout { display: flex; justify-content: space-between; gap: 18px; margin-top: 34px; color: #c6cad2; font-size: 10px; }
.library-progress-readout strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-progress-readout span { flex: 0 0 auto; color: #dcad5b; font-weight: bold; }
.library-progress-track { height: 24px; margin-top: 7px; padding: 3px; overflow: hidden; border: 1px solid #363d4d; background: #333333; box-shadow: inset 1px 1px 2px rgba(0,0,0,.16), 1px 1px #fff; }
.library-progress-track > span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #144125 0 12px, #124023 12px 14px, #14522b 14px 16px); box-shadow: inset 0 1px rgba(255,255,255,.55), inset 0 -1px rgba(22,100,20,.35); transition: width .18s linear; }
.library-progress-warning { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 10px 11px; color: #c6cad2; border: 1px solid #40485b; background: #2a2f3c; font-size: 9px; line-height: 1.4; }
.library-progress-warning > span:first-child { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #362812; font-family: Georgia, serif; font-weight: bold; }
.library-progress-warning strong { color: #c6cad2; }
.window-controls button:disabled { opacity: .6; cursor: wait; filter: grayscale(.35); }
.library-preparing .managed-storage-delete { pointer-events: none; opacity: .55; cursor: wait; }

.ready-page { padding-bottom: 20px; }.game-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: 14px; margin-top: 18px; }
.game-card { position: relative; min-height: 260px; overflow: hidden; border: 1px solid #9bab9b; border-radius: 5px; background: #34483f; box-shadow: 0 4px 12px rgba(32,58,48,.18); color: #fff; }
.game-card.zero-card { border-color: #9f765c; background: #4d332d; }
.game-card-art { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 85% 15%, rgba(229,193,101,.22), transparent 30%), linear-gradient(145deg, transparent 43%, rgba(255,255,255,.05) 43% 44%, transparent 44%), repeating-linear-gradient(120deg, rgba(255,255,255,.02) 0 2px, transparent 2px 9px); }
.game-card-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.game-card-art.has-retail-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,23,19,.04), rgba(32,23,19,.84)); }
.game-card-art.has-retail-art .target-ring, .game-card-art.has-retail-art .stripe-set, .game-card-art.has-retail-art .game-number { z-index: 1; }
.zero-card .game-card-art { background: radial-gradient(circle at 85% 15%, rgba(241,130,65,.28), transparent 30%), linear-gradient(145deg, transparent 43%, rgba(255,255,255,.05) 43% 44%, transparent 44%), repeating-linear-gradient(120deg, rgba(255,255,255,.02) 0 2px, transparent 2px 9px); }
.target-ring { position: absolute; right: -42px; top: -38px; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 46px rgba(255,255,255,.02); }.target-ring::before, .target-ring::after { content: ""; position: absolute; background: rgba(255,255,255,.16); }.target-ring::before { width: 1px; height: 190px; left: 84px; top: -10px; }.target-ring::after { height: 1px; width: 190px; top: 84px; left: -10px; }
.game-number { position: absolute; right: 12px; top: 10px; color: rgba(255,255,255,.25); font-size: 33px; font-weight: bold; }.stripe-set { position: absolute; left: -30px; bottom: 31px; width: 145px; height: 13px; transform: rotate(-18deg); background: repeating-linear-gradient(90deg, #d5b656 0 23px, transparent 23px 30px); opacity: .4; }
.zero-card .stripe-set { background: repeating-linear-gradient(90deg, #e77b42 0 23px, transparent 23px 30px); }
.game-card-content { position: absolute; inset: auto 18px 17px; }.game-kicker { color: #d7bd65; font-size: 8px; font-weight: bold; letter-spacing: 1.4px; }.zero-card .game-kicker { color: #e89a69; }.game-card h2 { margin: 5px 0 2px; font: bold 25px/1 Arial, sans-serif; letter-spacing: 1px; }.game-card p { margin: 0 0 14px; color: rgba(255,255,255,.65); font-size: 9px; }
.launch-button { width: 100%; min-height: 34px; color: #2f463c; background: #e5c96e; border: 1px solid #f8e7a8; border-radius: 3px; box-shadow: inset 0 -2px rgba(100,74,20,.15); font-weight: bold; font-size: 10px; cursor: pointer; }.launch-button.accent { color: #fff; background: #d86e39; border-color: #eea076; }.launch-button span { margin-right: 6px; }.launch-button:hover { filter: brightness(1.08); }
.ready-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: #71838d; font-size: 9px; }.ready-footer .text-button { margin: 0; }.online-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #5aa36a; }

.explorer-toolbar { min-height: 45px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: linear-gradient(#5f4d2e, #2a2f3c); border-bottom: 1px solid #454e63; }
.nav-buttons { display: flex; gap: 3px; }.nav-buttons button { width: 26px; height: 27px; border: 1px solid #434b5f; background: linear-gradient(#333333, #2a2f3c); border-radius: 3px; color: #c6cad2; }.nav-buttons button:disabled { color: #b8c2c8; }
.address-bar { flex: 1; height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #41495a; background: #333333; box-shadow: inset 0 1px 2px rgba(34,62,80,.08); color: #c6cad2; font-size: 10px; }.address-bar svg { width: 20px; height: 20px; }.address-bar b { color: #c6cad2; }
.search-box { width: 170px; height: 28px; display: flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid #41495a; background: #333333; }.search-box span { font-size: 18px; color: #c6cad2; }.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; font-size: 9px; }
.explorer-content { flex: 1; min-height: 0; display: grid; grid-template-columns: 165px 1fr; }
.explorer-sidebar { padding: 15px 9px; background: linear-gradient(90deg, #5a492b, #5c4b2c); border-right: 1px solid #475066; }.explorer-sidebar h3 { margin: 3px 9px 7px; color: #c6cad2; font-size: 8px; letter-spacing: 1px; }.explorer-sidebar button { width: 100%; min-height: 31px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; border-radius: 3px; color: #c6cad2; background: transparent; text-align: left; font-size: 10px; }.explorer-sidebar button.is-selected { color: #e2bb77; background: #554427; font-weight: bold; }.explorer-sidebar button > svg { width: 21px; height: 21px; }.explorer-sidebar button > span:last-child:not(.mini-game-icon) { margin-left: auto; color: #c6cad2; font-size: 8px; }.mini-game-icon { width: 21px; height: 21px; display: grid; place-items: center; color: #fff; background: #2f8a4f; border-radius: 3px; font-size: 8px; font-weight: bold; }.mini-game-icon.zero { background: #3b1a16; }
.storage-meter-small { position: absolute; left: 13px; bottom: 15px; width: 135px; color: #c6cad2; }.storage-meter-small div { display: flex; justify-content: space-between; font-size: 7px; }.storage-meter-small b { font-weight: normal; }.storage-meter-small > i { display: block; height: 4px; margin-top: 5px; background: #262b36; border-radius: 5px; overflow: hidden; }.storage-meter-small > i span { display: block; width: 72%; height: 100%; background: #302717; }
.file-area { min-width: 0; display: flex; flex-direction: column; background: #333333; }
.virtual-file-panel { display: contents; }.virtual-file-panel[hidden] { display: none; }
.file-actions { min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-bottom: 1px solid #475066; }.toolbar-button { min-height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #454d62; border-radius: 3px; background: linear-gradient(#333333, #2a2f3c); color: #c6cad2; font-size: 9px; cursor: pointer; }.toolbar-button svg { width: 15px; height: 15px; }.toolbar-button.primary-lite { color: #e5c389; border-color: #c2a470; background: #6a4f1f; }.toolbar-button.danger-text { color: #df9890; }.view-toggle { margin-left: auto; display: flex; }.view-toggle button { width: 26px; height: 27px; border: 1px solid #464e60; background: #2a2f3c; color: #c6cad2; }.view-toggle .is-selected { color: #e5c48c; background: #5f4922; }
.file-list-head, .file-row { display: grid; grid-template-columns: 28px minmax(145px, 1.7fr) minmax(80px, .8fr) minmax(92px, .9fr) 62px 30px; align-items: center; }.file-list-head { min-height: 27px; color: #c6cad2; background: #2a2f3c; border-bottom: 1px solid #475066; font-size: 8px; }.file-list-head span { padding: 0 7px; border-right: 1px solid #475066; }
.file-list { flex: 1; min-height: 0; overflow: auto; }.file-row { min-height: 43px; border-bottom: 1px solid #475066; color: #c6cad2; font-size: 9px; cursor: default; }.file-row:hover { background: #674e22; }.file-row.is-selected { background: #5e4824; color: #d4b57e; }.file-row > span { padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.file-check { width: 13px; height: 13px; margin: auto; border: 1px solid #414757; background: #333333; }.file-row.is-selected .file-check { border-color: #aa813c; background: #362912; box-shadow: inset 0 0 0 3px #fff; }.file-name { display: flex; align-items: center; gap: 7px; min-width: 0; }.file-name svg { flex: 0 0 auto; width: 22px; height: 22px; }.file-name strong { overflow: hidden; text-overflow: ellipsis; font-size: 9px; }.file-type { padding: 3px 5px; border-radius: 3px; background: #24603a; color: #8ad8a7; font-size: 7px; font-weight: bold; }.file-type.zero { background: #653c26; color: #df9790; }.file-row .file-download { border: 0; background: transparent; color: #dccbae; cursor: pointer; }.file-row .file-download svg { width: 14px; height: 14px; }
.file-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); align-content: start; gap: 8px; padding: 10px; }
.file-list.is-grid .file-row { position: relative; min-height: 105px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 9px 6px; border: 1px solid #475066; border-radius: 3px; text-align: center; }
.file-list.is-grid .file-row > span:first-child, .file-list.is-grid .file-row > span:nth-child(4), .file-list.is-grid .file-row > span:nth-child(5) { display: none; }
.file-list.is-grid .file-name { flex-direction: column; gap: 5px; }.file-list.is-grid .file-name svg { width: 36px; height: 36px; }.file-list.is-grid .file-name strong { max-width: 100%; }
.file-list.is-grid .file-row .file-download { position: absolute; top: 4px; right: 3px; }.file-list.is-grid .file-row > span:nth-child(3) { padding: 0; }
.file-status { min-height: 27px; display: flex; justify-content: space-between; align-items: center; padding: 0 11px; color: #c6cad2; background: #5d4b2d; border-top: 1px solid #475066; font-size: 8px; }.file-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 5px; color: #c6cad2; }.file-empty svg { width: 45px; height: 45px; opacity: .55; }.file-empty strong { color: #c6cad2; }
.managed-storage-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }.managed-storage-panel[hidden] { display: none; }
.managed-storage-panel > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #475066; background: #2a2f3c; }.managed-storage-panel > header > div:first-child { display: grid; gap: 3px; }.managed-storage-panel > header strong { color: #c6cad2; font-size: 11px; }.managed-storage-panel > header span { color: #c6cad2; font-size: 8px; }.managed-storage-panel > header > div:last-child { display: flex; gap: 6px; }
.managed-storage-list { flex: 1; min-height: 0; padding: 10px; overflow: auto; background: #2a2f3c; }.managed-storage-set { margin-bottom: 8px; border: 1px solid #475066; border-radius: 3px; background: #333333; }.managed-storage-set[open] { border-color: #3b4355; }.managed-storage-set > summary { min-height: 58px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 7px 9px; cursor: pointer; list-style: none; }.managed-storage-set > summary::-webkit-details-marker { display: none; }.managed-storage-set > summary::before { content: "▸"; width: 25px; height: 25px; display: grid; place-items: center; color: #fff; border-radius: 3px; background: #302717; font-size: 11px; }.managed-storage-set[open] > summary::before { content: "▾"; }.managed-storage-set-title { min-width: 0; display: grid; gap: 3px; }.managed-storage-set-title strong { color: #c6cad2; font-size: 10px; }.managed-storage-set-title span { overflow: hidden; color: #c7cad1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.managed-storage-state { padding: 3px 6px; color: #c6cad2; border-radius: 8px; background: #2a2f3c; font-size: 7px; text-transform: uppercase; }.managed-storage-state.stale, .managed-storage-state.orphaned { color: #d2a889; background: #754f19; }.managed-storage-state.active { color: #82d5a0; background: #24603a; }.managed-storage-size { min-width: 62px; color: #c6cad2; font-size: 9px; text-align: right; }.managed-storage-delete { min-height: 25px; margin-left: 7px; color: #df9890; border: 1px solid #40485c; border-radius: 2px; background: #6d2017; font-size: 8px; }.managed-storage-delete:disabled { color: #c7cad1; border-color: #475166; background: #2c303a; }.managed-storage-files { border-top: 1px solid #475066; }.managed-storage-file { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 10px; padding: 6px 12px 6px 42px; color: #c6cad2; border-bottom: 1px solid #495164; font-size: 8px; }.managed-storage-file:last-child { border-bottom: 0; }.managed-storage-file span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.managed-storage-file span:last-child { text-align: right; }

.programs-body { flex: 1; min-height: 0; overflow: auto; padding: 25px 30px; background: #5e4c2d; }.programs-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; }.programs-hero h1 { font-size: 22px; }.programs-hero p { max-width: 460px; }
.library-list { display: grid; gap: 7px; margin-top: 18px; }.library-row { min-height: 75px; display: grid; grid-template-columns: 47px 1fr 95px 70px 27px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #cbd7de; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(35,67,83,.05); }.library-game-art { width: 45px; height: 45px; display: grid; place-items: center; color: #e8cd6a; background: linear-gradient(145deg, #486252, #273d34); border-radius: 4px; font: bold 17px Arial; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }.library-game-art.zero { color: #ee9a68; background: linear-gradient(145deg, #724737, #3a2927); font-size: 13px; }.library-details { display: grid; gap: 3px; }.library-details > strong { color: #314a58; font-size: 11px; }.library-details > span { color: #7b8c95; font-size: 8px; }.library-details small { color: #4d805b; font-size: 8px; }.library-details small i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #5ca06b; }.library-details small b { font-weight: normal; }.library-size { display: grid; gap: 3px; color: #4f6875; font-size: 10px; text-align: right; }.library-size span { color: #83939b; font-size: 7px; }.row-launch { min-height: 28px; color: #fff; border: 1px solid #4e8060; border-radius: 3px; background: linear-gradient(#6c9b74, #4e7d5c); font-size: 9px; font-weight: bold; cursor: pointer; }.row-launch.accent { border-color: #a95732; background: linear-gradient(#dc814e, #b95f35); }.more-button { border: 0; background: transparent; color: #71848f; cursor: pointer; letter-spacing: 1px; }
.library-game-art { position: relative; overflow: hidden; }
.library-game-art > img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; }
.library-game-art.has-retail-art > span { display: none; }
.desktop-icon-art.game-art > img { position: absolute; inset: 1px; width: 41px; height: 41px; object-fit: contain; border: 1px solid rgba(255,255,255,.75); border-radius: 4px; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.desktop-icon-art.game-art.has-retail-art > svg { display: none; }
.storage-overview { min-height: 95px; display: flex; align-items: center; gap: 15px; margin-top: 15px; padding: 13px 16px; background: #5a492b; border: 1px solid #475066; border-radius: 4px; }.storage-donut { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#302717 0 4deg, #282d3a 4deg); }.storage-donut::before { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%; background: #5a492b; }.storage-donut span { z-index: 1; display: grid; text-align: center; color: #c6cad2; }.storage-donut b { font-size: 12px; }.storage-donut small { font-size: 6px; }.storage-copy { flex: 1; }.storage-copy > strong { color: #c6cad2; font-size: 10px; }.storage-copy p { margin: 4px 0 8px; color: #c6cad2; font-size: 8px; }.storage-legend { display: flex; gap: 12px; color: #c6cad2; font-size: 7px; }.storage-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; }.storage-legend .game-data { background: #302717; }.storage-legend .saves { background: #443310; }.storage-legend .available { background: #282d3a; }

.settings-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px 1fr; }.settings-nav { padding: 18px 10px; background: #5a492b; border-right: 1px solid #475066; }.settings-nav button { width: 100%; min-height: 34px; padding: 0 11px; border: 0; border-radius: 3px; background: transparent; color: #c6cad2; text-align: left; font-size: 9px; }.settings-nav button.is-selected { color: #e5c184; background: #534328; font-weight: bold; }.settings-panel { padding: 25px 28px; overflow: auto; }.settings-panel h1 { margin-bottom: 20px; font-size: 21px; }.setting-block { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #485165; }.setting-block > div:first-child { display: grid; gap: 4px; }.setting-block strong { color: #c6cad2; font-size: 10px; }.setting-block span { color: #c6cad2; font-size: 8px; }.setting-block select { min-width: 90px; height: 28px; color: #c6cad2; border: 1px solid #434b5e; background: #333333; font-size: 9px; }.wallpaper-options { display: flex !important; flex-direction: row !important; gap: 6px !important; }.wallpaper-swatch { width: 42px; height: 29px; border: 2px solid #575757; border-radius: 3px; box-shadow: 0 0 0 1px #adbdc6; }.wallpaper-swatch.is-selected { box-shadow: 0 0 0 2px #2a79aa; }.wallpaper-swatch.meadow { background: linear-gradient(#3a2d16 55%, #2f8a4f 56%); }.wallpaper-swatch.dusk { background: linear-gradient(#13151a 55%, #3b1a16 56%); }.wallpaper-swatch.slate { background: linear-gradient(#16181e 55%, #16181b 56%); }
.toggle-setting { cursor: pointer; }.toggle-setting input { position: absolute; opacity: 0; }.toggle { position: relative; width: 34px; height: 18px; flex: 0 0 auto; border-radius: 10px; background: #232831; transition: .15s; }.toggle::after { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: #eef2f6; box-shadow: 0 1px 3px rgba(40,62,75,.35); transition: .15s; }.toggle-setting input:checked + .toggle { background: #342814; }.toggle-setting input:checked + .toggle::after { transform: translateX(16px); }.reset-link { margin-top: 18px; color: #df9890; }

.about-body { flex: 1; padding: 28px 31px; overflow: auto; background: linear-gradient(135deg, #6d5120, #5b4a2c); }.about-brand { display: flex; align-items: center; gap: 19px; }.about-brand .brand-mark i:nth-child(1), .about-brand .brand-mark i:nth-child(3) { background: #322716; }.about-brand small { color: #c6cad2; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }.about-brand h1 { margin: 2px 0; color: #c2a470; font-size: 26px; letter-spacing: -.7px; }.about-brand p { margin: 0; color: #c7cad1; font-size: 8px; }.about-card { display: flex; gap: 12px; margin-top: 22px; padding: 13px; border: 1px solid #475066; border-radius: 4px; background: #333333; }.about-card svg { flex: 0 0 auto; width: 30px; height: 30px; }.about-card strong { color: #c6cad2; font-size: 10px; }.about-card p { margin: 4px 0 0; color: #c6cad2; font-size: 8px; line-height: 1.5; }.about-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0; }.about-facts div { display: grid; gap: 4px; padding: 0 12px; border-left: 1px solid #475066; }.about-facts div:first-child { padding-left: 0; border: 0; }.about-facts dt { color: #c6cad2; font-size: 7px; text-transform: uppercase; letter-spacing: .6px; }.about-facts dd { margin: 0; color: #c6cad2; font-size: 9px; }.about-build { display: grid; grid-template-columns: 1fr 1.5fr; margin: 0 0 16px; overflow: hidden; border: 1px solid #444d62; border-radius: 3px; background: #333333; }.about-build div { min-width: 0; padding: 9px 11px; }.about-build div + div { border-left: 1px solid #475066; }.about-build dt { color: #c6cad2; font-size: 7px; text-transform: uppercase; letter-spacing: .6px; }.about-build dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #cab083; font: 9px "Lucida Console", Consolas, monospace; }.about-build a { color: #e4c080; text-decoration: underline; }.about-build a[aria-disabled="true"] { color: #c6cad2; text-decoration: none; }.about-changelog { margin-bottom: 16px; border: 1px solid #475066; border-radius: 3px; background: #333333; }.about-changelog > header { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #475066; background: linear-gradient(#694f23, #5b492c); }.about-changelog h2 { margin: 0; color: #cdb58a; font-size: 10px; }.about-changelog > header a { color: #e4c080; font-size: 8px; }.about-changelog > div { max-height: 170px; overflow: auto; padding: 9px 11px; }.about-changelog section + section { margin-top: 10px; padding-top: 9px; border-top: 1px solid #475066; }.about-changelog h3 { margin: 0 0 6px; color: #c6cad2; font-size: 7px; text-transform: uppercase; letter-spacing: .5px; }.about-changelog ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }.about-changelog li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px; color: #c6cad2; font-size: 8px; line-height: 1.4; }.about-changelog li a { color: #e4c080; white-space: nowrap; }.about-changelog-empty, .about-changelog > div > p { margin: 0; color: #c6cad2; font-size: 8px; }.about-changelog .is-error { color: #df9890; }.about-legal { margin: 0; padding-top: 12px; border-top: 1px solid #475066; color: #c7cad1; font-size: 7px; line-height: 1.5; }

.start-menu { position: absolute; z-index: 10000; left: 4px; bottom: calc(var(--taskbar-safe-height) - 1px); width: 395px; overflow: hidden; border: 1px solid #b7852e; border-radius: 7px 7px 0 0; background: #5e4c2d; box-shadow: 5px -7px 28px rgba(15,40,55,.4); animation: startIn .13s ease-out; }
@keyframes startIn { from { opacity: 0; transform: translateY(8px); } }
.start-menu > header { height: 65px; display: flex; align-items: center; gap: 11px; padding: 8px 14px; color: #fff; background: linear-gradient(135deg, #372910, #372910); border-bottom: 2px solid #313847; box-shadow: inset 0 1px rgba(255,255,255,.35); }.user-avatar { width: 45px; height: 45px; display: grid; place-items: center; border: 2px solid #575757; border-radius: 5px; color: #cab083; background: linear-gradient(#5b4a13, #453511); font-size: 19px; font-weight: bold; }.start-menu header div { display: grid; gap: 3px; }.start-menu header strong { font-size: 12px; }.start-menu header div span { color: rgba(255,255,255,.75); font-size: 8px; }
.start-content { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 270px; }.start-primary { padding: 10px; background: #333333; }.start-primary button { width: 100%; min-height: 61px; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 4px; background: transparent; text-align: left; }.start-primary button:hover { background: #634b22; }.start-icon { width: 39px; height: 39px; display: grid; place-items: center; }.start-icon svg { width: 35px; height: 35px; }.start-primary button div { display: grid; gap: 4px; }.start-primary strong { color: #c6cad2; font-size: 10px; }.start-primary small { color: #c7cad1; font-size: 8px; }
.start-secondary { position: relative; padding: 12px 8px; background: #5a4828; border-left: 1px solid #475066; }.start-secondary > button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 3px; background: transparent; color: #ccb489; text-align: left; font-size: 9px; }.start-secondary > button:hover { background: #534327; }.start-secondary svg { width: 20px; height: 20px; }.start-storage { position: absolute; left: 13px; right: 13px; bottom: 15px; display: grid; grid-template-columns: 1fr auto; gap: 4px; color: #c6cad2; font-size: 7px; }.start-storage strong { font-weight: normal; }.start-storage i { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 5px; background: #252a35; }.start-storage i span { display: block; width: 72%; height: 100%; background: #302717; }.start-menu footer { height: 42px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; color: white; background: linear-gradient(#372910, #372910); border-top: 1px solid #b8852e; }.start-menu footer button { display: flex; align-items: center; gap: 6px; padding: 5px 9px; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; background: rgba(4,50,83,.23); font-size: 8px; }.start-menu footer svg { width: 17px; height: 17px; }

.taskbar { position: absolute; z-index: 9999; left: 0; right: 0; bottom: 0; height: var(--taskbar-safe-height); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; align-items: center; color: white; background: #12161c; border-top: 2px solid #e0a83a; box-shadow: 0 -2px 8px rgba(0,0,0,.35); }
.start-button { position: relative; align-self: stretch; min-width: 111px; display: flex; align-items: center; gap: 9px; padding: 0 17px 1px 15px; color: #fff; background: linear-gradient(120deg, #2f8a4f, #2f8a4f 58%, #2f8a4f); border: 0; border-right: 1px solid #2a2f3c; border-radius: 0 18px 18px 0; box-shadow: inset 0 1px rgba(255,255,255,.45), inset -2px 0 rgba(255,255,255,.15), 2px 0 5px rgba(16,55,78,.28); text-shadow: 0 1px #235b2f; font-size: 15px; font-style: italic; cursor: pointer; }.start-button:hover, .start-button.is-active { filter: brightness(1.08); }.start-glyph { display: flex; align-items: flex-end; gap: 2px; height: 22px; transform: skew(-11deg); }.start-glyph i { width: 6px; background: #333333; box-shadow: inset -1px 0 rgba(32,92,53,.3); }.start-glyph i:nth-child(1) { height: 11px; }.start-glyph i:nth-child(2) { height: 17px; background: #513e11; }.start-glyph i:nth-child(3) { height: 22px; }
.task-divider { width: 1px; height: 29px; margin: 0 6px 0 9px; background: rgba(0,50,89,.45); box-shadow: 1px 0 rgba(255,255,255,.2); }.task-buttons { min-width: 0; flex: 1; display: flex; align-items: center; gap: 4px; overflow: hidden; }.task-button { min-width: 120px; max-width: 180px; height: 33px; display: flex; align-items: center; gap: 7px; padding: 0 10px; color: #fff; background: linear-gradient(#352813, #372910); border: 1px solid #b8852e; border-radius: 3px; box-shadow: inset 0 1px rgba(255,255,255,.22); text-shadow: 0 1px #1c557c; font-size: 9px; white-space: nowrap; overflow: hidden; cursor: pointer; }.task-button.is-active { background: linear-gradient(#372910, #372910); box-shadow: inset 1px 2px 4px rgba(4,41,70,.35); }.task-button svg { flex: 0 0 auto; width: 20px; height: 20px; }.task-button span { overflow: hidden; text-overflow: ellipsis; }
.tray { align-self: stretch; display: flex; align-items: center; padding: 0 10px 0 12px; background: linear-gradient(180deg, #372910, #372910 52%, #372910); border-left: 1px solid #bf9245; box-shadow: inset 2px 0 rgba(255,255,255,.12); }.tray button { width: 28px; height: 29px; padding: 4px; border: 0; background: transparent; }.tray svg { width: 20px; height: 20px; filter: drop-shadow(0 1px rgba(15,62,83,.45)); }.tray-clock { min-width: 53px; display: grid; justify-items: center; gap: 1px; margin-left: 4px; color: white; text-shadow: 0 1px #176083; }.tray-clock strong { font-size: 10px; }.tray-clock span { font-size: 7px; opacity: .8; }

.launch-overlay { position: absolute; z-index: 20000; inset: 0; overflow: hidden; color: #fff; background: #0b171b; }
.launch-overlay::before { content: ""; position: absolute; inset: 0; opacity: .45; background: radial-gradient(circle at 50% 43%, #264b49, transparent 35%), linear-gradient(145deg, transparent 50%, rgba(189,135,52,.12) 50% 51%, transparent 51%); }.runtime-grid { position: absolute; inset: 35% -10% -40%; opacity: .12; transform: perspective(500px) rotateX(55deg); background-image: linear-gradient(#8dc3b4 1px, transparent 1px), linear-gradient(90deg, #8dc3b4 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(transparent, #000); }.launch-loader { position: absolute; left: 50%; top: 50%; width: min(420px, 82vw); transform: translate(-50%, -50%); text-align: center; }.runtime-emblem { position: relative; width: 76px; height: 76px; margin: 0 auto 28px; display: grid; place-items: center; }.runtime-emblem span { position: absolute; inset: 4px; border: 1px solid rgba(222,182,91,.45); transform: rotate(45deg); animation: slowSpin 6s linear infinite; }.runtime-emblem::before, .runtime-emblem::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(255,255,255,.2); transform: rotate(45deg); }.runtime-emblem::after { inset: 23px; background: #453511; border: 0; }.runtime-emblem i { z-index: 1; color: #c2a470; font-style: normal; font-weight: bold; font-size: 15px; }.runtime-emblem span::before, .runtime-emblem span::after { content: ""; position: absolute; background: #4b3a10; }.runtime-emblem span::before { width: 9px; height: 1px; left: -5px; top: 50%; }.runtime-emblem span::after { height: 9px; width: 1px; top: -5px; left: 50%; }
@keyframes slowSpin { to { transform: rotate(405deg); } }.runtime-label { margin: 0 0 8px; color: #e9d6a4; font-size: 9px; font-weight: bold; letter-spacing: 2.7px; }.launch-loader h1 { margin: 0; font: bold 31px Arial, sans-serif; letter-spacing: 3px; }.launch-loader > p:nth-of-type(2) { margin: 12px 0 20px; color: #c6cad2; font-size: 10px; }.launch-progress { height: 4px; overflow: hidden; background: #28383b; }.launch-progress span { display: block; width: 5%; height: 100%; background: linear-gradient(90deg, #3e2c13, #564512); transition: width .4s ease; box-shadow: 0 0 12px rgba(235,197,99,.45); }.launch-stages { display: flex; justify-content: space-between; margin-top: 10px; color: #c6cad2; font-size: 8px; text-transform: uppercase; letter-spacing: .7px; }.launch-stages .is-done { color: #e9d7a4; }
.runtime-preview { position: absolute; inset: 0; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 46%, rgba(55,91,80,.75), transparent 28%), linear-gradient(135deg, #111d20, #192926 52%, #251e1b); animation: runtimeIn .6s ease-out; }.runtime-preview::before { content: ""; position: absolute; inset: 0; opacity: .09; background: repeating-linear-gradient(0deg, transparent 0 3px, #333333 3px 4px), linear-gradient(115deg, transparent 50%, #443010 50% 50.3%, transparent 50.3%); }.preview-top, .preview-bottom { z-index: 1; display: flex; justify-content: space-between; padding: 22px 28px; color: #c8cad0; font-size: 8px; letter-spacing: 1.2px; }.preview-center { z-index: 1; margin: auto; text-align: center; }.preview-center > p:first-child { margin: 0 0 11px; color: #ead4a3; font-size: 9px; letter-spacing: 2.8px; }.preview-center h1 { margin: 0; font: bold clamp(35px, 6vw, 73px)/1 Arial, sans-serif; letter-spacing: 7px; text-shadow: 0 4px 30px rgba(0,0,0,.45); }.preview-rule { display: block; width: 65px; height: 2px; margin: 22px auto; background: #453512; }.preview-copy { color: #c8cad0; font-size: 10px; }.runtime-stats { display: flex; justify-content: center; gap: 45px; margin-top: 34px; }.runtime-stats span { display: grid; gap: 4px; color: #c8cad0; font-size: 7px; letter-spacing: 1px; }.runtime-stats b { color: #d7dcda; font-size: 12px; }.preview-bottom { align-items: center; }.preview-bottom button { padding: 9px 16px; color: #edd8a1; border: 1px solid #2a2f3c; background: rgba(83,66,35,.25); border-radius: 3px; font-size: 9px; cursor: pointer; }.preview-bottom button:hover { background: rgba(134,100,42,.32); }
@keyframes runtimeIn { from { opacity: 0; transform: scale(1.03); } }

.toast-region { position: absolute; z-index: 30000; right: 17px; bottom: 123px; display: grid; gap: 8px; pointer-events: none; }.toast { min-width: 260px; max-width: 340px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; color: #eef6f7; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; background: rgba(22,55,69,.94); box-shadow: 0 8px 24px rgba(12,35,46,.32); animation: toastIn .18s ease-out; backdrop-filter: blur(8px); }.toast.is-leaving { opacity: 0; transform: translateX(15px); transition: .2s; }.toast-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #53c67d; background: #1b482c; font-weight: bold; }.toast div { display: grid; gap: 2px; }.toast strong { font-size: 10px; }.toast span { color: rgba(255,255,255,.7); font-size: 8px; }.toast.warning .toast-icon { color: #d09f62; background: #503d11; }
@keyframes toastIn { from { opacity: 0; transform: translateX(15px); } }

.storage-donut { position: relative; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

/* Project New Shoes XP-material pass: original identity over period-authentic desktop chrome. */
.desktop[data-wallpaper="command"] .wallpaper-art {
  background: #182b2d url("./assets/zeroh-command-desert.webp") center center / cover no-repeat;
  filter: none;
}
.desktop[data-wallpaper="command"] .wallpaper-art::before {
  background: linear-gradient(90deg, rgba(8, 23, 29, .14), transparent 44%), linear-gradient(180deg, rgba(22, 89, 145, .07), rgba(13, 26, 27, .12));
}
.desktop[data-wallpaper="command"] .sun-glow,
.desktop[data-wallpaper="command"] .ridge,
.desktop[data-wallpaper="command"] .terrain-grid { display: none; }
.wallpaper-art { transition: none; }
.terrain-grid, .wizard-side::after, .runtime-grid { -webkit-mask-image: none; mask-image: none; }
.toast { -webkit-backdrop-filter: none; backdrop-filter: none; }

.desktop-icons { top: 13px; left: 10px; gap: 7px; }
.desktop-icon { width: 92px; min-height: 78px; padding: 5px 3px; border-radius: 2px; font-weight: normal; }
.desktop-icon:hover, .desktop-icon:focus { background: rgba(27, 83, 168, .55); border-color: rgba(182, 215, 255, .82); }
.desktop-icon-art { width: 46px; height: 46px; margin-bottom: 3px; }
.desktop-icon-art.game-art { position: relative; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .55)); }
.desktop-icon-art.game-art svg { width: 44px; height: 44px; }
.shortcut-arrow { position: absolute; left: 0; bottom: 0; width: 14px; height: 14px; display: grid; place-items: center; color: #dcac5a; background: #333333; border: 1px solid #343b4b; border-radius: 1px; font: bold 9px Arial, sans-serif; text-shadow: none; }


.window { contain: layout paint; }
.titlebar-title { gap: 6px; font-size: 13px; letter-spacing: -.1px; }
.titlebar-app-icon { width: 22px; height: 22px; padding: 1px; background: transparent; }

.setup-body { grid-template-columns: 252px 1fr; background: #333333; }
.wizard-side { padding: 27px 24px 21px; background: #173b52 url("./assets/zeroh-command-desert.webp") 72% center / auto 100% no-repeat; }
.wizard-side::before { inset: 0; width: auto; height: auto; left: 0; bottom: 0; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(9, 29, 38, .18), rgba(8, 26, 35, .9) 72%), linear-gradient(90deg, rgba(10, 38, 52, .7), rgba(10, 38, 52, .18)); box-shadow: none; }
.wizard-side::after { opacity: .16; background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.16) 4px 5px); background-size: auto; }
.wizard-brand { padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.26); font-family: Arial, sans-serif; }
.wizard-brand div { font-size: 13px; }.wizard-brand strong { color: #eed6a0; font-size: 23px; line-height: .85; }
.wizard-side-copy { margin: 25px 0 35px; color: #fff; font-family: Arial, sans-serif; font-size: 22px; font-weight: bold; line-height: 1.18; text-shadow: 0 2px 5px #071b21; }
.wizard-steps li { opacity: .58; }.wizard-steps li > span { background: #16476f; border: 1px solid #d6a95c; box-shadow: inset 0 0 0 1px #0b2f52; }.wizard-steps li.is-current > span { color: #e0ab52; background: linear-gradient(#5f4f14, #43320e); border-color: #475066; }.wizard-steps li.is-complete > span { background: linear-gradient(#183f26, #2f8a4f); border-color: #475066; }
.wasm-badge { color: rgba(255,255,255,.82); }

.wizard-main { background: #333333; }
.wizard-page { padding: 28px 38px 23px; }
.wizard-heading h1 { color: #dcad5b; font-family: var(--display-font, "Trebuchet MS", Tahoma, sans-serif); font-size: 29px; font-weight: normal; }
.wizard-heading > p:last-child { color: #c6cad2; font-size: 11px; }
.eyebrow { color: #e9aa84; letter-spacing: 1.3px; }
.launcher-briefing { position: relative; min-height: 94px; display: flex; align-items: flex-end; justify-content: space-between; margin-top: 15px; padding: 14px 16px; overflow: hidden; color: #fff; border: 1px solid #2e3138; background: linear-gradient(90deg, rgba(16, 34, 35, .95), rgba(16, 34, 35, .16)), url("./assets/zeroh-command-desert.webp") 75% 55% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 1px 2px 3px rgba(0,0,0,.2); }
.launcher-briefing::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px); }
.launcher-briefing div, .launcher-briefing b { position: relative; z-index: 1; }
.launcher-briefing div { display: grid; gap: 4px; }.launcher-briefing span { color: #eed4a0; font-size: 8px; font-weight: bold; letter-spacing: 1.6px; }.launcher-briefing strong { font: bold 12px Arial, sans-serif; }.launcher-briefing b { color: rgba(255,255,255,.52); font-size: 8px; letter-spacing: 1px; }
.source-grid { gap: 10px; margin-top: 12px; }
.source-card { min-height: 91px; padding: 13px; }
.privacy-note { background: #2a2f3c; border: 1px solid #40485b; border-radius: 2px; color: #c9cbcf; box-shadow: inset 1px 1px #fff; }
.button, .toolbar-button, .row-launch { border-radius: 2px; }
.button.primary { border: 1px solid #b8852e; background: linear-gradient(#483615, #372910 52%, #372910); box-shadow: inset 1px 1px #b8dcff, inset -1px -1px #084783; }
.button.secondary, .toolbar-button { border-color: #363d4d; background: linear-gradient(#333333, #625925); box-shadow: inset 1px 1px #fff; }

.game-card { border: 1px solid #6c775c; border-radius: 2px; box-shadow: 2px 3px 7px rgba(0,0,0,.28); }
.game-card-art { background: linear-gradient(180deg, rgba(17, 35, 31, .08), rgba(17, 35, 31, .82)), url("./assets/zeroh-command-desert.webp") 66% center / cover no-repeat; }
.zero-card .game-card-art { background: linear-gradient(180deg, rgba(58, 29, 20, .05), rgba(58, 29, 20, .84)), url("./assets/zeroh-command-desert.webp") 91% center / cover no-repeat; }
.game-card h2 { text-shadow: 0 2px 3px rgba(0,0,0,.75); }
.launch-button { border-radius: 2px; box-shadow: inset 1px 1px rgba(255,255,255,.55), inset -1px -1px rgba(81,56,8,.4); }

.explorer-toolbar, .file-actions { background: #625925; }
.explorer-sidebar { color: #dcac5a; background: linear-gradient(180deg, #4d3916, #3a2e19); border-right: 1px solid #a17f45; }
.explorer-sidebar h3 { margin: 4px 5px 0; padding: 6px 8px; color: #e4bf80; background: linear-gradient(90deg, #333333, #654b1d); border-radius: 4px 4px 0 0; font-size: 9px; }
.explorer-sidebar button { min-height: 29px; color: #e1b770; background: #654b1d; border-radius: 0; }
.explorer-sidebar button.is-selected { color: #dfb46a; background: #333333; }
.storage-meter-small { color: #fff; }
.programs-body, .settings-panel, .about-body { background: #333333; }
.programs-hero h1, .settings-panel h1, .about-brand h1 { color: #dcad5b; font-family: var(--display-font, "Trebuchet MS", Tahoma, sans-serif); font-weight: normal; }
.library-row, .storage-overview, .about-card { border-radius: 2px; }
.settings-nav { background: #644a1d; border-right-color: #7f9db9; }.settings-nav button.is-selected { color: #fff; background: #372910; }
.wallpaper-swatch.command { background: url("./assets/zeroh-command-desert.webp") center / cover; }

.start-menu { border: 2px solid #b8852e; border-bottom: 0; border-radius: 7px 7px 0 0; background: #333333; box-shadow: 4px -5px 15px rgba(0,0,0,.42); }
.start-menu > header { height: 67px; background: linear-gradient(180deg, #3e2e12, #372910 58%, #382910); border-bottom: 2px solid #323847; box-shadow: inset 0 1px #76bbff; }
.user-avatar { border-radius: 3px; background: linear-gradient(#5c4913, #403111); }
.start-primary button:hover { background: #372910; }.start-primary button:hover strong, .start-primary button:hover small { color: #fff; }
.start-secondary { background: #644a1d; border-left-color: #96b8e5; }.start-secondary > button:hover { color: #fff; background: #372910; }
.start-menu footer { background: linear-gradient(#3c2c11, #372910); }

.taskbar { background: #12161c; border-top-color: #e0a83a; box-shadow: 0 -2px 6px rgba(0,0,0,.35); }
.start-button { min-width: 106px; padding-left: 12px; color: #fff; background: linear-gradient(135deg, #183e26, #2f8a4f 48%, #143e23 78%, #2f8a4f); border-right-color: #1f6829; border-radius: 0 16px 16px 0; box-shadow: inset 0 1px #b6e7a5, inset -2px -2px rgba(19,83,31,.3), 2px 0 4px rgba(0,0,0,.25); font: italic bold 14px "Trebuchet MS", Arial, sans-serif; }
.task-button { height: 29px; background: linear-gradient(#3e2e12, #372910); border-color: #b8852e; border-radius: 2px; box-shadow: inset 1px 1px rgba(255,255,255,.24), inset -1px -1px rgba(0,48,124,.34); }
.task-button.is-active { background: linear-gradient(#372910, #372910); box-shadow: inset 1px 2px 3px rgba(0,25,80,.55); }
.tray { background: linear-gradient(180deg, #3a2b11, #372910 55%, #372910); border-left-color: #68c7f3; }

.window { transition: opacity .12s ease-out; }
.window.dragging { transition: none; will-change: transform; }

/* Coordinate-safe desktop sizing and a tighter XP-proportioned taskbar. */
.window > :not(.titlebar) { zoom: var(--ui-scale); }
.toast-region { bottom: 20px; }

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  nav.rail { flex-basis: 148px; }
  .rail-item { min-height: 44px; padding: 7px 10px; font-size: 11.5px; }
  .topbar-shutdown { width: 44px; height: 44px; }
  .rail-group-label { padding: 10px 10px 4px; }
  .topbar-readouts .topbar-readout:not(.topbar-clock) { display: none; }
  .topbar-sub { display: none; }
  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar-word { font-size: 13px; }
  .setup-body { grid-template-columns: 1fr; }.wizard-side { display: none; }.wizard-page { padding: 25px 22px 20px; }.source-grid, .game-cards { grid-template-columns: 1fr; }.game-card { min-height: 185px; }.wizard-heading h1 { font-size: 22px; }
  .explorer-content { grid-template-columns: 1fr; }.explorer-sidebar { display: none; }.search-box { width: 115px; }.file-list-head, .file-row { grid-template-columns: 22px minmax(90px, 1fr) 65px 48px 24px; }.file-list-head span:nth-child(4), .file-row > span:nth-child(4) { display: none; }
  .programs-body { padding: 18px 15px; }.library-row { grid-template-columns: 42px 1fr 63px; }.library-size, .more-button { display: none; }.storage-overview { align-items: flex-start; }.storage-overview > .button { display: none; }
  .settings-panel { padding: 22px 20px; }
  .launcher-quick-settings, .ownership-help > header { align-items: stretch; flex-direction: column; }
  .purchase-links { display: grid; grid-template-columns: 1fr 1fr; }
  .purchase-links a { justify-content: center; }
  .ready-footer { flex-wrap: wrap; gap: 8px; }
}

@media (max-height: 680px) and (min-width: 761px) {
  .wizard-page { padding-top: 23px; padding-bottom: 18px; }.wizard-side { padding-top: 22px; }.wizard-side-copy { margin: 22px 0; }.source-grid { margin-top: 17px; }.source-card { min-height: 88px; }.game-card { min-height: 220px; }.wasm-badge { display: none; }
}

/* Project New Shoes identity and interactive desktop applications. */
.desktop-icons { grid-template-rows: repeat(8, 78px); grid-auto-flow: column; grid-auto-columns: 92px; }
.desktop-icon-art.app-art svg { width: 43px; height: 43px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.45)); }
.desktop-icon-art.github-art { position: relative; width: 43px; height: 43px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.desktop-icon-art.github-art svg { width: 39px; height: 39px; fill: #181717; filter: none; }
.desktop-icon-art.launcher-art { position: relative; }
.desktop-icon-art.launcher-art img { width: 45px; height: 45px; max-width: none; object-fit: contain; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.55)); }
.zeroh-title-icon { width: 26px; }
.wizard-brand { justify-content: center; gap: 11px; align-items: center; }
.zeroh-mark { position: relative; z-index: 1; width: 44px; height: 50px; flex: 0 0 44px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.wizard-brand > div { display: grid; gap: 0; font-family: "Arial Narrow", Impact, sans-serif; line-height: .88; }
.wizard-brand > div > span { color: #edf2ed; font-size: 25px; font-weight: 900; letter-spacing: .8px; }
.wizard-brand .brand-h { color: #eebba0; }
.wizard-brand > div > strong { margin-top: 5px; color: #ead4a3; font: bold 7px Tahoma, sans-serif; letter-spacing: 1.4px; white-space: nowrap; }
.wizard-brand::after { content: ""; position: absolute; left: 24px; right: 24px; top: 87px; height: 4px; opacity: .65; background: repeating-linear-gradient(135deg, #46340f 0 7px, #15252a 7px 14px); }
.wizard-side-copy { margin-top: 31px; text-transform: uppercase; letter-spacing: -.5px; }
.wizard-side-copy::after { content: "UPLINK // BROWSER NODE 01"; display: block; margin-top: 12px; color: #ead5a4; font: bold 7px Tahoma, sans-serif; letter-spacing: 1.5px; }
.start-command-mark { width: 29px; height: 29px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.about-brand h1 { font-family: "Arial Narrow", Impact, sans-serif; font-weight: 900; letter-spacing: 1px; }.about-brand h1 span { color: #e89187; }
.runtime-emblem i { font-size: 11px; letter-spacing: -.5px; }
.identity-lab-button { min-height: 29px; padding: 0 11px; color: #fff; border: 1px solid #b8852e; border-radius: 2px; background: linear-gradient(#402f13, #372910); font-size: 9px; box-shadow: inset 0 1px rgba(255,255,255,.35); }
.identity-lab-button:hover { filter: brightness(1.08); }
.task-button > img { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; }
.launcher-logo-slot { display: grid; place-items: center; flex: 0 0 auto; }
.about-launcher-logo { width: 73px; height: 64px; }
.about-launcher-logo img { width: 70px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }

.start-menu { max-height: calc(var(--desktop-viewport-height) - var(--taskbar-safe-height) - 5px); }
.start-content { height: min(332px, calc(var(--desktop-viewport-height) - var(--taskbar-safe-height) - 120px)); min-height: 0; }
.start-primary, .start-secondary { min-height: 0; }
.start-primary { overflow: auto; }
.start-primary button { min-height: 51px; }
.start-primary .start-icon svg[href] { width: 35px; }
.start-primary .start-icon img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }

.explorer-sidebar { position: relative; }
.explorer-sidebar button > svg { flex: 0 0 auto; }
.address-bar button { min-width: 0; padding: 0; overflow: hidden; color: #c6cad2; border: 0; background: transparent; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.address-bar button:hover { color: #e3bd7b; text-decoration: underline; }
.file-row { user-select: none; }
.file-row .file-type { display: inline-block; max-width: 88px; overflow: hidden; color: #c6cad2; background: #2a2f3c; text-overflow: ellipsis; white-space: nowrap; }
.file-prompt { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; background: rgba(20, 35, 44, .32); }
.file-prompt form { width: 290px; padding: 15px; border: 2px solid #b8852e; border-radius: 5px; background: #625925; box-shadow: 4px 6px 20px rgba(0,0,0,.42), inset 0 0 0 1px #fff; }
.file-prompt label { display: block; margin-bottom: 6px; color: #c2a470; font-size: 10px; }
.file-prompt input { width: 100%; height: 28px; padding: 0 7px; color: #c2a470; border: 1px solid #363d4d; background: #333333; }
.file-prompt form div { display: flex; justify-content: flex-end; gap: 7px; margin-top: 13px; }

.app-menu-bar { min-height: 25px; display: flex; align-items: center; gap: 2px; padding: 1px 4px; border-bottom: 1px solid #3d414b; background: #625925; }
.app-menu-bar button { min-height: 21px; padding: 0 7px; border: 0; background: transparent; color: #d2d5db; font-size: 10px; }
.app-menu-bar button:hover { color: #fff; background: #372910; }
.notepad-toolbar { min-height: 37px; display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: #625925; border-bottom: 1px solid #3d414b; }
.notepad-toolbar label { display: flex; align-items: center; gap: 6px; color: #c6cad2; font-size: 9px; }
.notepad-toolbar input { width: 180px; height: 25px; padding: 0 6px; border: 1px solid #363d4d; background: #333333; }
.notepad-toolbar button, .browser-toolbar > button, .browser-toolbar form button { height: 25px; min-width: 47px; border: 1px solid #363d4d; border-radius: 2px; background: linear-gradient(#333333, #625925); box-shadow: inset 1px 1px #fff; font-size: 9px; }
.notepad-editor { flex: 1; min-height: 0; width: 100%; padding: 5px 7px; resize: none; color: #eeeeee; border: 0; outline: 0; background: #333333; font: 13px/1.35 "Lucida Console", Consolas, monospace; white-space: pre-wrap; user-select: text; }
.notepad-editor.no-wrap { white-space: pre; overflow: auto; }
.notepad-status { min-height: 23px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; color: #c6cad2; border-top: 1px solid #3d414b; background: #625925; font-size: 8px; }

.browser-window { background: #625925; }
.browser-toolbar { min-height: 40px; display: flex; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid #3e424a; background: #625925; }
.browser-toolbar > button { min-width: 29px; width: 29px; padding: 0; font-size: 17px; font-weight: bold; }
.browser-toolbar form { flex: 1; min-width: 0; height: 27px; display: flex; align-items: center; gap: 5px; }
.browser-toolbar form span { color: #c6cad2; font-size: 9px; }
.browser-toolbar form input { flex: 1; min-width: 0; height: 27px; padding: 0 7px; color: #c2a470; border: 1px solid #363d4d; background: #333333; font-size: 10px; user-select: text; }
.browser-toolbar form button { min-width: 35px; }
.browser-favorites { min-height: 29px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-bottom: 1px solid #3e424a; background: #625925; }
.browser-favorites > span { margin-right: 7px; color: #cccccc; font-size: 9px; }
.browser-favorites button { padding: 3px 8px; color: #e3be7d; border: 0; background: transparent; font-size: 9px; }
.browser-favorites button:hover { background: #644a1d; }
.browser-page, .browser-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #333333; overflow: auto; user-select: text; }
.browser-status { min-height: 22px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; color: #c6cad2; border-top: 1px solid #3e424a; background: #625925; font-size: 8px; }
.net-home { min-height: 100%; color: #eaf0ed; background: #102126 url("./assets/zeroh-command-desert.webp") center / cover no-repeat; }
.net-hero { min-height: 255px; display: grid; align-content: center; justify-items: center; padding: 30px; text-align: center; background: linear-gradient(180deg, rgba(8,22,26,.35), rgba(8,22,26,.92)); }
.net-mark svg { width: 95px; height: 72px; }.net-hero p { margin: 8px 0 5px; color: #eed4a0; font-size: 9px; font-weight: bold; letter-spacing: 2px; }.net-hero h1 { margin: 0; font: 900 43px/1 "Arial Narrow", Impact, sans-serif; letter-spacing: 4px; }.net-hero > span { margin-top: 8px; color: #c7cad1; font-size: 10px; }
.net-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #111318; }
.net-cards button { min-height: 125px; display: grid; align-content: center; justify-items: start; gap: 5px; padding: 20px; color: #dce7e4; border: 0; background: rgba(12,31,35,.96); text-align: left; }.net-cards button:hover { background: #1d3d40; }.net-cards b { color: #ebd3a2; font-size: 8px; }.net-cards strong { font: bold 12px Arial, sans-serif; letter-spacing: .6px; }.net-cards span { color: #c7cad1; font-size: 9px; }.net-home footer { padding: 13px; color: #c8cad0; background: #0b191d; text-align: center; font-size: 7px; letter-spacing: 1.4px; }
.net-document, .net-status-page { min-height: 100%; color: #c6cad2; background: #685927; }.net-document header, .net-status-page header { padding: 30px 38px 25px; color: #fff; background: linear-gradient(100deg, #152d34, #315158); border-bottom: 5px solid #2f3544; }.net-document header span, .net-status-page header span { color: #eed5a0; font-size: 8px; font-weight: bold; letter-spacing: 1.6px; }.net-document h1, .net-status-page h1 { margin: 6px 0 0; font: 900 26px "Arial Narrow", Arial, sans-serif; text-transform: uppercase; }.net-document section { max-width: 720px; padding: 25px 38px; }.net-document h2 { margin: 0 0 5px; color: #e1968e; font-size: 13px; }.net-document p { margin: 0 0 20px; color: #c6cad2; font-size: 11px; line-height: 1.6; }.games-link-page section button { padding: 10px 16px; color: #fff; border: 1px solid #2a2f3c; background: #412110; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 25px 38px; }.status-grid article { position: relative; min-height: 105px; display: grid; gap: 4px; padding: 15px 15px 15px 27px; border: 1px solid #41495d; background: #333333; box-shadow: 1px 2px 3px rgba(0,0,0,.08); }.status-grid i { position: absolute; left: 10px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #2f8a4f; box-shadow: 0 0 0 3px rgba(47,138,79,.25); }.status-grid strong { color: #c6cad2; font-size: 8px; letter-spacing: 1px; }.status-grid b { color: #72d094; font: 900 18px "Arial Narrow", Arial, sans-serif; }.status-grid span { color: #c8cbd0; font-size: 8px; }

/* Deliberately tucked into the Start menu: personal install transfer wizard. */
.transfer-window { background: #2a2f3c; }
.transfer-body { flex: 1; min-height: 0; overflow: auto; color: #c6cad2; background: linear-gradient(135deg, #5f4d2e, #5b4a2c); }
.transfer-screen { min-height: 100%; padding: 28px 34px 24px; display: flex; flex-direction: column; }
.transfer-screen[hidden] { display: none; }
.transfer-heading { max-width: 590px; }
.transfer-heading h1, .transfer-complete h1 { margin: 0; color: #c2a470; font-size: 25px; letter-spacing: -.5px; }
.transfer-heading > p:last-child, .transfer-complete > p { margin: 8px 0 0; color: #c6cad2; font-size: 11px; line-height: 1.55; }
.transfer-choice-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 14px; margin: 20px 0; }
.transfer-choice-grid button { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 20px; color: #c6cad2; border: 1px solid #444d62; border-radius: 6px; background: linear-gradient(#333333, #5c4a2c); box-shadow: 0 3px 10px rgba(28,61,80,.09); }
.transfer-choice-grid button:hover { border-color: #a28045; background: #6c501f; transform: translateY(-1px); }
.transfer-choice-grid button > span { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(#332815, #372910); }
.transfer-choice-grid button:last-child > span { background: linear-gradient(#2f8a4f, #2f8a4f); }
.transfer-choice-grid svg { width: 29px; height: 29px; }
.transfer-choice-grid strong { font-size: 14px; }.transfer-choice-grid small { color: #c6cad2; font-size: 9px; }
.transfer-local-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; color: #88d7a5; border: 1px solid #475066; border-radius: 4px; background: #24603a; font-size: 9px; line-height: 1.45; }
.transfer-local-note svg { width: 22px; height: 22px; flex: 0 0 auto; }
.transfer-install-status { margin-top: 18px; padding: 10px 12px; color: #cdb58a; border: 1px solid #465065; border-radius: 4px; background: #634c25; font-size: 10px; }
.transfer-install-status.is-error { color: #db8d85; border-color: #454e63; background: #6d2017; }
.transfer-legal-check { position: relative; display: grid; grid-template-columns: 21px 1fr; align-items: center; gap: 10px; margin-top: 14px; padding: 13px; color: #c6cad2; border: 1px solid #475066; border-radius: 4px; background: #333333; cursor: pointer; font-size: 10px; line-height: 1.45; }
.transfer-legal-check input { position: absolute; opacity: 0; }.transfer-legal-check > span { width: 20px; height: 20px; display: grid; place-items: center; color: transparent; border: 1px solid #373e4d; border-radius: 3px; background: #333333; font-weight: bold; }.transfer-legal-check:has(input:checked) { border-color: #2b313e; background: #24603a; }.transfer-legal-check input:checked + span { color: #fff; border-color: #2a2f3c; background: #2f8a4f; }
.transfer-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 13px 0 0; padding: 0; border: 0; }.transfer-options legend { margin-bottom: 7px; color: #c6cad2; font-size: 9px; font-weight: bold; }.transfer-options label { position: relative; min-height: 55px; display: grid; grid-template-columns: 22px 29px 1fr; align-items: center; gap: 8px; padding: 9px; border: 1px solid #485166; border-radius: 4px; background: #333333; }.transfer-options label:has(input:checked) { border-color: #313746; background: #6a4e20; }.transfer-options label:has(input:disabled) { opacity: .55; }.transfer-options input { width: 15px; height: 15px; }.transfer-options svg { width: 27px; height: 27px; }.transfer-options span { display: grid; gap: 2px; }.transfer-options strong { font-size: 10px; }.transfer-options small { color: #c6cad2; font-size: 8px; }
.transfer-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; padding-top: 18px; }
.transfer-actions .button:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.transfer-pin { display: block; margin: 20px 0 14px; padding: 16px; color: #dcad5a; border: 1px solid #363d4d; border-radius: 5px; background: #333333; box-shadow: inset 0 0 0 3px #e4edf5; text-align: center; user-select: text; font: bold 32px/1.2 "Lucida Console", Consolas, monospace; letter-spacing: 5px; }
.transfer-secure-line { display: flex; align-items: center; gap: 9px; padding: 9px 11px; color: #77d298; border: 1px solid #475066; border-radius: 4px; background: #24603a; }.transfer-secure-line svg { width: 25px; height: 25px; }.transfer-secure-line span { display: grid; gap: 2px; }.transfer-secure-line strong { font-size: 9px; }.transfer-secure-line small { color: #c8cad0; font-size: 8px; }
.transfer-progress { margin-top: 16px; }.transfer-progress.large { margin-top: 28px; }.transfer-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 9px; }.transfer-progress > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transfer-progress > div:first-child span { color: #c6cad2; white-space: nowrap; }
.transfer-progress-track { height: 20px; padding: 2px; overflow: hidden; border: 1px solid #363d4d; background: #333333; box-shadow: inset 1px 1px 2px rgba(0,0,0,.12); }.transfer-progress-track > span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #164025 0 12px, #133f23 12px 14px, #14532b 14px 16px); transition: width .2s linear; }
.transfer-peer-list { max-height: 125px; margin-top: 12px; overflow: auto; border: 1px solid #475066; background: #333333; }.transfer-peer-list > p { margin: 0; padding: 14px; color: #c6cad2; text-align: center; font-size: 9px; }.transfer-peer { min-height: 43px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 8px 10px; border-bottom: 1px solid #475066; }.transfer-peer:last-child { border-bottom: 0; }.transfer-peer strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.transfer-peer span { color: #c6cad2; font-size: 8px; }.transfer-peer i { grid-column: 1 / 3; height: 4px; overflow: hidden; background: #292e3b; }.transfer-peer i b { display: block; width: 0; height: 100%; background: #2f8a4f; }
.transfer-replace-note { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px; color: #c6cad2; border: 1px solid #424b5f; border-radius: 4px; background: #2a2f3c; }.transfer-replace-note svg { width: 34px; height: 34px; flex: 0 0 auto; }.transfer-replace-note p { margin: 0; font-size: 9px; line-height: 1.5; }.transfer-replace-note strong { display: block; color: #c6cad2; }
.transfer-pin-entry { display: grid; gap: 7px; margin: 45px auto 0; width: min(100%, 430px); color: #c6cad2; font-size: 10px; }.transfer-pin-entry > span { font-weight: bold; }.transfer-pin-entry input { width: 100%; height: 58px; padding: 0 13px; color: #dcad5a; border: 2px solid #363d4d; border-radius: 4px; background: #333333; text-align: center; font: bold 25px "Lucida Console", Consolas, monospace; letter-spacing: 4px; user-select: text; }.transfer-pin-entry input:focus { border-color: #ae8337; outline: 2px solid #cea764; }.transfer-pin-entry small { color: #c6cad2; text-align: center; font-size: 8px; }
.transfer-error { margin: 12px 0 0; padding: 9px 11px; color: #db8d85; border: 1px solid #444d62; border-radius: 4px; background: #6d2017; font-size: 9px; line-height: 1.4; }.transfer-current-file { margin: 12px 0 0; color: #c6cad2; font-size: 9px; }
.transfer-complete { align-items: center; justify-content: center; text-align: center; }.transfer-complete-icon { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; border-radius: 50%; background: #2f8a4f; box-shadow: 0 0 0 8px rgba(47,138,79,.22); font-size: 37px; }.transfer-complete .button { margin-top: 25px; }

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .zeroh-mark { width: 56px; }
  .browser-toolbar { gap: 2px; padding: 4px; }.browser-toolbar form > span, #browserReload, #browserExternal { display: none; }.browser-favorites { overflow-x: auto; }.browser-favorites button { white-space: nowrap; }
  .net-cards { grid-template-columns: 1fr; }.net-cards button { min-height: 82px; }.net-hero { min-height: 210px; }.status-grid { grid-template-columns: 1fr; padding: 18px; }
  .notepad-toolbar label { flex: 1; }.notepad-toolbar input { width: 100%; }.notepad-toolbar button { padding: 0 6px; min-width: auto; }
  .file-actions { overflow-x: auto; }.file-actions .toolbar-button { white-space: nowrap; }
  .transfer-screen { padding: 22px 17px 18px; }.transfer-choice-grid { grid-template-columns: 1fr; align-content: start; }.transfer-choice-grid button { min-height: 105px; }.transfer-options { grid-template-columns: 1fr; }.transfer-pin { font-size: 23px; letter-spacing: 2px; }.transfer-pin-entry { margin-top: 28px; }.transfer-pin-entry input { font-size: 21px; letter-spacing: 2px; }
}

/* Hardware and browser report */
.settings-body { grid-template-columns: 176px minmax(0, 1fr); }
.settings-nav button { display: flex; align-items: center; gap: 9px; }
.settings-nav button svg { width: 23px; height: 23px; flex: 0 0 auto; }
.settings-nav button span { line-height: 1.25; }
.settings-panel[hidden] { display: none; }

.analytics-consent-status {
  margin: 14px 0 8px;
  color: #ccb388;
  font-size: 12px;
  font-weight: 700;
}

.analytics-privacy-copy {
  max-width: 720px;
  color: #c6cad2;
  font-size: 11px;
  line-height: 1.6;
}

.analytics-privacy-copy a { color: #e4c080; }
.game-settings-panel .setting-block,
.experimental-settings-panel .setting-block { min-height: 58px; }
.game-settings-hint { margin: -12px 0 10px; color: #c6cad2; font-size: 8px; }
.experimental-warning { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 14px; margin: -9px 0 14px; padding: 15px 17px; color: #db9a57; border: 2px solid #2e3442; border-radius: 4px; background: linear-gradient(135deg, #766419, #6e5617); box-shadow: 0 2px 6px rgba(112,69,19,.14); }
.experimental-warning > span { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #43290e; box-shadow: inset 0 1px rgba(255,255,255,.38); font: bold 26px/1 var(--display-font, "Trebuchet MS", Tahoma, sans-serif); }
.experimental-warning strong { display: block; color: #e18757; font: bold 17px/1.2 var(--display-font, "Trebuchet MS", Tahoma, sans-serif); }
.experimental-warning p { margin: 6px 0 0; color: #c89a6a; font-size: 9px; line-height: 1.5; }
.game-custom-resolution > div:last-child,
.game-performance-options > div:last-child { display: flex; align-items: center; gap: 6px; }
.game-custom-resolution input { width: 72px; height: 27px; padding: 0 6px; color: #c6cad2; border: 1px solid #3c4457; background: #333333; font-size: 9px; }
.camera-zoom-control { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.camera-zoom-control input { min-width: 160px; }
.camera-zoom-control output { min-width: 3ch; color: #c6cad2; font-weight: 700; text-align: right; }
.game-custom-resolution button,
.game-tool-grid button { min-height: 28px; padding: 0 10px; color: #dcad5b; border: 1px solid #363d4d; border-radius: 2px; background: linear-gradient(#333333, #624a21); font-size: 9px; }
.game-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 7px; padding-top: 14px; color: #c6cad2; font-size: 9px; }
.game-tool-grid label { display: flex; align-items: center; gap: 5px; }
.game-tool-grid strong { grid-column: 1 / -1; min-height: 13px; color: #c6cad2; font-size: 8px; }
.multiplayer-panel { color: #c6aa7a; background: linear-gradient(#333333, #5d4c2d); }
.multiplayer-copy { max-width: 560px; margin: -10px 0 18px; color: #c6cad2; font-size: 9px; line-height: 1.55; }
.network-field { min-height: 62px; display: grid; grid-template-columns: minmax(150px, .8fr) minmax(210px, 1.2fr); align-items: center; gap: 18px; border-bottom: 1px solid #475066; }
.network-field > span { display: grid; gap: 3px; }.network-field strong { color: #cab083; font-size: 10px; }.network-field small { color: #c6cad2; font-size: 8px; }
.network-field input { width: 100%; min-height: 29px; padding: 5px 8px; color: #c5a877; border: 1px solid #3c4456; border-radius: 2px; background: #333333; font: 9px Tahoma, sans-serif; box-shadow: inset 1px 1px 2px rgba(34,68,84,.08); }
.network-field input:focus { border-color: #a8813e; outline: 1px solid #c8a15e; }
.network-details { margin-top: 13px; border: 1px solid #454e63; border-radius: 3px; background: #5f4d2d; }.network-details summary { padding: 9px 11px; color: #c6cad2; cursor: pointer; font-size: 9px; font-weight: bold; }.network-details[open] summary { border-bottom: 1px solid #475066; }.network-details .network-field { margin: 0 11px; }
.network-status { margin: 14px 0 0; padding: 9px 11px; color: #7bd39b; border: 1px solid #3f475b; background: #24603a; font-size: 8px; line-height: 1.45; }
.hardware-panel { padding: 0; color: #c2a470; background: #5f4b29; user-select: text; }
.hardware-heading { position: sticky; z-index: 3; top: 0; min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid #3d4658; background: linear-gradient(90deg, #2a2f3c, #654c20); box-shadow: 0 2px 4px rgba(35,70,96,.08); }
.hardware-heading h1 { margin: 1px 0 4px; color: #e0b66e; font: normal 21px var(--display-font, "Trebuchet MS", Tahoma, sans-serif); }
.hardware-heading p:last-child { max-width: 470px; margin: 0; color: #c6cad2; font-size: 8px; line-height: 1.45; }
.hardware-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.hardware-actions button { min-height: 28px; padding: 0 9px; color: #d3b075; border: 1px solid #363d4d; border-radius: 2px; background: linear-gradient(#333333, #5d4928); box-shadow: inset 1px 1px #fff; font-size: 8px; white-space: nowrap; }
.hardware-actions button:hover { border-color: #ad8238; background: #6b4f1f; }
.hardware-actions button:disabled { color: #c6cad2; cursor: wait; }
.hardware-summary { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 1px; margin: 14px 16px 0; overflow: hidden; border: 1px solid #394152; border-radius: 3px; background: #1f242d; box-shadow: 1px 2px 3px rgba(30,62,85,.1); }
.hardware-summary > div { min-width: 0; min-height: 78px; display: grid; align-content: center; gap: 3px; padding: 10px 13px; background: linear-gradient(#333333, #624d27); }
.hardware-summary span { color: #c6cad2; font-size: 7px; font-weight: bold; letter-spacing: .9px; }
.hardware-summary strong { overflow: hidden; color: #dbb36c; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.hardware-summary small { overflow: hidden; color: #c6cad2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.readiness-score { position: relative; padding-left: 58px !important; }
.readiness-score::before { content: "✓"; position: absolute; left: 14px; top: 18px; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border: 1px solid #2a2f3c; border-radius: 50%; background: linear-gradient(#183e26, #2f8a4f); font-size: 18px; box-shadow: inset 0 1px rgba(255,255,255,.45); }
#hardwareScore.is-warn { color: #e6b372; }.readiness-score:has(#hardwareScore.is-warn)::before { content: "!"; border-color: #2a2f3c; background: linear-gradient(#4f3a11, #432d0e); }
#hardwareScore.is-bad { color: #df9890; }.readiness-score:has(#hardwareScore.is-bad)::before { content: "×"; border-color: #2a2f3c; background: linear-gradient(#4f1711, #3f1713); }
.hardware-notice { margin: 10px 16px 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 9px 11px; color: #d4a25e; border: 1px solid #353c4d; background: #756419; font-size: 8px; }
.hardware-notice[hidden] { display: none; }
.hardware-notice::before { content: "!"; grid-row: 1 / 3; width: 20px; height: 20px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #432d0e; font-weight: bold; }
.hardware-notice strong { font-size: 9px; }.hardware-notice span { line-height: 1.4; }
.hardware-report { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; padding: 10px 16px 16px; }
.hardware-report[aria-busy="true"] { min-height: 240px; opacity: .55; }
.hardware-group { min-width: 0; overflow: hidden; border: 1px solid #3f485b; border-radius: 3px; background: #333333; box-shadow: 1px 2px 3px rgba(24,58,82,.08); }
.hardware-group > header { padding: 9px 11px 8px; border-bottom: 1px solid #475066; background: linear-gradient(#6d5120, #644c22); }
.hardware-group h2 { margin: 0; color: #ddbb80; font-size: 10px; }
.hardware-group header p { margin: 2px 0 0; color: #c6cad2; font-size: 7px; }
.hardware-rows { margin: 0; }
.hardware-rows > div { min-height: 27px; display: grid; grid-template-columns: minmax(94px, .8fr) minmax(0, 1.2fr); align-items: center; border-top: 1px solid #475066; }
.hardware-rows > div:first-child { border-top: 0; }
.hardware-rows dt, .hardware-rows dd { margin: 0; padding: 6px 9px; font-size: 8px; line-height: 1.35; }
.hardware-rows dt { color: #c6cad2; }
.hardware-rows dd { min-width: 0; overflow-wrap: anywhere; color: #c3a572; border-left: 1px solid #475066; font-family: "Lucida Console", Consolas, monospace; }
.hardware-value.is-good::before, .hardware-value.is-bad::before, .hardware-value.is-warn::before { display: inline-block; width: 12px; font-family: Arial, sans-serif; font-weight: bold; }
.hardware-value.is-good::before { content: "✓"; color: #8dd9a9; }.hardware-value.is-bad::before { content: "×"; color: #df9890; }.hardware-value.is-warn::before { content: "!"; color: #ebc790; }
.api-section { grid-column: 1 / -1; }
.api-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #282d3a; }
.api-card { min-height: 55px; display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: #333333; }
.api-status { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; border-radius: 50%; font-size: 11px; font-weight: bold; }
.api-card.is-supported .api-status { background: #2f8a4f; }.api-card.is-missing .api-status { background: #25272b; }
.api-card > div { min-width: 0; display: grid; gap: 2px; }.api-card strong { overflow: hidden; color: #c6cad2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.api-card small { color: #c7cad1; font-size: 7px; line-height: 1.25; }
.hardware-error { grid-column: 1 / -1; display: grid; gap: 4px; padding: 18px; color: #d9867d; border: 1px solid #3e4659; background: #6d2017; font-size: 9px; }
.hardware-footer { display: flex; justify-content: space-between; gap: 20px; padding: 8px 16px 15px; color: #c6cad2; font-size: 7px; }

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .settings-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { display: flex; gap: 4px; overflow-x: auto; padding: 5px; border-right: 0; border-bottom: 1px solid #363d4d; }
  .settings-nav button { width: auto; flex: 0 0 auto; min-height: 31px; padding: 0 9px; }.settings-nav button svg { width: 19px; height: 19px; }
  .hardware-heading { position: static; align-items: flex-start; flex-direction: column; gap: 9px; }.hardware-actions { align-self: stretch; }.hardware-actions button { flex: 1; }
  .hardware-summary { grid-template-columns: 1fr; }.hardware-summary > div { min-height: 62px; }
  .hardware-report { grid-template-columns: 1fr; }.api-section { grid-column: auto; }.api-grid { grid-template-columns: 1fr 1fr; }
  .hardware-footer { flex-direction: column; gap: 3px; }
}

/* Remote Agent configuration is deliberately separate from normal game
   settings: enabling it creates an authenticated automation boundary for the
   next runtime, while leaving it disabled has no transport-side cost. */
.agent-bridge-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 23px; color: #c6cad2; background: linear-gradient(#694f23, #5b4a2c); }
.agent-bridge-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid #475066; }
.agent-bridge-heading .eyebrow { margin: 0 0 2px; color: #e6c790; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.agent-bridge-heading h1 { margin: 0 0 4px; color: #ddaf5f; font: normal 21px var(--display-font, "Trebuchet MS", Tahoma, sans-serif); }
.agent-bridge-heading p:last-child { max-width: 540px; margin: 0; color: #c6cad2; font-size: 9px; line-height: 1.45; }
.agent-bridge-mark { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #343b4b; border-radius: 7px; background: linear-gradient(#333333, #5c4825); box-shadow: inset 1px 1px #fff, 1px 2px 3px rgba(28,64,88,.16); }
.agent-bridge-mark svg { width: 43px; height: 43px; }
.agent-bridge-form { display: grid; gap: 11px; padding-top: 13px; }
.agent-bridge-enable { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 8px 11px; border: 1px solid #40485c; border-radius: 3px; background: #333333; cursor: pointer; }
.agent-bridge-enable > span, .agent-bridge-field > span:first-child, .agent-bridge-field > label:first-child { display: grid; gap: 3px; }
.agent-bridge-enable strong, .agent-bridge-field strong { color: #c8ad7f; font-size: 10px; }
.agent-bridge-enable small, .agent-bridge-field small { color: #c6cad2; font-size: 8px; line-height: 1.35; }
.agent-bridge-enable input { position: absolute; opacity: 0; pointer-events: none; }
.agent-bridge-enable i { position: relative; width: 38px; height: 19px; border: 1px solid #303644; border-radius: 10px; background: #282d3a; box-shadow: inset 1px 1px 2px rgba(32,60,75,.18); transition: background .12s; }
.agent-bridge-enable i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border: 1px solid #353943; border-radius: 50%; background: linear-gradient(#333333, #292e3b); transition: transform .12s; }
.agent-bridge-enable input:checked + i { border-color: #2a2f3c; background: #2f8a4f; }
.agent-bridge-enable input:checked + i::after { transform: translateX(18px); }
.agent-bridge-enable input:focus-visible + i { outline: 2px solid #303745; outline-offset: 2px; }
.agent-bridge-enable input:disabled + i { opacity: .55; }
.agent-bridge-form fieldset { min-width: 0; display: grid; gap: 0; margin: 0; padding: 0 11px; border: 1px solid #444d62; border-radius: 3px; background: #333333; }
.agent-bridge-form fieldset:disabled { opacity: .55; }
.agent-bridge-field { min-width: 0; min-height: 55px; display: grid; grid-template-columns: minmax(180px, .9fr) minmax(230px, 1.1fr); align-items: center; gap: 16px; border-top: 1px solid #475066; }
.agent-bridge-field:first-child { border-top: 0; }
.agent-bridge-field > input, .agent-bridge-field select, .agent-bridge-secret input { width: 100%; min-width: 0; height: 29px; padding: 4px 7px; color: #c3a673; border: 1px solid #384051; border-radius: 2px; background: #333333; font: 9px Tahoma, sans-serif; box-shadow: inset 1px 1px 2px rgba(34,68,84,.08); }
.agent-bridge-field > input:focus, .agent-bridge-field select:focus, .agent-bridge-secret input:focus { border-color: #a8813e; outline: 1px solid #c8a15e; }
.agent-bridge-secret { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.agent-bridge-secret input { border-radius: 2px 0 0 2px; }
.agent-bridge-secret button { min-width: 49px; color: #d3b075; border: 1px solid #363d4d; border-left: 0; border-radius: 0 2px 2px 0; background: linear-gradient(#333333, #5d4928); font-size: 8px; }
.agent-bridge-token-control { min-width: 0; display: grid; gap: 5px; }
.agent-bridge-remember { display: flex; align-items: center; gap: 6px; color: #c6cad2; font-size: 8px; cursor: pointer; }
.agent-bridge-remember input { width: 13px; height: 13px; margin: 0; accent-color: #3178a3; }
.agent-bridge-error, .agent-bridge-lock { margin: 0; padding: 8px 10px; color: #d9867d; border: 1px solid #3e4659; background: #6d2017; font-size: 8px; line-height: 1.4; }
.agent-bridge-lock { color: #d3a45f; border-color: #363d4e; background: #766319; }
.agent-bridge-status { min-height: 44px; display: grid; grid-template-columns: 13px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 11px; color: #c6cad2; border: 1px solid #424b5f; border-radius: 3px; background: #5e4c2d; }
.agent-bridge-status > span { width: 11px; height: 11px; border: 1px solid #313641; border-radius: 50%; background: #23262e; box-shadow: inset 0 1px rgba(255,255,255,.55); }
.agent-bridge-status > div { display: grid; gap: 2px; }.agent-bridge-status strong { font-size: 9px; }.agent-bridge-status small { color: #c6cad2; font-size: 8px; line-height: 1.35; }
.agent-bridge-status[data-state="ready"] { color: #d1b585; border-color: #bb9960; background: #6b4f1f; }.agent-bridge-status[data-state="ready"] > span { border-color: #a8813e; background: #372a15; }
.agent-bridge-status[data-state="connecting"] { color: #d6ab5c; border-color: #373e4f; background: #766319; }.agent-bridge-status[data-state="connecting"] > span { border-color: #2a2f3c; background: #46350f; }
.agent-bridge-status[data-state="connected"] { color: #65cc8b; border-color: #3a4254; background: #23623a; }.agent-bridge-status[data-state="connected"] > span { border-color: #2a2f3c; background: #2f8a4f; }
.agent-bridge-status[data-state="error"] { color: #da887f; border-color: #3e4659; background: #6d2017; }.agent-bridge-status[data-state="error"] > span { border-color: #2a2f3c; background: #401814; }
.agent-bridge-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.agent-bridge-actions p { max-width: 420px; margin: 0; color: #c6cad2; font-size: 8px; line-height: 1.4; }
.agent-bridge-action-buttons { display: flex; flex: 0 0 auto; gap: 7px; }
.agent-bridge-actions .button { flex: 0 0 auto; white-space: nowrap; }
.agent-bridge-actions .button:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .agent-bridge-body { padding: 16px 13px; }
  .agent-bridge-heading { grid-template-columns: 45px minmax(0, 1fr); }.agent-bridge-mark { width: 43px; height: 43px; }.agent-bridge-mark svg { width: 34px; height: 34px; }
  .agent-bridge-heading h1 { font-size: 17px; }
  .agent-bridge-field { grid-template-columns: 1fr; gap: 6px; padding: 9px 0; }
  .agent-bridge-actions { align-items: stretch; flex-direction: column; }.agent-bridge-action-buttons { align-self: flex-end; flex-wrap: wrap; justify-content: flex-end; }
}

.managed-storage-set > summary { grid-template-columns: 32px minmax(0, 1fr) auto auto auto; }
.about-resources { margin: -5px 0 16px; color: #c6cad2; font-size: 8px; }
.about-resources a { color: #e4c080; }

/* Phone shell: retain the XP desktop vocabulary while replacing desktop-sized
   precision targets and off-screen window management with touch navigation. */
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  :root { --taskbar-height: 50px; }

  .desktop-icons {
    inset: calc(8px + env(safe-area-inset-top, 0px)) calc(6px + env(safe-area-inset-right, 0px)) calc(var(--taskbar-safe-height) + 6px) calc(6px + env(safe-area-inset-left, 0px));
    width: auto;
    height: auto;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    align-content: start;
    gap: 4px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .desktop-icons::-webkit-scrollbar { display: none; }
  .desktop-icon {
    width: 100%;
    min-width: 0;
    min-height: 80px;
    padding: 7px 2px;
    touch-action: manipulation;
  }
  .desktop-icon > span:last-child { font-size: 12px; line-height: 1.18; }

  .window-layer {
    inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) var(--taskbar-safe-height) env(safe-area-inset-left, 0px);
  }
  .window {
    left: 3px !important;
    right: 3px;
    top: 3px !important;
    bottom: 3px;
    width: auto;
    height: auto;
    transform: none !important;
    border-radius: 5px;
  }
  .titlebar {
    height: 48px;
    min-height: 48px;
    padding-left: 8px;
    touch-action: manipulation;
  }
  .titlebar-title { min-width: 0; font-size: 13px; }
  .titlebar-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .window-controls { flex: 0 0 auto; }
  .window-controls button {
    width: 44px;
    height: 44px;
    padding: 0 0 2px;
    font-size: 16px;
    touch-action: manipulation;
  }
  .window-controls button[data-window-action="maximize"] { display: none; }
  .window-controls button[data-window-action="minimize"] { font-size: 0; }
  .window-controls button[data-window-action="minimize"]::before {
    content: "";
    width: 18px;
    height: 3px;
    background: #333333;
    box-shadow: 0 1px #174b99;
  }
  .settings-nav button { min-height: 44px; }

  .start-menu {
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    bottom: calc(var(--taskbar-safe-height) - 1px);
    width: auto;
    max-height: calc(var(--desktop-viewport-height) - var(--taskbar-safe-height) - env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    border-radius: 7px 7px 0 0;
  }
  .start-menu > header {
    height: 56px;
    min-height: 56px;
    gap: 9px;
    padding: 7px 12px;
  }
  .user-avatar { width: 42px; height: 42px; font-size: 18px; }
  .start-menu header strong { font-size: 13px; }
  .start-menu header div span { font-size: 9px; }
  .start-content {
    display: block;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #333333;
  }
  .start-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 6px;
    overflow: visible;
  }
  .start-primary button {
    min-width: 0;
    min-height: 68px;
    gap: 8px;
    padding: 8px 6px;
    touch-action: manipulation;
  }
  .start-primary button div { min-width: 0; gap: 3px; }
  .start-primary strong { font-size: 11px; line-height: 1.2; }
  .start-primary small { font-size: 9px; line-height: 1.25; }
  .start-icon { width: 36px; min-width: 36px; height: 36px; }
  .start-icon svg { width: 32px; height: 32px; }
  .start-secondary {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 6px;
    border-top: 1px solid #cda765;
    border-left: 0;
  }
  .start-secondary > button {
    min-height: 48px;
    padding: 4px 8px;
    font-size: 11px;
    touch-action: manipulation;
  }
  .start-secondary svg { width: 24px; height: 24px; }
  .start-storage {
    position: static;
    grid-column: 1 / -1;
    padding: 8px 7px 4px;
    font-size: 9px;
  }
  .start-menu footer { height: 50px; min-height: 50px; padding: 4px 10px; }
  .start-menu footer button { min-height: 40px; padding: 6px 12px; font-size: 11px; touch-action: manipulation; }
  .start-menu footer svg { width: 22px; height: 22px; }

  .taskbar {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .start-button {
    min-width: 86px;
    padding: 0 11px 1px 9px;
    gap: 6px;
    font-size: 14px;
    touch-action: manipulation;
  }
  .start-command-mark { width: 27px; height: 27px; }
  .task-divider { height: 34px; margin: 0 3px; }
  .task-buttons {
    gap: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .task-buttons::-webkit-scrollbar { display: none; }
  .task-button {
    flex: 0 0 48px;
    min-width: 48px;
    max-width: 48px;
    height: 44px;
    justify-content: center;
    padding: 0;
    touch-action: manipulation;
  }
  .task-button span { display: none; }
  .task-button svg, .task-button > img { width: 24px; height: 24px; }
  .tray { flex: 0 0 auto; padding: 0 2px; }
  .tray button { width: 44px; height: 44px; padding: 10px; touch-action: manipulation; }
  .tray svg { width: 22px; height: 22px; }
  .tray-network { display: none; }
  .tray-clock { min-width: 48px; margin-left: 0; }
  .tray-clock strong { font-size: 10px; }
  .tray-clock span { font-size: 7px; }

  .toast-region {
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--taskbar-safe-height) + 8px);
  }
  .toast { min-width: 0; width: 100%; max-width: none; }
}

@media (min-width: 600px) and (max-height: 520px) and (pointer: coarse) {
  .start-primary { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 4px; }
  .start-primary button { min-height: 56px; }
  .start-primary small { display: none; }
  .start-secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .task-button {
    flex-basis: 132px;
    min-width: 132px;
    max-width: 180px;
    justify-content: flex-start;
    padding: 0 10px;
  }
  .task-button span { display: block; }
}