/* ============================================================
   Per-screen layout
   ============================================================ */

.wrap{ max-width:1180px; margin:0 auto; padding:26px 24px 70px; }
.wrap.narrow{ max-width:820px; }

/* ---------------- TITLE ---------------- */
#title-screen{ display:grid; place-items:center; text-align:center; }
.title-inner{ max-width:min(980px,96vw); padding:40px 12px; }
.logo{ font:400 clamp(26px,6.1vw,90px)/1.02 var(--serif); letter-spacing:.11em; margin:0 0 6px;
  padding-left:.11em; white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%, #cfc6b4 45%, #6d6558 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(224,91,76,.16); }
.logo-sub{ font:600 11px/1 var(--sans); letter-spacing:.62em; color:var(--blood); margin-bottom:26px; }
.title-blurb{ font:400 17px/1.7 var(--serif); color:#c8c2b5; margin:0 auto 34px; max-width:56ch; }
.title-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
/* ---------------- MAIN MENU ----------------
   A full screen with a room from the game behind it, drained and darkened
   so it reads as a backdrop rather than a picture. The menu itself is a
   numbered list, the way a file's contents page would be. */
#title-screen.home{ display:block; position:relative; overflow:hidden; }
.home-back{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(.35) brightness(.62) contrast(1.06) saturate(.85); transform:scale(1.04); }
.home-back svg{ width:100%; height:100%; display:block; }
.home-wash{ position:absolute; inset:0;
  background:
    radial-gradient(62% 52% at 50% 6%, rgba(230,178,75,.10), transparent 70%),
    radial-gradient(96% 80% at 50% 50%, rgba(7,9,12,.30), rgba(7,9,12,.88) 78%),
    linear-gradient(180deg, rgba(7,9,12,.55) 0%, rgba(7,9,12,.42) 34%, rgba(7,9,12,.9) 100%); }
.home-corner{ position:absolute; top:calc(16px + var(--safe-t, 0px)); right:18px; z-index:3;
  display:flex; align-items:center; gap:8px; }
/* an unproven address: a mark, not a nag */
.home-corner .btn.unverified{ border-color:var(--blood-dim); position:relative; }
.home-corner .btn.unverified::after{ content:''; position:absolute; top:-3px; right:-3px;
  width:8px; height:8px; border-radius:50%; background:var(--blood-hot);
  box-shadow:0 0 0 2px var(--ink-900, #0a0c10); }

.home-inner{ position:relative; z-index:2; min-height:100%; display:flex; flex-direction:column;
  justify-content:center; gap:26px; max-width:720px; margin:0 auto; padding:8vh 22px 6vh; }
.home-head{ text-align:center; }
.home-file{ display:block; font:600 9.5px/1 var(--sans); letter-spacing:.34em; color:var(--bone-faint);
  text-transform:uppercase; margin-bottom:14px; }
/* The wordmark is one line and must stay inside the menu's column, so it
   is clamped rather than sized off the viewport alone. */
#title-screen.home .logo{ margin-bottom:8px; font-size:clamp(26px, 6.4vw, 56px); max-width:100%; }
.home-foot{ text-align:center; font:400 11px/1.7 var(--mono); color:var(--bone-faint); letter-spacing:.08em; }

.menu-list{ display:flex; flex-direction:column; }
.menu-item{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer;
  color:inherit; font-family:var(--serif); background:none; border:0;
  border-top:1px solid rgba(255,255,255,.08); padding:15px 6px 15px 4px;
  transition:padding .16s, background .16s, border-color .16s; }
.menu-list .menu-item:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
.menu-item:hover{ background:rgba(230,178,75,.06); padding-left:14px; border-color:rgba(230,178,75,.35); }
.menu-no{ flex:0 0 auto; font:400 11px/1 var(--mono); color:var(--bone-faint); letter-spacing:.1em; }
.menu-text{ flex:1; min-width:0; }
.menu-text b{ display:block; font:400 19px/1.25 var(--serif); color:var(--bone); }
.menu-text span{ display:block; margin-top:3px; font:400 12.8px/1.45 var(--serif); color:var(--bone-faint); }
.menu-go{ flex:0 0 auto; color:var(--bone-faint); font:400 17px/1 var(--sans); opacity:0; transition:opacity .16s; }
.menu-item:hover .menu-go{ opacity:1; color:var(--sodium); }
.menu-item.lead .menu-text b{ font-size:24px; color:#efe7d6; }
.menu-item.lead .menu-no{ color:var(--blood-hot); }
.menu-item.lead:hover{ background:rgba(192,74,63,.10); border-color:rgba(192,74,63,.45); }
.title-foot{ margin-top:40px; font:400 12px/1.7 var(--mono); color:var(--bone-faint); }
.title-rain{ position:absolute; inset:0; z-index:-1; opacity:.5; }
/* The glow is painted inside the screen's own box rather than as an oversized
   circle hanging off both edges, so it can never add scroll extent on a phone. */
.lampglow{ position:absolute; left:0; right:0; top:0; height:min(70vmax,620px); pointer-events:none; z-index:0;
  background:radial-gradient(58% 62% at 50% -6%, rgba(230,178,75,.14), transparent 66%); }

/* ---------------- FIRST SCREEN: THE FILE COVER ----------------
   Not a title card with a menu under it — the cover of a case file, which is
   what the whole game is about. Card stock, a cut tab, a typed head, a rule,
   the question, and a stamp that has not dried. */
.cover-stage{ min-height:100%; display:grid; place-items:center; padding:5vh 18px 8vh; position:relative; z-index:1; }
.dossier{ position:relative; width:min(680px,100%); }
.dossier-tab{
  position:absolute; top:-27px; left:38px; z-index:1;
  padding:8px 22px 9px; border:1px solid var(--ink-400); border-bottom:0;
  background:linear-gradient(180deg,#332b1d,#2b2418);
  font:600 10px/1 var(--sans); letter-spacing:.28em; color:#b8a179;
}
.dossier-sheet{
  position:relative; overflow:hidden; padding:34px 38px 30px;
  border:1px solid var(--ink-400);
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.016) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #2b2418, #1d1810 62%, #171208);
  box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.045);
}
/* the folder's fold, down the left edge */
.dossier-sheet::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(255,255,255,.05));
}
.dossier-head{
  display:flex; justify-content:flex-end; gap:16px;
  font:400 10.5px/1.6 var(--mono); letter-spacing:.2em; color:var(--bone-faint);
  text-transform:uppercase; padding-bottom:14px;
}
.dossier-title{
  font:400 clamp(34px,7.4vw,62px)/1 var(--serif); letter-spacing:.06em; margin:0;
  color:#efe7d6; text-shadow:0 2px 26px rgba(0,0,0,.6);
}
/* The line that says what this is, before anybody is asked to sign in.
   Set as prose rather than as a label: it is meant to be read. */
.dossier-about{ margin:0; font:400 14.5px/1.62 var(--serif); color:var(--bone-faint);
  max-width:44ch; }

.dossier-sub{ margin:10px 0 0; font:600 10px/1.8 var(--sans); letter-spacing:.3em;
  color:var(--blood); text-transform:uppercase; }
.dossier-rule{ height:1px; margin:24px 0 22px;
  background:linear-gradient(90deg, var(--ink-400), rgba(255,255,255,.08), transparent); }
.dossier-ask{ font:400 25px/1.25 var(--serif); margin:0; color:var(--bone); }
.dossier-hint{ margin:7px 0 0; font:400 13.5px/1.55 var(--serif); color:var(--bone-faint); }
.dossier-act{ margin-top:24px; }
.dossier-act .btn{ width:100%; letter-spacing:.2em; }
.dossier-foot{ margin-top:22px; padding-top:14px; border-top:1px dashed var(--ink-400);
  font:400 11px/1.6 var(--mono); color:var(--bone-faint); letter-spacing:.08em; }
/* ---------------- SETTINGS ---------------- */
.logo.small{ font-size:clamp(24px,4.6vw,58px); text-align:center; }
.set-row{ display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:10px 0; border-bottom:1px dashed var(--ink-400); }
.set-ctl{ display:flex; align-items:center; gap:10px; }
.set-val{ color:var(--bone-faint); min-width:26px; text-align:right; }

body.rtl{ direction:rtl; }
body.rtl .field-nav{ border-right:0; border-left:1px solid var(--line); }
body.rtl .loc-btn{ border-left:0; border-right:3px solid transparent; text-align:right; }
body.rtl .loc-btn.active{ border-right-color:var(--blood); }
body.rtl .iv-side{ border-right:0; border-left:1px solid var(--line); }
body.rtl .toast{ border-left:0; border-right:3px solid var(--sodium); }
body.rtl .scene-title{ left:auto; right:22px; }
body.rtl .hotspot .lbl{ left:auto; right:44px; }
body.rtl .tl-hints li{ padding:10px 20px 10px 0; }
body.rtl .tl-hints li::before{ left:auto; right:0; }
body.rtl .notice{ border-left:0; border-right:3px solid var(--sodium); }
body.rtl .board-grid, body.rtl .board-tray{ direction:ltr; text-align:start; }

/* ---------------- CASE LIST ----------------
   A line per file: number, title, what it is about, what it costs, and
   where it stands. Grouped by collection, so a new one is a new heading. */
.series-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  margin:30px 0 4px; padding-bottom:10px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.series-name h3{ font:400 23px/1.2 var(--serif); margin:0; }
.series-name .eyebrow{ display:block; margin-top:4px; }
.series-blurb{ margin:10px 0 14px; font:400 14px/1.6 var(--serif); color:var(--bone-dim); max-width:64ch; }
.series-more{ margin:22px 0 0; font:400 12.5px/1.6 var(--serif); color:var(--bone-faint);
  text-align:center; letter-spacing:.02em; opacity:.75; }

/* The collection's own figures, in the same voice as a file's: what is
   behind a shelf nobody has opened yet. */
.series-facts{ display:flex; gap:16px; flex-wrap:wrap; margin:0 0 14px;
  font:600 8.5px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); }

/* A collection of more than one file is drawn as one sheet: heading, what
   it is, what is in it and the files themselves inside a single border.
   A run of rows under a title is a list; this is a folder. */
.series.set{ margin-top:26px; padding:18px 20px 16px; border:1px solid var(--ink-400);
  background:linear-gradient(180deg, rgba(255,255,255,.016), transparent 120px); }
.series.set .series-head{ margin-top:0; }

/* The run of files, one cell each: countable at a glance, and coloured by
   what the account holds. Deliberately small — it is a tab strip on a
   folder, not a control. */
.series-index{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 15px; }
/* every numeral opens its own card, so it is a button with a target
   worth aiming at on a phone rather than a mark on the page */
.series-index .ix{ min-width:34px; min-height:32px; padding:6px 8px; text-align:center;
  font:400 11px/1.3 var(--mono); letter-spacing:.08em; cursor:pointer;
  background:none; border:1px solid var(--ink-400); color:var(--bone-faint);
  transition:border-color .16s, color .16s, background .16s; }
.series-index .ix:hover{ border-color:var(--sodium); color:var(--bone);
  background:rgba(230,178,75,.07); }
.series-index .ix:focus-visible{ outline:2px solid var(--sodium); outline-offset:2px; }
.series-index .ix.wait{ border-color:var(--sodium-dim); color:var(--sodium-dim); }
.series-index .ix.open{ border-color:var(--sodium); color:var(--sodium); }
.series-index .ix.done{ border-color:var(--green); color:var(--green); }
.series-index .ix.shut{ border-style:dashed; }
/* the numeral whose file is showing */
.series-index .ix.on{ background:rgba(230,178,75,.12); border-style:solid;
  border-color:var(--sodium); color:var(--bone); }

/* the card one numeral opens, drawn where the list was */
.series-panel{ display:block; }
.file-card{ padding:14px 2px 4px; }
.file-head{ display:flex; align-items:flex-start; gap:15px; }
.file-head > div{ flex:1; min-width:0; }
.file-card h3{ font:400 25px/1.2 var(--serif); margin:0 0 4px; color:var(--bone); }
.file-card .prose{ margin:0; }
.file-card .case-facts{ display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 0; padding-left:49px; }
.file-card .file-why{ margin:12px 0 0; padding-left:49px; font-size:13.5px; }
.file-acts{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0; padding-left:49px; }
@media (max-width:760px){
  .file-card .case-facts, .file-card .file-why, .file-acts{ padding-left:0; }
  /* the stamp drops under the title rather than squeezing it into a
     column two words wide */
  .file-head{ gap:11px; flex-wrap:wrap; }
  .file-head > div{ flex:1 1 60%; order:2; }
  .file-head .case-state{ order:3; flex:0 0 auto; margin-left:37px; }
  .file-card h3{ font-size:21px; }
  .file-acts .btn{ flex:1 1 auto; }
}

.case-list{ display:flex; flex-direction:column; }
.series-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:2px; padding:14px 2px 0; border-top:1px solid rgba(255,255,255,.06);
  font:400 13px/1.5 var(--serif); color:var(--bone-dim); }

