:root{--ink:#292a28;--muted:#5e625d;--paper:#e8e2d4;--surface:#fffdf2;--brown:#343936;--brown-dark:#222725;--gold:#c99b38;--line:#aeb8b2;--red:#a64037;--green:#3f6a55;--blue-rule:#d5e4e5;--shadow:0 8px 20px rgba(38,41,38,.16);--hand-font:"Segoe Print","Bradley Hand","Comic Sans MS",cursive}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#d8d0bf;font-family:Arial,Helvetica,sans-serif}button,select{font:inherit}
.page-header{padding:18px 22px;color:#fff;background:#343936;border-bottom:4px solid var(--gold)}
.page-header-inner,.puzzle-page{width:min(1320px,100%);margin:auto}.page-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.page-header h1{margin:0;font-size:clamp(1.25rem,3vw,1.8rem)}.page-header p{margin:5px 0 0;color:#f3dfce}.back-link{display:inline-block;margin-bottom:8px;color:#fff;font-size:.88rem;font-weight:700}.badge{padding:7px 10px;border:1px solid #ffffff59;border-radius:999px;white-space:nowrap}
.panel{position:relative;background-color:var(--surface);border:1px solid #aaa495;border-radius:5px;box-shadow:var(--shadow)}
.panel::after{content:'';position:absolute;z-index:2;top:-25px;left:22px;right:22px;height:58px;pointer-events:none;background:url('../assets/ui/spiral-binding.png') left top/auto 58px repeat-x;filter:drop-shadow(1px 2px 1px #00000026)}
.story-panel{margin:34px 22px 22px;padding:62px 26px 22px 54px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,var(--blue-rule) 31px)}.story-panel::before{content:'';position:absolute;top:0;bottom:0;left:35px;width:2px;background:#dd9e98}.story-label{margin:0 0 5px;color:var(--red);font-family:var(--hand-font);font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.story-panel h2{margin:0 0 18px;color:var(--brown-dark);font-family:var(--hand-font);font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.35}
.case-illustration{width:min(760px,100%);height:auto;margin:0 auto 18px;overflow:hidden;background:#ddd4c2;border:1px solid #8e887d;border-radius:3px;box-shadow:2px 3px 0 #00000018}.case-illustration img{width:100%;height:auto;display:block}.case-illustration[hidden]{display:none}
.story-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.story-section{padding:15px;background:#fffef8e8;border:1px solid #c4bcae;border-radius:3px;box-shadow:2px 3px 0 #00000012;transform:rotate(-.15deg)}.story-section:nth-child(even){transform:rotate(.15deg)}.story-section h3{margin:0 0 7px;color:var(--red);font-family:var(--hand-font);font-size:.88rem;letter-spacing:.04em;text-transform:uppercase}.story-section p{margin:0;color:#3f433f;font-family:var(--hand-font);font-size:.98rem;line-height:1.72}
.story-reminder{margin:18px 0 0;padding:11px 14px;color:#4d452f;background:#fff4bd;border:1px solid #d3b968;box-shadow:2px 3px 0 #00000012;font-family:var(--hand-font);font-size:.96rem;line-height:1.6;transform:rotate(-.25deg)}
.workspace{margin:12px 22px 22px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start}.board-panel,.mystery-panel{padding:64px 18px 18px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,var(--blue-rule) 31px)}.mystery-panel{position:sticky;top:30px}.board-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.board-heading h2,.mystery-panel h2{margin:0;font-family:var(--hand-font);font-size:1.18rem;line-height:1.4}.note,#status{color:var(--muted);font-family:var(--hand-font);font-size:.9rem;line-height:1.55}.toolbar{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.tool,.action,.help-link{min-height:40px;padding:8px 12px;color:var(--ink);background:#fff;border:1px solid #cdbdad;border-radius:8px;font-weight:700;cursor:pointer}.tool[aria-pressed=true]{color:#fff;background:var(--brown)}.tool[data-tool=match][aria-pressed=true],.submit{color:#fff;background:var(--green);border-color:var(--green)}button:disabled,select:disabled{opacity:.48;cursor:default}.help-link{width:100%;margin-top:15px;color:var(--brown);background:transparent;border-style:dashed;text-decoration:underline}.help-link[hidden]{display:none}
.grids{display:grid;grid-template-columns:1fr;gap:14px}.matrix{padding:12px;background-color:#fffef9;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#d3e2e4 40px);border:1px solid #aaa495;border-radius:3px;overflow-x:auto;box-shadow:2px 3px 0 #00000010}.matrix h3{margin:0 0 8px;color:#333936;font-family:var(--hand-font);font-size:.9rem;letter-spacing:.01em}.matrix-grid{width:530px;max-width:100%;display:grid;grid-template-columns:180px repeat(5,70px);grid-template-rows:72px repeat(5,40px)}.corner,.row-label,.col-label{color:#3e4641;font-family:var(--hand-font);font-size:.76rem;font-weight:700}.corner{display:flex;align-items:end;padding:4px}.row-label{display:flex;align-items:center;justify-content:flex-end;padding:0 10px 0 4px;white-space:normal;line-height:1.25;text-align:right;overflow:visible}.col-label{position:relative;overflow:visible}.col-label span{position:absolute;left:50%;bottom:5px;width:115px;transform:rotate(-48deg);transform-origin:left bottom;white-space:nowrap}.cell{padding:0;color:var(--red);background:#fffef8cc;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--hand-font);font-size:1.05rem;font-weight:900;cursor:pointer}.cell.top{border-top:2px solid var(--ink)}.cell.left{border-left:2px solid var(--ink)}.cell.right{border-right:2px solid var(--ink)}.cell.bottom{border-bottom:2px solid var(--ink)}.cell.match{color:#fff;background:var(--green)}.cell.auto{color:#8d756d;background:#f2ebe7e6}
.final-question{margin-top:15px;padding:15px;background:#fff4bd;border:1px solid #d3b968;border-radius:2px;box-shadow:2px 3px 0 #00000012;transform:rotate(.3deg)}.final-question.locked{opacity:.72}.final-question h3{margin:0 0 7px;color:var(--red);font-size:1rem;text-transform:uppercase;letter-spacing:.04em}.final-question p{margin:0 0 10px;color:var(--muted);line-height:1.4}.final-question select{width:100%;min-height:42px;padding:7px;border:1px solid #9f998c;border-radius:2px;background:#fff}.final-question .action{width:100%;margin-top:8px}.lock-note{font-size:.82rem;font-weight:700}
dialog{width:min(650px,calc(100% - 20px));max-height:calc(100dvh - 20px);padding:0;color:var(--ink);background:var(--paper);border:0;border-radius:15px;box-shadow:0 24px 70px #1e120c59}dialog::backdrop{background:#23160f9e}.dialog-head{position:sticky;top:0;padding:14px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:var(--brown);border-bottom:3px solid var(--gold)}.dialog-head h2{margin:0;font-size:1.1rem}.dialog-body{padding:16px;overflow:auto}.hint-card{position:relative;padding:13px 14px 13px 46px;background:#fffaf2;border:1px solid #eadac7;border-radius:10px;line-height:1.45}.hint-card span{position:absolute;left:12px;top:11px;width:25px;height:25px;display:grid;place-items:center;color:#fff;background:var(--green);border-radius:50%;font-weight:900}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.warning{padding:16px;text-align:center;background:#fff5d6;border:2px solid var(--gold);border-radius:12px}.solution-table{width:100%;border-collapse:collapse;font-size:.86rem}.solution-table th,.solution-table td{padding:8px;border:1px solid #dfd4c8;text-align:left}.solution-table th{color:#fff;background:var(--brown)}.solution-steps{display:grid;gap:8px;line-height:1.45}
.result{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#2b190eb8}.result[hidden]{display:none}.result-card{width:min(450px,100%);padding:30px;text-align:center;background:var(--paper);border:4px solid var(--gold);border-radius:22px}.result-card h2{margin:0;color:var(--brown-dark);font-size:2.5rem}.result-card p{line-height:1.5}.author{margin:-10px 22px 18px;color:var(--muted);font-size:.75rem;text-align:right}.print-credit{display:none}
@media(max-width:950px){.workspace{grid-template-columns:1fr}.mystery-panel{position:static}.story-sections{grid-template-columns:1fr}}
@media(max-width:700px){.page-header{padding:14px}.page-header p,.badge{display:none}.story-panel,.workspace{margin:32px 10px 14px}.story-panel{padding:58px 12px 18px 34px}.story-panel::before{left:22px}.board-panel,.mystery-panel{padding:60px 12px 12px}.panel::after{left:14px;right:14px}.grids{grid-template-columns:1fr}.board-heading{display:block}.toolbar{justify-content:flex-start;margin:12px 0}.matrix{padding:8px}.matrix-grid{min-width:540px;grid-template-columns:165px repeat(5,75px)}.cell{min-height:42px}}
@media print{@page{size:Letter portrait;margin:.35in}#site-header,#site-footer,.page-header,.skip-link,.toolbar,#status,.help-link,dialog,.result,.author,.mystery-panel .action{display:none!important}body{background:#fff}.panel{border:0;box-shadow:none}.panel::after{display:none}.story-panel{margin:0;padding:0}.case-illustration{width:4.1in;height:auto;margin:0 auto .08in;border:1px solid #555;box-shadow:none}.case-illustration img{width:100%;height:auto}.story-sections{grid-template-columns:repeat(2,1fr);gap:6px}.story-section{padding:7px}.story-section p{font-size:8pt;line-height:1.25}.workspace{margin:0;display:block;break-before:page;page-break-before:always}.mystery-panel{margin:6px 0 0;padding:6px;border:1px solid #000}.board-panel{padding:0}.board-heading{margin-bottom:2px}.board-heading h2{font-size:11pt}.board-heading .note{margin:2px 0 5px;font-size:7pt}.grids{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.matrix{min-width:0;padding:3px;overflow:visible;break-inside:avoid}.matrix h3{margin:0 0 2px;font-size:7.2pt}.matrix-grid{width:100%;min-width:0;grid-template-columns:104px repeat(5,minmax(0,1fr));grid-template-rows:42px repeat(5,26px)}.corner,.row-label,.col-label{font-size:6.2pt}.row-label{padding-right:5px;line-height:1.05}.col-label span{left:44%;bottom:3px;width:70px;font-size:6.1pt;transform:rotate(-49deg)}.cell{min-width:0;min-height:0;color:transparent!important;background:#fff!important}.final-question{margin-top:4px;padding:5px}.final-question h3,.final-question p,.lock-note{margin:0 0 2px;font-size:7pt}.final-question select{min-height:24px;padding:2px;font-size:7pt}.print-credit{display:block;margin-top:3px;text-align:center;font-size:7pt}body.solution-revealed .puzzle-page,body.solution-revealed .author{display:none!important}body.solution-revealed #help-dialog{position:static;display:block!important;width:100%;max-height:none;border:0;box-shadow:none}body.solution-revealed #help-dialog .dialog-head,body.solution-revealed #help-dialog .dialog-actions,body.solution-revealed #help-dialog #hints,body.solution-revealed #help-dialog #help-intro{display:none!important}body.solution-revealed #solution{display:block!important}}

