/* Loaded last, only by desktop.html. Shared mobile styles remain untouched. */
:root {
  color-scheme: dark;
  --bg: var(--bg-main); --surface: #21180e; --surface2: #2c2013; --surface3: #382919;
  --text-dim: #b7a58d; --blue: var(--accent-blue); --radius: 4px;
}
:root[data-desktop-theme="blue-dark"] {
  --bg-main:#080c14; --panel-bg:#0f1520; --surface:#0f1520; --surface2:#161e2e; --surface3:#1d2740;
  --text:#eef2f8; --text-main:#eef2f8; --text-muted:#acbdd3; --text-dim:#acbdd3; --dim:#acbdd3;
  --accent-primary:#70c6ed; --accent-secondary:#f5c842; --accent:#70c6ed; --gold:#f5c842;
  --accent-blue:#70c6ed; --border:#394d68; --border-subtle:#394d68; --border-accent:#608ab1; --border-gold:#a58a36;
}
:root[data-desktop-theme$="light"] {
  color-scheme:light;
  --text:#302317; --text-main:#302317; --text-muted:#68543d; --text-dim:#68543d; --dim:#68543d;
  --bg-main:#f4ebdb; --panel-bg:#fff9ee; --surface:#fff9ee; --surface2:#eee1ca; --surface3:#e6d6ba;
  --accent-primary:#80501e; --accent-secondary:#77500e; --accent:#80501e; --gold:#77500e; --accent-blue:#276383;
  --border:#b39b77; --border-subtle:#c8b697; --border-accent:#8b6c40; --border-gold:#8b6c40;
  --accent-success:#396124; --accent-error:#ac2828;
}
:root[data-desktop-theme="blue-light"] {
  --bg-main:#eaf1fa; --panel-bg:#f8fbff; --surface:#f8fbff; --surface2:#e0eaf6; --surface3:#d2e1f1;
  --text:#142c46; --text-main:#142c46; --text-muted:#405c78; --text-dim:#405c78; --dim:#405c78;
  --accent-primary:#1b5e8b; --accent-secondary:#70500b; --accent:#1b5e8b; --gold:#70500b; --accent-blue:#1b5e8b;
  --border:#8ca6c0; --border-subtle:#acbfd2; --border-accent:#50799e; --border-gold:#947b38;
}
.modal-panel, .header-dropdown-menu, .sidebar, .top-bar, .bottom-bar,
.npc-card, .dialogue-container, #vn-container, .settings-select-custom {
  background:var(--panel-bg); color:var(--text-main); border-color:var(--border-accent);
}
.picker-card, .person-nav-btn, .terminal-btn, .lab-slot, .evidence-pick-btn {
  background:var(--surface2); color:var(--text-main); border-color:var(--border-subtle);
}
#lab-workspace { --lw-surface2:var(--surface2); --lw-surface3:var(--surface3); }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:12px 0; }
.settings-row select { max-width:100%; padding:8px; }
/* Keep modal headers visible and give content a single bounded scroll region. */
#inv-board-overlay, #codex-modal, #people-modal { padding:12px; }
#inv-board-overlay .modal-panel, #codex-modal .modal-panel, #people-modal .modal-panel {
  width:min(1440px,100%); max-width:1440px; height:calc(100dvh - 24px); max-height:calc(100dvh - 24px);
  padding:12px; overflow:hidden; min-height:0;
  /* Transforms/backdrop filters trap fixed witness pickers inside the panel. */
  animation:none; transform:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
