@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=Newsreader:opsz,wght@6..72,300;6..72,500&display=swap');

:root{--ink:#f1e9e5;--muted:#aa9297;--dim:#66535a;--paper:#ead9cb;--bg:#100a10;--panel:#171017;--line:#3d2935;--signal:#e8b9c8;--amber:#f0bd72;--danger:#d67777;--mono:'IBM Plex Mono',monospace;--serif:'Newsreader',serif}
*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:15px}body{margin:0;min-height:100vh;background:radial-gradient(circle at 70% 10%,#14201d 0,transparent 32%),linear-gradient(135deg,#080b0d,#0b0f10 55%,#080a0b);overflow-x:hidden}button,input{font:inherit}.is-hidden{display:none!important}.noise,.scanlines{position:fixed;inset:0;pointer-events:none;z-index:90}.noise{opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.scanlines{opacity:.025;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#fff 4px)}
.boot-screen{min-height:100vh;display:grid;place-content:center;text-align:center;transition:opacity .45s}.boot-screen.fade{opacity:0}.boot-mark{font-size:2.4rem;color:var(--signal);animation:pulse 1.4s infinite}.eyebrow{font-size:.7rem;letter-spacing:.24em;color:var(--muted)}.boot-log{height:6rem;margin-top:2rem;text-align:left;font-size:.7rem;line-height:1.7;color:var(--signal)}
.topbar{height:72px;position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:0 3vw;border-bottom:1px solid var(--line);background:rgba(8,11,13,.9);backdrop-filter:blur(16px)}.brand{display:flex;gap:13px;align-items:center;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}.brand-mark{font-size:1.5rem;color:var(--signal)}.brand b{display:block;font-size:.78rem;letter-spacing:.12em}.brand small{display:block;margin-top:4px;font-size:.54rem;letter-spacing:.16em;color:var(--muted)}.topbar-actions{display:flex;gap:18px;align-items:center}.status{font-size:.58rem;letter-spacing:.15em;color:var(--muted)}.status i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:#759983;box-shadow:0 0 9px #759983}.icon-button,.text-button{border:0;background:none;color:var(--muted);font-size:.62rem;letter-spacing:.12em;cursor:pointer}.icon-button:hover,.text-button:hover{color:var(--ink)}
main{min-height:calc(100vh - 72px)}.shell{max-width:1200px;margin:auto;padding:7vh 5vw 12vh}.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.6fr);gap:8vw;align-items:end;margin-bottom:7vh}.kicker{font-size:.62rem;letter-spacing:.2em;color:var(--amber);text-transform:uppercase}.hero h1,.case-header h1{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,7vw,7rem);line-height:.86;letter-spacing:-.04em;margin:.35em 0}.hero-copy{max-width:650px;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.45;color:#aeb6b0}.meta-block{border-left:1px solid var(--line);padding-left:25px}.meta-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dotted var(--line);font-size:.65rem}.meta-row span{color:var(--muted)}
.case-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.case-card{position:relative;min-height:320px;padding:28px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(12,17,18,.55);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;transition:.3s}.case-card:hover:not(:disabled){background:#121918;transform:translateY(-4px)}.case-card:disabled{cursor:not-allowed}.case-no{font-family:var(--serif);font-size:3rem;color:var(--dim)}.case-card h2{font-family:var(--serif);font-weight:300;font-size:1.8rem;margin:55px 0 12px}.case-card p{font-size:.67rem;line-height:1.7;color:var(--muted)}.case-state{position:absolute;bottom:25px;left:28px;font-size:.58rem;letter-spacing:.15em;color:var(--amber)}.case-card.solved .case-state{color:var(--signal)}.case-card.locked::after{content:'ACCESS SEQUENCED';position:absolute;inset:0;display:grid;place-content:center;background:rgba(7,10,11,.82);font-size:.6rem;letter-spacing:.2em;color:var(--dim)}
.token-panel{margin-top:5vh;display:flex;gap:24px;align-items:center;padding:22px 25px;border:1px solid var(--line);background:#0b1011}.token-count{font-family:var(--serif);font-size:2.5rem;color:var(--amber)}.token-panel p{margin:0;font-size:.68rem;color:var(--muted);line-height:1.7}.token-panel strong{color:var(--ink);font-weight:400}
.case-header{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding-bottom:35px;border-bottom:1px solid var(--line);margin-bottom:40px}.case-header h1{font-size:clamp(3rem,6vw,6rem);margin-bottom:0}.case-header p{max-width:620px;color:var(--muted);line-height:1.7}.case-progress{text-align:right;font-size:.6rem;color:var(--muted);letter-spacing:.12em}.case-progress b{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--ink);letter-spacing:0}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}.evidence{min-height:520px;border:1px solid var(--line);background:rgba(12,16,17,.6);padding:30px}.side-file{border:1px solid var(--line);padding:22px;background:#0b0f10;height:max-content;position:sticky;top:100px}.side-file h3{font-family:var(--serif);font-weight:300;font-size:1.5rem;margin:0 0 18px}.side-file p{font-size:.67rem;line-height:1.7;color:var(--muted)}.hint-list{margin:20px 0}.hint{border-top:1px solid var(--line);padding:14px 0;font-size:.67rem;line-height:1.6}.hint.locked{color:var(--dim)}.primary,.secondary{width:100%;border:1px solid var(--signal);padding:13px 18px;background:var(--signal);color:#0a0e0e;font-size:.64rem;font-weight:600;letter-spacing:.13em;cursor:pointer;transition:.2s}.primary:hover{filter:brightness(1.15)}.primary:disabled{opacity:.3;cursor:not-allowed}.secondary{background:transparent;color:var(--signal);border-color:var(--line)}
.tabs{display:flex;gap:0;overflow:auto;margin-bottom:25px}.tab{white-space:nowrap;border:1px solid var(--line);border-right:0;background:transparent;color:var(--muted);padding:11px 16px;font-size:.6rem;letter-spacing:.11em;cursor:pointer}.tab:last-child{border-right:1px solid var(--line)}.tab.active{background:var(--signal);color:#090d0c}.document{max-width:680px;margin:auto;background:#c7c0af;color:#272822;padding:clamp(25px,5vw,55px);min-height:420px;box-shadow:0 18px 50px #0008;transform:rotate(-.25deg);font-family:var(--mono);position:relative}.document::before{content:'OBSIDIAN // CONTROLLED COPY';display:block;border-bottom:2px solid #3e4039;padding-bottom:10px;margin-bottom:30px;font-size:.55rem;letter-spacing:.18em}.document h3{font-family:var(--serif);font-size:2rem;font-weight:500}.document p,.document li{font-size:.75rem;line-height:1.8}.document .stamp{position:absolute;right:30px;top:65px;border:3px solid #7f3f39;color:#7f3f39;padding:6px;transform:rotate(9deg);font-weight:600;opacity:.75}.suspect{border-bottom:1px dashed #555;cursor:pointer;padding:0 2px}.suspect.selected{background:#433;color:#fff}.photo{height:320px;background:linear-gradient(130deg,#444,#888 45%,#222);filter:grayscale(1);display:grid;place-content:center;color:#ddd;letter-spacing:.2em}.map-grid{height:300px;background-image:linear-gradient(#5553 1px,transparent 1px),linear-gradient(90deg,#5553 1px,transparent 1px);background-size:30px 30px;position:relative}.map-grid::after{content:'SECTOR N–17';position:absolute;left:58%;top:42%;border:1px solid #555;padding:10px}
.answer-box{max-width:520px;margin:35px auto 0;display:flex}.answer-box input{min-width:0;flex:1;background:#080c0d;color:var(--ink);border:1px solid var(--line);border-right:0;padding:14px;text-transform:uppercase;outline:none}.answer-box input:focus{border-color:var(--signal)}.answer-box button{width:auto}.error{animation:shake .3s;color:var(--danger)!important}
.symbol-board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.symbol-group{border:1px solid var(--line);padding:20px}.symbol-group span{display:inline-grid;place-content:center;width:40px;height:40px;margin:5px;border:1px solid var(--line);font-family:serif;font-size:1.6rem}.symbol-group .blank{border-style:dashed;color:var(--dim);cursor:pointer}.symbol-group .blank:hover,.symbol-group .blank.selected{border-color:var(--amber);color:var(--amber)}.symbol-picker{display:flex;justify-content:center;gap:12px;margin:30px 0}.symbol-picker button{width:48px;height:48px;border:1px solid var(--line);background:none;color:var(--ink);font-family:serif;font-size:1.5rem;cursor:pointer}.symbol-picker button:hover{background:var(--signal);color:#111}
.transmission{max-width:720px;margin:auto}.waveform{height:180px;display:flex;gap:4px;align-items:center;justify-content:center;border:1px solid var(--line);padding:20px;background:#080b0c}.waveform i{display:block;width:3px;background:var(--signal);opacity:.6}.play-button{margin:25px auto;display:block;width:85px;height:85px;border-radius:50%;border:1px solid var(--signal);background:none;color:var(--signal);cursor:pointer}.morse-strip{font-size:1.3rem;letter-spacing:.35em;text-align:center;color:var(--muted);padding:25px}.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.ledger div{background:#0c1112;padding:18px;font-size:.68rem}.ledger span{display:block;color:var(--muted);font-size:.55rem;margin-bottom:8px}.ledger .key{color:var(--amber)}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.artifact{min-height:190px;border:1px solid var(--line);padding:20px;background:#0a0f10}.artifact h4{font-family:var(--serif);font-size:1.3rem;font-weight:300}.redacted{height:12px;background:#202726;margin:10px 0}.missing{display:grid;place-content:center;text-align:center;border-style:dashed;color:var(--dim)}.transmission-new{border-color:var(--amber);animation:borderPulse 1.5s infinite}.decrypt-line{font-size:.65rem;color:var(--amber);letter-spacing:.15em}.cipher-table{width:100%;border-collapse:collapse;margin-top:15px}.cipher-table td{border:1px solid var(--line);padding:10px;text-align:center}.finale{min-height:calc(100vh - 72px);display:grid;place-content:center;text-align:center;padding:8vh 6vw;animation:fadein 1s}.finale .kicker{color:var(--signal)}.finale h1{font-family:var(--serif);font-size:clamp(3rem,9vw,8rem);font-weight:300;line-height:.9;margin:.3em 0}.finale p{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.8rem);line-height:1.5;max-width:760px;color:#aeb5af}.reveal-list{margin:6vh auto;text-align:left;max-width:700px;counter-reset:r}.reveal-item{counter-increment:r;display:grid;grid-template-columns:50px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line);font-family:var(--serif);font-size:1.5rem}.reveal-item::before{content:'0' counter(r);color:var(--amber);font: .65rem var(--mono)}
.drawer{position:fixed;z-index:70;right:0;top:0;height:100vh;width:min(420px,90vw);padding:30px;background:#0b0f10;border-left:1px solid var(--line);transform:translateX(102%);transition:.3s}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;letter-spacing:.15em;font-size:.7rem;padding-bottom:25px;border-bottom:1px solid var(--line)}.drawer-head button{border:0;background:none;color:var(--ink);font-size:1.5rem;cursor:pointer}.drawer nav button{display:block;width:100%;padding:20px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);text-align:left;cursor:pointer}.drawer nav button:not(:disabled):hover{color:var(--ink)}.drawer-foot{position:absolute;bottom:30px;left:30px;right:30px;color:var(--muted);font-size:.58rem}.drawer-foot strong{display:block;color:var(--ink);margin:8px 0 20px}.danger{color:var(--danger);padding:0}.backdrop{display:none;position:fixed;inset:0;z-index:60;background:#0009}.backdrop.open{display:block}.toast{position:fixed;z-index:100;bottom:30px;left:50%;transform:translate(-50%,30px);padding:13px 20px;background:var(--paper);color:#191b18;font-size:.65rem;letter-spacing:.1em;opacity:0;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{50%{opacity:.25}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes borderPulse{50%{box-shadow:0 0 20px #c8a86b33}}@keyframes fadein{from{opacity:0;transform:translateY(12px)}}
@media(max-width:850px){.case-grid{grid-template-columns:1fr 1fr}.hero,.workspace{grid-template-columns:1fr}.side-file{position:static}.case-header{grid-template-columns:1fr}.case-progress{text-align:left}.symbol-board{grid-template-columns:1fr 1fr}.topbar{padding:0 18px}.status{display:none}.shell{padding-left:20px;padding-right:20px}}
@media(max-width:520px){.case-grid,.final-grid,.symbol-board{grid-template-columns:1fr}.case-card{min-height:260px}.case-card h2{margin-top:30px}.icon-button[data-action=sound]{display:none}.document{padding:25px 18px}.answer-box{flex-direction:column}.answer-box input{border-right:1px solid var(--line);border-bottom:0}.hero h1{font-size:3.5rem}.ledger{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Shatzie edition: warmer, celebratory colour treatment without spoiling the mystery. */
body{background:radial-gradient(circle at 72% 8%,#422439 0,transparent 34%),radial-gradient(circle at 15% 75%,#2b202f 0,transparent 32%),linear-gradient(135deg,#100a10,#171017 55%,#0e090e)}
.status i{background:#e8b9c8;box-shadow:0 0 10px #e8b9c8}
.case-card:hover:not(:disabled){background:#21151e}
.finale{background:radial-gradient(circle at 50% 18%,#753e5c77,transparent 38%),linear-gradient(180deg,#1b0e18,#100a10)}
.finale h1{color:#f7d5df;text-shadow:0 0 42px #e8b9c844}
.reveal-item{border-color:#6b4055}
.case-card.locked::after{content:'VRIJGAVE GEPLAND'}
.test-panel{position:fixed;z-index:120;left:16px;bottom:16px;width:min(520px,calc(100vw - 32px));display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:12px;background:#24131fee;border:1px solid var(--amber);box-shadow:0 12px 40px #0009;backdrop-filter:blur(12px)}
.test-panel strong{color:var(--amber);font-size:.65rem;letter-spacing:.14em}.test-panel span{margin-right:auto;color:var(--ink);font-size:.65rem}.test-panel button{border:1px solid var(--line);background:#150e14;color:var(--muted);padding:7px 9px;font-size:.56rem;cursor:pointer}.test-panel button:hover,.test-panel button.active{border-color:var(--amber);color:var(--amber)}
.invitation{background:linear-gradient(145deg,#f1dfd3,#e9ccd5);color:#3b2430;box-shadow:0 18px 50px #0008,0 0 0 7px #d79aaa22}.invitation::before{content:'SHATZIE // VERTROUWELIJKE FEESTPOST';color:#8b4f68;border-color:#b87c92}.odd-letter{display:inline-block;color:#9e315b;font-weight:700;font-size:1.15em;transform:rotate(-7deg);text-decoration:underline;text-decoration-style:dotted}.birthday-board .symbol-group{background:linear-gradient(160deg,#291724,#171017)}
.festive-wave i:nth-child(3n){background:#f0bd72}.festive-wave i:nth-child(3n+1){background:#e8b9c8}.festive-wave i:nth-child(3n+2){background:#bda4e8}
body::before{content:'';position:fixed;inset:72px 0 auto 0;height:7px;z-index:35;pointer-events:none;background:repeating-linear-gradient(110deg,#e8b9c8 0 18px,#f0bd72 18px 36px,#bda4e8 36px 54px,transparent 54px 66px);opacity:.8}
.climbing-finale{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(115deg,#20131d,#3c2434 58%,#171017)}
.climbing-finale::before{content:'';position:absolute;inset:0;z-index:-2;background-image:linear-gradient(30deg,#ffffff05 12%,transparent 12.5%,transparent 87%,#ffffff05 87.5%),linear-gradient(150deg,#ffffff05 12%,transparent 12.5%,transparent 87%,#ffffff05 87.5%);background-size:90px 156px}
.finale-content{position:relative;z-index:2;padding:4vh 5vw;background:linear-gradient(90deg,#130d12dd,#130d1299 70%,transparent);border-left:3px solid var(--amber)}
.party-route{position:absolute;inset:5% 3% 5% 54%;z-index:0;filter:drop-shadow(0 12px 10px #0008)}
.party-route i{position:absolute;width:clamp(34px,5vw,74px);height:clamp(20px,3vw,44px);border-radius:55% 30% 50% 35%;background:#e8b9c8;box-shadow:inset -8px -7px 12px #6f314c99,0 4px 0 #0005;transform:rotate(var(--r,12deg))}
.party-route i:nth-child(1){left:12%;bottom:5%;--r:-14deg}.party-route i:nth-child(2){left:42%;bottom:19%;--r:22deg;background:#f0bd72}.party-route i:nth-child(3){left:20%;bottom:34%;--r:8deg;background:#bda4e8}.party-route i:nth-child(4){left:58%;bottom:46%;--r:-24deg;background:#e890a8}.party-route i:nth-child(5){left:32%;bottom:60%;--r:15deg;background:#f0bd72}.party-route i:nth-child(6){left:68%;bottom:70%;--r:35deg;background:#bda4e8}.party-route i:nth-child(7){left:43%;bottom:83%;--r:-12deg;background:#e8b9c8}.party-route i:nth-child(8){left:70%;top:0;--r:5deg;background:#f0bd72;width:90px}
.climbing-finale .reveal-list{background:#170f16cc;padding:0 22px;border:1px solid #694257}.climbing-finale .reveal-item{grid-template-columns:44px 1fr;align-items:start}.climbing-finale .reveal-item::before{display:none}.climbing-finale .reveal-item strong{color:var(--amber);font:600 .7rem var(--mono)}.summit-line{display:inline-block;margin-top:12px;padding:14px 20px;border:1px solid var(--amber);color:var(--amber);font-size:.68rem;letter-spacing:.16em;background:#21141d}
@media(max-width:760px){.party-route{opacity:.22;inset:4%}.finale-content{background:#130d12cc}.climbing-finale .reveal-list{padding:0 14px}}
.test-break{flex-basis:100%;height:0;margin:0}
.image-finale{display:flex;align-items:flex-start;justify-content:center;padding:clamp(18px,4vw,55px);background:radial-gradient(circle at 50% 10%,#71425a55,transparent 42%),#100a10}
.final-reveal-image{display:block;width:min(100%,900px);height:auto;border:1px solid #7b5967;box-shadow:0 28px 90px #000b}
.case-grid{grid-template-columns:repeat(5,1fr)}
.candle-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0 40px}.code-candle{position:relative;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:22px 10px;background:linear-gradient(90deg,#e8b9c8,#f5d7df 45%,#be7f96);color:#3a2130;clip-path:polygon(10% 12%,45% 12%,50% 0,55% 12%,90% 12%,100% 100%,0 100%)}.code-candle i{position:absolute;top:0;width:16px;height:28px;border-radius:50% 50% 45% 45%;background:#f0bd72;box-shadow:0 0 22px #f0bd72}.code-candle span{font-size:.55rem;letter-spacing:.12em}.code-candle b{font:500 1.15rem var(--serif);margin-top:12px}.candle-puzzle .document{min-height:280px}
@media(max-width:1050px){.case-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.case-grid{grid-template-columns:1fr}.candle-row{grid-template-columns:repeat(2,1fr)}}
.place-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0 36px}.place-card{min-height:145px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px 8px;background:linear-gradient(145deg,#f1dfd3,#e4becb);color:#3a2130;border-top:7px solid var(--amber);box-shadow:0 12px 25px #0006;transform:rotate(-1deg)}.place-card:nth-child(even){transform:rotate(1.5deg);border-color:#a998df}.place-card small{font-size:.5rem;letter-spacing:.14em;color:#8b5b70}.place-card b{margin-top:15px;font:500 1.2rem var(--serif);letter-spacing:.08em}.table-puzzle .document{min-height:330px}.table-puzzle .document li{margin-bottom:7px}
@media(max-width:700px){.place-cards{grid-template-columns:repeat(2,1fr)}}
.place-cards.seven{grid-template-columns:repeat(4,1fr)}.place-card em{display:inline-block;font-family:Arial,sans-serif;font-style:normal;font-weight:600;letter-spacing:-.04em;transform:translateY(-1px) rotate(-2deg);color:#452838}
@media(max-width:700px){.place-cards.seven{grid-template-columns:repeat(2,1fr)}}
.print-mark{margin-top:18px;padding-top:8px;border-top:1px dotted #a8798c;color:#8b6675;font:500 .56rem var(--mono);letter-spacing:.13em}