:root {
  --bg: #14110f;
  --bg-2: #1d1814;
  --card: #251f1a;
  --line: #3a3027;
  --text: #efe6d8;
  --muted: #b3a690;
  --accent: #d9a441;
  --accent-2: #8f2d2d;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
@media (hover: hover) { a:hover { color: #f0c36a; } }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
header.site {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.logo { font-size: 1.4rem; font-weight: bold; color: var(--text); text-decoration: none; letter-spacing: .5px; }
.logo span { color: var(--accent); }
nav a { margin-left: 16px; text-decoration: none; color: var(--muted); font-family: system-ui, sans-serif; font-size: .95rem; }
@media (hover: hover) { nav a:hover { color: var(--accent); } }
.hero { padding: 56px 0 36px; text-align: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 12px; line-height: 1.15; }
.hero p { color: var(--muted); max-width: 640px; margin: 0 auto 24px; font-size: 1.1rem; }
.btn {
  display: inline-block; background: var(--accent); color: #1a1208; border: 0;
  padding: 12px 22px; border-radius: 999px; font-weight: bold; text-decoration: none;
  font-family: system-ui, sans-serif; cursor: pointer; font-size: 1rem;
}
@media (hover: hover) { .btn:hover { background: #f0c36a; color: #1a1208; } }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
@media (hover: hover) { .btn.ghost:hover { border-color: var(--accent); color: var(--accent); } }
h2 { font-size: 1.6rem; margin: 40px 0 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-decoration: none; color: var(--text); display: block;
}
@media (hover: hover) { .card:hover { border-color: var(--accent); transform: translateY(-2px); transition: .15s; } }
.card h3 { margin: 6px 0 8px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.tag { font-family: system-ui, sans-serif; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.tag.soon { color: var(--muted); }
.card.soon { opacity: .6; pointer-events: none; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 20px 0; }
.opt {
  display: block; width: 100%; text-align: left; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0;
  font-family: inherit; font-size: 1rem; cursor: pointer;
}
@media (hover: hover) { .opt:hover { border-color: var(--accent); } }
.opt.good { border-color: #4f9d5d; background: #1c2a1f; }
.opt.bad { border-color: var(--accent-2); background: #2c1818; }
.progress { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.progress div { height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.result-card {
  background: linear-gradient(160deg, #2a2118, #1a1410); border: 2px solid var(--accent);
  border-radius: 18px; padding: 28px; text-align: center; margin: 20px 0;
}
.result-card h2 { margin-top: 0; font-size: 1.9rem; }
.suspect { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0; }
.suspect h4 { margin: 0 0 6px; }
.clue { border-left: 3px solid var(--accent); padding: 4px 12px; margin: 10px 0; color: var(--muted); }
.ad-slot { margin: 28px 0; min-height: 0; text-align: center; }
footer.site { border-top: 1px solid var(--line); margin-top: 60px; padding: 28px 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: .9rem; }
footer.site a { color: var(--muted); margin-right: 14px; }
.small { color: var(--muted); font-size: .9rem; }
article p, article li { max-width: 760px; }
@media (max-width: 560px) { nav a { margin-left: 10px; font-size: .88rem; } .hero { padding: 36px 0 20px; } }
.hero .btn { margin: 7px 6px; }

/* cookie notice */
.cookiebar{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:760px;margin:0 auto;background:#1d1814;border:1px solid #d9a441;border-radius:12px;padding:14px 16px;box-shadow:0 8px 30px rgba(0,0,0,.6);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cookiebar p{margin:0;flex:1 1 280px;font-size:.92rem;line-height:1.45;color:#efe6d8}
.cookiebar a{color:#d9a441}
.cookiebtns{display:flex;gap:8px}
.cookiebtns .btn{margin:0;padding:9px 18px}

.hero-btns{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px}
.hero .hero-btns .btn{margin:0;width:min(420px,100%);box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;font-size:1.05rem}
.btn .ic{width:22px;height:22px;flex:none}
.hero .hero-btns .btn.ghost{border:2px solid var(--accent);color:var(--accent)}
@media (hover:hover){.hero .hero-btns .btn.ghost:hover{background:var(--accent);color:#1a1208}}

/* ===== Pixel theme ===== */
:root{--gold:#d9a441;--gold-d:#8a5f1c;--ink:#0d0b09;--panel:#2a2825;--scan:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
body{background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px);background-size:4px 4px}
.card,.panel,.result-card,.person,.opt,.qbtn,.suspect,.note,.soundbtn,.cookiebar,.btn{border:0;border-radius:0}
/* stepped pixel border: --pc = border colour */
.card,.panel,.result-card,.person,.opt,.qbtn,.suspect,.note,.soundbtn,.cookiebar,.btn{
  box-shadow:0 -3px 0 0 var(--pc,var(--ink)),0 3px 0 0 var(--pc,var(--ink)),-3px 0 0 0 var(--pc,var(--ink)),3px 0 0 0 var(--pc,var(--ink)),0 7px 0 -1px rgba(0,0,0,.45);
  margin-left:3px;margin-right:3px}
.grid{gap:20px;padding:0 3px}
.card{--pc:#5c4722;background-image:var(--scan);background-color:#27221c;transition:none}
@media (hover:hover){.card:hover{--pc:var(--gold);transform:translateY(-3px)}}
.card.soon{--pc:#3a3027}
.panel{--pc:var(--ink);background-image:var(--scan);background-color:var(--panel);margin:20px 3px}
.result-card{--pc:var(--gold);background-image:var(--scan),linear-gradient(160deg,#2f2519,#1a1410)}
.result-card.lose{--pc:#9a3b36}
.opt,.qbtn,.suspect,.note{--pc:#5c4722;background-image:var(--scan);background-color:#1f1b17}
@media (hover:hover){.opt:hover,.qbtn:hover:not(:disabled){--pc:var(--gold);transform:translateX(2px)}}
.opt.good{--pc:#4f9d5d}.opt.bad{--pc:#9a3b36}
.note.fresh{--pc:var(--gold)}
.person{--pc:var(--gold);background-image:var(--scan);background-color:#1f1b17}
.person.on{--pc:#fff1c2}
.person:has(.pimg){background-color:#1c1814}
.pimg{background:radial-gradient(circle at 50% 38%,#6b5128,#2b2112 62%,#14100b 100%)!important;border-bottom:3px solid var(--gold)!important}
.pimg::after{content:"";position:absolute}
.person.on .pimg{background:radial-gradient(circle at 50% 38%,#9a7633,#3a2c14 62%,#14100b 100%)!important}
/* buttons */
.btn{--pc:var(--ink);background:var(--gold);color:#1a1208;box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),inset 0 -4px 0 0 var(--gold-d),inset 0 3px 0 0 #f6d98d,0 7px 0 -1px rgba(0,0,0,.5);text-transform:none;letter-spacing:.3px}
@media (hover:hover){.btn:hover{background:#f0c36a}}
.btn:active{transform:translateY(3px);box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),inset 0 -1px 0 0 var(--gold-d),inset 0 3px 0 0 #f6d98d}
.btn.ghost{background-color:#1c1814;background-image:var(--scan);color:var(--gold);box-shadow:0 -3px 0 0 var(--gold),0 3px 0 0 var(--gold),-3px 0 0 0 var(--gold),3px 0 0 0 var(--gold),inset 0 0 0 3px #1c1814,inset 0 0 0 5px var(--gold-d),0 7px 0 -1px rgba(0,0,0,.5)}
@media (hover:hover){.btn.ghost:hover{background:#2a2218;color:#f6d98d}}
.hero .hero-btns .btn.ghost{border:0}
.hero .hero-btns{gap:18px}
.hero .hero-btns .btn{margin-left:3px;margin-right:3px}
.soundbtn{--pc:var(--gold);background-color:#1c1814}
.cookiebar{--pc:var(--gold);background-image:var(--scan);background-color:#1d1814;margin:0 auto;left:18px;right:18px}
/* type & chrome */
h2{color:var(--gold);text-shadow:2px 2px 0 #000;letter-spacing:.3px}
.hero h1{text-shadow:3px 3px 0 #000}
nav a{color:var(--gold)}
header.site{border-bottom:3px solid var(--ink);box-shadow:0 3px 0 0 #3a2d14;background-image:var(--scan)}
.logo{text-shadow:2px 2px 0 #000}
.tag{letter-spacing:2px}
.progress{border-radius:0;height:10px;background:#0d0b09;box-shadow:0 0 0 2px #5c4722}
.progress div{border-radius:0;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,#b9862e 8px 10px)}
.ad-slot,.hero-btns{image-rendering:auto}
img.pix,.pimg img,.killer-img{image-rendering:pixelated}
@media (max-width:560px){.card,.panel{margin-left:5px;margin-right:5px}.grid{padding:0 5px}}

/* site music button */
#musicBtn.soundbtn.floating{position:fixed;right:14px;bottom:16px;z-index:40;padding:9px 16px;font-size:.85rem;font-family:system-ui,sans-serif;color:var(--text);cursor:pointer;--pc:var(--gold);background-color:#1c1814}
@media (hover:hover){#musicBtn:hover{color:var(--gold)}}
body:has(.cookiebar) #musicBtn,body:has(.cookiebar) #soundFloat{display:none}

/* suspects: centred row, wide gaps, cards never move */
#people.people{grid-template-columns:repeat(auto-fit,minmax(150px,190px));justify-content:center;gap:28px}
#people.people .person{margin-left:0;margin-right:0}
#talk.talk{margin-top:22px;scroll-margin-top:84px}
.person.on{box-shadow:0 -3px 0 0 var(--pc),0 3px 0 0 var(--pc),-3px 0 0 0 var(--pc),3px 0 0 0 var(--pc),0 0 18px 2px rgba(255,214,120,.45),0 7px 0 -1px rgba(0,0,0,.45)}
@media (max-width:560px){#people.people{grid-template-columns:repeat(2,1fr);gap:14px}}

/* little characters sitting on / peeking over / hanging from the quiz card frames (they never touch the text) */
.quizgrid{--s:2;row-gap:92px;margin-top:104px}
.quizgrid .card{position:relative}
.quizgrid .mini{position:absolute;width:calc(32px*var(--s));height:calc(48px*var(--s));top:calc(var(--ay)*var(--s)*-1px);image-rendering:pixelated;pointer-events:none;z-index:2}
.m-detective .mini{--ay:47;right:22px}
.m-dog .mini{--ay:37;left:22px}
.m-moustache .mini{--ay:37;left:34%}
.m-wig .mini{--ay:37;right:18px}
.m-peeker .mini{--ay:24;left:38%}
.m-hanger .mini{--ay:41;right:30px}
.m-hanger::before{content:"";position:absolute;right:calc(30px + 8px*var(--s));width:calc(2px*var(--s));top:-92px;height:92px;background:#cfcfcf;z-index:1}
.m-burglar .mini{--ay:46;left:26px}
.m-butler .mini{--ay:47;right:34%}
.m-ghost .mini{--ay:52;right:20px}
.m-professor .mini{--ay:37;left:30px}
.m-chef .mini{--ay:47;left:34%}
.m-banana .mini{--ay:46;right:26px}
@media (max-width:560px){.quizgrid{--s:1.75;row-gap:84px;margin-top:96px}.m-hanger::before{top:-84px;height:84px}}

/* pixel shadow figures inside the game cards */
.card.sil{position:relative;overflow:hidden}
.card.sil>*{position:relative;z-index:1}
.card.sil>.sil-img{position:absolute;z-index:0;right:8px;bottom:6px;width:144px;height:144px;image-rendering:pixelated;pointer-events:none}
@media (max-width:560px){.card.sil>.sil-img{width:96px;height:96px}}
#intro .scene{display:block;width:100%;max-width:600px;height:auto;margin:0 auto 18px;image-rendering:pixelated}
.card.sil>.sil-img[src$="curtain.png"]{top:0;bottom:auto}
.musichint{position:fixed;right:14px;bottom:70px;z-index:41;background:#e0b04a;color:#1a1612;font:600 14px/1 system-ui,sans-serif;padding:11px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none;transition:opacity .4s}
.musichint::after{content:"";position:absolute;right:30px;bottom:-9px;border:8px solid transparent;border-top-color:#e0b04a;border-bottom:0}
body:has(.cookiebar) .musichint{display:none}