:root{--ink: #6b2f1a;--ink-soft: #8a5a3a;--paper: #f6f0e3;--paper-edge: #e3d6bd;--ribbon: #e8584e;--ribbon-dark: #b93c36;--gold: #f5cf5f;--gold-dark: #d9a936;--green: #6fcf6a;--green-dark: #48a847;--pblue: #e6ecff;--pnavy: #2f3a78;--pedge: #b9c4ee}*{box-sizing:border-box}html{font-size:clamp(12px,calc(.45vw + .55vh + 5px),19px)}html,body{margin:0;height:100%;overflow:hidden;background:#9aa3e8}body{font-family:Fredoka,"Baloo 2",system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:manipulation}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}button{font:inherit;border:0;background:none;cursor:pointer;padding:0;color:inherit}button:active{transform:translateY(2px) scale(.97)}input{font:inherit;color:var(--ink)}#paper{position:fixed;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;z-index:5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .35  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}#hud{position:fixed;inset:0;pointer-events:none;z-index:10;padding:max(.9rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(.9rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}#hud button{pointer-events:auto}.casepill{display:inline-flex;gap:.5rem;align-items:center;max-width:calc(100vw - 12rem);padding:.45rem 1.1rem;background:var(--paper);border:3px solid var(--ink);border-radius:1.2rem 1.35rem 1.25rem 1.1rem;box-shadow:inset 0 -4px 0 var(--paper-edge);font-weight:600;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.casepill b{color:var(--ribbon)}.round{position:absolute;left:1.2rem;top:4.6rem;width:4.6rem;height:4.6rem;border-radius:50%;background:radial-gradient(circle at 50% 45%,#f7e3c1 58%,#eea85a 60%);border:3px solid var(--ink);display:grid;place-items:center}.round span{font-size:2.1rem;margin-top:-.3rem}.round em{position:absolute;bottom:-.6rem;right:-.4rem;min-width:1.9rem;height:1.9rem;border-radius:1rem;display:grid;place-items:center;font-style:normal;font-weight:700;background:var(--ribbon);color:#fff;border:2.5px solid var(--ink);font-size:1.05rem}.round.bump{animation:bump .4s cubic-bezier(.2,1.8,.5,1)}@keyframes bump{40%{transform:scale(1.2) rotate(-4deg)}}.topright{position:absolute;right:1rem;top:max(.9rem,env(safe-area-inset-top));display:flex;gap:.5rem}.sq{width:3.3rem;height:3.3rem;border-radius:.9rem;background:var(--gold);border:3px solid var(--ink);box-shadow:inset 0 -5px 0 var(--gold-dark);font-size:1.5rem}.hintbar{position:absolute;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translate(-50%);max-width:92vw;padding:.5rem 1.3rem;border-radius:1.2rem;background:var(--paper);border:3px solid var(--ribbon);font-weight:600;font-size:1.15rem;text-align:center;box-shadow:0 4px #6b2f1a33}#tags{position:fixed;inset:0;pointer-events:none;z-index:8}.tag{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;padding:.35rem .8rem .4rem;border-radius:1rem 1.1rem 1rem .9rem;background:#fffaf0;border:3px solid var(--ink);font-weight:700;font-size:1.05rem;box-shadow:0 4px #6b2f1a40;min-height:2.6rem;animation:bob 1.6s ease-in-out infinite}.tag:after{content:"";position:absolute;left:50%;bottom:-.55rem;width:.8rem;height:.8rem;background:#fffaf0;border:solid var(--ink);border-width:0 3px 3px 0;transform:translate(-50%) rotate(45deg)}.tag.obj{background:#fff3c9}.tag.obj:after{background:#fff3c9}.tag.done{opacity:.72;background:#dff3d8;animation:none}.tag.done:after{background:#dff3d8}@keyframes bob{50%{margin-top:-4px}}#dialog{position:fixed;left:50%;bottom:max(1.2rem,env(safe-area-inset-bottom));transform:translate(-50%);z-index:20;width:min(48rem,94vw);min-height:8rem;padding:1.9rem 2rem 1.5rem 8.6rem;background:var(--paper);border:3.5px solid var(--ink);border-radius:1.1rem 1.6rem 1.3rem 1.5rem/1.4rem 1.2rem 1.6rem 1.1rem;box-shadow:inset 0 -6px 0 var(--paper-edge);cursor:pointer;animation:popx .3s cubic-bezier(.2,1.6,.5,1)}#dialog p{margin:0;font-size:1.5rem;font-weight:600;line-height:1.35;min-height:4rem}#dialog img{position:absolute;left:.6rem;bottom:.4rem;width:7.4rem;height:8.9rem;object-fit:contain}#dialog .next{position:absolute;right:1.1rem;bottom:.45rem;font-size:1rem;font-weight:700;color:var(--ink-soft);animation:nudge .9s ease-in-out infinite}#dialog .ribbon{left:7rem}@keyframes nudge{50%{transform:translateY(3px)}}@keyframes popx{0%{transform:translate(-50%) scale(.8);opacity:0}}.ribbon{position:absolute;left:-1.2rem;top:-1.6rem;padding:.3rem 2.8rem .35rem 1.3rem;max-width:calc(100% + .6rem);background:var(--ribbon);color:#fff;font-weight:700;font-size:1.45rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;clip-path:polygon(0 0,100% 0,calc(100% - 1.3rem) 50%,100% 100%,0 100%);filter:drop-shadow(0 3px 0 var(--ribbon-dark))}.ribbon.gold{background:var(--gold);filter:drop-shadow(0 3px 0 var(--gold-dark))}#layer{position:relative;z-index:30}.screen{position:fixed;inset:0;display:grid;place-items:center;overflow-y:auto;padding:2.6rem .8rem 1.4rem}.screen.dim{background:#28325a61}.screen.clear{background:transparent}.screen.solid{background:var(--pnavy)}.screen.solid.kid{background:#e8584e}.card{position:relative;width:min(44rem,94vw);padding:2.4rem 2rem 1.6rem;margin:auto;background:var(--paper);border:3.5px solid var(--ink);border-radius:1.6rem 1.9rem 1.5rem 1.8rem;box-shadow:inset 0 -7px 0 var(--paper-edge),0 1rem 2.4rem #1e143c40;animation:pop .35s cubic-bezier(.2,1.6,.5,1);text-align:center}.card.small{width:min(30rem,92vw)}.card h1{margin:.2rem 0 .4rem;font-size:2.6rem;line-height:1.1}.card h2{margin:.4rem 0 .8rem;font-size:1.65rem;line-height:1.25}.card h3{margin:1rem 0 .5rem;font-size:1.25rem}.card h4{margin:1rem 0 .3rem;font-size:1.1rem;text-align:left}.card p{font-size:1.2rem;line-height:1.45;margin:.5rem 0}.card .lead{font-size:1.3rem;font-weight:500}.card .small,.small{font-size:1rem;opacity:.85}.big{font-size:3.6rem;line-height:1;margin-bottom:.2rem}@keyframes pop{0%{transform:scale(.85);opacity:0}}.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.2rem}.btns.col{flex-direction:column;align-items:center}.btns.late{opacity:0;animation:fadein .4s forwards}@keyframes fadein{to{opacity:1}}.chunky{padding:.65rem 1.8rem;min-height:3.3rem;border-radius:1.1rem;background:var(--green);color:#fff;font-weight:700;font-size:1.35rem;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;border:3px solid var(--ink);box-shadow:inset 0 -5px 0 var(--green-dark)}.chunky.gold{background:var(--gold);box-shadow:inset 0 -5px 0 var(--gold-dark)}.chunky.blue{background:#6f9fd8;box-shadow:inset 0 -5px #4a78b3}.chunky.ghost{background:#d8cbb4;box-shadow:inset 0 -5px #b9a888}.card.parent{background:var(--pblue);border-color:var(--pnavy);box-shadow:inset 0 -7px 0 var(--pedge),0 1rem 2.4rem #0a143c59;color:#1d2350;text-align:left;padding-top:1.2rem}.phead{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:-.2rem -.6rem .6rem;padding:.5rem 1rem;background:var(--pnavy);color:#fff;border-radius:1rem;font-weight:700;font-size:1.25rem}.phead small{font-weight:500;font-size:.9rem;opacity:.8}.card.parent h2{text-align:left;color:var(--pnavy)}.card.parent .btns{justify-content:flex-end}.card.parent .chunky{background:#6f9fd8;box-shadow:inset 0 -5px #4a78b3;-webkit-text-stroke-color:#1d2350;border-color:#1d2350}.asks{margin:.3rem 0;padding-left:1.4rem;font-size:1.2rem;line-height:1.45}.asks li{margin:.3rem 0}.asks li::marker{content:"❓ "}.tip{background:#fff9e3;border:2px dashed var(--gold-dark);border-radius:.9rem;padding:.6rem .9rem}.steps{font-size:1.1rem;line-height:1.45;padding-left:1.4rem}blockquote{margin:.7rem 0;padding:.8rem 1rem;background:#fff;border-left:6px solid var(--gold);border-radius:.8rem;font-size:1.2rem;line-height:1.45;text-align:left}blockquote cite{display:block;font-style:normal;font-weight:700;font-size:1rem;color:var(--pnavy);margin-bottom:.2rem}blockquote.kid{font-size:1.35rem;border-left-color:var(--ribbon);background:#fffaf0}blockquote.kid cite{color:var(--ribbon-dark)}.cover{color:#fff;text-align:center;max-width:34rem;padding:1rem;animation:pop .35s cubic-bezier(.2,1.6,.5,1)}.cover h2{font-size:2.2rem;margin:.5rem 0}.cover p{font-size:1.3rem;line-height:1.4}.cover .big{font-size:5rem}.cover .chunky{margin-top:1rem}.card.title{background:#f6f0e3f2;width:min(36rem,92vw)}.brand{display:inline-block;padding:.2rem 1rem;border-radius:1rem;background:var(--pnavy);color:#fff;font-weight:600;letter-spacing:.08em}.card.title h1{font-size:3.4rem;color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;margin:.5rem 0}.card.title h1 span{color:var(--gold)}.tag-line{font-size:1.25rem}.pick{display:flex;gap:1rem;justify-content:center}.who{width:10rem;padding:.6rem;border-radius:1.2rem;border:3px solid var(--paper-edge);background:#fffaf0;display:grid;justify-items:center}.who img{width:7rem;height:8.4rem;object-fit:contain}.who.on{border-color:var(--ribbon);box-shadow:0 0 0 4px #f8c7c2}.field{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-top:1rem;font-weight:600;font-size:1.15rem}.field input,.chip-in{padding:.45rem .8rem;border-radius:.9rem;border:3px solid var(--ink-soft);background:#fff;width:10rem;font-size:1.1rem}.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.chip{padding:.45rem 1.1rem;border-radius:1rem;border:3px solid var(--ink-soft);background:#fff;font-weight:700;font-size:1.1rem}.chip.on{background:var(--pnavy);color:#fff;border-color:var(--pnavy)}.screen.board{place-items:start center}.card.boardcard{width:min(76rem,96vw);padding:2.2rem 1.4rem 1.3rem}.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;font-size:1.15rem;margin-bottom:.8rem}.stats span{padding:.25rem .9rem;border-radius:1rem;background:#fffaf0;border:2px solid var(--paper-edge)}.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.8rem;background:#d9b98a;border:3px solid var(--ink-soft);border-radius:1rem;padding:.8rem;box-shadow:inset 0 0 0 4px #c9a270}.catcol h3{margin:0 0 .5rem;font-size:1.15rem;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}.casecard{position:relative;display:grid;gap:.15rem;width:100%;margin-bottom:.6rem;padding:.9rem .7rem .7rem;text-align:center;background:#fffaf0;border:2.5px solid var(--ink);border-radius:.4rem;box-shadow:2px 4px #5028144d;transform:rotate(-1deg)}.catcol .casecard:nth-child(odd){transform:rotate(1.2deg)}.casecard b{font-size:1.1rem;line-height:1.2}.casecard small{font-size:.85rem;opacity:.75}.casecard em{font-style:normal;font-weight:700;font-size:.95rem;color:var(--ribbon)}.casecard .pin{position:absolute;top:-.45rem;left:50%;width:.9rem;height:.9rem;margin-left:-.45rem;border-radius:50%;background:var(--ribbon);border:2px solid var(--ink)}.casecard.solved{background:#fff3c9}.casecard.solved em{color:#2b8a34}.casecard.locked{background:#eee6d6;color:#9d8a74;border-style:dashed;box-shadow:none}.stamp{display:inline-block;padding:.2rem .9rem;border:3px solid var(--ribbon);color:var(--ribbon);border-radius:.5rem;font-weight:700;transform:rotate(-4deg)}.theme{background:#fff;border-radius:.9rem;padding:.5rem 1rem;display:inline-block}.card.book{text-align:left}.clues{display:grid;gap:.6rem;max-height:56vh;overflow-y:auto;padding:.2rem}.clue{display:flex;gap:.8rem;align-items:center;width:100%;text-align:left;padding:.6rem .8rem;border-radius:.9rem;background:#fffaf0;border:2.5px solid var(--paper-edge)}button.clue{border-color:var(--ink-soft);box-shadow:0 3px 0 var(--paper-edge)}@media(hover:hover){button.clue:hover,.opt:hover{background:#fff3c9}}.clue.evidence{background:#fff3c9}.clue.islamic{background:#e6ecff;border-color:var(--pedge)}.cico{font-size:2rem}.clue b{display:block;font-size:1.15rem}.clue small{display:block;font-size:1rem;line-height:1.35;opacity:.9}.suspect{display:flex;gap:1rem;align-items:center;justify-content:center}.suspect img{width:7.5rem;height:9rem;object-fit:contain;flex:none}.suspect.small img{width:5.5rem;height:6.6rem}.suspect .bubble{position:relative;padding:.9rem 1.1rem;background:#fff;border:3px solid var(--ink);border-radius:1.2rem;font-size:1.35rem;text-align:left;line-height:1.35}.suspect .bubble b{display:block;font-size:1rem;color:var(--ink-soft)}.note{background:#fff3c9;border-radius:.9rem;padding:.5rem .9rem}.aha{display:grid;place-items:center;width:100vw;height:100vh}.stampbig{font-size:3.4rem;font-weight:700;color:#fff;padding:.6rem 2rem;background:var(--ribbon);border:5px solid var(--ink);border-radius:1.2rem;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;transform:rotate(-6deg);animation:slam .45s cubic-bezier(.2,1.8,.5,1);text-align:center}@keyframes slam{0%{transform:rotate(-6deg) scale(2.4);opacity:0}}.options{display:grid;gap:.7rem;margin-top:.6rem}.opt{display:flex;align-items:center;gap:.8rem;text-align:left;padding:.8rem 1rem;border-radius:1rem;background:#fffaf0;border:3px solid var(--ink);box-shadow:inset 0 -5px 0 var(--paper-edge);font-weight:600;font-size:1.25rem;line-height:1.3}.opt span{font-size:2rem}.chosen{background:#fff;border-radius:.9rem;padding:.5rem .9rem}.card.why h2 em{color:var(--ribbon)}.principle{text-align:left;font-size:1.3rem;line-height:1.45;padding-left:1.6rem}.principle li{margin:.4rem 0}.principle li::marker{content:"⭐ "}.card.chaincard{width:min(60rem,96vw)}.chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin-top:.6rem}.chain .node{width:8.4rem;min-height:8.2rem;padding:.6rem .5rem;background:#fff;border:3px solid var(--ink);border-radius:1rem 1.2rem 1rem 1.1rem;opacity:0;animation:nodein .5s cubic-bezier(.2,1.6,.5,1) forwards}.chain .node span{font-size:2.3rem}.chain .node p{margin:.2rem 0 0;font-size:1.02rem;line-height:1.25;font-weight:600}.chain .arrow{width:1.1rem;height:0;border-top:4px dashed var(--ink-soft);position:relative}.chain .arrow:after{content:"";position:absolute;right:-2px;top:-8px;border:solid var(--ink-soft);border-width:0 4px 4px 0;width:.6rem;height:.6rem;transform:rotate(-45deg)}.chaincard.sad .node{background:#eef0f6}.chaincard.good .node{background:#eaf8e4}.chaincard.mixed .node{background:#fbf3dc}@keyframes nodein{0%{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:none}}.twin{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}.mini{flex:1 1 12rem;max-width:18rem;padding:.7rem;border-radius:1rem;border:3px solid var(--ink);font-weight:600;font-size:1.1rem}.mini.sad{background:#eef0f6}.mini.good{background:#eaf8e4}.mini.mixed{background:#fbf3dc}.badge{width:9rem;height:9rem;margin:.4rem auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#ffe68a 55%,var(--gold) 56% 70%,var(--gold-dark) 71%);border:4px solid var(--ink);animation:spinin .8s cubic-bezier(.2,1.6,.5,1)}.badge span{font-size:4.2rem}@keyframes spinin{0%{transform:rotate(-200deg) scale(.2)}}#toast{position:fixed;left:50%;top:5.2rem;transform:translate(-50%);z-index:40;padding:.55rem 1.3rem;border-radius:1.2rem;background:#fffaf0;border:3px solid var(--ink);font-weight:700;font-size:1.15rem;box-shadow:0 5px #6b2f1a40;animation:toastin .35s cubic-bezier(.2,1.6,.5,1);pointer-events:none;max-width:92vw;text-align:center}@keyframes toastin{0%{transform:translate(-50%) translateY(-20px);opacity:0}}@media(max-width:560px){.chain{flex-direction:column}.chain .node{width:min(18rem,80vw);min-height:0;display:flex;align-items:center;gap:.6rem;text-align:left}.chain .arrow{width:0;height:1rem;border-top:0;border-left:4px dashed var(--ink-soft)}.chain .arrow:after{right:-9px;top:auto;bottom:-4px;transform:rotate(45deg)}#dialog{padding-left:6.4rem}#dialog img{width:5.6rem;height:6.7rem}#dialog .ribbon{left:5rem}.card{padding:2.2rem 1.1rem 1.3rem}.card.title h1{font-size:2.7rem}}