:root {
  --bg: #050606;
  --panel: rgba(12, 15, 14, 0.82);
  --panel-solid: #0c0f0e;
  --line: #27302c;
  --line-hi: #3d4a44;
  --text: #cfd5cb;
  --dim: #6c7870;
  --faint: #3a443f;
  --accent: #e3a338;
  --accent-dim: #7a5a22;
  --danger: #c8372f;
  --ok: #8fc66a;
  --mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  user-select: none;
  cursor: default;
}
button, input { font: inherit; color: inherit; }
kbd {
  border: 1px solid var(--line-hi); border-bottom-width: 2px;
  padding: 0 6px; font-family: var(--mono); font-size: 0.9em;
}
.dim { color: var(--dim); }
.tag {
  display: inline-block; font-size: 11px; letter-spacing: 0.2em;
  color: var(--bg); background: var(--accent); padding: 2px 6px;
}
.tag.red { background: var(--danger); color: #fff; }
.tag.green { background: var(--ok); }
.tag.outline { background: none; color: var(--dim); border: 1px solid var(--line-hi); }

/* ---------- Layers ---------- */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#app { position: fixed; inset: 0; z-index: 2; }
body[data-screen="field"] #app { filter: none !important; }
body[data-screen="field"] #bg, body[data-screen="field"] #watcher { display: none; }
#grain, #scanlines, #vignette { position: fixed; inset: 0; pointer-events: none; width: 100%; height: 100%; }
#grain { z-index: 50; opacity: 0; mix-blend-mode: overlay; }
body.fx-grain #grain { opacity: 1; }
#scanlines {
  z-index: 51; display: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.22) 3px);
}
body.fx-scanlines #scanlines { display: block; }
#vignette { z-index: 52; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.85) 100%); }

#watcher {
  position: fixed; bottom: 6vh; height: 46vh; z-index: 1;
  fill: #000; opacity: 0; pointer-events: none;
  filter: blur(1.5px);
}
#watcher .eye { fill: #e8e2c8; }
#watcher.seen { animation: watcher 1.6s ease-out; }
@keyframes watcher {
  0% { opacity: 0; } 8% { opacity: 0.55; } 30% { opacity: 0.35; } 100% { opacity: 0; }
}

/* ---------- Screens ---------- */
.screen {
  position: absolute; inset: 0; display: none;
  padding: 6vh 6vw;
  opacity: 0;
}
.screen.active { display: block; animation: screenIn 0.35s ease-out forwards; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.screen-head { margin-bottom: 22px; }
.screen-head h2 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: clamp(28px, 3.4vw, 44px); margin: 0;
  color: var(--text);
}
.screen-head .sub { margin: 4px 0 0; color: var(--dim); }
.screen-head .sub b { color: var(--accent); font-weight: normal; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(2px);
}
.panel-wrap { max-width: 1100px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
.panel-wrap.narrow { max-width: 720px; }
.bottom-bar { display: flex; gap: 12px; justify-content: space-between; margin-top: 20px; }
.bottom-bar.fixed { position: absolute; left: 6vw; bottom: 6vh; }

/* ---------- Buttons / menus ---------- */
.btn {
  background: none; border: 1px solid var(--line-hi); padding: 10px 18px;
  text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover, .btn:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn.primary:hover, .btn.primary:focus-visible { background: #f2b851; color: var(--bg); }
.btn.danger:hover, .btn.danger:focus-visible { border-color: var(--danger); color: var(--danger); }
.btn.ghost { border-color: transparent; color: var(--dim); padding-left: 0; }
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--accent); border-color: transparent; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.link { background: none; border: none; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; }

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu-item {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 6px 0 6px 26px;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 28px); letter-spacing: 0.08em; color: var(--dim);
  transition: color .12s, padding .18s;
}
.menu.small .menu-item { font-size: 19px; padding-top: 5px; padding-bottom: 5px; }
.menu-item::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .18s;
}
.menu-item .hint { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: none; color: var(--faint); }
.menu-item:hover, .menu-item:focus-visible { color: var(--text); padding-left: 32px; outline: none; }
.menu-item:hover::before, .menu-item:focus-visible::before { transform: scaleX(1); }
.menu-item:hover .hint, .menu-item:focus-visible .hint { color: var(--dim); }
.menu-item:disabled { color: var(--faint); cursor: not-allowed; }
.menu-item:disabled:hover { padding-left: 26px; }
.menu-item:disabled::before { display: none; }
.menu-item.danger:hover, .menu-item.danger:focus-visible { color: var(--danger); }
.menu-sep { height: 14px; }

