:root{--ink:#0d0a08;--paper:#f3ead8;--red:#9b1c1c;--red2:#c0392b;--gold:#d4af5a;--gold2:#e9cf87;--green:#2f5d3a;--muted:#a8977a;--text:#efe6d6;--brick:#5a2a1e;--brick2:#4a2218;--lamp:#ffcf73}
*{box-sizing:border-box}
html,body{margin:0;color:var(--text);font:16px/1.55 Inter,system-ui,sans-serif;background:#07070d}
body{background:#07070d}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(1200px 600px at 75% -10%,#2a3550 0%,#121726 45%,#07070d 100%)}
a{color:var(--gold)}
button{font:inherit;cursor:pointer}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.moon{position:absolute;right:8%;top:40px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe8,#e9dfbf 60%,#cbbd95);box-shadow:0 0 60px 20px rgba(255,245,210,.18);z-index:0}
.top{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;max-width:1080px;margin:0 auto}
.brand{font:700 12px/1 Inter;letter-spacing:3px;text-transform:uppercase;color:var(--gold);text-decoration:none}
.icon{background:none;border:0;color:var(--text);font-size:20px;padding:6px}
main{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 16px 40px}
.hero{text-align:center;padding:8px 0 18px;position:relative}
.kicker{margin:0;color:var(--gold);letter-spacing:3px;text-transform:uppercase;font-size:12px;font-weight:700}
h1{font:900 clamp(42px,9vw,82px)/1 'Playfair Display',Georgia,serif;margin:8px 0 6px;color:#fff;text-shadow:0 3px 0 var(--red),0 0 30px rgba(212,175,90,.25)}
.sub{margin:0 auto 10px;max-width:560px;color:#d8ccb4}
.hud{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 12px}
.pill{background:rgba(0,0,0,.4);border:1px solid rgba(212,175,90,.35);border-radius:999px;padding:6px 12px;font-size:13px;color:#e8dcc3}
.pill b{color:var(--gold2)}
.status{font-family:'Special Elite',monospace;color:var(--paper);margin:4px auto 12px;max-width:640px;font-size:15px}
.hero-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn{background:var(--red);color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;letter-spacing:.3px;text-decoration:none;display:inline-block}
.btn:hover{background:var(--red2)}
.btn.ghost{background:rgba(0,0,0,.35);border:1px solid var(--gold);color:var(--gold)}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.small{padding:7px 12px;font-size:14px}

/* The club */
.club{position:relative;margin:18px auto 0;max-width:920px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.lights{position:relative;height:26px;margin:0 2%;}
.lights svg{position:absolute;inset:0;width:100%;height:100%}
.bulb{animation:tw 2.4s infinite}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.35}}
.cornice{height:22px;background:linear-gradient(#7a6a58,#4d4136);border-radius:3px 3px 0 0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35)}
.facade{position:relative;padding:22px 4% 0;background:
 repeating-linear-gradient(0deg,transparent 0 17px,rgba(0,0,0,.28) 17px 19px),
 repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,0,0,.22) 38px 40px),
 linear-gradient(180deg,#6b3123,#4c2218 70%,#3d1b13);background-blend-mode:normal}
.facade:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(0,0,0,.0) 38px),linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,transparent 88%,rgba(0,0,0,.35));pointer-events:none}
.sign{position:relative;margin:0 auto 18px;width:max-content;max-width:94%;padding:8px 22px;background:linear-gradient(#1b1410,#0f0b08);border:3px solid var(--gold);border-radius:4px;text-align:center;box-shadow:0 0 0 3px #0f0b08,0 6px 20px rgba(0,0,0,.6)}
.sign b{display:block;font:900 clamp(16px,3.4vw,28px)/1.1 'Playfair Display',serif;letter-spacing:3px;color:var(--gold2);text-shadow:0 0 12px rgba(233,207,135,.45)}
.sign span{font:700 11px Inter;letter-spacing:3px;color:#cdbf9f}
.floors{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 18px;position:relative}
@media(max-width:720px){.floors{grid-template-columns:repeat(4,1fr);gap:18px 12px}.facade{padding:18px 4% 0}}

.win{position:relative;aspect-ratio:3/4.2;border:0;padding:0;background:none;perspective:700px}
.win .frame{position:absolute;inset:0;border-radius:3px 3px 0 0;background:#1d130d;box-shadow:inset 0 0 0 4px #2b1d14,0 0 0 3px #8c7a62,0 3px 0 6px rgba(0,0,0,.25)}
.win .arch{position:absolute;left:-6%;right:-6%;top:-9%;height:12%;background:#8c7a62;border-radius:40% 40% 0 0/100% 100% 0 0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.win .sill{position:absolute;left:-10%;right:-10%;bottom:-7%;height:8%;background:#9c8a70;border-radius:2px;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.win .snowcap{position:absolute;left:-8%;right:-8%;bottom:-3%;height:7%;background:#f4f7ff;border-radius:50% 50% 30% 30%/90% 90% 30% 30%;opacity:.95}
.win .glass{position:absolute;inset:6%;border-radius:2px;overflow:hidden;background:#0b0d16;
 background-image:linear-gradient(90deg,transparent 48%,#2b1d14 48% 52%,transparent 52%),linear-gradient(0deg,transparent 48%,#2b1d14 48% 52%,transparent 52%)}
.win .room{position:absolute;inset:0;opacity:0;transition:opacity .6s;background:radial-gradient(circle at 50% 30%,#ffe2a1 0%,#f0a64b 35%,#7a3b16 75%,#2a140a 100%)}
.win .room svg{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:70%;opacity:.85}
.win .frost{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 40%),linear-gradient(135deg,rgba(210,225,255,.25),rgba(140,160,200,.12));backdrop-filter:blur(1px)}
.win .shutter{position:absolute;top:6%;bottom:6%;width:44%;background:
 repeating-linear-gradient(0deg,#2f4d36 0 6px,#264030 6px 8px);border:2px solid #1c3022;transition:transform .7s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d;box-shadow:inset 0 0 8px rgba(0,0,0,.4)}
.win .shutter.l{left:6%;transform-origin:left center;border-radius:2px 0 0 2px}
.win .shutter.r{right:6%;transform-origin:right center;border-radius:0 2px 2px 0}
.win:nth-child(3n+1) .shutter{background:repeating-linear-gradient(0deg,#6e2a20 0 6px,#5c2219 6px 8px);border-color:#3d150f}
.win:nth-child(3n+2) .shutter{background:repeating-linear-gradient(0deg,#3a4458 0 6px,#2f3849 6px 8px);border-color:#1f2633}
.win .num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;font:900 clamp(18px,3.4vw,30px)/1 'Playfair Display',serif;color:#f4e3bd;text-shadow:0 2px 0 rgba(0,0,0,.6);pointer-events:none;transition:opacity .3s}
.win .label{position:absolute;left:-8%;right:-8%;bottom:-24%;text-align:center;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#d7c8a8;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s;z-index:7;pointer-events:none;background:rgba(10,7,5,.85);padding:3px 4px;border-radius:3px}
.win:hover .label,.win:focus-visible .label,.win.today .label{opacity:1}
.win .wreath{position:absolute;left:50%;top:6%;transform:translateX(-50%);width:34%;aspect-ratio:1;border-radius:50%;border:4px solid #1f5b2e;box-shadow:inset 0 0 0 2px #2e7d43;z-index:4;pointer-events:none}
.win .wreath:after{content:"";position:absolute;left:50%;bottom:-22%;width:30%;height:30%;transform:translateX(-50%);background:var(--red2);border-radius:2px}

.win.locked{cursor:not-allowed}
.win.locked .shutter{filter:brightness(.6) saturate(.6)}
.win.open .shutter.l{transform:rotateY(-112deg)}
.win.open .shutter.r{transform:rotateY(112deg)}
.win.open .room{opacity:1}
.win.open .num{opacity:0}
.win.open .frost,.win.solved .frost{display:none}
.win.solved .room{opacity:1}
.win.solved .shutter.l{transform:rotateY(-78deg)}
.win.solved .shutter.r{transform:rotateY(78deg)}
.win.solved .num{top:9%;left:12%;transform:none;font-size:13px;color:#f4e3bd;background:rgba(26,18,12,.8);padding:3px 6px;border-radius:3px;text-shadow:none}
.win.solved:after{content:"✔";position:absolute;right:-6px;top:-8px;z-index:6;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1a120c;font:900 13px/22px Inter;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.win.today:not(.open) .shutter.l{animation:ajarL 2.6s ease-in-out infinite}
.win.today:not(.open) .shutter.r{animation:ajarR 2.6s ease-in-out infinite}
.win.today:not(.open) .room{opacity:1}
.win.today .frame{box-shadow:inset 0 0 0 4px #2b1d14,0 0 0 3px var(--gold),0 0 24px 6px rgba(255,207,115,.55)}
@keyframes ajarL{0%,100%{transform:rotateY(-6deg)}50%{transform:rotateY(-26deg)}}
@keyframes ajarR{0%,100%{transform:rotateY(6deg)}50%{transform:rotateY(26deg)}}
.win.today .label{color:var(--gold2);font-weight:700}
.win:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.win:not(.locked):hover .frame{box-shadow:inset 0 0 0 4px #2b1d14,0 0 0 3px var(--gold2),0 0 18px 4px rgba(255,207,115,.35)}

.ground{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:44px 4% 0;gap:10px}
.lamp{justify-self:center;width:14px;height:150px;background:linear-gradient(90deg,#141414,#3a3a3a,#141414);position:relative;border-radius:3px}
.lamp:before{content:"";position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:34px;height:38px;background:radial-gradient(circle at 50% 60%,#fff4c4,var(--lamp) 45%,#a8651e 80%);border-radius:6px 6px 14px 14px;box-shadow:0 0 50px 22px rgba(255,207,115,.35)}
.frontdoor{position:relative;width:min(300px,52vw);aspect-ratio:1/1.05;border:0;padding:0;background:none;perspective:900px}
.frontdoor .portal{position:absolute;inset:0;background:#8c7a62;border-radius:50% 50% 0 0/26% 26% 0 0;box-shadow:inset 0 0 0 10px #a6947a}
.frontdoor .inside{position:absolute;left:10%;right:10%;top:12%;bottom:0;border-radius:50% 50% 0 0/22% 22% 0 0;overflow:hidden;background:radial-gradient(circle at 50% 30%,#ffe7ad,#e39a3e 40%,#5a2a10 85%)}
.frontdoor .leaf{position:absolute;top:12%;bottom:0;width:40%;background:linear-gradient(90deg,#5c1414,#7d1c1c 50%,#5c1414);border:3px solid #3a0c0c;transition:transform 1s cubic-bezier(.3,1.2,.5,1)}
.frontdoor .leaf:before{content:"";position:absolute;inset:12% 14% 52% 14%;border:2px solid rgba(0,0,0,.35)}
.frontdoor .leaf:after{content:"";position:absolute;inset:56% 14% 10% 14%;border:2px solid rgba(0,0,0,.35)}
.frontdoor .leaf.l{left:10%;transform-origin:left;border-radius:40% 0 0 0/14% 0 0 0}
.frontdoor .leaf.r{right:10%;transform-origin:right;border-radius:0 40% 0 0/0 14% 0 0}
.frontdoor .wreath{position:absolute;left:50%;top:26%;transform:translateX(-50%);width:28%;aspect-ratio:1;border-radius:50%;border:8px solid #1f5b2e;box-shadow:inset 0 0 0 3px #2e7d43,0 0 0 2px #143c1e;z-index:3}
.frontdoor .wreath:after{content:"";position:absolute;left:50%;bottom:-26%;width:34%;height:30%;transform:translateX(-50%);background:var(--red2);border-radius:3px}
.frontdoor .num{position:absolute;left:0;right:0;top:56%;z-index:3;text-align:center;font:900 clamp(26px,5vw,40px)/1 'Playfair Display',serif;color:var(--gold2);text-shadow:0 2px 0 #000}
.frontdoor .cap{position:absolute;left:-20%;right:-20%;bottom:-36px;text-align:center;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold2)}
.frontdoor.open .leaf.l{transform:rotateY(-100deg)}.frontdoor.open .leaf.r{transform:rotateY(100deg)}
.frontdoor.locked .leaf{filter:brightness(.75)}
.frontdoor.ready .portal{box-shadow:inset 0 0 0 10px #a6947a,0 0 40px 10px rgba(255,207,115,.45)}
.pavement{height:46px;margin-top:40px;background:linear-gradient(#e9eef8,#c9d2e3);border-radius:0 0 10px 10px;box-shadow:inset 0 6px 10px rgba(255,255,255,.6)}

.more h2{font:700 24px 'Playfair Display',serif;margin:44px 0 12px;color:#fff;text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{display:block;background:rgba(20,14,10,.85);border:1px solid #3b2a1c;border-radius:10px;padding:14px;text-decoration:none;color:var(--text)}
.card b{display:block;color:#fff;margin-bottom:4px}.card span{font-size:14px;color:#cdbf9f}
.card.ff{border-color:var(--gold)}
.foot{margin-top:30px;font-size:12px;color:var(--muted);text-align:center}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(5,4,3,.82);z-index:20;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px}
.modal[hidden]{display:none}
.sheet{position:relative;width:100%;max-width:660px;background:var(--paper);color:#2a1f17;border-radius:3px;padding:28px 22px 22px;animation:rise .45s cubic-bezier(.2,1.2,.4,1);
 box-shadow:0 30px 80px rgba(0,0,0,.7);background-image:radial-gradient(circle at 90% 8%,rgba(150,110,60,.15),transparent 30%),repeating-linear-gradient(transparent 0 27px,rgba(120,90,50,.07) 27px 28px)}
.sheet.board{max-width:980px;background:#8a6a45;background-image:radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px);background-size:7px 7px,11px 11px;color:#1a120c;box-shadow:inset 0 0 0 12px #5a3d22,0 30px 80px rgba(0,0,0,.7)}
@keyframes rise{from{transform:translateY(40px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.sheet .close{position:absolute;right:8px;top:6px;color:#5a4632;z-index:3}
.file-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid #2a1f17;padding-bottom:6px;margin-bottom:12px;font-family:'Special Elite',monospace}
.file-head b{font:900 26px 'Playfair Display',serif}
.file-head span{color:var(--red);font-size:13px;letter-spacing:1px;white-space:nowrap}
.conf{display:inline-block;font:700 11px 'Special Elite';color:var(--red);border:2px solid var(--red);padding:2px 6px;transform:rotate(-3deg);margin-bottom:10px;letter-spacing:2px}
.puzzle{font-family:'Special Elite',monospace;font-size:17px;white-space:pre-wrap;line-height:1.6;background:#fffaf0;border:1px dashed #b9a57f;padding:14px;border-radius:3px;min-height:90px}
.puzzle .caret{display:inline-block;width:9px;height:18px;background:#2a1f17;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.answer{display:flex;gap:8px;margin:14px 0 8px}
.answer input{flex:1;min-width:0;font:700 18px 'Special Elite',monospace;padding:10px 12px;border:2px solid #2a1f17;border-radius:4px;background:#fff;text-transform:uppercase;letter-spacing:2px}
.answer input.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.hints{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.hintbtn{background:none;border:1px solid #8a7556;color:#5a4632;border-radius:4px;padding:5px 10px;font-size:13px}
.hintbtn:disabled{opacity:.45;cursor:default}
.hint{font-size:14px;color:#5a4632;margin:6px 0;padding-left:10px;border-left:3px solid var(--gold)}
.msg{min-height:22px;font-weight:700;margin:4px 0}.msg.bad{color:var(--red)}.msg.ok{color:var(--green)}
.evidence{margin-top:14px;background:#fff;border:1px solid #c9b48c;padding:16px 16px 18px;position:relative;font-family:'Special Elite',monospace;line-height:1.6;box-shadow:2px 3px 0 rgba(0,0,0,.08)}
.evidence:before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:20px;transform:translateX(-50%) rotate(-2deg);background:rgba(240,225,170,.7)}
.evidence h3{margin:0 0 8px;font:700 13px Inter;letter-spacing:2px;text-transform:uppercase;color:var(--red)}
.stamp{display:inline-block;margin-top:10px;border:3px solid var(--red);color:var(--red);font:700 15px/1 'Special Elite';padding:6px 10px;transform:rotate(-4deg);letter-spacing:1px;text-transform:uppercase;animation:stamp .35s ease-out;mix-blend-mode:multiply}
@keyframes stamp{from{transform:scale(2.4) rotate(-4deg);opacity:0}to{transform:scale(1) rotate(-4deg);opacity:1}}
.next{margin-top:14px;padding:12px 14px;border:1px dashed #8a7556;border-radius:4px;background:#fffaf0}
.next b{display:block;font:700 12px Inter;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.next .tease{font-family:'Special Elite';font-size:16px}
.next .cd{font:700 22px 'Special Elite';margin-top:6px;color:#2a1f17}
.promo{margin-top:14px;padding:12px 14px;background:#1e1611;color:var(--text);border-radius:6px;font-size:14px}
.promo b{color:#fff}.promo .code{font:700 18px 'Special Elite';letter-spacing:2px;color:var(--gold);margin:0 6px}
.promo .btn{margin-top:8px;font-size:14px;padding:8px 14px}
.nb{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.nb{grid-template-columns:1fr}}
.nb h4,.h4{margin:0 0 6px;font:700 12px Inter;letter-spacing:2px;text-transform:uppercase;color:var(--red)}
.chip{position:relative;display:block;width:100%;text-align:left;background:#fffaf0;border:1px solid #c9b48c;border-radius:4px;padding:7px 9px;margin-bottom:6px;font-size:14px;color:#2a1f17}
.chip.x{color:#9a8a70;background:#efe6d3}
.chip.x:after{content:"";position:absolute;left:6px;right:6px;top:50%;height:3px;background:var(--red);border-radius:2px;transform:rotate(-2deg);animation:strike .5s ease-out}
@keyframes strike{from{right:100%}}
.chip small{display:block;font-size:12px;color:#7a6850}
.chip .ev{font-size:11px;color:var(--green);font-weight:700}
.accuse label{display:block;font-weight:700;margin:12px 0 4px}
.accuse select{width:100%;padding:10px;font:16px Inter;border:2px solid #2a1f17;border-radius:4px;background:#fff}
.result{text-align:center}.result h2{font:900 34px 'Playfair Display',serif;margin:6px 0}
.prose{white-space:pre-wrap;font-family:'Special Elite',monospace;line-height:1.7}
.rank{display:flex;gap:12px;align-items:center;background:#fffaf0;border:1px solid #c9b48c;border-radius:6px;padding:10px 12px;margin:10px 0}
.rank .badge{width:54px;height:54px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold) 50%,#8a6a2a);display:grid;place-items:center;font:900 22px 'Playfair Display';color:#3a2a10;box-shadow:inset 0 0 0 3px #8a6a2a}
/* Evidence board */
.boardgrid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px;padding:16px 4px 6px}
.boardgrid svg.strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.victim{grid-column:1/-1;justify-self:center;width:200px;background:#fffdf6;padding:10px 10px 12px;box-shadow:0 6px 14px rgba(0,0,0,.4);transform:rotate(-1.5deg);text-align:center;z-index:2;position:relative}
.victim .ph{height:120px;background:#2b2621;display:grid;place-items:center;color:#d8ccb4;font:700 13px 'Special Elite';letter-spacing:2px}
.polaroid{position:relative;z-index:2;background:#fffdf6;padding:8px 8px 10px;box-shadow:0 6px 14px rgba(0,0,0,.35);font-family:'Special Elite';font-size:12px;line-height:1.35;color:#2a1f17}
.polaroid .pin{position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a7a,#b21e1e);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.polaroid .d{font:900 20px 'Playfair Display';color:var(--red)}
.polaroid .t{font:700 12px Inter;text-transform:uppercase;letter-spacing:1px;margin:2px 0 4px}
.polaroid.empty{background:rgba(255,253,246,.25);box-shadow:none;border:2px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.7);min-height:120px;display:grid;place-items:center;text-align:center}
.polaroid .x{display:block;margin-top:4px;color:var(--red);font-weight:700}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#000;color:#fff;padding:10px 16px;border-radius:6px;z-index:40;font-size:14px;max-width:90vw}
.toast[hidden]{display:none}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:600px){.moon{width:44px;height:44px;right:14px;top:58px;opacity:.55}.sign b{letter-spacing:1.5px;font-size:15px}.sign span{font-size:9px;letter-spacing:1.5px}}