/* Direction A, "Refined Sticker", second draft: cool paper and blue-black
   ink, highlighter yellow for anything you act on (ink text on it), red for
   the logo's dot and the murderer and nothing else, 2px ink outlines and hard
   offset shadows. Titles in Familjen Grotesk, everything you read in Atkinson
   Hyperlegible Next, names and notes in Caveat.

   Three blocks that must stay in step: the light palette, the dark one a
   player chooses, and the same dark one again for a system in dark mode.
   Each names the direction A tokens first, then the names the pages were
   written against, as aliases. The aliases are repeated in the dark blocks on
   purpose: an asset pack's overrides land in a later plain ``:root`` block,
   and only a dark block's own declarations outrank it. */

:root {
  --font-ui: "MurdokuUI", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-title: "MurdokuTitle", "Familjen Grotesk", "MurdokuUI", system-ui, sans-serif;
  --font-hand: "MurdokuScript", "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-story: var(--font-ui);
  --script: var(--font-hand);
  --sans: var(--font-ui);
  --body: var(--font-story);

  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #e4e8ee;
  --ink: #1b1f2a;
  --ink-2: #3d4454;
  --ink-3: #5a6272;
  --outline: #1b1f2a;
  --line: #cdd3dc;
  --shadow: #1b1f2a;
  --sticker-edge: #ffffff;
  --act: #ffd23f;
  --act-hover: #ffc61a;
  --on-act: #1b1f2a;
  --mark: #ffe680;
  --crime: #d62839;
  --crime-text: #b3202f;
  --crime-wash: #fbe0e3;
  --blue-text: #2c4bb0;
  --blue-wash: #e0e6fa;
  --gold: #b8873a;
  --gold-text: #75521a;
  --gold-wash: #f2e5c8;
  --sage-text: #3d6433;
  --sage-wash: #dbe7d2;
  --focus: #2c4bb0;
  --good: #247a4b;
  --board-bg: #ffffff;
  --wall: #1b1f2a;
  --wall-outer: #1b1f2a;
  --door: #b8873a;
  --grid-line: rgba(27, 31, 42, 0.1);
  --sprite-stroke: #343a48;
  --hatch: rgba(27, 31, 42, 0.08);
  --hl-wash: rgba(255, 210, 63, 0.5);
  --hl-edge: #1b1f2a;
  --dim: rgba(238, 240, 243, 0.62);
  --water-filter: none;
  --who-mix: 100%;

  --wd: #b8916b;
  --fb: #93a7bd;
  --st: #b6b4bb;
  --gr: #86a577;
  --mt: #a9aeb6;
  --wm: #d8a078;
  --lt: #f1f3f6;
  --dk: #474d5a;
  --wa: #9cc3d6;

  --room-1: #e3ebdf;
  --room-2: #efe7d6;
  --room-3: #dde6ef;
  --room-4: #efe0de;
  --room-5: #dcebe6;
  --room-6: #e6e1ee;
  --room-7: #e6e8ec;
  --room-8: #f1e4d8;
  --room-9: #e7ecda;
  --room-10: #e0e3f1;

  --ground: var(--bg);
  --card: var(--surface);
  --card-sunk: var(--surface-2);
  --ink-soft: var(--ink-2);
  --ink-faint: var(--ink-3);
  --rule: var(--line);
  --select: var(--focus);
  --select-wash: var(--blue-wash);
  --bad: var(--crime-text);
  --info-wash: var(--blue-wash);
  --good-wash: var(--sage-wash);
  --good-ink: var(--sage-text);
  --bad-wash: var(--crime-wash);
  --bad-ink: var(--crime-text);
  --note: var(--ink-3);

  --wall-thickness: 3px;
  --x-size: 1;
  --label-size: 14px;
  --floor-opacity: 1;
  --object-scale: 1;
  --shadow-opacity: 0.13;

  color-scheme: light;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]):has(#dark-auto:checked) { --auto-dark: 1; }

:root[data-theme="dark"] {
  --bg: #141821;
  --surface: #1e2330;
  --surface-2: #181c26;
  --ink: #eef1f6;
  --ink-2: #c7cdd8;
  --ink-3: #9aa2b1;
  --outline: #8e97aa;
  --line: #2d3442;
  --shadow: #06080c;
  --sticker-edge: #eef1f6;
  --act: #ffd23f;
  --act-hover: #ffdc62;
  --on-act: #141821;
  --mark: rgba(255, 210, 63, 0.28);
  --crime: #ff5d6a;
  --crime-text: #ff8f99;
  --crime-wash: #3b1d23;
  --blue-text: #a3b8ff;
  --blue-wash: #232a48;
  --gold: #d5a55a;
  --gold-text: #e6bd78;
  --gold-wash: #3a301d;
  --sage-text: #a7cc98;
  --sage-wash: #24321f;
  --focus: #a3b8ff;
  --good: #6fc394;
  --board-bg: #1e2330;
  --wall: #cfd5e0;
  --wall-outer: #cfd5e0;
  --door: #d5a55a;
  --grid-line: rgba(238, 241, 246, 0.09);
  --sprite-stroke: #141821;
  --hatch: rgba(238, 241, 246, 0.07);
  --hl-wash: rgba(255, 210, 63, 0.3);
  --hl-edge: #ffd23f;
  --dim: rgba(20, 24, 33, 0.55);
  --water-filter: brightness(0.62) saturate(0.85);
  --who-mix: 58%;

  --wd: #93724f;
  --fb: #62778f;
  --st: #75737d;
  --gr: #62805a;
  --mt: #777c88;
  --wm: #a9765a;
  --lt: #353b48;
  --dk: #d0d5df;
  --wa: #4d7b93;

  --room-1: #26302a;
  --room-2: #312d27;
  --room-3: #25303b;
  --room-4: #342b2d;
  --room-5: #243332;
  --room-6: #2d2a37;
  --room-7: #2c2f36;
  --room-8: #352f2a;
  --room-9: #2c3228;
  --room-10: #282c3b;

  --ground: var(--bg);
  --card: var(--surface);
  --card-sunk: var(--surface-2);
  --ink-soft: var(--ink-2);
  --ink-faint: var(--ink-3);
  --rule: var(--line);
  --select: var(--focus);
  --select-wash: var(--blue-wash);
  --bad: var(--crime-text);
  --info-wash: var(--blue-wash);
  --good-wash: var(--sage-wash);
  --good-ink: var(--sage-text);
  --bad-wash: var(--crime-wash);
  --bad-ink: var(--crime-text);
  --note: var(--ink-3);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141821;
    --surface: #1e2330;
    --surface-2: #181c26;
    --ink: #eef1f6;
    --ink-2: #c7cdd8;
    --ink-3: #9aa2b1;
    --outline: #8e97aa;
    --line: #2d3442;
    --shadow: #06080c;
    --sticker-edge: #eef1f6;
    --act: #ffd23f;
    --act-hover: #ffdc62;
    --on-act: #141821;
    --mark: rgba(255, 210, 63, 0.28);
    --crime: #ff5d6a;
    --crime-text: #ff8f99;
    --crime-wash: #3b1d23;
    --blue-text: #a3b8ff;
    --blue-wash: #232a48;
    --gold: #d5a55a;
    --gold-text: #e6bd78;
    --gold-wash: #3a301d;
    --sage-text: #a7cc98;
    --sage-wash: #24321f;
    --focus: #a3b8ff;
    --good: #6fc394;
    --board-bg: #1e2330;
    --wall: #cfd5e0;
    --wall-outer: #cfd5e0;
    --door: #d5a55a;
    --grid-line: rgba(238, 241, 246, 0.09);
    --sprite-stroke: #141821;
    --hatch: rgba(238, 241, 246, 0.07);
    --hl-wash: rgba(255, 210, 63, 0.3);
    --hl-edge: #ffd23f;
    --dim: rgba(20, 24, 33, 0.55);
    --water-filter: brightness(0.62) saturate(0.85);
    --who-mix: 58%;

    --wd: #93724f;
    --fb: #62778f;
    --st: #75737d;
    --gr: #62805a;
    --mt: #777c88;
    --wm: #a9765a;
    --lt: #353b48;
    --dk: #d0d5df;
    --wa: #4d7b93;

    --room-1: #26302a;
    --room-2: #312d27;
    --room-3: #25303b;
    --room-4: #342b2d;
    --room-5: #243332;
    --room-6: #2d2a37;
    --room-7: #2c2f36;
    --room-8: #352f2a;
    --room-9: #2c3228;
    --room-10: #282c3b;

    --ground: var(--bg);
    --card: var(--surface);
    --card-sunk: var(--surface-2);
    --ink-soft: var(--ink-2);
    --ink-faint: var(--ink-3);
    --rule: var(--line);
    --select: var(--focus);
    --select-wash: var(--blue-wash);
    --bad: var(--crime-text);
    --info-wash: var(--blue-wash);
    --good-wash: var(--sage-wash);
    --good-ink: var(--sage-text);
    --bad-wash: var(--crime-wash);
    --bad-ink: var(--crime-text);
    --note: var(--ink-3);

    color-scheme: dark;
  }
}

