/* HAVEN DESK: THE LONG LOST PC — themed temporal layer.
   Same 1998 desk language: teal field, navy title bars, beveled controls,
   with an amber "archive" accent for the time rooms. */
:root {
  --veil-ink: #07110f;
  --veil-panel: #0b1714;
  --veil-panel-2: #101f1b;
  --veil-line: #2d4a40;
  --veil-paper: #e9e2cf;
  --veil-amber: #e0b35a;
  --veil-cyan: #72e0d1;
  --veil-green: #9fe58c;
  --veil-red: #e8785e;
  --veil-muted: #9bb2a8;
}

#win-calendar .body,
#win-longlost .body,
#win-veil-media .body {
  padding: 0;
  margin: 3px;
  overflow: hidden;
  background: #0a1210;
}

.veil-app {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px 18px;
  color: #dce9e2;
  background:
    linear-gradient(180deg, rgba(10, 25, 21, 0.98), rgba(5, 12, 10, 0.99)),
    repeating-linear-gradient(0deg, rgba(114, 224, 209, 0.018) 0 1px, transparent 1px 4px);
  font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  user-select: text;
}

.veil-app * { box-sizing: border-box; }
.veil-app button { cursor: pointer; }
.veil-app a { color: var(--veil-cyan); text-decoration: underline; text-underline-offset: 2px; }
.veil-app a:hover { color: #fff; }

.veil-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--veil-line);
  margin-bottom: 9px;
}
.veil-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.veil-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 2px solid var(--veil-amber);
  color: var(--veil-amber);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: #0a0a08;
  box-shadow: inset 0 0 0 2px #251d0f;
}
.veil-brand strong {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #f4efe0;
}
.veil-brand small {
  display: block;
  color: var(--veil-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}
.veil-progress {
  flex: none;
  color: var(--veil-amber);
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid #4b3b20;
  padding: 3px 6px;
  background: #171208;
}

.veil-tabs {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.veil-tab {
  border: 2px solid #ffffff;
  border-right-color: #303a35;
  border-bottom-color: #303a35;
  background: #b9b9a8;
  color: #111;
  font: 700 10px Tahoma, "MS Sans Serif", Verdana, sans-serif;
  letter-spacing: 0.05em;
  padding: 5px 9px;
}
.veil-tab.is-on {
  background: var(--veil-panel-2);
  color: var(--veil-cyan);
  border-color: #4f7668 #13211c #13211c #4f7668;
}
.veil-tab:focus-visible, .veil-app button:focus-visible, .veil-app input:focus-visible {
  outline: 2px solid var(--veil-amber);
  outline-offset: 1px;
}

.veil-intro { max-width: 720px; padding: 6px 0 0; }
.veil-intro.short { padding-top: 0; }
.veil-intro h1 {
  margin: 4px 0 10px;
  color: #f6efd9;
  font: 700 27px/1.12 "Courier New", Courier, monospace;
  letter-spacing: -0.035em;
  max-width: 680px;
}
.veil-kicker {
  margin: 0 0 5px;
  color: var(--veil-amber);
  font: 700 9px/1.3 "Courier New", Courier, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.veil-intro > p:not(.veil-kicker):not(.veil-foot) {
  max-width: 650px;
  color: #cad8d0;
  font-size: 13px;
}
.veil-rule {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 8px 10px;
  border-left: 3px solid var(--veil-amber);
  background: #14120b;
  color: #d8cba8;
  font-size: 11px;
  max-width: 700px;
}
.veil-rule b {
  flex: none;
  color: var(--veil-amber);
  font: 700 9px "Courier New", Courier, monospace;
  letter-spacing: 0.1em;
}
.veil-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.veil-primary, .veil-app .raised {
  font: 700 10px Tahoma, "MS Sans Serif", Verdana, sans-serif;
  letter-spacing: 0.04em;
  padding: 6px 10px;
}
.veil-primary {
  background: var(--veil-amber);
  color: #171006;
  border: 2px solid #fff2c9;
  border-right-color: #8d6a2f;
  border-bottom-color: #8d6a2f;
}
.veil-primary:hover { background: #f1ca7c; }
.veil-foot { color: #7e9288; font-size: 10px; margin: 10px 0 0; max-width: 700px; }

.veil-mapwrap {
  overflow: auto;
  border: 1px solid #2c4038;
  background:
    radial-gradient(circle at 25% 35%, rgba(224, 179, 90, 0.07), transparent 38%),
    radial-gradient(circle at 78% 65%, rgba(114, 224, 209, 0.06), transparent 40%),
    #07100d;
  min-height: 390px;
  max-height: 390px;
}
.veil-map {
  position: relative;
  width: 860px;
  height: 390px;
  margin: 0 auto;
}
.veil-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.veil-edge { stroke: #294038; stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.65; }
.veil-edge.is-live { stroke: var(--veil-teal, #3a8c7c); stroke-width: 1.6; stroke-dasharray: none; opacity: 0.9; }
.veil-node {
  position: absolute;
  width: 122px;
  min-height: 49px;
  transform: translate(-50%, -50%);
  padding: 4px 5px;
  text-align: left;
  color: #d9e6de;
  background: #0e1d18;
  border: 1px solid #3b5b4e;
  box-shadow: inset 0 0 0 1px #07100d;
  cursor: pointer;
}
.veil-node:hover { border-color: var(--veil-amber); background: #15271f; }
.veil-node-date {
  display: block;
  color: var(--veil-cyan);
  font: 700 8px "Courier New", Courier, monospace;
  letter-spacing: 0.06em;
}
.veil-node strong {
  display: block;
  font: 700 10px/1.2 Tahoma, "MS Sans Serif", Verdana, sans-serif;
  margin: 2px 0 1px;
  color: #f0ead7;
}
.veil-node small { display: block; color: #7d9b8e; font-size: 8px; line-height: 1.2; }
.veil-node.is-solved { border-color: var(--veil-amber); background: #1b180d; }
.veil-node.is-solved .veil-node-date { color: var(--veil-amber); }
.veil-node.is-locked { opacity: 0.52; border-style: dashed; background: #0a120f; }
.veil-node.is-locked strong { color: #7e8e84; }
.veil-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 7px 0 0; color: #81968c; font-size: 9px; }
.veil-key { display: inline-flex; align-items: center; gap: 4px; }
.veil-key i { width: 8px; height: 8px; display: inline-block; border: 1px solid #536d5f; }
.veil-key i.is-solved { background: var(--veil-amber); }
.veil-key i.is-live { background: var(--veil-cyan); }
.veil-key i.is-locked { background: #23372e; }
.veil-hint { color: #829b8f; font-size: 9px; margin: 6px 0 0; }

.veil-month { max-width: 620px; }
.veil-monthbar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.veil-monthbar strong { flex: 1; color: #f0e7d1; font: 700 14px "Courier New", Courier, monospace; letter-spacing: 0.03em; }
.veil-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: #1b2a24;
  padding: 4px;
  border: 1px solid #344b40;
}
.veil-dow { text-align: center; color: var(--veil-amber); font: 700 9px "Courier New", Courier, monospace; padding: 3px 0; }
.veil-empty { min-height: 31px; }
.veil-day {
  min-height: 34px;
  padding: 2px;
  background: #0b1511;
  color: #a3b5aa;
  border: 1px solid #263a31;
  font: 11px Tahoma, "MS Sans Serif", Verdana, sans-serif;
  text-align: left;
  vertical-align: top;
}
.veil-day:hover { border-color: var(--veil-cyan); }
.veil-day.has-signal { background: #2b2110; color: var(--veil-amber); border-color: #6d5427; font-weight: 700; }
.veil-day.has-signal::after { content: " ·"; color: var(--veil-amber); }
.veil-day.has-locked { background: #111b17; color: #61786c; border-style: dashed; }
.veil-day.is-solved { background: #3a2a0e; color: #ffe8b0; }
.veil-day.is-current { outline: 2px solid var(--veil-cyan); outline-offset: -2px; }

.veil-case { max-width: 760px; }
.veil-case-card { margin: 0 0 10px; border: 1px solid #2d4439; background: #0b1511; }
.veil-case-open {
  display: block;
  width: 100%;
  text-align: left;
  background: #12231c;
  border: 0;
  border-bottom: 1px solid #2d4439;
  color: #e9e2cf;
  padding: 8px 10px;
}
.veil-case-open:hover { background: #1a3026; }
.veil-case-open span { display: block; color: var(--veil-cyan); font: 700 9px "Courier New", Courier, monospace; }
.veil-case-open strong { display: block; font-size: 13px; margin: 2px 0; }
.veil-case-open small { color: #889f93; font-size: 9px; }
.veil-doc { border-top: 1px solid #22352c; }
.veil-doc summary {
  cursor: pointer;
  padding: 6px 10px;
  color: var(--veil-amber);
  font: 700 9px "Courier New", Courier, monospace;
  letter-spacing: 0.04em;
}
.veil-doc summary:hover { background: #132019; }
.veil-doc pre {
  margin: 0;
  padding: 8px 12px 11px;
  color: #d4d9ca;
  background: #080f0c;
  font: 11px/1.5 "Courier New", Courier, monospace;
  white-space: pre-wrap;
  overflow: auto;
}

.veil-back { margin: 0 0 8px; }
.veil-hero {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #57472a;
  background:
    linear-gradient(90deg, rgba(3, 9, 7, 0.92), rgba(3, 9, 7, 0.25)),
    radial-gradient(circle at 78% 30%, rgba(224, 179, 90, 0.2), transparent 52%),
    #172117;
  background-size: cover;
  background-position: center;
}
.veil-hero.cyan { border-color: #376b61; background: linear-gradient(90deg, rgba(3,9,7,.92), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(114,224,209,.18), transparent 55%), #0d1a17; }
.veil-hero.red { border-color: #6b3c34; background: linear-gradient(90deg, rgba(3,9,7,.92), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(232,120,94,.17), transparent 55%), #1a0f0d; }
.veil-hero.silver { border-color: #5f6870; background: linear-gradient(90deg, rgba(3,9,7,.92), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(190,205,215,.16), transparent 55%), #101619; }
.veil-hero.gold { border-color: #80662e; background: linear-gradient(90deg, rgba(3,9,7,.9), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(224,179,90,.26), transparent 55%), #1b160a; }
.veil-hero.green { border-color: #426b3d; background: linear-gradient(90deg, rgba(3,9,7,.92), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(159,229,140,.15), transparent 55%), #0e1a10; }
.veil-hero.concrete { border-color: #5a5a50; background: linear-gradient(90deg, rgba(3,9,7,.92), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(190,185,166,.15), transparent 55%), #151614; }
.veil-hero.violet { border-color: #55446e; background: linear-gradient(90deg, rgba(3,9,7,.92), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(156,128,205,.16), transparent 55%), #15111d; }
.veil-hero.teal { border-color: #2d6f69; background: linear-gradient(90deg, rgba(3,9,7,.92), rgba(3,9,7,.2)), radial-gradient(circle at 75% 30%, rgba(114,224,209,.2), transparent 55%), #071716; }
.veil-hero h1 { margin: 4px 0 7px; color: #fff4d8; font: 700 27px/1.08 "Courier New", Courier, monospace; letter-spacing: -0.04em; max-width: 680px; }
.veil-summary { max-width: 660px; color: #d3dfd6; font-size: 12px; margin: 0; }
.veil-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 7px 0 12px; color: #8da499; font: 700 8px "Courier New", Courier, monospace; letter-spacing: 0.06em; }
.veil-meta span { border: 1px solid #2e463a; padding: 2px 5px; background: #0b1511; }
.veil-prose {
  max-width: 720px;
  margin: 0 0 9px;
  color: #cddacf;
  font-size: 13px;
  line-height: 1.58;
}
.veil-docs { margin: 12px 0; max-width: 760px; border: 1px solid #2e463a; background: #0a120f; }
.veil-real, .veil-links, .veil-music {
  max-width: 760px;
  margin: 10px 0;
  padding: 8px 10px;
  border-left: 2px solid var(--veil-cyan);
  background: #0c1713;
  color: #bfd0c5;
  font-size: 11px;
}
.veil-real b, .veil-links b, .veil-music b { display: block; color: var(--veil-cyan); font: 700 9px "Courier New", Courier, monospace; letter-spacing: 0.08em; margin-bottom: 4px; }
.veil-real p { margin: 3px 0; }
.veil-links a, .veil-source { display: block; margin: 3px 0; font-size: 11px; }
.veil-music audio, .veil-audio { margin-top: 4px; width: 100%; max-width: 440px; height: 30px; }
.veil-solved { max-width: 760px; margin: 12px 0; padding: 10px; border: 1px solid #8a6a2d; background: #1a1608; }
.veil-solved b { color: var(--veil-amber); font: 700 10px "Courier New", Courier, monospace; letter-spacing: 0.08em; }
.veil-solved p { color: #d9cda9; margin: 5px 0; font-size: 11px; }

.veil-gate {
  max-width: 760px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #57472a;
  background: #12140c;
  box-shadow: inset 0 0 0 1px #070b08;
}
.veil-gate-label { color: var(--veil-amber); font: 700 9px "Courier New", Courier, monospace; letter-spacing: 0.12em; }
.veil-question { margin: 6px 0 10px; color: #f2e6c8; font-size: 13px; line-height: 1.45; }
.veil-form { display: flex; gap: 5px; max-width: 520px; }
.veil-input {
  flex: 1;
  min-width: 0;
  padding: 6px 7px;
  border: 2px solid #808070;
  border-right-color: #f1e4bd;
  border-bottom-color: #f1e4bd;
  background: #07100c;
  color: #f0e7c9;
  font: 13px "Courier New", Courier, monospace;
}
.veil-feedback { margin: 9px 0 0; padding: 4px 6px; border: 1px solid #304238; background: #0b1511; color: #b9c9bf; font-size: 11px; }
.veil-feedback.is-pass { border-color: #7e9e58; color: #d9efb3; background: #18220e; }
.veil-feedback.is-fail { border-color: #8a4d3f; color: #f2b9a9; background: #21100c; }
.veil-bits { display: flex; gap: 3px; margin: 0 0 9px; flex-wrap: wrap; }
.veil-bit {
  width: 34px;
  height: 34px;
  font: 700 15px "Courier New", Courier, monospace;
  background: #111b16;
  color: #7f9a8c;
  border: 2px solid #688274;
  border-right-color: #17251d;
  border-bottom-color: #17251d;
}
.veil-bit.is-on { background: #b37d25; color: #160f05; border-color: #ffe5a7; box-shadow: 0 0 12px rgba(224,179,90,.4); }
.veil-seq { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.veil-seq-btn {
  padding: 7px 10px;
  border: 1px solid #4c6b5c;
  background: #10231b;
  color: #d8e7dc;
  font: 700 10px "Courier New", Courier, monospace;
  letter-spacing: 0.05em;
}
.veil-seq-btn:hover { border-color: var(--veil-amber); }
.veil-seq-btn.is-picked { opacity: 0.5; border-color: var(--veil-amber); }

.veil-game { max-width: 560px; margin: 10px 0; padding: 8px; border: 1px solid #355a48; background: #050d09; }
.veil-gamehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.veil-gamehead span { color: var(--veil-green); font: 700 9px "Courier New", Courier, monospace; letter-spacing: 0.04em; }
.veil-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: #06110d;
  border: 1px solid #2c4a3a;
}
.veil-pads { display: flex; gap: 5px; margin-top: 5px; }
.veil-pad { min-width: 44px; padding: 7px; font-size: 15px; }
.veil-game.is-win { border-color: var(--veil-amber); }
.veil-pads .veil-pad { touch-action: manipulation; }

.veil-sources { max-width: 760px; }
.veil-source {
  display: block;
  margin: 4px 0;
  padding: 5px 7px;
  border-left: 2px solid #3d6b5b;
  background: #0c1713;
  color: #bfe3d7;
}
.veil-source:hover { background: #13251d; }
.veil-frame { width: 100%; height: 270px; border: 1px solid #2e463a; background: #050b08; margin: 7px 0; }
.veil-toast {
  position: fixed;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%) translateY(10px);
  max-width: min(90vw, 620px);
  padding: 7px 11px;
  background: #0a1712;
  color: #f2e6c8;
  border: 1px solid var(--veil-amber);
  box-shadow: 0 4px 16px rgba(0,0,0,.55);
  font: 700 10px "Courier New", Courier, monospace;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 20;
}
.veil-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.veil-footbar { margin-top: 14px; padding-top: 7px; border-top: 1px solid #21372d; color: #687d71; font-size: 9px; }

@media (max-width: 900px) {
  #win-calendar, #win-longlost, #win-veil-media {
    left: 8px !important;
    top: 8px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 92px) !important;
  }
  .veil-app { padding: 9px 9px 14px; font-size: 12px; }
  .veil-intro h1, .veil-hero h1 { font-size: 21px; }
  .veil-mapwrap { min-height: 360px; max-height: 360px; }
  .veil-node { width: 104px; }
  .veil-node strong { font-size: 9px; }
  .veil-frame { height: 220px; }
  .veil-form { flex-direction: column; }
  .veil-form .veil-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .veil-toast { transition: none; }
}

/* The map and iframe rooms are the only places where the desk allows a
   different surface; everything else keeps the 1998 chrome. */
#win-calendar .titlebar, #win-longlost .titlebar, #win-veil-media .titlebar {
  background: #1b2b25;
  color: #e9e2cf;
}


.veil-recover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  padding: 7px 8px;
  border: 1px solid #4a3d26;
  background: #0d100a;
  max-width: 620px;
}
.veil-recover b {
  flex: 1 0 100%;
  color: var(--veil-amber);
  font: 700 9px "Courier New", Courier, monospace;
  letter-spacing: 0.08em;
}
.veil-recover .veil-input { max-width: 140px; flex: 0 0 140px; }
.veil-recover .veil-hint { flex: 1 0 100%; margin: 0; }
.veil-birthday { margin: 8px 0; padding: 10px; border: 1px solid #6b5728; background: radial-gradient(circle at 50% 30%, rgba(224,179,90,.16), transparent 55%), #111107; }
.veil-stars { color: #d8b96a; font: 700 10px "Courier New", Courier, monospace; letter-spacing: .14em; text-align: center; padding: 8px 0 3px; }
.veil-birthday-line { color: #e8d8ad; font-size: 12px; max-width: 560px; margin: 4px auto 9px; text-align: center; }
.veil-birthday .veil-actions { justify-content: center; }

.veil-chat { display: flex; flex-direction: column; min-height: 0; flex: 1; color: #dce9e2; font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.veil-chathead { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin-bottom: 4px; }
.veil-chatstatus { color: #9bb2a8; font: 700 9px "Courier New", Courier, monospace; letter-spacing: .08em; }
.veil-chatstatus.live { color: #9fe58c; }
.veil-chatstatus.archive { color: #e0b35a; }
.veil-chatstatus.checking { color: #72e0d1; }
.veil-chatclear { background: transparent; border: 0; color: #7e9288; font: 9px "Courier New", Courier, monospace; text-decoration: underline; }
.veil-chatlog { flex: 1; min-height: 100px; overflow: auto; padding: 6px; border: 2px solid #808070; border-right-color: #f1e4bd; border-bottom-color: #f1e4bd; background: #07100c; font: 12px/1.45 "Courier New", Courier, monospace; }
.veil-chatline { margin: 0 0 5px; white-space: pre-wrap; }
.veil-chatline b { color: #e0b35a; font-weight: 700; }
.veil-chatline.is-you b { color: #72e0d1; }
.veil-chatline.is-live b { color: #9fe58c; }
.veil-chatline.is-archive b { color: #e0b35a; }
.veil-chatline.is-pending { opacity: .55; }
.veil-chathint { margin: 5px 0; color: #829b8f; font-size: 9px; line-height: 1.35; }
.veil-chatform { display: flex; gap: 4px; }
.veil-chatinput { flex: 1; min-width: 0; padding: 5px 6px; background: #07100c; color: #e9e2cf; border: 2px solid #808070; border-right-color: #f1e4bd; border-bottom-color: #f1e4bd; font: 12px "Courier New", Courier, monospace; }
.veil-chatform .veil-primary { padding: 5px 10px; }
#win-chat .body { background: #0a1210; }

.veil-maphead { display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding:5px 8px; background:#09140f; border-bottom:1px solid #2c4038; }
.veil-maphead b { color:#e0b35a; font:700 9px "Courier New", Courier, monospace; letter-spacing:.1em; }
.veil-maphead span { color:#6e8578; font-size:9px; }
.veil-eras { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2c4038; border-bottom:1px solid #2c4038; }
.veil-eras span { padding:3px 7px; color:#9dbbaa; background:#0a1712; font:700 8px "Courier New", Courier, monospace; letter-spacing:.08em; }
.veil-mapwrap { background: #07120e; }
.veil-map { background-image: linear-gradient(rgba(114,224,209,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(114,224,209,.035) 1px, transparent 1px); background-size: 24px 24px; }
.veil-edge { stroke:#416357; stroke-width:1.2; opacity:.55; }
.veil-edge.is-live { stroke:#d4a64d; stroke-width:2; opacity:1; filter:drop-shadow(0 0 3px rgba(224,179,90,.3)); }
.veil-node { width:132px; min-height:56px; background:#10231b; border-color:#486b5a; box-shadow:0 0 0 1px #07100d, 0 3px 10px rgba(0,0,0,.25); }
.veil-node:hover { transform:translate(-50%,-50%) scale(1.04); z-index:4; }
.veil-node strong { font-size:11px; }
.veil-node small { color:#8caf9e; font-size:9px; }
.veil-node.is-locked { background:#0b1712; border-color:#365246; opacity:.7; }
.veil-node.is-locked strong { color:#7f978a; }
.veil-node.is-solved { background:#251e0e; border-color:#b2873d; }
.veil-node.is-solved .veil-node-date { color:#f0c46f; }

/* ===== remastered idle screen saver ===== */
#off {
  overflow: hidden;
  background: #000402;
  padding: 0;
  cursor: default;
}
#saver { position: absolute; inset: 0; width: 100%; height: 100%; }
#off::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.24) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}
.saver-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7vh 22px 9vh;
  text-align: center;
  color: #e5f2eb;
  text-shadow: 0 1px 3px #000, 0 0 18px rgba(0,0,0,.8);
  font-family: "Courier New", Courier, monospace;
}
.saver-kicker {
  margin: 0 0 18px;
  color: #e0b35a;
  font: 700 9px/1.4 "Courier New", Courier, monospace;
  letter-spacing: .20em;
}
#off .lygo-mark {
  width: 58px;
  height: 58px;
  line-height: 54px;
  margin: 0 auto 10px;
  color: #f4c875;
  border: 1px solid #b2873d;
  background: #090b07;
  box-shadow: 0 0 24px rgba(224,179,90,.16), inset 0 0 0 3px #171208;
  font: 700 24px "Courier New", Courier, monospace;
  animation: saver-breathe 6.5s ease-in-out infinite;
}
#off .lygo-brand {
  margin: 0 0 18px;
  color: #e8fffb;
  font: 700 38px/1 "Courier New", Courier, monospace;
  letter-spacing: .14em;
  text-shadow: 0 0 22px rgba(114,224,209,.33), 0 2px 0 #000;
  animation: saver-breathe 8.5s ease-in-out infinite;
}
#off h1 {
  margin: 0 0 8px;
  color: #f5eedb;
  font: 400 19px/1.3 Tahoma, "MS Sans Serif", Verdana, sans-serif;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px #000;
}
.saver-sub {
  margin: 0 0 16px;
  color: #92aa9e;
  font: 11px/1.5 Tahoma, "MS Sans Serif", Verdana, sans-serif;
  max-width: 460px;
}
#saver-word {
  min-height: 1.7em;
  margin: 0 0 3px;
  color: #e0b35a;
  font: 700 12px "Courier New", Courier, monospace;
  letter-spacing: .42em;
  text-shadow: 0 0 12px rgba(224,179,90,.25);
}
.saver-date {
  margin: 0 0 17px;
  color: rgba(224,179,90,.62);
  font: 10px "Courier New", Courier, monospace;
  letter-spacing: .18em;
}
.saver-date span {
  display: block;
  margin-top: 2px;
  color: rgba(114,224,209,.42);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
#off .raised {
  color: #171006;
  background: #e0b35a;
  border: 2px solid #fff2c9;
  border-right-color: #8d6a2f;
  border-bottom-color: #8d6a2f;
  font: 700 10px Tahoma, "MS Sans Serif", Verdana, sans-serif;
  letter-spacing: .08em;
  padding: 7px 15px;
}
#off .raised:hover { background: #f1ca7c; }
#off .games-mini { display: inline-block; margin-top: 14px; color: #7e9288; font: 9px "Courier New", Courier, monospace; }
@keyframes saver-breathe {
  0%, 100% { opacity: .84; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@media (max-width: 720px) {
  #off .lygo-brand { font-size: 27px; }
  #off h1 { font-size: 16px; }
  .saver-kicker { font-size: 7px; letter-spacing: .12em; }
  .saver-copy { padding: 5vh 14px 7vh; }
}
@media (prefers-reduced-motion: reduce) {
  #off .lygo-mark, #off .lygo-brand { animation: none; }
}


.veil-app-hero {
  background-image:
    linear-gradient(180deg, rgba(4,13,10,.42), rgba(3,9,7,.88)),
    url("./assets/veil/desk-hero.jpg");
  background-size: cover;
  background-position: center;
}
.veil-app-hero .veil-intro { background: rgba(3,9,7,.30); padding: 12px; border-left: 2px solid #57472a; max-width: 730px; }
.veil-app-hero .veil-intro h1, .veil-app-hero .veil-intro p { text-shadow: 0 1px 3px #000; }
#off .games-mini { background: transparent; border: 0; color: #6e8578; padding: 0; text-decoration: underline; }
#off .games-mini:hover { color: #e0b35a; }


.veil-mapwrap { min-height: 510px; max-height: 510px; }
@media (max-width: 900px) { .veil-mapwrap { min-height: 500px; max-height: 500px; } }


/* echo vault + atlas gates */
.veil-echo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 5px; margin: 6px 0; }
.veil-echo-card { text-align: left; padding: 6px 8px; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; font: 11px Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.veil-echo-card:hover { border-color: #e0b35a; background: #17271e; }
.veil-echo-card strong { display: block; color: #f0ead7; margin: 2px 0; font-size: 12px; }
.veil-echo-card small { display: block; color: #839b8d; font-size: 9px; line-height: 1.3; }
.veil-echo-card.is-done { border-color: #b2873d; background: #211b0d; }
.veil-echo-card.is-done small { color: #d9b86a; }
.veil-lights { display: grid; grid-template-columns: repeat(3, 42px); gap: 3px; margin: 0 0 9px; }
.veil-light { width: 42px; height: 38px; background: #0b1712; border: 2px solid #4d6a5c; border-right-color: #17251d; border-bottom-color: #17251d; }
.veil-light.is-on { background: #d4a64d; border-color: #ffe4a1; box-shadow: 0 0 12px rgba(224,179,90,.5); }
.veil-memory { display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 5px; max-width: 420px; margin-bottom: 7px; }
.veil-memorypad { padding: 10px; border: 2px solid #5b7b6b; background: #10231b; color: #e5e0cd; font: 700 10px "Courier New", Courier, monospace; letter-spacing: .08em; }
.veil-memorypad.amber.is-flash, .veil-memorypad.amber.is-hit { background: #e0b35a; color: #171006; }
.veil-memorypad.cyan.is-flash, .veil-memorypad.cyan.is-hit { background: #72e0d1; color: #07110f; }
.veil-memorypad.green.is-flash, .veil-memorypad.green.is-hit { background: #9fe58c; color: #07110f; }
.veil-memorypad.violet.is-flash, .veil-memorypad.violet.is-hit { background: #b8a2e8; color: #07110f; }
.veil-echo-grid .veil-node-date { color: #72e0d1; }

#win-echoes .titlebar { background: #1b2b25; color: #e9e2cf; }
#win-echoes .body { background: #0a1210; padding: 0; margin: 3px; overflow: hidden; }
#win-echoes .veil-app { padding-top: 10px; }
#win-echoes .veil-input { background: #07100c; color: #e9e2cf; border: 2px solid #596f62; border-right-color: #d8d0b0; border-bottom-color: #d8d0b0; padding: 4px 6px; min-width: 210px; }

/* arcade cabinets, minigames, plate archive */
#win-arcade .titlebar, #win-plates .titlebar { background: #1b2b25; color: #e9e2cf; }
#win-arcade .body, #win-plates .body { background: #0a1210; padding: 0; margin: 3px; overflow: hidden; }
#win-arcade .veil-app, #win-plates .veil-app { padding-top: 10px; }
.veil-arcade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; margin: 6px 0; }
.veil-arcade-card { text-align: left; padding: 6px 8px; min-height: 58px; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; font: 11px Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.veil-arcade-card:hover { border-color: #e0b35a; background: #17271e; }
.veil-arcade-card strong { display: block; color: #f0ead7; margin: 2px 0; font-size: 12px; }
.veil-arcade-card small { display: block; color: #839b8d; font-size: 9px; line-height: 1.3; }
.veil-arcade-card.is-done { border-color: #b2873d; background: #211b0d; }
.veil-arcade-card.is-done small { color: #d9b86a; }
.veil-mini-host { margin: 8px 0; border: 1px solid #355246; background: #06100c; padding: 9px; }
.veil-mini { max-width: 520px; }
.veil-mini-status { font: 11px "Courier New", Courier, monospace; color: #9fb8aa; margin: 8px 0 0; min-height: 16px; }
.veil-mini-status.is-win { color: #d9b86a; }
.veil-mini-status.is-fail { color: #e8785e; }
.veil-mini-hint { font: 10px "Courier New", Courier, monospace; color: #8fa79a; margin: 5px 0; }
.veil-catchgrid { display: grid; grid-template-columns: repeat(3, 62px); gap: 4px; margin: 7px 0; }
.veil-catchcell { width: 62px; height: 48px; background: #0b1712; border: 2px solid #49685a; border-right-color: #16261e; border-bottom-color: #16261e; }
.veil-catchcell.is-target { background: #d4a64d; border-color: #ffe4a1; box-shadow: 0 0 14px rgba(224,179,90,.45); }
.veil-tuner { width: 100%; max-width: 420px; accent-color: #e0b35a; margin: 8px 0; }
.veil-timingbar { position: relative; height: 24px; background: #07110d; border: 2px inset #4f6658; margin: 9px 0; overflow: hidden; }
.veil-timingzone { position: absolute; top: 0; bottom: 0; background: rgba(159,229,140,.3); border-left: 1px solid #9fe58c; border-right: 1px solid #9fe58c; }
.veil-timingmarker { position: absolute; top: 0; bottom: 0; width: 3px; background: #e0b35a; box-shadow: 0 0 8px #e0b35a; }
.veil-plate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 5px; margin: 6px 0; }
.veil-plate-card { padding: 3px; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; text-align: left; font: 10px Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.veil-plate-card:hover { border-color: #e0b35a; }
.veil-plate-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 3px; }
.veil-plate-card strong { display: block; color: #f0ead7; font-size: 10px; }
.veil-plate-card small { display: block; color: #839b8d; font-size: 8px; }
.veil-plate-frame { border: 2px inset #5a7166; background: #030706; margin: 8px 0; }
.veil-plate-frame img { display: block; width: 100%; height: auto; }
.veil-plate-nav { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.veil-plate-nav .veil-hint { margin: 0 auto; }
#win-arcade .tbar, #win-plates .tbar, #win-echoes .tbar { background: #1b2b25; color: #e9e2cf; }

@media (max-width: 700px) {
  #win-echoes, #win-arcade, #win-plates {
    left: 2px !important; top: 2px !important;
    width: calc(100vw - 4px) !important;
    height: calc(100vh - 54px) !important;
    max-width: none !important;
  }
  .veil-arcade-grid, .veil-plate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veil-echo-grid { grid-template-columns: 1fr; }
  .veil-top { flex-wrap: wrap; gap: 4px; }
  .veil-echo-card, .veil-arcade-card, .veil-plate-card { min-width: 0; }
}

/* The Lightfather Papers */
#win-lightfather .tbar { background: #1b2b25; color: #e9e2cf; }
#win-lightfather .body { background: #0a1210; padding: 0; margin: 3px; overflow: auto; }
#win-lightfather .veil-app { padding-top: 10px; }
.veil-light-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 5px; margin: 6px 0; }
.veil-light-card { text-align: left; padding: 7px 8px; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; font: 11px Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.veil-light-card:hover { border-color: #e0b35a; background: #17271e; }
.veil-light-card strong { display: block; color: #f0ead7; margin: 3px 0; font-size: 13px; }
.veil-light-card small { display: block; color: #839b8d; font-size: 9px; line-height: 1.3; }
.veil-light-card.is-read { border-color: #b2873d; background: #211b0d; }
.veil-pull { margin: 12px 0; padding: 9px 12px; border-left: 3px solid #e0b35a; color: #f0dfb0; background: rgba(224,179,90,.07); font: italic 14px Georgia, serif; }
@media (max-width: 700px) {
  #win-lightfather { left: 2px !important; top: 2px !important; width: calc(100vw - 4px) !important; height: calc(100vh - 54px) !important; max-width: none !important; }
  .veil-light-grid { grid-template-columns: 1fr; }
}
#win-lygo-papers .tbar { background: #1b2b25; color: #e9e2cf; }
#win-lygo-papers .body { background: #0a1210; padding: 0; margin: 3px; overflow: auto; }
#win-lygo-papers .veil-app { padding-top: 10px; }
@media (max-width: 700px) {
  #win-lygo-papers { left: 2px !important; top: 2px !important; width: calc(100vw - 4px) !important; height: calc(100vh - 54px) !important; max-width: none !important; }
}

/* private 1980 portrait */
.veil-portrait { float: right; width: min(240px, 38%); margin: 4px 0 12px 16px; padding: 4px; background: #0a120e; border: 1px solid #57472a; box-shadow: 0 2px 0 #000; }
.veil-portrait img { display: block; width: 100%; height: auto; filter: saturate(.82) contrast(1.04); }
.veil-portrait figcaption { padding-top: 5px; color: #b9a97f; font: 8px "Courier New", Courier, monospace; line-height: 1.4; letter-spacing: .04em; }
@media (max-width: 700px) {
  .veil-portrait { float: none; width: 100%; max-width: 280px; margin: 8px 0 12px; }
}
.icon.veil-archive-hidden { display: none !important; }
.veil-portal-grid { display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 6px; max-width: 430px; margin: 10px 0; }
.veil-portal-key { padding: 12px 6px; border: 2px solid #5b6b5a; background: #0b1511; color: #d8cfb2; font: 700 13px "Courier New", Courier, monospace; letter-spacing: .12em; }
.veil-portal-key:hover { border-color: #e0b35a; color: #ffe4a1; }
.veil-portal-key.is-tuned { background: #6d4b13; border-color: #ffe4a1; color: #fff3cf; box-shadow: 0 0 12px rgba(224,179,90,.45); }
.veil-roomplate { float: left; width: min(210px, 32%); margin: 4px 14px 10px 0; padding: 3px; border: 1px solid #355246; background: #07100c; }
.veil-roomplate img { display: block; width: 100%; height: auto; }
.veil-roomplate figcaption { color: #839b8d; font: 8px "Courier New", Courier, monospace; line-height: 1.35; padding-top: 4px; }
@media (max-width: 700px) { .veil-roomplate { float: none; width: 100%; max-width: 260px; margin: 8px 0 12px; } }
.veil-tab:focus-visible, .veil-primary:focus-visible, .raised:focus-visible, .veil-input:focus-visible, .veil-portal-key:focus-visible, .veil-light:focus-visible { outline: 2px solid #ffe4a1 !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .veil-app *, .lygo-drift, .lygo-mark { animation: none !important; transition: none !important; }
}
@media (max-width: 700px) {
  .tbtn { min-width: 34px; min-height: 30px; }
  .veil-portal-key { padding: 14px 6px; }
}
#win-voice .tbar { background: #1b2b25; color: #e9e2cf; }
#win-voice .body { background: #0a1210; padding: 0; margin: 3px; overflow: auto; }
#win-voice .veil-app { padding-top: 10px; }
.veil-audioctl { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: #9fb8aa; font: 9px "Courier New", Courier, monospace; }
.veil-audioctl input { width: 160px; accent-color: #e0b35a; }
.veil-voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 5px; margin: 8px 0; }
.veil-voice-card { text-align: left; padding: 8px; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; font: 11px Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.veil-voice-card:hover { border-color: #e0b35a; background: #17271e; }
.veil-voice-card strong { display: block; color: #f0ead7; font-size: 13px; margin: 3px 0; }
.veil-voice-card small { display: block; color: #839b8d; font-size: 9px; line-height: 1.35; }
.veil-voice-card.is-playing { border-color: #e0b35a; background: #211b0d; }
.veil-voice { margin: 9px 0; padding: 7px; border: 1px solid #355246; background: #07100c; }
.veil-voice b { display: block; color: #d9b86a; font: 9px "Courier New", Courier, monospace; margin-bottom: 5px; letter-spacing: .08em; }
.veil-voice audio { width: 100%; height: 28px; }
@media (max-width: 700px) {
  #win-voice { left: 2px !important; top: 2px !important; width: calc(100vw - 4px) !important; height: calc(100vh - 54px) !important; max-width: none !important; }
  .veil-voice-grid { grid-template-columns: 1fr; }
}
#win-openmic .tbar { background: #1b0f10; color: #f0ded8; }
#win-openmic .body { background: #0b0909; padding: 0; margin: 3px; overflow: auto; }
#win-openmic .veil-app { padding-top: 10px; }
.veil-openmic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px; margin: 8px 0; }
.veil-openmic-card { text-align: left; padding: 8px; background: #160d0d; border: 1px solid #5b3530; color: #e8d8d1; font: 11px Tahoma, "MS Sans Serif", Verdana, sans-serif; }
.veil-openmic-card:hover { border-color: #e8785e; background: #23100f; }
.veil-openmic-card strong { display: block; color: #ffe1d2; font: 15px Georgia, serif; margin: 3px 0; }
.veil-openmic-card small { display: block; color: #a68076; font-size: 9px; }
.veil-transcript { margin: 10px 0; padding: 9px; border-left: 2px solid #5b3530; background: #120c0b; }
.veil-transcript b { display: block; color: #d9a28e; font: 9px "Courier New", Courier, monospace; letter-spacing: .1em; margin-bottom: 6px; }
.veil-transcript-line { margin: 5px 0; color: #d8c3ba; font: 13px Georgia, serif; line-height: 1.45; }
.veil-transcript-line strong { color: #e8785e; font: 9px "Courier New", Courier, monospace; letter-spacing: .05em; }
@media (max-width: 700px) {
  #win-openmic { left: 2px !important; top: 2px !important; width: calc(100vw - 4px) !important; height: calc(100vh - 54px) !important; max-width: none !important; }
  .veil-openmic-grid { grid-template-columns: 1fr; }
}
#win-openmic .titlebar, #win-voice .titlebar, #win-lightfather .titlebar, #win-lygo-papers .titlebar, #win-arcade .titlebar, #win-plates .titlebar, #win-echoes .titlebar, #win-diskshelf .titlebar { background: #1b2b25; color: #e9e2cf; }
.veil-disk { margin: 10px 0; padding: 9px; border: 1px solid #3d5a4a; background: #0a1410; max-width: 760px; }
.veil-disk b { display: block; color: #e0b35a; font: 700 9px "Courier New", Courier, monospace; letter-spacing: 0.08em; margin-bottom: 8px; }
.veil-disk-row { display: flex; gap: 12px; align-items: flex-start; }
.veil-disk-row img { width: 120px; height: 68px; object-fit: cover; border: 1px solid #2e463a; background: #07100c; flex: 0 0 auto; }
.veil-disk-copy { min-width: 0; }
.veil-disk-copy strong { display: block; color: #f0ead7; font: 15px Tahoma, "MS Sans Serif", Verdana, sans-serif; margin-bottom: 4px; }
.veil-disk-copy p { margin: 0 0 6px; color: #c5d4cb; font: 12px Tahoma, "MS Sans Serif", Verdana, sans-serif; line-height: 1.4; }
.veil-disk-copy small { display: block; color: #839b8d; font-size: 10px; line-height: 1.35; margin-bottom: 8px; }
.veil-disk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 8px 0; }
.veil-disk-card { text-align: left; padding: 0; overflow: hidden; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; font: 11px Tahoma, "MS Sans Serif", Verdana, sans-serif; min-height: 150px; }
.veil-disk-card img { display: block; width: 100%; height: 86px; object-fit: cover; }
.veil-disk-card strong, .veil-disk-card small { display: block; padding: 4px 8px 0; }
.veil-disk-card small { padding-bottom: 8px; color: #839b8d; }
.veil-disk-card.is-locked { cursor: default; opacity: 0.85; }
.veil-disk-card.is-open:hover { border-color: #e0b35a; background: #17271e; }
@media (max-width: 700px) {
  .veil-disk-row { flex-direction: column; }
  .veil-disk-row img { width: 100%; height: 90px; }
  .veil-disk-grid { grid-template-columns: 1fr 1fr; }
}

/* LYGO 98 SETUP */
#veil-setup { position: fixed; inset: 0; z-index: 240; background: #06100d; color: #e9e2cf; font: 12px Tahoma, "MS Sans Serif", Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; padding: 22px; }
.veil-setup-brand { display: flex; align-items: center; gap: 10px; width: min(760px, 94vw); margin-bottom: 8px; }
.veil-setup-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e0b35a; color: #e0b35a; font: 13px "Courier New", Courier, monospace; }
.veil-setup-brand strong { display: block; font: 13px "Courier New", Courier, monospace; letter-spacing: .12em; color: #f0ead7; }
.veil-setup-brand small { display: block; color: #7f9b8c; font: 9px "Courier New", Courier, monospace; margin-top: 2px; }
.veil-setup-body { width: min(760px, 94vw); background: #0b1712; border: 2px solid #355246; border-right-color: #1b2a21; border-bottom-color: #1b2a21; box-shadow: inset 1px 1px #4e6a5b, 0 0 40px rgba(0,0,0,.55); padding: 20px 22px; }
.veil-setup-kicker { color: #72e0d1; font: 9px "Courier New", Courier, monospace; letter-spacing: .14em; margin: 0 0 8px; }
.veil-setup-title { font: normal 26px Georgia, serif; color: #f4ecd8; margin: 0 0 9px; }
.veil-setup-copy { color: #b7c9bd; line-height: 1.55; max-width: 610px; margin: 0 0 9px; }
.veil-setup-label { display: block; color: #d9b86a; font: 9px "Courier New", Courier, monospace; letter-spacing: .12em; margin: 12px 0 4px; }
.veil-setup-input { display: block; width: min(420px, 100%); background: #07100c; border: 2px solid #596f62; border-right-color: #d8d0b0; border-bottom-color: #d8d0b0; color: #e9e2cf; padding: 7px 8px; font: 14px "Courier New", Courier, monospace; outline: none; }
.veil-setup-input:focus { border-color: #e0b35a; }
.veil-setup-error { color: #ff9d80; min-height: 17px; font: 10px "Courier New", Courier, monospace; margin: 5px 0; }
.veil-setup-hint { color: #7f9b8c; font: 10px "Courier New", Courier, monospace; line-height: 1.45; margin: 6px 0; }
.veil-setup-nav { display: flex; align-items: center; gap: 8px; margin-top: 16px; border-top: 1px solid #273a2f; padding-top: 11px; }
.veil-setup-spacer { flex: 1; }
.veil-setup-walls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.veil-setup-wall { padding: 4px; text-align: left; background: #07110d; border: 2px solid #355246; color: #dce9e2; font: 10px Tahoma, sans-serif; }
.veil-setup-wall.is-on { border-color: #e0b35a; background: #211b0d; }
.veil-setup-wallthumb { height: 58px; display: grid; place-items: center; background: #0a2723; color: #72e0d1; font: 10px "Courier New", monospace; margin-bottom: 4px; overflow: hidden; }
.veil-setup-wallthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veil-setup-wall strong { display: block; font-size: 11px; color: #f0ead7; }
.veil-setup-wall small { display: block; color: #839b8d; font-size: 8px; margin-top: 2px; }
.veil-setup-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.veil-setup-theme { padding: 9px; text-align: left; background: #07110d; border: 2px solid #355246; color: #dce9e2; font: 10px Tahoma, sans-serif; }
.veil-setup-theme.is-on { border-color: #e0b35a; background: #211b0d; }
.veil-setup-swatch { display: block; height: 22px; border: 1px solid #000; margin-bottom: 5px; }
.veil-setup-theme strong { display: block; color: #f0ead7; font-size: 11px; }
.veil-setup-theme small { display: block; color: #839b8d; font-size: 8px; }
.veil-setup-progress { height: 12px; border: 2px inset #4b6154; background: #04100b; margin: 16px 0 4px; }
.veil-setup-progress i { display: block; height: 100%; background: #e0b35a; }
#veil-setup.is-scare { background: #000; padding: 0; }
.veil-bsod { background: #0000aa; color: #fff; width: 100%; min-height: 100%; padding: 8vh 8vw; font: 15px "Courier New", Courier, monospace; line-height: 1.5; }
.veil-bsod-brand { background: #c0c0c0; color: #0000aa; display: inline-block; padding: 1px 8px; font: 15px "Courier New", monospace; margin-bottom: 36px; }
.veil-bsod p { margin: 0 0 14px; max-width: 800px; }
.veil-bsod-small { font-size: 12px; }
.veil-bsod-bottom { margin-top: 50px !important; color: #fff; }
.veil-bsod-reset { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); background: #c0c0c0; color: #000; border: 2px solid #fff; border-right-color: #404040; border-bottom-color: #404040; padding: 10px 20px; font: bold 12px Tahoma, sans-serif; letter-spacing: .1em; }
@media (max-width: 700px) { .veil-setup-walls, .veil-setup-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .veil-setup-title { font-size: 22px; } .veil-setup-body { padding: 14px; } .veil-bsod { padding: 8vh 7vw; font-size: 12px; } }

/* PHOTO JOURNAL */
#win-gallery .titlebar { background: #1b2b25; color: #e9e2cf; }
#win-gallery .body { background: #0a1210; padding: 0; margin: 3px; overflow: auto; }
#win-gallery .veil-app { padding-top: 10px; }
.veil-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 5px; margin: 7px 0; }
.veil-gallery-card { text-align: left; padding: 3px; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; font: 9px Tahoma, sans-serif; }
.veil-gallery-card.is-open:hover { border-color: #e0b35a; }
.veil-gallery-card.is-locked { opacity: .62; }
.veil-gallery-card.is-current { border-color: #e0b35a; background: #211b0d; }
.veil-gallery-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 3px; }
.veil-gallery-card strong { display: block; color: #f0ead7; font-size: 9px; }
.veil-gallery-card small { display: block; color: #839b8d; font-size: 8px; line-height: 1.3; }
.veil-gallery-lock { display: grid; place-items: center; aspect-ratio: 16/9; margin-bottom: 3px; background: repeating-linear-gradient(135deg,#07100c,#07100c 8px,#0d1b16 8px,#0d1b16 16px); color: #557064; font: 12px "Courier New", monospace; }
.veil-gallery-lock small { color: #557064; font-size: 7px; }
.veil-gallery-frame { border: 2px inset #5a7166; background: #030706; margin: 8px 0; }
.veil-gallery-frame img { width: 100%; display: block; }
.veil-gallery-current { color: #e0b35a; font: 9px "Courier New", monospace; letter-spacing: .1em; }
@media (max-width: 700px) { #win-gallery { left: 2px !important; top: 2px !important; width: calc(100vw - 4px) !important; height: calc(100vh - 54px) !important; max-width: none !important; } .veil-gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.veil-user-chip { color: #b9d6c8; font: 9px "Courier New", Courier, monospace; letter-spacing: .08em; padding: 0 8px; border-left: 1px solid #6e8578; white-space: nowrap; }

/* CASE WALL */
#win-casewall .body { background: #0a1210; padding: 0; margin: 3px; overflow: auto; }
#win-casewall .titlebar { background: #1b2b25; color: #e9e2cf; }
.veil-casewall { padding: 8px 10px 14px; }
.veil-casewall-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0 8px; }
.veil-casewall-search { flex: 1 1 220px; min-width: 150px; background: #07100c; color: #e9e2cf; border: 2px inset #4b6154; padding: 5px 6px; font: 10px "Courier New", monospace; }
.veil-casewall-status { display: flex; gap: 3px; }
.veil-casewall-filter, .veil-casewall-open { background: #17261f; color: #dce9e2; border: 1px solid #4b6154; padding: 4px 7px; font: 9px "Courier New", monospace; letter-spacing: .05em; cursor: pointer; }
.veil-casewall-filter.is-on, .veil-casewall-open:hover { background: #e0b35a; border-color: #e0b35a; color: #171208; }
.veil-casewall-act { background: #07100c; color: #dce9e2; border: 1px solid #4b6154; padding: 4px; font: 9px "Courier New", monospace; }
.veil-casewall-shown { color: #839b8d; font: 8px "Courier New", monospace; letter-spacing: .08em; margin-left: auto; }
.veil-casewall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.veil-casewall-card { display: flex; flex-direction: column; min-height: 142px; padding: 7px; background: #0d1b16; border: 1px solid #355246; color: #dce9e2; font: 10px Tahoma, sans-serif; }
.veil-casewall-card.is-locked { opacity: .72; }
.veil-casewall-card.is-solved { border-color: #6f8f7d; background: #10251d; }
.veil-casewall-cardhead { display: flex; justify-content: space-between; gap: 5px; color: #839b8d; font: 8px "Courier New", monospace; letter-spacing: .08em; }
.veil-casewall-state { color: #e0b35a; }
.veil-casewall-card.is-locked .veil-casewall-state { color: #557064; }
.veil-casewall-title { display: block; margin: 7px 0 4px; color: #f0ead7; font-size: 11px; line-height: 1.25; }
.veil-casewall-sum { flex: 1; margin: 0 0 7px; color: #9fb5a8; font-size: 9px; line-height: 1.35; }
.veil-casewall-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; color: #6f8f7d; font: 8px "Courier New", monospace; letter-spacing: .05em; }
.veil-casewall-open { align-self: flex-start; }
.veil-casewall-empty { grid-column: 1 / -1; color: #839b8d; font: 10px "Courier New", monospace; padding: 12px 2px; }
.veil-casewall-foot { margin: 9px 0 0; color: #6f8f7d; font: 8px "Courier New", monospace; letter-spacing: .04em; }
@media (max-width: 700px) {
  #win-casewall { left: 2px !important; top: 2px !important; width: calc(100vw - 4px) !important; height: calc(100vh - 54px) !important; max-width: none !important; }
  .veil-casewall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veil-casewall-card { min-height: 156px; }
  .veil-casewall-shown { margin-left: 0; width: 100%; }
}