:root{--ink:#162238;--navy:#101a2b;--navy2:#182842;--paper:#f2ead8;--paper2:#e4d6bb;--gold:#d6a84f;--red:#a64336;--muted:#6e6b66;--white:#fffdf7;--line:rgba(26,34,48,.22);--shadow:0 22px 60px rgba(7,13,24,.3)}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;min-height:100vh;background:var(--navy);color:var(--ink);font-family:"Noto Serif SC","Songti SC","STSong",serif}.paper-noise{position:fixed;inset:0;pointer-events:none;opacity:.055;z-index:10;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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.topbar{height:78px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;color:var(--white);border-bottom:1px solid rgba(255,255,255,.1)}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold);transform:rotate(45deg);color:var(--gold);font-weight:800}.brand-mark::first-letter{transform:rotate(-45deg)}.brand strong,.brand small{display:block}.brand strong{font-size:1.15rem;letter-spacing:.18em}.brand small{font:9px/1.4 Arial,sans-serif;letter-spacing:.28em;color:#aeb7c4}.case-meta{display:flex;gap:12px;align-items:center;font:12px/1 Arial,sans-serif;letter-spacing:.16em;color:#b9c0ca}.case-meta i{width:3px;height:3px;border-radius:50%;background:var(--gold)}.difficulty{color:var(--gold)}.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:var(--white);background:transparent;font-size:17px;cursor:pointer}.game-shell{min-height:calc(100vh - 78px);display:grid;grid-template-columns:minmax(280px,390px) minmax(600px,1fr);background:linear-gradient(90deg,var(--paper) 0 35%,#d7c9ae 35%)}.brief-panel{padding:clamp(32px,5vw,70px) clamp(28px,4vw,58px);background:var(--paper);border-right:1px solid rgba(0,0,0,.15)}.eyebrow{font:700 11px/1 Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--red)}h1{font-size:clamp(2.3rem,4vw,4rem);font-weight:700;margin:12px 0 14px;line-height:1;letter-spacing:.06em}.lede{font-size:1rem;line-height:1.9;color:#56534f;margin:0 0 34px}.objective{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.objective-number{font:700 2.2rem/1 Georgia,serif;color:var(--gold)}.objective strong{font-size:1rem}.objective p{font:14px/1.7 system-ui,sans-serif;color:var(--muted);margin:5px 0 0}.progress-wrap{margin:24px 0 34px}.progress-label{display:flex;justify-content:space-between;font:12px/1.4 system-ui,sans-serif;color:var(--muted)}.progress-label strong{color:var(--ink)}.progress{height:4px;background:#d1c4ab;margin-top:10px}.progress span{display:block;width:0;height:100%;background:var(--red);transition:width .3s}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:700;letter-spacing:.12em}.section-title button{border:0;background:none;color:var(--red);font:12px system-ui,sans-serif;cursor:pointer}.clue-list{display:grid;gap:10px;max-height:44vh;overflow:auto;padding-right:5px}.clue{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:11px 12px;background:rgba(255,255,255,.35);border-left:2px solid #bbaa8a;font:14px/1.55 system-ui,sans-serif;color:#3e4144}.clue b{font:700 11px/26px Arial,sans-serif;text-align:center;border:1px solid #bbaa8a;border-radius:50%;height:28px;color:var(--red)}.clue.hinted{background:#fff7d8;border-left-color:var(--gold);animation:flash 1s ease}.board-panel{padding:28px clamp(26px,4vw,64px) 34px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 50% 35%,#e8ddc9,#cdbb9b);position:relative}.board-heading{width:min(100%,660px);display:flex;justify-content:space-between;margin-bottom:14px;font:700 11px/1.3 system-ui,sans-serif;letter-spacing:.12em;color:#665d51}.live-dot{display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--red);border-radius:50%}.legend{display:flex;gap:15px}.legend span{display:flex;align-items:center;gap:5px}.sample{display:inline-grid;place-items:center;width:14px;height:14px}.sample.person{border-radius:50%;background:var(--navy)}.sample.cross{font:18px/1 Arial;color:var(--red)}.board-wrap{width:min(100%,660px);position:relative;padding:10px}.board{aspect-ratio:1;display:grid;grid-template-columns:repeat(5,1fr);border:3px solid var(--ink);background:#d9ccb3;box-shadow:var(--shadow);position:relative}.cell{position:relative;border:1px solid rgba(22,34,56,.28);background:rgba(255,255,255,.22);cursor:pointer;min-width:0}.cell:nth-child(5n+3){border-left-width:3px}.cell:nth-child(n+11):nth-child(-n+15){border-top-width:3px}.cell:hover,.cell:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;z-index:2}.cell[data-zone="repair"]{background:rgba(201,166,96,.24)}.cell[data-zone="archive"]{background:rgba(79,112,119,.18)}.cell[data-zone="gallery"]{background:rgba(255,255,255,.28)}.room-label{position:absolute;left:7px;top:6px;font:700 clamp(8px,1.1vw,11px)/1 system-ui,sans-serif;color:rgba(22,34,56,.55);pointer-events:none}.object{position:absolute;right:6px;bottom:5px;font-size:clamp(10px,1.4vw,16px);opacity:.45;pointer-events:none}.token{position:absolute;inset:13%;border-radius:50%;display:grid;place-items:center;background:var(--navy2);color:var(--white);border:3px solid var(--paper);box-shadow:0 4px 13px rgba(0,0,0,.35);font-size:clamp(17px,3vw,31px);font-weight:800;animation:place .22s ease}.token.victim{background:var(--red)}.crossmark{position:absolute;inset:0;display:grid;place-items:center;color:rgba(166,67,54,.72);font:clamp(25px,4vw,44px)/1 Arial}.compass{position:absolute;left:-30px;top:15px;display:flex;flex-direction:column;align-items:center;font:11px system-ui,sans-serif;color:#6b6154}.compass i{height:34px;width:1px;background:#6b6154;margin-top:4px;position:relative}.compass i:before{content:"";position:absolute;top:-2px;left:-3px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:7px solid #6b6154}.stamp{position:absolute;right:-12px;bottom:18px;border:3px double var(--red);color:var(--red);padding:7px;transform:rotate(-8deg);font-weight:800;line-height:1.1;opacity:.6}.board-help{font:13px/1.5 system-ui,sans-serif;color:#665f56;text-align:center;margin:8px 0 15px}.suspect-tray{width:min(100%,720px);display:flex;justify-content:center;gap:9px}.suspect{width:min(118px,19%);padding:8px 5px;border:1px solid rgba(22,34,56,.25);background:rgba(245,238,222,.72);cursor:pointer;position:relative;color:var(--ink)}.suspect:hover{transform:translateY(-2px)}.suspect.selected{background:var(--navy);color:var(--white);border-color:var(--gold);box-shadow:0 5px 16px rgba(12,20,34,.25)}.avatar{width:38px;height:38px;display:grid;place-items:center;margin:0 auto 6px;border-radius:50%;background:#d9c49c;font-weight:800;font-size:18px;color:var(--navy)}.suspect.selected .avatar{background:var(--gold)}.suspect strong,.suspect small{display:block;text-align:center}.suspect strong{font-size:13px}.suspect small{font:10px/1.4 system-ui,sans-serif;opacity:.65}.suspect .placed-dot{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--red);display:none}.suspect.placed .placed-dot{display:block}.board-actions{width:min(100%,660px);display:flex;justify-content:center;gap:10px;margin-top:17px}.ghost-btn,.primary-btn{min-height:42px;padding:0 20px;border:1px solid rgba(22,34,56,.3);font:700 13px system-ui,sans-serif;cursor:pointer}.ghost-btn{background:transparent;color:var(--ink)}.primary-btn{background:var(--red);color:white;border-color:var(--red);box-shadow:0 6px 16px rgba(130,47,38,.24)}.primary-btn:hover{background:#8e382f}.full{width:100%;margin-top:20px}.mobile-actions{display:none}.clue-sheet{display:none}.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center}.modal[aria-hidden="false"]{display:grid}.modal-backdrop{position:absolute;inset:0;background:rgba(7,12,21,.72);backdrop-filter:blur(5px)}.result-card{position:relative;width:min(92vw,460px);padding:42px;background:var(--paper);box-shadow:var(--shadow);text-align:center}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer}.result-seal{width:78px;height:78px;border:3px double var(--red);border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;color:var(--red);font-weight:800;transform:rotate(-7deg)}.result-card h2{font-size:2rem;margin:8px}.result-card>p{font:15px/1.7 system-ui,sans-serif;color:var(--muted)}.reveal{text-align:left;padding:17px;margin-top:20px;background:#e5d8be;border-left:3px solid var(--red)}.reveal span,.reveal strong{display:block}.reveal span{font:11px system-ui,sans-serif;color:var(--red)}.reveal strong{font-size:1.25rem;margin:4px 0 8px}.reveal p{font:13px/1.65 system-ui,sans-serif;margin:0;color:#55504a}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:70;background:var(--navy);color:var(--white);padding:10px 18px;font:13px system-ui,sans-serif;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes place{from{transform:scale(.55) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}@keyframes flash{50%{transform:translateX(4px)}}
@media(max-width:900px){.topbar{height:64px;padding:0 15px}.brand-mark{width:34px;height:34px}.brand strong{font-size:1rem}.brand small{display:none}.case-meta span:first-child,.case-meta i:first-of-type{display:none}.game-shell{display:block;min-height:calc(100vh - 64px);background:#d7c9ae}.brief-panel{padding:22px 20px 10px;border:0;background:linear-gradient(180deg,var(--paper),#e4d7bd)}.brief-panel h1{font-size:2.1rem;margin:8px 0}.lede{font-size:.9rem;margin:0 0 13px;line-height:1.6}.objective,.desktop-clues{display:none}.progress-wrap{margin:13px 0 0}.board-panel{padding:14px 12px 22px}.board-heading{margin-bottom:7px}.board-wrap{padding:4px;width:min(94vw,600px)}.compass,.stamp{display:none}.board{border-width:2px}.token{inset:9%;border-width:2px}.suspect-tray{gap:5px}.suspect{padding:6px 2px}.avatar{width:33px;height:33px;margin-bottom:4px}.suspect small{display:none}.board-help{font-size:12px;margin:7px 0 10px}.mobile-actions{width:min(100%,660px);display:flex;gap:8px;margin-top:13px}.mobile-actions button{flex:1;min-height:40px;background:rgba(255,255,255,.35);border:1px solid rgba(22,34,56,.25);font:700 13px system-ui,sans-serif}.mobile-actions span{background:var(--red);color:white;border-radius:50%;padding:1px 6px;margin-left:4px}.board-actions{margin-top:8px}.board-actions button{flex:1;padding:0 8px}.clue-sheet{display:block;position:fixed;inset:0;z-index:40;pointer-events:none}.clue-sheet[aria-hidden="false"]{pointer-events:auto}.sheet-backdrop{position:absolute;inset:0;background:rgba(5,10,18,.55);opacity:0;transition:.25s}.sheet-card{position:absolute;left:0;right:0;bottom:0;max-height:77vh;padding:11px 20px 25px;background:var(--paper);transform:translateY(100%);transition:.3s ease;border-radius:18px 18px 0 0}.clue-sheet[aria-hidden="false"] .sheet-backdrop{opacity:1}.clue-sheet[aria-hidden="false"] .sheet-card{transform:none}.sheet-handle{width:38px;height:4px;background:#b9aa8e;border-radius:4px;margin:0 auto 15px}.sheet-card .clue-list{max-height:60vh}.result-card{padding:34px 24px}}
@media(max-width:420px){.case-meta{gap:7px}.board-heading .legend{display:none}.brief-panel{padding-top:16px}.brief-panel h1{font-size:1.75rem}.lede{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suspect strong{font-size:11px}.board-actions{gap:5px}.ghost-btn,.primary-btn{font-size:12px}.object{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* V2 illustrated investigation surface */
.board{background:#101a2b url("assets/midnight-gallery-v2.webp") center/cover no-repeat;isolation:isolate;overflow:hidden}
.cell{background:transparent!important;border-color:rgba(232,220,190,.22);transition:filter .35s ease,box-shadow .35s ease,background .35s ease}
.cell.dimmed{filter:brightness(.38) saturate(.55)}
.cell.evidence-glow{z-index:1;background:rgba(255,199,72,.16)!important;box-shadow:inset 0 0 0 3px #ffd36f,inset 0 0 24px rgba(255,187,52,.7);animation:evidencePulse 1.6s ease-in-out infinite}
.room-label{padding:3px 6px;border:1px solid rgba(255,220,140,.5);border-radius:3px;background:rgba(9,17,30,.76);color:#fff4d9;text-shadow:0 1px 3px #000;letter-spacing:.08em;cursor:pointer;pointer-events:auto}.room-label:hover{background:#a64336}
.prop-tag{position:absolute;right:5px;bottom:5px;display:flex;align-items:center;gap:3px;padding:3px 5px;border:1px solid rgba(255,222,147,.55);border-radius:10px;background:rgba(8,17,30,.78);color:#fff1c9;font:700 clamp(8px,1vw,11px)/1 system-ui,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:3;white-space:nowrap;transition:.2s}.prop-tag:hover{transform:scale(1.05);background:#8e382f}.prop-tag b{color:#ffd36f;font-size:1.1em}
.portrait{background-repeat:no-repeat!important;background-size:cover!important;background-position:center 16%!important}.portrait.p0{background-image:url("assets/qiao.webp")!important}.portrait.p1{background-image:url("assets/lin.webp")!important}.portrait.p2{background-image:url("assets/su.webp")!important}.portrait.p3{background-image:url("assets/gu.webp")!important}.portrait.p4{background-image:url("assets/tang.webp")!important}
.avatar{width:44px;height:58px;border:2px solid rgba(255,255,255,.65);border-radius:9px;box-shadow:0 4px 12px rgba(5,10,18,.3);background-color:#ccb98f}.suspect{display:flex;align-items:center;gap:8px;width:min(132px,20%);padding:7px 8px;text-align:left;border-radius:5px;transition:transform .22s ease,box-shadow .22s ease,background .22s}.suspect-copy{min-width:0}.suspect strong,.suspect small{text-align:left;white-space:nowrap}.suspect.selected{transform:translateY(-5px);box-shadow:0 10px 22px rgba(12,20,34,.35),0 0 0 2px var(--gold)}.suspect.selected .avatar{background-color:transparent}.token{inset:6% 22%;overflow:visible;border-width:2px;border-radius:8px;background-color:#162238;box-shadow:0 5px 18px rgba(0,0,0,.55);animation:tokenLand .42s cubic-bezier(.2,.9,.25,1.25)}.token em{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);padding:2px 5px;border-radius:7px;background:rgba(7,14,25,.88);color:#fff7e4;font:normal 700 clamp(7px,.8vw,10px)/1 system-ui,sans-serif;white-space:nowrap}.token.victim{outline:3px solid rgba(166,67,54,.75)}
.clue{width:100%;border-top:0;border-right:0;border-bottom:0;text-align:left;position:relative;grid-template-columns:28px 1fr;align-items:center;transition:transform .2s ease,background .2s ease,border-color .2s ease}.clue:hover{background:rgba(255,255,255,.55)}.object-term,.relation-term{padding:0;border:0;background:none;font:inherit;cursor:pointer}.object-term{color:#9b392e;font-weight:800;border-bottom:2px solid rgba(155,57,46,.28)}.object-term:hover,.object-term:focus-visible{background:#9b392e;color:white;outline:3px solid rgba(155,57,46,.2)}.relation-term{color:#315f6b;font-weight:800;border-bottom:1px dashed #315f6b}.relation-term:hover,.relation-term:focus-visible{background:#315f6b;color:white;outline:3px solid rgba(49,95,107,.2)}
.feature-overlay{position:absolute;z-index:6;pointer-events:none;border:3px solid #ffd465;border-radius:7px;box-shadow:0 0 0 999px rgba(4,10,20,.56),0 0 25px 8px rgba(255,193,58,.8),inset 0 0 20px rgba(255,208,99,.45);animation:featureReveal .45s ease}.feature-overlay i{position:absolute;inset:-8px;border:1px solid rgba(255,237,185,.75);border-radius:10px}.feature-overlay strong{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);padding:4px 9px;border-radius:12px;background:#ffd465;color:#172238;font:800 11px/1 system-ui,sans-serif;white-space:nowrap}
.term-card{position:relative;width:min(90vw,390px);padding:34px;background:var(--paper);box-shadow:var(--shadow);text-align:center}.term-card h2{font-size:2rem;margin:8px 0 16px}.term-card>p{font:15px/1.75 system-ui,sans-serif;color:#50504d}.term-card .term-note{font-size:12px;color:#8b7962}.relation-demo{width:150px;height:150px;margin:0 auto 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.relation-demo i{background:#d9ccb3;border:1px solid #b6a98e}.relation-demo i:nth-child(5){background:var(--navy);box-shadow:inset 0 0 0 4px var(--paper)}.relation-demo.adjacent i:nth-child(2),.relation-demo.adjacent i:nth-child(4),.relation-demo.adjacent i:nth-child(6),.relation-demo.adjacent i:nth-child(8),.relation-demo.edge i:not(:nth-child(5)),.relation-demo.southwest i:nth-child(7),.relation-demo.southeast i:nth-child(9){background:var(--gold)}
.icon-btn[aria-pressed="true"]{color:#ffd465;border-color:#ffd465;box-shadow:0 0 15px rgba(255,212,101,.25)}.icon-btn span{display:block;transition:transform .25s}.icon-btn[aria-pressed="true"] span{animation:soundFloat 1.5s ease-in-out infinite}
.cell.zone-highlight{z-index:2;box-shadow:inset 0 0 0 3px #ffd465,inset 0 0 22px rgba(255,204,77,.5);background:rgba(255,199,72,.13)!important}.note-cross,.note-candidate{position:absolute;z-index:5;pointer-events:none;display:grid;place-items:center;text-shadow:0 2px 5px #08101d}.note-cross{inset:0;color:#ff735f;font:700 clamp(28px,4vw,48px)/1 Arial}.note-candidate{right:7px;top:7px;width:25px;height:25px;border:2px solid #ffe49c;border-radius:50%;background:rgba(13,27,44,.82);color:#ffe49c;font:800 15px/1 system-ui,sans-serif}
#drawingCanvas{position:absolute;left:10px;top:10px;z-index:8;pointer-events:none;touch-action:none}#drawingCanvas.active{pointer-events:auto;cursor:crosshair}
.note-toolbar{width:min(100%,660px);display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 13px;font:12px system-ui,sans-serif}.note-toolbar>span{margin-right:4px;color:#675f54;font-weight:700}.note-toolbar button{min-height:34px;padding:0 11px;border:1px solid rgba(22,34,56,.28);border-radius:4px;background:rgba(255,255,255,.38);color:var(--ink);font:700 12px system-ui,sans-serif;cursor:pointer;transition:.2s}.note-toolbar button b{font-size:15px;color:var(--red)}.note-toolbar button:hover,.note-toolbar button.active{background:var(--navy);color:white;border-color:var(--gold);transform:translateY(-1px)}.note-toolbar button.active b{color:#ffd465}
.flying{position:fixed;z-index:100;border-radius:50%;pointer-events:none;box-shadow:0 12px 35px rgba(0,0,0,.45);animation:flyToCell .4s cubic-bezier(.22,.8,.24,1) forwards}
@keyframes evidencePulse{50%{box-shadow:inset 0 0 0 3px #fff0a6,inset 0 0 35px rgba(255,187,52,.9)}}@keyframes tokenLand{0%{transform:scale(.3) translateY(-30px);opacity:0}70%{transform:scale(1.1)}100%{transform:none;opacity:1}}@keyframes flyToCell{to{transform:translate(var(--dx),var(--dy)) scale(.85);opacity:.15}}@keyframes featureReveal{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}@keyframes soundFloat{50%{transform:translateY(-2px) rotate(5deg)}}
@media(max-width:900px){.avatar{width:36px;height:48px}.suspect{display:block;padding:5px 2px}.suspect-copy strong,.suspect-copy small{text-align:center}.suspect-copy small{display:block}.prop-tag{padding:2px 3px}.token{inset:5% 24%}.feature-overlay strong{bottom:-20px;font-size:9px}.term-card{padding:28px 22px}.relation-demo{width:126px;height:126px}#drawingCanvas{left:4px;top:4px}.note-toolbar{margin:0 0 10px;gap:4px}.note-toolbar button{padding:0 8px}.note-toolbar>span{display:none}}
@media(max-width:420px){.avatar{width:34px;height:46px}.suspect-copy small{display:none}.prop-tag{font-size:7px}.room-label{font-size:7px;padding:2px 3px}}