:root{--ink:#18333a;--paper:#f7f0da;--blue:#1687a7;--blue2:#77d4d1;--green:#5f9e57;--orange:#e67d3f;--red:#ba4b42;--line:#284e55;--shadow:#173b3f33}*{box-sizing:border-box}html{background:#d7e7dc}body{margin:0;color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;background:repeating-linear-gradient(0deg,#dce9df 0,#dce9df 28px,#d5e4da 29px);min-height:100vh}.shell{width:min(100%,980px);margin:auto;min-height:100vh;background:var(--paper);border-inline:4px solid var(--line);box-shadow:0 0 30px #153d3a33}.mast{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:4px solid var(--line);background:#fff8e4}.mast h1{margin:2px 0 0;font:900 clamp(24px,4vw,38px)/1 "Yu Gothic";letter-spacing:.04em}.mast h1 small{font-size:.48em;font-weight:700}.route-mark,.eyebrow{font:800 12px/1.2 monospace;letter-spacing:.14em;color:#3a6c6c}.sound{min-height:44px;padding:8px 14px;border:2px solid var(--line);background:#f4c95d;color:var(--ink);font-weight:800;box-shadow:3px 3px 0 var(--line);cursor:pointer}.screen{display:none}.screen.active{display:block}.intro{position:relative;min-height:650px;overflow:hidden}.town-window{height:370px;position:relative;background:#a6dadd;border-bottom:7px solid var(--line);overflow:hidden}.sun{position:absolute;width:85px;height:85px;border:5px solid var(--line);border-radius:50%;background:#f5c95b;right:12%;top:38px}.mountain{position:absolute;width:580px;height:250px;left:-80px;bottom:-130px;background:#6f9d69;border:6px solid var(--line);transform:rotate(10deg);border-radius:50%}.reservoir{position:absolute;left:0;right:0;bottom:0;height:72px;background:repeating-linear-gradient(0deg,#64b7c2 0 10px,#89d6d6 11px 17px);border-top:5px solid var(--line)}.house{position:absolute;width:88px;height:82px;background:#f7dd9b;border:5px solid var(--line);bottom:68px}.house:before{content:"";position:absolute;left:-12px;top:-42px;border-left:51px solid transparent;border-right:51px solid transparent;border-bottom:43px solid #bf5c49}.house:after{content:"";position:absolute;width:20px;height:34px;background:#4e756d;left:30px;bottom:0}.h1{left:50%}.h2{left:66%;transform:scale(.82)}.h3{left:80%;transform:scale(.68)}.pipe{position:absolute;height:13px;background:#f0b94c;border:4px solid var(--line);bottom:92px;z-index:2}.p1{left:20%;width:34%}.p2{left:58%;width:28%;bottom:82px}.truck{position:absolute;z-index:3;left:34%;bottom:73px;color:#e66e42;font-size:55px;filter:drop-shadow(3px 4px 0 var(--line))}.intro-copy{position:relative;margin:-36px 5% 30px;padding:24px 28px 28px;background:#fff8e5;border:4px solid var(--line);box-shadow:8px 8px 0 var(--shadow)}.intro-copy h2{font-size:clamp(26px,5vw,45px);margin:8px 0}.intro-copy p{font-size:17px;line-height:1.8}.control-strip{display:flex;gap:18px;flex-wrap:wrap;border-block:2px dashed #6c827f;padding:10px 0;margin-bottom:18px}.start{min-height:50px;padding:12px 24px;border:3px solid var(--line);background:#f2bd46;color:var(--ink);font-size:17px;font-weight:900;box-shadow:5px 5px 0 var(--line);cursor:pointer}.start:active,.sound:active,.lever:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}.play{padding:14px}.stage-ribbon{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 16px;background:var(--ink);color:#fff;border:3px solid var(--ink);font-family:monospace}.stage-ribbon strong{font:900 20px "Yu Gothic"}.town-board{position:relative;overflow:hidden;border:4px solid var(--line);min-height:490px;background:#b8ded7}.skyline{height:92px;display:flex;align-items:flex-end;gap:15px;padding:0 5%;border-bottom:3px solid var(--line);background:#9ed2d2}.skyline i{display:block;width:15%;height:55%;background:#f3d98e;border:3px solid var(--line);border-bottom:0}.skyline i:nth-child(2){height:82%;background:#e79061}.skyline i:nth-child(3){height:65%;background:#f6eee0}.skyline i:nth-child(4){height:90%;background:#7fa978}.skyline i:nth-child(5){height:45%;background:#e3bd69}.status-line{display:flex;justify-content:space-around;gap:8px;padding:9px;background:#fff8e7;border-bottom:3px solid var(--line);font-size:14px}.flow-scene{position:relative;height:245px;background:repeating-linear-gradient(90deg,#8bad7d 0,#8bad7d 32px,#85a676 33px 34px)}.source-badge{position:absolute;left:3%;top:29px;width:95px;padding:9px 4px;text-align:center;background:#fff7df;border:3px solid var(--line);font-weight:900;z-index:2}.main-line{position:absolute;left:8%;right:49%;top:93px;height:17px;background:#e9bd55;border:4px solid var(--line)}.traveler{position:absolute;left:7%;top:68px;width:68px;height:68px;border:4px solid var(--line);border-radius:50% 50% 45% 45%;background:#79d6e2;display:grid;place-items:center;font-weight:900;z-index:4;box-shadow:3px 4px 0 #18333a55;transition:left .75s cubic-bezier(.2,.8,.2,1),top .6s,transform .25s,background .2s}.traveler.waste{border-radius:8px;background:#df8b4c}.traveler.move{left:45%}.traveler.success{left:80%;transform:rotate(360deg) scale(.75)}.traveler.fail{background:#cf5b51;transform:rotate(-12deg) scale(.9)}.junction{position:absolute;left:48%;top:75px;width:50px;height:50px;border:5px solid var(--line);border-radius:50%;background:#f5cf61;z-index:3}.junction span{position:absolute;left:19px;top:-13px;width:6px;height:70px;background:var(--line);transform:rotate(45deg)}.route-lines{position:absolute;left:51%;right:12%;top:20px;height:190px}.route-lines i{position:absolute;left:0;width:100%;height:12px;background:#e9bd55;border:3px solid var(--line);transform-origin:left}.route-lines i:nth-child(1){top:74px;transform:rotate(-20deg)}.route-lines i:nth-child(2){top:83px}.route-lines i:nth-child(3){top:92px;transform:rotate(20deg)}.destinations{position:absolute;right:2%;top:9px;width:150px;display:grid;gap:9px}.destination{height:66px;display:grid;place-items:center;padding:3px;background:#fff5da;border:3px solid var(--line);text-align:center;font-size:13px;font-weight:900;line-height:1.25}.destination.correct{background:#bde5a7;animation:stamp .4s}.destination.wrong{background:#f0a29b}.burst{position:absolute;left:50%;top:83px;width:22px;height:22px;border:5px dotted #fff;border-radius:50%;opacity:0}.burst.show{animation:burst .65s}.mission-text{padding:12px 15px 4px;background:#fff8e7;font-size:18px;font-weight:900;text-align:center}.feedback{min-height:55px;padding:8px 15px 14px;background:#fff8e7;text-align:center;font-weight:700}.feedback.good{color:#28642a}.feedback.bad{color:#8e2e29}.route-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 28px}.lever{min-height:72px;border:3px solid var(--line);background:#f8e1a5;color:var(--ink);font-weight:900;font-size:15px;box-shadow:4px 4px 0 var(--line);cursor:pointer}.lever small{display:block;font-family:monospace;margin-bottom:4px}.lever:disabled{opacity:.55}.checkpoint,.quiz,.result{padding:50px min(7vw,70px);min-height:620px;text-align:center}.stamp{width:135px;height:135px;margin:0 auto 18px;border:8px double var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red);font-size:34px;font-weight:900;transform:rotate(-8deg);animation:stamp .45s}.checkpoint h2,.quiz h2,.result h2{font-size:clamp(28px,5vw,46px)}.checkpoint p,.quiz-feedback,#resultMessage{font-size:17px;line-height:1.8}.map-progress{display:flex;justify-content:center;gap:7px;margin:25px 0}.map-progress i{width:35px;height:35px;border:3px solid var(--line);background:#ded5b8;transform:rotate(45deg)}.map-progress i.open{background:#68b36a}.quiz-question{font-size:22px;font-weight:900;padding:20px;border:3px dashed var(--line);background:#fff8e5}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.quiz-choice{min-height:60px;border:3px solid var(--line);background:#fff;color:var(--ink);font-size:16px;font-weight:800;cursor:pointer}.quiz-choice.correct{background:#bce3a8}.quiz-choice.wrong{background:#efaaa0}.final-town{height:130px;display:flex;justify-content:center;align-items:flex-end;gap:4px;color:#fff}.final-town span,.final-town b,.final-town em{display:grid;place-items:center;border:3px solid var(--line);font-style:normal}.final-town span{width:110px;height:90px;background:#619064;clip-path:polygon(50% 0,100% 100%,0 100%)}.final-town i{width:55px;height:60px;background:#e6c46d;border:3px solid var(--line)}.final-town b{width:90px;height:110px;background:#db7654}.final-town em{width:100px;height:75px;background:#4d9cac}.final-score{display:flex;justify-content:center;align-items:baseline;gap:15px}.final-score strong{font:900 52px monospace;color:#c65a3d}.result-facts{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid var(--line);margin:20px 0}.result-facts div{padding:10px;border-right:2px solid var(--line)}.result-facts div:last-child{border:0}.result-facts dt{font-size:12px}.result-facts dd{margin:4px;font-size:20px;font-weight:900}.leaderboard{margin-top:25px;text-align:left}.leaderboard:empty{display:none}@keyframes burst{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(6)}}@keyframes stamp{0%{transform:scale(1.7) rotate(-8deg);opacity:0}100%{opacity:1}}@media(max-width:620px){.shell{border-inline:0}.mast{padding:11px 12px}.mast h1 small{display:block;margin-top:5px}.intro{min-height:580px}.town-window{height:270px}.intro-copy{margin:-24px 12px 20px;padding:18px}.intro-copy p{font-size:15px}.play{padding:8px}.stage-ribbon{grid-template-columns:auto 1fr;font-size:12px}.stage-ribbon span:last-child{grid-column:2}.status-line{font-size:12px}.town-board{min-height:470px}.flow-scene{height:245px}.source-badge{width:74px;font-size:12px}.destinations{width:110px}.destination{font-size:11px}.route-controls{gap:7px}.lever{font-size:12px;padding:5px}.checkpoint,.quiz,.result{padding:35px 14px}.quiz-choices{grid-template-columns:1fr}.result-facts{grid-template-columns:1fr 1fr}.result-facts div:nth-child(2){border-right:0}.result-facts div:nth-child(-n+2){border-bottom:2px solid var(--line)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}