#inv-board-overlay .modal-header, #codex-modal .modal-header, #people-modal .modal-header {
  flex:0 0 auto; padding:10px 14px; margin-bottom:8px;
}
.modal-header h2 { font-size:clamp(1rem,1.5vw,1.4rem); }
.modal-header h4 { font-size:clamp(.75rem,1.1vw,1rem); }
#inv-board-overlay .modal-body, #codex-modal .modal-body, #people-modal .modal-body {
  flex:1; min-height:0; max-height:none; overflow:auto; padding:10px; overscroll-behavior:contain;
}
#lab-workspace .lab-actions { margin:8px 0; }
#lab-workspace .lw-header { margin-bottom:4px; }
#lab-workspace .how-to-play { font-size:.8rem; }
#codex-evidence-grid, #codex-prophecy-grid, .codex-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px;
}
#codex-modal .picker-card { padding:10px; min-height:64px; overflow-wrap:anywhere; }
#people-modal .people-modal-layout { overflow:hidden; grid-template-columns:minmax(170px,230px) minmax(0,1fr); gap:16px; }
#people-modal .people-list-sidebar, #people-modal .person-detail-view { min-height:0; overflow:auto; }
#people-modal .npc-card:not([hidden]) { display:flex; flex-direction:column; height:100%; min-height:0; padding:12px; }
#people-modal .npc-header, #people-modal .npc-actions { flex-shrink:0; }
#people-modal .npc-feed { flex:1; min-height:80px; max-height:none; overflow:auto; }
#people-modal .npc-actions { position:sticky; bottom:0; background:var(--panel-bg); padding-top:8px; }
/* Scene dialogue sits above Cases; nested witness pickers fill the viewport. */
#vn-overlay, #local-dialogue-box { z-index:8000; }
#people-modal .npc-result-modal { z-index:9000 !important; padding:12px !important; }
#people-modal .npc-result-modal-card { max-height:calc(100dvh - 24px); width:min(900px,100%) !important; max-width:900px !important; overflow:auto; }
#people-modal .npc-result-modal-card .modal-avatar img { width:52px !important; height:64px !important; }
#people-modal .evidence-pick-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#people-modal .challenge-modal-actions { position:sticky; bottom:-20px; background:var(--surface2); padding:12px 0; z-index:1; }
@media(max-width:700px) {
  #people-modal .people-modal-layout { display:flex; flex-direction:column; overflow:auto; }
  #people-modal .people-list-sidebar { flex:0 0 auto; max-height:120px; }
  #people-modal .person-detail-view { flex:1; min-height:260px; }
  #people-modal .evidence-pick-list { grid-template-columns:1fr; }
}
.hud-panel, #top-bar, #bottom-bar, .minimap-panel, .loading-inner { background-color:var(--panel-bg); color:var(--text-main); }
#vn-container, .dialogue-container { background-color:var(--panel-bg); }
#people-modal .person-nav-btn.active, #codex-modal .picker-card.selected-a, #codex-modal .picker-card.selected-b {
  background:var(--surface3); border-color:var(--accent-primary); outline:1px solid var(--accent-primary);
}
#people-modal .person-detail-view { height:100%; }
#people-modal .people-modal-layout { height:auto; }
#lab-workspace .lab-task-guide { padding:10px 12px; margin:8px 0; font-size:.78rem; }
#lab-workspace .lab-task-steps { line-height:1.45; }
#lab-workspace .comparator-slots { margin:10px 0; }
@media(min-width:1100px) {
  #lab-workspace .lab-task-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-left:20px; }
}

/* Theme coverage for legacy selectors with IDs and fixed brown/black fills.
   These declarations deliberately win over the older platform sheets. */
