:root{font-family:'Trebuchet MS',system-ui,sans-serif;color:#344b48;background:#f1ead9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#dce9dd,transparent 60%),linear-gradient(135deg,#fbf3df,#eae6d1);min-height:100vh}button{font:inherit;font-weight:bold;cursor:pointer;border:0;border-radius:12px;background:#315f63;color:#fff7df;padding:13px 18px;box-shadow:0 3px 0 #214146;touch-action:manipulation}button.light{background:#f0dfb9;color:#5e513e;box-shadow:0 3px 0 #cbb58c}button.plain{background:none;color:#526f69;box-shadow:none;padding:9px 12px}button:disabled{opacity:.5;cursor:default}button:active:not(:disabled){transform:translateY(2px)}:focus-visible{outline:4px solid #d09a35;outline-offset:3px}.app{max-width:1200px;margin:auto;padding:26px}header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px}.brand{display:flex;align-items:center;gap:16px}.brand>span{width:64px;height:64px}.brand .raster-icon{width:100%;height:100%}h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,45px);margin:0;line-height:1.1;color:#315f63}h1 span{font-weight:normal}h2{margin:0;font-size:23px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold;color:#8f7953;margin:0 0 8px}.case{background:#fffbee;padding:24px;border:1px solid #d6c9aa;border-radius:25px;box-shadow:0 12px 30px #6c623c15}.case-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.intro{font-size:14px;color:#697763;line-height:1.4;margin:8px 0 0}.counter{background:#e1ebd6;color:#476546;border-radius:30px;padding:12px 18px;font-weight:bold;font-size:20px;white-space:nowrap}.difficulty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0}.difficulty button{font-size:13px;padding:10px 14px}.difficulty button[aria-pressed=true]{background:#315f63;color:#fff7df;box-shadow:0 3px 0 #214146}.difficulty span{font-size:12px;color:#73806a}.viewport{overflow:auto;border-radius:15px;border:5px solid #c4ab7b;box-shadow:0 4px 0 #a68b63;overscroll-behavior-x:contain;background:#ebd8ac}.scene{position:relative;width:100%;min-width:760px;aspect-ratio:3/2}.scene.zoomed{min-width:1200px}.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}#objects{position:absolute;inset:0}.object{position:absolute;width:5.8%;aspect-ratio:1;padding:0;background:transparent!important;border:0;border-radius:50%;box-shadow:none!important;transform:translate(-50%,-50%);touch-action:manipulation}.object:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}.object .painted-object{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 1px 1px #62503635)}.object.found .painted-object{opacity:.5}.object.found{cursor:default}.object .tick{position:absolute;right:-3px;top:-2px;border-radius:50%;background:#315f63;color:#fff7df;width:22px;height:22px;font-size:15px;line-height:22px;border:2px solid #fff6df}.object.hinted{outline:4px solid #ffde61;outline-offset:5px;background:#fff3b844!important;animation:hint 1s ease-in-out infinite alternate}.object:focus-visible{outline-offset:3px}.scene-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:12px}.pan{display:flex;align-items:center;gap:5px;color:#6a7b6d}.pan button{font-size:20px}.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:22px 0 12px}.list-head span{font-size:13px;color:#6a7b6d}.checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.clue{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f6ecd1;color:#5c5944;box-shadow:0 3px 0 #d5c59e;border:2px solid transparent;text-align:left}.clue > .raster-icon{width:50px;height:50px;flex-shrink:0}.clue .name{font-size:13px;display:block}.clue .count{display:block;font-size:19px;margin-top:4px}.clue.selected{border-color:#819c75}.clue.done{background:#deead0;box-shadow:0 3px 0 #b0c39d}.message{min-height:24px;font-size:15px;line-height:1.45;margin:20px 0 14px}.actions{display:flex;gap:12px;flex-wrap:wrap}details{font-size:14px;line-height:1.6;margin-top:25px;padding:0 10px}summary{font-weight:bold;cursor:pointer}.notice{font-size:13px;color:#87563c}footer{text-align:center;margin:28px 0 5px;color:#77806c;font-size:13px}dialog{border:1px solid #d6c9aa;border-radius:24px;background:#fffbee;color:#344b48;padding:24px;max-width:min(600px,94vw);max-height:90dvh;box-shadow:0 20px 90px #243c3455}dialog::backdrop{background:#273d36a3}dialog p{line-height:1.5}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.scene-list{display:grid;gap:12px;margin-top:20px}.scene-choice{display:flex;align-items:center;gap:15px;text-align:left;background:#f0dfb9;color:#5e513e;box-shadow:0 3px 0 #cbb58c;padding:8px}.scene-choice img{width:100px;aspect-ratio:3/2;object-fit:cover;border-radius:8px}.scene-choice small{display:block;font-size:12px;margin-top:7px;font-weight:normal}.win-art .raster-icon{width:105px;height:105px}#win-dialog{text-align:center;width:440px}#win-dialog button{display:block;width:100%;margin-top:12px}#reset-dialog button{margin:5px}@keyframes hint{to{box-shadow:0 0 0 10px #ffdf6c44}}@media(max-width:650px){.app{padding:12px}header{gap:10px}.brand{gap:8px}.brand>span{width:40px;height:40px}.brand .eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:27px}h1 span{display:block}header>button{font-size:12px;padding:10px}.case{padding:13px;border-radius:18px}.case-head h2{font-size:20px}.counter{font-size:16px;padding:9px 12px}.difficulty{margin:15px 0;gap:8px}.difficulty button{font-size:12px}.difficulty span{width:100%}.list-head{display:block}.list-head span{display:block;margin-top:5px}.checklist{grid-template-columns:repeat(2,minmax(0,1fr))}.clue{padding:7px;gap:6px}.clue > .raster-icon{width:42px;height:42px}.clue .name{font-size:12px}.clue .count{font-size:17px}.actions{display:grid;grid-template-columns:1fr;width:100%}.scene-tools{font-size:11px;gap:3px}.scene-tools button{padding:8px}.pan{gap:2px}.pan span{max-width:130px}.message{font-size:14px}.viewport{border-width:3px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

#decor{position:absolute;inset:0;pointer-events:none}.scenery{position:absolute;width:21%;aspect-ratio:200/110;transform:translate(-50%,-50%);pointer-events:none;opacity:.88}.scenery .painted-scenery{display:block;width:100%;height:100%}.object.found .painted-object{opacity:.65}

.raster-icon{display:inline-block;position:relative;width:100%;height:100%;pointer-events:none;vertical-align:middle}.raster-crop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;pointer-events:none}.raster-crop img{position:absolute;max-width:none!important;max-height:none!important;pointer-events:none;user-select:none}.painted-piece{position:absolute;inset:0;overflow:hidden;pointer-events:none}.painted-object{position:absolute;inset:0;transform-origin:center;pointer-events:none}.painted-cover{position:absolute;left:-5%;width:110%;top:64%;height:48%;pointer-events:none}.painted-cover.deep{top:51%;height:61%}.painted-scenery{display:block;width:100%;height:100%;pointer-events:none}.object .tick{z-index:2}
/* Keep atlas crops at their natural aspect ratio, even in wide scenery frames. */
.scenery .raster-icon{position:absolute;left:50%;top:50%;width:100%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%)}
.painted-cover .raster-icon{position:absolute;left:0;top:-20%;width:100%;height:auto;aspect-ratio:1}

#scenes-dialog{width:760px;max-width:94vw}.scene-list{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-choice{min-width:0}.scene-choice img{width:90px;flex-shrink:0}@media(max-width:600px){.scene-list{grid-template-columns:1fr}}