:root {
  --ink: #211c18;
  --ink-soft: #665b50;
  --paper: #f3eddf;
  --paper-deep: #e8deca;
  --cream: #fffaf0;
  --wine: #7f2930;
  --wine-dark: #4b191e;
  --olive: #52604a;
  --olive-dark: #29342a;
  --gold: #c49b59;
  --line: #c8b99e;
  --night: #171918;
  --shadow: 0 18px 50px rgba(27, 18, 11, .22);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
}
button, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.site-link {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 20px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: 2px;
  border: 1px solid rgba(255,255,255,.35);
  padding: 9px 11px;
  background: rgba(15,16,15,.38);
  backdrop-filter: blur(8px);
}
.site-link:hover { background: rgba(15,16,15,.7); color: #fff; }

.eyebrow {
  margin: 0 0 7px;
  color: var(--wine);
  font: 700 12px/1.3 Arial, sans-serif;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.title-screen {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 72px 20px 45px;
  background:
    radial-gradient(circle at 68% 34%, rgba(180,137,77,.22), transparent 20%),
    radial-gradient(circle at 22% 72%, rgba(111,42,46,.2), transparent 27%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px),
    #171b17;
}
.title-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.7%, rgba(211,180,123,.22) 49.7% 49.85%, transparent 49.85%),
    linear-gradient(0deg, rgba(20,17,14,.66), transparent 46%);
}
.title-card {
  position: relative;
  width: min(530px, 91vw);
  margin: 0;
  color: var(--cream);
  padding: 38px 42px;
  background: rgba(31, 28, 24, .8);
  border: 1px solid rgba(218,195,154,.5);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.title-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(218,195,154,.2);
  pointer-events: none;
}
.title-card .eyebrow { color: #d7ba84; text-align: center; }
.title-card h1 { margin: 0; text-align: center; font-weight: 400; line-height: .95; }
.title-card h1 span {
  display: block;
  margin-bottom: 8px;
  color: #d7ba84;
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.title-card h1 { font-size: clamp(48px, 7vw, 78px); letter-spacing: -2px; }
.title-rule { display: flex; align-items: center; gap: 11px; margin: 22px 0; color: #d7ba84; }
.title-rule i { height: 1px; flex: 1; background: rgba(215,186,132,.55); }
.title-rule b { font-size: 10px; }
.title-copy { font-size: 17px; line-height: 1.55; text-align: center; margin: 0 auto 16px; max-width: 420px; }
.role-copy { color: #d8d0c3; font-size: 13px; line-height: 1.55; text-align: center; margin: 0 auto; max-width: 410px; }
.title-actions { position: relative; display: grid; gap: 10px; margin: 27px auto 0; max-width: 290px; }
.title-note { position: absolute; right: 22px; bottom: 14px; margin: 0; color: rgba(255,255,255,.7); font: 12px Arial, sans-serif; letter-spacing: .6px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: background .15s, transform .15s, border-color .15s;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff8ed; background: var(--wine); border-color: var(--wine); }
.button-primary:hover { background: #94333a; border-color: #94333a; }
.button-primary:disabled { opacity: .38; transform: none; cursor: not-allowed; }
.button-quiet { color: var(--ink); background: var(--paper); }
.title-card .button-quiet { color: #fff; background: transparent; border-color: rgba(255,255,255,.4); }
.text-button { border: 0; background: transparent; color: #d7ba84; font: 12px Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.full { width: 100%; }

.game-screen { min-height: 100vh; background: #d9d1c2; }
.game-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 22px 10px 82px;
  background: var(--olive-dark);
  border-bottom: 3px solid var(--gold);
  color: var(--cream);
}
.monogram {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid #ad976e;
  border-radius: 50%;
  background: transparent;
  color: #e5c88f;
  font-size: 16px;
}
.game-heading { min-width: 145px; }
.game-heading p { margin: 0 0 2px; color: #b8aa91; font: 700 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: 1.2px; }
.game-heading h2 { margin: 0; font-size: 20px; font-weight: 400; }
.timeline { flex: 1; display: flex; align-items: center; list-style: none; padding: 0 10px; margin: 0; }
.timeline li { position: relative; flex: 1; text-align: center; min-width: 26px; }
.timeline li::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #5d695c;
}
.timeline li:first-child::before { left: 50%; width: 50%; }
.timeline li:last-child::before { width: 50%; }
.timeline i {
  position: relative;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin: 0 auto 5px;
  border: 1px solid #738071;
  border-radius: 50%;
  background: var(--olive-dark);
  color: transparent;
  font-style: normal;
  font: 12px Arial, sans-serif;
}
.timeline span { display: block; color: #9da69a; font: 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: .4px; }
.timeline li.done i { background: var(--olive); color: #fff; border-color: #84917f; }
.timeline li.current i { color: #2a241b; background: #e0bf80; border-color: #e0bf80; box-shadow: 0 0 0 4px rgba(224,191,128,.15); }
.timeline li.current span { color: #f1d69f; }
.header-counts { display: flex; gap: 4px; }
.counter { width: 57px; border: 0; border-left: 1px solid #576354; background: transparent; color: #fff; }
.counter b { display: block; color: #e0bf80; font-size: 17px; }
.counter span { display: block; color: #acb3aa; font: 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: .6px; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  width: min(1500px, 100%);
  min-height: calc(100vh - 76px);
  margin: 0 auto;
}
.stage-column { padding: 22px; background: #cbc3b4; }
.scene-frame {
  position: relative;
  overflow: hidden;
  height: min(66vh, 760px);
  min-height: 470px;
  background: #171918;
  border: 1px solid #51483d;
  box-shadow: 0 10px 28px rgba(35,25,17,.24);
}
#world-canvas { width: 100%; height: 100%; display: block; background: #1d241f; touch-action: none; outline: none; }
.world-loading { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; color: #f4e4c6; background: #1d241f; font: 700 12px Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; transition: opacity .25s; }
.world-loading.ready { opacity: 0; visibility: hidden; pointer-events: none; }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(17,14,11,.38); }
.scene-label {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  background: rgba(25,25,22,.72);
  color: #f7ead3;
  border: 1px solid rgba(224,191,128,.45);
  font: 700 12px Arial, sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
}
.waiter-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  padding: 7px 11px 7px 7px;
  background: rgba(24,26,23,.76);
  border: 1px solid rgba(255,255,255,.25);
  font-size: 12px;
  backdrop-filter: blur(7px);
}
.waiter-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #f0e8d9; color: var(--wine); font-weight: bold; }
.waiter-badge small { color: #bbb7ae; font: 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.reticle { position: absolute; z-index: 5; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
.reticle i, .reticle b { position: absolute; display: block; background: rgba(255,250,236,.85); }
.reticle i { width: 18px; height: 2px; top: 8px; left: 0; }
.reticle b { width: 2px; height: 18px; top: 0; left: 8px; }
.interact-prompt { position: absolute; z-index: 9; left: 50%; bottom: 54px; transform: translateX(-50%); min-width: 220px; padding: 11px 15px; color: #fff9ed; background: rgba(77,24,29,.9); border: 1px solid rgba(255,240,211,.7); box-shadow: 0 6px 22px rgba(0,0,0,.35); font: 700 13px Arial, sans-serif; letter-spacing: .4px; }
.interact-prompt:hover { background: rgba(126,41,48,.95); }
.move-help { position: absolute; z-index: 5; right: 13px; bottom: 12px; padding: 8px 10px; color: rgba(255,255,255,.8); background: rgba(19,20,18,.62); border: 1px solid rgba(255,255,255,.2); font: 12px Arial, sans-serif; backdrop-filter: blur(5px); }
.move-help b { color: #e3c384; }
.mobile-controls { display: none; }

.story-panel {
  position: relative;
  margin: -2px 12px 0;
  padding: 19px 22px 17px;
  background: var(--paper);
  border: 1px solid #aa9a7f;
  box-shadow: var(--shadow);
}
.story-topline { display: flex; justify-content: space-between; gap: 15px; color: var(--wine); font: 700 12px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.story-panel h3 { margin: 8px 0 8px; font-size: clamp(24px, 3vw, 34px); font-weight: 400; }
.story-panel > p { margin: 0; max-width: 850px; color: #433a31; font-size: 16px; line-height: 1.58; }
.objective { margin: 13px 0 0; padding: 9px 11px; color: #454d40; background: #e2e3d7; border-left: 3px solid var(--olive); font: 12px/1.4 Arial, sans-serif; }
.objective::before { content: 'CURRENT OBJECTIVE  '; color: var(--olive); font-weight: 700; letter-spacing: 1px; }
.story-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.search-count { color: var(--ink-soft); font: 12px Arial, sans-serif; }

.casebook { background: var(--paper); border-left: 1px solid #a99c87; min-width: 0; }
.casebook-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #ddd4c3; border-bottom: 1px solid #b9ab93; }
.tab { min-height: 47px; border: 0; border-right: 1px solid #b9ab93; background: transparent; color: #6c6257; font: 700 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: .8px; }
.tab:last-child { border-right: 0; }
.tab.active { color: var(--wine); background: var(--paper); box-shadow: inset 0 3px var(--wine); }
.book-panel { padding: 19px; max-height: calc(100vh - 124px); overflow: auto; }
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-heading h3 { margin: 0; font-size: 24px; font-weight: 400; }
.panel-heading select { padding: 6px; max-width: 110px; background: #fffaf0; color: var(--ink); border: 1px solid var(--line); font: 12px Arial, sans-serif; }
.panel-help { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.empty-book { padding: 32px 15px; color: #897d6e; text-align: center; font-size: 13px; font-style: italic; }
.clue-entry { position: relative; padding: 13px 8px 13px 31px; border-bottom: 1px solid #d7ccba; cursor: pointer; }
.clue-entry:hover { background: #ebe2d2; }
.clue-entry::before { content: ''; position: absolute; left: 6px; top: 17px; width: 12px; height: 12px; border: 1px solid #9b896f; background: #fffaf0; transform: rotate(3deg); }
.clue-entry[data-kind='document']::before { border-radius: 1px; box-shadow: inset 0 -3px #d9cab1; }
.clue-entry[data-kind='object']::before { border-radius: 50%; background: #b88d54; }
.clue-entry[data-kind='statement']::before { border-radius: 50% 50% 50% 0; background: #697561; transform: rotate(-45deg); }
.clue-entry h4 { margin: 0 0 4px; font-size: 14px; }
.clue-entry p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clue-meta { display: block; margin-top: 5px; color: #9c8260; font: 700 12px Arial, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.clue-pin { position: absolute; top: 11px; right: 5px; padding: 4px 6px; color: var(--wine); background: transparent; border: 1px solid #bda98a; font: 700 12px Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; }
.clue-pin:hover, .clue-pin.pinned { color: #fff; background: var(--wine); border-color: var(--wine); }
.clue-entry h4 { padding-right: 62px; }

.person-card { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 10px 5px; text-align: left; border: 0; border-bottom: 1px solid #d7ccba; background: transparent; color: var(--ink); }
.person-card:hover { background: #ebe2d2; }
.person-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--avatar, var(--olive)); font-size: 13px; }
.person-card b { display: block; font-size: 14px; }
.person-card small { display: block; color: var(--ink-soft); font: 12px/1.4 Arial, sans-serif; }
.person-card .status { color: #907c5f; font: 700 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: .4px; }
.person-card.dead { opacity: .62; }

.selected-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 74px; margin: 15px 0 10px; }
.selected-slot { display: grid; place-items: center; min-height: 66px; padding: 9px; text-align: center; border: 1px dashed #aa9980; background: #ebe3d4; color: #8c7d6a; font-size: 12px; }
.selected-slot.filled { border-style: solid; color: var(--ink); background: #fffaf0; font-weight: bold; }
.combine-result { min-height: 34px; margin: 10px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.theory-card { margin: 9px 0; padding: 12px; background: #e0e3d8; border: 1px solid #b1b9a9; border-left: 4px solid var(--olive); }
.theory-card h4 { margin: 0 0 4px; color: #384235; font-size: 14px; }
.theory-card p { margin: 0; color: #5b6257; font-size: 13px; line-height: 1.45; }

.modal {
  width: min(520px, calc(100vw - 28px));
  max-height: min(84vh, 720px);
  overflow: auto;
  padding: 29px 31px 27px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #ab9878;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.modal::backdrop { background: rgba(18,17,15,.72); backdrop-filter: blur(3px); }
.modal-close { position: absolute; top: 9px; right: 11px; width: 31px; height: 31px; border: 0; background: transparent; color: #76695b; font-size: 24px; }
.modal h2 { margin: 3px 0 9px; font-size: 30px; font-weight: 400; }
.modal p { color: #51483e; font-size: 16px; line-height: 1.58; }
.modal-done { margin-top: 12px; }
.clue-source { padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--wine) !important; font-size: 13px !important; font-style: italic; }
.modal-actions { display: flex; gap: 9px; margin-top: 18px; }
.how-modal ol { padding-left: 21px; }
.how-modal li { margin: 10px 0; color: #51483e; font-size: 14px; line-height: 1.45; }
.person-head { display: grid; grid-template-columns: 58px 1fr; gap: 13px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.person-head .person-avatar { width: 55px; height: 55px; font-size: 18px; }
.person-head h2 { margin: 0; font-size: 26px; }
.person-head small { color: var(--wine); font: 700 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: .7px; }
.person-bio { margin: 14px 0 18px; }
.question-list { display: grid; gap: 7px; }
.question { padding: 10px 12px; text-align: left; color: var(--ink); background: #e7decd; border: 1px solid #c7b79d; font-size: 12px; }
.question:hover { background: #ddd0b8; }
.answer { margin: 13px 0 0; padding: 14px; background: #fffaf0; border-left: 3px solid var(--wine); color: #3d352e; font-size: 14px; line-height: 1.55; }
.answer::before { content: '“'; color: var(--wine); font-size: 30px; line-height: 0; vertical-align: -8px; margin-right: 3px; }

.accuse-modal form { display: grid; gap: 14px; margin-top: 18px; }
.accuse-modal label { color: #51483e; font-size: 14px; font-weight: bold; }
.accuse-modal select { display: block; width: 100%; margin-top: 6px; padding: 11px; background: #fffaf0; border: 1px solid #b9aa92; color: var(--ink); }

.ending-screen { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 70px 20px; overflow: hidden; background: radial-gradient(circle at 50% 25%, #626f54, #242a23 52%, #141714); }
.ending-shade { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px); }
.ending-card { position: relative; width: min(620px, 92vw); padding: 37px 41px; background: rgba(243,237,223,.95); border: 1px solid #b9a783; box-shadow: var(--shadow); }
.ending-card h2 { margin: 2px 0 14px; font-size: clamp(36px, 7vw, 58px); font-weight: 400; }
.ending-card > p { color: #4c4238; font-size: 15px; line-height: 1.6; }
.ending-truth { margin: 19px 0; padding: 15px 17px; background: #e6dcc9; border-left: 4px solid var(--wine); font-size: 13px; line-height: 1.55; }
.ending-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 20px; transform: translate(-50%, 15px); padding: 10px 14px; color: #fff; background: #252a24; border: 1px solid #778070; opacity: 0; pointer-events: none; font: 12px Arial, sans-serif; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Detective folio */
:root {
  --ink: #171817;
  --ink-soft: #575349;
  --paper: #e9dfcb;
  --paper-deep: #d8c8aa;
  --cream: #f5eedf;
  --wine: #7c2228;
  --wine-dark: #3d1518;
  --olive: #3d4a3c;
  --olive-dark: #191e1a;
  --gold: #9b8157;
  --line: #aa9b80;
  --night: #111412;
  --shadow: 0 18px 35px rgba(16, 13, 9, .3);
}

body { font-family: 'Palatino Linotype', Palatino, Georgia, serif; }

.site-link {
  color: #ddd1ba;
  background: #171a17;
  border: 1px solid #736a59;
  backdrop-filter: none;
  letter-spacing: 1.6px;
}
.site-link:hover { color: #fff9ec; background: #282c27; }

.title-screen {
  place-items: center start;
  padding: 86px clamp(24px, 8vw, 130px) 58px;
  background-color: #101411;
  background-image:
    linear-gradient(90deg, rgba(7,9,8,.08) 0 53%, rgba(7,9,8,.82) 78%),
    repeating-linear-gradient(92deg, rgba(218,201,166,.025) 0 1px, transparent 1px 15px),
    linear-gradient(155deg, #293128 0 34%, #181e19 34% 62%, #0f1210 62%);
}
.title-shade {
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(164,143,105,.32) 11% 11.2%, transparent 11.2% 22%, rgba(164,143,105,.17) 22% 22.15%, transparent 22.15%),
    linear-gradient(0deg, rgba(6,7,6,.72), transparent 48%);
}
.title-card {
  width: min(570px, 92vw);
  margin: 0;
  padding: 48px 48px 40px 58px;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(80,64,43,.035) 0 1px, transparent 1px 5px),
    #e9dfca;
  border: 1px solid #a48e6c;
  border-left: 9px solid #622126;
  box-shadow: 10px 14px 0 rgba(0,0,0,.2), 0 26px 60px rgba(0,0,0,.36);
  backdrop-filter: none;
  transform: rotate(-.25deg);
}
.title-card::before {
  content: 'PRIVATE  /  CASE FILE';
  inset: auto 28px 24px auto;
  width: auto;
  height: auto;
  padding: 5px 8px 4px;
  color: rgba(108,29,34,.58);
  border: 2px solid rgba(108,29,34,.48);
  font: 700 10px/1 'Courier New', monospace;
  letter-spacing: 1.4px;
  transform: rotate(-3deg);
}
.title-card .eyebrow { color: #6d292d; text-align: left; font-family: 'Courier New', monospace; }
.title-card h1 { color: #151614; text-align: left; font-size: clamp(52px, 7vw, 82px); letter-spacing: -3px; line-height: .88; }
.title-card h1 span { color: #535249; font: 700 11px/1 'Courier New', monospace; letter-spacing: 4px; }
.title-rule { margin: 23px 0 20px; color: #71272b; }
.title-rule i { background: #9e8d71; }
.title-rule b { font: 700 10px/1 'Courier New', monospace; letter-spacing: 2px; }
.title-copy, .role-copy { margin-left: 0; text-align: left; }
.title-copy { color: #201f1b; font-size: 18px; }
.role-copy { color: #5e594f; }
.title-actions { margin: 28px 0 0; grid-template-columns: 1fr 1fr; max-width: 390px; }
.title-actions .text-button { grid-column: 1 / -1; justify-self: start; }
.title-card .button-quiet { color: #20211e; background: transparent; border-color: #8d806a; }
.title-card .text-button { color: #642328; }
.title-note { color: #b9ad98; font-family: 'Courier New', monospace; }

.button {
  border-radius: 0;
  font-family: 'Courier New', monospace;
  letter-spacing: .8px;
  transition: color .12s, background .12s, border-color .12s;
}
.button:hover { transform: none; }
.button-primary { color: #f5eddd; background: #20241f; border-color: #20241f; }
.button-primary:hover { background: var(--wine); border-color: var(--wine); }

.game-screen {
  background:
    repeating-linear-gradient(90deg, rgba(58,48,34,.045) 0 1px, transparent 1px 7px),
    #b8ad99;
}
.game-header {
  min-height: 70px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #171b18;
  border-bottom: 1px solid #867253;
  box-shadow: inset 0 -5px #101310;
}
.monogram {
  border-radius: 0;
  border: 1px solid #92805e;
  color: #ded0b4;
  font-family: 'Courier New', monospace;
  transform: rotate(-2deg);
}
.game-heading p, .counter span, .timeline span { font-family: 'Courier New', monospace; }
.game-heading h2 { letter-spacing: -.4px; }
.timeline li::before { background: #555c53; }
.timeline i { border-radius: 0; border-color: #667066; background: #171b18; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.timeline li.current i { background: #c7b58f; border-color: #c7b58f; box-shadow: none; }
.timeline li.done i { background: #6c2429; border-color: #8b4245; }
.counter { width: 62px; border-left-color: #494f48; font-family: 'Courier New', monospace; }
.counter b { color: #d7c39c; }

.game-layout { grid-template-columns: minmax(0, 1fr) 390px; min-height: calc(100vh - 70px); }
.stage-column { padding: 18px 20px 24px; background: #aaa08d; }
.scene-frame {
  height: min(68vh, 770px);
  border: 5px solid #242822;
  border-bottom-width: 8px;
  box-shadow: 8px 10px 0 rgba(42,34,24,.22);
}
.world-loading {
  color: #d9ccb3;
  background: #171b18;
  font-family: 'Courier New', monospace;
}
.scene-vignette { box-shadow: inset 0 0 65px rgba(10,8,6,.42); }
.scene-label {
  top: 12px;
  left: 12px;
  padding: 8px 11px 7px 15px;
  color: #efe5d1;
  background: #171a17;
  border: 0;
  border-left: 4px solid #8a2a2f;
  backdrop-filter: none;
  font-family: 'Courier New', monospace;
}
.waiter-badge {
  color: #ede4d3;
  background: #171a17;
  border: 1px solid #6f6b60;
  backdrop-filter: none;
}
.waiter-icon { border-radius: 0; color: #ede4d3; background: #70252a; font-family: 'Courier New', monospace; }
.waiter-badge small { font-family: 'Courier New', monospace; }
.reticle { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px #000); }
.reticle i { width: 16px; top: 7px; }
.reticle b { height: 16px; left: 7px; }
.interact-prompt {
  color: #181916;
  background: #e6dbc5;
  border: 1px solid #1b1d19;
  box-shadow: 4px 5px 0 rgba(0,0,0,.35);
  font-family: 'Courier New', monospace;
}
.interact-prompt:hover { color: #fff4df; background: #71242a; }
.move-help {
  color: #ded7c8;
  background: #171a17;
  border: 1px solid #68675f;
  backdrop-filter: none;
  font-family: 'Courier New', monospace;
}
.move-help b { color: #d5bd90; }

.story-panel {
  margin: 9px 5px 0 24px;
  padding: 21px 25px 18px 31px;
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(122,39,43,.24) 18px 19px, transparent 19px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(77,81,72,.09) 28px 29px),
    #eee5d3;
  border: 1px solid #8f8068;
  box-shadow: 7px 8px 0 rgba(50,41,29,.18);
}
.story-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 50px;
  width: 48px;
  height: 14px;
  background: rgba(178,166,143,.78);
  border: 1px solid rgba(96,84,65,.35);
  transform: rotate(2deg);
}
.story-topline { font-family: 'Courier New', monospace; color: #6f2429; }
.story-panel h3 { font-size: clamp(27px,3vw,38px); letter-spacing: -.7px; }
.story-panel > p { color: #35332d; }
.objective {
  padding: 8px 10px;
  color: #313730;
  background: rgba(187,190,168,.46);
  border: 0;
  border-left: 3px solid #303a31;
  font-family: 'Courier New', monospace;
}
.objective::before { content: 'TASK  /  '; color: #303a31; }
.search-count { font-family: 'Courier New', monospace; }

.casebook {
  position: relative;
  padding-left: 17px;
  background:
    linear-gradient(90deg, rgba(104,81,55,.14), transparent 25px),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(80,84,74,.085) 29px 30px),
    #e8ddc7;
  border-left: 8px solid #34271f;
  box-shadow: inset 3px 0 #9b805a, inset 9px 0 #211914;
}
.casebook::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 15px;
  bottom: 15px;
  left: -2px;
  width: 14px;
  background: radial-gradient(circle, #1c1713 0 2px, #a58e6c 2.5px 4px, transparent 4.5px) center top / 14px 28px repeat-y;
  pointer-events: none;
}
.casebook-coverline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  padding: 8px 15px 7px;
  color: #d9ccb5;
  background: #29241e;
  border-bottom: 1px solid #77674f;
  font: 700 10px/1 'Courier New', monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.casebook-coverline small { color: #9f927e; font: inherit; letter-spacing: .4px; }
.casebook-tabs { background: #c8b99e; border-bottom: 1px solid #8f816a; }
.tab {
  min-height: 43px;
  color: #4c473f;
  border-right-color: #998a72;
  border-bottom: 4px solid #b6a78d;
  font-family: 'Courier New', monospace;
  letter-spacing: .5px;
}
.tab.active { color: #eee3ce; background: #612126; box-shadow: none; border-bottom-color: #421518; }
.book-panel { padding: 22px 20px 26px; max-height: calc(100vh - 147px); }
.panel-heading { padding-bottom: 11px; border-bottom: 3px double #8f8068; }
.panel-heading h3 { font-size: 25px; letter-spacing: -.4px; }
.panel-heading select {
  background: #e4d8c0;
  border-color: #8f8068;
  border-radius: 0;
  font-family: 'Courier New', monospace;
}
.panel-help { color: #5b564c; font-family: 'Courier New', monospace; }
.empty-book { font-family: 'Courier New', monospace; }
.clue-entry { margin: 0 -5px; padding: 14px 58px 14px 34px; border-bottom: 1px solid #b7aa93; }
.clue-entry:hover { background: rgba(255,250,239,.42); }
.clue-entry::before { left: 9px; background: transparent; border: 1px solid #736852; transform: rotate(45deg); }
.clue-entry[data-kind='document']::before { border-radius: 0; box-shadow: inset 0 -3px #bda887; }
.clue-entry[data-kind='object']::before { border-radius: 50%; background: #796040; }
.clue-entry[data-kind='statement']::before { border-radius: 50% 50% 50% 0; background: #39463b; }
.clue-entry h4 { padding-right: 0; font-size: 15px; }
.clue-meta, .clue-pin { font-family: 'Courier New', monospace; }
.clue-meta { color: #775a3d; }
.clue-pin { top: 13px; right: 4px; color: #682227; border: 0; border-bottom: 1px solid #8d6f55; }
.clue-pin:hover, .clue-pin.pinned { color: #f5ead6; background: #6c252a; }

.person-card {
  grid-template-columns: 44px 1fr auto;
  gap: 11px;
  padding: 10px 4px;
  border-bottom-color: #b7aa93;
}
.person-card:hover { background: rgba(255,250,239,.42); }
.person-avatar {
  width: 40px;
  height: 46px;
  border-radius: 0;
  border: 3px solid #eee4d1;
  outline: 1px solid #81745e;
  box-shadow: 2px 2px 0 rgba(65,50,33,.17);
  font-family: 'Courier New', monospace;
}
.person-card small, .person-card .status { font-family: 'Courier New', monospace; }
.person-card .status { color: #745c41; }
.person-card.dead .person-avatar { filter: grayscale(1); transform: rotate(-2deg); }

.selected-clues { gap: 10px; }
.selected-slot {
  border: 1px dashed #776b57;
  border-radius: 0;
  background: rgba(219,207,184,.74);
  font-family: 'Courier New', monospace;
}
.selected-slot.filled { background: #f0e7d5; border-color: #73644d; transform: rotate(-.4deg); }
.combine-result { font-family: 'Courier New', monospace; }
.theory-card {
  background: #d7d7c2;
  border: 1px solid #92947e;
  border-left: 5px solid #354037;
  box-shadow: 3px 3px 0 rgba(65,57,43,.14);
  transform: rotate(-.2deg);
}

.modal {
  background:
    linear-gradient(90deg, transparent 0 22px, rgba(119,34,39,.18) 22px 23px, transparent 23px),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(80,84,74,.08) 29px 30px),
    #ece2ce;
  border: 4px solid #25231f;
  box-shadow: 10px 12px 0 rgba(0,0,0,.3), 0 30px 90px rgba(0,0,0,.55);
}
.modal::backdrop { background: rgba(10,11,10,.8); backdrop-filter: none; }
.modal-close { color: #251f19; font-family: 'Courier New', monospace; }
.clue-source { border-bottom: 3px double var(--line); }
.person-head { border-bottom: 3px double var(--line); }
.person-head .person-avatar { width: 52px; height: 60px; }
.question { background: #ddd0b8; border-color: #97866a; font-family: 'Courier New', monospace; }
.question:hover { color: #fff4df; background: #682328; }
.answer { background: rgba(249,242,226,.72); border-left-color: #6c2429; }
.accuse-modal select { border-radius: 0; background: #f0e7d6; }

.ending-screen { background: #151a16; }
.ending-shade { background: repeating-linear-gradient(92deg, rgba(224,205,168,.025) 0 1px, transparent 1px 13px); }
.ending-card {
  background: #e9dfca;
  border: 1px solid #987f5d;
  border-left: 9px solid #662227;
  box-shadow: 10px 12px 0 rgba(0,0,0,.24), var(--shadow);
}
.ending-truth { background: #d9cfba; border-left-color: #68242a; }
.toast { border-radius: 0; background: #191d19; border-color: #867b67; font-family: 'Courier New', monospace; }

@media (max-width: 1050px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 325px; }
  .timeline span { display: none; }
  .title-card { margin: 0; }
}

@media (max-width: 780px) {
  .site-link { top: 11px; left: 11px; }
  .title-screen { align-items: end; padding: 90px 14px 25px; }
  .title-shade { background: linear-gradient(0deg, rgba(20,17,14,.97) 0, rgba(20,17,14,.68) 62%, rgba(20,17,14,.08)); }
  .title-card { margin: 0; padding: 30px 25px; background: rgba(31,28,24,.78); }
  .title-card h1 { font-size: clamp(44px, 15vw, 62px); }
  .title-note { display: none; }
  .game-header { min-height: 65px; padding: 8px 9px 8px 65px; gap: 7px; }
  .monogram { width: 36px; height: 36px; }
  .game-heading { min-width: 105px; }
  .game-heading h2 { font-size: 16px; }
  .timeline { padding: 0; }
  .timeline li:nth-child(even) { display: none; }
  .header-counts { display: none; }
  .game-layout { display: block; }
  .stage-column { padding: 8px; }
  .scene-frame { height: 58vh; min-height: 420px; }
  .scene-label { top: 8px; left: 8px; }
  .waiter-badge { display: none; }
  .reticle { display: none; }
  .move-help { display: none; }
  .interact-prompt { bottom: 94px; min-width: 190px; }
  .mobile-controls { position: absolute; z-index: 8; left: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 42px); gap: 5px; }
  .mobile-controls button { color: #fff; background: rgba(24,26,23,.7); border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 16px; touch-action: none; }
  .mobile-controls button[data-move='forward'] { grid-column: 2; grid-row: 1; }
  .mobile-controls button[data-move='left'] { grid-column: 1; grid-row: 2; }
  .mobile-controls button[data-move='back'] { grid-column: 2; grid-row: 2; }
  .mobile-controls button[data-move='right'] { grid-column: 3; grid-row: 2; }
  .story-panel { margin: 0; padding: 16px; }
  .story-panel h3 { font-size: 27px; }
  .story-panel > p { font-size: 14px; }
  .story-actions { justify-content: space-between; }
  .casebook { border: 0; border-top: 4px solid var(--gold); }
  .book-panel { max-height: none; min-height: 420px; }
  .ending-card { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 780px) {
  .title-screen {
    place-items: end center;
    padding: 76px 12px 24px;
    background-color: #101411;
    background-image:
      repeating-linear-gradient(92deg, rgba(218,201,166,.025) 0 1px, transparent 1px 15px),
      linear-gradient(155deg, #293128 0 38%, #181e19 38% 66%, #0f1210 66%);
  }
  .title-shade { background: linear-gradient(0deg, rgba(6,7,6,.64), transparent 64%); }
  .title-card {
    padding: 35px 27px 32px 34px;
    color: var(--ink);
    background: repeating-linear-gradient(0deg, rgba(80,64,43,.035) 0 1px, transparent 1px 5px), #e9dfca;
  }
  .title-card h1 { color: #151614; }
  .title-actions { grid-template-columns: 1fr; max-width: none; }
  .title-actions .text-button { grid-column: auto; }
  .casebook { padding-left: 11px; border-top: 1px solid #8f7959; border-left: 6px solid #34271f; }
  .casebook-coverline { min-height: 32px; }
  .casebook-coverline small { display: none; }
  .book-panel { max-height: none; }
  .story-panel { margin: 9px 0 0 8px; }
}

/* Early 2000s mystery game interface */
:root {
  --ink: #21180f;
  --ink-soft: #5e4c34;
  --paper: #ead39f;
  --paper-deep: #c9a96c;
  --cream: #f7e8bd;
  --wine: #68131f;
  --wine-dark: #350a10;
  --olive: #24473c;
  --olive-dark: #102b26;
  --gold: #bd8c39;
  --line: #8c6a35;
  --night: #090805;
  --shadow: 0 12px 28px rgba(10,4,1,.58);
}

body {
  background: #100a05;
  font-family: Georgia, 'Times New Roman', serif;
}

.site-link {
  top: 12px;
  left: 13px;
  padding: 8px 13px;
  color: #eed9a3;
  background: linear-gradient(#482719,#241109);
  border: 2px ridge #9a7136;
  border-radius: 4px 4px 14px 4px;
  box-shadow: inset 0 0 0 2px #1a0b06, 2px 3px 8px rgba(0,0,0,.55);
  font: 700 13px/1 Georgia, serif;
  letter-spacing: .8px;
}

.title-screen {
  place-items: center;
  padding: 68px 22px 42px;
  background:
    repeating-linear-gradient(4deg, rgba(255,211,137,.035) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(96deg, rgba(31,8,7,.5) 0 7px, rgba(88,34,21,.2) 7px 9px, transparent 9px 22px),
    #28120c;
}
.title-shade {
  background: linear-gradient(90deg, rgba(7,3,2,.76), transparent 28% 72%, rgba(7,3,2,.76));
}
.title-card {
  width: min(650px, 93vw);
  padding: 56px 66px 48px;
  color: #f3dfaa;
  text-align: center;
  background:
    repeating-linear-gradient(3deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, #173f36, #0c2924 58%, #071c19);
  border: 7px ridge #b4873e;
  border-radius: 30px 5px 30px 5px;
  box-shadow:
    inset 0 0 0 4px #35160d,
    inset 0 0 0 8px rgba(219,146,98,.32),
    0 0 0 6px #1c0c07,
    0 25px 70px rgba(0,0,0,.72);
  transform: none;
}
.title-card::before {
  content: 'A VILLA FINALE MYSTERY';
  top: 18px;
  right: 50%;
  bottom: auto;
  width: max-content;
  padding: 0 18px;
  color: #cda958;
  background: #102e28;
  border: 0;
  font: 700 13px/1 Georgia, serif;
  letter-spacing: 2.2px;
  transform: translateX(50%);
}
.title-card::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  top: 30px;
  bottom: 25px;
  border: 1px solid rgba(219,179,86,.42);
  border-radius: 18px 2px 18px 2px;
  pointer-events: none;
}
.title-card .eyebrow {
  position: relative;
  z-index: 1;
  margin-top: 0;
  color: #d8b866;
  text-align: center;
  font: italic 16px/1.3 Georgia, serif;
  letter-spacing: .7px;
  text-transform: none;
}
.title-card h1 {
  position: relative;
  z-index: 1;
  color: #f6e6b9;
  text-align: center;
  font-size: clamp(52px, 8vw, 88px);
  line-height: .92;
  letter-spacing: -2px;
  text-shadow: 0 2px #261207, 0 0 12px rgba(223,185,89,.22);
}
.title-card h1 span {
  color: #cda958;
  font: 700 14px/1 Georgia, serif;
  letter-spacing: 4px;
}
.title-rule { position: relative; z-index: 1; color: #e0c376; }
.title-rule i { height: 2px; background: linear-gradient(90deg, transparent, #b68a3d, transparent); }
.title-rule b { font: 700 12px/1 Georgia, serif; letter-spacing: 1.4px; }
.title-copy, .role-copy {
  position: relative;
  z-index: 1;
  margin-left: auto;
  color: #f3e4bd;
  text-align: center;
}
.title-copy { font-size: 19px; }
.role-copy { color: #d2c39f; font-size: 15px; }
.title-actions {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr 1fr;
  margin: 28px auto 0;
  max-width: 430px;
}
.title-actions .text-button { grid-column: 1 / -1; justify-self: center; }
.title-card .button-quiet { color: #f6dfaa; background: linear-gradient(#315949,#17362e); border-color: #b08842; }
.title-card .text-button { color: #d8bb72; }
.title-note { color: #d6bc7d; font: italic 14px/1.2 Georgia, serif; }

.button {
  min-height: 44px;
  padding: 10px 20px;
  color: #f7e4b4;
  background: linear-gradient(#7d2634, #4b0d17 52%, #350810);
  border: 3px ridge #b4893f;
  border-radius: 17px 4px 17px 4px;
  box-shadow: inset 0 0 0 1px rgba(255,220,138,.22), 2px 3px 6px rgba(0,0,0,.38);
  font: 700 14px/1 Georgia, serif;
  letter-spacing: .35px;
  text-transform: none;
}
.button:hover { color: #fff4d1; background: linear-gradient(#983449, #64121f 52%, #420913); }
.button-primary { color: #f7e4b4; background: linear-gradient(#7d2634, #4b0d17 52%, #350810); border-color: #b4893f; }
.button-primary:disabled { filter: grayscale(.65); opacity: .55; }
.button-quiet { color: #f3e3b8; background: linear-gradient(#315949,#17362e); border-color: #9c7b3f; }
.text-button { color: #d7b866; font: italic 14px Georgia, serif; }

.game-screen {
  min-height: 100vh;
  background:
    repeating-linear-gradient(4deg, rgba(255,210,132,.025) 0 1px, transparent 1px 8px),
    #261209;
}
.game-header {
  position: relative;
  z-index: 30;
  min-height: 76px;
  padding: 8px 18px 9px 76px;
  color: #f2ddaa;
  background:
    repeating-linear-gradient(3deg, rgba(255,208,126,.04) 0 1px, transparent 1px 7px),
    linear-gradient(#5a2f1c, #2a130a 64%, #180a05);
  border: 0;
  border-bottom: 5px ridge #9b7237;
  box-shadow: inset 0 2px rgba(255,218,146,.12), 0 5px 13px rgba(0,0,0,.56);
}
.monogram {
  width: 48px;
  height: 48px;
  color: #f0d794;
  background: radial-gradient(circle, #31594b 0 48%, #17362e 49% 65%, #2b130b 66%);
  border: 3px ridge #b38843;
  border-radius: 50%;
  box-shadow: 0 2px 5px #120704;
  font: 700 16px Georgia, serif;
  transform: none;
}
.game-heading { min-width: 165px; }
.game-heading p { color: #cfb475; font: italic 14px Georgia, serif; letter-spacing: .3px; text-transform: none; }
.game-heading h2 { color: #f7e6b7; font-size: 22px; text-shadow: 0 2px #1b0905; }
.timeline { padding: 0 18px; }
.timeline li::before { top: 12px; height: 2px; background: #7b582d; }
.timeline i {
  width: 26px;
  height: 26px;
  color: #9f8557;
  background: radial-gradient(circle, #442419, #1e0e08);
  border: 2px ridge #805d31;
  border-radius: 50%;
  clip-path: none;
  font: 700 13px/22px Georgia, serif;
}
.timeline li.current i { color: #241309; background: radial-gradient(circle, #f0d485, #ad782e); border-color: #deb762; }
.timeline li.done i { color: #f2dca5; background: radial-gradient(circle, #31594b, #17362e); border-color: #a17e42; }
.timeline span { color: #bfa875; font: 700 12px Georgia, serif; letter-spacing: .3px; text-transform: none; }
.timeline li.current span { color: #f0d999; }
.header-counts { gap: 8px; }
.counter {
  width: 68px;
  min-height: 48px;
  color: #f2dca5;
  background: linear-gradient(#402218,#201008);
  border: 2px ridge #805f33;
  border-radius: 15px 4px 15px 4px;
}
.counter b { color: #efd187; font-size: 18px; }
.counter span { color: #cab582; font: 12px Georgia, serif; text-transform: none; }

.game-layout { display: block; width: 100%; min-height: calc(100vh - 76px); }
.stage-column {
  width: min(1620px, 100%);
  margin: 0 auto;
  padding: 18px 22px 30px;
  background: transparent;
}
.scene-frame {
  height: min(71vh, 800px);
  min-height: 500px;
  background: #070806;
  border: 9px ridge #7d532a;
  border-radius: 10px 3px 10px 3px;
  box-shadow: 0 0 0 4px #1a0b06, 0 15px 36px rgba(0,0,0,.64);
}
#world-canvas { cursor: grab; }
#world-canvas.dragging { cursor: grabbing; }
#world-canvas.looking { cursor: none; }
.world-loading {
  color: #e8d29b;
  background: #0d1512;
  font: 700 14px Georgia, serif;
  letter-spacing: .8px;
  text-transform: none;
}
.scene-vignette { box-shadow: inset 0 0 90px rgba(5,2,1,.55), inset 0 0 0 2px rgba(226,190,99,.16); }
.scene-label {
  top: 15px;
  left: 15px;
  padding: 9px 15px;
  color: #f3dda6;
  background: linear-gradient(#4b2116,#251008);
  border: 3px ridge #987038;
  border-left-width: 3px;
  border-radius: 12px 3px 12px 3px;
  box-shadow: 2px 3px 7px rgba(0,0,0,.5);
  font: 700 13px Georgia, serif;
  letter-spacing: .45px;
  text-transform: none;
}
.waiter-badge {
  left: 15px;
  bottom: 15px;
  color: #f2deb0;
  background: linear-gradient(#3f2418,#1d0e08);
  border: 3px ridge #8e6938;
  border-radius: 18px 4px 18px 4px;
  font-size: 14px;
}
.waiter-icon { color: #251108; background: radial-gradient(circle,#efd080,#aa742c); border: 1px solid #4b2d12; border-radius: 50%; }
.waiter-badge small { color: #cab888; font: 12px Georgia, serif; text-transform: none; }
.reticle i, .reticle b { background: #f3d88b; box-shadow: 0 0 4px #000; }
.interact-prompt {
  bottom: 62px;
  color: #fff0c4;
  background: linear-gradient(#7d2634,#430b15);
  border: 3px ridge #c09648;
  border-radius: 19px 4px 19px 4px;
  box-shadow: 3px 4px 9px rgba(0,0,0,.58);
  font: 700 14px Georgia, serif;
}
.interact-prompt:hover { background: linear-gradient(#96374a,#5e1020); }
.move-help {
  right: 15px;
  bottom: 15px;
  color: #ead8ac;
  background: linear-gradient(#3f2418,#1d0e08);
  border: 2px ridge #806038;
  border-radius: 12px 3px 12px 3px;
  font: 13px Georgia, serif;
}
.move-help b { color: #f0c968; }

.minimap {
  position: absolute;
  z-index: 7;
  top: 14px;
  right: 14px;
  width: 198px;
  padding: 7px 8px 8px;
  color: #ead8a9;
  background: linear-gradient(#4b2b1d,#211008);
  border: 4px ridge #916936;
  border-radius: 14px 3px 14px 3px;
  box-shadow: 3px 5px 12px rgba(0,0,0,.52);
  font-family: Georgia,serif;
  pointer-events: auto;
  transition: width .16s ease, padding .16s ease;
}
.minimap-heading { display: flex; align-items: center; gap: 7px; padding: 0 0 5px 2px; }
.minimap-heading > span { flex: none; color: #f1d588; font-size: 13px; font-weight: 700; }
.minimap-heading b { min-width: 0; flex: 1; overflow: hidden; color: #c8b98f; font-size: 11px; font-weight: 400; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.minimap-toggle {
  width: 24px;
  height: 22px;
  flex: 0 0 24px;
  padding: 0 0 2px;
  color: #f5dfa3;
  background: linear-gradient(#70462d,#32180e);
  border: 2px ridge #a67a3b;
  border-radius: 5px 2px 5px 2px;
  box-shadow: 1px 2px 3px rgba(0,0,0,.45);
  font: bold 17px/16px Georgia,serif;
  cursor: pointer;
}
.minimap-toggle:hover { color: #fff1c4; background: linear-gradient(#875739,#402015); }
.minimap-toggle:focus-visible { outline: 2px solid #f1d588; outline-offset: 2px; }
.minimap-body { display: block; }
.minimap.is-collapsed { width: 108px; padding: 5px 6px; }
.minimap.is-collapsed .minimap-heading { padding: 0; }
.minimap.is-collapsed .minimap-heading b { display: none; }
#minimap-canvas { display: block; width: 100%; height: 118px; background: #171813; border: 2px inset #8b6737; image-rendering: auto; }
.minimap small { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 5px; color: #cdbf98; font-size: 10px; }
.minimap small i { display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; }
.minimap small i:first-child { margin-left: 0; }
.map-you { background: #fff3d5; border: 1px solid #68131f; }
.map-person { background: #9aa993; }
.map-found { background: transparent; border: 1px solid #e2bd6d; }

.scene-tools {
  display: grid;
  grid-template-columns: repeat(6, minmax(115px, 1fr));
  gap: 9px;
  width: min(1120px, calc(100% - 28px));
  margin: -3px auto 0;
  padding: 10px 12px 12px;
  background:
    repeating-linear-gradient(3deg, rgba(255,206,121,.04) 0 1px, transparent 1px 7px),
    linear-gradient(#53301f,#29130b);
  border: 5px ridge #8f6733;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 7px 13px rgba(0,0,0,.46);
}
.scene-tools button {
  min-height: 53px;
  padding: 6px 10px;
  color: #efdba9;
  background: linear-gradient(#2e5a4b,#17382f 55%,#0e2822);
  border: 3px ridge #a17a3d;
  border-radius: 18px 4px 18px 4px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.4);
  font-family: Georgia, serif;
}
.scene-tools button:hover { color: #fff1c4; background: linear-gradient(#3c705e,#205044 55%,#12382e); }
.scene-tools b { display: block; font-size: 15px; }
.scene-tools span { display: block; margin-top: 2px; color: #c8b987; font-size: 12px; }
#voice-toggle[aria-pressed='false'],
#sound-toggle[aria-pressed='false'] {
  color: #b8ad8d;
  background: linear-gradient(#4d4a40,#302f2a 55%,#23231f);
  filter: saturate(.45);
}
#sound-toggle:disabled { opacity: .6; cursor: not-allowed; }

.story-panel {
  width: min(1120px, calc(100% - 30px));
  margin: 16px auto 0;
  padding: 24px 34px 21px;
  background:
    repeating-linear-gradient(0deg, rgba(103,73,28,.035) 0 1px, transparent 1px 6px),
    linear-gradient(90deg,#d1b477,#efd9a4 8%,#f1dda9 92%,#c8a86b);
  border: 6px ridge #91672d;
  border-radius: 20px 4px 20px 4px;
  box-shadow: inset 0 0 0 2px rgba(255,242,192,.55), 0 10px 20px rgba(0,0,0,.42);
}
.story-panel::before { display: none; }
.story-topline { color: #68131f; font: 700 13px Georgia, serif; letter-spacing: .4px; text-transform: none; }
.story-panel h3 { color: #29180d; font-size: clamp(29px,3vw,40px); text-shadow: 0 1px #fff0c3; }
.story-panel > p { color: #302315; font-size: 17px; }
.objective {
  color: #efe0b4;
  background: linear-gradient(90deg,#21493e,#17382f);
  border: 3px ridge #8e6e38;
  border-left-width: 3px;
  border-radius: 13px 3px 13px 3px;
  font: 14px/1.45 Georgia, serif;
}
.objective::before { content: 'Current task:  '; color: #e7c86f; letter-spacing: 0; }
.search-count { color: #5d4322; font: italic 14px Georgia, serif; }

.casebook {
  position: fixed;
  z-index: 70;
  top: 76px;
  right: 0;
  bottom: 0;
  width: min(440px, 95vw);
  padding: 13px;
  overflow: hidden;
  background:
    repeating-linear-gradient(3deg, rgba(255,209,125,.035) 0 1px, transparent 1px 7px),
    linear-gradient(135deg,#275044,#102f28 65%,#08201b);
  border: 7px ridge #a67b3b;
  border-right: 0;
  box-shadow: -11px 9px 28px rgba(0,0,0,.62), inset 0 0 0 3px #0d251f;
  transform: translateX(calc(100% + 18px));
  transition: transform .22s ease-out;
}
.casebook::before { display: none; }
.game-screen.casebook-open .casebook { transform: translateX(0); }
.casebook-coverline {
  min-height: 48px;
  padding: 8px 10px 8px 15px;
  color: #efdca9;
  background: transparent;
  border: 0;
  font: 700 15px/1 Georgia, serif;
  letter-spacing: .4px;
  text-transform: none;
}
.casebook-coverline small { color: #c7b67f; font: italic 12px Georgia, serif; letter-spacing: 0; }
.casebook-coverline button {
  padding: 6px 9px;
  color: #f1d99a;
  background: #48101a;
  border: 2px ridge #a77c3d;
  border-radius: 10px 3px 10px 3px;
  font: 700 12px Georgia, serif;
}
.casebook-tabs {
  margin: 0 7px;
  background: #a87d3e;
  border: 3px ridge #9c7337;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.tab {
  min-height: 45px;
  color: #3b2413;
  background: linear-gradient(#e4c987,#caa45d);
  border-right: 1px solid #795525;
  border-bottom: 0;
  font: 700 13px Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
}
.tab.active { color: #fff0c4; background: linear-gradient(#762334,#48101a); border-bottom: 0; }
.book-panel {
  height: calc(100% - 100px);
  max-height: none;
  margin: 0 7px 7px;
  padding: 21px 19px 28px;
  color: #291c0e;
  background:
    repeating-linear-gradient(0deg, rgba(109,79,34,.04) 0 1px, transparent 1px 6px),
    #ecd6a2;
  border: 4px ridge #9c7237;
  overflow: auto;
}
.panel-heading { border-bottom: 3px double #79572d; }
.panel-heading h3 { color: #321c0e; font-size: 27px; }
.panel-heading select {
  color: #2b1b0d;
  background: #dfc486;
  border: 2px inset #9d7439;
  font: 13px Georgia, serif;
}
.panel-help { color: #654b28; font: italic 14px/1.5 Georgia, serif; }
.empty-book { color: #765a33; font: italic 14px Georgia, serif; }
.clue-entry { margin: 0; padding: 14px 61px 14px 35px; border-bottom-color: #af8d50; }
.clue-entry:hover { background: rgba(255,239,190,.56); }
.clue-entry::before { border-color: #6d4c24; }
.clue-entry h4 { color: #2c1c0f; font-size: 16px; }
.clue-entry p { color: #604929; font-size: 14px; }
.clue-meta { color: #73212b; font: 700 12px Georgia, serif; text-transform: none; }
.clue-pin { color: #68131f; border-bottom-color: #805b2d; font: 700 12px Georgia, serif; text-transform: none; }
.clue-pin:hover, .clue-pin.pinned { color: #f7e4b4; background: #68131f; }
.person-card { border-bottom-color: #ae8b50; }
.person-card:hover { background: rgba(255,239,190,.56); }
.person-avatar {
  border: 3px ridge #a47b3d;
  border-radius: 50% 50% 44% 44%;
  outline: 1px solid #4c2c16;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3), 2px 2px 3px rgba(54,30,11,.28);
  font: 700 13px Georgia, serif;
}
.person-card b { font-size: 15px; }
.person-card small { color: #6c5431; font: 13px/1.35 Georgia, serif; }
.person-card .status { color: #70212a; font: 700 12px Georgia, serif; text-transform: none; }
.selected-slot { color: #6d512c; background: #d8bd80; border: 2px inset #99713a; border-radius: 12px 3px 12px 3px; font: 13px Georgia, serif; }
.selected-slot.filled { color: #2d1d0e; background: #f0dcaa; border-style: ridge; transform: none; }
.combine-result { color: #614725; font: italic 14px Georgia, serif; }
.theory-card { background: #d9c98c; border: 3px ridge #8d703a; border-left-width: 5px; border-left-color: #204538; border-radius: 12px 3px 12px 3px; transform: none; }

.modal {
  color: #2b1c0e;
  background:
    repeating-linear-gradient(0deg, rgba(104,73,27,.04) 0 1px, transparent 1px 6px),
    #ead39d;
  border: 8px ridge #a0783c;
  border-radius: 22px 5px 22px 5px;
  box-shadow: inset 0 0 0 3px #24483d, 0 30px 90px rgba(0,0,0,.72);
}
.modal::backdrop { background: rgba(7,3,2,.82); }
.modal-close {
  color: #f1daa1;
  background: #5f1420;
  border: 2px ridge #a77c3c;
  border-radius: 50%;
  font: 20px Georgia, serif;
}
.modal h2 { color: #311c0f; }
.modal p, .how-modal li { color: #523d22; }
.clue-source, .person-head { border-bottom-color: #8b672f; }
.question { color: #f4dfae; background: linear-gradient(#315949,#17362e); border: 3px ridge #9e783c; border-radius: 13px 3px 13px 3px; font: 14px Georgia, serif; }
.question:hover { color: #fff0c3; background: linear-gradient(#762334,#48101a); }
.answer { color: #392615; background: #f1dfad; border: 3px inset #a27c41; border-left: 5px solid #6b1722; border-radius: 4px; }
.briefing-modal { width: min(720px, calc(100% - 28px)); max-width: 720px; padding: 31px 35px 28px; }
.briefing-modal > .eyebrow { margin-bottom: 5px; }
.briefing-modal h2 { margin: 0 0 15px; font-size: clamp(27px,4vw,38px); }
.briefing-letter {
  position: relative;
  padding: 20px 24px 17px 42px;
  background:
    linear-gradient(90deg,transparent 0 24px,rgba(116,29,38,.32) 24px 26px,transparent 26px),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(64,83,91,.13) 27px 28px),
    #f3e6bd;
  border: 3px inset #a27c41;
  box-shadow: inset 0 0 22px rgba(91,61,25,.12);
}
.briefing-letter p { margin: 0 0 13px; color: #342719; font-size: 16px; line-height: 1.55; }
.briefing-letter .briefing-signature { margin: 18px 0 0 auto; width: 205px; color: #651b25; font: italic 18px Georgia,serif; transform: rotate(-2deg); }
.briefing-signature small { color: #5e4a2c; font-size: 12px; font-style: normal; }
.shift-docket { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 15px 0 0; border: 3px ridge #967039; }
.shift-docket div { min-width: 0; padding: 9px 11px; background: #dac185; border-right: 1px solid #9a743b; }
.shift-docket div:last-child { border-right: 0; }
.shift-docket dt { color: #6a1d27; font: 700 12px Georgia,serif; text-transform: uppercase; letter-spacing: .06em; }
.shift-docket dd { margin: 4px 0 0; color: #2e2114; font: 700 14px/1.3 Georgia,serif; }
.briefing-tip { margin: 14px 0 0; padding: 11px 13px; color: #eee0b4 !important; background: #23483d; border: 3px ridge #93713c; font-size: 14px; line-height: 1.45; }
.briefing-actions { justify-content: space-between; align-items: center; }
.briefing-actions .button { min-width: 190px; }
.voice-replay {
  display: block;
  margin: 11px 0 0 auto;
  padding: 7px 13px;
  color: #f4dfae;
  background: linear-gradient(#315949,#17362e);
  border: 3px ridge #9e783c;
  border-radius: 13px 3px 13px 3px;
  font: 700 13px Georgia, serif;
}
.voice-replay::before { content: '\25B6'; margin-right: 7px; color: #efca67; }
.voice-replay.playing { background: linear-gradient(#762334,#48101a); }
.voice-replay.playing::before { content: '\25A0'; }
.voice-replay[hidden] { display: none; }
.accuse-modal select { color: #2b1b0d; background: #eddaa9; border: 3px inset #9f763b; }
.ending-screen { background: repeating-linear-gradient(4deg,rgba(255,210,132,.025) 0 1px,transparent 1px 8px),#28120c; }
.ending-card { background: #ead39d; border: 8px ridge #a0783c; border-radius: 22px 5px 22px 5px; box-shadow: inset 0 0 0 3px #24483d, var(--shadow); }
.ending-truth { background: #d7bd80; border: 3px inset #9f763b; border-left: 5px solid #68131f; }
.toast { color: #f3dfaa; background: linear-gradient(#3e2418,#1d0e08); border: 3px ridge #936c35; border-radius: 14px 3px 14px 3px; font: 14px Georgia, serif; }

@media (max-width: 860px) {
  .title-screen { padding: 72px 13px 22px; }
  .title-card { padding: 52px 28px 35px; border-width: 5px; border-radius: 20px 4px 20px 4px; }
  .title-card h1 { color: #f6e6b9; }
  .title-actions { grid-template-columns: 1fr; }
  .title-actions .text-button { grid-column: auto; }
  .game-header { min-height: 66px; padding: 7px 9px 7px 62px; }
  .game-heading { min-width: 110px; }
  .game-heading p { display: none; }
  .timeline { padding: 0 4px; }
  .timeline li:nth-child(even) { display: none; }
  .timeline span { display: none; }
  .header-counts { display: none; }
  .stage-column { padding: 8px 8px 22px; }
  .scene-frame { height: 59vh; min-height: 410px; border-width: 5px; }
  .move-help, .waiter-badge { display: none; }
  .minimap { top: 8px; right: 8px; width: 132px; padding: 5px; border-width: 3px; }
  .minimap-heading { padding-bottom: 3px; }
  .minimap-heading > span { font-size: 11px; }
  .minimap-heading b, .minimap small { display: none; }
  .minimap.is-collapsed { width: 91px; padding: 4px 5px; }
  .minimap-toggle { width: 22px; height: 21px; flex-basis: 22px; }
  #minimap-canvas { height: 84px; }
  .interact-prompt { bottom: 88px; }
  .mobile-controls button { color: #f6e4b4; background: linear-gradient(#482719,#241109); border: 2px ridge #9c7338; }
  .scene-tools { grid-template-columns: 1fr 1fr; width: calc(100% - 12px); padding: 7px; }
  .scene-tools button { min-height: 46px; }
  .scene-tools span { display: none; }
  .briefing-modal { padding: 25px 18px 20px; }
  .briefing-letter { padding: 17px 16px 15px 31px; }
  .shift-docket { grid-template-columns: 1fr; }
  .shift-docket div { border-right: 0; border-bottom: 1px solid #9a743b; }
  .shift-docket div:last-child { border-bottom: 0; }
  .briefing-actions { align-items: stretch; flex-direction: column; }
  .briefing-actions .button { width: 100%; min-width: 0; }
  .story-panel { width: calc(100% - 8px); margin-top: 11px; padding: 20px 20px 17px; border-width: 4px; }
  .story-panel > p { font-size: 16px; }
  .casebook { top: 66px; width: 100%; border-width: 5px; border-right: 5px ridge #a67b3b; }
  .book-panel { height: calc(100% - 98px); }
}

/* Player-feedback pass: keep the active job visible and make progress legible. */
.game-active .site-link { display: none; }

.scene-frame {
  height: min(60vh, 660px);
  min-height: 450px;
}

.scene-tools { padding-top: 7px; padding-bottom: 8px; }
.scene-tools button { min-height: 46px; }
#advance-scene.ready { box-shadow: inset 0 0 0 1px rgba(255,233,164,.42), 0 0 15px rgba(221,177,75,.28); }

.round-card {
  position: absolute;
  z-index: 7;
  left: 15px;
  top: 72px;
  width: min(430px, calc(100% - 330px));
  padding: 11px 14px 10px;
  color: #f2deb0;
  background: linear-gradient(100deg,rgba(42,20,11,.96),rgba(22,39,33,.94));
  border: 3px ridge #9a7138;
  border-radius: 16px 4px 16px 4px;
  box-shadow: 3px 4px 10px rgba(0,0,0,.56);
  font-family: Georgia,serif;
}
.round-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.round-card-top span { color: #e6c76e; font-size: 12px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
.round-card-top b { color: #f5e2ae; font-size: 13px; }
.round-card p {
  display: -webkit-box;
  margin: 5px 0 8px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.round-card small { display: block; margin-top: 5px; color: #cfc098; font-size: 11px; }
.round-meter { height: 5px; overflow: hidden; background: #130b07; border: 1px inset #896332; }
.round-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#a16f2d,#ead07e); transition: width .2s ease; }
.waiter-badge { display: none; }

.map-door { background: #d3ad65; border-radius: 1px !important; }

.theory-card > span { display: inline-block; margin-bottom: 5px; color: #7a1e29; font: 700 11px Georgia,serif; letter-spacing: .7px; text-transform: uppercase; }
.accusation-brief { margin: 14px 0; padding: 12px 15px; color: #2f2113; background: #d8bd80; border: 3px inset #9f763b; }
.accusation-brief b { color: #68131f; }
.accusation-brief ul { margin: 8px 0 0; padding-left: 20px; }
.accusation-brief li { margin: 4px 0; }
.accusation-brief span { font-weight: 700; }

@media (max-width: 860px) {
  .scene-frame { height: 59vh; min-height: 410px; }
  .round-card { top: auto; left: 8px; bottom: 8px; width: calc(100% - 16px); padding: 9px 11px; }
  .round-card p { font-size: 12px; }
  .round-card small { font-size: 10px; }
  .interact-prompt { bottom: 128px; }
}

.round-card-top b { margin-left: auto; }
.round-toggle {
  width: 24px;
  height: 22px;
  flex: 0 0 24px;
  padding: 0 0 2px;
  color: #f5dfa3;
  background: linear-gradient(#70462d,#32180e);
  border: 2px ridge #a67a3b;
  border-radius: 5px 2px 5px 2px;
  box-shadow: 1px 2px 3px rgba(0,0,0,.45);
  font: bold 17px/16px Georgia,serif;
  cursor: pointer;
}
.round-toggle:hover { color: #fff1c4; background: linear-gradient(#875739,#402015); }
.round-toggle:focus-visible { outline: 2px solid #f1d588; outline-offset: 2px; }
.round-card-body[hidden] { display: none; }
.round-card.is-collapsed .round-card-body { display: none; }
.round-card.is-collapsed { width: 230px; padding: 7px 9px; }
.round-card.is-collapsed .round-card-top span { font-size: 11px; }
.round-card.is-collapsed .round-card-top b { font-size: 12px; }

.modal-minimize {
  position: absolute;
  top: 9px;
  right: 50px;
  width: 31px;
  height: 31px;
  padding: 0 0 4px;
  color: #f1daa1;
  background: #315949;
  border: 2px ridge #a77c3c;
  border-radius: 50%;
  font: 700 21px/24px Georgia,serif;
  cursor: pointer;
}
.modal-minimize:hover { color: #fff0bc; background: #1e493e; }
.modal-minimize:focus-visible { outline: 2px solid #68131f; outline-offset: 2px; }

.ledger-tools { display: grid; gap: 6px; width: min(190px, 46%); }
.ledger-tools input,
.ledger-tools select { width: 100%; min-height: 34px; padding: 6px 8px; color: #30271e; background: #f4ead6; border: 1px solid #8f7657; font: 13px Georgia,serif; }
.board-count { align-self: center; padding: 5px 8px; color: #f3dda4; background: #5a3820; border: 1px solid #9d763e; font: 700 12px Georgia,serif; white-space: nowrap; }

.minimized-popups {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
  display: none;
  width: min(340px,calc(100vw - 36px));
  gap: 8px;
  flex-direction: column;
}
.game-active .minimized-popups:not([hidden]) { display: flex; }
.minimized-popups button {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  color: #f3dfaa;
  text-align: left;
  background: linear-gradient(#3d2418,#1b0e08);
  border: 3px ridge #a0783c;
  border-radius: 14px 3px 14px 3px;
  box-shadow: 3px 5px 12px rgba(0,0,0,.55);
  cursor: pointer;
}
.minimized-popups button:hover { background: linear-gradient(#523020,#25130b); }
.minimized-popups span { color: #dfbf68; font: 700 11px Georgia,serif; letter-spacing: .5px; text-transform: uppercase; }
.minimized-popups b { overflow: hidden; font: 700 13px Georgia,serif; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  .round-card.is-collapsed { width: 210px; }
  .round-card.is-collapsed + .minimap { top: 8px; }
  .round-card.is-collapsed ~ .interact-prompt { bottom: 88px; }
  .minimized-popups { right: 10px; bottom: 10px; width: min(310px,calc(100vw - 20px)); }
}

/* Draggable deductions pinboard */
.game-screen.board-open .casebook { width: min(780px, 97vw); }
#panel-deductions { padding: 18px 16px 32px; }
.board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
  color: #4f371b;
  font: 700 12px/1.3 Georgia, serif;
}
.board-legend span { display: inline-flex; align-items: center; gap: 6px; }
.board-legend i {
  display: inline-block;
  width: 23px;
  height: 4px;
  border-radius: 4px;
  background: #4d8556;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.board-legend i.suspicion { background: #d7ab35; border-top: 1px dashed #624a13; }
.board-legend i.rejected { width: 15px; height: 15px; background: #7b2028; clip-path: polygon(12% 0,50% 37%,88% 0,100% 12%,63% 50%,100% 88%,88% 100%,50% 63%,12% 100%,0 88%,37% 50%,0 12%); }
.deduction-board {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 22%, rgba(69,36,12,.14) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 61%, rgba(255,226,154,.12) 0 1px, transparent 1.5px),
    repeating-linear-gradient(7deg, transparent 0 8px, rgba(78,42,15,.055) 9px 10px),
    #986a3d;
  background-size: 31px 29px, 37px 41px, auto, auto;
  border: 9px ridge #65401f;
  box-shadow: inset 0 0 30px rgba(53,27,9,.52), 3px 4px 7px rgba(55,32,12,.24);
}
.board-links,
.board-clues { position: absolute; inset: 0; width: 100%; height: 100%; }
.board-links { z-index: 1; overflow: visible; pointer-events: none; }
.board-clues { z-index: 2; }
.board-wire {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(1px 2px 1px rgba(33,21,9,.48));
}
.board-wire.confirmed { stroke: #3f8656; }
.board-wire.suspicion { stroke: #e1b43d; stroke-width: 4; stroke-dasharray: 10 7; }
.board-wire.draft { stroke: #f2d99a; stroke-width: 3; stroke-dasharray: 6 7; }
.board-empty {
  position: absolute;
  z-index: 3;
  top: 42%;
  left: 50%;
  width: min(300px, 80%);
  margin: 0;
  padding: 18px;
  color: #f1dba9;
  text-align: center;
  background: rgba(56,31,13,.74);
  border: 2px ridge #bd8c4b;
  transform: translate(-50%,-50%) rotate(-1deg);
  font: italic 15px/1.45 Georgia,serif;
}
.board-empty[hidden] { display: none; }
.board-clue {
  position: absolute;
  width: clamp(128px, 21%, 158px);
  min-height: 112px;
  padding: 17px 12px 31px;
  color: #24180d;
  background:
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(74,92,96,.12) 20px 21px),
    #f0ddb0;
  border: 1px solid #7f653d;
  box-shadow: 3px 5px 7px rgba(35,20,8,.44);
  transform: translate(-50%,-50%) rotate(-.8deg);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.board-clue:nth-child(3n+2) { transform: translate(-50%,-50%) rotate(.7deg); }
.board-clue:nth-child(3n) { transform: translate(-50%,-50%) rotate(-.2deg); }
.board-clue::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 30%,#fff1ad 0 1px,#ba7d23 2px 5px,#67410d 6px);
  border-radius: 50%;
  box-shadow: 1px 2px 2px rgba(0,0,0,.5);
  transform: translateX(-50%);
}
.board-clue:focus-visible { outline: 3px solid #f4dc86; outline-offset: 3px; }
.board-clue.moving { z-index: 6; cursor: grabbing; box-shadow: 8px 12px 17px rgba(35,20,8,.5); }
.board-clue.linking { z-index: 5; outline: 3px solid #f3d071; outline-offset: 3px; }
.board-clue.spotlight { animation: board-spotlight 1s ease; }
.board-clue.rejected-link { animation: board-reject .48s ease; }
.board-card-kind {
  display: block;
  margin-bottom: 4px;
  color: #74212b;
  font: 700 12px/1.1 Georgia,serif;
  text-transform: capitalize;
}
.board-clue h4 { margin: 0 0 5px; font: 700 14px/1.16 Georgia,serif; }
.board-clue small {
  display: block;
  overflow: hidden;
  color: #665034;
  font: italic 12px/1.25 Georgia,serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-card-read,
.board-link-pin {
  position: absolute;
  bottom: 6px;
  padding: 2px 5px;
  color: #56391b;
  background: transparent;
  border: 0;
  font: 700 12px/1.2 Georgia,serif;
  cursor: pointer;
  touch-action: none;
}
.board-card-read { left: 7px; border-bottom: 1px solid #76542b; }
.board-link-pin { right: 5px; display: inline-flex; align-items: center; gap: 4px; }
.board-link-pin i {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 30%,#fff1ad 0 2px,#c48728 3px 7px,#69420e 8px);
  border-radius: 50%;
  box-shadow: 1px 2px 2px rgba(0,0,0,.42);
}
.board-card-read:hover,
.board-link-pin:hover { color: #7a1722; }
.combine-result {
  min-height: 48px;
  margin: 12px 0;
  padding: 10px 12px;
  color: #4d351b;
  background: rgba(244,224,175,.5);
  border: 2px inset #a17b43;
  font: 14px/1.45 Georgia,serif;
}
.combine-result:empty { display: none; }
.combine-result.confirmed { color: #173a28; background: #bfd2ad; border-color: #527052; }
.combine-result.suspicion { color: #4a370e; background: #ead58a; border-color: #a17a1f; }
.combine-result.rejected { color: #651a23; background: #e0b9a0; border-color: #873540; }
.combine-result.ready-link { color: #3e2d18; background: #e5c98b; }
.theory-list { margin-top: 13px; }
.theory-card.confirmed { background: #c9d6b2; border-color: #617653; border-left-color: #2f6d47; }
.theory-card.suspicion { background: #e6d18a; border-color: #a98128; border-left-color: #c4951e; }
.theory-card.confirmed > span { color: #245638; }
.theory-card.suspicion > span { color: #755408; }

@keyframes board-reject {
  0%,100% { margin-left: 0; }
  20% { margin-left: -8px; }
  40% { margin-left: 7px; }
  60% { margin-left: -5px; }
  80% { margin-left: 3px; }
}
@keyframes board-spotlight {
  0%,100% { box-shadow: 3px 5px 7px rgba(35,20,8,.44); }
  45% { box-shadow: 0 0 0 5px #f5d766, 5px 8px 12px rgba(35,20,8,.48); }
}

@media (max-width: 620px) {
  #panel-deductions { padding: 15px 10px 28px; }
  .board-legend { gap: 7px 10px; }
  .board-clue { width: clamp(120px, 42%, 150px); }
  .ledger-tools { width: 100%; grid-template-columns: minmax(0,1fr) minmax(105px,.7fr); }
  .panel-heading { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .board-clue.rejected-link,
  .board-clue.spotlight { animation: none; }
}

/* Investigation-gated follow-up questions */
.person-card.has-new-lead {
  background: rgba(246,220,139,.58);
  box-shadow: inset 4px 0 #8b2631;
}
.person-card .status.new-lead {
  max-width: 92px;
  padding: 4px 6px;
  color: #fff0bd;
  text-align: center;
  background: #6c1722;
  border: 2px ridge #ad8240;
  border-radius: 9px 2px 9px 2px;
  line-height: 1.15;
}
.dialogue-unlocked-label {
  margin: 10px 0 2px;
  padding: 8px 9px 6px;
  color: #6b1c27;
  border-top: 3px double #9a733c;
  font: 700 13px/1.3 Georgia,serif;
}
.question.lead-question {
  position: relative;
  padding-top: 24px;
  text-align: left;
  background: linear-gradient(#6f2630,#42141b);
  border-color: #d0a957;
  box-shadow: inset 0 0 0 1px rgba(255,231,163,.25);
}
.question.lead-question > span {
  position: absolute;
  top: 6px;
  left: 12px;
  color: #f0ca69;
  font: 700 12px/1 Georgia,serif;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.question.lead-question.asked { background: linear-gradient(#34594c,#1b372f); border-color: #897542; }
.question.lead-question.asked > span { color: #c9d8af; }
/* Investigation desk: parchment, ink, and ordinary form controls. */
.connection-picker,.case-proof { padding:12px; border:1px solid #9a8060; margin:12px 0; background:#eee2c9; color:#30271e; }
.connection-picker summary { cursor:pointer; font-weight:bold; padding:6px 0; }
.connection-picker label,.case-proof label,#connection-form label { display:block; margin:12px 0; font:15px Georgia,serif; }
.connection-picker select,.case-proof select,#connection-form select,#connection-form textarea { display:block; width:100%; min-height:44px; padding:8px; margin-top:6px; background:#fff8e9; color:#30271e; border:1px solid #9a8060; font:15px Georgia,serif; }
.connection-evidence { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.connection-evidence article { padding:12px; border:1px solid #aa9271; background:#eee2c9; color:#30271e; }
.connection-evidence h3 { margin:0 0 8px; font-size:17px; }
.connection-evidence p { white-space:pre-line; font-size:14px; line-height:1.5; }
.my-reasoning { border-left:3px solid #927342; padding-left:10px; font-style:italic; }
.theory-card .button { margin:6px 6px 0 0; font-size:13px; }
.case-review { line-height:1.5; padding:10px; background:#e6d9bc; color:#33251b; }
.case-review:empty { display:none; }
#accuse-form .final-check { display:flex; align-items:flex-start; gap:10px; margin:18px 0; font-size:14px; }
#accuse-form .final-check input { width:20px; min-width:20px; height:20px; margin:0; }
.nearby-conversation { position:absolute; inset:0; z-index:12; color:#f4e7ce; pointer-events:none; }
.speech-bubble { position:absolute; left:var(--speaker-x,50%); top:var(--speaker-y,48%); width:min(245px,42%); margin:0; padding:10px 13px; background:rgba(35,28,22,.94); border:1px solid #c19a5d; border-radius:14px 14px 14px 4px; box-shadow:0 4px 15px #0006; transform:translate(-50%,-112%); transition:left .12s linear,top .12s linear; }
.speech-bubble-second { color:#f4ead4; background:rgba(46,54,48,.95); border-color:#a9b596; border-radius:14px 14px 4px 14px; }
.speech-bubble::after { content:''; position:absolute; left:50%; bottom:-9px; width:16px; height:16px; background:inherit; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateX(-50%) rotate(45deg); }
.speech-bubble b { display:block; color:#e7bd70; font:700 12px/1.2 Georgia,serif; }
.speech-bubble-second b { color:#cbd6b7; }
.speech-bubble p { margin:5px 0 0; color:inherit; font:15px/1.38 Georgia,serif; }
.nearby-actions { position:absolute; left:var(--actions-x,50%); top:var(--actions-y,58%); display:flex; gap:5px; transform:translateX(-50%); pointer-events:auto; }
.nearby-conversation button { min-height:32px; padding:5px 10px; color:#30271e; background:#dfcdab; border:1px solid #b79b6e; box-shadow:0 2px 8px #0005; cursor:pointer; }
.nearby-conversation .nearby-dismiss { width:32px; min-height:32px; padding:0; color:#f4dfad; background:#4a2b20; border:1px solid #c39a56; border-radius:50%; font:700 20px/26px Georgia,serif; }
.nearby-conversation .nearby-dismiss:hover { color:#fff5d2; background:#6b3528; }
.nearby-conversation[hidden] { display:none; }
@media(max-width:600px) { .connection-evidence { grid-template-columns:1fr; } .speech-bubble { width:min(190px,44%); padding:8px 10px; } .speech-bubble p { font-size:13px; } }