/* Everything the story has not reached yet, on one line. Five rows of
   dashes said the same nothing five times and read as five refusals
   rather than as the rest of one collection. */
.case-rest{ display:flex; align-items:baseline; gap:15px; width:100%; text-align:left;
  color:inherit; font-family:var(--serif); background:none; border:0;
  border-top:1px solid rgba(255,255,255,.06); padding:14px 6px 4px 2px; cursor:default; }
/* a range is wider than a numeral, and must not be broken across two
   lines by a column sized for one */
.case-rest .case-no{ flex:0 0 auto; min-width:34px; padding-top:0; white-space:nowrap; }
.case-rest-line{ flex:1; min-width:0; font:400 13.5px/1.5 var(--serif); color:var(--bone-faint); }
.case-row{ display:flex; align-items:flex-start; gap:15px; width:100%; text-align:left; cursor:pointer;
  color:inherit; font-family:var(--serif); background:none; border:0;
  border-bottom:1px solid rgba(255,255,255,.06); padding:14px 6px 15px 2px;
  transition:background .16s, padding .16s; }
.case-row:hover{ background:rgba(230,178,75,.05); padding-left:10px; }
.case-row.locked{ cursor:not-allowed; }
/* a file already closed: still readable, plainly behind you */
.case-row.closed .case-body > b{ color:var(--bone-dim); }
.case-row.closed .case-no{ color:var(--green); }
.case-row.closed.wrong .case-no{ color:var(--blood); }
.case-row.closed.poor .case-no{ color:var(--sodium-dim); }
.case-row.locked .case-body > b{ color:var(--bone-faint); letter-spacing:.12em; }
.case-row.locked:hover{ background:rgba(255,255,255,.02); }
/* a file in the archive is not a disabled control: it can be had, the
   click leads somewhere, and it reads a shade quieter than one in hand
   rather than greyed out and crossed off */