/* The faces. Each source is filled in by ``shell.fill_fonts``: a data URI
   in a board that has to work from a file, the file's own address online. */
@font-face {
  font-family: "MurdokuUI";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/ui.a7398c62fda6.woff2") format("woff2");
}
@font-face {
  font-family: "MurdokuTitle";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/title.1e00a5fad531.woff2") format("woff2");
}
@font-face {
  font-family: "MurdokuScript";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/script.401a5adc096a.woff2") format("woff2");
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 var(--font-ui);
  -webkit-text-size-adjust: 100%;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

.grow { flex: 1 1 auto; }
.muted { color: var(--ink-faint); }

.app {
  max-width: 1380px;
  margin: 0 auto;
  padding: 14px 16px 40px;
}
.app.wide { max-width: 1560px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.brand {
  font: 700 22px/1 var(--font-title);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
.brand .dot { color: var(--crime); }
.brand .sub {
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.byline {
  font: 600 13px/1 var(--font-hand);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: 8px;
}

.nav { display: flex; gap: 4px; }
.nav a {
  padding: 6px 10px;
  font: 700 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 8px;
}
.nav a:hover { color: var(--ink); border-color: var(--rule); }
.nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--card);
  border-color: var(--outline);
  box-shadow: 2px 2px 0 var(--shadow);
}

.topbar .back { white-space: nowrap; }
.topbar .back[hidden] { display: none; }

:root[data-embedded] .topbar .nav,
:root[data-embedded] .topbar .back,
:root[data-embedded] .topbar .brand { display: none; }

.act {
  display: inline-block;
  width: auto;
  padding: 8px 10px;
  font: 700 11.5px/1.1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 9px;
  box-shadow: 3px 3px 0 var(--shadow);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.act small {
  display: block;
  margin-top: 3px;
  font: 400 9.5px/1.15 var(--sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.act:hover { transform: translate(-1px, -1px); }
button.act[disabled] {
  color: var(--ink-faint);
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: default;
}
button.act[disabled]:hover { transform: none; }
button.act[aria-pressed="true"] {
  color: var(--ground);
  background: var(--ink);
  border-color: var(--ink);
}
/* The one thing to do on a page is highlighter yellow, with ink on it. */
button.act.primary, a.act.primary {
  color: var(--on-act);
  background: var(--act);
  border-color: var(--outline);
}
button.act.primary:hover, a.act.primary:hover { background: var(--act-hover); }
button.act.danger { border-color: var(--bad); color: var(--bad); }
button.act.icon { padding: 7px 9px; font-size: 14px; letter-spacing: 0; }

.field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}
select, input.text, input[type="number"], input[type="text"] {
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 7px;
  padding: 6px 8px;
}

h2.section, .section {
  margin: 0 0 7px;
  font: 700 11px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
h2.section.gold { color: var(--gold-text); }
.hint {
  margin: 0 0 9px;
  font: 400 11.5px/1.35 var(--sans);
  color: var(--ink-faint);
}
.tiny {
  font: 700 10px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.panel, .sticker {
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--shadow);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: 620px;
  padding: 10px 14px;
  font: 500 13px/1.4 var(--sans);
  color: var(--ground);
  background: var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--act);
}
.toast.bad { color: var(--card); background: var(--bad); box-shadow: 3px 3px 0 var(--shadow); }
.toast[hidden] { display: none; }

dialog.ask {
  width: min(420px, calc(100vw - 32px));
  padding: 18px 18px 14px;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
}
dialog.ask::backdrop { background: rgba(10, 10, 16, 0.45); }
dialog.ask h2 { margin: 0 0 8px; font: 700 17px/1.3 var(--font-title); }
dialog.ask p { margin: 0 0 16px; font: 500 14px/1.5 var(--sans); }
.ask-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ask-actions .act { min-height: 40px; }
.ask-actions .act.danger { color: var(--card); background: var(--bad); border-color: var(--bad); }

.thumb { display: block; width: 100%; height: auto; background: var(--wall); }
.thumb .w { fill: var(--wall); }
.thumb .b { fill: var(--hatch); }
.thumb .f { fill: var(--st); }
.thumb .wa { fill: var(--wa); }
.thumb .d { fill: #f9eed4; stroke: #987347; stroke-width: .5; }
.thumb use { stroke: var(--wall); stroke-width: .5; }
.thumb .r1 { fill: var(--room-1); }
.thumb .r2 { fill: var(--room-2); }
.thumb .r3 { fill: var(--room-3); }
.thumb .r4 { fill: var(--room-4); }
.thumb .r5 { fill: var(--room-5); }
.thumb .r6 { fill: var(--room-6); }
.thumb .r7 { fill: var(--room-7); }
.thumb .r8 { fill: var(--room-8); }
.thumb .r9 { fill: var(--room-9); }
.thumb .r10 { fill: var(--room-10); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}