:root{--ink:#203044;--paper:#fffdf7;--cream:#fff4cd;--yellow:#ffcf47;--orange:#f17847;--orange2:#c9512d;--teal:#078e8a;--blue:#4169c7;--green:#3b9a68;--red:#c84e4c;--purple:#7856b7;--muted:#627083;--line:#dfd2b5;--shadow:0 24px 70px rgba(68,50,20,.17);font-family:ui-rounded,"Nunito","Avenir Next",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 10% 10%,#ffd66b 0,transparent 25rem),radial-gradient(circle at 90% 30%,#8fe3d7 0,transparent 29rem),linear-gradient(145deg,#fff5ce,#f7ead5 58%,#dff2e9);background-attachment:fixed}
button,a{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.screen:not([hidden]){animation:screenIn .35s ease both}

.sky-confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;opacity:.45}
.sky-confetti i{position:absolute;width:18px;height:18px;border:4px solid var(--orange);border-radius:5px;transform:rotate(20deg)}
.sky-confetti i:nth-child(1){left:4%;top:20%}
.sky-confetti i:nth-child(2){left:94%;top:12%;border-radius:50%;border-color:var(--teal)}
.sky-confetti i:nth-child(3){left:7%;top:83%;border-color:var(--blue)}
.sky-confetti i:nth-child(4){left:89%;top:77%;border-color:var(--yellow)}
.sky-confetti i:nth-child(5){left:52%;top:4%;width:10px;height:30px;border-color:var(--green)}

.game-shell{position:relative;width:min(1180px,calc(100% - 28px));margin:0 auto;padding:18px 0 34px}
.brand-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.brand-home{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--ink);padding:4px;text-align:left}
.brand-home small,.brand-home strong{display:block}
.brand-home small{font-size:.62rem;letter-spacing:.15em;font-weight:1000;color:var(--orange2)}
.brand-home strong{font-size:1.05rem;letter-spacing:.025em}
.brand-logo{display:block;width:92px;height:58px;border-radius:12px;object-fit:contain;mix-blend-mode:multiply}
.header-tools{display:flex;align-items:center;gap:10px}
.case-progress,.round-tool{border:2px solid rgba(31,48,68,.14);background:rgba(255,255,255,.78);box-shadow:0 7px 18px rgba(45,45,30,.09)}
.case-progress{padding:9px 15px;border-radius:999px;font-weight:1000}
.round-tool{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:1.15rem}

