:root{--ink:#1D2233;--paper:#F2E8D5;--amber:#E9B44C;--red:#C94F4F;--sage:#7FA98F;--fog:#9A93A5;--white:#fffaf0;--shadow:rgba(14,16,26,.25)}*{box-sizing:border-box}html{background:var(--ink);color:var(--ink);font-family:Georgia,"Times New Roman",serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -15%,#3b4057 0,transparent 38%),linear-gradient(145deg,#171b2a,#252a3d);background-attachment:fixed}button{font:inherit}.topbar{height:86px;max-width:1060px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;color:var(--paper)}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;text-transform:uppercase;font:700 15px/1.05 ui-sans-serif,system-ui;letter-spacing:.16em}.brand b{color:var(--amber)}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--amber);border-radius:50%;font:34px/1 Georgia;transform:rotate(-18deg)}.case-meta{text-align:right;display:grid;grid-template-columns:auto auto;gap:0 7px;font:12px/1.4 ui-sans-serif,system-ui;text-transform:uppercase;letter-spacing:.1em;color:var(--fog)}.case-meta b{font-size:15px;color:var(--paper)}.case-meta #timer{grid-column:1/-1;text-transform:none;letter-spacing:.02em}main{width:min(1060px,calc(100% - 24px));margin:auto}.status-strip{display:flex;justify-content:center;gap:clamp(14px,6vw,60px);padding:10px 14px;color:var(--paper);font-family:ui-sans-serif,system-ui}.status-strip div{display:grid;grid-template-columns:auto auto;gap:0 6px;align-items:center}.status-strip b{font-size:20px}.status-strip small{grid-column:2;color:var(--fog)}.desk{position:relative;display:grid;grid-template-columns:minmax(300px,520px) minmax(290px,390px);gap:34px;align-items:start;background:linear-gradient(110deg,rgba(242,232,213,.98),rgba(226,211,186,.98));border:1px solid #fff4;border-radius:28px;padding:clamp(18px,4vw,42px);box-shadow:0 30px 90px #070912aa,inset 0 0 60px #8b72582b}.desk:before{content:"";position:absolute;inset:8px;border:1px solid #75675244;border-radius:22px;pointer-events:none}.board-wrap,.casebook{position:relative;z-index:1}.sudoku{display:grid;grid-template-columns:repeat(var(--grid-size,6),1fr);aspect-ratio:1;max-width:480px;margin:auto;border:3px solid var(--ink);background:var(--ink);gap:1px;box-shadow:6px 7px 0 #9e8c7144}.cell{position:relative;border:0;background:var(--white);color:var(--ink);font:700 clamp(20px,5.7vw,32px)/1 ui-sans-serif,system-ui;cursor:pointer;min-width:44px;min-height:44px}/* Box rules used to be absolute cell ranges, which only ever described a 6x6 board. */.cell[data-box-right]{border-right:2px solid var(--ink)}.cell[data-box-bottom]{border-bottom:2px solid var(--ink)}.cell.given{background:#e4d7c0;color:#5f5962}.cell.selected{background:#f6d993;box-shadow:inset 0 0 0 3px var(--amber)}.cell.peer{background:#f8f0e2}.cell.wrong{color:var(--red);animation:shake .22s linear}.cell.completed{background:#dce7df}.cell:focus-visible,.key:focus-visible,.primary:focus-visible,.option:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.keypad{display:grid;grid-template-columns:repeat(var(--grid-size,6),1fr);gap:7px;max-width:480px;margin:15px auto 0}.key{height:48px;border:1px solid #82745f;border-radius:10px;background:var(--paper);color:var(--ink);font:700 20px ui-sans-serif,system-ui;box-shadow:0 3px 0 #9c8d76;cursor:pointer}.key:active{transform:translateY(2px);box-shadow:0 1px 0 #9c8d76}.unit-envelopes{height:22px;max-width:480px;margin:auto;display:flex;justify-content:space-around;color:var(--amber);font-family:ui-sans-serif,system-ui}.unit-envelopes span.open{color:var(--sage)}.unit-envelopes span.sealed{color:var(--red)}.casebook{background:#fffaf0cc;border:1px solid #b9a98f;padding:18px;min-height:470px;box-shadow:5px 6px 0 #86765d33;transform:rotate(.25deg)}.casebook-head{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:8px;font:700 12px ui-sans-serif,system-ui;letter-spacing:.14em}.latest-clue{display:flex;gap:12px;align-items:center;min-height:74px;margin:15px 0;padding:10px;border:1px dashed #a9987c;background:#f7eddc}.latest-clue p{margin:0;font-size:14px;line-height:1.4}.wax{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--amber);color:var(--ink);font:bold 20px Georgia}.notebook{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.note-axis h3{font:700 11px ui-sans-serif,system-ui;text-transform:uppercase;letter-spacing:.08em;margin:0 0 7px}.note-axis button{display:block;width:100%;min-height:30px;padding:3px;border:0;border-bottom:1px solid #d0c2ac;background:transparent;text-align:left;color:var(--ink);font:13px Georgia}.note-axis button.cleared{text-decoration:line-through;color:var(--fog)}.primary,.secondary{width:100%;min-height:48px;border-radius:10px;padding:10px 16px;font:800 15px ui-sans-serif,system-ui;cursor:pointer}.primary{border:0;background:var(--ink);color:var(--paper);box-shadow:0 4px 0 #080a10}.primary:disabled{opacity:.38;cursor:not-allowed}.secondary{border:1px solid var(--ink);background:transparent;color:var(--ink);margin-top:9px}dialog{width:min(570px,calc(100% - 24px));padding:0;border:0;border-radius:22px;background:transparent;color:var(--ink)}dialog::backdrop{background:#0a0c14cc;backdrop-filter:blur(5px)}.modal-card{position:relative;background:var(--paper);padding:clamp(22px,6vw,38px);border:2px solid var(--amber);border-radius:22px;box-shadow:0 25px 80px #0009}.close{position:absolute;right:12px;top:10px;width:44px;height:44px;border:0;background:transparent;font-size:30px;cursor:pointer}.eyebrow{margin:0 0 7px;color:#9b6c13;font:800 11px ui-sans-serif,system-ui;letter-spacing:.17em}.modal-card h2{margin:0 0 7px;font-size:30px}.muted{color:#6e6873;margin:0 0 20px}.accuse-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.accuse-column h3{font:700 11px ui-sans-serif,system-ui;text-transform:uppercase}.option{display:block;width:100%;min-height:44px;margin:5px 0;border:1px solid #aa9b85;border-radius:8px;background:#fff8ec;cursor:pointer;font-size:13px}.option.on{background:var(--amber);border-color:var(--ink);font-weight:bold}.share-card{white-space:pre-wrap;background:var(--ink);color:var(--paper);border-radius:14px;padding:18px;font:15px/1.7 ui-monospace,SFMono-Regular,monospace;overflow:auto}.tutorial-card{text-align:center}.tutorial-visual{position:relative;width:94px;height:94px;display:grid;place-items:center;margin:0 auto 18px;border:3px solid var(--ink);font-size:66px}.tutorial-visual span{position:absolute;right:-7px;bottom:-8px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--amber);font:bold 21px ui-sans-serif,system-ui}.toast{position:fixed;left:50%;bottom:24px;z-index:10;transform:translate(-50%,120px);background:var(--ink);color:var(--paper);padding:12px 18px;border:1px solid var(--amber);border-radius:999px;transition:.25s}.toast.show{transform:translate(-50%,0)}footer{width:min(1060px,calc(100% - 40px));margin:auto;padding:28px 0 40px;color:var(--fog);display:flex;justify-content:space-between;font:12px ui-sans-serif,system-ui}footer a{color:var(--paper)}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media(max-width:899px){.desk{grid-template-columns:1fr;gap:25px;padding:18px 14px}.casebook{min-height:auto}.notebook{gap:5px}.casebook{transform:none}.status-strip{font-size:13px}.status-strip small{font-size:10px}footer{display:grid;gap:7px;text-align:center}.topbar{padding-inline:14px}}@media(max-width:380px){main{width:100%}.desk{border-radius:0}.cell{min-width:42px}.notebook{grid-template-columns:1fr}.note-axis{display:grid;grid-template-columns:70px repeat(5,1fr);align-items:center}.note-axis button{font-size:10px;text-align:center}.accuse-options{grid-template-columns:1fr}.accuse-column{display:grid;grid-template-columns:80px repeat(5,1fr)}.option{font-size:10px;padding:2px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.case-title{font-size:21px;margin:13px 0 7px}.rule-header{padding:8px;border-left:4px solid var(--red);background:#c94f4f12;font:800 11px/1.4 ui-sans-serif,system-ui}.notebook-tools{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:8px 0;font:11px ui-sans-serif,system-ui}.note-axis button.starred:after{content:"★";float:right;color:#9b6c13}.note-axis button.confirmed{border:2px solid var(--red);border-radius:50%;font-weight:bold}.note-axis button.confirmed:after{content:"CONFIRMED";float:right;color:var(--red);font:700 7px ui-sans-serif}.clue-tray{display:grid;gap:7px;max-height:190px;overflow:auto;margin:8px 0 14px}.clue-card{min-height:48px;border:1px solid #aa9b85;background:#fff8ec;padding:7px 9px;text-align:left;border-radius:5px;cursor:pointer}.clue-card.testimony,.latest-clue.testimony{border-left:5px solid #785d91;border-radius:12px}.clue-card.evidence,.latest-clue.evidence{border-left:5px solid var(--sage)}.clue-card>span{font:800 9px ui-sans-serif;letter-spacing:.12em}.clue-card p{margin:3px 0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clue-card.expanded p{white-space:normal}.clue-card b{color:var(--red);font:800 9px ui-sans-serif}.primary.pulse{animation:pulse 1.2s infinite}.reveal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.reveal span{display:grid;gap:5px;padding:14px 5px;background:var(--ink);color:var(--paper);text-align:center;animation:flip .7s both;animation-delay:var(--delay)}.reveal small{color:var(--amber);font:9px ui-sans-serif}.epilogue{font-style:italic}@keyframes pulse{50%{box-shadow:0 0 0 7px #c94f4f55}}@keyframes flip{from{transform:rotateY(90deg);opacity:0}}
body{background:#111827 url('./assets/manor-desk-v1.jpg') center top/cover fixed no-repeat}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(#0b102388,#0b1023bb)}.topbar{height:104px;text-shadow:0 2px 12px #000}.new-case-top{grid-column:1/-1;justify-self:end;border:1px solid #e9b44c88;border-radius:999px;background:#111827bb;color:var(--paper);padding:7px 12px;cursor:pointer;font:700 11px ui-sans-serif}.desk{background:linear-gradient(105deg,#f2e8d5f2,#d7b889ed);border:3px solid #d1a34d;box-shadow:0 28px 80px #000c,inset 0 0 80px #75431b33}.board-wrap{padding:18px;border-radius:18px;background:#181b28dd;border:1px solid #e9b44c55;box-shadow:0 14px 38px #0008}.sudoku{border-color:#d6ad63;box-shadow:0 0 0 6px #24170d,0 12px 30px #0009}.cell{background:linear-gradient(145deg,#fff9e9,#eadabe)}.cell.given{background:linear-gradient(145deg,#ceb990,#a89069);color:#302416}.key{background:linear-gradient(#efd59e,#c69c59);border-color:#5b3c1d;box-shadow:0 4px 0 #5b3c1d}.casebook{border:0;border-radius:4px 16px 16px 4px;background:linear-gradient(90deg,#c9ad78 0 8px,#fff8e8 9px);box-shadow:10px 14px 30px #0008,inset 0 0 35px #946d3022}.status-strip div{padding:7px 13px;border:1px solid #e9b44c55;border-radius:12px;background:#111827bb;box-shadow:0 6px 18px #0005}.unit-envelopes{font-size:19px;text-shadow:0 2px 5px #000}.new-case-result{margin-top:10px;background:var(--amber);color:var(--ink)}.brand-mark{background:#11182799;box-shadow:0 0 20px #e9b44c55}.latest-clue{box-shadow:0 4px 10px #4b32132b}.clue-card{box-shadow:0 3px 7px #4b321322;transition:transform .18s}.clue-card:hover{transform:translateY(-2px)}@media(max-width:899px){body{background-position:35% top}.desk{border-inline:0}.board-wrap{padding:12px}.topbar{height:94px}}
.case-meta{min-width:300px}.top-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:7px;margin-top:5px}.top-actions button,.top-actions select{min-height:40px;border:1px solid #e9b44c;border-radius:9px;background:#111827ee;color:#fff4d8;padding:7px 11px;font:800 11px ui-sans-serif;cursor:pointer}.top-actions .new-case-top{min-height:44px;font-size:13px}.opened-bundle{align-items:flex-start;max-height:180px;overflow:auto}.opened-bundle div{display:grid;gap:7px}.opened-bundle p{padding-bottom:6px;border-bottom:1px dashed #b9a98f}.opened-bundle p:last-child{border:0}.opened-bundle b{display:block;color:#76511d;font:800 9px ui-sans-serif}.clue-card b{display:block;margin-top:5px;padding:7px;border-radius:6px;background:#785d9114;white-space:normal;line-height:1.3}.clue-card.liar-flagged{outline:3px solid var(--red);background:#fff0e8}.clue-card.liar-flagged b{background:var(--red);color:white}.cell.selected:after{content:"▼";position:absolute;top:2px;right:3px;color:#8f5318;font-size:9px}.help-card{max-height:min(720px,90vh);overflow:auto}.help-content{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-content section{padding:12px;border:1px solid #c8b595;border-radius:10px;background:#fff9ed}.help-content h3{margin:0 0 5px;font:800 13px ui-sans-serif}.help-content p{margin:0;font-size:13px;line-height:1.45}.tutorial-card #tutorial-copy{display:grid;gap:9px;text-align:left}.tutorial-card #tutorial-copy span{padding:8px 10px;border-left:3px solid var(--amber);background:#fff9ed}.cell.wrong{animation:shake .5s linear;background-color:#ffd8d8!important;box-shadow:inset 0 0 0 4px var(--red)}@media(max-width:899px){.topbar{height:auto;min-height:112px}.case-meta{min-width:230px}.top-actions{flex-wrap:wrap}.top-actions button,.top-actions select{padding:6px 8px}.help-content{grid-template-columns:1fr}}
:root{--sage-ink:#3F6B52;--plum:#785D91;--pen:#33456B;--type:#6B6154;--leather:#3A2E24;--cold:#8FA3B8}
.toast{width:max-content;max-width:calc(100vw - 32px);top:108px;bottom:auto;padding:9px 13px;text-align:center;font:700 12px/1.35 system-ui,sans-serif;transform:translate(-50%,-180px)}
.coachmark{position:fixed;z-index:9;left:50%;bottom:70px;width:min(420px,calc(100vw - 28px));padding:11px 14px;border:2px solid var(--amber);border-radius:10px;background:#1d2233;color:#fffaf0;box-shadow:0 12px 30px #0009;transform:translate(-50%,24px);opacity:0;pointer-events:none;font:700 12px/1.4 system-ui,sans-serif}.coachmark.show{transform:translate(-50%,0);opacity:1}.guided{animation:guidePulse 1.1s infinite!important;outline:3px solid var(--amber)!important;outline-offset:2px}.cell.guided.given{outline:0!important;animation:none!important}.option:disabled{opacity:.22}.option:not(:disabled){cursor:pointer}
.attempt-stamp{width:max-content;min-height:0;margin:8px auto;padding:5px 9px;color:var(--red);opacity:0;font:900 12px system-ui;letter-spacing:.13em}.attempt-stamp.show{opacity:1;animation:stampFlat .26s}.reveal{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.reveal-card{position:relative;display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:center;padding:12px;border:2px solid #8e7654;border-radius:8px;background:linear-gradient(145deg,#f3dfb8,#c9a771);transform:rotateY(90deg);animation:revealFlip .55s var(--delay) forwards;overflow:hidden}.reveal-card img{width:96px;height:96px;object-fit:cover}.reveal-card small{font:800 9px system-ui;letter-spacing:.12em}.reveal-card b{text-align:center}.reveal-card em{position:absolute;padding:4px;color:var(--red);font:900 8px system-ui;letter-spacing:.1em}.case-closed .reveal-card{box-shadow:inset 0 0 28px #e9b44c55}.cold-case .reveal-card{filter:saturate(.55);background:linear-gradient(145deg,#d2dae1,var(--cold))}.cold-case .reveal-card em{color:var(--ink)}
.case-meta,footer{color:var(--paper)}.note-axis button.cleared{color:var(--type)}.unit-envelopes .unknown{color:var(--type)}
body{overflow-x:hidden}.desk{display:grid;grid-template-columns:minmax(340px,520px) minmax(300px,440px);gap:28px;align-items:start}.case-view,.search-view{min-width:0}.casebook{background:linear-gradient(135deg,#e8d5a8,#dcc28f);padding:24px 20px 20px;border-radius:5px 20px 18px 5px;box-shadow:10px 14px 30px #0008,inset 0 0 30px #6b451322;transform:none}.casebook:before{content:"";position:absolute;top:-13px;left:20px;width:122px;height:18px;border-radius:6px 6px 0 0;background:#d9ba7c}.case-title{font-family:Georgia,serif}.rule-header{width:max-content;max-width:100%;padding:7px 10px;color:var(--red);font:900 10px/1.35 system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase}.rule-header.verified{color:var(--sage-ink)}.stamp{border:3px double currentColor;border-radius:4px;transform:rotate(-2deg);mix-blend-mode:multiply}.section-label{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px;font:800 10px ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--type)}.section-label small{font-size:9px}.suspect-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.suspect-chip{position:relative;min-width:0;min-height:74px;border:1px solid var(--plum);border-radius:8px;background:#fffaf0aa;padding:5px;color:var(--ink);cursor:pointer}.suspect-chip img{display:block;width:44px;height:44px;max-width:100%;margin:auto;border-radius:50%;object-fit:cover;background:#f2e8d5}.suspect-chip span{display:block;overflow:hidden;text-overflow:ellipsis;font:700 9px system-ui,sans-serif;white-space:nowrap}.suspect-chip.liar-flagged{outline:3px solid var(--red)}.suspect-chip b{position:absolute;right:-3px;top:27px;padding:2px;color:var(--red);border:2px double currentColor;background:#f2e8d5;font:900 7px system-ui;transform:rotate(-12deg)}.theory-hero{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px;padding:11px 14px;border:1px solid #9b7e50;background:#fff7e4aa}.theory-hero b{font:italic 34px Georgia;color:var(--pen)}.theory-hero span{font:800 10px system-ui;text-transform:uppercase;letter-spacing:.12em}.notebook{margin-bottom:8px}.note-axis button:not(.given){color:var(--pen)}.clue-tray{display:grid;gap:8px;max-height:240px;overflow:auto}.search-cta{margin-top:14px;background:var(--sage-ink)}.accuse-cta{margin-top:9px}.desk-bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border:1px solid #b68d4e;background:#ead8b2;color:var(--type);font:800 11px ui-monospace,monospace}.desk-bar button{min-height:44px;border:0;background:transparent;color:var(--ink);font:800 12px system-ui;cursor:pointer}.clue-ribbon{height:76px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:7px 4px;background:#3a2e24;border-inline:1px solid #b68d4e}.clue-ribbon .clue-card{flex:0 0 130px;height:61px;overflow:hidden;scroll-snap-align:start;padding:6px}.clue-ribbon .clue-card p{font-size:9px;line-height:1.15;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.clue-ribbon .clue-card b{display:none}.clue-ribbon .pinned{border-color:var(--plum)}.board-wrap{position:relative;border-radius:2px;background:var(--leather);box-shadow:inset 0 0 35px #0009,0 12px 30px #0007;padding:25px 18px 18px}.board-wrap:before{content:"";position:absolute;inset:9px;pointer-events:none;background:radial-gradient(circle at 0 0,#c49742 0 4px,#694415 5px 7px,transparent 8px),radial-gradient(circle at 100% 0,#c49742 0 4px,#694415 5px 7px,transparent 8px),radial-gradient(circle at 0 100%,#c49742 0 4px,#694415 5px 7px,transparent 8px),radial-gradient(circle at 100% 100%,#c49742 0 4px,#694415 5px 7px,transparent 8px)}.sudoku{background-color:var(--white);background-image:linear-gradient(#1d223308 1px,transparent 1px),linear-gradient(90deg,#1d223308 1px,transparent 1px);background-size:8px 8px}.cell{background:#fffaf0e8}.cell.given{font-family:ui-monospace,monospace;font-style:normal;color:var(--type);background:#eadfc9}.cell:not(.given){font-family:Georgia,serif;font-style:italic;color:var(--pen)}.unit-envelopes svg{width:17px;height:17px}.unit-envelopes .unknown{color:var(--fog)}.unit-envelopes .evidence{color:var(--sage)}.clue-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 7px;width:100%;min-height:64px;border:2px solid var(--sage-ink);background:#dfe9df;color:var(--sage-ink);padding:9px;text-align:left;clip-path:polygon(0 0,92% 0,100% 18%,100% 100%,0 100%);font-family:ui-monospace,monospace}.clue-card.testimony{border-color:var(--plum);background:repeating-linear-gradient(#fffaf0,#fffaf0 20px,#785d9122 21px);color:var(--plum);clip-path:none;border-radius:8px;font-family:Georgia,serif;font-style:italic}.clue-card.unknown{border-color:var(--fog);background:#eee8dc;color:var(--type)}.clue-card img{grid-row:1/3;width:24px;height:24px;border-radius:50%;object-fit:cover}.clue-card span{font:900 8px system-ui;letter-spacing:.12em}.clue-card p{grid-column:1/-1;margin:3px 0;font-size:11px}.clue-card.testimony p{grid-column:2}.clue-card.liar-flagged{outline:3px solid var(--red)}.clue-card.liar-flagged:after{content:"LIAR?";position:absolute;right:5px;top:18px;padding:2px;color:var(--red);border:2px double currentColor;background:#f2e8d5;transform:rotate(-9deg);font:900 8px system-ui}.zone-stamp{position:absolute;z-index:4;left:50%;top:45%;padding:8px;color:var(--sage-ink);background:#f2e8d5dd;font:900 13px system-ui;letter-spacing:.12em;opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(1.8);pointer-events:none}.zone-stamp.show{animation:stampIn .8s both}.interrogation-dialog{width:min(620px,100%);height:min(760px,100%);max-height:100%;margin:auto}.interrogation-shell{height:100%;display:flex;flex-direction:column;padding:18px;background:linear-gradient(135deg,#30271f,#161a26);color:var(--paper)}.interrogation-top{display:flex;justify-content:space-between;align-items:center;font:800 11px system-ui;letter-spacing:.15em}.interrogation-top button{min-width:64px;min-height:44px;border:0;background:transparent;color:var(--paper);cursor:pointer}.interrogation-card{flex:1;width:min(440px,100%);margin:10px auto;padding:22px;border:1px solid #b99c70;background:repeating-linear-gradient(#fffaf0,#fffaf0 31px,#785d9126 32px);color:var(--ink);box-shadow:0 20px 50px #000a}.portrait-clip{display:block;width:108px;margin:-8px auto 10px;padding:6px 6px 0;border-top:8px solid #777;background:#e1cfaa}.portrait-clip img{display:block;width:96px;height:96px;object-fit:cover}.interrogation-card h2{text-align:center;margin:5px}.interrogation-card blockquote{margin:18px 0;font:italic 20px/1.55 Georgia}.signature{text-align:right;border-top:1px solid var(--plum);padding-top:8px}.interrogation-progress{display:flex;justify-content:center;gap:7px;margin:10px}.interrogation-progress button{width:38px;height:38px;padding:3px;border:2px solid transparent;border-radius:8px;background:#f2e8d5}.interrogation-progress button.on{border-color:var(--amber)}.interrogation-progress img{width:24px;height:24px;object-fit:cover}.interrogation-shell>.secondary{color:var(--paper);border-color:var(--paper);max-width:440px;margin:auto}.interrogation-shell>.secondary.on{background:var(--red)}.interrogation-shell>.primary{max-width:440px;margin:auto}.clue-detail>.clue-card{margin-top:28px}.pulse-once{animation:pulseOnce .8s}.status-strip,.notebook-tools{display:none}
@keyframes stampIn{0%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(1.8)}18%,75%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}}@keyframes pulseOnce{50%{box-shadow:0 0 0 7px #e9b44c88}}
@keyframes guidePulse{50%{box-shadow:0 0 0 6px #e9b44c66}}
@keyframes stampFlat{0%{transform:rotate(-6deg) scale(1.8)}70%{transform:rotate(-3deg) scale(.96)}100%{transform:rotate(-2deg) scale(1)}}@keyframes revealFlip{to{transform:rotateY(0)}}
@media(max-width:899px){.topbar{min-height:96px}.desk{display:block;width:100%;padding:0;background:transparent;border:0;box-shadow:none}.case-view,.search-view{width:100%;transition:transform .24s ease,opacity .24s ease}.case-view{padding:12px}.search-view{position:fixed;z-index:5;inset:0;background:var(--leather);overflow:hidden;transform:translateX(100%);opacity:0}.view-search .search-view{transform:none;opacity:1}.view-search .case-view{transform:translateX(-24%);opacity:0;pointer-events:none}.view-case .search-view{pointer-events:none}.search-view .board-wrap{height:calc(100dvh - 124px);padding:16px 10px;overflow:auto}.casebook{min-height:calc(100vh - 120px)}.clue-ribbon{height:76px}.sudoku{width:min(100%,480px)}footer{display:none}}
@media(min-width:900px){.search-cta,.desk-bar button,.clue-ribbon{display:none}.case-view,.search-view{display:block}.desk{padding:28px}.search-view{grid-column:2}.case-view{grid-column:1;grid-row:1}.board-wrap{margin-top:0}}
@media(prefers-reduced-motion:reduce){.case-view,.search-view{transition-duration:0s!important}}
.clue-icon{grid-row:1/3;width:24px;height:24px}
.clue-detail>.close{z-index:3}.unit-envelopes .unknown{color:var(--type)}
.brand-mark svg,.tutorial-visual>svg{width:1em;height:1em}

/* ===== v4.1 가시성·사용성 복구 =========================================
   원칙 하나: 그라디언트를 쓸 때는 background 단축을 쓰지 않는다.
   단축은 background-color를 transparent로 리셋하므로, 반투명 정지점이 뒤쪽
   면과 합성되어 의도한 색이 나오지 않는다. 이번 회귀 두 건의 공통 원인이다. */
:root{--rule:#e8dfe6;--rule-strong:#d9cdd8;--sep:#8b7c65;--cell-paper:#fffaf0;--ink-soft:#574f44}

/* 심문 조서 — 괘선을 질감으로 되돌리고 행간을 피치에 잠근다 */
.interrogation-card{--rule-pitch:32px;background-color:var(--white);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rule-pitch) - 1px),var(--rule) calc(var(--rule-pitch) - 1px),var(--rule) var(--rule-pitch));background-repeat:repeat}
.interrogation-card blockquote{margin:16px 0 var(--rule-pitch);font:italic 19px/var(--rule-pitch) Georgia,"Times New Roman",serif;color:var(--ink);background-color:var(--white);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rule-pitch) - 1px),var(--rule) calc(var(--rule-pitch) - 1px),var(--rule) var(--rule-pitch));background-position:0 0}
.interrogation-card h2{font-size:26px;line-height:32px;margin:0 0 8px}
.interrogation-card .eyebrow{color:#7d560c;font-size:12px;line-height:32px;margin:0}
.signature{border-top:1px solid var(--rule-strong);color:var(--type)}
.interrogation-exits{display:flex;align-items:center;gap:4px}
#interrogation-close{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--paper);font:400 26px/1 system-ui,sans-serif;cursor:pointer}
.interrogation-progress button{width:44px;height:44px}

/* 진술 카드 — 본문은 ink, plum은 보더·라벨 정체성으로만 */
.clue-card.testimony{--rule-pitch:21px;background-color:var(--white);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rule-pitch) - 1px),var(--rule) calc(var(--rule-pitch) - 1px),var(--rule) var(--rule-pitch));color:var(--ink);font-style:normal}
.clue-card.testimony p{grid-column:2;font:italic 13px/21px Georgia,"Times New Roman",serif;color:var(--ink)}
.clue-card.testimony span{color:var(--plum)}
/* 긴 안내 문구가 1열을 부풀려 본문을 56px로 압착하던 문제 */
.clue-card b{grid-column:1/-1}
.clue-ribbon{height:94px}
.clue-ribbon .clue-card{flex:0 0 148px;height:78px;padding:7px 8px}
.clue-ribbon .clue-card.testimony{background-image:none;background-color:var(--white)}
.clue-ribbon .clue-card p{font:400 12px/1.28 Georgia,"Times New Roman",serif;font-style:normal;color:var(--ink);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.clue-ribbon .clue-card span{font-size:9px}

/* 스도쿠 — 1px gap이 다시 구분선이 된다. 모눈은 셀로 내려 실제로 보이게 한다 */
.sudoku{gap:1px;background-color:var(--sep);background-image:none}
.cell{background-color:var(--cell-paper);background-image:linear-gradient(#1d22330d 1px,transparent 1px),linear-gradient(90deg,#1d22330d 1px,transparent 1px);background-size:8px 8px;background-position:0 0}
.cell.given{background-color:var(--cell-paper);background-image:linear-gradient(#d8c6a04d,#d8c6a04d),linear-gradient(#1d22330d 1px,transparent 1px),linear-gradient(90deg,#1d22330d 1px,transparent 1px);background-size:auto,8px 8px,8px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;font-weight:700;color:#4a4238;letter-spacing:.02em}
/* 만년필은 유지하되 Georgia의 올드스타일 숫자는 버린다 — 1~6이 서로 다른 높이에
   앉아 6×6 열 스캔을 방해한다. Times New Roman은 라이닝 숫자다. */
.cell:not(.given){font-family:"Times New Roman",Times,Georgia,serif;font-style:italic;font-weight:700;color:var(--pen)}
.cell.peer{background-color:#f4ead6}
.cell.same{background-color:#e7ecdd;box-shadow:inset 0 0 0 2px #7fa98f88}
.cell.selected{background-color:#f6d993;box-shadow:inset 0 0 0 3px var(--amber)}
.cell.wrong{background-color:#ffd8d8!important;background-image:repeating-linear-gradient(45deg,#c94f4f2e 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 3px var(--red);color:var(--red)}
.key.done{opacity:.42;background-image:repeating-linear-gradient(45deg,#0000 0 5px,#1d223322 5px 7px)}

/* 봉투 스트립 — sage/fog/cold 텍스트 금지를 지키면서 어두운 가죽 위 대비 확보 */
.unit-envelopes{color:var(--paper)}
.unit-envelopes .unknown{color:#cfc6b4}
.unit-envelopes .evidence,.unit-envelopes span.open{color:#a8cbb4}
.unit-envelopes span.sealed{color:#e98a8a}

/* 진술 대조판 — 다섯 주장을 후보 칩으로 펼치고, 칩은 플레이어 자신의 수첩 표시를 입는다 */
.suspect-strip{display:grid;grid-template-columns:1fr;gap:6px}
.board-row{display:grid;grid-template-columns:minmax(96px,116px) 1fr auto;gap:8px;align-items:center;padding:6px;border:1px solid #b39c74;border-radius:9px;background:#fffaf0cc}
.board-row .suspect-chip{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:7px;min-height:44px;padding:4px 6px;border:0;background:transparent;text-align:left}
.board-row .suspect-chip img{width:36px;height:36px;margin:0}
.board-row .suspect-chip span{font:700 12px/1.25 system-ui,sans-serif;white-space:normal;text-overflow:clip}
.board-row .suspect-chip.liar-flagged{outline:0;border-radius:8px;box-shadow:inset 0 0 0 2px var(--red)}
.board-claim{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0}
.board-claim small{font:800 9px system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.board-claim.not small{color:#a83232}
.board-chip{min-height:44px;padding:5px 11px;border:1px solid #9b7e50;border-radius:999px;background:#fff7e4;color:var(--ink);font:600 13px Georgia,"Times New Roman",serif;cursor:pointer}
.board-chip.cleared{text-decoration:line-through;opacity:.5;background:#efe6d4}
.board-chip.starred{border-color:#9b6c13;box-shadow:inset 0 0 0 2px #e9b44c88;font-weight:800}
.board-flag{min-width:54px;min-height:44px;padding:4px 6px;border:2px dashed #b39c74;border-radius:8px;background:transparent;color:var(--ink-soft);font:900 9px system-ui,sans-serif;letter-spacing:.06em;cursor:pointer}
.board-flag.on{border:3px double var(--red);color:var(--red);background:#f2e8d5}
.board-hint{margin:8px 0 0;font:400 11px/1.5 system-ui,sans-serif;color:var(--ink-soft)}

/* 수첩 — 추리의 핵심 조작인데 가장 작은 타깃이었다 */
.note-axis button{min-height:44px}
@keyframes hintBlink{0%,100%{background-color:transparent}50%{background-color:#e9b44c59}}
.note-axis button.hinted{animation:hintBlink .5s 4}

/* 측정된 대비 미달 보정 */
.rule-header{color:#a83232;font-size:11px}
.rule-header.verified{color:#2f5540}
.section-label{color:var(--ink-soft);font-size:11px}
.section-label small{font-size:10px}
.desk-bar{color:#4f483d}
.top-actions button,.top-actions select{min-height:44px}
@media(max-width:899px){.search-view .board-wrap{height:calc(100dvh - 142px)}}

/* 최소 활자 크기 — 전각 대문자 UI 라벨 11px, 본문 12px 하한 */
.clue-card span,.clue-ribbon .clue-card span{font-size:11px}
.section-label small{font-size:11px}
.theory-hero span{font-size:11px}
.board-claim small{font-size:11px}
.board-flag{min-width:62px;font-size:11px}
/* v4.css의 background 단축 !important가 해칭을 지우므로 여기서 되살린다 (색 단독 부호화 금지) */
.cell.wrong{background-image:repeating-linear-gradient(45deg,#c94f4f2e 0 4px,transparent 4px 8px)!important}

/* QA 반영 보정 */
/* 리본 본문: line-clamp가 grid item stretch 때문에 3번째 줄을 반쯤 흘리고 있었다 */
.clue-ribbon .clue-card p{max-height:31px}
/* peer는 given 틴트 레이어를 걷어내고 자기 색으로 통일한다 (given peer가 가장 흐렸다) */
.cell.peer{background-color:#f0e3c6;background-image:linear-gradient(#1d22330d 1px,transparent 1px),linear-gradient(90deg,#1d22330d 1px,transparent 1px);background-size:8px 8px}
.cell.given.peer{background-color:#e6d6b2}
/* 세피아 화면에 시스템 파란 포커스 링이 튀지 않도록 통일 */
.secondary:focus-visible,.board-chip:focus-visible,.board-flag:focus-visible,.suspect-chip:focus-visible,.note-axis button:focus-visible,.clue-card:focus-visible,.interrogation-top button:focus-visible,.close:focus-visible,.desk-bar button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
footer a{display:inline-block;min-height:44px;line-height:44px}

/* ===== v4.2 Phase 0 — 확신에 값을 매긴다 ===== */
/* 카드를 읽는 자리에서 바로 수첩에 옮긴다. 스크롤도 암기도 없앤다 */
.clue-entry{display:grid;gap:6px}
.card-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 2px 2px}
.card-chips .board-chip{min-height:38px;padding:4px 10px;font-size:12px}
.clue-tray{max-height:none}
.clue-detail>.clue-entry>.clue-card{margin-top:28px}
.attempt-log{margin:10px 0 4px;text-align:center;font:800 12px ui-monospace,monospace;letter-spacing:.06em;color:var(--ink-soft)}
/* 사건 개요 — 피해자·시각·발견 구역만 말한다 */
.case-brief{margin:6px 0 12px;font:400 13px/1.6 Georgia,"Times New Roman",serif;color:var(--ink)}
/* 알리바이 카드 — 감식(sage)과 다른 면색으로 3중 부호화 유지 */
.clue-card.alibi{border-color:#8a6d3b;background:#f3ead6;color:#5a4526}
.clue-card.unknown{display:none}
.unit-envelopes .empty{color:#7a6f5e}
/* ===== v4.6 — 레이아웃 리듬·간격 체계·접근성 =====================================
   세 렌즈(UI·프론트엔드·접근성)의 실측 진단을 반영한다. v5 다음에 로드되므로 같은
   명시도면 순서로 이긴다 — 명시도를 올리지 않는다.

   v5 상단 교훈 준수: 그라디언트 위에 얹는 면은 background 단축을 쓰지 않는다.
   단축은 background-color 를 transparent 로 리셋해 아래 종이 그라디언트와 합성된다. */

:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px}

/* ── 진술 보드 — 텍스트 길이에 무관한 리듬 ────────────────────────────────────
   칩 폭이 텍스트 길이의 함수였고 진술마다 칩이 2개 또는 3개라, 행마다 줄 수가 달랐다
   (행 높이 편차 67px). 더 나쁜 건 칩 x좌표가 행마다 제각각이라 #board-hint 가 약속한
   "수첩에서 지우면 여기 모든 진술에서 흐려진다"는 세로 훑기가 물리적으로 불가능했다는 점이다.
   엔진이 칩을 2개 또는 3개만 만드므로(engine.js) 3열 고정이 안전한 상한이다. */
.suspect-strip{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
.board-row{display:grid;grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-2) 10px}
.board-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-2)}
.board-head small{
  justify-self:start;font:800 11px/1.2 system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)
}
/* v5 의 `.board-claim.not small` 은 실제 클래스(.neg)와 어긋나 한 번도 매치되지 않았다.
   그래서 긍정 진술과 부정 진술의 시각 차이가 단어 하나뿐이었다 — 추리 게임에서 가장
   위험한 오독 지점이다. */
.board-head.neg small{color:#a83232}
.board-claim{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:stretch;min-width:0}
.board-chip{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:var(--sp-1) 6px;
  font:600 13px/1.15 Georgia,"Times New Roman",serif
}
/* opacity 로 흐리면 대비가 3.04:1 로 떨어진다. 취소선이 이미 상태를 전달하므로
   투명도 대신 색을 낮춰 4.5:1 을 지킨다. */
.board-chip.cleared{opacity:1;color:#5a5449}
.card-chips .board-chip{min-height:44px}

/* ── 간격 — 구역 경계가 구역 내부보다 넓어야 한다 ──────────────────────────────
   경계가 8px, 내부가 16px 이라 게슈탈트 근접성이 반대로 작동했다. */
.casebook-head{padding-bottom:var(--sp-3)}
.rule-header{margin:22px 0 18px}          /* rotate(-2deg) 가 페인트 박스를 ~6px 부풀린다 */
.case-title{margin:0 0 var(--sp-2)}
.case-brief{margin:0 0 var(--sp-5)}
.interrogation-record{margin:0 0 var(--sp-5)}
.section-label{margin:0 0 var(--sp-3)}
.casebook>.section-label{margin:var(--sp-5) 0 var(--sp-3)}   /* 같은 명시도 — 순서로 이긴다 */
#board-hint{margin:var(--sp-3) 0 0}
.note-axis h3{margin:0 0 var(--sp-3)}
.notebook{gap:var(--sp-3);margin:0}
#latest-clue{margin:0 0 var(--sp-3)}
.clue-tray{margin:0}
.search-cta{margin-top:var(--sp-5)}
.accuse-cta{margin-top:var(--sp-3)}

/* ── 수첩에 구역을 부여 ────────────────────────────────────────────────────────
   장식용 가설 카운터엔 액자가 있고 핵심 조작면인 수첩엔 없어 시각적 무게가 역전돼 있었다.
   둘을 한 블록으로 묶어 "125개의 가설"이 수첩의 표제가 되게 한다. */
.notebook-block{
  margin:0 0 var(--sp-5);padding:var(--sp-4);
  border:1px solid #9b7e50;border-radius:10px;
  background-color:#fff7e433                 /* ← 단축 금지 (v5 교훈) */
}
.notebook-block .theory-hero{margin:0 0 var(--sp-4);padding:0;border:0;background-color:transparent}

/* ── 대비 ─────────────────────────────────────────────────────────────────────
   소진된 키패드 숫자가 1.01:1 이었다 — v4.1 을 태운 1.21:1 보다 낮다. 게다가 이 버튼은
   disabled 가 아니라 여전히 눌리므로 비활성 면제를 받지 못한다. */
.key.done{opacity:1;color:#6b6154;background-image:repeating-linear-gradient(45deg,#00000014 0 3px,transparent 3px 6px)}
.board-flag.on,.attempt-stamp{color:#a83232}
.eyebrow{color:#7d560c}
.muted{color:#625c67}

/* ── 포커스 ───────────────────────────────────────────────────────────────────
   앰버 링은 어두운 가죽 보드에서는 6.95:1 이지만 케이스북 종이 위에서는 1.27:1 이라
   사실상 보이지 않았다. 어두운 링을 본체로, 앰버는 후광으로 뒤집는다. */
:where(button,select,a,[tabindex]):focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 6px #e9b44c
}

/* ── 좁은 화면 ────────────────────────────────────────────────────────────────
   상단바의 min-content 폭이 377px 라 320px 에서 57px, 360px 에서 17px 가 잘렸다.
   body{overflow-x:hidden} 이 스크롤바 대신 잘라내고 있어 지금까지 드러나지 않았다. */
@media(max-width:420px){
  .case-meta{min-width:0}
  .note-axis{grid-template-columns:1fr}
  .note-axis button{font-size:13px;text-align:left}
}
@media(max-width:340px){.brand span{font-size:12px}}

/* 확대·긴 이름에서 화자 이름이 생략부호도 없이 잘려나갔다 */
.board-row .suspect-chip span{overflow:visible;text-overflow:clip;white-space:normal}

/* ── 모션 ─────────────────────────────────────────────────────────────────────
   style.css 의 `*{animation:none!important}` 는 명시도 0 이라 v5 의 `.guided`(0,1,0)
   !important 를 이기지 못했다. 신규 플레이어의 첫 세션 내내 무한 펄스가 돌았다. */
@media(prefers-reduced-motion:reduce){
  .guided,.primary.pulse,.hinted,.stamp,.zone-stamp{animation:none!important}
}

/* 강제 색상 모드에서 .primary 는 border:0 이라 버튼 경계가 통째로 사라졌다 */
@media(forced-colors:active){
  .primary{border:2px solid transparent}
  .key.done,.board-chip.cleared{opacity:1;forced-color-adjust:auto}
}
/* ===== v4.7 — 헤더 위계 =========================================================
   헤더가 뷰포트의 17.6%(149px)를 상시 점유하는데 그 안에 든 셋이 전부 보조 액션이었고,
   그중 파괴적인 `↻ 새 사건`이 첫 화면에서 유일한 앰버 면(브랜드의 1.7배)이었다.
   주 액션(저택 수색)은 문서 상단에서 1,635px 아래라 헤더와 같은 화면에 뜨지 않는다.

   팔레트 규칙 한 줄로 정리하면: 앰버는 앞으로 가는 길을 표시한다. 탈출 해치가 아니라. */
@media(max-width:899px){
  .topbar{height:auto;min-height:0;padding:10px 14px;display:flex;align-items:center;gap:8px}
  .brand{flex:0 0 auto;min-height:44px;gap:8px;font-size:13px;letter-spacing:.12em}
  .brand-mark{width:40px;height:40px}
  /* 사건번호는 케이스북 머리(#case-date)가 이미 인쇄한다. 은유가 그 자리를 정해뒀다. */
  #case-label,#case-number{display:none}
  .case-meta{display:flex;align-items:center;justify-content:flex-end;min-width:0;margin-left:auto;gap:0}
  .top-actions{grid-column:auto;margin-top:0;gap:6px;flex-wrap:nowrap;align-items:center}
  .top-actions button,.top-actions select{
    min-height:44px;height:44px;padding:0 10px;
    border:1px solid #f2e8d54d;border-radius:10px;
    background-color:#1d2233cc;background-image:none;   /* ← 단축 금지 (v4.1 교훈) */
    color:var(--paper);font:700 12px/1 ui-sans-serif,system-ui}
  .top-actions select{padding-inline:8px 4px;max-width:78px}
  /* 파괴적 액션은 형제들과 같은 무게로. 앰버 fill 제거. */
  .top-actions .new-case-top{order:0;width:auto;background-color:#1d2233cc;color:var(--paper);border-color:#f2e8d54d;font-size:12px;font-weight:700}
}
@media(max-width:359px){
  .brand span:not(.brand-mark){display:none}
  .topbar{padding-inline:10px}
}
/* ===== v4.8 — 진술 기록 접기 · 트레이 캡 =========================================
   왕복의 원인은 접을 게 많아서가 아니라 마킹 지점(칩)이 잘못된 자리에 있어서였다.
   v4.7 이 이미 격자·수첩·가설수·최신단서를 한 화면에 넣었고, 빠진 건 칩 하나였다.
   칩을 최신 단서로 올리고(app.js), 그 아래 정적 참조물만 접는다. */
.cb-fold{margin:0 0 var(--sp-5)}
.cb-fold-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-2);
  width:100%;min-height:48px;padding:var(--sp-2) var(--sp-3);
  border:1px solid #9b7e50;border-radius:10px;
  background-color:#e6d3a6;background-image:none;   /* 단축 금지 — v4.1 교훈 */
  color:var(--ink);text-align:left;cursor:pointer;
  font:800 11px/1.3 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase
}
.cb-fold-head[aria-expanded="true"]{border-radius:10px 10px 0 0;border-bottom-color:#c3a878}
.cb-chev{width:22px;height:22px;display:grid;place-items:center;font:400 13px/1 system-ui;transition:transform .18s ease}
.cb-fold-title{display:grid;gap:2px;min-width:0}
.cb-fold-title small{font:600 11px/1.2 system-ui,sans-serif;letter-spacing:.02em;text-transform:none;color:#5f5548}
.cb-fold-state{
  padding:5px 8px;border:1px solid #9b7e50;border-radius:999px;
  background-color:#fff7e4;background-image:none;
  font:800 11px/1 ui-monospace,monospace;letter-spacing:.08em;color:#5f5548
}
.cb-fold-body{
  padding:var(--sp-4) var(--sp-3);
  border:1px solid #9b7e50;border-top:0;border-radius:0 0 10px 10px;
  background-color:#fff7e433;background-image:none
}
.cb-fold-body>.interrogation-record{margin:0}
/* 트레이는 DOM 상태를 둘 수 없다 — renderTray() 가 마킹마다 replaceChildren() 한다.
   "최신 3장 + 펼치기"는 한 번 누르면 소멸한다(실측). 상태 없는 CSS 캡이 모든 지표에서 낫다. */
.clue-tray{max-height:60vh;overflow:auto;overscroll-behavior:contain}

/* `1fr` 은 `minmax(auto,1fr)` 이라 긴 단어가 든 열이 min-content 만큼 벌어지고 다른 열이 줄어든다.
   열 정렬이 깨지면 #board-hint 가 약속한 세로 훑기가 다시 불가능해진다. 진짜 균등 열로 고정한다. */
.board-claim{grid-template-columns:repeat(3,minmax(0,1fr))}
.board-chip{overflow-wrap:break-word}
/* ===== v4.9 — 수사 보드 재구조화 =================================================
   후보 명단은 격자 "위"에 접이식(기본 접힘), 진술·단서는 격자 "아래" 세로 스크롤.

   v5.css 의 매직 넘버 두 개(124 / 142 = desk-bar 48 + 가로 리본 94)를 폐기한다.
   상수가 아니라 "남은 공간"이 리스트 높이를 정한다. dvh 사용처도 여기 한 곳으로 모은다 —
   position:fixed;inset:0 만으로는 iOS 툴바 전환에서 large viewport 기준으로 잡힌다.

   v5 상단 교훈 준수: 그라디언트·가죽 위에 얹는 면은 background 단축을 쓰지 않는다. */

/* 데스크톱은 이미 2열이고 케이스북의 #notebook 하나로 족하다. display:none 이어야 접근성 트리와
   탭 순서에서 동시에 빠진다 — 실측상 이 규칙이 없으면 1280px 에서 유령 탭 스톱 15개가 생긴다. */
/* v5 의 데스크톱 숨김은 `.clue-ribbon` 클래스에 걸려 있었다. 클래스를 갈아끼우면 그 규칙도
   같이 풀려 데스크톱에서 리스트가 케이스북 트레이와 중복 노출된다 — 여기서 다시 잠근다. */
@media(min-width:900px){.board-notes,.clue-list{display:none}}

/* 수색 중에는 뒤 케이스 문서(2,500px)의 스크롤을 잠근다.
   v4.9 에서 .board-wrap 이 스크롤 컨테이너를 벗어나면서, 격자 위에서 손가락을 끌면 그 제스처가
   뒤 문서로 전파돼 주소창이 나타났다 사라졌다 했다 — 의도치 않은 브라우저 UI 의 정체다.
   position:fixed 오버레이 안에서만 스크롤하면 브라우저는 URL 바를 건드리지 않는다.
   복귀 시 착지점(v4.8.1)은 route() 가 클래스를 먼저 벗긴 뒤 scrollTo 하므로 그대로 동작한다. */
@media(max-width:899px){
  html.view-search,html.view-search body{overflow:hidden;overscroll-behavior:none}
  /* 리스트에 창을 주는 대신 뷰 전체를 스크롤시킨다. 창 방식은 390×844 에서 255px(카드 2.2장),
     360×640 에서 81px(카드 0.7장)밖에 못 줬다 — 증거 영역이 너무 작다는 지적 그대로다.
     이제 리스트는 필요한 만큼(카드 17장 ≈ 1,300px) 갖고, 읽을 때 내려가면 된다. */
  .search-view{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  /* 상단 바를 sticky 로 띄우면 스크롤로 데려온 요소가 그 **밑**에 착지해 탭을 바가 먹는다
     (실측: E2E 5건 타임아웃, 러닝타임 35초 → 16분). 겹치게 두지 말고 바 아래에 별도
     스크롤 영역을 판다 — 바는 항상 손에 닿고, 겹칠 일 자체가 없어진다. */
  .desk-bar{flex:0 0 auto}
  .search-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

  /* ── 후보 명단 — 트리거는 흐름에, 펼친 면은 오버레이 ─────────────────────────────
     밀어내기(flex:0 0 auto + 본문이 흐름을 차지)는 375×667 에서 키패드를 뷰포트 밖
     804px 로 내보내고, .search-view{overflow:hidden} 탓에 스크롤로 도달할 수 없다.
     격자가 몇 줄 잘리는 건 회복되지만 키패드가 잘리면 숫자를 넣을 수 없다 — 게임이 멈춘다.
     오버레이는 전 뷰포트에서 격자·키패드 잘림 0 이고, 자기 예산 안에서만 스크롤한다. */
  .board-notes{flex:0 0 auto;position:relative;z-index:6;padding:6px 10px 0}
  .bn-fold-head{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-2);
    width:100%;min-height:48px;padding:var(--sp-2) var(--sp-3);
    border:1px solid #9b7e50;border-radius:10px;
    background-color:#e6d3a6;background-image:none;
    color:var(--ink);text-align:left;cursor:pointer;
    font:800 11px/1.3 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase
  }
  .bn-fold-head[aria-expanded="true"]{border-radius:10px 10px 0 0;border-bottom-color:#c3a878}
  .bn-fold-title{display:grid;gap:2px;min-width:0}
  .bn-fold-title small{font:600 11px/1.2 system-ui,sans-serif;letter-spacing:.02em;text-transform:none;color:#5f5548}
  /* 알파 면(#fff7e433)을 가죽 위에 얹으면 가죽이 그대로 비쳐 rgb(97,86,74) 가 되고
     종이용 잉크색이 1.33:1 로 무너진다. 불투명이면 8.93:1 — 색이 아니라 알파가 원인이었다. */
  .bn-fold-body{
    position:absolute;left:10px;right:10px;top:100%;
    max-height:60dvh;overflow:auto;overscroll-behavior:contain;
    padding:var(--sp-4) var(--sp-3);
    border:1px solid #9b7e50;border-top:0;border-radius:0 0 10px 10px;
    background-color:#fff7e4;background-image:none;
    box-shadow:0 14px 38px #000a
  }
  .bn-fold-body .notebook{margin:0}

  /* ── 격자는 절대 줄지 않는다 ────────────────────────────────────────────────────
     height 와 overflow 를 함께 지워야 .board-wrap 이 스크롤 컨테이너에서 벗어난다.
     그래야 :before 리벳 프레임(position:absolute;inset:9px)이 콘텐츠와 함께 밀려
     올라가는 잠복 버그가 구조적으로 재발 불가능해진다. */
  .search-view .board-wrap{flex:0 0 auto;height:auto;overflow:visible;padding:16px 10px}

  /* ── 단서 리스트 — 유일한 신축 영역 ─────────────────────────────────────────────
     min-height:0 이 없으면 flex 아이템이 콘텐츠 아래로 줄지 않아 격자를 밀어낸다.
     .clue-ribbon 클래스를 떼고 .clue-list 로 갈아끼운 이유: 가로 전용 축약 다섯 줄
     (flex:0 0 148px / -webkit-line-clamp:2 / b{display:none} / max-height:31px /
     testimony 배경 제거)을 새 레이어에서 하나씩 되돌리면 명시도 싸움이 된다.
     상속하지 않는 편이 싸다. line-clamp 가 풀리면서 단서 본문 잘림도 함께 사라진다. */
  .clue-list{
    flex:0 0 auto;
    display:grid;grid-auto-rows:max-content;gap:var(--sp-2);
    padding:var(--sp-2) 10px calc(var(--sp-5) + env(safe-area-inset-bottom));
    overflow:visible;
    background-color:#3a2e24;background-image:none;
    border-top:1px solid #b68d4e
  }
  .clue-list .clue-entry{display:grid;gap:6px}
  .clue-list .clue-card{width:100%}
  /* v2 의 `white-space:nowrap;text-overflow:ellipsis` 는 좁은 리본 칸을 위한 것이었다.
     세로 리스트에서도 남겨두면 단서 본문이 한 줄에서 잘린다 — 추리 게임에서 최악의 침묵이다. */
  .clue-list .clue-card p{font:400 13px/1.35 Georgia,"Times New Roman",serif;max-height:none;white-space:normal;overflow:visible;text-overflow:clip}
  /* 가로 리본은 이 <b>("길게 눌러 LIAR? 표시")를 display:none 으로 숨겨왔다. 세로에서는 자리가
     있으니 되살리되, v2 의 9px 은 이 프로젝트의 11px 하한을 깬다 — 숨겨져 있어 드러나지 않았을 뿐. */
  .clue-list .clue-card b{font:800 11px/1.35 ui-sans-serif,system-ui}
}

/* 320~359px 특례는 필요 없어졌다 — 이제 모든 폭에서 뷰가 통째로 스크롤한다. */

/* ≤380px 에서 style.css 의 .notebook{1fr} 과 v6.css 의 .note-axis{1fr} 이 겹쳐
   3축 15후보가 한 줄로 쌓였다(실측 847px — 360×640 뷰포트 전체보다 크다).
   3열을 되살리면 346px 로 떨어진다. 이름이 길면 줄바꿈하되 44px 하한은 지킨다. */
@media(max-width:380px){
  .notebook{grid-template-columns:repeat(3,minmax(0,1fr))}
  .note-axis button{overflow-wrap:break-word;min-height:44px}
}

/* ── v4.11 · 난이도 셀렉터 ────────────────────────────────────────────────────
   요일 다이얼 → 사건마다 플레이어 선택(Draftoku ARCADE). 별점이 주 신호, 라벨이 보조.
   고발 다이얼로그의 .option 과 같은 종이 질감을 물려받아 새 시각 언어를 만들지 않는다. */
.difficulty-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.diff-option{display:grid;gap:2px;justify-items:center;align-content:center;min-height:56px;padding:8px 4px;border:1px solid #aa9b85;border-radius:10px;background:#fff8ec;color:var(--ink);cursor:pointer}
.diff-option b{font:700 16px/1 Georgia,"Times New Roman",serif;letter-spacing:2px}
.diff-option span{font:11px/1.2 ui-sans-serif,system-ui;text-transform:uppercase;letter-spacing:.08em;color:#6e6873}
.diff-option.on{background:var(--amber);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.diff-option.on span{color:var(--ink);font-weight:700}
.diff-option:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.newcase-card h2{font-size:24px}
/* 결과 다이얼로그에서는 "다음 사건 →" 바로 위 — 선택이 그 버튼의 수식어로 읽히게 붙인다. */
#difficulty-result{margin:18px 0 0}
.new-case-result{margin-top:10px}

/* 게임 아래 문서 블록 — 모달이 아니라 문서 흐름 안에 둔다(숨은 텍스트는 평가에서 깎인다).
   본문은 시스템 폰트: 긴 글은 픽셀 폰트보다 읽기 좋고, draftoku 의 Galmuri 서브셋
   재생성 의존(strings.js 상단 경고)을 만들지 않는다. */
.gamedoc{width:100%;max-width:720px;margin:0 auto;padding:34px 20px 60px;
  font:15px/1.85 'Apple SD Gothic Neo','Pretendard',system-ui,-apple-system,sans-serif;
  color:#e9e6df;background:#0e1018;text-align:left;
  -webkit-font-smoothing:antialiased;image-rendering:auto;user-select:text;-webkit-user-select:text}
.gamedoc h2{font-family:inherit;font-size:19px;margin:28px 0 8px;color:#fff}
.gamedoc p{margin:0 0 12px}
.gamedoc ul{padding-left:20px;margin:0 0 12px;list-style:disc}
.gamedoc li{margin:6px 0}
.gamedoc a{color:#ffc933}
.gamedoc .gd-key{padding:10px 14px;border-left:3px solid #ffc933;background:#ffffff0d;font-weight:700}
.gamedoc .gd-foot{margin-top:26px;padding-top:14px;border-top:1px solid #ffffff26;font-size:13px;opacity:.75}
@media(max-width:520px){.gamedoc{font-size:14px;padding:26px 16px 48px}}

/* 문서 블록의 CTA(마지막 「규칙 전문과 공략 →」)와 푸터 링크는 산문 안이 아니라
   독립 타깃이므로 44px 를 실제로 확보한다. 본문 인라인 링크는 WCAG 2.5.8 의
   inline exception 대상이라 키우지 않는다(키우면 줄 간격이 깨진다). */
.gamedoc p:last-of-type a,.gamedoc .gd-foot a{display:inline-block;min-width:44px;min-height:44px;line-height:44px;padding:0 4px;text-align:center}