@font-face{font-family:Alegreya;src:url('/fonts/shared/adb3cba8ab52a6ad.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:SourceSans;src:url('/fonts/shared/b406f71b442ef2d1.woff2') format('woff2');font-weight:400 900;font-display:swap}
:root{--paper:#faf7f0;--ink:#263b3b;--muted:#63716c;--line:#deded2;--teal:#286b64;--coral:#ae472f;--gold:#ddac4f;--room-0:#f7e6b6;--room-1:#d2e9ee;--room-2:#dce9cc;--room-3:#f3d9ca;--space-xs:6px;--space-sm:12px;--space-md:20px;--space-lg:32px;--space-xl:48px;--ease:cubic-bezier(.22,1,.36,1);--axis:24px}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:SourceSans,sans-serif;scroll-behavior:smooth}body{margin:0;min-width:320px}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a4482e;outline-offset:4px}button,input{font-size:16px}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Alegreya,Georgia,serif}a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.masthead{max-width:1192px;margin:auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:16px;font-weight:900;letter-spacing:.14em}.brand-emblem{display:grid;place-items:center;width:35px;height:40px;border:1px solid #899f93;border-radius:5px 5px 14px 14px;font:700 28px Alegreya,serif;color:var(--teal)}.brand small{display:block;margin-top:1px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--muted)}
.header-help{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid #c6d1c6;border-radius:8px;background:#eef2e8;color:#2f5b53;font-size:14px;font-weight:800}.header-help>span{display:grid;place-items:center;width:20px;height:20px;border:1px solid #7c9a89;border-radius:50%}.header-help:hover{background:#dfe9d8}
main{max-width:1192px;margin:auto;padding:0 32px}.intro{padding:25px 0 24px;position:relative}.case-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}.case-meta>span:first-child{letter-spacing:.14em;font-weight:900;color:var(--teal)}.difficulty{background:#e5eddb;color:#416038;border-radius:999px;padding:3px 10px;font-weight:800}h1{font-size:clamp(34px,3.5vw,47px);line-height:1.08;letter-spacing:-.025em;margin:7px 0 8px;font-weight:700}h1>span{color:var(--coral)}.case-story{max-width:700px}.case-story summary{cursor:pointer;color:#647369;font-size:14px;list-style:none;width:fit-content}.case-story summary::-webkit-details-marker{display:none}.case-story summary span{padding-left:8px}.case-story p{font-size:16px;line-height:1.5;max-width:650px;margin:12px 0 0;color:#53645d}
.game-shell{display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:36px;align-items:start;padding-bottom:32px}.plan-panel{min-width:0;background:#fffdf7;border:1px solid var(--line);border-radius:16px;padding:22px 24px 16px;box-shadow:0 8px 30px #37504408}.section-head{margin-bottom:17px}.eyebrow,.section-no,.rule-number,.verdict-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--teal);display:block}.section-head h2{font-size:28px;line-height:1.15;margin:5px 0 4px;letter-spacing:-.015em}.section-head p{font-size:14px;color:var(--muted);margin:0}.board-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.board-heading h2{font-size:27px}.text-button{border:0;background:transparent;color:var(--teal);font-weight:800;font-size:13px;min-height:44px;padding:6px 0;white-space:nowrap}.text-button:hover{text-decoration:underline}.play-guide{font-size:14px;line-height:1.45;color:#59685f;margin:0 0 15px}.play-guide strong{font-weight:600;white-space:normal}.quick-picker{display:none}
.active-dossier{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#edf4e9;border-radius:10px;margin-bottom:18px;min-height:72px;border:1px solid #d9e4d4}.active-dossier img{width:45px;height:50px;object-fit:contain;align-self:end}.active-dossier>div{min-width:0}.selection-label{display:flex;align-items:baseline;gap:8px}.selection-label strong{font-size:16px}.selection-label>span{font-size:10px;font-weight:800;color:#496a5f;letter-spacing:.09em}.active-dossier p{font-size:16px;font-weight:700;line-height:1.25;margin:3px 0 0}.active-dossier[data-person=p2]{background:#e9f0f7;border-color:#cedee9}.active-dossier[data-person=p3]{background:#f9eee7;border-color:#efdbce}.active-dossier[data-person=p4]{background:#eef2df;border-color:#d8e1c5}.active-dossier[data-person=p0]{background:#f2eaf2;border-color:#e3d4e4}
.plan-wrap{max-width:620px;margin:auto;padding:5px 5px 6px 0}.board-surface{position:relative}.grid{display:grid;grid-template-columns:var(--axis) repeat(5,minmax(0,1fr));grid-template-rows:var(--axis) repeat(5,minmax(0,1fr));aspect-ratio:1;touch-action:manipulation}.axis{display:grid;place-items:center;font-size:12px;font-weight:800;color:#65746d}.cell{position:relative;min-width:0;min-height:0;border:0;border-right:1px solid #62735a26;border-bottom:1px solid #62735a26;padding:0;background:var(--room-0);overflow:visible;transition:background-color .16s}.cell.room-1{background:var(--room-1)}.cell.room-2{background:var(--room-2)}.cell.room-3{background:var(--room-3)}.cell:not(.blocked):hover{box-shadow:inset 0 0 0 3px #476f6266}.cell:focus-visible{outline:3px solid #995331;outline-offset:-6px;z-index:5}.cell.blocked{cursor:not-allowed}.cell .object{position:absolute;inset:13%;width:74%;height:74%;object-fit:contain;pointer-events:none;opacity:1}.cell.room-anchor .object{top:20%;height:68%}.cell .room-label{position:absolute;z-index:5;left:5px;top:5px;padding:3px 7px;border-radius:999px;background:#806124;color:#fffaf0;box-shadow:0 1px 2px #3b382419;font-size:clamp(8px,.78vw,10px);font-weight:900;line-height:1.1;letter-spacing:.045em;white-space:nowrap;pointer-events:none}.cell.room-1 .room-label{background:#376b80}.cell.room-2 .room-label{background:#4b7043}.cell.room-3 .room-label{background:#975d49}
#architecture{position:absolute;inset:var(--axis) 0 0 var(--axis);z-index:3;pointer-events:none}#architecture svg{display:block;width:100%;height:100%;overflow:visible}.wall-line{stroke:#354740;stroke-width:3;stroke-linecap:square;vector-effect:non-scaling-stroke}.window-line{stroke:#338db2;stroke-width:2;vector-effect:non-scaling-stroke}.door-jamb{stroke:#b0803c;stroke-width:3;vector-effect:non-scaling-stroke}.door-swing{stroke:#b0803c;stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}
.cell .placed-token{position:absolute;z-index:4;inset:14%;border-radius:50%;background:#b9dbcf;border:2px solid #fffdf5;box-shadow:0 2px 6px #2d403c40;display:grid;place-items:center;pointer-events:none}.placed-token img{width:88%;height:88%;object-fit:contain;border-radius:50%}.placed-token b{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:26px;height:26px;border:2px solid #fffdf5;border-radius:50%;background:#286b64;color:#fffaf0;font-size:15px}.placed-token.person-p2{background:#bacee1}.placed-token.person-p2 b{background:#3b6688}.placed-token.person-p3{background:#edc4ad}.placed-token.person-p3 b{background:#a65336}.placed-token.person-p4{background:#ccdaae}.placed-token.person-p4 b{background:#567039}.placed-token.person-p0{background:#ddc6df}.placed-token.person-p0 b{background:#7e5180}.cell.current-person .placed-token{outline:3px solid #315e54;outline-offset:2px}.placed-token.fresh{animation:token-in .24s var(--ease)}.note-token{position:absolute;bottom:5px;left:5px;right:5px;z-index:4;font-size:13px;color:#1c554e;font-weight:900;letter-spacing:3px;pointer-events:none}.cross-token{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font-size:clamp(26px,4vw,43px);color:#a14530;font-weight:600;pointer-events:none}.solved .plan-wrap{border-radius:8px;box-shadow:0 0 0 3px #82a16d}
.plan-key{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:17px;margin:14px 0 18px;color:#63756a;font-size:12px}.plan-key>span{display:flex;align-items:center;gap:6px}.plan-key i{display:inline-block;width:23px;height:9px;position:relative}.key-wall{border-top:3px solid #354740}.key-window{border-top:2px solid #338db2;border-bottom:2px solid #338db2;height:6px!important}.key-door{border-top:3px solid #354740}.key-door:after{content:'';position:absolute;left:6px;top:-4px;width:11px;height:6px;background:#fffdf7;border-left:2px solid #b0803c;border-right:2px solid #b0803c}
.board-controls{border-top:1px solid var(--line);padding-top:14px}.mode-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mode{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:5px 7px;border:1px solid #d9ded3;border-radius:7px;background:#f5f7ef;color:#52675d;font-weight:700;font-size:13px;transition:background .15s,transform .15s}.mode>span{font-size:20px;line-height:1}.mode:hover{background:#e4ecde}.mode.active{background:#286b64;border-color:#286b64;color:#fffdf4}.submit-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:13px}.case-progress{flex:none}.progress-numbers{display:flex;align-items:baseline;gap:5px;font-size:13px;color:#657367}.progress-numbers strong{font-size:23px;line-height:1;color:#3d5a4b;font-variant-numeric:tabular-nums}.progress-pips{display:flex;gap:4px;margin-top:6px}.progress-pips i{width:17px;height:4px;background:#e0e4d7;border-radius:2px;transition:background .2s}.progress-pips i.filled{background:#3d7a63}.submit-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;flex:1;max-width:300px;padding:8px 16px;border:0;border-radius:9px;background:var(--coral);color:#fff9ee;box-shadow:0 3px 0 #7d3224;font-weight:800;font-size:18px;transition:transform .18s,background .18s}.submit-button>span:last-child{margin-left:auto;font-size:23px}.submit-button>span:nth-child(2){text-align:left}.submit-button small{display:block;font-size:11px;font-weight:600;line-height:1.25;margin-top:1px;opacity:.85}.submit-icon{font-size:22px}.submit-button:disabled{background:#efd5c7;color:#7a4834;box-shadow:0 2px 0 #d4bba7}.submit-button:not(:disabled):hover{background:#943b27;transform:translateY(-1px)}#feedback{font-size:14px;font-weight:700;line-height:1.3;margin:0;color:var(--teal)}#feedback:not(:empty){margin-top:12px;padding:9px 12px;background:#edf2e6;border-radius:6px}#feedback.error{color:#913f2b;background:#f9e8dc;animation:hint-reveal .25s var(--ease)}#feedback.success{color:#316539;background:#e5efd9}.tool-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:14px 0}.tool-actions p{font-size:11px;color:#6a7a6c;margin:0 auto 0 0}.tool-actions button{min-height:44px;border:0;background:transparent;color:#546e60;padding:5px 0;font-size:12px;font-weight:700}.tool-actions button:disabled{color:#a3aaa0}.tool-actions button:not(:disabled):hover{text-decoration:underline}.object-guide{border-top:1px solid var(--line);padding-top:12px}.object-guide summary{font-size:13px;font-weight:800;cursor:pointer;color:#54685b}.object-guide summary span{float:right;font-size:11px;font-weight:500;color:#758072}.object-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 5px}.legend-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;font-size:12px;color:#485e51}.legend-item img{width:42px;height:42px;object-fit:contain}.legend-note{grid-column:1/-1;text-align:center;font-size:11px;color:#788373}
.suspects-panel{min-width:0;padding-top:6px}.suspects{display:flex;flex-direction:column;gap:10px}.suspect{display:grid;grid-template-columns:66px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:13px;position:relative;width:100%;min-height:108px;border:1px solid #dedfd4;border-radius:11px;padding:12px;text-align:left;background:#fffdf6;color:var(--ink);transition:background .18s,border-color .18s,transform .18s}.suspect:hover{background:#f1f4e9;transform:translateX(-2px)}.suspect.selected{border:2px solid #538776;padding:11px;background:#edf5e9}.suspect .portrait{grid-column:1;grid-row:1/4;width:66px;height:80px;object-fit:contain;align-self:center}.suspect .identity{display:flex;align-items:center;gap:7px;grid-column:2;grid-row:1}.suspect .identity strong{font-size:18px;font-weight:800;line-height:1.1}.suspect .code{display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;background:#286b64;color:#fffdf5;font-size:11px;font-weight:900}.suspect.person-p2 .code{background:#3b6688}.suspect.person-p3 .code{background:#a65336}.suspect.person-p4 .code{background:#567039}.suspect.person-p0 .code{background:#7e5180}.suspect .role{grid-column:2;grid-row:2;font-size:11px;color:#6c796c;margin:2px 0 6px}.suspect .clue{grid-column:2;grid-row:3;font-size:15px;line-height:1.25;font-weight:700;align-self:start}.suspect.placed .identity:after{content:'✓';margin-left:auto;color:#3e795d;font-size:16px}.suspect.victim{background:#f6eef3}.suspect.victim.selected{background:#efe4ee;border-color:#9b78a0}.hint-box{margin-top:20px;border-top:1px solid #d8d9ca;padding:18px 0 0}.hint-heading{display:flex;gap:10px;align-items:center}.hint-symbol{display:grid;place-items:center;width:38px;height:38px;color:#966827;background:#f5e8c9;border-radius:50%;font-size:23px;flex:none}.hint-box h3{font-size:22px;line-height:1.1;margin:0 0 3px}.hint-box p{font-size:13px;color:#6a7768;margin:0}.hint-box button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:10px 14px;border:1px solid #d4c9a6;border-radius:8px;color:#785e26;background:#f7efd9;font-size:14px;font-weight:800}.hint-box button:hover{background:#eee1bb}.hint-box button:disabled{color:#7e816e;background:#efeee4;border-color:#d9dccd}#hints{margin:12px 0;padding-left:0;counter-reset:hint;list-style:none}#hints li{position:relative;counter-increment:hint;margin:8px 0;padding:13px 12px 13px 39px;background:#f4ead0;border-radius:8px;color:#604c24;font-size:15px;line-height:1.35;font-weight:700;animation:hint-reveal .25s var(--ease)}#hints li:before{content:counter(hint);position:absolute;left:12px;top:12px;font-size:16px;color:#916d28}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 0 24px;color:#748070;font-size:11px}
/* The rules are a scrollable illustrated sheet with controls outside its scrolling area. */
dialog{color:var(--ink);border:1px solid #dddaca;border-radius:16px;padding:0;background:var(--paper);max-height:92dvh;width:min(940px,calc(100% - 28px));box-shadow:0 25px 100px #243b3440}dialog::backdrop{background:#193a32b8;backdrop-filter:blur(3px)}.rules-dialog[open]{display:flex;flex-direction:column}.rules-top{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:24px 28px 18px;border-bottom:1px solid var(--line);flex:none}.rules-top h2{font-size:36px;margin:5px 0 7px;line-height:1.1}.rules-top p{max-width:600px;margin:0;font-size:14px;color:#697667;line-height:1.4}.rules-top button{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid #d8ddcd;border-radius:50%;background:#eff1e6;font-size:27px;color:#4d6555}.rules-content{padding:22px 28px;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;gap:14px}.rule-card{display:flex;align-items:center;gap:18px;background:#fffdf6;border:1px solid #e2dfd2;border-radius:10px;padding:18px;min-width:0}.rule-copy{flex:1;min-width:0}.rule-wide,.rule-controls{grid-column:1/-1}.rule-wide{background:#f0eddd}.rule-card h3{font-size:24px;line-height:1.1;margin:6px 0 9px}.rule-card p{font-size:14px;line-height:1.45;color:#5e6d5e;margin:0}.rule-number{font-size:9px;color:#8b6331}.example{display:grid;gap:2px;background:#3c5144;padding:3px;aspect-ratio:1;width:120px;flex:none;margin:auto;border-radius:4px;overflow:hidden}.example-rows,.example-neighbor{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.example>span{background:#f1eddf;display:grid;place-items:center;font-weight:900;font-size:22px;min-width:0;min-height:0}.example .mini-no{background:#f1d8c9;color:#9a4933}.example .mini-yes{background:#dcebd0;color:#367343}.example .mini-person,.example .mini-victim{background:#c26343;color:#fff9ec}.example .mini-object{background:#eae4cf}.example img{width:85%;height:85%;object-fit:contain}.example-right{grid-template-columns:repeat(3,1fr);aspect-ratio:2.4}.example-pair{grid-template-columns:1fr 1fr 5px 1fr;aspect-ratio:2.4}.example-pair .room-wall{background:#365044}.example-pair .mini-other{background:#d3e3ee;color:#36617c}.object-examples{display:flex;gap:8px;width:120px;flex:none}.object-examples>div{flex:1;min-width:0;text-align:center}.object-examples img{width:100%;height:80px;object-fit:contain}.object-examples strong{font-size:10px;white-space:nowrap;color:#367343}.object-examples>div:last-child strong{color:#9a4933}.control-example{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;padding:12px;background:#e6edda;border-radius:8px}.control-example span{font-size:9px;font-weight:800;color:#526d57}.control-example strong{display:grid;place-items:center;width:35px;height:35px;background:#2b685e;color:#fffdf1;border-radius:5px;font-size:19px}.control-example .small-mark{background:#fffdf1;color:#2b685e;font-size:14px}.plan-symbols{display:grid;gap:12px;padding:12px;width:120px;flex:none;background:#eae7d8;border-radius:5px}.plan-symbols>span{display:block;width:100%;height:15px;position:relative;background:#dce8d2;border-top:4px solid #354740}.plan-symbols .symbol-door:after{content:'';position:absolute;left:35%;top:-6px;width:30%;height:8px;background:#fffdf1;border-left:3px solid #b0803c;border-right:3px solid #b0803c}.plan-symbols .symbol-window:after{content:'';position:absolute;left:25%;top:-6px;width:50%;height:7px;background:#e6f4f7;border-top:2px solid #338db2;border-bottom:2px solid #338db2}.example-room{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:120px;flex:none;min-height:100px;padding:3px;background:#3c5144;border-radius:4px}.example-room>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:4px 2px;background:var(--room-1)}.example-room>span:last-child{background:var(--room-2)}.example-room small{font-size:8px;font-weight:800;text-align:center;color:#3d5a4c}.example-room strong{font-size:30px;color:#a84e40;line-height:1.2}.example-room>span:last-child strong{color:#28745c}.rules-bottom{padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);flex:none}.rules-bottom p{font-size:12px;line-height:1.35;margin:0;color:#6b7969}.rules-bottom p span{padding:0 4px}.primary{min-height:46px;padding:10px 18px;white-space:nowrap;border:0;border-radius:8px;background:var(--teal);color:#fffbed;font-weight:800;font-size:14px}
.verdict-dialog{width:min(500px,calc(100% - 28px));padding:36px;text-align:center;background:#fff9e8;overflow:hidden;border:1px solid #d9c389}.verdict-kicker{color:#8b6b30}.verdict-seal{position:relative;display:grid;place-items:center;width:88px;height:88px;margin:25px auto 20px;background:#427458;color:#fff9e8;border:5px double #fff9e8;border-radius:50%;font-size:48px;box-shadow:0 0 0 4px #427458;animation:seal-in .5s var(--ease)}.verdict-dialog h2{font-size:52px;line-height:1.1;margin:0 0 10px;animation:hint-reveal .4s var(--ease)}.verdict-dialog p{position:relative;font-size:18px;line-height:1.4;color:#65715b}.verdict-actions{position:relative;display:flex;gap:10px;justify-content:center;margin-top:25px}.verdict-actions button{min-height:45px;padding:8px 13px;border:1px solid #bcccb2;border-radius:7px;background:#eef2df;color:#406247;font-size:13px;font-weight:800}.verdict-actions button:last-child{background:#3d7053;color:#fff9eb;border-color:#3d7053}.verdict-rays{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 40%,#dcad4d13 0deg 8deg,transparent 8deg 23deg);pointer-events:none;animation:hint-reveal .5s ease-out}.review-error .plan-wrap{animation:plan-review-error .35s ease-in-out}
@keyframes token-in{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes hint-reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes seal-in{from{opacity:0;transform:scale(1.4) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(-5deg)}}@keyframes plan-review-error{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(3px)}}
@media(max-width:1080px){main{padding:0 24px}.masthead{padding:16px 24px}.game-shell{grid-template-columns:minmax(0,1fr) 320px;gap:24px}.plan-panel{padding:18px 18px 14px}.suspect{grid-template-columns:55px minmax(0,1fr);column-gap:10px}.suspect .portrait{width:55px;height:70px}.suspect .clue{font-size:14px}.board-heading h2{font-size:24px}.submit-button{font-size:17px}.rules-content{grid-template-columns:1fr}.rule-wide,.rule-controls{grid-column:auto}.rule-card{gap:26px}.example,.object-examples,.plan-symbols,.example-room{width:140px}}
@media(max-width:900px){.game-shell{grid-template-columns:1fr;gap:26px}.plan-panel{width:100%;max-width:660px;margin:auto}.suspects-panel{max-width:660px;width:100%;margin:auto}.suspects{display:grid;grid-template-columns:1fr 1fr}.suspect.victim{grid-column:1/-1}.suspect .clue{font-size:15px}.hint-box{margin-top:18px}.quick-picker{display:flex;gap:7px;margin:0 0 12px}.quick-person{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 3px;border:1px solid #d9dfd1;border-radius:9px;background:#f7f7ed;color:#4f6656;font-size:12px;font-weight:800;min-height:70px}.quick-person img{width:43px;height:43px;object-fit:contain}.quick-person.selected{background:#deebd5;border:2px solid #6b977c;padding:5px 2px;color:#265b44}.quick-person.placed span:after{content:' ✓';font-size:10px}.active-dossier img{display:none}.active-dossier{min-height:62px;margin-bottom:12px}.active-dossier p{font-size:16px}.tool-actions p{font-size:12px}.intro{max-width:660px;margin:auto}.masthead{max-width:708px}.game-shell .section-head h2{font-size:27px}.cell .room-label{font-size:10px}}
@media(max-width:760px){:root{--axis:21px}body{padding-bottom:calc(190px + env(safe-area-inset-bottom))}.masthead{padding:12px 16px}.brand{font-size:13px;gap:8px}.brand-emblem{width:29px;height:34px;font-size:24px}.brand small{font-size:9px}.header-help{font-size:12px;gap:5px;padding:7px 9px}.header-help>span{width:17px;height:17px}main{padding:0 14px}.intro{padding:19px 2px 17px}h1{font-size:34px}.case-meta{font-size:11px;gap:10px}.case-story summary{font-size:13px}.case-story p{font-size:15px}.plan-panel{padding:17px 12px 12px;border-radius:12px}.game-shell{gap:25px;padding-bottom:20px}.game-shell .section-head h2{font-size:24px}.board-heading{margin-bottom:6px}.board-heading .eyebrow{font-size:9px}.play-guide{font-size:13px;margin-bottom:12px}.play-guide strong{display:block}.quick-picker{display:flex;gap:5px;margin-bottom:10px}.quick-person{min-height:69px;font-size:12px}.quick-person img{width:40px;height:43px}.active-dossier{padding:9px 11px;min-height:65px}.selection-label strong{font-size:14px}.selection-label>span{font-size:9px}.active-dossier p{font-size:15px;line-height:1.3}.plan-wrap{padding:3px 3px 3px 0}.axis{font-size:11px}.cell .room-label{left:3px;top:4px;padding:3px 5px;font-size:clamp(7px,1.9vw,10px)}.cell .object{inset:11%;width:78%;height:78%}.cell.room-anchor .object{top:23%;height:67%}.cell .placed-token{inset:14%;border-width:2px}.placed-token b{width:21px;height:21px;right:-4px;bottom:-4px;font-size:12px}.cell.current-person .placed-token{outline-width:2px;outline-offset:1px}.note-token{font-size:11px;letter-spacing:1px;bottom:3px;left:3px}.plan-key{font-size:11px;gap:17px;margin:12px 0}.board-controls{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#fffdf5;border-top:1px solid #c6d1be;padding:8px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));box-shadow:0 -4px 20px #314b3412}.mode-group,.submit-row,#feedback{max-width:636px;margin-left:auto;margin-right:auto}.mode-group{gap:6px}.mode{min-height:44px;padding:5px 3px;font-size:12px;border-radius:7px;gap:5px}.mode>span{font-size:18px}.submit-row{gap:13px;margin-top:8px}.case-progress{min-width:99px}.progress-numbers{font-size:12px}.progress-numbers strong{font-size:22px}.progress-pips{margin-top:5px}.progress-pips i{width:15px;height:4px}.submit-button{max-width:none;min-height:50px;font-size:17px;padding:7px 14px;gap:9px}.submit-button small{font-size:10px}.submit-button>span:last-child{font-size:21px}#feedback:not(:empty){margin:7px auto 0;padding:7px 10px;font-size:12px}.tool-actions{flex-wrap:wrap;justify-content:flex-start;gap:16px;margin:5px 0 10px}.tool-actions p{flex-basis:100%;font-size:12px;margin:0}.tool-actions button{font-size:13px;min-height:44px}.object-guide{padding-top:10px}.object-guide summary{font-size:13px}.object-guide summary span{font-size:10px}.object-legend{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px}.legend-item{font-size:11px}.suspects-panel{padding:0 3px}.suspects{display:flex;gap:8px}.suspect{grid-template-columns:58px minmax(0,1fr);min-height:99px}.suspect .portrait{width:58px;height:75px}.suspect .identity strong{font-size:17px}.suspect .clue{font-size:15px}.suspect .role{font-size:11px}.hint-box{padding-top:16px}.hint-box button{min-height:46px}.rules-dialog{width:calc(100% - 16px);max-height:94dvh;border-radius:12px}.rules-top{padding:17px 16px 14px;gap:12px}.rules-top h2{font-size:29px}.rules-top p{font-size:12px}.rules-top button{width:44px;height:44px}.rules-content{padding:14px 12px;gap:10px}.rule-card{padding:14px;gap:14px}.rule-card h3{font-size:22px}.rule-card p{font-size:13px;line-height:1.45}.example,.object-examples,.plan-symbols,.example-room{width:105px}.example>span{font-size:20px}.object-examples img{height:70px}.object-examples strong{font-size:9px}.rules-bottom{padding:12px 14px;display:block}.rules-bottom p{font-size:10px;margin-bottom:8px}.rules-bottom button{width:100%;font-size:14px;min-height:45px}.rule-controls{flex-direction:column;align-items:stretch}.control-example{align-self:center}.verdict-dialog{padding:28px 22px}.verdict-dialog h2{font-size:46px}.verdict-dialog p{font-size:17px}.verdict-actions{gap:7px}.verdict-actions button{font-size:12px;padding:8px 10px}footer{display:block;padding:16px 3px;font-size:11px}footer span{display:block;margin-bottom:4px}}
@media(max-width:380px){main{padding:0 9px}.masthead{padding-left:12px;padding-right:12px}.brand small{display:none}.header-help{font-size:11px}.plan-panel{padding-left:9px;padding-right:9px}.game-shell .board-heading h2{font-size:22px}.text-button{font-size:12px}.mode{font-size:11px}.submit-button{font-size:16px}.rule-card{flex-direction:column;align-items:stretch}.example,.object-examples,.plan-symbols,.example-room{width:140px;align-self:center}.object-examples{margin:auto}.rule-card .example-right,.rule-card .example-pair{width:180px}.rules-top h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width:760px){html{scroll-padding-top:145px;scroll-padding-bottom:175px}.selection-panel{position:sticky;top:0;z-index:8;background:#fffdf7;padding-top:5px;padding-bottom:1px}}
@media(max-width:380px){.mode{flex-direction:column;gap:0;font-size:10px;line-height:1.15;min-height:45px}.mode>span{font-size:17px}}
.case-story summary,.object-guide summary{min-height:44px;display:flex;align-items:center;gap:10px}.object-guide summary{justify-content:space-between}.object-guide summary span{float:none}.object-guide summary:before{content:'+';font-size:18px;font-weight:600}.object-guide[open] summary:before{content:'−'}

.object-guide h3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font-family:inherit;font-size:14px;color:#54685b}.object-guide h3 span{font-size:11px;font-weight:500}.legend-item{font-weight:600}
/* The collection uses the approved game's palette, typography and physical-paper motif. */
body:not(.view-game) .intro,body:not(.view-game) .game-shell,body:not(.view-game) main>footer{display:none}
.view-game .file-hub{display:none}
.view-game main>footer{display:flex}
.file-hub{padding:34px 0 48px;min-height:75vh}
.hub-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}
.hub-heading h1{font-size:clamp(42px,5vw,64px);margin:6px 0 11px}
.hub-heading p{font-size:17px;line-height:1.45;color:#5e6e64;margin:0;max-width:510px}
.hub-progress{flex:none;min-width:112px;padding:14px 18px 15px;border:1px solid #d1ddcf;background:#edf3e9;border-radius:10px;color:#42674f;text-align:center}
.hub-progress strong{display:block;font:700 44px/1 Alegreya,Georgia,serif}
.hub-progress span{font-size:12px;font-weight:800}
.file-level{padding:22px 0 26px;border-top:1px solid #d6d9ca}
.level-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.level-heading h2{font-size:30px;line-height:1.1;margin:2px 0 0}
.level-pill{border-radius:999px;background:#e6eddb;color:#426341;font-weight:800;font-size:12px;padding:6px 12px;white-space:nowrap}
.file-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.file-card{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;column-gap:12px;width:100%;min-height:150px;padding:24px 24px 21px;border:1px solid #c0cdbb;border-bottom:5px solid #73927c;border-radius:7px 11px 11px 11px;background:#e1e9d5;color:#2b453b;text-align:left;box-shadow:0 8px 0 #d1d9c3,0 12px 18px #38564518;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s}
.file-card:before{content:'';position:absolute;left:18px;top:-11px;width:98px;height:13px;background:#e1e9d5;border:1px solid #c0cdbb;border-bottom:0;border-radius:6px 9px 0 0}
.file-card:hover,.file-card[aria-expanded=true]{transform:translateY(-4px);background:#d6e6d0;box-shadow:0 11px 0 #c6d5bf,0 18px 24px #38564520}
.file-number{font-size:10px;font-weight:900;letter-spacing:.18em;color:#537665}
.file-status{grid-column:2;grid-row:1;background:#f6f4e9;color:#4e745c;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em;align-self:start}
.file-card.completed .file-status{background:#397451;color:#fff8ed}
.file-title{grid-column:1/-1;grid-row:2;font:700 clamp(25px,2.3vw,34px)/1.05 Alegreya,Georgia,serif;align-self:center;padding:12px 0 7px;letter-spacing:-.02em}
.file-world{grid-column:1/-1;grid-row:3;color:#60776c;font-size:14px;font-weight:700}
.file-preview{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:#203d35b5;backdrop-filter:blur(4px)}
.file-preview[hidden]{display:none}
.preview-paper{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;width:min(810px,100%);max-height:min(90dvh,790px);overflow:auto;background:#fffbec;border:1px solid #e6d6b8;border-radius:5px;box-shadow:0 18px 0 #d2c7aa,0 30px 70px #1d392e70;padding:clamp(24px,4vw,42px);transform:translateY(30px) rotate(-2deg) scale(.96);opacity:0;transition:transform .55s var(--ease),opacity .45s var(--ease)}
.paper-out .preview-paper{transform:translateY(0) rotate(0) scale(1);opacity:1}
.preview-copy{min-width:0;align-self:center}.preview-number{color:#8c6541;font-size:11px;font-weight:900;letter-spacing:.13em;margin:20px 0 7px}
.preview-paper h2{font-size:clamp(33px,4vw,52px);line-height:1.04;margin:0 0 12px;letter-spacing:-.02em}
.preview-world{display:inline-flex;align-items:center;min-height:33px;padding:6px 12px;border-radius:999px;background:#d7e7df;color:#27675b;font-size:13px;font-weight:900}
#preview-opening{font-size:16px;line-height:1.5;color:#56695e;margin:20px 0 24px}
.preview-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.preview-play{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:50px;padding:10px 17px;border-radius:8px;background:#ae472f;color:#fff9ee;font-weight:900;font-size:17px;text-decoration:none;box-shadow:0 3px 0 #793523;transition:transform .16s,background .16s}
.preview-play:hover{transform:translateY(-2px);background:#943b27}
#preview-close{min-height:44px;padding:8px 3px;border:0;background:transparent;color:#526d5b;font-weight:800}
.preview-map{display:grid;place-items:center;background:#f4f1e6;border:1px solid #ddd9c9;border-radius:7px;padding:12px;align-self:center}
.preview-map svg{display:block;width:100%;max-width:350px;max-height:350px;aspect-ratio:1}
.back-to-files{display:inline-flex;align-items:center;min-height:40px;color:#3b7661;font-size:13px;font-weight:800;text-decoration:none}
.back-to-files:hover{text-decoration:underline}
.verdict-files{display:grid;place-items:center;min-height:45px;padding:8px 13px;border:1px solid #3d7053;border-radius:7px;background:#3d7053;color:#fff9eb;text-decoration:none;font-size:13px;font-weight:800}
.grid{grid-template-columns:var(--axis) repeat(var(--count,5),minmax(0,1fr));grid-template-rows:var(--axis) repeat(var(--count,5),minmax(0,1fr))}
.plan-wrap{overflow-x:auto;overscroll-behavior-x:contain}
@media(max-width:900px){.file-hub{padding-top:24px}.preview-paper{grid-template-columns:1fr 1fr}}
@media(max-width:760px){body.view-hub{padding-bottom:0}.file-hub{padding:20px 2px 36px}.hub-heading{align-items:start;margin-bottom:27px}.hub-heading h1{font-size:38px}.hub-heading p{font-size:15px}.hub-progress{min-width:76px;padding:9px 10px}.hub-progress strong{font-size:30px}.hub-progress span{font-size:10px}.file-level{padding:18px 0 23px}.file-pair{gap:12px}.file-card{min-height:139px;padding:17px 13px 13px}.file-card:before{left:11px;width:65px}.file-title{font-size:clamp(22px,5vw,27px)}.file-world{font-size:12px}.file-status{font-size:9px;padding:4px 6px}.file-preview{padding:12px}.preview-paper{grid-template-columns:1fr;gap:16px;max-height:93dvh;padding:22px}.preview-map{order:-1}.preview-map svg{max-height:190px}.preview-number{margin:12px 0 5px}#preview-opening{font-size:14px;margin:12px 0 16px}.preview-paper h2{font-size:36px}.preview-actions{gap:12px}.board-surface{min-width:var(--min-board-width)}.plan-wrap{scrollbar-color:#a0b69f #eff0e5}.grid.large-grid .room-label{font-size:8px;padding:3px 5px}.grid.large-grid .placed-token b{width:19px;height:19px;font-size:10px}}
@media(max-width:380px){.file-pair{grid-template-columns:1fr}.file-card{min-height:125px}.hub-heading{gap:10px}.hub-heading h1{font-size:33px}.hub-progress{min-width:70px}.level-pill{font-size:10px}.preview-map svg{max-height:160px}}
@media(prefers-reduced-motion:reduce){.preview-paper,.file-card{transition:none!important}.preview-paper{opacity:1;transform:none}}

body.preview-open{overflow:hidden}
.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;width:126px;aspect-ratio:1;flex:none;background:#3c5144;padding:3px;border-radius:4px}.rule-grid>span{display:grid;place-items:center;background:#f0ead7;color:#647564;font-size:18px;font-weight:900}.rule-grid .rule-dot{background:#dcebd0;color:#336747}.rule-grid .rule-center{background:#bb6547;color:#fff9eb}.rule-grid .rule-other{background:#dbe6ef}.rule-diagonal{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.rule-corner>span:not(.rule-other){background:#dfecc9}.rule-openings{display:flex;gap:7px;width:126px;flex:none}.rule-openings>div{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:95px;background:#e8f0db;border:3px solid #3c5144;border-radius:4px}.rule-openings>div:last-child{background:#e5edf0}.rule-openings b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#bf6548;color:#fff9ed;font-size:17px}.rule-openings small{position:absolute;bottom:5px;font-size:8px;font-weight:900;color:#4b6659}.opening-window{position:absolute;top:-4px;left:18%;right:18%;height:5px;border-top:2px solid #338db2;border-bottom:2px solid #338db2;background:#e6f4f7}.opening-door{position:absolute;left:-4px;top:23%;bottom:23%;width:6px;background:#e5edf0;border-top:2px solid #b0803c;border-bottom:2px solid #b0803c}
@media(max-width:760px){.rule-grid,.rule-openings{width:105px}}
@media(max-width:380px){.rule-grid,.rule-openings{width:140px;align-self:center}}

/* Direct feedback for reading clues and committing a placement. */
.room-outline{opacity:0;transition:opacity .22s ease-out}.room-outline .outline-line{stroke:#e9ac47;stroke-width:10;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.board-surface:is(.hover-room-0,.clue-room-0) .room-outline[data-room-id="0"],.board-surface:is(.hover-room-1,.clue-room-1) .room-outline[data-room-id="1"],.board-surface:is(.hover-room-2,.clue-room-2) .room-outline[data-room-id="2"],.board-surface:is(.hover-room-3,.clue-room-3) .room-outline[data-room-id="3"]{opacity:1}
.cell .object,.legend-item img{transition:transform .28s var(--ease),filter .28s var(--ease)}
.cell.blocked .object{filter:brightness(.68) saturate(.78) drop-shadow(0 2px 2px #27342d55)}
.cell:not(.blocked) .object{filter:drop-shadow(0 2px 2px #27342d2a)}
.cell:hover .object,.cell:focus-visible .object,.cell.clue-object .object,.legend-item:hover img{transform:translateY(-3px) rotate(-3deg) scale(1.1)}
.cell.blocked:hover .object,.cell.blocked:focus-visible .object,.cell.blocked.clue-object .object{filter:brightness(.78) saturate(.9) drop-shadow(0 5px 4px #27342d55)}
.cell.clue-object{box-shadow:inset 0 0 0 4px #dd9d35;z-index:2;animation:clue-pulse .65s var(--ease) both}
.cell.clue-possible{box-shadow:inset 0 0 0 3px #378f81,0 0 0 2px #b8e1c7;z-index:2;animation:clue-pulse .65s var(--ease) both}
.cell.clue-muted{filter:saturate(.6) brightness(.96)}
.cell .hold-progress{position:absolute;inset:0;z-index:7;display:grid;place-items:center;pointer-events:none;background:#f7f2de72}
.hold-progress svg{width:min(85%,44px);height:min(85%,44px);overflow:visible;transform:rotate(-90deg)}
.hold-progress circle{fill:none;stroke:#a94d31;stroke-width:4;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;animation:hold-fill .65s linear forwards}
.cross-token.auto-cross-token{color:#a4513b99}.cross-token.fresh-cross{animation:cross-in .35s var(--ease) both}
@keyframes hold-fill{to{stroke-dashoffset:0}}@keyframes cross-in{from{opacity:0;transform:scale(.45) rotate(-22deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes clue-pulse{from{filter:brightness(1.12)}to{filter:brightness(1)}}

/* MORDLOGIK: lamplit archive, manila folders and printed case sheets. */
html{background:#1d2423}body{background:radial-gradient(ellipse at 25% 0,#39413a 0,transparent 65%),#1d2423;color:#ede5d2;min-height:100vh}.masthead{border-color:#596052}.brand{color:#eee0bb}.brand-emblem{border-color:#b99c63;color:#e5c17d}.brand small{color:#b9bdad}.header-help{background:#343e36;border-color:#626d56;color:#efdfb7}.header-help:hover{background:#46503f}.file-hub .eyebrow,.suspects-panel>.section-head .eyebrow{color:#d6b674}.hub-heading p,.suspects-panel>.section-head p,.case-meta,.case-story summary,.case-story p{color:#c0c6b9}.hub-heading h1{max-width:760px}.hub-heading h1>span{color:#ce825d}.hub-progress{background:#2c372f;border-color:#737b60;color:#e1c88f;border-radius:3px}.file-level{border-color:#62695880;padding-top:26px;padding-bottom:36px}.level-heading h2{color:#ede0c2}.level-pill{background:#414936;color:#e9d5a4}.back-to-files{color:#d9b77c}.case-meta>span:first-child{color:#d9b77c}.plan-panel{background:#eee9da;color:#263b3b;border-color:#a89f85;box-shadow:0 16px 38px #070c0a44}.selection-panel{background:#eee9da}.suspect{background:#e9e4d6;border-color:#afa994}.suspect.victim{background:#dbd2d7}.suspects-panel .hint-box{border-color:#68715d}.hint-box h3{color:#ede0c2}.hint-box p{color:#bfc8b6}footer{border-color:#596052;color:#b5bda9}
.file-pair{gap:28px;padding-top:66px}.file-card{display:block;isolation:isolate;min-height:220px;padding:0;background:#b99045!important;border:1px solid #a77c33;border-radius:5px 12px 12px 12px;box-shadow:0 7px 0 #8c692f,0 18px 28px #090d0b55;color:#443820;perspective:900px}.file-card:before{z-index:-1;top:-16px;left:12px;width:110px;height:18px;background:#c5a159;border-color:#a77c33}.file-card:hover,.file-card[aria-expanded=true]{transform:translateY(-3px);box-shadow:0 9px 0 #8c692f,0 22px 35px #090d0b66}.file-cover{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;min-height:220px;padding:24px;background:linear-gradient(105deg,#dfc47d,#d2ad5f);border:1px solid #edd597;border-radius:4px 10px 10px 10px;transform-origin:bottom;transition:transform .5s var(--ease);box-shadow:inset 0 -8px 10px #8c692f20}.file-number{color:#66502e}.file-world{color:#665436}.file-status{color:#624b28;background:#f0dfaf}.file-sheet{position:absolute;z-index:1;left:7%;right:7%;top:0;height:210px;background:#f8f1dc;border:1px solid #d4c8a8;padding:12px 16px;transform:translateY(-48px) rotate(-2deg);transition:transform .55s var(--ease);box-shadow:0 3px 12px #241c1c40;overflow:hidden}.file-sheet svg{display:block;width:100%;height:170px;margin-top:8px}.sheet-heading{display:block;color:#695c42;font-size:10px;font-weight:900;letter-spacing:.08em}.file-card:hover .file-sheet{transform:translateY(-64px) rotate(-1deg)}.file-card.opened .file-sheet{transform:translateY(-90px) rotate(-2deg)}.file-card.opened .file-cover{transform:rotateX(-17deg)}.file-card.opened{margin-top:38px}.file-card.completed .file-cover:after{content:'FALL GELÖST';position:absolute;right:18px;bottom:17px;color:#396144;border:2px solid #396144;padding:4px 7px;font-size:10px;font-weight:900;transform:rotate(-8deg)}.file-card.completed .file-world{padding-right:95px}.file-preview{background:#0c1211d9;backdrop-filter:blur(5px)}.preview-paper{color:#263b3b;background:#f5edda;box-shadow:0 14px 0 #bba269,0 35px 90px #030705b0;transform:translateY(90px) rotate(-5deg) scale(.9)}.preview-map{background:#e8dec4;border-color:#bfb18c;padding:8px}.preview-map svg{max-width:420px;max-height:420px}.hold-progress b{position:absolute;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f8edd0;color:#83422f;font-size:22px;font-weight:900}.hold-progress svg{position:relative;z-index:2}
/* Real material scans: each image spans three cells, matching the SVG preview. */
.cell.room-0{background-image:linear-gradient(rgba(247,230,182,.7),rgba(247,230,182,.7)),url('assets/floors/oak.webp')}
.cell.room-1{background-image:linear-gradient(rgba(210,233,238,.7),rgba(210,233,238,.7)),url('assets/floors/limestone.webp')}
.cell.room-2{background-image:linear-gradient(rgba(220,233,204,.7),rgba(220,233,204,.7)),url('assets/floors/carpet.webp')}
.cell.room-3{background-image:linear-gradient(rgba(243,217,202,.7),rgba(243,217,202,.7)),url('assets/floors/terracotta.webp')}
.cell[class*="room-"]{background-size:300% 300%;background-position:var(--floor-x,0%) var(--floor-y,0%);border-right:1.5px solid #3d4037b8;border-bottom:1.5px solid #3d4037b8}
@media(max-width:760px){.file-pair{gap:24px;padding-top:58px}.file-card,.file-cover{min-height:185px}.file-cover{padding:18px 14px}.file-sheet{height:170px;padding:10px;transform:translateY(-42px) rotate(-2deg)}.file-sheet svg{height:130px}.file-card.opened .file-sheet{transform:translateY(-72px) rotate(-2deg)}.file-card.opened{margin-top:30px}.sheet-heading{font-size:8px}.file-title{font-size:26px}.preview-map svg{max-height:310px}.preview-map{order:0}.selection-panel{background:#eee9da}.board-controls{color:#263b3b}.hub-heading{gap:15px}.file-card.completed .file-cover:after{font-size:8px;right:10px;bottom:10px}.file-card.completed .file-world{padding-right:70px}}
@media(max-width:540px){.file-pair{grid-template-columns:1fr;gap:82px}.file-card.opened{margin-top:20px}.file-level{padding-bottom:32px}.file-card,.file-cover{min-height:185px}.file-sheet{left:8%;right:8%;height:195px}.file-sheet svg{height:150px}.hub-heading h1{font-size:37px}.hub-progress{min-width:72px}.preview-paper{padding:22px}.preview-map svg{max-height:340px}}
@media(prefers-reduced-motion:reduce){.file-sheet,.file-cover{transition:none}}
/* Blocked terrain remains visibly darker even with an illustrated object. */
.cell.blocked:before{content:'';position:absolute;inset:0;background:rgba(23,32,29,.24);pointer-events:none;z-index:0}
.cell .object{z-index:1}

/* Clear exclusions and compact corner notes above the muted floor. */
.cell .cross-token,.cell .cross-token.auto-cross-token{inset:8%;font-size:0;color:#e32320;filter:drop-shadow(0 1px 1px #fff9e9)}
.cross-token:before,.cross-token:after{content:'';position:absolute;left:45.5%;top:-10%;width:9%;height:120%;border-radius:3px;background:currentColor;transform:rotate(45deg)}
.cross-token:after{transform:rotate(-45deg)}
.cell .note-token{left:4px;bottom:4px;right:auto;max-width:calc(100% - 8px);padding:2px 4px;border:1px solid #235d53;border-radius:4px;background:#fff9e9;color:#124c43;font-size:12px;line-height:1.15;font-weight:900;letter-spacing:1px;overflow-wrap:anywhere;box-shadow:0 1px 3px #243b3b35}
@media(max-width:760px){.cell .note-token{left:2px;bottom:2px;max-width:calc(100% - 4px);font-size:10px;padding:1px 3px}}
/* Room names remain legible on the larger case grids as well. */
.cell .room-label,.grid.large-grid .room-label{font-size:12px;line-height:1.15;padding:4px 8px;letter-spacing:.02em;left:4px;top:4px;box-shadow:0 1px 3px #17282040}
@media(max-width:760px){.cell .room-label,.grid.large-grid .room-label{font-size:11px;padding:4px 6px;left:3px;top:3px}}

/* A prominent ink stamp shares the persisted state with the solved counter. */
.file-card.completed .file-cover:after{content:none}
.solved-stamp{position:absolute;right:20px;bottom:14px;display:block;padding:5px 13px;border:4px double #873c2e;border-radius:3px;color:#873c2e;background:#e8cb8440;font-size:clamp(28px,3.2vw,40px);font-weight:900;line-height:1;letter-spacing:.06em;transform:rotate(-9deg);pointer-events:none;box-shadow:inset 0 0 0 1px #873c2e55}
.file-card.completed .file-cover{padding-bottom:80px}
.file-card.completed .file-world{padding-right:0}
@media(max-width:760px){.solved-stamp{right:12px;bottom:13px;font-size:28px;padding:5px 9px}.file-card.completed .file-cover{padding-bottom:72px}}

/* Wide desktop: use the available width to keep the investigation in view. */
@media(min-width:1200px){
 .view-game main{max-width:1540px;padding:0 24px}
 .view-game .masthead{max-width:1540px;padding:10px 24px}
 .view-game .intro{padding:10px 0 12px;display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:center}
 .view-game .back-to-files{min-height:28px;grid-column:1;grid-row:1}
 .view-game .case-meta{grid-column:2;grid-row:1}
 .view-game .intro h1{font-size:34px;margin:2px 0 4px;grid-column:1;grid-row:2}
 .view-game .case-story{grid-column:2;grid-row:2;max-width:430px}
 .view-game .case-story summary{min-height:30px}
 .view-game .game-shell{grid-template-columns:minmax(0,1fr) minmax(500px,.95fr);gap:24px;padding-bottom:12px}
 .view-game .plan-panel{padding:14px 16px 10px}
 .view-game .board-heading{margin-bottom:5px}
 .view-game .board-heading h2{font-size:24px}
 .view-game .play-guide{font-size:12px;margin-bottom:8px;line-height:1.3}
 .view-game .active-dossier{min-height:54px;padding:6px 10px;margin-bottom:8px}
 .view-game .active-dossier img{height:40px;width:36px}
 .view-game .active-dossier p{font-size:14px}
 .view-game .plan-wrap{width:min(100%,clamp(420px,calc(100dvh - 440px),580px))}
 .view-game .plan-key{margin:7px 0 9px;font-size:11px}
 .view-game .board-controls{padding-top:8px}
 .view-game .submit-row{margin-top:8px}
 .view-game .submit-button{min-height:48px}
 .view-game .tool-actions{margin:4px 0;gap:12px}
 .view-game .tool-actions button{min-height:32px}
 .view-game .object-guide{padding-top:7px}
 .view-game .object-legend{margin:8px 0 0;gap:5px 10px}
 .view-game .legend-item{flex-direction:row;justify-content:flex-start;text-align:left;gap:5px;font-size:11px;line-height:1.15}
 .view-game .legend-item img{width:28px;height:28px;flex:none}
 .view-game .legend-note{font-size:10px}
 .view-game .suspects-panel{padding-top:0}
 .view-game .suspects-panel>.section-head{margin-bottom:10px}
 .view-game .suspects-panel>.section-head h2{font-size:26px}
 .view-game .suspects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
 .view-game .suspect{grid-template-columns:46px minmax(0,1fr);column-gap:9px;min-height:90px;padding:9px}
 .view-game .suspect.selected{padding:8px}
 .view-game .suspect .portrait{width:46px;height:62px}
 .view-game .suspect .identity strong{font-size:17px}
 .view-game .suspect .role{font-size:10px;margin:2px 0 4px}
 .view-game .suspect .clue{font-size:14px;line-height:1.25;overflow-wrap:break-word}
 .view-game .suspect.victim{grid-column:auto}
 .view-game .suspect.victim:last-child:nth-child(odd){grid-column:1/-1}
 .view-game .hint-box{margin-top:12px;padding-top:12px}
 .view-game .hint-box h3{font-size:21px}
 .view-game footer{padding:10px 0;font-size:10px}
}

/* Phone play: stable selection, full plan first, deliberate optional enlargement. */
.mobile-play-guide,.plan-view-tools{display:none}
@media(max-width:760px){
 .view-game main{padding:0 8px}
 .view-game .masthead{padding:8px 12px}
 .view-game .intro{padding:8px 6px 12px}
 .view-game .back-to-files{min-height:36px;margin-bottom:0}
 .view-game h1{font-size:28px;margin:4px 0}
 .view-game .case-story summary{min-height:32px}
 .view-game .plan-panel{padding:10px 6px;border-radius:10px}
 .view-game .board-heading{padding:0 4px;margin-bottom:2px}
 .view-game .board-heading .eyebrow{display:none}
 .view-game .board-heading h2{font-size:21px}
 .view-game .play-guide{display:none}
 .view-game .mobile-play-guide{display:block;font-size:12px;line-height:1.4;margin:0 4px 7px;color:#53645d}
 .view-game .quick-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:6px}
 .view-game .quick-person{min-width:0;min-height:52px;padding:4px 2px;gap:1px;font-size:12px;line-height:1.1;border-width:2px;border-color:transparent}
 .view-game .quick-person.selected{padding:4px 2px;border-color:#286b64}
 .view-game .quick-person img{width:26px;height:28px}
 .view-game .active-dossier{padding:7px 9px;min-height:57px;margin-bottom:4px}
 .view-game .active-dossier p{font-size:15px;line-height:1.25}
 .view-game .selection-panel{padding:4px 0 2px;box-shadow:0 4px 5px #eee9da}
 .view-game .plan-view-tools{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 4px;padding-left:4px;font-size:11px;color:#53645d}
 .view-game .plan-view-tools button{min-height:44px;border:1px solid #b7c6b2;border-radius:6px;padding:5px 9px;background:#f6f6ed;color:#286b64;font-size:12px;font-weight:800}
 .view-game .plan-wrap{width:100%;padding:2px 2px 3px 0;overflow-x:auto}
 .view-game .board-surface{min-width:0;width:100%}
 .view-game .board-surface.zoomed{min-width:var(--zoom-board-width)}
 .view-game .grid{touch-action:pan-x pan-y pinch-zoom}
 .view-game .grid .cell{touch-action:pan-x pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
 .view-game .cell.clue-object,.view-game .cell.clue-possible{animation:none}
 .view-game .cell.clue-object .object{transform:none}
 .view-game .cell.clue-object{box-shadow:inset 0 0 0 3px #b88021}
 .view-game .cell.clue-possible{box-shadow:inset 0 0 0 3px #378f81}
 .view-game .cell .room-label{font-size:10px;padding:3px 5px;letter-spacing:0}
 .view-game .grid.large-grid .room-label{font-size:8px;padding:2px 3px;left:1px;top:1px}
 .view-game .board-surface.zoomed .room-label{font-size:11px;padding:3px 5px}
 .view-game .plan-key{margin:8px 0;font-size:10px}
 .view-game .cell .placed-token{inset:10%}
 .view-game .grid.large-grid .placed-token b{width:15px;height:15px;font-size:10px}
 .view-game .cell .note-token{font-size:10px;padding:0 2px}
}
/* Open case sheet: fit the viewport, give the plan the remaining space. */
.file-preview{padding:16px;overflow:hidden;overscroll-behavior:contain}
.preview-paper{max-height:calc(100dvh - 44px);overflow:visible}
.preview-map svg{max-height:min(420px,calc(100dvh - 120px))}
@media(max-width:760px){
 .file-preview{padding:12px 12px 22px}
 .preview-paper{height:min(740px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);width:min(470px,100%);padding:16px;gap:9px;grid-template-columns:1fr;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;overflow:hidden}
 .preview-copy{display:contents}
 #preview-rank{display:none}
 .preview-number{grid-row:1;margin:0;font-size:10px;line-height:1.2}
 .preview-paper h2{grid-row:2;font-size:30px;line-height:1.04;margin:0}
 .preview-world{grid-row:3;justify-self:start;min-height:24px;padding:3px 9px;font-size:12px;line-height:1.3}
 .preview-map{grid-row:4;order:0;min-height:0;height:100%;width:100%;align-self:stretch;padding:5px;overflow:hidden}
 .preview-map svg{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto}
 #preview-opening{grid-row:5;font-size:13px;line-height:1.35;margin:0}
 .preview-actions{grid-row:6;gap:12px;flex-wrap:nowrap}
 .preview-play{min-height:46px;padding:8px 13px;font-size:16px;gap:8px}
 #preview-close{font-size:14px;min-height:44px;padding:6px 3px}
}
@media(max-width:760px) and (max-height:620px){.preview-paper{padding:12px;gap:6px}.preview-paper h2{font-size:26px}#preview-opening{font-size:12px;line-height:1.3}}
@media(min-width:600px) and (max-height:520px){
 .preview-paper{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;width:min(810px,100%);padding:15px;gap:18px;max-height:calc(100dvh - 40px)}
 .preview-copy{display:block}.preview-number{margin:0 0 6px}.preview-paper h2{font-size:27px;margin-bottom:7px}
 #preview-rank{display:none}#preview-opening{font-size:12px;line-height:1.3;margin:9px 0}
 .preview-map{grid-row:auto;max-height:calc(100dvh - 76px);height:calc(100dvh - 76px)}
 .preview-actions{gap:10px}.preview-play{min-height:44px;font-size:14px}#preview-close{font-size:13px}
}

/* Tutorial: familiar portraits, actual furniture and a caption for every relation. */
.tutorial-figure{margin:0;width:210px;flex:none;color:#263b3b}
.tutorial-figure figcaption{font-size:13px;line-height:1.35;margin-top:10px;font-weight:400;text-align:left}
.tutorial-figure .rule-grid,.tutorial-figure .example{width:100%}
.rule-grid>span:has(.tutorial-person),.rule-grid>span:has(.tutorial-object),.example>span:has(.tutorial-person){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;background:#f0ead7;color:#263b3b;min-width:0}
.rule-grid .tutorial-person,.example .tutorial-person,.rule-openings .tutorial-person{width:43px;height:43px;max-width:90%;object-fit:contain}
.rule-grid .tutorial-object{width:43px;height:43px;max-width:90%;object-fit:contain}
.rule-grid small,.example small{font:800 11px/1.2 SourceSans,sans-serif;letter-spacing:0}
.rule-grid i{font:600 10px/1.2 SourceSans,sans-serif;text-align:center;color:#486574}
.tutorial-diagonal{background:#607c5e}.tutorial-diagonal>span:nth-child(4n+1){background:#d9e9d0}
.tutorial-distance>span:nth-child(-n+3){background:#d9e9d0}.tutorial-distance>span:nth-child(n+4):nth-child(-n+6){background:#e5edf2}
.tutorial-direction>span:nth-child(-n+3){background:#d9e9d0}
.tutorial-alignment>span:nth-child(2),.tutorial-alignment>span:nth-child(8){background:#dce8f1}.tutorial-alignment>span:nth-child(n+4):nth-child(-n+6){background:#d9e9d0}
.tutorial-corner>span{background:#d9e9d0}.tutorial-corner>span:nth-child(3),.tutorial-corner>span:nth-child(6),.tutorial-corner>span:nth-child(n+7){background:#dce8f1}.tutorial-corner>span:first-child{border-top:4px solid #354740;border-left:4px solid #354740}
.tutorial-controls{display:flex;gap:8px;align-items:stretch}.tutorial-controls>div{position:relative;display:flex;flex:1;min-width:0;min-height:82px;flex-direction:column;align-items:center;justify-content:center;background:#e3ecda;border:1px solid #b8c7ad;border-radius:5px;padding:5px 2px}
.tutorial-controls img{width:40px;height:43px;object-fit:contain}.tutorial-controls small{font-size:10px;line-height:1.2;font-weight:800;text-align:center;margin-top:4px}.tutorial-note{align-self:flex-start;margin:25px 0 0 5px;padding:0 4px;background:#fff8dc;border:1px solid #286b64;border-radius:3px;font-size:12px;color:#286b64}
.rule-openings{width:190px}.rule-openings>div{min-height:112px;padding-bottom:22px}.rule-openings>div>small:not(:last-child){position:static;font-size:11px}.rule-openings>div>small:last-child{font-size:10px}
.plan-symbols{width:160px;gap:24px;padding:16px}.plan-symbols b{position:absolute;top:4px;left:0;font-size:11px;color:#354740}
.example-rows{width:165px}.example-pair>span{min-height:76px}.example-pair .mini-victim{background:#ead5d9}.example-pair .mini-person{background:#ead5d9}.example-pair .mini-other{background:#dce8f1}
@media(max-width:760px){
 .rule-card{flex-direction:column;align-items:stretch;gap:15px;padding:16px}
 .rule-copy p{font-size:15px;line-height:1.45}.rule-card h3{font-size:24px}
 .tutorial-figure{width:min(230px,100%);align-self:center}
 .example,.example-rows,.example-room,.object-examples,.plan-symbols,.rule-openings{width:210px;align-self:center}
 .tutorial-figure .example{width:100%}.object-examples img{height:95px}.object-examples strong{font-size:12px}
 .example-room small{font-size:11px}.example-room{min-height:100px}
 .rule-grid .tutorial-person,.rule-grid .tutorial-object,.example .tutorial-person{width:46px;height:46px}
}
/* First-play guided tour, replayable from the game tools. */
.game-tour{position:fixed;inset:0;z-index:60;pointer-events:none}
.game-tour[hidden]{display:none}
.tour-spot{position:fixed;border:3px solid #e8b958;border-radius:9px;box-shadow:0 0 0 150vmax #0b1515b0;pointer-events:none}
.tour-card{position:fixed;width:min(350px,calc(100vw - 24px));padding:15px 17px;background:#fff8e7;color:#263b3b;border:1px solid #d5bd81;border-radius:12px;box-shadow:0 8px 30px #07100f44;pointer-events:auto}
.tour-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.tour-count{font-size:9px;letter-spacing:.08em;font-weight:900;color:#596b57}.tour-skip{min-height:36px;padding:4px 0;border:0;background:none;color:#596b57;font-size:12px}
.tour-card h2{font:700 25px/1.1 Alegreya,Georgia,serif;margin:0 0 9px}.tour-card p{font-size:15px;line-height:1.4;margin:0 0 13px}
.tour-actions{display:flex;justify-content:space-between;gap:10px}.tour-actions button{min-height:44px;padding:9px 16px;border:1px solid #c8cfb7;border-radius:6px;background:#eff2e5;color:#365e51;font-weight:800;font-size:14px}.tour-actions .tour-next{background:#286b64;border-color:#286b64;color:#fffbed}.tour-back:disabled{opacity:.35}
@media(max-height:600px){.tour-card{padding:10px 13px}.tour-card h2{font-size:22px}.tour-card p{font-size:13px;margin-bottom:8px}.tour-top{margin:0}.tour-skip{min-height:30px}}

/* Direction words: compare the same plan, without solving a case. */
.direction-lesson{flex-direction:column;align-items:stretch!important;border:2px solid #aa7837;background:#faf3df}.direction-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px}.direction-comparison figure{margin:0;min-width:0}.direction-comparison h4{font:800 17px/1.3 SourceSans,sans-serif;margin:0 0 12px;color:#243b35}.direction-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#526156;border:3px solid #526156;width:100%;max-width:228px;aspect-ratio:1;margin:0 auto 12px}.direction-demo span{display:grid;place-items:center;background:#f2e4c4;font-size:30px;font-weight:900;color:#857860;min-width:0;min-height:0}.direction-demo span:nth-child(3n){border-left:5px solid #243b35;background:#d8e7ee}.direction-demo img{width:80%;height:80%;object-fit:contain}.direction-demo.broad span:not(:nth-child(3n + 1)),.direction-demo.direct span:nth-child(5){background:#c7e8c8;color:#17643b}.direction-comparison figcaption{font:400 15px/1.45 SourceSans,sans-serif;color:#425649}.direction-comparison figcaption strong{display:block;color:#243b35}.direction-lesson .direction-key{font-size:13px;margin:0;border-top:1px solid #cfbc95;padding-top:12px}.direction-key strong{display:block}@media(max-width:520px){.direction-comparison{grid-template-columns:1fr;gap:24px}.direction-comparison figure{display:grid;grid-template-columns:116px 1fr;gap:8px 12px;align-items:center}.direction-comparison h4{grid-column:1/-1;margin:0;font-size:16px}.direction-demo{margin:0}.direction-demo span{font-size:24px}.direction-comparison figcaption{font-size:14px}}