/* Neural Noir — film-noir: deep ink, amber lamplight, typewriter accents. */
:root {
  --bg:#0b0c10; --panel:#15171f; --ink:#e8e4d8; --muted:#8b8779;
  --amber:#e0a64e; --amber-dk:#b9812f; --blood:#9d3b3b; --line:#272a36;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Iowan Old Style",Georgia,serif; line-height:1.6; position:relative; min-height:100vh; }
.vignette { position:fixed; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.65) 100%); z-index:0; }
.topbar, main, .site-footer { position:relative; z-index:1; }
.topbar { display:flex; justify-content:space-between; align-items:baseline; padding:18px clamp(18px,5vw,56px); border-bottom:1px solid var(--line); }
.brand { font-family:"Courier New",monospace; font-weight:700; letter-spacing:3px; color:var(--amber); font-size:20px; }
.tagline { color:var(--muted); font-style:italic; font-size:14px; }

.btn { font-family:"Courier New",monospace; border:1px solid var(--line); background:#1d2029; color:var(--ink); border-radius:6px; padding:10px 16px; font-weight:700; cursor:pointer; font-size:13px; letter-spacing:.5px; }
.btn:hover { border-color:var(--amber-dk); }
.btn.primary { background:linear-gradient(135deg,var(--amber),var(--amber-dk)); color:#1a1206; border-color:transparent; }
.btn.tiny { padding:6px 10px; font-size:12px; }
.hidden { display:none !important; }
.muted { color:var(--muted); }

/* setup */
.setup { max-width:760px; margin:0 auto; padding:clamp(40px,9vw,90px) clamp(18px,5vw,56px); text-align:center; }
.setup h1 { font-size:clamp(34px,6vw,56px); margin:0 0 18px; line-height:1.1; }
.lead { color:var(--muted); font-size:18px; max-width:60ch; margin:0 auto 28px; }
.newcase { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.newcase input { font-family:"Courier New",monospace; padding:11px 14px; border:1px solid var(--line); border-radius:6px; background:#0f1117; color:var(--ink); }
.newcase input:first-child { flex:1; min-width:240px; }
.fineprint { color:var(--muted); font-size:12px; margin-top:18px; font-family:"Courier New",monospace; }

/* game */
.game { max-width:1150px; margin:0 auto; padding:24px clamp(18px,4vw,48px); display:grid; gap:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
.brief { position:relative; }
.brief h2 { margin:0 0 6px; color:var(--amber); font-family:"Courier New",monospace; letter-spacing:1px; font-size:18px; }
.brief #restartBtn { position:absolute; top:16px; right:16px; }
.board { display:grid; gap:18px; }
@media (min-width:900px){ .board{ grid-template-columns:1fr 1.1fr 1fr; align-items:start; } }
.col h3 { font-family:"Courier New",monospace; letter-spacing:1px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:6px; font-size:14px; }

.suspects { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.suspect { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:8px; padding:10px 12px; cursor:pointer; display:flex; flex-direction:column; }
.suspect small { color:var(--muted); font-style:italic; }
.suspect:hover { border-left-color:var(--amber-dk); }
.suspect.on { border-left-color:var(--amber); background:#1c1a14; }

.interrogation { min-height:120px; background:#0f1117; border:1px solid var(--line); border-radius:8px; padding:12px; }
.reply { margin:0 0 10px; padding-bottom:10px; border-bottom:1px dashed var(--line); }
.topics { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

.clues { list-style:none; padding:0; margin:0 0 14px; display:grid; gap:8px; }
.clue { background:#0f1117; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; }
.clue::before { content:"🔎 "; }
#notes { width:100%; min-height:90px; background:#0f1117; border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:10px; font-family:"Courier New",monospace; }

.accuse-row { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.accuse-row label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px; font-family:"Courier New",monospace; }
.accuse-row select { background:#0f1117; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:9px; min-width:160px; }
.verdict { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:10px; text-align:center; background:#0f1117; }
.verdict.win { border-color:var(--amber); box-shadow:0 0 30px rgba(224,166,78,.25); }
.verdict .score { font-size:44px; font-weight:800; color:var(--amber); font-family:"Courier New",monospace; }
.verdict .score span { font-size:18px; color:var(--muted); }
.verdict .rank { font-style:italic; margin-bottom:10px; }
.breakdown { list-style:none; display:flex; gap:14px; justify-content:center; padding:0; margin:8px 0; font-family:"Courier New",monospace; font-size:13px; }
.breakdown .ok { color:#79b07a; } .breakdown .no { color:var(--blood); }
.truth { color:var(--muted); font-size:14px; }

.site-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; max-width:1150px; margin:30px auto 0; padding:24px clamp(18px,5vw,56px); border-top:1px solid var(--line); color:var(--muted); font-size:13px; font-family:"Courier New",monospace; }