:root{font-family:'Trebuchet MS','Segoe UI',sans-serif;color:#23445d;background:#faf4e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #255bb2;outline-offset:4px}header{display:flex;justify-content:space-between;align-items:center;padding:16px 4%;background:#fff9ee;border-bottom:2px solid #f0dfc6}.brand{background:none;text-align:left;font-size:25px;font-weight:900;letter-spacing:-1px}.brand small{display:block;font-size:12px;letter-spacing:1px;margin-top:5px}.status{font-size:13px}.map-screen{max-width:1400px;margin:auto;padding:24px}.map-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}h1{font-size:30px;margin:8px 0 12px;line-height:1.25}p{line-height:1.5}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#986d49}.primary{padding:17px 25px;border-radius:21px;background:linear-gradient(#72acff,#468bef);box-shadow:inset 0 2px 2px #b6d4ff,0 5px 0 #367acb,0 9px 20px #487ca329;color:#fff;font-weight:800;white-space:nowrap}.map-window{border-radius:28px;overflow:auto;box-shadow:0 12px 32px #8d816f28}.map-canvas{position:relative;min-width:700px;aspect-ratio:1.5}.map-canvas>img{width:100%;height:100%;display:block}.route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.45}.route path{fill:none;stroke:#fbf4db;stroke-width:5;stroke-dasharray:7 8}.pin{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:linear-gradient(#a3c8ff,#5a90e3);border:4px solid #fff7e5;box-shadow:0 5px 0 #c6aa80,0 8px 15px #524b4333;font-size:22px;font-weight:900;color:white}.pin.pending{filter:saturate(.4)}.pin.available{width:60px;height:60px}.pin.complete{background:#69b47c}.traveller{position:absolute;left:20%;top:85%;font-size:42px;transition:all 1s}.traveller.moved{left:25%;top:58%}.map-bottom{display:flex;align-items:center;gap:20px;padding:20px 0}.coco{width:110px;flex-shrink:0}.coco img{width:100%;display:block;border-radius:24px;mix-blend-mode:multiply}.coco.happy{animation:hop .4s ease-out}.prototype-note{font-size:12px;color:#816d59}.destinations{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding-top:15px}.destinations button{background:#fff9ef;border-radius:14px;padding:12px;text-align:left}.destinations b{margin-right:10px}.destinations small{display:block;color:#866f58;margin:5px 0}summary{cursor:pointer;padding:10px}.play-screen{display:flex;max-width:1550px;margin:auto;padding:20px;gap:20px}.level-rail{width:190px;flex-shrink:0}.level-rail h2{font-size:19px}.rail-item{display:flex;align-items:center;gap:10px;border-radius:20px;margin:7px 0;padding:13px;background:#fff9ee;color:#9d948b;font-size:13px}.rail-item b{display:grid;place-items:center;border-radius:50%;background:#ddd8d1;width:30px;height:30px;flex-shrink:0;color:#fff}.rail-item.active{background:#6aa0ed;color:#fff}.rail-item.active b{background:#3979d0}.play-area{flex:1;min-width:0}.play-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:15px;font-size:14px}.quiet{background:#fff9ed;border:1px solid #eadcc9;padding:12px 18px;border-radius:16px}.game-grid{display:grid;grid-template-columns:1fr 440px;gap:20px;align-items:start}.scene{position:sticky;top:20px;overflow:hidden;min-height:570px;border-radius:28px;background:#d8e4cc;box-shadow:0 10px 25px #796d5622}.scene-art{width:100%;height:570px;object-fit:cover}.scene-caption{position:absolute;bottom:14px;left:14px;background:#fffaeeed;padding:8px 12px;border-radius:12px;font-size:11px}.road-sign{position:absolute;top:25px;left:24px;box-shadow:0 5px 0 #846f57;font-weight:900}.stop{background:#ce5748;color:white;width:88px;height:88px;display:grid;place-items:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);font-size:25px;border:5px solid white}.give{background:white;border:8px solid #d76552;padding:18px;text-align:center;border-radius:10px}.no-entry{background:#d96553;border:6px solid white;border-radius:50%;width:90px;height:90px;display:grid;place-items:center}.no-entry i{background:white;width:55px;height:13px}.school{background:#fff6ba;padding:12px;border-radius:10px;font-size:12px;text-align:center}.school b{display:block;border:5px solid #d96553;background:white;border-radius:50%;font-size:30px;margin:7px auto;width:62px;height:62px}.school small{font-size:10px}.signal{position:absolute;top:20px;left:25px;background:#516057;padding:8px;border-radius:12px;display:grid;gap:5px}.signal i{width:23px;height:23px;border-radius:50%;background:#798378}.signal i:first-child{background:#f76f5b;box-shadow:0 0 12px #ffaba3}.diagram{position:absolute;inset:40% 12% auto;background:#fff7e9f0;padding:18px;border-radius:18px;display:flex;gap:20px;line-height:1.8}.roundabout{position:absolute;top:30%;left:20%;width:60%;aspect-ratio:1;border-radius:50%;border:45px solid #9da9ae;background:#a9cd8c;display:grid;place-items:center;text-align:center;font-size:13px}.question-card{background:#fffaf4;padding:25px;border-radius:28px;box-shadow:0 8px 0 #e5d6c3,0 12px 25px #8879601c}.question-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#4d8ad8}.rule{font-size:10px;letter-spacing:1px;font-weight:bold}.question-card h1{font-size:21px;line-height:1.4}.companion{display:flex;align-items:center;gap:15px;min-height:105px}.companion .coco{width:95px}.companion p{font-size:15px;margin:0}.options{display:grid;gap:10px}.option{display:flex;align-items:center;gap:12px;min-height:62px;text-align:left;padding:12px;background:linear-gradient(#fff,#f4efe8);border:2px solid #eee6dc;border-radius:20px;box-shadow:0 3px 0 #e5dcd0;line-height:1.35}.option b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#93b8ef;color:white;flex-shrink:0}.option:disabled{cursor:default;opacity:1}.option.correct{border-color:#63aa75;background:#edf6ed}.option.correct b{background:#68ac7d}.option.wrong{border-color:#de967a;background:#fff0e7}.option em{font-style:normal;margin-left:auto}.hint{margin-top:20px;width:100%}.feedback{padding:15px;border-radius:18px;margin-top:18px;background:#f5ecdc}.feedback p{font-size:14px;margin:8px 0}.feedback a{font-size:12px;color:#416d9d}.feedback small{display:block;font-size:10px;margin-top:6px}.next{width:100%;margin-top:15px}.tip-strip{background:#fff0d7;padding:17px 22px;border-radius:20px;margin-top:20px}.tip-strip b{font-size:12px;color:#a47038}.tip-strip p{margin:5px 0}.tip-strip small{color:#867663;font-size:11px}.results{max-width:580px;margin:35px auto;padding:30px;background:#fffaf1;border-radius:30px;text-align:center}.results .coco{margin:15px auto;width:150px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}.stats div{background:#f4ead7;padding:20px;border-radius:20px}.stats strong{display:block;font-size:38px;color:#538eac}.weak{display:flex;justify-content:space-between;background:#f8efe1;padding:12px;border-radius:12px}.results button{margin:8px}.merge-road{height:570px;width:75%;margin:auto;background:#a4aeb3;position:relative;transform:perspective(700px) rotateX(15deg);border:12px solid #f5e4cb;border-radius:20px}.lane{position:absolute;left:50%;height:60%;top:0;border-left:5px dashed white;transform:rotate(-10deg)}.lane.no-line{border:none}.mini-car{position:absolute;width:65px;height:100px;border-radius:25px;box-shadow:inset 0 8px 0 #ffffff70,0 8px 0 #716d6822;display:grid;place-items:center;font-size:20px;font-weight:bold;color:white}.car-a{background:#df8a5b;left:12%;top:65%}.car-b{background:#73a4c5;right:12%;top:45%}.scene-label{position:absolute;top:15px;left:10%;width:80%;background:#fff6e8;padding:12px;border-radius:14px;font-size:12px}@keyframes hop{50%{transform:translateY(-7px)}}@media(max-width:1050px){.level-rail{display:none}.game-grid{grid-template-columns:1fr 410px}.scene{min-height:500px}.scene-art{height:500px}}@media(max-width:750px){header{padding:13px 16px}.brand{font-size:21px}.status{font-size:11px}.map-screen{padding:16px}.map-heading{display:block}.map-heading h1{font-size:26px}.map-heading .primary{width:100%;margin:8px 0}.map-window{margin-top:10px}.map-bottom{gap:10px}.map-bottom h2{font-size:19px}.map-bottom .coco{width:85px}.play-screen{padding:12px}.game-grid{display:flex;flex-direction:column;gap:12px}.scene{position:relative;top:auto;width:100%;min-height:220px;height:220px}.scene-art{height:220px;object-position:center 64%}.question-card{width:100%;padding:20px}.question-card h1{font-size:20px}.companion{min-height:85px}.companion .coco{width:75px}.play-top{font-size:11px}.play-top .quiet{padding:10px}.results{margin:15px;padding:24px}.tip-strip{font-size:13px}.merge-road{height:220px;width:80%}.mini-car{height:60px;width:42px;font-size:15px}.car-a{top:62%}.car-b{top:37%}.scene-label{font-size:10px;top:7px}.roundabout{top:5%;left:25%;width:42%;border-width:25px}.diagram{font-size:12px}.destinations{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.traveller.moved{animation:map-travel 1.3s ease-in-out}@keyframes map-travel{from{left:20%;top:85%}to{left:25%;top:58%}}
.scene:not([aria-label="STOP"]):not(.merge-scene) .scene-art{filter:blur(9px);opacity:.25}.scene:not([aria-label="STOP"]) .road-sign,.scene:not([aria-label="STOP"]) .signal{z-index:2;top:24%;left:42%}.scene:not([aria-label="STOP"]) .scene-caption{font-size:0}.scene:not([aria-label="STOP"]) .scene-caption::after{content:'Rule illustration · background is decorative';font-size:11px}
@media(max-width:750px){#app,header,.play-screen,.play-area,.game-grid{width:100%;min-width:0}.game-grid{display:grid;grid-template-columns:minmax(0,1fr)}.question-card,.scene{width:100%;min-width:0;max-width:100%}.question-card h1,.option span,.companion p{min-width:0;overflow-wrap:normal;word-break:normal}.brand{max-width:75%}.scene{height:260px}.scene-art{height:260px}.companion{gap:10px}.companion .coco{width:64px}.companion p{flex:1}}
/* Optional source-sign detail; the shared game grid and Home baseline stay intact. */
.sign-detail{margin:10px 0;padding:10px 14px;border:1px solid #eadcc5;border-radius:14px;background:#fff9ef;color:#31556a}
.sign-detail summary{cursor:pointer;font-weight:600}
.sign-detail img{display:block;height:auto;width:auto;max-width:100%;max-height:320px;margin:14px auto;object-fit:contain}
.sign-detail p{font-size:14px;margin:8px 0}
.sign-detail img.parking-sign{width:100%;max-width:420px;max-height:none;height:auto}

/* Parking rule text stays readable independently of the scaled road canvas. */
.parking-rule-details,.road-example-details{margin:12px;padding:12px 14px;min-width:0;max-width:100%;border:1px solid #eadcc5;border-radius:14px;background:#fff9ef;color:#31556a;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.parking-rule-details strong,.road-example-details strong{display:block;font-size:15px;line-height:1.5}
.parking-rule-details p,.road-example-details p{margin:6px 0 0;font-size:14px}
.parking-rule-details .parking-illustration-note{font-size:13px}
.parking-rule-details [data-parking="counter"]{font-weight:700;font-variant-numeric:tabular-nums}

.map-navigation{display:none}
@media(max-width:750px){
 .map-window{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
 .map-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
 .map-navigation p{font-size:12px;text-align:center;margin:0;color:#567269}
 .map-navigation button{min-width:48px;min-height:44px;flex-shrink:0}
 .play-screen,.map-screen,.results{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
}