:root{
  --desk:#17130f; --desk2:#2b221a; --paper:#f4ecd8; --paper2:#e9dcc0; --ink:#2b2219; --muted:#6f5e4a;
  --red:#8e1f1a; --brass:#b08d57; --blood:#7a1410; --line:#cdbd9b; --blue:#243f6b; --snow:#fbfbf8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(ellipse at 50% 0%,#3a2e22 0%,var(--desk) 65%) fixed,var(--desk);color:var(--ink);
  font:19px/1.55 "Crimson Pro",Georgia,serif;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* header */
header{color:var(--paper);padding:28px 0 10px}
.eyebrow{font:13px/1 "Special Elite",monospace;letter-spacing:.2em;color:var(--brass);text-transform:uppercase}
h1{font:800 clamp(34px,6vw,58px)/1.02 "Playfair Display",serif;margin:.25em 0 .15em;letter-spacing:-.01em}
h1 i{font-weight:600;color:var(--brass)}
.meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font:14px "Special Elite",monospace;color:#cbbfa8}
.pips{display:flex;gap:6px;align-items:center}
.pip{width:34px;height:8px;border:1px solid var(--brass);border-radius:2px}
.pip.on{background:var(--brass)} .pip.now{background:repeating-linear-gradient(45deg,var(--brass) 0 4px,transparent 4px 8px)}
.linkish{background:none;border:0;color:#cbbfa8;text-decoration:underline;font:14px "Special Elite",monospace;padding:0}

/* tabs */
nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:18px}
nav button{background:var(--paper2);border:0;border-radius:8px 8px 0 0;padding:9px 16px 7px;font:600 16px "Crimson Pro",serif;
  color:var(--muted);letter-spacing:.03em;text-transform:uppercase;opacity:.82}
nav button[aria-selected=true]{background:var(--paper);color:var(--ink);opacity:1}
nav .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-left:6px;vertical-align:middle}
main{background:var(--paper);border-radius:0 6px 6px 6px;padding:clamp(18px,4vw,40px);box-shadow:0 20px 60px #0008;
  background-image:linear-gradient(#0000 96%,#0000),radial-gradient(ellipse at 20% 0%,#fff6 0%,#0000 60%);margin-bottom:60px;min-height:60vh}
section[hidden]{display:none}
h2{font:800 30px/1.15 "Playfair Display",serif;margin:.2em 0 .5em}
h3{font:600 21px/1.2 "Playfair Display",serif;margin:1.4em 0 .5em}
.dateline,.typed,.sig{font:15px/1.6 "Special Elite",monospace}
.dateline{color:var(--red);letter-spacing:.06em}
.sig{text-align:right;color:var(--muted)}
.steps li{margin:.3em 0}
.memo{border-left:4px solid var(--red);background:#fff5;padding:12px 18px;margin:0 0 26px}
.memo .eyebrow{color:var(--red)}

/* suspects */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.person{background:#fffaf0;border:1px solid var(--line);padding:18px;position:relative;box-shadow:0 2px 0 var(--line)}
.person header{display:flex;gap:14px;align-items:center;padding:0;color:var(--ink)}
.mono{flex:none;width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;
  font:600 22px "Playfair Display",serif;border:3px double var(--brass)}
/* portraits: round crop also hides the generator's corner watermark */
img.mono{width:84px;height:84px;object-fit:cover;object-position:50% 30%}
.aerial{margin:0 0 22px}
.aerial img{display:block;width:100%;max-height:420px;object-fit:cover;border:1px solid var(--line);filter:sepia(.25)}
.aerial figcaption{font:italic 15px/1.4 "Crimson Pro",serif;color:var(--muted);margin-top:6px}
.victim{float:right;width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:50% 30%;margin:0 0 12px 18px;border:3px double var(--brass)}
.person h3{margin:0;font-size:21px}
.person .role{font-size:15px;color:var(--muted);font-style:italic}
.facts{font:13px/1.6 "Special Elite",monospace;color:var(--muted);margin:10px 0}
.person p{margin:.4em 0;font-size:17px}
.person .int{border-top:1px dashed var(--line);padding-top:8px;font-size:16px}
.marks{display:flex;gap:4px;margin-top:10px}
.marks button{flex:1;border:1px solid var(--line);background:none;font:12px "Special Elite",monospace;padding:5px 2px;border-radius:3px}
.marks button[aria-pressed=true][data-m=sus]{background:var(--red);color:#fff;border-color:var(--red)}
.marks button[aria-pressed=true][data-m=clr]{background:#3d5a3a;color:#fff;border-color:#3d5a3a}
.marks button[aria-pressed=true][data-m=unk]{background:var(--paper2)}
.stamp-mark{position:absolute;top:14px;right:14px;font:13px "Special Elite",monospace;padding:2px 8px;border:2px solid;transform:rotate(8deg);opacity:.85}
.stamp-mark.sus{color:var(--red)} .stamp-mark.clr{color:#3d5a3a}
.stmts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{border:1px solid var(--blue);color:var(--blue);background:none;border-radius:20px;padding:2px 12px;font-size:15px}

/* evidence */
.stage-h{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);margin:28px 0 14px;padding-bottom:4px}
.stage-h:first-child{margin-top:0}
.stage-h h3{margin:0}
.stage-h span{font:13px "Special Elite",monospace;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ev{text-align:left;background:#fffaf0;border:1px solid var(--line);padding:14px 16px 16px;position:relative;transition:transform .15s,box-shadow .15s}
.ev:nth-child(3n){transform:rotate(.4deg)} .ev:nth-child(3n+1){transform:rotate(-.3deg)}
.ev:hover{transform:translateY(-2px) rotate(0);box-shadow:0 6px 18px #0002}
.ev .kind{font:12px "Special Elite",monospace;letter-spacing:.12em;text-transform:uppercase}
.k-statement{color:var(--blue)} .k-report{color:var(--red)} .k-document,.k-mirror{color:#5b4a2a} .k-telegram{color:#9a6a12}
.ev b{display:block;font:600 19px/1.25 "Playfair Display",serif;margin:.3em 0 .2em}
.ev small{display:block;color:var(--muted);font-size:15px;line-height:1.35}
.new{position:absolute;top:10px;right:62px;background:var(--red);color:#fff;font:11px "Special Elite",monospace;padding:2px 6px;letter-spacing:.1em}

/* map */
.map-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media (max-width:820px){.map-wrap{grid-template-columns:1fr}}
/* phones: keep map labels readable; the plan scrolls sideways instead of shrinking */
@media (max-width:640px){.map-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.map-wrap>.map{min-width:660px}
  /* the notes stay put while the plan scrolls under them */
  .map-wrap>.room-info{position:sticky;left:0;box-sizing:border-box;width:calc(100vw - 68px)}}
.map{width:100%;height:auto;background:#fbf6e9;border:1px solid var(--line);font-family:"Crimson Pro",serif}
.map .rm{fill:#fffdf6;stroke:var(--ink);stroke-width:2.5;cursor:pointer;transition:fill .15s}
.map .rm:hover{fill:#f3e2bd} .map .rm.sel{fill:#ecd29b}
/* A painted plan (class "painted"): the picture is the map, the rooms are clear hotspots over it, lit when chosen. */
.map.painted{background:#0d0b09}
.map.painted .rm{fill:transparent;stroke:transparent;stroke-width:4;transition:fill .15s,stroke .15s}
.map.painted .rm:hover{fill:rgba(255,214,140,.12);stroke:rgba(255,214,140,.55)}
.map.painted .rm.sel{fill:rgba(255,200,110,.1);stroke:#ffd27f;filter:drop-shadow(0 0 6px rgba(255,200,110,.8))}
.map.painted text{paint-order:stroke;stroke:rgba(12,9,6,.85);stroke-width:4px;stroke-linejoin:round}
.map.painted .lbl{fill:#f6ecd6} .map.painted .lbl-s{fill:#e6d7b8} .map.painted .xdoor{fill:#ffab94}
.map.painted .trail text{stroke:#f6ecd6;stroke-width:5px} .map.painted .trail path{stroke-width:4}
.pin{pointer-events:none} .pin-ring{fill:#f6ecd6;stroke:#b08d57;stroke-width:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.map .pin-n{font:bold 17px "Crimson Pro",serif;fill:#f6ecd6;text-anchor:middle;paint-order:stroke;stroke:rgba(12,9,6,.9);stroke-width:4px}
.pins-btn{display:block;width:100%;margin:0 0 14px;padding:10px 12px;border:1px solid var(--brass);border-radius:6px;background:#fff8;
  font:600 15px "Crimson Pro",serif;color:var(--ink);cursor:pointer;text-align:left}
.pins-btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.map .snow{fill:url(#snowpat)} .map .snow:hover,.map .snow.sel{fill:#e9eef3}
.map .grass{fill:url(#grasspat);stroke:none} .map .grass.sel,.map .grass:hover{fill:#dfe3cf}
.map .glass{stroke-dasharray:6 4}
.map text{fill:var(--ink);pointer-events:none}
.map .lbl{font-size:17px;font-weight:600;text-anchor:middle}
.map .lbl-s{font-size:13px;font-style:italic;text-anchor:middle;fill:var(--muted)}
.map .door{stroke:#fbf6e9;stroke-width:6}
.map .xdoor{font:11px "Special Elite",monospace;fill:var(--red);text-anchor:middle}
.trail path{fill:none;stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.trail text{font:bold 18px "Special Elite",monospace}
.trail-a path{stroke:#1d3b6e} .trail-a text{fill:#1d3b6e}
.trail-b path{stroke:var(--red)} .trail-b text{fill:var(--red)}
.trail-e path{stroke:#6a6a6a} .trail-e text{fill:#6a6a6a}
.trail-cd path{stroke:#6b3f8c} .trail-cd text{fill:#6b3f8c}
.trail-f path{stroke:#6a6a6a;stroke-dasharray:none} .trail-f text{fill:#6a6a6a}
.room-info{background:#fffaf0;border:1px solid var(--line);padding:16px;position:sticky;top:12px}
.room-info p{margin:.4em 0 .8em;font-size:17px}
.legend{font-size:15px;margin-top:10px}
.legend span{display:inline-block;width:26px;border-top:3px dotted;vertical-align:middle;margin-right:6px}

/* reader dialog */
dialog{border:0;padding:0;background:transparent;max-width:min(780px,calc(100vw - 20px));width:100%;max-height:calc(100vh - 30px)}
dialog::backdrop{background:#0b0906cc;backdrop-filter:blur(2px)}
.sheet{background:var(--paper);padding:clamp(20px,4vw,42px);box-shadow:0 20px 60px #000a;position:relative;max-height:calc(100vh - 30px);overflow:auto;
  background-image:repeating-linear-gradient(#0000 0 31px,#b9a88410 31px 32px)}
.sheet .x{position:sticky;float:right;top:0;border:0;background:var(--ink);color:var(--paper);width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;z-index:2}
.sheet .kind{font:13px "Special Elite",monospace;letter-spacing:.14em;text-transform:uppercase}
.sheet .who{font:15px "Special Elite",monospace;color:var(--muted);margin-bottom:1em;display:flex;align-items:center;gap:12px}
.sheet h2{margin-top:.2em}
.aside{color:var(--muted);font-style:italic;font-size:17px}
.hand,.hand-inline{font-family:"Caveat",cursive;font-size:25px;line-height:1.35;color:#1e2f55}
.tl{border-collapse:collapse;width:100%;font-size:17px}
.tl td{border-bottom:1px dotted var(--line);padding:6px 8px;vertical-align:top}
.tl td:first-child{font:14px "Special Elite",monospace;white-space:nowrap;color:var(--red);width:1%}
.inv li{margin:.45em 0}
.sketch{display:block;width:100%;max-width:520px;margin:0 auto 10px;color:var(--ink);background:#fffdf6;border:1px solid var(--line)}
.sk-n{font:bold 15px "Special Elite",monospace;fill:var(--red)} .sk-s{font:11px "Special Elite",monospace;fill:var(--muted)}
.card-print{border:3px double var(--ink);padding:18px 24px;text-align:center;max-width:420px;margin:10px auto;background:#fffdf6}
.card-print.small{max-width:360px;padding:12px}
.card-print p{margin:.35em 0}
.cp-top{font:800 22px "Playfair Display",serif;letter-spacing:.14em}
.cp-sub{font-style:italic;color:var(--muted)}
.card-print hr{border:0;border-top:1px solid var(--ink);width:40%}
.trails dt{float:left;font:bold 20px "Special Elite",monospace;color:var(--red);width:32px}
.trails dd{margin:0 0 10px 32px}
.telegram{background:#f7e9b9;border:1px solid #cfb567;padding:18px 22px;font:16px/1.7 "Special Elite",monospace;
  box-shadow:inset 0 0 40px #b0843322;clip-path:polygon(0 0,100% 0,100% 88%,94% 100%,80% 93%,62% 100%,40% 92%,20% 100%,0 94%)}
.tg-head{color:#8a5a0a;border-bottom:1px solid #cfb567;padding-bottom:6px}
.burn{color:#2a1a08;letter-spacing:-2px}
.blotter{background:#dfe7ea;border:1px solid #aab8bd;padding:22px;margin:12px 0}
.blotter .mirrored{transform:scaleX(-1);transition:transform .6s;opacity:.72;filter:blur(.3px)}
.blotter .mirrored.flipped{transform:none;opacity:1;filter:none}
.mirror-btn,.btn{background:var(--ink);color:var(--paper);border:0;padding:10px 20px;border-radius:3px;font:15px "Special Elite",monospace;letter-spacing:.06em}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink)}

/* solve */
.facts-list{list-style:none;padding:0}
.facts-list li{padding:8px 0 8px 34px;position:relative;border-bottom:1px dotted var(--line)}
.facts-list li::before{content:"✓";position:absolute;left:6px;color:#3d5a3a;font-weight:bold}
.q{background:#fffaf0;border:2px solid var(--ink);padding:22px;margin-top:18px}
.q h3{margin-top:0}
.q label{display:block;margin:12px 0 4px;font-weight:600}
.q input[type=text],.q select{width:100%;padding:10px 12px;border:1px solid var(--muted);background:#fff;border-radius:3px}
.q input[type=text]{font:22px "Special Elite",monospace;max-width:220px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.picks label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:10px 12px;margin:0;font-weight:400;background:#fff;cursor:pointer}
.picks input{width:20px;height:20px;accent-color:var(--red)}
.q .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.verdict{min-height:1.5em;font-style:italic;color:var(--red);margin-top:10px}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.hints li{margin:.4em 0;color:var(--blue)}
.solved-stamp{display:inline-block;font:22px "Special Elite",monospace;color:var(--red);border:4px double var(--red);padding:6px 16px;transform:rotate(-6deg);margin:10px 0 20px;letter-spacing:.2em}
.rating{background:var(--ink);color:var(--paper);padding:18px 22px;margin:20px 0}
.rating b{color:var(--brass);font:800 24px "Playfair Display",serif}
textarea{width:100%;min-height:55vh;border:1px solid var(--line);padding:16px;background:#fffdf6 repeating-linear-gradient(#0000 0 31px,#cdbd9b66 31px 32px) content-box local;
  background-clip:padding-box;font:23px/32px "Caveat",cursive;color:#1e2f55;resize:vertical}

/* cover */
#cover{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 30%,#3a2e22,#0d0a08);display:grid;place-items:center;padding:16px}
#cover[hidden]{display:none}
.folder{background:#c9a86a;background-image:linear-gradient(135deg,#d4b67b,#b8955a);width:min(560px,100%);padding:44px 34px;position:relative;
  box-shadow:0 30px 80px #000c;border-radius:4px;text-align:center;color:#2a1d0e}
.folder::before{content:"";position:absolute;top:-22px;left:30px;width:170px;height:24px;background:#c9a86a;border-radius:6px 6px 0 0}
.folder .conf{display:inline-block;font:20px "Special Elite",monospace;color:var(--red);border:3px solid var(--red);padding:4px 14px;transform:rotate(-4deg);letter-spacing:.2em}
.folder h1{color:#2a1d0e;font-size:clamp(32px,7vw,48px)}
.folder p{font-size:18px;margin:.6em 0 1.4em}
.folder .btn{font-size:17px;padding:14px 28px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:14px 22px;border:1px solid var(--brass);
  font:15px "Special Elite",monospace;z-index:60;box-shadow:0 10px 30px #000a;max-width:calc(100vw - 32px)}
footer{color:#7d6d58;text-align:center;font:13px "Special Elite",monospace;padding:0 16px 30px}
body.board-page>footer{padding:24px 16px 10px;color:#e6d3a8;text-shadow:0 1px 3px #000}
.corner{position:fixed;top:14px;right:16px;z-index:55;background:var(--ink);color:var(--paper);border:1px solid var(--brass);padding:8px 14px;
  font:13px "Special Elite",monospace;letter-spacing:.08em;text-decoration:none;border-radius:3px;box-shadow:0 4px 14px #0008}
.corner:hover{background:var(--brass);color:var(--ink)}
@media (max-width:640px){
  header{padding-top:14px}
  .eyebrow{font-size:11px;letter-spacing:.12em;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:108px}
  h1{font-size:28px}
  .meta{gap:6px 16px;font-size:13px}
  .corner{position:absolute;top:10px;right:12px;padding:6px 10px;font-size:12px}
  nav{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:#0f0c09;
    border-top:1px solid #3a3027;padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px))}
  nav button{border-radius:8px;padding:10px 0;font:600 13px/1 "Crimson Pro",serif;letter-spacing:0;text-transform:none;background:none;color:#b8a888;opacity:1;position:relative}
  nav button[aria-selected=true]{background:var(--brass);color:var(--ink)}
  nav .dot{position:absolute;top:4px;right:6px;width:7px;height:7px;margin:0}
  main{border-radius:6px;margin-bottom:84px}
  .victim{float:none;display:block;width:100%;height:220px;border-radius:10px;margin:0 0 14px;border:0}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* photos inside evidence and briefings */
.photo{margin:14px 0;background:#fffdf6;border:1px solid var(--line);padding:8px 8px 10px;box-shadow:0 3px 10px #0002;max-width:560px}
.photo img{display:block;width:100%;height:auto;filter:sepia(.15)}
.photo figcaption{font:italic 15px/1.35 "Crimson Pro",serif;color:var(--muted);margin-top:6px}
.photo.tilt{transform:rotate(-1deg)}

/* mini-puzzles */
.pz{margin:18px 0 8px;padding:16px;background:#fffaf0;border:2px dashed var(--muted)}
.pz.done{border-style:solid;border-color:#3d5a3a}
.pz-after:not(:empty){border-left:4px solid #3d5a3a;background:#3d5a3a12;padding:10px 16px;margin-top:10px}
.jig{display:grid;gap:3px;width:100%;max-width:560px;margin:0 auto;background:var(--ink);padding:3px;touch-action:manipulation}
.jig button{border:0;padding:0;background-repeat:no-repeat;min-height:0}
.jig button.sel{outline:4px solid var(--brass);outline-offset:-4px;filter:brightness(1.1)}
.jig.whole{gap:0;padding:0;transition:gap .4s}
.morse{font:22px/1.7 "Special Elite",monospace;letter-spacing:.08em;word-spacing:.2em;background:#f7e9b9;border:1px solid #cfb567;padding:14px 16px;margin:0 0 12px;overflow-wrap:anywhere}
.morse-plain{font:24px "Special Elite",monospace;color:#3d5a3a;letter-spacing:.1em}
.mkey{margin:12px 0}
.mkey summary{cursor:pointer;font:15px "Special Elite",monospace}
.mkey div{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:2px 10px;font:15px "Special Elite",monospace;margin-top:8px}
.pz-ans{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.pz-ans input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--muted);font:20px "Special Elite",monospace;text-transform:uppercase;background:#fff}
.pz-ans .verdict{flex-basis:100%}
.spots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){.spots{grid-template-columns:1fr}}
.spots figure{margin:0}
.spots figcaption{font:13px "Special Elite",monospace;color:var(--muted);margin-bottom:3px}
.spot{width:100%;height:auto;display:block;border:1px solid var(--line);background:#efe6cf;touch-action:manipulation}
#spot-a{cursor:crosshair}
.spot .rings circle{fill:none;stroke:var(--red);stroke-width:6}
.wheel{display:block;font:16px "Special Elite",monospace}
.wheel input{width:100%;accent-color:var(--red);height:32px}
.lock{display:flex;gap:10px;justify-content:center;margin:6px 0 14px}
.dial{display:flex;flex-direction:column;align-items:center;background:var(--ink);color:var(--paper);border-radius:6px;padding:4px;border:3px double var(--brass)}
.dial b{font:30px "Special Elite",monospace;min-width:1.4em;text-align:center;padding:4px 0}
.dial button{background:none;border:0;color:var(--brass);font-size:22px;padding:6px 14px}
.ord-picked{min-height:1.5em;margin:0 0 12px;padding-left:1.6em}
.ord-picked li{margin:.3em 0;padding:4px 0;border-bottom:1px dotted var(--line)}
.ord-pool{display:flex;flex-direction:column;gap:8px}
.ord-pool .chip{text-align:left;border-radius:6px;padding:8px 12px;font-size:17px}

/* calendar */
.cal{display:flex;flex-direction:column;gap:8px}
.day{display:grid;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-decoration:none;color:var(--ink);
  background:#fffaf0;border:1px solid var(--line);padding:10px 14px;border-radius:4px}
a.day:hover{border-color:var(--ink)}
.day.cur{border:2px solid var(--red)}
.day.locked{opacity:.55;background:repeating-linear-gradient(45deg,#0000 0 10px,#0000000a 10px 20px)}
.dow{grid-row:1;font:12px "Special Elite",monospace;color:var(--red);text-transform:uppercase;letter-spacing:.1em;text-align:center}
.dnum{grid-row:2;grid-column:1;font:800 26px/1 "Playfair Display",serif;text-align:center}
.dinfo{grid-row:1/3;grid-column:2}
.dinfo b{display:block;font:600 18px/1.2 "Playfair Display",serif}
.dinfo small{display:block;color:var(--muted);font-size:15px;line-height:1.3}
.dstat{grid-row:1/3;grid-column:3;font:14px "Special Elite",monospace;color:#3d5a3a}
.day.test .dow{color:var(--muted)}
.btn.ghost-l{background:none;color:var(--paper);border:1px solid var(--brass)}
button.corner{cursor:pointer}
.staff{display:block;max-width:100%;height:auto;background:#fbf3df;border:1px solid #cfb567;margin:0 0 8px;fill:#1e2f55;stroke:#1e2f55}
.staff .st-l{stroke-width:1.2}.staff .st-s{stroke-width:1.6}
.staff text{font:15px "Special Elite",monospace;stroke:none;fill:#8a2d1f}


/* corner badge on evidence cards */
.ev{padding-right:64px}
.ev-ico{position:absolute;top:10px;right:10px;width:42px;height:42px}
svg.ev-ico{overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;padding:8px;box-sizing:border-box;border-radius:50%;background:#f3e9d2}
.ev-face{border-radius:50%;object-fit:cover;object-position:50% 30%;border:2px solid #b08d57;box-shadow:0 1px 3px #0003}
.k-puzzle{color:#3d5a3a}
/* On a painted plan the picture replaces the line drawing: loose shapes are hidden, while hotspots, labels and <g> groups (trails, pins, legends) stay. */
.map.painted > :is(rect:not(.rm),circle,ellipse,line,path,polygon,polyline){display:none}
/* painted plan on a light background: dark labels with a cream halo */
.map.painted.light text{stroke:rgba(251,246,233,.92);stroke-width:4px}
.map.painted.light .lbl{fill:#2b2219} .map.painted.light .lbl-s{fill:#4a3b2a} .map.painted.light .xdoor{fill:#8e1f1a}
a.btn{text-decoration:none;display:inline-block}
/* ---------- case board (index.html): polaroids on cork, red string, wax seals ---------- */
body.board-page{background-color:#634429;background-image:radial-gradient(rgba(0,0,0,.2) 1px,transparent 1.6px),radial-gradient(rgba(255,222,170,.1) 1px,transparent 1.6px),
  radial-gradient(rgba(0,0,0,.13) 1.6px,transparent 2.2px),linear-gradient(165deg,#77522f,#5c3f26 55%,#6a4a2d);background-size:7px 7px,11px 11px,17px 17px,100% 100%;
  background-position:0 0,3px 5px,8px 2px,0 0;background-attachment:scroll,scroll,scroll,fixed}
body.board-page::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 120px 36px rgba(12,8,5,.72)}
.board-bar{position:sticky;top:0;z-index:10;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 16px calc(10px);
  padding-top:calc(12px + env(safe-area-inset-top,0px));background:rgba(20,14,9,.88);backdrop-filter:blur(6px);color:var(--paper);border-bottom:1px solid #4a3a2a}
.board-bar h1{font-size:24px;margin:0}
.board-bar span{font:14px "Special Elite",monospace;color:#e6d3a8;white-space:nowrap}
.board-intro{max-width:520px;margin:18px auto 0;padding:0 16px}
.board-intro p{background:#f4efe2;color:#2a2016;font:600 21px/1.25 "Caveat",cursive;padding:12px 18px;transform:rotate(-1deg);box-shadow:0 6px 14px rgba(0,0,0,.45)}
.board{position:relative;max-width:520px;margin:0 auto;overflow:hidden;background:none;box-shadow:none;border-radius:0;padding:0;min-height:0}
.board .string path{fill:none;stroke:#c4392f;stroke-width:2.2;opacity:.6}
.board .string path.walked{opacity:1;stroke-width:3}
.lamp{position:absolute;width:380px;height:380px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,196,110,.5),rgba(255,196,110,0) 65%);pointer-events:none}
.pol{position:absolute;transform:translateX(-50%) rotate(var(--r,0deg));width:160px;background:#f3efe6;border:0;padding:9px 9px 10px;color:#2a2016;
  box-shadow:0 10px 20px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s}
button.pol:hover{transform:translateX(-50%) rotate(0deg) scale(1.04);box-shadow:0 14px 26px rgba(0,0,0,.6)}
.pol::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f6dd97,#9a6f22);box-shadow:0 2px 3px rgba(0,0,0,.6);z-index:2}
.pol-pic{position:relative;display:block;width:142px;height:106px;background:#2b221a;overflow:hidden}
.pol-pic img{display:block;width:100%;height:100%;object-fit:cover}
.pol-cap{font:600 19px/1.1 "Caveat",cursive;text-align:center}
.pol .stars{font-size:15px;text-shadow:none;color:#c8921d;margin-top:-4px}
.pol .stars i{color:#cdbd9b}
.pol .stamp{position:absolute;top:34px;left:50%;transform:translateX(-50%) rotate(-12deg);border:2px solid #a8201a;color:#a8201a;background:rgba(243,239,230,.72);
  font:400 15px "Special Elite",monospace;letter-spacing:.12em;text-transform:uppercase;padding:1px 8px}
.pol.locked .pol-pic img{filter:grayscale(1) brightness(.42)}
.pol.locked .pol-cap{color:#6f5e4a}
.seal{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#d2463a,#8a1a13 60%,#5e0f0b);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 0 0 4px rgba(0,0,0,.18)}
.seal::after{content:"";position:absolute;inset:13px;border-radius:50%;border:2px solid rgba(255,190,170,.35)}
.pol.cur{box-shadow:0 0 0 3px #f0b35a,0 0 36px 8px rgba(240,179,90,.5),0 10px 20px rgba(0,0,0,.55)}
.pol.soon{background:#e9e2cf;width:150px;padding:28px 12px;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.pol.soon .pol-cap{color:#6f5e4a}
.tag{position:absolute;transform:translateX(-50%) rotate(3deg);background:#a8201a;color:#fff;font:15px "Special Elite",monospace;letter-spacing:.06em;padding:6px 14px;
  box-shadow:0 3px 8px rgba(0,0,0,.5);pointer-events:none;z-index:1}
.stars{color:#ffd27f;letter-spacing:2px;font-size:17px;text-shadow:0 1px 3px #000}
.stars i{font-style:normal;color:#6f5e4a;text-shadow:none}
.sheet .stars{text-shadow:none} .sheet .stars i{color:#cdbd9b}
.bonus{max-width:620px;margin:10px auto 40px;padding:0 16px;position:relative;z-index:6}
.bonus h2{color:var(--paper);font:600 20px "Playfair Display",serif;text-align:center}
.bonus .day{background:#f4efe2;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.bonus .day:nth-child(odd){transform:rotate(-.6deg)} .bonus .day:nth-child(even){transform:rotate(.5deg)}

/* guideline fixes */
html{touch-action:manipulation;-webkit-tap-highlight-color:rgba(176,141,87,.25)}
h1,h2,h3{text-wrap:balance}
dialog,.sheet{overscroll-behavior:contain}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- landing (index.html) ---------- */
.land{background:none;box-shadow:none;border-radius:0;min-height:0;position:relative;z-index:6;max-width:560px;margin:0 auto;padding:40px 16px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--paper)}
.land-mark{width:96px;height:96px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.land h1{margin:.2em 0 0}
.land-sub{font:600 26px/1.2 "Caveat",cursive;color:#f0d9a8;margin:.1em 0 22px}
.letter{background:#f4efe2;color:#2a2016;text-align:left;padding:26px 26px 20px;transform:rotate(-.8deg);box-shadow:0 12px 26px rgba(0,0,0,.55);position:relative;width:100%;
  font:16px/1.65 "Special Elite","Courier New",monospace}
.letter::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f6dd97,#9a6f22);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.letter p{margin:0 0 .8em}
.letter-head{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);border-bottom:1px solid #d9ccb0;padding-bottom:10px}
.letter-sig{font:600 26px/1 "Caveat",cursive;color:#1e2f55;text-align:right;margin:0}
.land-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 8px}
.land-cta .btn{font-size:17px;padding:14px 24px}
.land-cta .btn:not(.ghost-l){background:var(--red);color:#fff}
.land-files{display:flex;justify-content:center;gap:0;margin:30px 0 6px;min-height:170px}
.land-files .pol{position:relative;transform:rotate(var(--r));margin:0 -14px;width:140px}
.land-files .pol-pic{width:122px;height:90px}
.land-files .pol-cap{font-size:16px}
.land-count{font:15px "Special Elite",monospace;color:#e6d3a8}
.board-intro a{color:#a8201a}

/* ---------- case board backdrop: three cork photos with clutter down both sides, each used once ---------- */
/* --mm is pixels per millimetre: the polaroids are real Polaroid size, 88 mm wide with a square 79 mm picture. */
.board{--mm:1.82px;max-width:none;overflow:hidden}
.board .col{position:absolute;top:0;bottom:0;left:50%;width:min(100%,560px);transform:translateX(-50%);z-index:1}
.board .string{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* the backdrop spans the whole page; --ft/--fb are how far the top and bottom of each photo fade (0 at the page's very top and bottom) */
body.board-page{position:relative}
.backdrop{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;overflow:hidden;background:#140e09;box-sizing:border-box}
.board-intro,.board,.bonus,body.board-page>footer{position:relative;z-index:1}
.backdrop .side{position:absolute;left:0;right:0;background:center top/cover no-repeat;
  --fade:linear-gradient(transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.backdrop .side.l{right:auto;-webkit-mask-image:var(--fade),linear-gradient(90deg,#000 70%,transparent);mask-image:var(--fade),linear-gradient(90deg,#000 70%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.backdrop .side.r{left:auto;right:0;-webkit-mask-image:var(--fade),linear-gradient(270deg,#000 70%,transparent);mask-image:var(--fade),linear-gradient(270deg,#000 70%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.backdrop .rail{position:absolute;left:0;right:0;height:46px;transform:translateY(-50%);background:center/100% 100% no-repeat;box-shadow:0 7px 12px rgba(0,0,0,.55),0 -2px 6px rgba(0,0,0,.35)}
.board .pol{width:calc(88 * var(--mm));padding:calc(4.5 * var(--mm)) calc(4.5 * var(--mm)) calc(5 * var(--mm))}
.board .pol-pic{width:calc(79 * var(--mm));height:calc(79 * var(--mm))}
.lamp{z-index:0} .pol{z-index:2} .tag{z-index:3}
.tag{white-space:nowrap}
.land-cta [hidden]{display:none}