:root[data-desktop-theme] {
  --surface1:var(--surface); --panel:var(--panel-bg); --text-body:var(--text-main);
  --button-ink:#142c46; --selected-bg:var(--surface3); --sepia:var(--text-muted);
}
:root[data-desktop-theme$="light"] { --button-ink:#fff; }
:root[data-desktop-theme="blue-light"] {
  --accent-secondary:#1b5e8b; --gold:#1b5e8b; --border-gold:#50799e;
}
:root[data-desktop-theme] :is(.modal-panel,.hud-panel,.header-dropdown-menu,.metrics-bar,.footer-nav-menu,
  #lsm-tree,#map-node-info-panel,.modal-header-map-custom,#vn-container,.dialogue-container,
  .minimap-panel,.ui-toggle,.hamburger-btn) {
  background:var(--panel-bg) !important;
  color:var(--text-main); border-color:var(--border-accent);
}
:root[data-desktop-theme] :is(.quest-item,.inventory-list,.evidence-list,.act-tree-header,
  .map-node-intel-header,#map-act-description,.map-legend,.codex-preview-panel,
  .a11y-setting-row,.prophecy-item,.npc-feed,.npc-card,.evidence-detail-content) {
  background:var(--surface2) !important; color:var(--text-main); border-color:var(--border-subtle);
}
:root[data-desktop-theme] #menu-modal-canvas-wrap { background:var(--bg-main) !important; }
:root[data-desktop-theme] :is(.satellite-scan-text,.satellite-coord,.map-tooltip,.satellite-overlay-top,.satellite-overlay-bottom) {
  color:var(--text-main); opacity:1;
}
:root[data-desktop-theme] :is(.mobile-nav-btn,.act-tree-name,.act-tree-chevron,.panel-header) { color:var(--accent-primary); }
:root[data-desktop-theme] :is(.terminal-btn,.action-btn,.picker-card,.person-nav-btn,
  .settings-select-custom,.panel-toggle-btn,.modal-close-btn,.close-icon-btn) {
  background:var(--surface2); color:var(--text-main); border-color:var(--border-accent);
}
:root[data-desktop-theme] :is(.btn-primary,.btn-save-settings-accent,.evidence-detail-confirm,
  #btn-load-node-scene,.npc-challenge-confirm) {
  background:var(--accent-primary) !important; color:var(--button-ink) !important; border-color:var(--accent-primary);
}
:root[data-desktop-theme] :is(.terminal-btn,.action-btn,.mobile-nav-btn,.person-nav-btn,.act-tree-header):hover,
:root[data-desktop-theme] :is(.mobile-nav-btn,.person-nav-btn,.act-tree-header).active {
  background:var(--surface3); color:var(--accent-primary); border-color:var(--accent-primary);
}
:root[data-desktop-theme] :is(.progress-bar-wrap,.inventory-grid,#map-node-emoji) { background:var(--surface3) !important; }
:root[data-desktop-theme] .toggle-btn { background:var(--surface3); border-color:var(--border-accent); }
:root[data-desktop-theme] .toggle-btn::after { background:var(--text-muted); }
:root[data-desktop-theme] .toggle-btn[aria-checked="true"] { background:var(--accent-primary); border-color:var(--accent-primary); }
:root[data-desktop-theme] .toggle-btn[aria-checked="true"]::after { background:var(--button-ink); }
:root[data-desktop-theme] #lab-workspace {
  --lw-bg:var(--bg-main); --lw-surface:var(--panel-bg); --lw-surface2:var(--surface2); --lw-surface3:var(--surface3);
  --lw-gold:var(--accent-primary); --lw-yellow:var(--accent-primary);
}
:root[data-desktop-theme] #lab-workspace :is(.lab-task-guide,.lab-btn,.timeline-step,.folder-tray,
  .comparator-slot,.card-pool,.lab-slot,.relationship-field,.connections-quick-guide,.compare-progress) {
  background:var(--surface2) !important; color:var(--text-main); border-color:var(--border-accent);
}
:root[data-desktop-theme] #lab-workspace :is(.lab-btn.active,.relationship-btn.active,.step-header,.folder-tray-header) {
  background:var(--surface3) !important; color:var(--accent-primary); border-color:var(--accent-primary);
}
:root[data-desktop-theme] #lab-workspace :is(.btn-submit,.step-count,.folder-count) {
  background:var(--accent-primary) !important; color:var(--button-ink) !important;
}
:root[data-desktop-theme] #lab-workspace .lab-task-guide { background-image:none !important; }
:root[data-desktop-theme] #settings-overlay .settings-modal-panel { position:relative; }
:root[data-desktop-theme] #btn-close-settings-x {
  position:absolute; top:12px; right:12px; width:36px; height:36px; z-index:30;
  display:grid; place-items:center; font-size:22px; cursor:pointer;
  background:var(--surface2); color:var(--text-main); border:1px solid var(--border-accent); border-radius:4px;
}
:root[data-desktop-theme] #settings-overlay .modal-header { padding-right:56px; }
:root[data-desktop-theme] * { scrollbar-color:var(--border-accent) var(--surface2); }
:root[data-desktop-theme] :is(.evidence-folder-container,.inworld-btn,.inworld-msg,.map-node-label,#evidence-popup-card) {
  background:var(--surface2) !important; color:var(--text-main); border-color:var(--border-accent);
}
:root[data-desktop-theme] .inworld-arrow { border-top-color:var(--surface2); }
:root[data-desktop-theme] .map-node-dot.locked { background:var(--surface3) !important; border-color:var(--border-accent) !important; }
:root[data-desktop-theme] #lab-workspace .relationship-switch { background:var(--surface2); border-color:var(--border-accent); }
:root[data-desktop-theme] #lab-workspace .relationship-switch input:checked + span {
  background:var(--accent-primary); color:var(--button-ink); border-color:var(--accent-primary);
}
:root[data-desktop-theme] #inv-board-overlay { background:rgba(0,0,0,.65); }
:root[data-desktop-theme] .mobile-nav-btn { background:transparent; box-shadow:none; }
:root[data-desktop-theme$="light"] :is(.hud-panel,.modal-panel,.footer-nav-menu,.metrics-bar) {
  box-shadow:0 4px 18px rgba(20,44,70,.18);
}
:root[data-desktop-theme] :is(.map-instructions,.map-node-title) { color:var(--text-main); }
:root[data-desktop-theme] .map-instructions { background:var(--surface2); border-color:var(--border-accent); }
:root[data-desktop-theme] #lab-workspace .matched-pairs-panel { background:var(--surface2); border-color:var(--border-subtle); }
:root[data-desktop-theme] #modal-overlay { background:rgba(0,0,0,.65); }

