:root{
  --bg:#120D0C;
  --panel:#1B1311;
  --panel-edge:#2A1E1A;
  --bone:#E9E3D6;
  --amber:#CDA24C;
  --blood:#C0392B;
  --teal:#46A78C;
  --muted:#7A685F;
  --redact:#070504;
  --display:'Oswald','Arial Narrow',sans-serif;
  --type:'Special Elite','Courier New',monospace;
  --mono:'Courier New',ui-monospace,monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; }
body{
  background:radial-gradient(120% 90% at 50% -10%, #1c1311 0%, var(--bg) 60%);
  color:var(--bone);
  font-family:var(--type);
  min-height:100vh;
}

.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply; opacity:.5;
}

#app{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto;
  padding:32px 18px 56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh;
}

.center{ text-align:center; }
.w-full{ width:100%; }

.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:4px; color:var(--amber); text-transform:uppercase; }
.eyebrow.teal{ color:var(--teal); }
.eyebrow.blood{ color:var(--blood); }

.title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,9vw,58px); letter-spacing:1px; line-height:1.02; margin:10px 0 18px;
}
.title .red{ color:var(--blood); }
.title.blood{ color:var(--blood); }

.intro,.body{ font-size:16px; line-height:1.7; opacity:.92; }
.intro{ margin-bottom:28px; }

.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:3px; font-weight:700;
  color:var(--bg); background:var(--amber); border:none;
  padding:14px 26px; border-radius:2px; cursor:pointer;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--bone); outline-offset:2px; }

.foot{ margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--muted); }

.topbar{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; flex-wrap:wrap; gap:12px;
}

/* vitals */
.vitals{ display:flex; align-items:center; gap:10px; }
.vitals .label{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); }
.vitals .pips{ display:flex; gap:4px; }
.pip{ width:26px; height:8px; border-radius:1px; border:1px solid var(--teal); background:var(--teal); box-shadow:0 0 8px rgba(70,167,154,.4); transition:all .35s ease; }
.pip.dead{ background:var(--redact); border-color:var(--blood); box-shadow:none; opacity:.6; }
.vitals .flat{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--blood); }

/* scene */
.file-card{
  background:var(--panel); border:1px solid var(--panel-edge); border-left:3px solid var(--amber);
  padding:18px 20px; border-radius:3px; margin-bottom:22px; cursor:text;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.card-label{ font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--muted); margin-bottom:10px; }
.scene{ font-size:17px; line-height:1.75; margin:0; min-height:110px; }
.caret{ color:var(--amber); animation:blink 1s steps(1) infinite; }

/* killer clue */
.clue-box{
  border:1px dashed var(--amber); background:rgba(205,162,76,.07);
  color:var(--amber); font-style:italic; font-size:14.5px; line-height:1.6;
  padding:11px 14px; border-radius:3px; margin:0 0 18px;
}
.clue-box .clue-tag{ font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:2px; display:block; margin-bottom:5px; opacity:.8; }

/* choices */
.gate{ transition:opacity .4s; }
.choices-label{ font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--muted); margin-bottom:10px; }
.choices{ display:flex; flex-direction:column; gap:10px; }

.choice{
  width:100%; display:flex; align-items:center; gap:14px;
  background:#170F0D; border:1px solid var(--panel-edge); color:var(--bone);
  font-family:var(--type); font-size:15.5px; padding:13px 16px; border-radius:3px;
  cursor:pointer; text-align:left;
  transition:border-color .2s, background .2s, transform .1s;
}
.choice:not(:disabled):hover{ border-color:var(--amber); background:#1d1310; transform:translateX(2px); }
.choice:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.choice .tag{
  font-family:var(--mono); font-size:12px; color:var(--amber);
  border:1px solid rgba(205,162,76,.35); border-radius:2px;
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.choice .txt{ position:relative; flex:1; }

.choice.right{ border-color:var(--teal); box-shadow:0 0 0 1px rgba(70,167,154,.35), 0 0 22px rgba(70,167,154,.2); background:#10201b; }
.choice.redacted{ cursor:default; color:var(--muted); border-color:#2a1411; }
.choice.examined{ cursor:default; color:var(--muted); border-color:rgba(205,162,76,.27); background:#15110d; opacity:.85; }

.redact-bar{
  position:absolute; left:-2px; right:-2px; top:50%; height:1.25em;
  transform:translateY(-50%); background:var(--redact); border-radius:1px;
  transform-origin:left center; animation:redact .28s ease forwards;
}
.examined-pill{
  margin-left:8px; font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--amber);
  border:1px solid rgba(205,162,76,.27); padding:1px 5px; border-radius:2px; vertical-align:middle;
}

.feedback{ font-family:var(--mono); font-size:12.5px; line-height:1.5; padding:7px 4px 4px 38px; letter-spacing:.3px; }
.feedback.right{ color:var(--teal); }
.feedback.explore{ color:var(--amber); }
.feedback.wrong{ color:var(--blood); }

/* killer clue button row */
.clue-row{ margin-top:18px; display:flex; justify-content:center; }
.clue-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:2px;
  background:transparent; color:var(--amber); border:1px solid rgba(205,162,76,.5);
  padding:9px 16px; border-radius:2px; cursor:pointer; transition:all .2s;
}
.clue-btn:not(:disabled):hover{ background:rgba(205,162,76,.1); }
.clue-btn:disabled{ color:var(--muted); border-color:#2a1411; cursor:default; }

/* loading dots + pulse */
.pulse{ animation:pulse 1.4s ease-in-out infinite; }
.dots::after{ content:''; animation:dots 1.4s steps(4,end) infinite; }

@keyframes blink{ 50%{ opacity:0; } }
@keyframes redact{ from{ transform:translateY(-50%) scaleX(0);} to{ transform:translateY(-50%) scaleX(1);} }
@keyframes pulse{ 50%{ opacity:.5; } }
@keyframes dots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }

@media (prefers-reduced-motion: reduce){
  .pulse,.caret,.dots::after,.choice,.redact-bar{ animation:none !important; transition:none !important; }
  .redact-bar{ transform:translateY(-50%); }
}