/* Beyond Baker Street — shared look for splash, TV and phones. 1895 case
   file: gaslight blue-black, foxed paper, evidence-tag amber. */
:root {
  --bg: #171a21; --panel: #21252f; --panel2: #2c3140; --ink: #ece3d0; --dim: #97a0b0;
  --red: #a8332f; --teal: #5f9ea8; --gold: #d9a441; --cream: #f2e9d4; --ok: #5d9c62;
  --paper: #e8dcc0; --papershade: #d8c8a4;
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Bebas Neue", Impact, sans-serif;
  --tracks: #8a7a5c; --witness: #5f9ea8; --clue: #c2703c; --documents: #7a6ba8;
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 16px/1.4 system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--display); font-weight: normal; letter-spacing: 1.5px; }
h1 { color: var(--gold); font-size: 44px; line-height: 1; }
h2 { color: var(--teal); font-size: 26px; }
button { background: var(--panel2); border: 1px solid #3d4356; color: var(--ink); padding: 11px 16px;
  border-radius: 10px; font: inherit; font-size: 16px; cursor: pointer; }
button.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
button.teal { background: var(--teal); border-color: var(--teal); color: #0d1a1c; font-weight: 600; }
button.gold { background: var(--gold); border-color: var(--gold); color: #241c08; font-weight: 600; }
button:disabled { opacity: .32; cursor: default; }
button.sel { outline: 2px solid var(--gold); outline-offset: 2px; }
.muted { color: var(--dim); }
.tagg { color: var(--dim); font-size: 14px; margin-left: 8px; }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120px); background: var(--cream);
  color: #1b1d2a; padding: 10px 18px; border-radius: 10px; transition: transform .25s; z-index: 50; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); }
#conn { position: fixed; top: 8px; right: 8px; background: var(--red); color: #fff; padding: 4px 10px; border-radius: 8px;
  font-size: 13px; display: none; z-index: 60; }
#conn.show { display: block; }

/* ---- evidence cards ----
   A card is an icon and a number. The icon carries the colour, because the
   icon is what decides whether a card pays a Lead down or makes it dearer. */
.ev { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 3.1em; height: 4.2em; border-radius: .35em; background: var(--paper); color: #23252c;
  border: 1px solid #00000030; box-shadow: 0 2px 5px #0007; font-family: var(--serif); line-height: 1; }
.ev b { font-size: 1.7em; font-weight: 600; }
.ev i { font-style: normal; font-size: 1.15em; }
.ev.tracks { border-bottom: .38em solid var(--tracks); }
.ev.witness { border-bottom: .38em solid var(--witness); }
.ev.clue { border-bottom: .38em solid var(--clue); }
.ev.documents { border-bottom: .38em solid var(--documents); }
.ev.back { background: repeating-linear-gradient(135deg, #2f3547 0 7px, #272c3c 7px 14px); color: var(--dim);
  border: 1px solid #3d4356; box-shadow: none; }
.ev.back b { font-size: 1.25em; color: var(--gold); }
.ev.back i { font-size: .95em; color: var(--dim); }
.ev.sel { outline: 2px solid var(--gold); outline-offset: 2px; }
.ev.dim { opacity: .45; }
.ev.tiny { width: 2.1em; height: 2.9em; font-size: .8em; }
/* a card plus what its holder has been told about it, stacked so the tag
   never shoulders the next card out of the row */
.slot { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.slot .told { color: var(--dim); font-size: 11px; min-height: 1.1em; }

/* ---- leads ---- */
.lead { background: var(--panel); border-radius: 10px; padding: 10px 12px; border-left: 5px solid var(--dim); }
.lead.tracks { border-left-color: var(--tracks); }
.lead.witness { border-left-color: var(--witness); }
.lead.clue { border-left-color: var(--clue); }
.lead.documents { border-left-color: var(--documents); }
.lead.done { opacity: .62; border-left-color: var(--ok); }
/* Moriarty takes every icon, so he gets all four colours rather than one */
.lead.anyicon { border-left: 5px solid transparent;
  border-image: linear-gradient(var(--tracks), var(--witness), var(--clue), var(--documents)) 1; }
.lead .kind { color: var(--dim); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.lead .name { font-family: var(--serif); font-size: 1.25em; color: var(--cream); }
.lead .need { font-family: var(--display); font-size: 2em; color: var(--gold); line-height: 1; }
.lead .need.zero { color: var(--ok); }
.lead .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* ---- tracks ---- */
.track { display: flex; gap: 2px; flex-wrap: wrap; }
.track .pip { width: 1.05em; height: 1.05em; border-radius: 3px; background: var(--panel2); font-size: 11px;
  display: grid; place-items: center; color: var(--dim); }
.track .pip.on { background: var(--gold); color: #241c08; }
.track .pip.target { outline: 2px solid var(--ok); }
.holmes .pip.on { background: var(--red); color: #fff; }