.case-row.archived .case-body > b{ color:var(--bone-dim); }
.case-row.archived .case-facts{ opacity:.72; }
.case-no{ flex:0 0 34px; font:400 12px/1.7 var(--mono); color:var(--bone-faint); letter-spacing:.08em; padding-top:2px; }
.case-body{ flex:1; min-width:0; }
.case-body > b{ display:block; font:400 19px/1.3 var(--serif); }
.case-line{ display:block; margin-top:3px; font:400 13.5px/1.5 var(--serif); color:var(--bone-dim); }
.case-facts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:7px;
  font:600 8.5px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); }
/* the score sits in the same run of facts as the rest. The title rule is
   scoped to the direct child so it cannot reach in here and size it. */
.case-facts b{ font:600 8.5px/1.5 var(--sans); letter-spacing:.14em; color:var(--sodium); }
.case-state{ flex:0 0 auto; align-self:center; font:600 8.5px/1 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; padding:6px 10px; border:1px solid var(--ink-400); color:var(--bone-faint); }
.case-state.open{ border-color:var(--sodium); color:var(--sodium); }
/* waiting, not refused: the archive's own colour rather than the dead
   grey a sealed file gets */
.case-state.waiting{ border-color:var(--sodium-dim); color:var(--sodium-dim); }
/* a closed file is marked by how it closed, not by the fact that it closed:
   a wrong name in green read as a pass */
.case-state.done{ border-color:var(--green); color:var(--green); }
.case-state.done.wrong{ border-color:var(--blood); color:var(--blood-hot); }
.case-state.done.poor{ border-color:var(--sodium-dim); color:var(--sodium-dim); }
.case-foot{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------- CASE SELECT (retired cards) ---------------- */
.case-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.case-card{ position:relative; overflow:hidden; cursor:pointer; text-align:left; padding:0; border:1px solid var(--line);
  background:var(--ink-700); color:var(--bone); font-family:var(--serif); transition:transform .18s, border-color .18s; }
.case-card:hover{ transform:translateY(-3px); border-color:var(--blood); }
.case-card .art{ height:130px; overflow:hidden; position:relative; }
.case-card .art svg{ width:100%; height:100%; display:block; }
.case-card .art::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,var(--ink-700)); }
.case-card .body{ padding:14px 16px 18px; }
.case-card h3{ font:400 21px/1.25 var(--serif); margin:2px 0 6px; }
.case-card p{ margin:0; font:400 13.5px/1.5 var(--serif); color:var(--bone-dim); }
.case-card.locked{ opacity:.45; cursor:not-allowed; }
.case-card.locked:hover{ transform:none; border-color:var(--line); }
/* a sealed file must not show what is inside it. The drawings were abstract
   enough to get away with it; a photograph of the next body is a spoiler, so
   the art of a locked card is blurred out of legibility and drained of colour. */
.case-card.locked .art > *{ filter:blur(10px) grayscale(1) brightness(.85) contrast(.8); transform:scale(1.08); }
.case-card.locked .art::after{ background:linear-gradient(180deg,rgba(11,13,16,.45),var(--ink-700)); }
.case-card .stamp{ position:absolute; top:12px; right:12px; z-index:2; font:600 9px/1 var(--sans);
  letter-spacing:.2em; padding:5px 8px; border:1px solid currentColor; }
.stamp.solved{ color:var(--green); } .stamp.locked{ color:var(--bone-faint); } .stamp.open{ color:var(--sodium); }

/* ---------------- BRIEF ---------------- */
.brief-hero{ position:relative; height:290px; overflow:hidden; border-bottom:1px solid var(--line); }
.brief-hero svg{ width:100%; height:100%; display:block; }
.brief-hero .cap{ position:absolute; left:0; right:0; bottom:0; padding:34px 30px 26px;
  /* a drawing under this was flat and dark; a photograph is not, so the wash
     starts earlier and every line over it carries its own shadow */
  background:linear-gradient(180deg,transparent, rgba(7,9,12,.55) 38%, rgba(7,9,12,.97)); }
.brief-hero .cap > *{ text-shadow:0 2px 14px rgba(0,0,0,.9); }
.brief-hero h1{ font:400 clamp(30px,5vw,54px)/1.05 var(--serif); letter-spacing:.02em; }
.brief-hero .sub{ font:400 16px/1.4 var(--serif); color:var(--bone-dim); margin-top:6px; }
.brief-body{ display:grid; grid-template-columns:1.6fr 1fr; gap:32px; }
@media (max-width:860px){ .brief-body{ grid-template-columns:1fr; } }
.brief-meta li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--ink-400); }
.brief-meta{ list-style:none; padding:0; margin:0 0 18px; font-size:14px; }
.brief-meta b{ font:600 10px/1.6 var(--sans); letter-spacing:.16em; color:var(--bone-faint); text-transform:uppercase; }

/* ---------------- FIELD ---------------- */
.field{ display:grid; grid-template-columns:238px 1fr; height:100%; }
@media (max-width:900px){ .field{ grid-template-columns:1fr; } .field-nav{ display:flex; overflow-x:auto; } }
.field-nav{ border-right:1px solid var(--line); background:rgba(7,9,12,.6); overflow-y:auto; padding:10px 0; }
.loc-btn{ width:100%; display:block; text-align:left; background:transparent; border:0; border-left:3px solid transparent;
  color:var(--bone-dim); padding:11px 16px; cursor:pointer; font-family:var(--serif); font-size:15px; white-space:nowrap; }
.loc-btn small{ display:block; font:600 9px/1.5 var(--sans); letter-spacing:.14em; color:var(--bone-faint); text-transform:uppercase; }
.loc-btn:hover{ background:rgba(255,255,255,.04); color:var(--bone); }
.loc-btn.active{ border-left-color:var(--blood); background:rgba(192,74,63,.10); color:#fff; }
.loc-btn.locked{ opacity:.4; cursor:not-allowed; }
.loc-btn .cnt{ float:right; font:600 10px/1.6 var(--mono); color:var(--sodium); }

.field-main{ position:relative; overflow-y:auto; }
.scene-block{ position:relative; border-bottom:1px solid var(--line); }
.scene-hold{ position:relative; height:min(52vh,430px); overflow:hidden; }
/* a photograph is a 16:9 frame: give it that shape wherever the screen can
   afford it, so the crop takes as little off the top and bottom as possible.
   On a narrow screen the whole frame fits and nothing is lost at all. */
/* aspect-ratio + max-height also shrinks the *width*, which left a band of
   empty page beside the picture on a wide screen. min-width pins it to the
   column and the overflow is cropped by the cover fit, as intended. */
.scene-hold.photo{ height:auto; aspect-ratio:16/9; max-height:min(62vh,560px); min-width:100%; }
.scene-hold svg.scene-svg{ position:absolute; inset:0; width:100%; height:100%; }
/* the caption never eats a click, and it steps out of the way while the
   player is reaching for the markers that sit over it */
.scene-title{ position:absolute; left:22px; right:22px; bottom:18px; z-index:3;
  pointer-events:none; transition:opacity .25s; }
/* the room name reads over a photograph, not over a flat drawing any more */
.scene-block .scene-hold::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  /* spanning the whole box with a transparent stop at 45% — a half-height box
     draws a visible seam at its top edge, and `transparent` is rgba(0,0,0,0),
     which interpolates through black on some engines */
  background:linear-gradient(180deg, rgba(7,9,12,0) 45%, rgba(7,9,12,.78)); }
