/* Specterville: same dark, warm look as the Book One experience (near-black brown, cream text, gold labels). */
:root{--bg:#0b0908;--panel:#17110d;--fg:#f1e8dc;--muted:#a99a8a;--gold:#d4a574;--gold-ink:#1a110a;--line:#4a3a2c;--blue:#9fd0ff;--red:#d98a7a;--body:Georgia,'Times New Roman',serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1.15rem;line-height:1.65;display:flex;flex-direction:column;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}
button,a{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.bar{flex:none;background:linear-gradient(#000d,#0b0908);border-bottom:1px solid #2a2018;padding:.55rem 1rem;z-index:5}
.bar-in{max-width:60rem;margin:0 auto;display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap}
.mark{font-style:italic;color:var(--gold);font-size:1.1rem;letter-spacing:.06em;margin-right:auto}
.clock{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tools{display:flex;gap:.4rem;flex-wrap:wrap}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:.35rem .8rem;font-size:.78rem;letter-spacing:.06em;min-height:2.3rem}
.tool:hover,.tool.on{border-color:var(--gold)}.tool.on{color:var(--gold)}
.page{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1.4rem 1.25rem 4rem}
.col{max-width:40rem;margin:0 auto;display:flex;flex-direction:column;gap:1.2rem}.col.wide{max-width:60rem}
.fade{animation:rise .45s ease both}@keyframes rise{from{opacity:.2}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.fade,.mist,.pin.spooky i::after{animation:none!important}}
.eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;justify-content:space-between}
.pov{padding:.1rem .7rem;border:1px solid var(--gold)}
h1,h2,h3{font-weight:normal}
.scene-title{font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.15;font-style:italic}
.blurb{color:#dcd0c0}
.sub{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;justify-content:space-between;margin-top:.4rem}
.sub span{color:var(--muted)}

/* title / doors */
.title{text-align:center;gap:1.4rem;padding-top:1rem}.title .eyebrow{justify-content:center}
.logo{font-size:clamp(2.6rem,11vw,4.6rem);font-style:italic;letter-spacing:.06em;color:var(--gold);text-shadow:0 0 28px #d4a57440}
.tag{color:var(--muted)}
.doors{display:grid;gap:.9rem;text-align:left}
.door{border:1px solid var(--line);background:var(--panel);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem}
.door.open{border-color:var(--gold)}.door.sealed{opacity:.55;border-style:dashed}
.door .meta{font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.door h2{font-size:1.35rem;font-style:italic}.door .d{color:var(--muted);font-size:1rem;line-height:1.5}
.cta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}.title .cta-row{justify-content:center}
.cta{display:inline-block;background:var(--gold);color:var(--gold-ink);border:1px solid var(--gold);padding:.65rem 1.1rem;font-size:.9rem;letter-spacing:.06em;text-decoration:none;min-height:2.8rem}
.cta:hover{filter:brightness(1.1)}.cta.ghost{background:transparent;color:var(--gold)}

/* map */
.map{position:relative;aspect-ratio:16/10;width:100%;border:1px solid var(--gold);background:#0b0908;overflow:hidden}
.map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mist{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,#d4a57412,transparent 55%),radial-gradient(ellipse at 80% 20%,#9fd0ff0e,transparent 50%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate(2%,-2%) scale(1.04)}}
.pin{position:absolute;transform:translate(-50%,-50%);background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:2.8rem;min-height:2.8rem;justify-content:center}
.pin i{display:block;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--panel);border:2px solid var(--gold);position:relative;box-shadow:0 0 10px #d4a57455}
.pin.seen i{background:var(--gold)}
.pin.here i{box-shadow:0 0 0 4px #d4a57433,0 0 16px #d4a574}
.pin.spooky i::after{content:"";position:absolute;left:50%;top:-1.1rem;width:.7rem;height:.9rem;border-radius:.7rem .7rem .15rem .15rem;background:#9fd0ffaa;transform:translateX(-50%);animation:float 3s ease-in-out infinite;filter:blur(.3px)}
@keyframes float{50%{transform:translate(-50%,-4px);opacity:.55}}
.pin span{font-size:.7rem;line-height:1.15;background:#0b0908d9;padding:.1rem .4rem;max-width:7.5rem;text-align:center;color:var(--fg);border:1px solid #2a2018}
.pin:hover span,.pin.here span{border-color:var(--gold);color:var(--gold)}
.mapnote{color:var(--muted);font-size:1rem}

/* place / scene */
.acts{display:flex;flex-direction:column;gap:.55rem}
.act,.choice{background:var(--panel);border:1px solid var(--line);padding:.75rem 1rem;text-align:left;min-height:2.9rem;line-height:1.45;font-size:1.05rem}
.act:hover,.choice:hover{border-color:var(--gold);background:#1f1710}
.act.done{opacity:.72}.act .chk{float:right;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.act.lk{border-style:dashed}.act.spec{border-left:3px solid var(--blue)}
.tagline{font-style:normal;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-right:.6rem}
.scene{border-left:3px solid var(--gold);padding:.2rem 0 .2rem 1rem;display:flex;flex-direction:column;gap:.85rem}
.scene h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.who{color:var(--gold);font-weight:normal;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin-right:.2rem}
.reply{border-top:1px dashed var(--line);padding-top:.85rem;display:flex;flex-direction:column;gap:.85rem}
.locked{color:var(--muted);font-style:italic}.flare{color:var(--blue)}
.choices{display:flex;flex-direction:column;gap:.55rem}

/* end */
.tally{display:flex;gap:1rem}.tally div{flex:1;border:1px solid var(--gold);padding:.8rem;text-align:center}
.tally b{display:block;font-size:1.6rem;color:var(--gold);font-weight:normal}.tally span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* case board */
.panel{position:fixed;inset:0;z-index:20;background:#0b0908f2;overflow-y:auto;padding:1rem 1.25rem 3rem}
.panel-in{max-width:44rem;margin:0 auto;display:flex;flex-direction:column;gap:.9rem}
.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-head h2{font-size:1.5rem;font-style:italic;color:var(--gold)}
.hint{color:var(--muted);font-size:.95rem}.msg{border:1px solid var(--gold);padding:.6rem .9rem;color:var(--gold)}
.clues,.theories{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.clue{width:100%;display:block;text-align:left;background:var(--panel);border:1px solid var(--line);padding:.6rem .9rem}
button.clue:hover{border-color:var(--gold)}.clue.pick{border-color:var(--gold);background:#2a1d14;box-shadow:0 0 0 2px #d4a57444}
.clue.dim,.theories .dim{opacity:.4;border-style:dashed}
.n{display:block;color:var(--gold);font-size:.95rem}.t{display:block;color:#dcd0c0;font-size:.98rem;line-height:1.5;margin-top:.15rem}
.theories li{border:1px solid var(--line);padding:.6rem .9rem;background:var(--panel)}.theories li.got{border-color:var(--gold)}
.trust{display:grid;gap:.5rem}.trust div{display:flex;align-items:center;gap:.8rem;font-size:.9rem}.trust span{width:7.5rem;color:var(--muted)}
.trust i{flex:1;height:2px;background:var(--line);position:relative}.trust i b{position:absolute;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--gold);transform:translateX(-50%)}

.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,2rem);background:var(--panel);border:1px solid var(--gold);color:var(--gold);padding:.55rem 1rem;font-size:.9rem;opacity:0;pointer-events:none;transition:.3s;z-index:30;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){.doors{grid-template-columns:repeat(3,1fr)}.pin span{font-size:.78rem;max-width:11rem}}

/* v2: day cards, accusation, endings */
.logo.small{font-size:clamp(2rem,8vw,3rem)}
.scene.left{text-align:left}
.title .scene{margin:0 auto;max-width:36rem}
.cta[disabled]{opacity:.35;cursor:default}
.act b.who{display:inline-block;margin-bottom:.15rem}
.tally{flex-wrap:wrap}
.tally div{min-width:7rem}
.choice b,.scene b.who{white-space:nowrap}

@media(max-width:600px){.map{aspect-ratio:4/3}}

/* pictures above pages */
.media{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--gold);overflow:hidden}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;gap:.35rem;background:repeating-linear-gradient(135deg,rgba(212,165,116,.05) 0 14px,transparent 14px 28px),radial-gradient(ellipse at center,#2a1d14,#0b0908 75%)}
.media .ph .k{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.media .ph .t{font-style:italic;font-size:clamp(1.1rem,3.2vw,1.6rem)}
.media .ph .f{font-size:.72rem;letter-spacing:.08em;color:#7a6a58}

/* title: single Book One card with its cover */
.doors{grid-template-columns:1fr!important}
.door.open{flex-direction:row;gap:1rem;align-items:flex-start}
.door .cover{width:38%;max-width:11rem;height:auto;border:1px solid var(--gold);flex:none}
.door .dtext{display:flex;flex-direction:column;gap:.4rem;min-width:0;text-align:left}
.title .door .cta-row{justify-content:flex-start}

/* the page turns when you make a choice */
.page{overflow-x:hidden}
.col.turn{position:relative;transform-origin:left center;animation:pageturn .8s cubic-bezier(.25,.7,.2,1) both}
.col.turn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,0) 45%);animation:pageshade .8s ease-out both}
@keyframes pageturn{0%{transform:perspective(1500px) rotateY(-78deg);opacity:.2}55%{opacity:1}100%{transform:perspective(1500px) rotateY(0);opacity:1}}
@keyframes pageshade{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.col.turn{animation:none}.col.turn::after{display:none}}

/* read-aloud settings */
.voices{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.voices label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.voices select{font:inherit;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--fg);background:var(--panel);border:1px solid var(--line);padding:.45rem;min-height:2.6rem;max-width:100%}
.voices .tool{grid-column:1/-1}

/* a faint watermark picture behind a page */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.24;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)}
.backdrop img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8)}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 25%,rgba(11,9,8,.55) 100%)}
.page .col{position:relative;z-index:1}