.hero-screen,.map-screen,.mission-screen,.result-screen{border:2px solid rgba(98,78,39,.12);border-radius:30px;background:rgba(255,253,247,.96);box-shadow:var(--shadow);overflow:hidden}
.hero-screen{min-height:640px;display:grid;grid-template-columns:1.06fr .94fr}
.hero-copy{padding:clamp(36px,7vw,84px);display:flex;flex-direction:column;justify-content:center}
.kicker{margin:0;color:var(--orange2);font-size:.72rem;font-weight:1000;letter-spacing:.15em}
.hero-copy h1,.map-heading h1,.result-screen h1{margin:13px 0 22px;line-height:.94;letter-spacing:-.06em}
.hero-copy h1{font-size:clamp(3.1rem,7vw,6.1rem)}
.hero-copy h1 em{font-style:normal;color:var(--teal)}
.hero-lead{max-width:660px;margin:0 0 30px;color:var(--muted);font-size:clamp(1.03rem,1.8vw,1.24rem);line-height:1.58}
.button{border:0;border-radius:16px;padding:16px 22px;min-height:56px;font-weight:1000;font-size:1rem;transition:transform .15s,box-shadow .15s}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(5px);box-shadow:none}
.primary{align-self:flex-start;color:#fff;background:var(--orange);box-shadow:0 9px 0 #b9512d}
.secondary{color:var(--ink);background:#eee4cf;box-shadow:0 7px 0 #cbbd9e}
.age-note{margin:25px 0 0;color:var(--muted);font-size:.82rem}
.age-note span{display:inline-block;margin-right:7px;padding:5px 9px;border-radius:8px;background:#e3f1ed;color:#236b5c;font-weight:1000}
.hero-art{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#11ada4,#087d7d 60%,#075b66)}
.hero-art:before,.hero-art:after{content:"";position:absolute;z-index:-1;border:4px dashed rgba(255,255,255,.26);border-radius:50%;animation:orbit 22s linear infinite}
.hero-art:before{width:560px;height:560px;left:0;top:4%}
.hero-art:after{width:360px;height:360px;right:-12%;bottom:-8%;animation-direction:reverse}
.hero-art video{position:absolute;right:-11%;bottom:-3%;width:105%;height:98%;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 25px 19px rgba(0,38,40,.28));animation:float 3s ease-in-out infinite}
.speech{position:absolute;z-index:4;left:7%;top:12%;padding:17px 20px;border-radius:25px 25px 25px 5px;background:#fff;box-shadow:7px 9px 0 rgba(0,67,70,.28);font-weight:850;transform:rotate(-3deg)}
.speech strong{font-size:1.4rem;color:var(--orange2)}
.case-stamp{position:absolute;z-index:3;right:8%;top:7%;padding:10px 15px;border:4px double #754b00;border-radius:9px;background:var(--yellow);color:#6c4200;text-align:center;font-weight:1000;line-height:.95;transform:rotate(8deg)}
.magnifier{position:absolute;left:7%;bottom:12%;color:rgba(255,255,255,.8);font-size:7rem;transform:rotate(-18deg)}
.footprints{position:absolute;right:8%;bottom:5%;color:rgba(255,255,255,.35);font-size:1.5rem;transform:rotate(-18deg)}

.map-screen{padding:clamp(24px,5vw,52px);background:linear-gradient(155deg,#fffdf7,#fff2c7)}
.map-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}
.map-heading h1{font-size:clamp(2.2rem,5vw,4.1rem);margin-bottom:8px}
.map-heading p:last-child{margin:0;color:var(--muted)}
.text-button,.back-button{border:0;background:transparent;color:var(--teal);font-weight:900;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.case-map{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case-map:before{content:"";position:absolute;z-index:0;left:10%;right:10%;top:50%;border-top:4px dashed rgba(69,92,88,.18)}
.case-card{position:relative;z-index:1;min-height:235px;padding:20px;border:3px solid #fff;border-radius:24px;background:linear-gradient(155deg,#fff 58%,#fff3d0);box-shadow:0 15px 28px rgba(78,64,32,.13);text-align:left;overflow:hidden;transition:transform .18s,box-shadow .18s}
.case-card:before{content:"";position:absolute;right:-30px;bottom:-38px;width:120px;height:120px;border:13px dotted var(--case-color);border-radius:50%;opacity:.22}
.case-card:not(:disabled):hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 21px 34px rgba(78,64,32,.19)}
.case-card .case-icon{display:grid;place-items:center;width:72px;height:72px;margin-bottom:17px;border-radius:22px;background:var(--case-color,#e8b449);font-size:2.4rem;box-shadow:inset 0 -7px rgba(0,0,0,.08)}
.case-card small,.case-card strong,.case-card span{display:block}
.case-card small{font-weight:1000;color:var(--orange2);letter-spacing:.1em}
.case-card strong{margin:5px 0 8px;font-size:1.28rem;line-height:1.08}
.case-card span{color:var(--muted);font-size:.86rem;line-height:1.35}
.case-card .case-status{position:absolute;right:15px;top:15px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#edf1ec;color:var(--muted);font-weight:1000}
.case-card.done{border-color:#73bd91}
.case-card.done .case-status{color:#fff;background:var(--green)}
.case-card.locked{filter:saturate(.45);opacity:.66}
.case-card:disabled{cursor:default}
.legend{display:flex;gap:20px;justify-content:center;margin-top:27px;color:var(--muted);font-size:.78rem}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--yellow)}
.dot.done{background:var(--green)}
.dot.locked{background:#aeb5b5}

.mission-screen{position:relative;min-height:720px;padding:24px;background:linear-gradient(#fffdf7,#fff6da)}
.mission-top{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:16px;margin-bottom:20px}
.back-button{text-align:left;text-decoration:none}
.mission-meta{text-align:center}
.mission-meta span,.mission-meta strong{display:block}
.mission-meta span{font-size:.68rem;font-weight:1000;letter-spacing:.14em;color:var(--orange2)}
.mission-meta strong{font-size:1.4rem}
.mission-steps{display:flex;gap:6px}
.mission-steps i{display:block;width:11px;height:11px;border-radius:50%;background:#d9d4c6}
.mission-steps i.on{background:var(--orange);box-shadow:0 0 0 4px rgba(241,120,71,.17)}
.mission-stage{min-height:610px;border-radius:24px;overflow:hidden;border:5px solid #fff;background:#def0ea;box-shadow:inset 0 0 0 2px rgba(22,74,67,.08),0 17px 28px rgba(56,67,52,.13)}
.stage-heading{position:absolute;z-index:20;left:18px;top:16px;width:min(520px,calc(100% - 260px));padding:9px 16px 10px 42px;border:3px solid #fff;border-radius:15px;background:linear-gradient(105deg,#ffe47a,#ffd35f);box-shadow:0 6px 0 #d5a82c,0 11px 20px rgba(31,48,68,.13);text-align:left}
.stage-heading:before{content:"✦";position:absolute;left:13px;top:50%;transform:translateY(-50%) rotate(-12deg);font-size:1.35rem;color:#c3552f}
.stage-heading h2{margin:1px 0 2px;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.05}
.stage-heading p{margin:0;color:#654818;font-size:.78rem;font-weight:850}
.stage-heading .kicker{color:#8c421f}
.guide{position:absolute;z-index:30;right:6px;top:86px;width:215px;height:230px;pointer-events:none}
.guide video,.guide img{position:absolute;right:-26px;bottom:-18px;width:190px;height:235px;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(25,47,45,.25))}
.guide.is-brawo video{right:-18px;bottom:-18px;width:180px;height:320px}
.guide-words{position:absolute;z-index:2;left:-52px;top:8px;width:150px;padding:11px 13px;border:3px solid var(--ink);border-radius:18px 18px 4px 18px;background:#fff;font-weight:900;font-size:.82rem;line-height:1.2;transform:rotate(-2deg);box-shadow:5px 6px 0 var(--yellow)}
.guide.react{animation:guidePop .48s cubic-bezier(.2,.9,.2,1.25)}

/* level 1 */
.room-scene{position:relative;height:610px;background:linear-gradient(rgba(255,255,255,.04),rgba(23,47,62,.06)),url("assets/room-modern.webp") center/cover no-repeat}
.room-scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 48%,rgba(19,45,52,.08))}
.room-window{position:absolute;right:7%;top:12%;width:22%;height:27%;border:8px solid #fff;background:linear-gradient(145deg,#79c4d7,#e6f5d4);box-shadow:0 8px 15px rgba(34,61,61,.15)}
.room-sofa{position:absolute;left:28%;top:41%;z-index:2;width:42%;height:27%;border-radius:50px 50px 17px 17px;background:#e17854;box-shadow:inset 0 -18px rgba(127,48,31,.13),0 15px 20px rgba(52,49,35,.15)}
.room-sofa:before,.room-sofa:after{content:"";position:absolute;bottom:-13%;width:11%;height:18%;background:#6b4636}
.room-sofa:before{left:12%}
.room-sofa:after{right:12%}
.room-tv{position:absolute;left:4%;top:27%;width:18%;height:24%;border:9px solid #29313b;border-radius:8px;background:linear-gradient(145deg,#334a73,#7991b8)}
.room-door{position:absolute;right:1.5%;top:27%;width:15%;height:43%;border:7px solid #6c4934;background:#987051}
.room-door:after{content:"";position:absolute;right:11px;top:50%;width:11px;height:11px;border-radius:50%;background:#ffcf47}
.room-path{position:absolute;right:1%;bottom:2%;width:34%;height:25%;border-radius:50%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 15px,rgba(255,255,255,.14) 15px 30px);transform:perspective(180px) rotateX(52deg)}
.room-bed{position:absolute;left:72%;bottom:8%;width:18%;height:12%;border:4px solid #30755b;border-radius:50%;background:#8ccda9}
.room-toy{position:absolute;left:20%;bottom:9%;font-size:3rem;transform:rotate(-18deg)}
.clue-hotspot{position:absolute;z-index:10;display:grid;place-items:center;width:50px;height:50px;border:4px solid #fff;border-radius:50%;background:var(--yellow);color:#704500;font-size:1.25rem;font-weight:1000;box-shadow:0 8px 17px rgba(43,45,35,.25);animation:pulse 1.8s ease-out infinite}
.clue-hotspot.found{background:var(--green);color:#fff;animation:none}
.clue-hotspot:nth-of-type(1){left:8%;top:43%}
.clue-hotspot:nth-of-type(2){right:27%;top:29%}
.clue-hotspot:nth-of-type(3){left:69%;top:54%}
.clue-hotspot:nth-of-type(4){right:7%;top:48%}
.clue-tray{position:absolute;z-index:14;left:18px;bottom:17px;display:flex;gap:8px;padding:10px;border-radius:15px;background:rgba(255,255,255,.93);box-shadow:0 8px 18px rgba(34,55,49,.14)}
.clue-chip{padding:7px 10px;border-radius:10px;background:#ece7db;color:#7a7f83;font-size:.76rem;font-weight:900}
.clue-chip.found{background:#dff0e4;color:#26704d}
.choice-panel{position:absolute;z-index:25;left:50%;bottom:22px;width:min(760px,calc(100% - 36px));transform:translateX(-50%);padding:18px;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 18px 38px rgba(31,48,68,.22);text-align:center;animation:panelIn .35s ease}
.choice-panel h3{margin:0 0 13px;font-size:1.15rem}
.choices{display:flex;gap:10px;justify-content:center}
.choice{flex:1;min-height:78px;border:3px solid #e4dccb;border-radius:17px;padding:10px 14px;background:linear-gradient(#fff,#f8f4e9);color:var(--ink);font-weight:1000;box-shadow:0 6px 0 #d9d0bd}
.choice b{display:block;margin-bottom:3px;font-size:1.65rem}
.choice:hover{border-color:var(--yellow);transform:translateY(-2px)}
.choice.wrong{animation:shake .35s;border-color:var(--yellow)}
.choice.correct{border-color:var(--green);background:#e5f4e9}

/* level 2 */
.timeline-scene{position:relative;min-height:610px;padding:108px 25px 28px;background:linear-gradient(rgba(230,247,255,.74),rgba(255,247,220,.84)),url("assets/hall-modern.webp") center/cover no-repeat}
.evidence-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-width:850px;margin:0 auto 24px}
.evidence-card{position:relative;min-height:185px;border:3px solid #fff;border-radius:20px;background:#fff;box-shadow:0 12px 24px rgba(48,60,67,.13);overflow:hidden;text-align:left}
.evidence-card .mini-scene{height:145px;position:relative;background:#dcefe9}
.evidence-card .mini-scene img{display:block;width:100%;height:100%;object-fit:cover}
.evidence-card .mini-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(37,58,61,.07));pointer-events:none}
.evidence-card .dog-dot{position:absolute;z-index:2;left:35%;bottom:6%;width:42%;height:72%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(28,49,43,.25));transition:transform .4s}
.evidence-card:nth-child(2) .dog-dot{transform:translateX(35px)}
.evidence-card:nth-child(3) .dog-dot{transform:translateX(70px)}
.evidence-card strong{display:block;padding:10px 13px;font-size:1rem;line-height:1.15}
.evidence-card:nth-child(1){transform:rotate(-1.2deg)}
.evidence-card:nth-child(2){transform:rotate(1deg)}
.evidence-card:nth-child(3){transform:rotate(-.6deg)}
.evidence-card.seen{border-color:var(--green)}
.evidence-card.seen:after{content:"✓";position:absolute;right:8px;top:8px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--green);color:#fff;font-weight:1000}
.sequence-board{max-width:860px;margin:0 auto;padding:18px;border-radius:21px;background:rgba(255,255,255,.92);box-shadow:0 13px 25px rgba(44,54,52,.14);text-align:center}
.sequence-board h3{margin:0 0 4px}
.sequence-board p{margin:0 0 13px;color:var(--muted);font-size:.88rem}
.sequence-options,.sequence-slots{display:flex;justify-content:center;gap:9px}
.sequence-card{border:3px solid #fff;border-radius:16px;padding:14px 17px;background:linear-gradient(145deg,#dff3ef,#cce8e1);color:var(--ink);font-weight:1000;box-shadow:0 6px 0 #89b9ae;font-size:1rem}
.sequence-card:disabled{opacity:.35}
.sequence-slots{margin-top:13px}
.sequence-slot{display:grid;place-items:center;width:31%;min-height:48px;border:3px dashed #cfc7b8;border-radius:13px;color:#92989a;font-weight:900}
.sequence-slot.filled{border-style:solid;border-color:var(--teal);background:#e2f1ef;color:#216d68}
.check-sequence{margin-top:15px}
.feedback-line{min-height:24px;margin:12px 0 0;font-weight:850;color:var(--orange2)}

/* level 3 */
.walk-scene{position:relative;height:610px;background:linear-gradient(rgba(255,255,255,.04),rgba(25,61,53,.08)),url("assets/park-modern.webp") center/cover no-repeat}
.cloud{position:absolute;width:100px;height:35px;border-radius:999px;background:#fff;opacity:.8}
.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:#fff}
.cloud:before{width:45px;height:45px;left:18px;bottom:0}
.cloud:after{width:56px;height:56px;right:12px;bottom:0}
.cloud.a{left:6%;top:14%}
.cloud.b{right:19%;top:10%;transform:scale(.7)}
.tree{position:absolute;top:25%;width:25px;height:190px;background:#7a5337}
.tree:before{content:"";position:absolute;left:-55px;top:-55px;width:140px;height:130px;border-radius:50%;background:#367e50;box-shadow:38px 16px 0 #439560}
.tree.a{left:9%}
.tree.b{right:8%;transform:scale(.8)}
.path{position:absolute;left:21%;right:18%;bottom:-5%;height:40%;background:#eee5cf;clip-path:polygon(38% 0,58% 0,100% 100%,0 100%)}
.walker,.other-dog,.adult,.ball-child,.ball-adult,.ball-dog{position:absolute;z-index:4;object-fit:contain;filter:drop-shadow(0 12px 9px rgba(24,54,50,.28))}
.walker{left:40%;bottom:23%;width:154px;height:285px;transition:left .7s,bottom .7s,transform .7s}
.other-dog{right:23%;bottom:27%;width:150px;height:132px}
.adult{left:25%;bottom:23%;width:164px;height:320px}
.distance-ring{position:absolute;z-index:3;right:22%;bottom:15%;width:190px;height:100px;border:5px dashed rgba(200,78,76,.64);border-radius:50%;transform:perspective(180px) rotateX(57deg)}
.walk-dialog{position:absolute;z-index:12;left:18px;bottom:16px;width:min(760px,calc(100% - 220px));padding:11px 13px 13px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 12px 25px rgba(38,56,48,.19);text-align:center}
.walk-dialog h3{margin:0 0 2px;font-size:1.05rem}
.walk-dialog p{margin:0 0 8px;color:var(--muted);font-size:.82rem}
.walk-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.walk-choice{min-height:52px;border:3px solid #e2dac9;border-radius:13px;padding:8px 10px;background:linear-gradient(#fff,#f6f1e6);color:var(--ink);font-weight:1000;box-shadow:0 4px 0 #d4cab6;font-size:.88rem;line-height:1.15}
.walk-choice:hover{border-color:var(--yellow)}
.walk-choice.wrong{animation:shake .35s;border-color:var(--yellow)}
.walk-choice.correct{border-color:var(--green);background:#e3f2e8}
.stage-next{min-width:180px;margin:2px auto 0;padding:13px 22px;font-size:1rem;animation:panelIn .28s ease}

/* level 4 */
.ball-scene{position:relative;height:610px;background:linear-gradient(rgba(255,255,255,.03),rgba(31,61,49,.08)),url("assets/bench-modern.webp") center/cover no-repeat}
.ball-child{left:27%;bottom:23%;width:154px;height:285px}
.ball-adult{left:9%;bottom:20%;width:195px;height:375px}
.ball-dog{right:28%;bottom:18%;width:160px;height:144px;transform-origin:50% 100%;animation:ballDogIdle 3.2s ease-in-out infinite}
.ball-child{animation:sceneBreath 4.3s ease-in-out infinite .35s}
.ball-adult{animation:sceneBreath 5s ease-in-out infinite}
.ball-dialog{border:3px solid rgba(255,255,255,.95)}

/* level 5 */
.guest-scene{position:relative;height:610px;background:linear-gradient(rgba(255,255,255,.02),rgba(37,45,44,.06)),url("assets/door-modern.webp") center/cover no-repeat}
.guest-adult,.guest-child,.guest-dog{position:absolute;z-index:4;object-fit:contain;filter:drop-shadow(0 12px 9px rgba(24,54,50,.27));transition:all .65s ease}
.guest-adult{left:35%;bottom:22%;width:240px;height:410px}
.guest-child{left:52%;bottom:22%;width:166px;height:305px}
.guest-dog{left:21%;bottom:24%;width:195px;height:170px}
.guest-calm .guest-dog{left:76%;bottom:29%}
.doorbell{position:absolute;z-index:8;left:18%;top:39%;padding:12px 15px;border:4px solid #fff;border-radius:50%;background:var(--yellow);color:#704500;font-size:.78rem;font-weight:1000;line-height:1;text-align:center;box-shadow:0 8px 18px rgba(39,53,48,.22);transform:rotate(-8deg);animation:pulse 1.4s ease-out infinite}
.guest-calm .doorbell{display:none}
.guest-dialog{border:3px solid rgba(255,255,255,.95)}

/* level 6 */
.final-scene{position:relative;height:610px;background:linear-gradient(180deg,rgba(25,35,54,.08),rgba(20,28,45,.28)),var(--final-bg) center/cover no-repeat}
.final-scene:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(24,31,52,.34)}
.final-locks{position:absolute;z-index:15;left:50%;top:118px;display:flex;gap:14px;transform:translateX(-50%)}
.final-lock{display:grid;place-items:center;width:58px;height:58px;border:4px solid #fff;border-radius:18px;background:#394a67;font-size:1.65rem;box-shadow:0 8px 18px rgba(24,31,52,.28);transition:transform .3s,background .3s}
.final-lock.current{background:var(--yellow);transform:translateY(-5px) rotate(-3deg)}
.final-lock.open{background:var(--green);transform:rotate(3deg)}
.final-panel{position:absolute;z-index:16;left:50%;bottom:20px;width:min(790px,calc(100% - 40px));transform:translateX(-50%);padding:15px 18px;border:4px solid rgba(255,255,255,.95);border-radius:23px;background:rgba(255,255,255,.96);box-shadow:0 18px 38px rgba(24,31,52,.3);text-align:center}
.final-kicker{margin:0 0 2px!important;color:var(--orange2)!important;font-size:.72rem!important;font-weight:1000;letter-spacing:.12em}
.final-panel h3{margin:0 0 3px;font-size:1.35rem}
.final-panel>p:not(.feedback-line):not(.final-kicker){margin:0 0 11px;color:var(--muted);font-weight:850}
.final-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.final-choice{min-height:58px;padding:9px 12px;border:3px solid #ded6c6;border-radius:15px;background:linear-gradient(#fff,#f7f1e5);color:var(--ink);font-weight:1000;box-shadow:0 5px 0 #d2c8b4;line-height:1.16}
.final-choice:hover{border-color:var(--yellow);transform:translateY(-2px)}
.final-choice.wrong{animation:shake .35s;border-color:var(--yellow)}
.final-choice.correct{border-color:var(--green);background:#e3f2e8}

.result-screen{min-height:620px;padding:clamp(40px,7vw,78px);text-align:center;background:linear-gradient(150deg,#fffdf7,#fff0b9 55%,#daf0e8)}
.result-stars{font-size:2rem;color:var(--orange);animation:float 2.8s ease-in-out infinite}
.earned-tool{display:grid;place-items:center;width:105px;height:105px;margin:8px auto 20px;border-radius:31px;background:var(--teal);color:#fff;font-size:3.1rem;box-shadow:0 11px 0 #086c68;transform:rotate(-4deg)}
.result-screen h1{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:15px}
.result-lead{max-width:780px;margin:0 auto 24px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.55}
.result-rule{max-width:760px;margin:0 auto 30px;padding:17px;border:3px solid #fff;border-radius:18px;background:rgba(255,255,255,.72);font-weight:1000;font-size:1.1rem}
.result-actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}
.result-actions .button{align-self:auto}
footer{display:flex;justify-content:space-between;gap:24px;padding:18px 8px 0;color:#626a71;font-size:.75rem;line-height:1.45}
footer p{max-width:760px;margin:0}
footer a{color:var(--teal);font-weight:900;text-decoration:none}
.footer-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.footer-brand img{width:98px;height:54px;border-radius:10px;object-fit:contain;mix-blend-mode:multiply}

@keyframes screenIn{from{opacity:0;transform:translateY(8px) scale(.99)}
to{opacity:1;transform:none}
}
@keyframes orbit{to{transform:rotate(360deg)}
}
@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-9px)}
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,207,71,.72),0 8px 17px rgba(43,45,35,.25)}
75%,100%{box-shadow:0 0 0 18px rgba(255,207,71,0),0 8px 17px rgba(43,45,35,.25)}
}
@keyframes guidePop{0%{transform:scale(.84) rotate(-4deg)}
70%{transform:scale(1.05) rotate(2deg)}
100%{transform:none}
}
@keyframes panelIn{from{opacity:0;transform:translate(-50%,20px) scale(.95)}
to{opacity:1;transform:translate(-50%,0) scale(1)}
}
@keyframes shake{0%,100%{transform:translateX(0)}
25%{transform:translateX(-7px)}
75%{transform:translateX(7px)}
}
@keyframes sceneBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ballDogIdle{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-2px) rotate(1.2deg)}65%{transform:translateY(-1px) rotate(-.6deg)}}

button:focus-visible,a:focus-visible{outline:4px solid #19345c;outline-offset:4px}

@media(max-width:820px){.game-shell{width:min(100% - 14px,1180px);padding-top:9px}
.brand-logo{width:74px;height:48px}
.brand-home strong{font-size:.88rem}
.brand-home small{font-size:.52rem}
.hero-screen{grid-template-columns:1fr}
.hero-copy{padding:38px 24px}
.hero-copy h1{font-size:clamp(3rem,14vw,5rem)}
.hero-art{min-height:330px}
.hero-art video{width:93%;height:105%}
.case-map{grid-template-columns:1fr 1fr}
.case-map:before{display:none}
.case-card{min-height:205px}
.map-heading{align-items:flex-start;flex-direction:column}
.mission-screen{padding:10px;min-height:730px}
.mission-top{grid-template-columns:auto 1fr auto}
.mission-meta strong{font-size:1rem}
.mission-meta span{font-size:.55rem}
.stage-heading{left:10px;top:10px;width:calc(100% - 150px);padding:8px 10px 9px 35px}
.guide{right:-15px;top:77px;width:155px;height:170px}
.guide video,.guide img{width:130px;height:170px}
.guide.is-brawo video{right:-12px;bottom:-16px;width:138px;height:245px}
.guide-words{left:-47px;width:105px;font-size:.66rem;padding:7px}
.mission-stage{min-height:650px}
.room-scene,.walk-scene,.ball-scene,.guest-scene,.final-scene{height:650px}
.room-sofa{left:21%;width:52%}
.room-tv{width:23%}
.room-door{width:20%}
.room-bed{left:66%;width:25%}
.clue-hotspot:nth-of-type(2){right:24%;top:31%}
.clue-hotspot:nth-of-type(3){left:66%;top:56%}
.clue-hotspot:nth-of-type(4){right:5%;top:50%}
.clue-tray{left:8px;right:8px;bottom:9px;overflow:auto}
.clue-chip{white-space:nowrap}
.choice-panel{bottom:78px}
.choices{flex-direction:column}
.timeline-scene{padding:105px 10px 18px}
.evidence-row{gap:7px}
.evidence-card{min-height:155px}
.evidence-card .mini-scene{height:95px}
.evidence-card strong{font-size:.75rem;padding:8px}
.sequence-options{flex-direction:column}
.sequence-slots{gap:5px}
.sequence-slot{font-size:.68rem}
.walk-dialog{left:10px;bottom:10px;width:calc(100% - 20px);padding:10px}
.walk-choices{grid-template-columns:1fr}
.walker{left:39%;bottom:34%;width:96px;height:178px}
.adult{left:24%;bottom:34%;width:100px;height:195px}
.other-dog{right:18%}
.distance-ring{right:9%}
.ball-child{left:27%;bottom:34%;width:96px;height:178px}
.ball-adult{left:5%;bottom:32%;width:116px;height:225px}
.ball-dog{right:26%;bottom:27%;width:112px;height:102px}
.guest-adult{left:29%;bottom:34%;width:136px;height:240px}
.guest-child{left:51%;bottom:34%;width:96px;height:178px}
.guest-dog{left:7%;bottom:34%;width:136px;height:120px}
.guest-calm .guest-dog{left:70%;bottom:35%}
.doorbell{left:8%;top:38%}
.final-locks{top:100px}
.final-panel{bottom:10px;width:calc(100% - 20px);padding:12px}
.legend{flex-wrap:wrap}
footer{flex-direction:column}
}

@media(max-width:520px){.case-map{grid-template-columns:1fr}
.case-card{min-height:170px}
.case-card .case-icon{width:58px;height:58px;font-size:2rem}
.header-tools .case-progress{display:none}
.mission-steps{display:none}
.mission-top{grid-template-columns:auto 1fr}
.mission-meta{text-align:right}
.evidence-row{grid-template-columns:1fr}
.evidence-card{display:grid;grid-template-columns:42% 58%;min-height:90px}
.evidence-card .mini-scene{height:90px}
.timeline-scene{overflow:auto}
.sequence-options{margin-top:5px}
.sequence-card{padding:10px}
.choice-panel{bottom:82px}
.hero-art video{right:-18%;width:112%}
.result-actions .button{width:100%}
.final-choices{grid-template-columns:1fr}
.final-choice{min-height:46px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
}