.scene-hold:hover .scene-title{ opacity:.18; }
.scene-title h2{ font:400 30px/1.1 var(--serif); text-shadow:0 2px 20px #000; }
.scene-title p{ margin:6px 0 0; max-width:60ch; font:400 14px/1.55 var(--serif); color:#c6c0b3; text-shadow:0 2px 12px #000; }

.hotspot{ position:absolute; z-index:4; transform:translate(-50%,-50%); background:none; border:0; cursor:pointer; padding:0; }
.hotspot .ring{ width:34px; height:34px; border:2px solid var(--sodium); border-radius:50%;
  display:grid; place-items:center; background:rgba(10,12,16,.55); box-shadow:0 0 18px rgba(230,178,75,.5);
  transition:transform .18s, background .18s, border-color .18s; }
.hotspot .ring svg{ width:18px; height:18px; color:var(--sodium); }
.hotspot::after{ content:''; position:absolute; inset:-8px; border:1px solid rgba(230,178,75,.35); border-radius:50%;
  animation:ping 2.6s ease-out infinite; }
@keyframes ping{ 0%{transform:scale(.7); opacity:.9} 100%{transform:scale(1.5); opacity:0} }
/* The keyboard ring. A marker is a circle drawn inside a square button,
   so the browser's default outline boxes the button and misses the thing
   the player is looking at. Round it and push it clear of the halo. */
.hotspot:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:50%; }
.hotspot:focus-visible .ring{ transform:scale(1.18); background:var(--sodium); border-color:#fff; }
.hotspot:focus-visible .ring svg{ color:#12100a; }
.hotspot:hover .ring{ transform:scale(1.18); background:var(--sodium); border-color:#fff; }
.hotspot:hover .ring svg{ color:#12100a; }
.hotspot.done .ring{ border-color:var(--bone-faint); box-shadow:none; background:rgba(10,12,16,.75); }
.hotspot.done .ring svg{ color:var(--bone-faint); }
.hotspot.done::after{ display:none; }
.hotspot .lbl{ position:absolute; left:44px; top:50%; transform:translateY(-50%); white-space:nowrap;
  font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(7,9,12,.86); border:1px solid var(--line); padding:6px 9px; opacity:0; transition:opacity .18s; pointer-events:none; }
.hotspot:hover .lbl{ opacity:1; }
/* the confirm chip belongs to touch only; mobile.css turns it on */
.hotspot .go{ display:none; }
.hotspot.interview .ring{ border-color:var(--blood); box-shadow:0 0 18px rgba(192,74,63,.55); }
.hotspot.interview .ring svg{ color:var(--blood-hot); }

.finding{ padding:20px 26px 40px; }
.finding .prose{ margin:0 0 16px; }
.finding-hd{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.finding-hd h3{ font:400 23px/1.2 var(--serif); }
.gained{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.gained-chip{ display:flex; align-items:center; gap:9px; border:1px solid var(--sodium); background:rgba(230,178,75,.08);
  padding:8px 12px; font:600 10px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--sodium);
  animation:chipin .5s cubic-bezier(.2,.9,.3,1) both; }
.gained-chip svg{ width:17px; height:17px; }
@keyframes chipin{ from{ opacity:0; transform:translateY(10px) scale(.94) } }

/* narrow screens: the caption must not sit on top of the markers */
@media (max-width:900px){
  .scene-hold{ height:min(34vh,260px); }
  .scene-title{ position:static; padding:14px 18px 12px; left:auto; right:auto; bottom:auto;
    background:linear-gradient(180deg, rgba(7,9,12,.9), transparent); }
  .scene-title h2{ font-size:22px; text-shadow:none; }
  .scene-title p{ text-shadow:none; font-size:13px; }
  .hotspot .lbl{ display:none; }
  #hud-tabs{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  #hud-tabs::-webkit-scrollbar{ display:none; }
  .tab{ padding:10px 10px; font-size:10px; }
  .hud-left{ min-width:0; } .hud-right{ min-width:0; gap:10px; }
  .hud-case strong{ max-width:110px; }
  .meter-bar{ width:44px; }
}

/* ---------------- EVIDENCE / PEOPLE ---------------- */
.ev-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.ev-card{ display:flex; gap:13px; padding:14px; border:1px solid var(--line); background:var(--ink-700); cursor:pointer;
  transition:border-color .16s, transform .16s; text-align:left; color:inherit; }
.ev-card:hover{ border-color:var(--sodium); transform:translateY(-2px); }
.ev-card .ic{ flex:0 0 40px; height:40px; display:grid; place-items:center; border:1px solid var(--ink-400); color:var(--sodium); }
.ev-card .ic svg{ width:23px; height:23px; }
.ev-card h3, .ev-card h4{ font:400 15.5px/1.25 var(--serif); margin:0 0 4px; }
.ev-card p{ margin:0; font:400 12.8px/1.45 var(--serif); color:var(--bone-dim); }
.ev-card .type{ font:600 8.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--bone-faint); margin-top:6px; display:block; }
.ev-card.is-new{ border-color:var(--sodium); box-shadow:0 0 0 1px rgba(230,178,75,.3) inset; }
.ev-card[data-type="forensic"] .ic{ color:var(--cyan); }
.ev-card[data-type="document"] .ic{ color:#c8a86a; }
.ev-card[data-type="testimony"] .ic{ color:#a98fc0; }

.filters{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.chip{ background:transparent; border:1px solid var(--line); color:var(--bone-faint); padding:6px 12px; cursor:pointer;
  font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.chip.on{ border-color:var(--blood); color:var(--blood-hot); }

.ppl-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.ppl-card{ display:flex; gap:14px; border:1px solid var(--line); background:var(--ink-700); padding:0; overflow:hidden;
  text-align:left; color:inherit; cursor:pointer; transition:border-color .16s, transform .16s; }
.ppl-card:hover{ border-color:var(--blood); transform:translateY(-2px); }
/* The picture fills its column however tall the card grows. A bio of
   four lines makes the card taller than the photograph, and a portrait
   that stops halfway down with the card's background under it reads as
   a picture that failed to load. */
.ppl-card .pic{ flex:0 0 108px; align-self:stretch; position:relative;
  min-height:135px; overflow:hidden; background:var(--ink-800, #0d1014); }
.ppl-card .pic svg,
.ppl-card .pic img{ position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover; }
.ppl-card .info{ padding:13px 14px 13px 0; }
.ppl-card h3, .ppl-card h4{ font:400 17px/1.2 var(--serif); margin:0 0 3px; }
.ppl-card .role{ font:600 9px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--blood); }
.ppl-card p{ margin:8px 0 0; font:400 12.6px/1.45 var(--serif); color:var(--bone-dim); }
.ppl-card .tagrow{ margin-top:9px; display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font:600 8.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; padding:4px 6px; border:1px solid var(--ink-400); color:var(--bone-faint); }
.tag.cleared{ color:var(--green); border-color:var(--green); }
.tag.dead{ color:var(--blood); border-color:var(--blood-dim); }
.tag.talk{ color:var(--sodium); border-color:var(--sodium-dim); }

/* ---------------- INTERVIEW ---------------- */
.iv{ display:grid; grid-template-columns:300px 1fr; height:100%; }
@media (max-width:900px){ .iv{ grid-template-columns:1fr; } .iv-side{ display:none; } }
.iv-side{ border-right:1px solid var(--line); position:relative; overflow:hidden; background:#080a0d; }
.iv-pic{ position:absolute; inset:0; background:linear-gradient(180deg,#0d1015 0%, #07090c 100%); }
.iv-side svg.portrait{ width:100%; height:auto; max-width:100%; display:block; }
.iv-side .fade{ position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, transparent, #07090c 62%); pointer-events:none; }
.iv-side .who{ position:absolute; left:0; right:0; bottom:0; padding:18px 18px 30px;
  background:linear-gradient(180deg,transparent,rgba(6,8,10,.97)); }
.iv-side h3{ font:400 21px/1.15 var(--serif); }
.iv-side .role{ font:600 9px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--blood); margin-top:4px; }
.composure{ margin-top:12px; }
.composure .lb{ font:600 9px/1 var(--sans); letter-spacing:.18em; color:var(--bone-faint); }
.composure .bar{ height:4px; background:var(--ink-600); margin-top:5px; }
.composure .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--blood),var(--sodium)); transition:width .5s; }

.iv-main{ overflow-y:auto; padding:24px 28px 60px; }
.transcript{ max-width:74ch; }
.line{ margin:0 0 15px; animation:linein .34s ease both; }
@keyframes linein{ from{ opacity:0; transform:translateY(6px) } }
.line .spk{ font:600 9.5px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--blood); display:block; }
.line.you .spk{ color:var(--cyan); }
.line p{ margin:2px 0 0; font:400 16px/1.62 var(--serif); color:#d8d3c8; }
.line.you p{ color:#b9c9cf; }
.line.narr p{ color:var(--bone-dim); font-style:italic; }

.claims{ margin-top:26px; }
.claim{ border:1px solid var(--line); background:var(--ink-700); padding:13px 15px; margin-bottom:11px; }
.claim.broken{ border-color:var(--green); background:rgba(111,157,106,.07); }
.claim q{ display:block; font:400 15.5px/1.5 var(--serif); color:#e2ddd2; quotes:'"' '"'; }
.claim .acts{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.claim .btn{ padding:7px 13px; font-size:10px; }
.claim .verdict{ margin-top:10px; font:600 9.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--green); }

.topics{ display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.topic-btn{ text-align:left; background:var(--ink-600); border:1px solid var(--line); color:var(--bone);
  padding:12px 15px; cursor:pointer; font-family:var(--serif); font-size:15.5px; transition:border-color .16s, background .16s; }
.topic-btn:hover{ border-color:var(--blood); background:var(--ink-500); }
.topic-btn .cost{ float:right; font:600 9px/1.5 var(--mono); color:#948e83; }
/* A line of questioning already asked has to look spent without becoming
   unreadable. It used to be opacity:.42, which put the label at 3.4:1 on
   this ground — under the 4.5:1 a 15.5px serif needs, and the button
   stays clickable, so it is text a player is still expected to read.
   A stated colour says the same thing at 4.8:1, and leaves the cost
   badge alone rather than fading it twice. */
.topic-btn.spent{ color:#8e887d; }
.topic-btn.spent .cost{ color:#8e887d; }
.topic-btn.spent:hover{ border-color:var(--line); background:var(--ink-600); }

.ev-picker{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); max-height:46vh; overflow:auto; padding:2px; }
.ev-pick{ display:flex; gap:9px; align-items:center; border:1px solid var(--line); background:var(--ink-600);
  padding:9px 10px; cursor:pointer; text-align:left; color:inherit; font:400 13px/1.3 var(--serif); }
.ev-pick:hover{ border-color:var(--sodium); }
.ev-pick svg{ width:19px; height:19px; flex:0 0 19px; color:var(--sodium); }

/* ---------------- BOARD ----------------
   A workbench, not a wall: a join tray across the top, a card grid
   under it that flows and wraps, and no absolute positioning at all.
   Everything scrolls in one direction. */
.board-wrap{ position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden; background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 26px), #0a0c10; }

/* the tray */
.board-tray{ flex:0 0 auto; padding:12px 18px 13px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,17,13,.96), rgba(10,12,16,.92)); }
.board-tray.ready{ border-bottom-color:var(--blood-dim); }
.tray-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:9px; }
.tray-note{ margin:0; font:400 13px/1.3 var(--serif); color:var(--bone-dim); }
.board-tray.ready .tray-note{ color:var(--sodium); }
.tray-row{ display:flex; align-items:stretch; gap:10px; }
.tray-slot{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:9px;
  border:1px dashed var(--ink-400); background:rgba(255,255,255,.015); padding:10px 12px; min-height:46px; }
.tray-slot.filled{ border-style:solid; border-color:var(--sodium); background:rgba(230,178,75,.07); cursor:pointer; }
.tray-slot.filled.deduction{ border-color:var(--blood-dim); background:rgba(192,74,63,.09); }
.tray-slot .slot-empty{ font:400 13px/1 var(--serif); color:var(--bone-faint); }
.tray-slot .slot-icon{ display:flex; flex:0 0 17px; }
.tray-slot .slot-icon svg{ width:17px; height:17px; color:var(--sodium); }
.tray-slot.deduction .slot-icon svg{ color:var(--blood-hot); }
.tray-slot .slot-name{ flex:1; min-width:0; font:400 13.5px/1.3 var(--serif); color:var(--bone);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tray-slot .slot-x{ flex:0 0 auto; font:400 17px/1 var(--sans); color:var(--bone-faint); }
.tray-slot.filled:hover .slot-x{ color:var(--blood-hot); }
.tray-plus{ align-self:center; font:400 17px/1 var(--sans); color:var(--bone-faint); }
.tray-acts{ display:flex; gap:8px; flex:0 0 auto; }
/* Two type sizes on one button. Aligning them on their baselines let
   the taller of the two set the box and pushed both off centre; the
   cap heights are what the eye reads as level, so they are centred and
   the cost is nudged down by the half-pixel that leaves. */
.tray-join{ display:inline-flex; align-items:center; gap:9px; line-height:1; }
.tray-join span{ line-height:1; }
.tray-join small{ font:400 10.5px/1 var(--mono); letter-spacing:.1em;
  opacity:.72; position:relative; top:.5px; }
.tray-join:disabled, .tray-clear:disabled{ opacity:.4; cursor:not-allowed; }

/* the pile */
.board-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px 18px 18px; }
.board-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.board-search{ flex:1 1 220px; min-width:0; background:var(--ink-800); border:1px solid var(--line);
  color:var(--bone); padding:9px 12px; font:400 14px/1.3 var(--serif); border-radius:2px; }
.board-search:focus{ outline:none; border-color:var(--sodium); }
.board-chips{ display:flex; gap:7px; flex:0 0 auto; }
.board-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); align-items:start; }
.board-empty{ grid-column:1/-1; padding:26px 0; text-align:center; }

.bcard{ position:relative; display:block; width:100%; text-align:left; cursor:pointer; color:inherit;
  border:1px solid var(--line); background:var(--ink-700); padding:12px 13px 13px;
  font-family:var(--serif); transition:border-color .15s, transform .15s, background .15s; }
.bcard:hover{ border-color:var(--sodium); transform:translateY(-2px); }
.bcard.picked{ border-color:var(--sodium); background:rgba(230,178,75,.09); }
.bcard.picked::after{ content:''; position:absolute; inset:-1px; border:1px solid var(--sodium); pointer-events:none; }
.bcard.deduction{ background:linear-gradient(180deg,#241a18,#191113); border-color:var(--blood-dim); }
.bcard.deduction:hover{ border-color:var(--blood-hot); }
.bcard.deduction.picked{ border-color:var(--blood-hot); background:rgba(192,74,63,.13); }
.bcard.fresh{ animation:bcfresh 2.4s ease-out 1; }
@keyframes bcfresh{ 0%{ box-shadow:0 0 0 2px var(--sodium); } 100%{ box-shadow:0 0 0 0 transparent; } }
.bc-top{ display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.bc-icon{ display:flex; flex:0 0 17px; padding-top:1px; }
.bc-icon svg{ width:17px; height:17px; color:var(--sodium); }
.bcard.deduction .bc-icon svg{ color:var(--blood-hot); }
.bc-top h5{ flex:1; min-width:0; margin:0; font:400 14px/1.3 var(--serif); }
/* The glyph stays 15px; the button around it is 28px square so a finger
   can hit it. Negative margin keeps the extra size from moving the title
   it sits beside. */
.bc-info{ flex:0 0 auto; background:none; border:0; cursor:pointer;
  width:28px; height:28px; margin:-6px -6px -6px 0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font:400 15px/1 var(--sans); color:var(--bone-faint); }
.bc-info:hover{ color:var(--sodium); }
.bc-info:focus-visible{ outline:2px solid var(--sodium); outline-offset:-2px; }
.bc-sum{ margin:0; font:400 12.4px/1.5 var(--serif); color:var(--bone-dim);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bc-src{ margin:9px 0 0; padding-top:8px; border-top:1px dashed var(--ink-500);
  font:400 10.5px/1.4 var(--mono); color:var(--bone-faint); }

.board-bar{ flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:12px 18px; background:linear-gradient(0deg,rgba(7,9,12,.97),rgba(7,9,12,.6)); border-top:1px solid var(--line); }
.board-hint{ font:400 13.5px/1.4 var(--serif); color:var(--bone-dim); flex:1; }
.board-hint b{ color:var(--sodium); }

/* ---------------- TIMELINE ---------------- */
.tl-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tl-table th{ font:600 9.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint);
  padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; }
.tl-table td{ padding:7px 6px; border-bottom:1px solid var(--ink-600); vertical-align:middle; }
.tl-who{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.tl-who .avatar{ border-radius:50%; overflow:hidden; border:1px solid var(--ink-400); flex:0 0 auto; }
.tl-who b{ font:400 14.5px/1.2 var(--serif); }
.tl-table select{ width:100%; background:var(--ink-600); border:1px solid var(--line); color:var(--bone);
  padding:7px 8px; font:400 13px var(--serif); border-radius:2px; }
.tl-table select:focus{ outline:1px solid var(--blood); }
.tl-table tr.locked select{ border-color:var(--green); color:var(--green); pointer-events:none; opacity:.9; }
.tl-table tr.locked .tl-who b::after{ content:' ✓'; color:var(--green); }
.tl-hints{ list-style:none; padding:0; margin:0; }
.tl-hints li{ padding:10px 0 10px 20px; border-bottom:1px dashed var(--ink-400); font:400 13.6px/1.5 var(--serif);
  color:var(--bone-dim); position:relative; }
.tl-hints li::before{ content:'▸'; position:absolute; left:0; color:var(--blood); }

/* ---------------- ACCUSE ---------------- */
.acc-q{ margin-bottom:26px; }
.acc-q h3, .acc-q h4{ font:400 20px/1.3 var(--serif); margin:0 0 12px; }
.acc-opts{ display:grid; gap:9px; }
.acc-opt{ text-align:left; background:var(--ink-700); border:1px solid var(--line); color:var(--bone);
  padding:12px 15px; cursor:pointer; font:400 15px/1.45 var(--serif); display:flex; align-items:center; gap:12px; }
.acc-opt:hover{ border-color:var(--bone-faint); }
.acc-opt.on{ border-color:var(--blood); background:rgba(192,74,63,.12); }
.acc-opt .mark{ width:15px; height:15px; border:1px solid var(--bone-faint); border-radius:50%; flex:0 0 15px; }
.acc-opt.on .mark{ background:var(--blood); border-color:var(--blood); box-shadow:0 0 0 3px rgba(192,74,63,.2) inset; }
.acc-opt .pface{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:0 0 40px; border:1px solid var(--ink-400); position:relative; }
.acc-opt .pface svg{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); max-width:none; }
.chain-pool{ display:grid; gap:9px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.chain-item{ text-align:left; border:1px solid var(--line); background:var(--ink-700); padding:11px 13px; cursor:pointer; color:inherit; }
.chain-item:hover{ border-color:var(--bone-faint); }
.chain-item.on{ border-color:var(--blood); background:rgba(192,74,63,.12); }
.chain-item b{ font:400 14.5px/1.25 var(--serif); display:block; }
.chain-item span{ font:400 12px/1.4 var(--serif); color:var(--bone-dim); }
.chain-item .num{ float:right; font:600 10px var(--mono); color:var(--blood-hot); }

/* ---------------- VERDICT / EPILOGUE ---------------- */
.verdict-hd{ text-align:center; padding:44px 20px 26px; }
.verdict-hd .stampbig{ display:inline-block; border:3px solid currentColor; padding:10px 22px; transform:rotate(-3deg);
  font:600 18px/1 var(--sans); letter-spacing:.3em; }
.tier-perfect{ color:var(--green); } .tier-good{ color:var(--sodium); }
.tier-poor{ color:var(--bone-faint); } .tier-wrong{ color:var(--blood); }
.score-row{ display:flex; gap:26px; justify-content:center; margin:26px 0; flex-wrap:wrap; }
.score-box{ text-align:center; }
.score-box b{ display:block; font:400 34px/1 var(--serif); color:var(--bone); }
.score-box span{ font:600 9px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); }
.answer-list{ list-style:none; padding:0; margin:0 0 26px; }
.answer-list li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px dashed var(--ink-400); align-items:flex-start; }
.answer-list .mk{ font:600 12px/1.4 var(--mono); flex:0 0 22px; }
.answer-list .ok{ color:var(--green); } .answer-list .no{ color:var(--blood); }
.answer-list small{ display:block; color:var(--bone-faint); }

/* A right answer you did not find is covered, not withheld: it is on the
   page, unreadable until asked for, so the file can still be reopened by
   somebody who would rather work it out. */
.answer-cover{ display:inline; padding:5px 8px; margin-left:2px; cursor:pointer;
  border:0; border-bottom:1px dashed var(--sodium-dim, #7a6636); background:rgba(230,178,75,.07);
  color:var(--sodium); font:inherit;
  filter:blur(4.5px); user-select:none; transition:filter .22s ease, background .22s; }
.answer-cover:hover{ background:rgba(230,178,75,.13); }
.answer-cover:focus-visible{ filter:blur(2.5px); }
.answer-cover.shown{ filter:none; user-select:text; cursor:default; border-bottom-style:solid; }
.reveal-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-14px 0 24px; }
.reveal-row .faint{ font:400 12.5px/1.5 var(--serif); max-width:46ch; }

/* ---------------- EVIDENCE CLOSE-UP ---------------- */
.gained-chip.look{ cursor:pointer; font-family:var(--sans); }
.gained-chip.look:hover{ background:rgba(230,178,75,.16); border-color:var(--sodium); }
.gained-chip .lens{ width:14px; height:14px; opacity:.6; margin-left:2px; }
.gained-chip .lens svg{ width:14px; height:14px; }
.ev-look{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:start; }
@media (max-width:720px){ .ev-look{ grid-template-columns:1fr; } }
.ev-plate-hold{ border:1px solid var(--line); background:var(--ink-800); overflow:hidden; }
.ev-plate-hold svg, .ev-plate-hold img{ width:100%; height:auto; display:block; }
/* a statement has no object to photograph: it carries the face that said
   it, mounted the way a witness photograph is stapled into a file */
.ev-plate-hold.said{ background:
  repeating-linear-gradient(101deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px), var(--ink-800); }
.ev-said{ padding:22px 22px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ev-said-face{ width:min(300px,72%); border:1px solid var(--ink-400); background:#0c0e12;
  box-shadow:0 14px 34px -14px #000; }
.ev-said-face svg{ display:block; width:100%; height:auto; }
.ev-said-name{ font:600 9.5px/1.6 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-faint); }
.ev-look-hd{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.ev-look-hd .ic{ flex:0 0 34px; color:var(--sodium); }
.ev-look-hd .ic svg{ width:34px; height:34px; }
.ev-look-hd h3{ font:400 23px/1.2 var(--serif); }
.ev-look-hd .type{ font:600 8.5px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); }
.ev-look .prose{ font-size:15.5px; }

.term{ color:var(--sodium); border-bottom:1px dotted var(--sodium-dim); }

/* A translation of a document written in Turkish: what the page says, for
   a reader who cannot read the page. Set smaller and quieter than the file
   around it, in brackets it does not have to carry in the text itself, so
   it reads as something added to the document rather than as part of it —
   and so the eye can pass over it once it has done its work. */
.gloss{ font-size:.86em; font-style:italic; color:var(--bone-faint); letter-spacing:.01em; }
.gloss::before{ content:'('; }
.gloss::after{ content:')'; }


/* ---------------- ART STYLE ---------------- */
/* Each choice is shown the way the game would file it: the scene across the
   card, and the person clipped to the corner of it like a print paperclipped
   to a report — not a portrait pasted flat over the middle of the room. */
.art-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:20px; align-items:stretch; }
.art-card{ text-align:left; background:var(--ink-700); border:1px solid var(--line); color:var(--bone);
  padding:0; overflow:hidden; cursor:pointer; font-family:var(--serif);
  display:flex; flex-direction:column;
  transition:border-color .16s, transform .16s, box-shadow .16s; }
.art-card:hover{ border-color:var(--sodium); transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.4); }
.art-card.on{ border-color:var(--blood); background:rgba(192,74,63,.055); box-shadow:0 0 0 1px rgba(192,74,63,.35) inset; }

.art-sample{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-800); }
.art-sample .art-place{ position:absolute; inset:0; }
.art-sample .art-place svg, .art-sample .art-place img{ width:100%; height:100%; object-fit:cover; display:block; }
/* the scene darkens toward the corner the print sits in, so the two read as
   one photograph on a desk rather than two pictures fighting */
.art-sample::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 45%, rgba(7,9,12,.62)); }
.art-sample .art-face{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:34%; max-width:104px; aspect-ratio:4/5; overflow:hidden;
  transform:rotate(-2.4deg);
  border:4px solid #ded5c2; border-bottom-width:13px;   /* a print, white edge and all */
  box-shadow:0 10px 22px rgba(0,0,0,.62);
}
.art-sample .art-face svg, .art-sample .art-face img{
  width:100%; height:100%; max-width:none; display:block;
  object-fit:cover; object-position:50% 22%;
}
/* the drawn portrait is a tall SVG: scale it into the same window */
.art-sample .art-face svg{ height:auto; margin-top:-14%; }

.art-body{ padding:15px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.art-body b{ display:block; font:400 20px/1.25 var(--serif); }
.art-body p{ margin:0; font:400 13px/1.55 var(--serif); color:var(--bone-dim); }

/* photographs stand in wherever an illustration would have gone */
img.real-art{ width:100%; height:100%; object-fit:cover; display:block; }
.scene-hold img.real-art{ position:absolute; inset:0; }
/* the fade only applies where something adds .ready — the field. Anywhere else
   that reuses .scene-hold (the field manual's demonstrations) has no such code
   and must not be left with an invisible picture. */
.scene-hold.photo img.real-art{ opacity:0; transition:opacity .3s ease-out; }
.scene-hold.photo img.real-art.ready{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .scene-hold.photo img.real-art{ transition:none; } }
img.real-portrait{ display:block; height:auto; max-width:100%; }
/* the drawn portrait puts the face high in a tall SVG, so the round crops pull
   it up by 44%. A photograph is framed differently — head and shoulders, eyes
   about a third down — so it fills the circle and is anchored on the eyes
   instead, otherwise the crop lands on a nose and a chin. */
.avatar img.real-portrait, .acc-opt .pface img.real-portrait{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 22%; }
/* the interview header is a fixed band; a photograph fills it and keeps the
   eyes in it rather than overflowing and losing the chin to overflow:hidden */
.iv-side img.real-portrait{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
/* The column is far narrower than the photograph, so cover crops hard
   from the sides and the vertical anchor decides what survives. Faces
   sit high in these frames; a third of the way down keeps the eyes in
   the card whether the sitter is upright or on a mortuary table. */
.ppl-card .pic img.real-portrait{ object-position:50% 32%; }

/* ---------------- misc ---------------- */
.empty{ text-align:center; padding:70px 20px; color:var(--bone-faint); font:400 16px/1.6 var(--serif); }
.section-title{ display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.section-title h2{ font:400 26px/1.2 var(--serif); }
.section-title .rule-line{ flex:1; height:1px; background:var(--line); }
.avatar{ display:inline-block; overflow:hidden; border-radius:50%; position:relative; }
.avatar svg{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); max-width:none; }
.notice{ border-left:3px solid var(--sodium); background:rgba(230,178,75,.07); padding:12px 15px; margin:16px 0;
  font:400 14px/1.55 var(--serif); color:#dcd6c8; }
.notice.bad{ border-left-color:var(--blood); background:rgba(192,74,63,.08); }

/* ---------------- ACCOUNT ---------------- */
.acct-label{ display:block; margin:14px 0 0; }
.acct-label > span{ display:block; font:600 9px/1.6 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-faint); margin-bottom:5px; }
.acct-label .field{ width:100%; background:var(--ink-800); border:1px solid var(--line);
  color:var(--bone); padding:11px 13px; font:400 15px/1.3 var(--serif); border-radius:2px; }
.acct-label .field:focus{ outline:none; border-color:var(--sodium); }
/* the eye sits inside the field's box, and the field keeps room for it */
.field-wrap{ position:relative; display:block; }
.field-wrap .field{ padding-right:46px; }
.field-eye{ position:absolute; right:1px; top:1px; bottom:1px; width:44px; display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer; color:var(--bone-faint); }
.field-eye svg{ width:20px; height:20px; }
.field-eye:hover{ color:var(--bone); }
.field-eye.on{ color:var(--sodium); }
/* struck through while the password is face-up */
.field-eye.on::after{ content:''; position:absolute; left:11px; right:11px; top:50%; height:1.5px;
  background:currentColor; transform:rotate(-32deg); }
.acct-tabs{ display:flex; gap:0; margin:16px 0 4px; border-bottom:1px solid var(--line); }
.acct-tab{ flex:1 1 0; background:none; border:0; border-bottom:2px solid transparent; color:var(--bone-dim);
  padding:9px 8px; cursor:pointer; font:600 10px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.acct-tab.on{ color:var(--bone); border-bottom-color:var(--blood); }
.acct-note{ margin:9px 0 0; font-size:13px; line-height:1.5; }
.acct-note a{ color:var(--sodium); }
/* the consent tick: a real target, never pre-ticked, with its terms in
   the same breath as the question */
.acct-tick{ display:flex; gap:11px; align-items:flex-start; margin:16px 0 4px; cursor:pointer;
  padding:11px 13px; border:1px solid var(--ink-400); background:rgba(255,255,255,.014); }
.acct-tick:hover{ border-color:var(--sodium); }
.acct-tick .tick{ flex:0 0 17px; width:17px; height:17px; margin:2px 0 0; accent-color:var(--blood);
  cursor:pointer; }
.acct-tick span{ display:block; min-width:0; }
.acct-tick b{ display:block; font:400 14.5px/1.35 var(--serif); color:var(--bone); }
.acct-tick small{ display:block; margin-top:3px; font:400 12.2px/1.45 var(--serif); color:var(--bone-faint); }
.acct-head{ font:400 21px/1.25 var(--serif); margin:4px 0 6px; }
/* a plain word that behaves like a link, not another heavy button */
.linkish{ background:none; border:0; padding:6px 0 0; cursor:pointer; font:400 13.5px/1.5 var(--serif);
  color:var(--bone-faint); text-decoration:underline; text-underline-offset:3px; }
.linkish:hover{ color:var(--sodium); }
.acct-forgot{ display:block; }
.acct-or{ display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--bone-faint); }
.acct-or::before, .acct-or::after{ content:''; flex:1; height:1px; background:var(--line); }
.acct-or span{ font:600 9px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
/* a build newer than this tab: quiet, at the foot, dismissed by reloading */
.stale-bar{ position:fixed; left:50%; bottom:calc(16px + var(--safe-b, 0px)); transform:translateX(-50%);
  z-index:80; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 24px);
  padding:11px 13px 11px 16px; border:1px solid var(--sodium); background:rgba(20,17,13,.96);
  box-shadow:0 16px 40px -18px #000; }
.stale-bar span{ font:400 13.5px/1.4 var(--serif); color:var(--bone); }
.btn.small{ padding:7px 12px; font-size:9.5px; }

/* legal pages: long prose in a modal, scrolled on its own */
.legal{ max-height:min(58vh,520px); overflow-y:auto; padding-right:8px; margin-top:14px; }
.legal h3{ font:400 19px/1.3 var(--serif); margin:22px 0 8px; color:var(--bone); }
.legal p{ margin:0 0 12px; font:400 14.5px/1.65 var(--serif); color:var(--bone-dim); }
.legal strong{ color:var(--bone); font-weight:400; }
.legal ul{ margin:0 0 12px 18px; }
.legal li{ margin-bottom:6px; font:400 14.5px/1.6 var(--serif); color:var(--bone-dim); }
.legal table{ width:100%; border-collapse:collapse; margin:6px 0 14px; }
.legal th, .legal td{ text-align:left; padding:7px 10px 7px 0; border-bottom:1px solid var(--ink-500);
  font:400 13.5px/1.5 var(--serif); color:var(--bone-dim); vertical-align:top; }
.legal th{ font:600 8.5px/1.6 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); }
.legal-line{ margin-top:12px; }
.legal-line .linkish{ display:inline; padding:0; font-size:inherit; }
.btn.danger{ border-color:var(--blood-dim); color:var(--blood-hot); }
.btn.danger:hover{ border-color:var(--blood-hot); background:rgba(192,74,63,.10); }
.acct-warn{ margin:18px 0 4px; padding:13px 15px 15px; border:1px solid var(--blood-dim);
  background:rgba(192,74,63,.10); }
.acct-warn b{ display:block; font:400 15.5px/1.3 var(--serif); color:#efe7d6; }
.acct-warn .acct-note{ margin-top:5px; }
.acct-block{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--ink-400); }
/* the OR rule already draws a line; a second one under it is two rules and
   a gap of nothing between them */
.acct-or + .acct-block{ margin-top:0; padding-top:0; border-top:0; }
.btn.wide{ display:block; width:100%; text-align:center; margin-top:14px; }
/* the way out of the settings sheet: set apart from the switches above it,
   so it is never the thing a thumb finds by accident */
.acct-signout{ margin-top:22px; }
.acct-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.acct-actions .btn{ flex:1 1 auto; }
/* One way in. Three of these stack without becoming a price table:
   what it is on the left, what it costs and the way to it on the right. */
.offer{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:12px; padding:13px 15px 14px; border:1px solid var(--line); background:var(--ink-800); }
.offer:hover{ border-color:var(--sodium-dim); }
.offer-body{ flex:1 1 220px; min-width:0; }
.offer-body > b{ display:block; font:400 17px/1.3 var(--serif); color:var(--bone); }
.offer-line{ display:block; margin-top:4px; font:400 13px/1.45 var(--serif); color:var(--bone-dim); }
.offer-buy{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.offer-price{ font:600 12px/1 var(--mono); letter-spacing:.06em; color:var(--sodium); white-space:nowrap; }
.gate-form{ margin-top:6px; }
.gate-form .acct-tabs{ margin-top:6px; }
.gate-form .acct-block{ border-top-color:var(--ink-500); }
.pick-card.shut .pick-art{ filter:grayscale(1) brightness(.7); }
.case-whoami{ max-width:min(280px,42vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------------- SERVICE RECORD ---------------- */
.prof-who{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:1px solid var(--line); background:var(--ink-700); padding:15px 17px; margin:18px 0 20px; }
.prof-who b{ display:block; font:400 17px/1.3 var(--serif); }
.prof-who .faint{ display:block; margin-top:3px; font-size:13px; }

.stat-row{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); margin-bottom:20px; }
.stat-tile{ border:1px solid var(--line); background:var(--ink-800); padding:14px 15px; }
.stat-tile b{ display:block; font:400 27px/1 var(--serif); color:var(--sodium); }
.stat-tile span{ display:block; margin-top:6px; font:600 8.5px/1.5 var(--sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-faint); }

.prof-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.prof-empty{ padding:30px 0; text-align:center; }

.run-list{ display:flex; flex-direction:column; gap:12px; }
.run-row{ border:1px solid var(--line); background:var(--ink-700); padding:14px 16px 15px;
  border-left:3px solid var(--ink-400); }
.run-row.tier-perfect{ border-left-color:var(--sodium); }
.run-row.tier-good{ border-left-color:var(--green); }
.run-row.tier-poor{ border-left-color:var(--bone-faint); }
.run-row.tier-wrong{ border-left-color:var(--blood); }
.run-head{ display:flex; align-items:center; gap:14px; }
.run-name{ flex:1; min-width:0; }
.run-name .eyebrow{ display:block; margin-bottom:2px; }
.run-name b{ font:400 19px/1.25 var(--serif); }
.run-score{ text-align:right; flex:0 0 auto; }
.run-score b{ font:400 25px/1 var(--serif); color:var(--sodium); }
.run-score span{ display:block; margin-top:3px; font:600 8px/1 var(--sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-faint); }
.stamp.small{ position:static; flex:0 0 auto; font-size:8.5px; padding:5px 9px; }
.run-facts{ display:grid; gap:9px 18px; grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  margin-top:13px; padding-top:12px; border-top:1px dashed var(--ink-400); }
.run-fact span{ display:block; font:600 8px/1.5 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-faint); }
.run-fact b{ font:400 14.5px/1.35 var(--serif); color:var(--bone); }