:root{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;color:#355e58;background:#edf5ec;font-synthesis:none;--ink:#355e58;--mint:#dbeee1;--gold:#efbb57;--paper:#fffdf5;--peach:#f7e2c6}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100dvh;user-select:none;-webkit-user-select:none;touch-action:manipulation}button,a{font:inherit;touch-action:manipulation}button{cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible{outline:4px solid #d39f3e;outline-offset:3px}button:disabled{cursor:default}[hidden]{display:none!important}.ambient{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 10% 0%,#fff5d6 0,transparent 48%),radial-gradient(ellipse at 95% 85%,#cfebe1 0,transparent 47%),#edf5ec}.ambient::after{content:'';position:absolute;inset:0;opacity:.16;background-image:radial-gradient(#71927b 1px,transparent 1px);background-size:21px 21px;mask-image:linear-gradient(#000,transparent 65%)}
.topbar{height:86px;flex:none;display:flex;align-items:center;gap:15px;padding:14px max(26px,env(safe-area-inset-right)) 10px max(26px,env(safe-area-inset-left))}.round-button{width:47px;height:47px;flex:none;display:grid;place-items:center;background:#fffdf5ee;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 0 #537e6516;color:var(--ink);text-decoration:none}.round-button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.round-button:active{transform:translateY(2px)}.round-button.quiet{width:37px;height:37px;margin-left:-7px;background:#eaf2e9a8}.quiet svg{width:21px;height:21px}.mute-line{display:none}.muted .mute-line{display:block}.muted{opacity:.58}.brand{min-width:0}.eyebrow{font-size:9px;font-weight:bold;letter-spacing:2px;color:#739287}.brand h1{font-size:clamp(23px,3vw,34px);letter-spacing:-1px;line-height:1.06;margin:3px 0 0}.progress{display:flex;align-items:center;gap:5px;font-size:17px;font-weight:bold;margin-left:auto;margin-right:13px;position:relative;padding-bottom:8px}.progress .slash{opacity:.4}.dots{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);display:flex;gap:3px}.dots i{width:5px;height:5px;border-radius:50%;background:#b7cebe}.dots i.done{background:#d4a14d}.dots i.current{background:#628873;box-shadow:0 0 0 2px #fff8}.speaking #replay{background:#fff0ba;box-shadow:0 0 0 4px #f4d78266}.audio-failed #replay{outline:2px solid #d7aa55}
.play-board{min-height:0;flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;width:min(1200px,calc(100% - 48px));margin:0 auto}.scene-panel{min-height:0;background:var(--paper);border:2px solid #fff;border-radius:27px;box-shadow:0 5px 0 #73967919;display:flex;flex-direction:column;overflow:hidden;padding:0 11px 11px}.question-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 12px 11px}.case-title{font-size:10px;text-transform:uppercase;letter-spacing:1.8px;font-weight:bold;color:#8caa93}.question-row h2{font-size:clamp(20px,2.5vw,28px);margin:4px 0 0;letter-spacing:-.5px;line-height:1.12}.hint-button{flex:none;display:flex;align-items:center;gap:7px;background:#f4ead2;padding:9px 12px;border-radius:15px;color:#9a7f42;font-weight:bold;font-size:12px}.hint-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.hint-button:active{transform:scale(.96)}
.scene-media{flex:1;min-height:0;display:block;position:relative;overflow:hidden;border-radius:18px;background:#f6efe0;padding:0;width:100%}.scene-content>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.clue-ring{position:absolute;left:50%;top:61%;width:32%;height:45%;border-radius:50%;border:4px solid #fff8be;box-shadow:0 0 0 5px #e9bd5c66,0 0 25px #ffea97b3;opacity:0;transform:translate(-50%,-50%);pointer-events:none}.show-clue .clue-ring{animation:clue-glow 1.2s ease-in-out 3}.case-stamp{position:absolute;right:15px;top:14px;display:flex;align-items:center;gap:9px;transform:rotate(5deg);background:#fff9ddf5;border:2px dashed #cda451;border-radius:13px;padding:9px 14px;font-weight:bold;font-size:16px;color:#9b7c3c;box-shadow:0 4px 12px #77593116}.case-stamp b{font-size:23px;color:#658d60}
.answer-panel{min-height:0}.answer-heading{display:flex;justify-content:space-between;align-items:center;padding:0 5px 7px;font-size:11px;font-weight:bold;color:#7c9a84;letter-spacing:.6px}.tiny-stars{font-size:14px;color:#c19d4e;letter-spacing:7px}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;height:clamp(155px,25dvh,220px)}.choice{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;padding:6px 9px 8px;border-radius:23px;border:2px solid #fffdf6;background:#fffdf3cc;box-shadow:0 4px 0 #819d741a;transition:transform .15s,background .2s,border-color .2s;overflow:hidden}.choice:nth-child(2){background:#fdf1dfc9}.choice:nth-child(3){background:#e8f3e7cf}.choice:nth-child(4){background:#e8f1f1c9}.choice:active:not(:disabled){transform:translateY(3px) scale(.985)}.choice img{min-height:0;flex:1;width:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 2px #53726413)}.choice .name{font-size:13px;font-weight:bold;color:#668176;padding:3px 5px 0;line-height:1.1}.choice.selected{border-color:#d8b062;background:#fff1ca;animation:gentle-wiggle .45s ease-in-out}.choice.found{border:3px solid #83a96f;background:#f1f7dc;box-shadow:0 0 0 4px #dbe9b8,0 5px 0 #829e531a}.choice.found::after{content:'✓';position:absolute;right:9px;top:7px;color:#fff;background:#88aa73;border:2px solid #fffbd8;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:20px}.choice.other{opacity:.58}.choice:not(:disabled):hover{border-color:#dac791}
.bottom-bar{min-height:65px;flex:none;padding:13px max(25px,env(safe-area-inset-right)) max(13px,env(safe-area-inset-bottom)) max(25px,env(safe-area-inset-left));display:flex;justify-content:center;align-items:center;gap:15px}.spoken{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;max-width:850px;font-size:16px;color:#5d7e6c;font-weight:bold;line-height:1.3;text-align:center}.voice-dots{display:flex;align-items:center;gap:3px;height:17px;flex:none}.voice-dots i{display:block;width:4px;height:4px;background:#88a282;border-radius:5px}.speaking .voice-dots i{animation:voice .55s infinite alternate}.speaking .voice-dots i:nth-child(2){animation-delay:-.3s}.speaking .voice-dots i:nth-child(3){animation-delay:-.15s}.next-button{background:#e7b858;color:#5f542f;border:2px solid #fff4c9;box-shadow:0 3px 0 #c2954533;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:bold;padding:10px 16px;flex:none;white-space:nowrap}.next-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.next-button:active{transform:translateY(2px)}
.loading{position:absolute;z-index:30;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:12px;min-width:260px;max-width:90%;padding:25px 30px;background:#fffdf7f7;border:2px solid #fff;border-radius:24px;box-shadow:0 12px 60px #4e70442b;text-align:center}.loading strong{font-size:15px}.spinner{width:23px;height:23px;border:3px solid #d5e2c9;border-top-color:#709775;border-radius:50%;animation:spin 1s linear infinite}.load-track{height:6px;background:#e6eddb;width:190px;border-radius:10px;overflow:hidden}.load-track span{display:block;height:100%;width:0;background:#9bb77e;transition:width .2s}.loading>span:last-of-type{font-size:11px;opacity:.7}.loading button{border-radius:12px;background:#e9c579;padding:9px 18px;font-weight:bold}.sound-note{position:absolute;right:22px;top:83px;z-index:22;background:#fff8de;border:1px solid #d6bf86;border-radius:12px;padding:9px 12px;font-size:11px}.complete{position:absolute;inset:0;z-index:35;background:radial-gradient(ellipse at center,#fff6d4,#e0eee2 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.detective-badge{width:120px;height:120px;border-radius:50%;background:#ebbd59;border:6px solid #fff3c7;box-shadow:0 7px 0 #c7a46726;display:grid;place-items:center}.detective-badge svg{width:83px;height:83px;fill:none;stroke:#fff9df;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.complete h2{font-size:40px;margin:0;letter-spacing:-1.5px}.complete p{margin:0}.complete-stars{color:#d7ae54;font-size:27px;letter-spacing:7px;margin:4px}.complete .next-button{font-size:18px;padding:13px 25px}.complete-home{color:#6f8e79;font-size:13px;padding:10px}.celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:32}.confetti{position:absolute;width:9px;height:13px;border-radius:3px;background:#e6bf63;opacity:0}
body[data-phase='loading'] .choice{visibility:hidden}body[data-phase='loading'] .scene-content>img{opacity:.25}body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes voice{to{height:16px}}@keyframes clue-glow{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}}@keyframes gentle-wiggle{25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}
@media(max-width:680px) and (min-height:501px){.topbar{height:69px;gap:9px;padding:10px 12px}.round-button{height:39px;width:39px}.round-button svg{width:22px;height:22px}.quiet{display:none}.brand h1{font-size:23px;letter-spacing:-.8px}.eyebrow{font-size:7px;letter-spacing:1.1px}.progress{font-size:14px;margin-right:5px}.dots{gap:2px}.dots i{width:3px;height:3px}.play-board{width:calc(100% - 22px);gap:10px}.scene-panel{border-radius:22px;padding:0 7px 7px}.question-row{padding:9px 7px;gap:7px}.case-title{font-size:8px;letter-spacing:1.2px}.question-row h2{font-size:20px;line-height:1.08}.hint-button{padding:7px 8px;gap:0;background:#f4ead2}.hint-button span{display:none}.hint-button svg{width:23px;height:23px}.scene-media{border-radius:14px}.choices{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,minmax(0,1fr));height:clamp(215px,35dvh,322px);gap:8px}.choice{border-radius:18px;padding:3px 5px 5px}.choice .name{font-size:11px;padding-top:0}.answer-heading{font-size:10px;padding-bottom:5px}.bottom-bar{min-height:63px;padding:9px 14px max(10px,env(safe-area-inset-bottom));gap:9px}.spoken{font-size:13px;gap:7px}.next-button{font-size:0;padding:10px;border-radius:14px}.next-button svg{width:24px;height:24px}.complete .next-button{font-size:17px}.voice-dots{gap:2px}.voice-dots i{width:3px}.case-stamp{font-size:12px;padding:6px 10px;right:10px;top:10px}.case-stamp b{font-size:18px}.sound-note{top:66px;right:10px;font-size:10px}.complete h2{font-size:34px}}
@media(max-height:500px){.topbar{height:55px;gap:11px;padding:8px 16px}.round-button{width:36px;height:36px}.round-button svg{width:22px;height:22px}.round-button.quiet{width:31px;height:31px}.brand h1{font-size:25px}.eyebrow{font-size:7px;letter-spacing:1.4px}.progress{font-size:13px}.play-board{grid-template-columns:1.45fr 1fr;grid-template-rows:minmax(0,1fr);width:calc(100% - 30px);gap:12px}.scene-panel{border-radius:19px;padding:0 7px 7px}.question-row{padding:7px 8px;gap:6px}.case-title{font-size:7px;letter-spacing:1.2px}.question-row h2{font-size:19px;margin-top:2px}.hint-button{padding:6px;gap:0;border-radius:11px}.hint-button span{display:none}.hint-button svg{height:22px;width:22px}.answer-panel{display:flex;flex-direction:column}.answer-heading{font-size:9px;padding:0 3px 5px}.choices{flex:1;min-height:0;height:auto;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.choice{padding:3px 5px 4px;border-radius:15px}.choice .name{font-size:10px;padding-top:0}.bottom-bar{min-height:43px;padding:6px 15px;gap:10px}.spoken{font-size:12px}.next-button{font-size:11px;padding:5px 11px;border-radius:12px}.next-button svg{width:19px;height:19px}.scene-media{border-radius:13px}.sound-note{top:53px;font-size:10px}.complete{gap:6px}.detective-badge{width:75px;height:75px}.detective-badge svg{width:52px;height:52px}.complete h2{font-size:31px}.complete .next-button{font-size:14px;padding:9px 20px}.complete-stars{font-size:20px;margin:0}.complete-home{padding:5px}.case-stamp{font-size:11px;padding:5px 9px}}
@media(max-width:360px) and (min-height:501px){.topbar{height:61px;gap:6px;padding:9px 9px}.round-button{width:34px;height:34px}.brand h1{font-size:20px}.brand .eyebrow{font-size:6px;letter-spacing:1px}.progress{font-size:12px;margin-right:3px}.question-row h2{font-size:17px}.case-title{font-size:7px}.choices{height:210px}.bottom-bar{min-height:57px;padding:8px 10px}.spoken{font-size:12px}.play-board{width:calc(100% - 16px);gap:8px}.question-row{padding:7px 6px}.scene-panel{border-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.show-clue .clue-ring{opacity:1}}
@media(max-width:680px) and (min-height:501px){.round-button.quiet{display:grid;width:30px;height:30px;margin-left:-5px}.topbar{gap:7px}.quiet svg{width:19px;height:19px}.brand h1{white-space:nowrap}}
@media(max-width:360px) and (min-height:501px){.round-button.quiet{width:27px;height:27px}.topbar{gap:5px}.brand h1{font-size:19px}}

/* Scene-first layout: the image remains whole, with its question inside the art. */
.topbar{height:64px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));gap:12px}.brand h1{font-size:27px}.brand .eyebrow{font-size:7px}.progress{margin-right:6px;padding-bottom:8px}.progress-track{position:absolute;bottom:0;left:0;width:100%;height:4px;background:#c8d9c8;border-radius:5px;overflow:hidden}.progress-track i{display:block;height:100%;background:#bc974b;transition:width .2s}.play-board{width:calc(100% - 20px);max-width:1600px;gap:10px;grid-template-rows:minmax(0,1fr) auto}.scene-panel{background:none;border:0;border-radius:0;box-shadow:none;padding:0;display:grid;place-items:center;overflow:hidden;min-width:0}.scene-frame{position:relative;max-width:100%;max-height:100%;border-radius:21px;overflow:hidden;box-shadow:0 3px 12px #627d6817}.scene-media{position:absolute;inset:0;width:100%;height:100%;border-radius:0}.question-row{position:absolute;z-index:2;top:6%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;display:flex;flex-direction:column;gap:3px;text-align:center;padding:10px 19px;background:#fffdf4e8;border:1px solid #fff8;border-radius:19px;box-shadow:0 3px 14px #4b613117;pointer-events:none}.case-title{font-size:8px;letter-spacing:1.1px;color:#829179}#question{font-size:clamp(18px,2.5vw,28px);line-height:1.13;font-weight:bold;letter-spacing:-.35px}.scene-tools{position:absolute;right:9px;bottom:9px;display:flex;gap:7px;z-index:3}.hint-button{padding:8px 10px;background:#fff8e9eb;border:1px solid #fff9;box-shadow:0 2px 8px #574b201a;color:#796540;font-size:11px;gap:5px}.hint-button svg{width:20px;height:20px}.scene-tools .hint-button:disabled{opacity:.5}.listen-note{position:absolute;left:12px;bottom:12px;background:#fff8e1da;border-radius:14px;padding:5px 9px;font-size:10px;color:#756546}.case-stamp{top:auto;bottom:58px;right:12px;z-index:3;pointer-events:none}.answer-heading{display:none}.choices{height:clamp(145px,20dvh,195px);gap:10px}.bottom-bar{min-height:48px;padding:7px max(13px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left));gap:10px}.spoken{font-size:14px}.next-button{padding:7px 12px}.sound-note{top:62px}
@media(min-width:900px) and (orientation:landscape){.play-board{grid-template-columns:minmax(0,1fr) clamp(245px,25vw,330px);grid-template-rows:minmax(0,1fr);gap:13px}.answer-panel{display:flex;align-items:center}.choices{width:100%;height:min(100%,580px);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}.choice{padding:4px 5px 7px;border-radius:19px}.choice .name{font-size:12px}}
@media(max-width:680px) and (min-height:501px){.topbar{height:57px;gap:8px;padding:7px 9px}.brand h1{font-size:22px}.brand .eyebrow{font-size:6px}.round-button{width:38px;height:38px}.round-button.quiet{display:grid;width:30px;height:30px;margin-left:0}.progress{font-size:12px;margin-right:0;gap:3px}.play-board{width:calc(100% - 12px);gap:8px}.scene-frame{border-radius:16px}.question-row{top:5%;padding:7px 11px;border-radius:15px;gap:2px;max-width:94%}.case-title{font-size:7px;letter-spacing:.6px}#question{font-size:clamp(17px,4.7vw,22px)}.choices{height:clamp(210px,32dvh,300px);grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}.choice{padding:3px 4px 4px;border-radius:16px}.scene-tools{bottom:7px;right:7px;gap:5px}.hint-button{padding:8px}.hint-button span{display:none}.hint-button svg{width:21px;height:21px}.listen-note{font-size:8px;bottom:10px;left:9px;padding:4px 7px}.spoken{font-size:12px}.bottom-bar{min-height:48px;padding:7px 10px max(7px,env(safe-area-inset-bottom))}.next-button{padding:7px;font-size:0}.sound-note{top:55px}.case-stamp{bottom:53px;top:auto}}
@media(max-width:359px) and (min-height:501px){.brand .eyebrow{display:none}.brand h1{font-size:18px}.topbar{gap:6px}.round-button.quiet{width:28px;height:28px}.progress{font-size:11px}.choices{height:210px}}
@media(max-height:500px){.topbar{height:47px;padding:5px 12px}.brand h1{font-size:22px}.brand .eyebrow{display:none}.play-board{width:calc(100% - 16px);grid-template-columns:minmax(0,1fr) 29%;grid-template-rows:minmax(0,1fr);gap:9px}.answer-panel{display:flex;align-items:stretch}.choices{width:100%;height:100%;flex:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}.question-row{top:5%;padding:6px 12px;gap:2px}.case-title{font-size:7px}#question{font-size:19px}.scene-frame{border-radius:15px}.bottom-bar{min-height:38px;padding:4px 12px}.spoken{font-size:12px}.scene-tools{right:7px;bottom:7px}.hint-button{padding:6px}.hint-button span{display:none}.listen-note{font-size:8px;bottom:8px}.sound-note{top:46px}.case-stamp{bottom:45px;top:auto}}

/* Keep the remaining seconds readable when narrow layouts hide the button text. */
.next-countdown{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:#fff8dd;color:#63502e;font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;box-shadow:0 1px 3px #795e2722}
/* The level belongs to the case, independently of solved progress. */
.case-heading{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;row-gap:2px}.case-difficulty{display:inline-flex;align-items:center;gap:0;line-height:1;letter-spacing:2px;font-family:Arial,sans-serif;font-size:16px;font-weight:700;white-space:nowrap;flex:none}.case-difficulty .filled{color:#ad741c}.case-difficulty .empty{color:#927c58}
@media(max-width:680px) and (min-height:501px){.case-heading{gap:6px}.case-difficulty{font-size:14px;letter-spacing:1px}}
@media(max-height:500px){.case-difficulty{font-size:14px;letter-spacing:1px}.case-heading{gap:7px}}

/* Inspect the picture in place; the answer cards and question never move with it. */
.scene-media{touch-action:none}.scene-media.zoomed{cursor:grab}.scene-media.zoomed:active{cursor:grabbing}.scene-content{position:absolute;inset:0;display:block;transform-origin:0 0;pointer-events:none}.scene-content>img{width:100%;height:100%;object-fit:contain}.zoom-controls{display:flex;align-items:center;background:#fff8e9ef;border:1px solid #fff9;border-radius:14px;box-shadow:0 2px 8px #574b201a;overflow:hidden}.zoom-controls button{width:38px;height:38px;padding:0;background:transparent;color:#796540;font-size:25px;line-height:1;font-weight:bold;flex:none}.zoom-controls #zoom-reset{width:39px;font-size:12px;font-variant-numeric:tabular-nums}.zoom-controls button:disabled{opacity:.4}.zoom-controls button:active:not(:disabled){background:#edd69c}.zoom-controls button:focus-visible{outline-offset:-4px}.scene-tools{align-items:center}.scene-media .listen-note{pointer-events:none}
@media(max-width:680px) and (min-height:501px){.zoom-controls button{width:34px;height:38px}.zoom-controls #zoom-reset{width:35px}.scene-tools .hint-button{padding:8px}.scene-media .listen-note{left:7px;padding:4px 6px}}
@media(max-height:500px){.zoom-controls button{width:34px;height:34px}.zoom-controls #zoom-reset{width:35px}}

/* Keep the complete winding route visible below this scene’s question. */
body[data-case="kite_string"] .question-row{top:1%}
@media(max-width:680px) and (min-height:501px){body[data-case="kite_string"] .question-row{top:0;max-width:80%;padding:5px 9px}body[data-case="kite_string"] #question{font-size:clamp(16px,4.2vw,22px)}}