@font-face { font-family:"Inkhand"; src:url("fonts/Caveat.ttf") format("truetype"); font-display:swap; }
:root { --ink:#0b0907; --bone:#e8dcc4; --umber:#5a4632; --blood:#8e1b17; --brass:#b08a4a; --mute:#b9ab90; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--ink); color:var(--bone); font:17px/1.5 Georgia,"Times New Roman",serif; overflow:hidden; }
button { font:700 14px Georgia,serif; letter-spacing:1px; text-transform:uppercase; color:var(--bone); cursor:pointer; padding:10px 14px;
  background:linear-gradient(#2b2017,#16100b); border:2px solid var(--brass); box-shadow:inset 0 0 0 2px #000,0 3px 0 #000; }
button:hover { background:linear-gradient(#3a2b1e,#1d150e); color:#fff; } button:active { transform:translateY(2px); }
button:disabled { opacity:.45; cursor:default; }
button.big { font-size:18px; padding:14px 26px; }
button.sel { border-color:var(--blood); color:#fff; background:linear-gradient(#4a1512,#230a08); }
.hidden { display:none !important; }

#bg { position:fixed; inset:0; background:center/cover no-repeat; filter:brightness(.32) saturate(.7); transition:background-image .6s; animation:lamp 6s infinite; }
#vig { position:fixed; inset:0; background:radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,.92) 85%); pointer-events:none; }
#rain { position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:repeating-linear-gradient(105deg,transparent 0 18px,rgba(220,220,255,.5) 18px 19px);
  background-size:200px 200px; animation:rain .5s linear infinite; }
#flash { position:fixed; inset:0; background:#cfd8ff; opacity:0; pointer-events:none; z-index:50; }
@keyframes lamp { 0%,100%{filter:brightness(.32) saturate(.7)} 48%{filter:brightness(.37)} 50%{filter:brightness(.25)} 52%{filter:brightness(.35)} }
@keyframes rain { to { background-position:-60px 200px } }

.screen { position:fixed; inset:0; display:none; z-index:2; } .screen.on { display:block; }
.narr { color:var(--mute); font-style:italic; }

/* title */
#title.on { display:flex; align-items:center; justify-content:center; }
.title-card { text-align:center; max-width:760px; padding:20px; }
.series { color:var(--brass); letter-spacing:6px; font-variant:small-caps; font-size:20px; }
h1 { font:700 64px/1.05 Georgia,serif; margin:14px 0; letter-spacing:2px; text-shadow:3px 3px 0 #000,0 0 26px rgba(142,27,23,.6); }
.tagline { font-size:20px; color:var(--mute); font-style:italic; }
.row { display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap; } .row.small button { font-size:12px; padding:6px 10px; }
.fine { font-size:12px; color:#7d6f58; margin-top:26px; }

/* intro */
#intro.on { display:flex; align-items:center; justify-content:center; }
.scroll { max-width:720px; padding:30px; background:rgba(15,10,7,.85); border:2px solid #2a1f15; outline:1px solid var(--umber); font-size:20px; text-align:center; }

/* top bar */
#top { display:flex; justify-content:space-between; gap:10px; padding:12px 18px; background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.4)); flex-wrap:wrap; }
#places, #tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#ep-tag { color:var(--brass); font-variant:small-caps; letter-spacing:2px; margin-left:8px; }

/* place view */
#place-view { max-width:980px; margin:4vh auto; padding:22px 26px; background:rgba(15,10,7,.82); border:2px solid #2a1f15; outline:1px solid var(--umber); }
#place-intro { font-size:19px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:14px; }
h3 { font-variant:small-caps; letter-spacing:2px; color:var(--brass); margin:6px 0 10px; font-weight:400; }
.person { display:flex; gap:12px; align-items:center; margin-bottom:10px; cursor:pointer; padding:6px; border:1px solid transparent; }
.person:hover { border-color:var(--brass); background:rgba(176,138,74,.08); }
.person img { width:64px; height:80px; object-fit:cover; border:2px solid #1a140e; outline:1px solid var(--brass); filter:grayscale(.3); }
.person .t { color:var(--mute); font-size:14px; display:block; } .person .sins { color:var(--blood); font-size:12px; font-variant:small-caps; letter-spacing:1px; }
#spots button { display:block; width:100%; margin-bottom:8px; text-align:left; text-transform:none; font-size:15px; }
#exam-out { margin-top:14px; min-height:28px; }

/* talk view */
#talk-view { position:fixed; top:62px; bottom:0; left:0; right:0; display:grid; grid-template-columns:1fr 1fr; }
#left { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
#frame { position:relative; height:72vh; aspect-ratio:1085/1400; border:10px solid #1a140e; outline:2px solid var(--brass); background:#000; overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.9); }
#frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s; } #frame img.out { opacity:0; }
#frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 110px rgba(0,0,0,.85); pointer-events:none; }
#redwash { position:absolute; inset:0; background:var(--blood); mix-blend-mode:multiply; opacity:0; transition:opacity .4s; z-index:3; pointer-events:none; }
#nameplate { text-align:center; } #nameplate b { display:block; font-size:22px; letter-spacing:1px; } #nameplate span { color:var(--brass); font-style:italic; }
.shake { animation:shake .45s; }
@keyframes shake { 10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)} 30%,50%,70%{transform:translate(-7px,2px) rotate(-.5deg)} 40%,60%{transform:translate(7px,-1px) rotate(.5deg)} }
#right { display:flex; flex-direction:column; gap:10px; padding:2vh 3vw 3vh 1vw; min-height:0; }
.bar-label { display:flex; justify-content:space-between; font-variant:small-caps; letter-spacing:2px; color:var(--brass); }
.bar { height:16px; border:2px solid var(--brass); background:#120d09; position:relative; }
.bar span { position:absolute; inset:0 auto 0 0; width:100%; background:linear-gradient(90deg,#5d0f0c,var(--blood)); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.bar i { position:absolute; top:0; bottom:0; width:2px; background:rgba(176,138,74,.6); }
#log { flex:1; overflow-y:auto; padding:14px 16px; background:rgba(15,10,7,.86); border:2px solid #2a1f15; outline:1px solid var(--umber); min-height:0; }
.q { color:var(--brass); margin-top:10px; } .q b { font-variant:small-caps; font-weight:400; }
.a { margin-top:3px; } .a b { font-variant:small-caps; font-weight:400; color:#c9a; }
.clue-get { margin:8px 0; padding:8px 10px; border-left:4px solid var(--blood); background:rgba(142,27,23,.12); font-size:15px; }
.clue-get b { display:block; color:#e6b; font-variant:small-caps; letter-spacing:1px; }
.typing::after { content:"…"; animation:blink 1s infinite; } @keyframes blink { 50% { opacity:.2 } }
#ask-form { display:flex; gap:8px; } #q { flex:1; font:16px Georgia,serif; padding:10px; color:var(--bone); background:#120d09; border:2px solid var(--umber); }
#q:focus { outline:none; border-color:var(--brass); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#evidence-pick { max-height:22vh; overflow-y:auto; display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:rgba(0,0,0,.6); border:1px solid var(--umber); }
#evidence-pick button { text-transform:none; font-size:13px; padding:6px 9px; }

/* overlays */
.overlay { position:fixed; inset:0; display:none; z-index:20; background:rgba(0,0,0,.75); align-items:center; justify-content:center; }
.overlay.on { display:flex; }
.paper { width:min(860px,94vw); max-height:88vh; overflow-y:auto; padding:26px 30px; color:#2a1d12; background:#e8dcc4;
  background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.4),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(90,70,50,.25),transparent 60%);
  border:2px solid #5a4632; box-shadow:0 0 0 6px #1a140e,0 20px 60px #000; }
.paper.dark { color:var(--bone); background:#16100b; border-color:var(--brass); }
.paper h2 { margin:0 0 12px; font-size:30px; letter-spacing:2px; }
.paper button { color:var(--bone); }
.card { display:inline-block; vertical-align:top; width:calc(50% - 8px); margin:0 8px 10px 0; padding:10px 12px; border:1px solid #8a7356; background:rgba(255,255,255,.35); font-size:15px; }
.card b { display:block; font-variant:small-caps; letter-spacing:1px; color:#5a1210; }
.card.pick { cursor:pointer; } .card.pick.sel { background:rgba(142,27,23,.25); border-color:#8e1b17; }
#acc-suspects { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
#acc-out { margin-top:12px; color:#3a2a1a; }
.paper.dark .narr { color:var(--mute); }

#banner { position:fixed; left:0; right:0; top:40%; z-index:40; text-align:center; pointer-events:none; opacity:0;
  font:700 58px Georgia,serif; letter-spacing:6px; color:var(--blood); text-shadow:3px 3px 0 #000,0 0 30px #000;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.88) 20%,rgba(0,0,0,.88) 80%,transparent); padding:16px 0; }
#banner.show { animation:banner 2.8s forwards; }
@keyframes banner { 0%{opacity:0;transform:scale(1.4)} 12%{opacity:1;transform:scale(1)} 80%{opacity:1} 100%{opacity:0} }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:45; padding:10px 18px; background:#1a0d0b; border:2px solid var(--blood);
  opacity:0; transition:opacity .4s; pointer-events:none; }
#toast.on { opacity:1; }

@media (max-width:820px) {
  h1 { font-size:40px; } .cols { grid-template-columns:1fr; } .card { width:100%; }
  #talk-view { grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow-y:auto; }
  #frame { height:34vh; } #nameplate b { font-size:17px; }
}

#q.confront { border-color:var(--blood); box-shadow:0 0 0 1px var(--blood), 0 0 14px rgba(142,27,23,.5); }

/* notebook tabs + handwriting */
.tabs { display:flex; gap:0; margin:-4px 0 14px; border-bottom:2px solid #5a4632; }
.paper .tab { background:transparent; color:#5a4632; border:2px solid #5a4632; border-bottom:none; box-shadow:none; margin-right:6px; padding:8px 16px; }
.paper .tab.sel { background:#5a4632; color:#e8dcc4; }
.hand { font-family:"Inkhand", "Segoe Print", cursive; font-size:25px; line-height:34px; color:#1f2a44;
  background-image:repeating-linear-gradient(transparent 0 33px, rgba(70,90,140,.25) 33px 34px); padding:2px 8px 10px 46px; position:relative; }
.hand::before { content:""; position:absolute; left:34px; top:0; bottom:0; width:2px; background:rgba(142,27,23,.35); }
.hand .sec { color:#5a1210; text-decoration:underline; margin-top:6px; }
.hand .n { display:block; } .hand .n i { color:#7a2a20; font-style:normal; }
.hand .n.new { animation:inkin 1.2s ease-out; } @keyframes inkin { from { opacity:0; clip-path:inset(0 100% 0 0) } to { opacity:1; clip-path:inset(0 0 0 0) } }
.hand .ev { color:#5a1210; }
/* accuse grid */
#acc-suspects { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:12px 0 6px; }
.acc-p { cursor:pointer; text-align:center; padding:6px; border:2px solid transparent; transition:transform .15s; }
.acc-p img { width:100%; aspect-ratio:1085/1400; object-fit:cover; border:3px solid #1a140e; outline:1px solid #8a7356; filter:grayscale(.35) sepia(.2); }
.acc-p span { display:block; font-weight:700; margin-top:6px; font-size:15px; } .acc-p small { color:#6b5a44; font-style:italic; }
.acc-p:hover { transform:translateY(-3px); } .acc-p:hover img { filter:none; }
.acc-p.sel { border-color:#8e1b17; background:rgba(142,27,23,.15); } .acc-p.sel img { filter:none; outline:3px solid #8e1b17; }
.acc-h { color:#5a4632; margin-top:10px; }
@media (max-width:820px) { #acc-suspects { grid-template-columns:repeat(3,1fr); } .hand { font-size:21px; } }
#nb-btn.pulse { animation:pulse 1.5s; } @keyframes pulse { 30% { box-shadow:0 0 0 3px var(--brass),0 0 18px var(--brass); } }