/* ---------- Boot ---------- */
#screen-boot { display: none; place-items: center; }
#screen-boot.active { display: grid; }
.boot-inner { text-align: center; max-width: 560px; }
.boot-logo {
  font-family: var(--display); font-weight: 700; font-size: 84px; letter-spacing: -0.04em;
  color: var(--accent); border: 3px solid var(--accent); width: 140px; height: 140px;
  display: grid; place-items: center; margin: 0 auto 36px; line-height: 1;
}
.boot-warn { color: var(--dim); line-height: 1.7; }
.boot-warn .tag { margin-bottom: 10px; }
.boot-press { margin-top: 44px; letter-spacing: 0.4em; color: var(--text); }
.blink { animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- Title ---------- */
#screen-main.active { display: flex; flex-direction: column; }
.title-block { margin-top: 4vh; }
.title-eyebrow { color: var(--accent); letter-spacing: 0.3em; text-transform: uppercase; font-size: 12px; margin-bottom: 12px; }
.title {
  position: relative; margin: 0; line-height: 0.88;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(54px, 9vw, 132px); letter-spacing: 0.01em; color: #e3e6dc;
}
.title-2 { color: transparent; -webkit-text-stroke: 1.5px #9aa39a; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  opacity: 0;
}
body.fx-chromatic .glitch::before { color: #ff2a2a; -webkit-text-stroke: 0; animation: glitchA 7s infinite; }
body.fx-chromatic .glitch::after  { color: #2affd4; -webkit-text-stroke: 0; animation: glitchB 7s infinite; }
@keyframes glitchA {
  0%, 91%, 100% { opacity: 0; transform: none; }
  92% { opacity: .7; transform: translate(-4px, 1px); clip-path: inset(10% 0 60% 0); }
  94% { opacity: .7; transform: translate(3px, -1px); clip-path: inset(55% 0 20% 0); }
  96% { opacity: 0; }
}
@keyframes glitchB {
  0%, 92%, 100% { opacity: 0; transform: none; }
  93% { opacity: .6; transform: translate(4px, 0); clip-path: inset(30% 0 40% 0); }
  95% { opacity: .6; transform: translate(-3px, 1px); clip-path: inset(70% 0 5% 0); }
  97% { opacity: 0; }
}
#main-menu { margin-top: 6vh; }
.main-footer {
  margin-top: auto; display: flex; justify-content: space-between; color: var(--faint); font-size: 12px;
}
.main-footer #main-last { color: var(--dim); }

/* ---------- Slots ---------- */
.slots { display: flex; flex-direction: column; gap: 12px; }
.slot-row { display: flex; gap: 8px; align-items: stretch; }
.slot {
  flex: 1; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 18px;
  padding: 16px 18px; text-align: left; cursor: pointer; width: 100%;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .15s;
}
.slot:hover, .slot:focus-visible { border-color: var(--accent); outline: none; }
.slot-num { font-family: var(--display); font-size: 32px; color: var(--faint); }
.slot:hover .slot-num, .slot:focus-visible .slot-num { color: var(--accent); }
.slot-name { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: .05em; }
.slot-meta { color: var(--dim); font-size: 13px; margin-top: 2px; }
.slot.empty .slot-name { color: var(--faint); }
.slot-del { background: none; border: 1px solid transparent; color: var(--faint); padding: 6px 10px; cursor: pointer; }
.slot-del:hover, .slot-del:focus-visible { color: var(--danger); border-color: var(--danger); outline: none; }

/* ---------- New game form ---------- */
.form { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { color: var(--dim); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.field input {
  background: rgba(0,0,0,.4); border: none; border-bottom: 1px solid var(--line-hi);
  padding: 10px 2px; font-size: 20px; outline: none; user-select: text;
}
.field input:focus { border-bottom-color: var(--accent); }
.diff-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.diff {
  text-align: left; padding: 12px; background: none; border: 1px solid var(--line); cursor: pointer;
}
.diff b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.diff small { color: var(--dim); line-height: 1.4; display: block; }
.diff:hover, .diff:focus-visible { border-color: var(--line-hi); outline: none; }
.diff.selected { border-color: var(--accent); }
.diff.selected b { color: var(--accent); }
.fine { color: var(--faint); font-size: 12px; margin: 0; line-height: 1.5; }

/* ---------- HQ ---------- */
.hq { display: grid; grid-template-columns: 300px 1fr; gap: 5vw; height: 100%; }
.hq-side { display: flex; flex-direction: column; gap: 30px; }
.firm-name { font-family: var(--display); font-weight: 600; font-size: 30px; text-transform: uppercase; line-height: 1.05; }
.firm-meta { color: var(--dim); margin-top: 6px; font-size: 13px; line-height: 1.6; }
.firm-meta b { color: var(--accent); font-weight: normal; }
.hq-main { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { padding: 14px 16px; }
.stat-label { color: var(--dim); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.stat-value { font-family: var(--display); font-size: 30px; margin-top: 4px; }
.stat-value.accent { color: var(--accent); }
.rep-bar { height: 3px; background: var(--line); margin-top: 8px; }
.rep-bar div { height: 100%; background: var(--accent); }
.terminal { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.terminal-head {
  padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--dim);
  font-size: 12px; letter-spacing: .2em; display: flex; justify-content: space-between; align-items: center;
}
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2s steps(2,start) infinite; }
.terminal-body { padding: 14px; overflow: auto; flex: 1; line-height: 1.75; color: #9fbf8c; font-size: 14px; }
.terminal-body .line::before { content: "> "; color: var(--faint); }
.terminal-body .cursor { display: inline-block; width: 8px; height: 14px; background: #9fbf8c; vertical-align: middle; animation: blink 1s steps(2,start) infinite; }

/* ---------- Split layouts (contracts, armory, archive) ---------- */
.split { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 3vw; height: 100%; }
.split-left { display: flex; flex-direction: column; min-height: 0; }
.split-right { min-height: 0; overflow: auto; }
.list { display: flex; flex-direction: column; gap: 6px; overflow: auto; flex: 1; padding-right: 6px; }
.list::-webkit-scrollbar, .split-right::-webkit-scrollbar, .terminal-body::-webkit-scrollbar { width: 6px; }
.list::-webkit-scrollbar-thumb, .split-right::-webkit-scrollbar-thumb, .terminal-body::-webkit-scrollbar-thumb { background: var(--line-hi); }

.row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--line); text-align: left; cursor: pointer; width: 100%;
}
.row:hover, .row:focus-visible { border-color: var(--line-hi); border-left-color: var(--accent-dim); outline: none; }
.row.selected { border-left-color: var(--accent); background: rgba(227,163,56,0.06); }
.row.locked { opacity: 0.5; }
.row-title { font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.row-sub { color: var(--dim); font-size: 12px; grid-column: 1 / 2; }
.row-right { grid-row: 1 / 3; grid-column: 2; text-align: right; font-size: 13px; }
.row-right .money { color: var(--accent); font-size: 16px; }

.threat { display: inline-flex; gap: 3px; vertical-align: middle; }
.threat i { width: 7px; height: 12px; background: var(--faint); display: block; }
.threat i.on { background: var(--danger); }

.dossier { padding: 30px 34px; position: relative; }
.dossier .stamp {
  position: absolute; top: 28px; right: 30px; transform: rotate(8deg);
  border: 2px solid var(--danger); color: var(--danger); padding: 4px 10px;
  font-family: var(--display); letter-spacing: .15em; font-size: 18px; opacity: .8;
}
.dossier .stamp.ok { border-color: var(--ok); color: var(--ok); }
.dossier h3 {
  font-family: var(--display); font-weight: 600; font-size: 34px; text-transform: uppercase;
  margin: 8px 0 2px; letter-spacing: .03em; padding-right: 160px;
}
.dossier .meta-line { color: var(--dim); margin-bottom: 22px; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 18px 0; }
.kv > div { background: var(--panel-solid); padding: 12px 14px; }
.kv .k { color: var(--dim); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.kv .v { margin-top: 4px; font-size: 16px; }
.kv .v.accent { color: var(--accent); }
.section-label { color: var(--accent); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; margin: 22px 0 6px; }
.dossier p { line-height: 1.65; margin: 0; }
.redact { background: var(--text); color: transparent; padding: 0 2px; line-height: 1.9; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dossier .actions { display: flex; gap: 12px; margin-top: 28px; }
.empty-note { color: var(--dim); padding: 40px; text-align: center; }

/* ---------- Armory ---------- */
.loadout { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: auto; }
.lslot {
  display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px;
  padding: 14px; background: var(--panel); border: 1px solid var(--line); text-align: left; cursor: pointer; width: 100%;
}
.lslot:hover, .lslot:focus-visible { border-color: var(--line-hi); outline: none; }
.lslot.selected { border-color: var(--accent); }
.lslot .k { color: var(--dim); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.lslot .v { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.lslot .v.none { color: var(--faint); }
.loadout-weight { color: var(--dim); font-size: 13px; padding: 8px 2px; }
.list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); flex: none; overflow: visible; margin-bottom: 16px; }
.item {
  padding: 14px; background: var(--panel); border: 1px solid var(--line); text-align: left; cursor: pointer;
  min-height: 86px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.item:hover, .item:focus-visible { border-color: var(--line-hi); outline: none; }
.item.selected { border-color: var(--accent); }
.item .name { font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.item .state { font-size: 12px; color: var(--dim); }
.item .state.equipped { color: var(--ok); }
.item .state.price { color: var(--accent); }
.item-detail { padding: 22px 24px; }
.item-detail h4 { font-family: var(--display); font-weight: 600; font-size: 26px; text-transform: uppercase; margin: 0 0 6px; }
.item-detail p { color: var(--dim); margin: 0 0 16px; line-height: 1.6; }
.bars { display: grid; grid-template-columns: 110px 1fr 24px; gap: 8px 12px; align-items: center; font-size: 12px; }
.bars .bk { color: var(--dim); letter-spacing: .15em; text-transform: uppercase; }
.bars .bar { height: 6px; background: var(--line); }
.bars .bar div { height: 100%; background: var(--text); }
.bars .bar.warn div { background: var(--danger); }
.item-detail .actions { display: flex; gap: 12px; margin-top: 20px; }

/* ---------- Records ---------- */
.records { padding: 10px 0; }
.records .rrow { display: flex; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.records .rrow:last-child { border-bottom: none; }
.records .rrow span:first-child { color: var(--dim); }

/* ---------- Settings ---------- */
.tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 18px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .15em; color: var(--dim); margin-bottom: -1px;
}
.tab:hover, .tab:focus-visible { color: var(--text); outline: none; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-keys { color: var(--faint); font-size: 12px; margin-left: auto; align-self: center; }
.settings-body { display: grid; grid-template-columns: 1fr 300px; gap: 16px; flex: 1; min-height: 0; }
.settings-list { overflow: auto; padding: 6px 0; }
.setting {
  display: grid; grid-template-columns: 1fr 300px; align-items: center; gap: 16px;
  padding: 9px 22px; border-left: 2px solid transparent;
}
.setting:hover, .setting:focus-within { background: rgba(255,255,255,0.025); border-left-color: var(--accent); }
.setting-label { color: var(--text); }
.setting-group { color: var(--accent); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; padding: 18px 22px 6px; }
.ctl { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.ctl input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; background: var(--line-hi); outline: none; cursor: pointer; }
.ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 18px; background: var(--text); border: none; }
.ctl input[type=range]::-moz-range-thumb { width: 12px; height: 18px; background: var(--text); border: none; border-radius: 0; }
.ctl input[type=range]:focus::-webkit-slider-thumb { background: var(--accent); }
.ctl .num { width: 36px; text-align: right; color: var(--dim); }
.cycler {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 1px solid var(--line); padding: 6px 10px; cursor: pointer;
}
.cycler:hover, .cycler:focus-visible { border-color: var(--accent); outline: none; }
.cycler .arr { color: var(--dim); }
.cycler:focus-visible .arr { color: var(--accent); }
.cycler.on .val { color: var(--ok); }
.cycler.off .val { color: var(--dim); }
.keybtn { width: 100%; background: none; border: 1px solid var(--line); padding: 6px 10px; cursor: pointer; text-align: center; }
.keybtn:hover, .keybtn:focus-visible { border-color: var(--accent); outline: none; }
.keybtn.listening { border-color: var(--accent); color: var(--accent); animation: blink 0.8s steps(2,start) infinite; }
.keybtn.conflict { border-color: var(--danger); }
.settings-help { padding: 22px; color: var(--dim); line-height: 1.6; }
.settings-help h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--text); font-size: 20px; margin: 0 0 10px; }
.calib { display: flex; gap: 6px; margin-top: 18px; }
.calib div { flex: 1; height: 54px; display: grid; place-items: center; font-size: 10px; }
.calib-note { font-size: 12px; margin-top: 8px; }

/* ---------- Credits ---------- */
#screen-credits { overflow: hidden; }
.credits-roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; animation: roll 38s linear forwards; }
.credits-roll h3 { font-family: var(--display); font-weight: 700; font-size: 54px; margin: 0 0 60px; text-transform: uppercase; }
.credits-roll .role { color: var(--dim); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; margin-top: 34px; }
.credits-roll .who { font-family: var(--display); font-size: 24px; text-transform: uppercase; margin-top: 6px; }
.credits-roll .end { margin-top: 120px; color: var(--faint); }
@keyframes roll { to { transform: translateY(calc(-100% - 100vh)); } }

/* ---------- Loading ---------- */
#screen-loading.active { display: flex; align-items: flex-end; }
.loading { width: 100%; max-width: 760px; }
.loading-loc { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 5vw, 64px); text-transform: uppercase; line-height: 1; }
.loading-region { color: var(--dim); letter-spacing: .3em; text-transform: uppercase; margin: 10px 0 28px; font-size: 13px; }
.loading-bar { height: 2px; background: var(--line); }
.loading-bar div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.loading-status { color: var(--dim); font-size: 12px; margin-top: 10px; letter-spacing: .1em; }
.loading-tip { margin-top: 36px; color: var(--text); line-height: 1.6; }
.loading-tip .tag { margin-right: 8px; }

/* ---------- Field (gameplay HUD) ---------- */
#screen-field { padding: 0; cursor: crosshair; }
#screen-field.free-look, #screen-field.free-look * { cursor: none; }
#game-root { position: absolute; inset: 0; background: #000; }
#game-root canvas { display: block; width: 100%; height: 100%; }
#hud { position: absolute; inset: 0; pointer-events: none; text-shadow: 0 1px 3px #000; }
#hud[hidden] { display: none; }
/* guidance markers: what the job needs next, and how far */
#guide { position: absolute; inset: 0; pointer-events: none; }
.gmk { position: absolute; transform: translate(-50%, -50%); text-align: center; font: 10px var(--mono, monospace); letter-spacing: .16em; color: #f0d48a; opacity: .82; white-space: nowrap; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.gmk i { display: block; width: 8px; height: 8px; margin: 0 auto 5px; border: 1.5px solid currentColor; transform: rotate(45deg); box-shadow: 0 0 4px rgba(0,0,0,.8); }
.gmk b { display: block; font-weight: 400; }
.gmk span { display: block; opacity: .6; margin-top: 1px; }
.gmk.photo { color: #a8dcff; }
.gmk.swab { color: #b8f0a8; }
.gmk.big i { width: 14px; height: 14px; border-width: 2px; }
.gmk.off i { width: 0; height: 0; border: 6px solid transparent; border-bottom: 10px solid currentColor; border-top: 0; transform: rotate(var(--a)); box-shadow: none; }
.gmk.off span, .gmk.quiet b, .gmk.quiet span { display: none; }
#guide-prog { position: absolute; left: 50%; top: calc(50% + 28px); transform: translateX(-50%); font: 11px var(--mono, monospace); letter-spacing: .22em; color: #e8f2e8; opacity: 0; text-shadow: 0 0 6px #000; }
.hud-obj { position: absolute; top: 24px; left: 28px; max-width: 420px; }
.hud-obj-label { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
#hud-objective { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
#hud-location { color: var(--dim); font-size: 12px; margin-top: 2px; }
.hud-obj.pulse #hud-objective { animation: objPulse 1.6s ease-out; }
@keyframes objPulse { 0% { color: var(--accent); transform: translateX(-6px); opacity: 0; } 30% { opacity: 1; transform: none; } 100% { color: var(--text); } }
.hud-emf { position: absolute; top: 28px; right: 28px; display: flex; gap: 4px; align-items: center; font-size: 11px; letter-spacing: .2em; color: var(--dim); }
.hud-emf span { margin-right: 6px; }
.hud-emf i { width: 10px; height: 16px; border: 1px solid #333; background: #111; }
.hud-emf i.on:nth-of-type(1), .hud-emf i.on:nth-of-type(2) { background: #6fbf4a; box-shadow: 0 0 6px #6fbf4a; }
.hud-emf i.on:nth-of-type(3) { background: #d9c33a; box-shadow: 0 0 6px #d9c33a; }
.hud-emf i.on:nth-of-type(4), .hud-emf i.on:nth-of-type(5) { background: #d6402e; box-shadow: 0 0 8px #d6402e; }
.hud-emf[hidden] { display: none; }
.hud-fps { position: absolute; top: 60px; right: 28px; color: var(--ok); font-size: 12px; }
.hud-fps[hidden] { display: none; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(230,230,220,.75); transition: transform .15s; }
.crosshair.aim { transform: scale(.6); }
.hitmarker { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0;
  background: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.hitmarker.show { opacity: 1; }
.hitmarker.head { filter: drop-shadow(0 0 2px var(--danger)) sepia(1) saturate(8) hue-rotate(-30deg); }
.hud-prompt { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); font-size: 14px; white-space: nowrap; }
.hud-prompt kbd, .hud-hint kbd { background: rgba(0,0,0,.6); }
.hud-hint { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; max-width: 720px; font-size: 13px; color: var(--dim); opacity: 0; transition: opacity 1s; }
.hud-hint.show { opacity: 1; }
.hud-sub { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); text-align: center; width: min(760px, 90vw); }
.hud-sub div { display: inline-block; margin: 3px 0; padding: 3px 10px; background: rgba(0,0,0,.55); color: #e8e4d8; }
.hud-sub.size-small { font-size: 13px; } .hud-sub.size-medium { font-size: 16px; } .hud-sub.size-large { font-size: 21px; }
.hud-vitals { position: absolute; left: 28px; bottom: 28px; display: flex; flex-direction: column; gap: 6px; }
.vbar { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; color: var(--dim); transition: opacity .4s; }
.vbar span { width: 30px; }
.vbar > div { width: 180px; height: 5px; background: rgba(255,255,255,.08); }
.vbar i { display: block; height: 100%; background: var(--text); transition: width .15s; }
.vbar.hp i { background: #c9c2b0; }
.vbar.hp.low i { background: var(--danger); animation: blink .8s steps(2,start) infinite; }
.vbar.stam i { background: #8fa7b8; }
.vbar.stam.locked i { background: var(--danger); }
.vbar.batt i { background: var(--accent); }
.vbar.batt.off { opacity: .4; }
.vbar[hidden] { display: none; }
.hud-weapon { position: absolute; right: 28px; bottom: 28px; text-align: right; }
#hud-wname { font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
#hud-ammo { font-size: 16px; color: var(--dim); }
#hud-ammo b { font-family: var(--display); font-size: 40px; font-weight: 600; color: var(--text); }
#hud-util { font-size: 12px; color: var(--dim); margin-top: 2px; }
#hurt-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(130,0,0,.75) 100%); }
.game-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,.6); padding: 24px; cursor: pointer; }
.game-overlay[hidden] { display: none; }
.game-overlay.intro { background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.75)); }
.game-overlay.dead { background: rgba(40,0,0,.55); animation: fadeIn 1.5s ease-out; cursor: default; }
.game-overlay.done { background: rgba(0,0,0,.8); animation: fadeIn 1s ease-out; cursor: default; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.go-title { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 7vw, 84px); text-transform: uppercase; line-height: 1; margin: 14px 0; }
.go-title.red { color: var(--danger); letter-spacing: .08em; }
.go-brief { max-width: 560px; color: var(--text); line-height: 1.7; margin: 0 0 18px; }
.go-obj { color: var(--dim); margin-bottom: 36px; }
.go-obj b { color: var(--accent); font-weight: normal; }
.go-click { letter-spacing: .4em; color: var(--text); }
.note-view, .journal-view { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.note-view[hidden], .journal-view[hidden] { display: none; }
.note-paper { width: min(460px, 90vw); background: #d9d3bf; color: #241f18; padding: 30px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.8); transform: rotate(-1.2deg); font-family: "Special Elite", var(--mono); }
.note-paper h4 { font-family: var(--display); font-size: 22px; text-transform: uppercase; margin: 0 0 14px; color: #3a1a12; }
.note-paper p { white-space: pre-wrap; line-height: 1.6; margin: 0 0 18px; }
.note-paper small { color: #6b6250; }
.journal-view { pointer-events: none; }
.journal-box { width: min(520px, 90vw); background: var(--panel-solid); border: 1px solid var(--line-hi); padding: 26px 28px; }
.journal-box h4 { font-family: var(--display); font-size: 26px; text-transform: uppercase; margin: 10px 0 4px; }
.journal-box .j-sec { color: var(--accent); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; margin: 16px 0 4px; }
.journal-box p { margin: 4px 0; line-height: 1.6; }
.journal-box b { font-weight: normal; color: var(--text); }

/* ---------- Quit ---------- */
#screen-quit.active { display: grid; place-items: center; text-align: center; }
.quit-msg p:first-child { font-family: var(--display); font-size: 40px; text-transform: uppercase; margin: 0 0 10px; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0,0,0,0.72); backdrop-filter: blur(4px); }
.overlay[hidden] { display: none; }
#modal { z-index: 40; }
.pause-box { min-width: 340px; animation: screenIn .25s ease-out; }
.pause-title { font-family: var(--display); font-weight: 700; font-size: 64px; letter-spacing: .1em; }
.pause-sub { color: var(--dim); margin-bottom: 24px; font-size: 13px; }
.modal-box { width: min(480px, 92vw); padding: 26px 28px; animation: screenIn .2s ease-out; border-top: 2px solid var(--accent); }
.modal-box.warn { border-top-color: var(--danger); }
.modal-title { font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .04em; }
.modal-body { color: var(--dim); margin: 12px 0 24px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px); z-index: 45;
  background: var(--panel-solid); border: 1px solid var(--accent); padding: 10px 18px; color: var(--accent);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { border-color: var(--danger); color: var(--danger); }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  body { overflow: auto; }
  .screen { padding: 24px 16px; overflow: auto; }
  .hq, .split, .settings-body { grid-template-columns: 1fr; height: auto; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .setting { grid-template-columns: 1fr; }
  .diff-list { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr 1fr; }
  .dossier h3 { padding-right: 0; }
  .dossier .stamp { position: static; display: inline-block; margin-bottom: 8px; }
}

/* Biohazard suit: looking out through a full-face respirator visor. */
#visor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* the edge of the visor: soft-focus plastic curving away, then the dark hood */
#visor::before { content: ""; position: absolute; inset: 0;
  backdrop-filter: blur(2.5px) saturate(.8);
  -webkit-mask-image: radial-gradient(ellipse 80% 76% at 50% 46%, transparent 62%, #000 82%);
  mask-image: radial-gradient(ellipse 80% 76% at 50% 46%, transparent 62%, #000 82%); }
#visor .rim { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 86% 82% at 50% 46%, transparent 68%, rgba(10,14,16,.5) 80%, rgba(3,4,5,.96) 94%),
    radial-gradient(ellipse 30% 22% at 50% 108%, rgba(3,4,5,.98) 60%, transparent 72%),
    radial-gradient(ellipse 18% 26% at 3% 100%, rgba(8,10,10,.95) 50%, transparent 70%),
    radial-gradient(ellipse 18% 26% at 97% 100%, rgba(8,10,10,.95) 50%, transparent 70%);
  box-shadow: inset 0 0 90px rgba(120,170,190,.08); }
/* a faint green-blue cast and scuffs on the plastic */
#visor::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    linear-gradient(rgba(70,110,110,.05), rgba(70,110,110,.05)),
    repeating-linear-gradient(28deg, transparent 0 140px, rgba(255,255,255,.025) 140px 141px, transparent 141px 300px),
    repeating-linear-gradient(-61deg, transparent 0 220px, rgba(255,255,255,.02) 220px 221px, transparent 221px 410px); }
#visor .glare { position: absolute; left: -30%; top: -20%; width: 160%; height: 140%; opacity: .9;
  background:
    radial-gradient(ellipse 22% 9% at 30% 14%, rgba(220,240,255,.09), transparent 70%),
    linear-gradient(104deg, transparent 38%, rgba(220,240,255,.05) 44%, transparent 50%, transparent 66%, rgba(220,240,255,.035) 69%, transparent 73%); }
#visor .beads { position: absolute; inset: 0; opacity: .25;
  background:
    radial-gradient(circle at 12% 84%, rgba(230,240,245,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 16% 90%, rgba(230,240,245,.3) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 21% 87%, rgba(230,240,245,.3) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 80% 86%, rgba(230,240,245,.3) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 81%, rgba(230,240,245,.35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 89%, rgba(230,240,245,.3) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 7% 70%, rgba(230,240,245,.25) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 94% 66%, rgba(230,240,245,.25) 0 2px, transparent 3px),
    radial-gradient(ellipse 34% 20% at 50% 100%, rgba(210,222,228,.18), transparent 70%); }
#visor .fog { position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse 55% 34% at 50% 96%, rgba(215,225,230,.55), rgba(215,225,230,0) 72%); }
#visor .crack { position: absolute; inset: 0; width: 100%; height: 100%; }
#visor .crack path { fill: none; stroke: rgba(235,245,250,.55); stroke-width: .18; vector-effect: non-scaling-stroke; stroke-width: 1.2px; filter: drop-shadow(0 0 1px rgba(0,0,0,.8)); }
.item.locked { opacity: .55; }
.item.locked .name { color: var(--dim); }

/* Post-kill checklist */
#hud-objective .chk { list-style: none; margin: 6px 0 0; padding: 0; font-family: var(--mono, monospace); font-size: 13px; text-transform: none; letter-spacing: .02em; }
#hud-objective .chk li { padding: 2px 0 2px 20px; position: relative; color: var(--text); }
#hud-objective .chk li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border: 1px solid var(--dim); }
#hud-objective .chk li.done { color: var(--dim); text-decoration: line-through; }
#hud-objective .chk li.done::before { background: var(--accent); border-color: var(--accent); }
/* Evidence camera viewfinder */
#camview { position: absolute; inset: 0; pointer-events: none; z-index: 3; font-family: var(--mono, monospace); color: #e8efe6; text-shadow: 0 0 3px #000; }
#camview .cv { position: absolute; width: 46px; height: 46px; border: 2px solid rgba(232,239,230,.85); }
#camview .c1 { left: 9%; top: 11%; border-right: 0; border-bottom: 0; } #camview .c2 { right: 9%; top: 11%; border-left: 0; border-bottom: 0; }
#camview .c3 { left: 9%; bottom: 13%; border-right: 0; border-top: 0; } #camview .c4 { right: 9%; bottom: 13%; border-left: 0; border-top: 0; }
#camview .cv-rec { position: absolute; left: calc(9% + 8px); top: calc(11% + 10px); font-size: 12px; letter-spacing: .15em; }
#camview .cv-rec b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d23; margin-right: 6px; animation: recBlink 1s steps(2) infinite; }
#camview .cv-shots { position: absolute; right: calc(9% + 8px); top: calc(11% + 10px); font-size: 12px; letter-spacing: .15em; }
#camview .cv-reticle { position: absolute; left: 50%; top: 50%; width: 120px; height: 84px; transform: translate(-50%, -50%); border: 1px solid rgba(232,239,230,.35); }
#camview.locked .cv-reticle { border-color: #9fe39a; box-shadow: 0 0 0 1px rgba(159,227,154,.3) inset; }
#camview .cv-target { position: absolute; left: 50%; top: calc(50% + 56px); transform: translateX(-50%); font-size: 12px; letter-spacing: .12em; color: #9fe39a; white-space: nowrap; }
#camview .cv-help { position: absolute; left: 50%; bottom: calc(13% + 8px); transform: translateX(-50%); font-size: 11px; color: rgba(232,239,230,.6); letter-spacing: .1em; }
#camview .cv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#camview .cv-flash.go { animation: camFlash .35s ease-out; }
@keyframes camFlash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes recBlink { 50% { opacity: 0; } }
.photo-card { position: absolute; right: 28px; bottom: 120px; width: 190px; padding: 10px 12px 12px; background: #eae6dc; color: #222; font-family: var(--mono, monospace); font-size: 11px;
  box-shadow: 0 6px 18px rgba(0,0,0,.6); transform: rotate(-3deg); animation: photoCard 2.6s ease-in forwards; z-index: 4; }
.photo-card b { display: block; font-size: 12px; letter-spacing: .12em; margin-bottom: 4px; }
@keyframes photoCard { 0% { opacity: 0; transform: translateY(30px) rotate(-6deg); } 12% { opacity: 1; transform: translateY(0) rotate(-3deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) rotate(2deg); } }

/* Autonomous drive between HQ and a site */
.drive-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono, monospace); color: #dfe8e4; text-shadow: 0 0 4px #000; }
.drive-hud .dh-top { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); text-align: center; letter-spacing: .2em; font-size: 12px; }
.drive-hud .dh-top b { display: block; color: #9fe39a; font-size: 13px; margin-bottom: 4px; }
.drive-hud .dh-top span { font-family: var(--display); font-size: 22px; letter-spacing: .08em; }
.drive-hud .dh-clock { position: absolute; top: 26px; right: 32px; font-size: 20px; letter-spacing: .1em; color: #c9d4cf; }
.drive-hud .dh-skip { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .15em; color: rgba(223,232,228,.55); }
.drive-hud .dh-fade { position: absolute; inset: 0; background: #000; opacity: 1; }

/* ---------- the lab microscope: looking down the eyepiece ---------- */
#scope { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; align-items: center; justify-content: center; }
#scope[hidden] { display: none; }
#scope canvas { width: min(86vh, 92vw); height: min(86vh, 92vw); border-radius: 50%; }
#scope .scope-hud { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); width: min(420px, 90vw); text-align: center;
  font: 12px/1.6 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.08em; color: #c8d8d0; }
#scope .scope-bar { height: 6px; margin: 6px auto 2px; width: 70%; background: #1a2622; border-radius: 3px; overflow: hidden; }
#scope .scope-bar i { display: block; height: 100%; background: #8aa89a; transition: width 0.1s; }
#scope .scope-bar i.ok, #scope .ok { background-color: transparent; color: #7af0a8; }
#scope .scope-bar i.ok { background: #7af0a8; }
#scope .keys { margin-top: 6px; color: #6a8478; font-size: 11px; }
#scope .scope-guide { position: absolute; right: 3vw; top: 50%; transform: translateY(-50%); width: 230px; padding: 14px 16px;
  border: 1px solid #26342e; background: rgba(6, 12, 10, 0.85); font: 11px/1.55 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.06em; color: #c8d8d0; }
#scope .scope-guide span { color: #6a8478; display: block; margin-bottom: 8px; }
#scope .scope-guide kbd { display: inline-block; min-width: 16px; padding: 0 4px; margin-right: 4px; border: 1px solid #4a6258; text-align: center; color: #7af0a8; }
@media (max-width: 900px) { #scope .scope-guide { top: 12px; right: 12px; transform: none; width: 200px; } }

/* ---------- the SALT / SEAR sprayer gauge ---------- */
#spray-hud { position: absolute; right: 28px; bottom: 120px; min-width: 190px; padding: 10px 12px; border: 1px solid rgba(200, 210, 200, 0.18);
  background: rgba(6, 8, 8, 0.55); font: 11px/1.7 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.08em; color: #c8d0cc; }
#spray-hud[hidden] { display: none; }
#spray-hud b { display: block; font-weight: 700; }
#spray-hud b.salt { color: #6ae09a; }
#spray-hud b.sear { color: #ff7a4a; }
#spray-hud span { display: block; }

/* ---------- The HQ desk PC (2010 office workstation, XP-era look) ---------- */
body.seated #hud, body.seated #hud-prompt { visibility: hidden; }
body.pc-on #vignette, body.pc-on #scanlines, body.pc-on #grain,
body.ending-on #vignette, body.ending-on #scanlines, body.ending-on #grain { display: none; }
#pc {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  font: 12px Tahoma, Verdana, "Segoe UI", sans-serif; color: #000; cursor: default;
  animation: pcIn .25s ease-out;
}
#pc[hidden] { display: none; }
@keyframes pcIn { from { opacity: 0; } to { opacity: 1; } }
#pc button { font: inherit; color: inherit; cursor: default; }
#pc svg { display: block; }
.pc-desk { position: relative; z-index: 1; flex: 1; overflow: hidden; }

/* wallpaper: open sky over a rolling green hill */
.pc-wall { position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(#1d58c9 0%, #3b83e2 34%, #79b2ef 58%, #b9d9f6 72%, #cfe6f9 78%); }
/* (soft-edged by their gradient, not a blur filter: a full-screen blur stalls the first frame) */
.pc-cloud { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.55) 55%, rgba(255,255,255,0)); }
.pc-cloud.c1 { left: 8%; top: 9%; width: 24%; height: 9%; opacity: .8; }
.pc-cloud.c2 { left: 52%; top: 4%; width: 30%; height: 7%; opacity: .55; }
.pc-cloud.c3 { left: 64%; top: 22%; width: 34%; height: 15%; opacity: .9; }
.pc-cloud.c4 { left: 20%; top: 30%; width: 22%; height: 8%; opacity: .6; }
.pc-hill { position: absolute; left: -25%; right: -15%; top: 56%; height: 110%; border-radius: 50% 50% 0 0 / 30% 38% 0 0;
  background: radial-gradient(ellipse 60% 30% at 38% 12%, #8fd14d 0%, #63ad31 38%, #3f8b20 70%, #2d6d16 100%); transform: rotate(-3deg);
  box-shadow: inset 0 18px 30px rgba(255,255,255,.12); }
.pc-hill.far { left: 30%; right: -40%; top: 52%; background: radial-gradient(ellipse 50% 25% at 50% 10%, #4a7d2f, #2e621d 70%); transform: rotate(4deg); }

/* desktop icons */
.pc-icons { position: absolute; left: 10px; top: 10px; bottom: 10px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 14px; align-content: flex-start; }
.pc-icon { width: 80px; background: none; border: 0; padding: 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; outline: none; }
.pc-icon svg { width: 36px; height: 36px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)); }
.pc-icon span { color: #fff; text-shadow: 1px 1px 1px #000, 0 0 2px #000; line-height: 1.25; text-align: center; padding: 0 2px; }
.pc-icon.sel svg { filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)) brightness(.7) sepia(1) hue-rotate(180deg) saturate(3); }
.pc-icon.sel span, .pc-icon:focus-visible span { background: #316ac5; text-shadow: none; outline: 1px dotted #fff; }

/* windows */
.pc-windows { position: absolute; inset: 0; pointer-events: none; }
.xp-win { position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  background: #ece9d8; border: 3px solid #0831d9; border-top: 0; border-radius: 8px 8px 0 0;
  box-shadow: 2px 4px 14px rgba(0,0,0,.45); min-width: 260px; min-height: 140px; }
.xp-win[hidden] { display: none; }
.xp-win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.xp-title { height: 30px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 5px 0 7px; margin: 0 -3px;
  border-radius: 7px 7px 0 0; color: #fff; font: bold 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px #0f1089;
  background: linear-gradient(#0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%); }
.xp-win.max .xp-title { border-radius: 0; }
.xp-title > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-ico svg { width: 16px; height: 16px; }
.xp-ctl { display: flex; gap: 2px; }
.xp-ctl button { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; position: relative; padding: 0;
  background: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 80%, #a3bbec 100%); box-shadow: inset -1px -1px 1px rgba(0,0,0,.2); }
.xp-ctl button:hover { filter: brightness(1.18); }
.xp-ctl button:active { filter: brightness(.85); }
.xp-ctl .xp-close { background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 80%, #e9c4b0 100%); }
.xp-min::after { content: ""; position: absolute; left: 4px; bottom: 4px; width: 7px; height: 3px; background: #fff; }
.xp-max::after { content: ""; position: absolute; left: 4px; top: 4px; width: 11px; height: 11px; box-sizing: border-box; border: 1px solid #fff; border-top-width: 3px; }
.xp-close::before, .xp-close::after { content: ""; position: absolute; left: 9px; top: 3px; width: 2px; height: 13px; background: #fff; transform: rotate(45deg); }
.xp-close::after { transform: rotate(-45deg); }
.xp-win.inactive .xp-title { background: linear-gradient(#7697e7 0%, #7e9ee3 10%, #94afe8 50%, #97b4e9 88%, #7d9ee3 100%); text-shadow: none; color: #d8e4f8; }
.xp-win.inactive .xp-ctl button { filter: saturate(.45) brightness(1.1); }
.xp-menubar { flex: none; display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid #d6d2c2; background: #ece9d8; }
.xp-menubar span { padding: 2px 7px; }
.xp-menubar span:hover { background: #316ac5; color: #fff; }

/* a window's contents: the HQ screens re-skinned to a light desktop palette */
.xp-body {
  --bg: #fff; --panel: #fff; --panel-solid: #fff; --line: #c9c5b4; --line-hi: #7f9db9;
  --text: #000; --dim: #5b5b5b; --faint: #a8a8a8; --accent: #2457c5; --accent-dim: #9cb6e8;
  --danger: #c4301c; --ok: #2c8a2c;
  --mono: Tahoma, Verdana, "Segoe UI", sans-serif; --display: "Trebuchet MS", Tahoma, sans-serif;
  flex: 1; min-height: 0; overflow: auto; position: relative; padding: 14px 16px;
  background: #fff; border: 1px solid #7f9db9; margin: 0 2px 2px; color: #000; font: 12px var(--mono); user-select: text;
}
.xp-body[data-app="settings"], .xp-body[data-app="records"] { background: #ece9d8; }
.xp-body > .split, .xp-body > .hq { height: 100%; }
.xp-body > .panel-wrap { max-width: none; height: 100%; }
.xp-body .panel { backdrop-filter: none; }
.xp-body .bottom-bar [data-action="back"], .xp-body #hq-menu { display: none; }
.xp-body .bottom-bar { margin-top: 10px; justify-content: flex-end; }
.xp-body .bottom-bar:not(:has(button:not([data-action="back"]))) { display: none; }
.xp-body .screen-head { margin-bottom: 12px; }
.xp-body .screen-head h2 { font: bold 20px var(--display); text-transform: none; letter-spacing: 0; color: #0b3a8e; }
.xp-body .split { grid-template-columns: minmax(250px, 330px) 1fr; gap: 14px; }
.xp-body .hq { grid-template-columns: 210px 1fr; gap: 16px; }
.xp-body .firm-name { font: bold 22px var(--display); text-transform: none; color: #0b3a8e; }
.xp-body .stat { border: 1px solid #c9c5b4; background: linear-gradient(#fff, #f2f0e6); }
.xp-body .stat-value { font: bold 20px var(--display); }
.xp-body .terminal { --line: #2a2a2a; --faint: #4f6b45; background: #000; border: 2px inset #9b9b9b; }
.xp-body .terminal-head { background: #0a246a; color: #fff; letter-spacing: .08em; }
.xp-body .terminal-body { font: 13px "Lucida Console", Consolas, monospace; color: #c0c0c0; user-select: none; }
.xp-body .terminal-body .cursor { background: #c0c0c0; }
.xp-body .list { gap: 0; border: 1px solid #7f9db9; padding: 0; background: #fff; }
.xp-body .row { border: 0; border-bottom: 1px solid #ecebe4; border-left: 0; padding: 8px 10px; background: #fff; }
.xp-body .row:hover { background: #eef3fc; }
.xp-body .row.selected { background: #316ac5; color: #fff; }
.xp-body .row.selected .row-sub, .xp-body .row.selected .dim, .xp-body .row.selected .tag.outline { color: #dbe6fb; }
.xp-body .row-title { font: bold 13px var(--mono); text-transform: none; letter-spacing: 0; }
.xp-body .dossier { padding: 18px 22px; border: 1px solid #7f9db9; }
.xp-body .dossier h3 { font-family: var(--display); text-transform: none; letter-spacing: 0; color: #0b3a8e; }
.xp-body .section-label { color: #0b3a8e; }
.xp-body .redact { background: #000; color: #000; }
.xp-body .btn, #pc ~ #modal .btn { font: 12px Tahoma, sans-serif; color: #000; padding: 4px 16px; min-width: 76px; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(#fff, #f3f2ea 60%, #d6d0c5); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); text-transform: none; letter-spacing: 0; }
.xp-body .btn:hover, .xp-body .btn:focus-visible { color: #000; border-color: #003c74; box-shadow: inset 0 0 0 2px #f8b636; }
.xp-body .btn.primary { background: linear-gradient(#fff, #f3f2ea 60%, #d6d0c5); color: #000; font-weight: bold; }
.xp-body .btn.ghost { border-color: #003c74; color: #000; padding-left: 16px; }
.xp-body .btn:disabled { color: #a3a191; border-color: #c9c7ba; opacity: 1; box-shadow: none; }
.xp-body .tag { color: #fff; }
.xp-body .tab { color: #000; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #ecebe5); padding: 4px 12px; text-transform: none; letter-spacing: 0; }
.xp-body .tab.active { color: #000; background: #fcfcfe; border-top: 2px solid #f8b636; }
.xp-body .settings-list, .xp-body .settings-help, .xp-body .records { background: #fff; border: 1px solid #919b9c; }
.xp-body .setting:hover, .xp-body .setting:focus-within { background: #eef3fc; }
.xp-body .setting-group { color: #0b3a8e; }
.xp-body .settings-help h4 { font-family: var(--display); text-transform: none; color: #0b3a8e; }
.xp-body kbd { border-color: #919b9c; background: #f4f3ee; }
.xp-body ::-webkit-scrollbar { width: 16px; background: #f3f1ec; }
.xp-body ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c8d6fb, #b7caf5); border: 1px solid #fff; border-radius: 2px; }
.xp-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.xp-empty svg { width: 64px; height: 64px; margin-bottom: 8px; }
.xp-help h3 { font: bold 16px "Trebuchet MS", Tahoma; color: #0b3a8e; margin: 0 0 10px; }
.xp-help p { line-height: 1.55; margin: 0 0 8px; }

/* the taskbar */
.pc-taskbar { flex: none; height: 30px; display: flex; align-items: stretch; position: relative; z-index: 3;
  background: linear-gradient(#1f2f86 0, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%); }
.pc-startbtn { display: flex; align-items: center; gap: 5px; padding: 0 20px 0 9px; border: 0; border-radius: 0 10px 10px 0; color: #fff !important;
  font: italic bold 19px "Trebuchet MS", Tahoma, sans-serif !important; text-shadow: 1px 1px 2px rgba(0,0,0,.6); letter-spacing: .5px;
  background: radial-gradient(circle at 70% 20%, #74c66c 0%, #3a9b33 45%, #2b7d24 100%); box-shadow: inset -2px -2px 4px rgba(0,0,0,.25), inset 2px 2px 3px rgba(255,255,255,.3); }
.pc-startbtn:hover { filter: brightness(1.1); }
.pc-startbtn.on { filter: brightness(.85); box-shadow: inset 2px 2px 5px rgba(0,0,0,.5); }
.pc-startbtn i svg { width: 20px; height: 20px; }
.pc-tasks { flex: 1; display: flex; gap: 3px; padding: 3px 8px; min-width: 0; }
.pc-task { flex: 0 1 165px; min-width: 40px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 0; border-radius: 3px; color: #fff !important;
  background: #3c81f3; box-shadow: inset -1px -1px 1px rgba(0,0,0,.25), inset 1px 1px 1px rgba(255,255,255,.3); white-space: nowrap; overflow: hidden; }
.pc-task span { overflow: hidden; text-overflow: ellipsis; }
.pc-task svg { width: 16px; height: 16px; flex: none; }
.pc-task:hover { background: #5394fa; }
.pc-task.on { background: #1e52b7; box-shadow: inset 1px 1px 2px rgba(0,0,0,.45); }
.pc-tray { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; color: #fff; border-left: 1px solid #1042af;
  background: linear-gradient(#0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  box-shadow: inset 1px 0 1px #18bbff; }
.pc-tray svg { width: 15px; height: 15px; }
#pc-clock { margin-left: 4px; white-space: nowrap; }

/* the start menu */
.pc-start { position: absolute; left: 0; bottom: 30px; width: 380px; z-index: 4; border-radius: 7px 7px 0 0; overflow: hidden;
  background: #fff; border: 1px solid #0831d9; box-shadow: 3px 3px 10px rgba(0,0,0,.5); animation: pcIn .12s ease-out; }
.pc-start[hidden] { display: none; }
.sm-head { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #fff; font: bold 15px "Trebuchet MS", Tahoma;
  text-shadow: 1px 1px 1px #0f1089; background: linear-gradient(#1868ce 0%, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%, #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb 100%); }
.sm-pic { width: 42px; height: 42px; border: 2px solid #fff; border-radius: 4px; background: #1b1d1c; box-shadow: 1px 1px 3px rgba(0,0,0,.4); }
.sm-pic svg { width: 100%; height: 100%; }
.sm-cols { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid #e98a28; }
.sm-left { padding: 6px 0; background: #fff; }
.sm-right { padding: 6px 0; background: #d3e5fa; border-left: 1px solid #95bdee; }
.sm-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; background: none; text-align: left; outline: none; }
.sm-item svg { width: 24px; height: 24px; flex: none; }
.sm-item.big { font-weight: bold; }
.sm-item.big svg { width: 32px; height: 32px; }
.sm-right .sm-item { color: #00136b; }
.sm-item:hover, .sm-item:focus-visible { background: #316ac5; color: #fff !important; }
.sm-sep { height: 1px; margin: 5px 10px; background: linear-gradient(90deg, transparent, #9fb7d9, transparent); }
.sm-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 8px; background: linear-gradient(#4282d6, #3b85e0 6%, #418ae3 14%, #3780de 50%, #3077d8 80%, #2770d7 100%); }
.sm-btn { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border: 0; background: none; color: #fff !important; border-radius: 3px; outline: none; }
.sm-btn svg { width: 22px; height: 22px; }
.sm-btn:hover, .sm-btn:focus-visible { background: rgba(255,255,255,.18); }

/* welcome and shutting-down screens */
.pc-splash { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: #5a7edc; }
.pc-splash[hidden] { display: none; }
.sp-top, .sp-bot { height: 12%; background: #00309c; }
.sp-top { border-bottom: 2px solid #94aef0; }
.sp-bot { border-top: 2px solid #e98a28; }
.sp-mid { flex: 1; display: flex; align-items: center; padding-left: 18%; background: radial-gradient(ellipse at 15% 30%, #a4bdf3 0%, #6d8ee2 30%, #5a7edc 70%); }
.sp-word { color: #fff; font: italic bold 48px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 2px 2px 4px rgba(0,0,0,.35); }

/* dialogs over the desktop look like the desktop's */
body.pc-on #modal { background: transparent; backdrop-filter: none; }
body.pc-on .modal-box { background: #ece9d8; color: #000; border: 3px solid #0831d9; border-top: 30px solid #0058ee; border-radius: 8px 8px 0 0; font: 12px Tahoma, sans-serif; box-shadow: 3px 4px 14px rgba(0,0,0,.45); }
body.pc-on .modal-title { font: bold 15px "Trebuchet MS", Tahoma; text-transform: none; letter-spacing: 0; color: #000; }
body.pc-on .modal-body { color: #000; }
body.pc-on .modal-body b { color: #0b3a8e; }
body.pc-on #modal .btn { font: 12px Tahoma, sans-serif; color: #000; padding: 4px 16px; min-width: 76px; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(#fff, #f3f2ea 60%, #d6d0c5); text-transform: none; letter-spacing: 0; }
body.pc-on #modal .btn:hover, body.pc-on #modal .btn:focus-visible { box-shadow: inset 0 0 0 2px #f8b636; color: #000; }
body.pc-on #toast { background: #ffffe1; color: #000; border: 1px solid #000; font: 12px Tahoma, sans-serif; bottom: 44px; }