/* Shared desktop modal controls, including dynamically created Lab/Witness dialogs. */
.desktop-modal-navigation { position:relative !important; }
.desktop-modal-navigation > .desktop-modal-close {
  position:absolute !important; top:12px !important; right:12px !important; left:auto !important;
  width:40px !important; height:40px !important; min-width:40px; margin:0 !important; padding:0 !important;
  display:grid !important; place-items:center; z-index:40; border:1px solid var(--border-accent) !important;
  background:var(--surface2) !important; color:var(--text-main) !important; border-radius:4px;
  font-size:24px !important; line-height:1; cursor:pointer;
}
.desktop-modal-navigation > :is(.modal-header,.vn-chat-hdr) { padding-right:64px !important; min-height:56px; }
.desktop-modal-navigation > :is(.instructions-title,.reset-modal-body,.credits-body) { padding-right:48px; }
.desktop-game-return { flex:0 0 auto; display:flex; justify-content:flex-end; padding:10px 0 0; margin-top:8px; border-top:1px solid var(--border-subtle); }
.desktop-back-to-game {
  min-height:44px; padding:10px 22px; border:1px solid var(--accent-primary); border-radius:4px;
  background:var(--accent-primary); color:var(--button-ink); font:600 .9rem var(--font-stack); cursor:pointer;
}
.desktop-back-to-game:disabled { opacity:.55; cursor:default; }
.desktop-back-to-game:focus-visible,.desktop-modal-close:focus-visible { outline:3px solid var(--accent-primary); outline-offset:3px; }
#vn-container > .desktop-game-return { padding:10px 16px; }
.npc-result-modal-card.desktop-modal-navigation { padding-top:56px !important; }
#lab-workspace .modal-card.desktop-modal-navigation { max-height:calc(100dvh - 24px); overflow:auto; }
#desktop-area-announcement {
  position:fixed; top:calc(var(--topbar-h) + 32px); left:var(--gap); z-index:1400;
  max-width:min(340px,calc(100vw - 32px)); padding:14px 20px; border:1px solid var(--border-accent);
  border-left:4px solid var(--accent-primary); border-radius:4px; background:var(--panel-bg); color:var(--text-main);
  box-shadow:0 6px 24px rgba(0,0,0,.2); pointer-events:none;
  opacity:0; transform:translateY(-8px); transition:opacity .4s ease,transform .4s ease;
}
#desktop-area-announcement.visible { opacity:1; transform:translateY(0); }
#desktop-area-announcement span { display:block; font-size:.7rem; color:var(--text-muted); margin-bottom:4px; }
#desktop-area-announcement strong { font-size:1.15rem; }
@media(prefers-reduced-motion:reduce) { #desktop-area-announcement { transition:none; } }

/* Startup, installation and update UI must use the same desktop palette. */
:root[data-desktop-theme] {
  --border2:var(--border-accent); --text-reverse:var(--button-ink);
  --startup-glow:200,150,90;
}
:root[data-desktop-theme^="blue"] { --startup-glow:55,116,168; }
:root[data-desktop-theme] :is(.loading-screen,.end-screen) {
  background-color:var(--bg-main);
  background-image:radial-gradient(ellipse at 30% 60%,rgba(var(--startup-glow),.18),transparent 60%);
}
:root[data-desktop-theme] :is(.loading-inner,.end-inner) {
  background:var(--panel-bg); color:var(--text-main); border-color:var(--border-accent);
  border-top-color:var(--accent-primary);
}
:root[data-desktop-theme] :is(.loading-bar-track,.result-breakdown,.result-truth-box) { background:var(--surface2); border-color:var(--border-subtle); }
:root[data-desktop-theme] .loading-bar-fill { background:var(--accent-primary); }
:root[data-desktop-theme] :is(.hw-update-notice,.hw-app-dialog,.hw-install-settings) {
  background:var(--panel-bg); color:var(--text-main); border-color:var(--border-accent);
}
:root[data-desktop-theme] :is(.hw-update-notice,.hw-app-dialog,.hw-install-settings) button,
:root[data-desktop-theme] .hw-app-tools button {
  background:var(--surface2); color:var(--text-main); border:1px solid var(--border-accent);
}
:root[data-desktop-theme] :is(.hw-update-notice,.hw-app-dialog) button:first-of-type,
:root[data-desktop-theme] .hw-install-settings button {
  background:var(--accent-primary); color:var(--button-ink); border-color:var(--accent-primary);
}
:root[data-desktop-theme] :is(.hw-app-tools,.hw-update-notice,.hw-app-dialog,.hw-install-settings) :focus-visible {
  outline:3px solid var(--accent-primary); outline-offset:3px;
}
/* The original pale wordmark needs darker ink against light startup panels. */
:root[data-desktop-theme$="light"] .loading-title-icon { filter:brightness(.45); opacity:1; }

/* Shared native dialogs inherit desktop typography and the selected palette. */
:root[data-desktop-theme] { --font-display:var(--font-stack); }
:root[data-desktop-theme] .hw-app-dialog {
  font-family:var(--font-body); border-radius:4px;
  background:var(--panel-bg); color:var(--text-main); border-color:var(--border-accent);
}
:root[data-desktop-theme] .hw-app-dialog h2 {
  font-family:var(--font-stack); color:var(--accent-primary); border-color:var(--border-subtle);
}
:root[data-desktop-theme] .hw-app-dialog p { font-family:var(--font-body); color:var(--text-main); }
:root[data-desktop-theme] .hw-app-dialog button { font-family:var(--font-stack); }
:root[data-desktop-theme] .hw-welcome-dialog button:first-of-type {
  background:var(--accent-primary); color:var(--button-ink); border-color:var(--accent-primary);
}
:root[data-desktop-theme] .hw-welcome-dialog button:last-of-type {
  background:var(--surface2); color:var(--text-main); border-color:var(--border-accent);
}
:root[data-desktop-theme] .hw-update-notice { font-family:var(--font-body); }
:root[data-desktop-theme] .hw-update-notice button { font-family:var(--font-stack); }

/* Runtime notifications and projected interaction prompts share the active theme. */
:root[data-desktop-theme] #screen-alert,
:root[data-desktop-theme] #screen-alert.case-title-alert {
  background:var(--panel-bg); color:var(--text-main);
  border-color:var(--accent-primary); box-shadow:0 4px 20px rgba(0,0,0,.25);
}
:root[data-desktop-theme] #screen-alert.case-title-alert { color:var(--accent-primary); }
:root[data-desktop-theme] #screen-alert a { color:var(--accent-primary) !important; }
/* Only the visible button is a panel; its projection wrapper has no fill. */
:root[data-desktop-theme] .inworld-tag { background:transparent !important; border:0; box-shadow:none; }
:root[data-desktop-theme] .inworld-btn { background:var(--surface2) !important; color:var(--text-main); }
:root[data-desktop-theme] .inworld-btn:hover { background:var(--surface3) !important; color:var(--accent-primary); }
:root[data-desktop-theme] .inworld-arrow { border-top-color:var(--surface2); }
:root[data-desktop-theme] .inworld-msg { background:var(--surface2) !important; color:var(--text-main); }
:root[data-desktop-theme] #screen-alert { max-width:calc(100vw - 32px); white-space:normal; text-align:center; }
:root[data-desktop-theme] { background:var(--bg-main); }
:root[data-desktop-theme] body {
  background-color:var(--bg-main);
  background-image:radial-gradient(ellipse at 20% 50%,rgba(var(--startup-glow),.12),transparent 60%);
}
:root[data-desktop-theme] .inworld-btn { box-shadow:0 4px 14px rgba(0,0,0,.2); }