/* Five lanes and subject-based adventures. */
.run-status{display:flex;justify-content:space-between;padding:0 20px 8px;font-size:10px;color:#8c998f;flex-shrink:0}.run-status #collisionCount{color:#70887b;font-weight:700}.run-status #collisionCount.warning{color:#ac7755}.road{left:9%;right:9%}.line-one{left:20%}.line-two{left:40%}.line-three{left:60%}.line-four{left:80%}.vehicle{width:10%;height:76px}.traffic{width:9.3%;height:70px}.finish-line{left:9%;width:82%}.tree{transform:scale(.65);transform-origin:left top}.house{transform:scale(.62);transform-origin:left top}.flowers{transform:scale(.65)}.controls{padding-left:18px;padding-right:18px}.control-caption{min-width:105px}.control-caption>span{font-size:13px}.control-caption small{font-size:9px;margin-top:3px}.control-caption #abilityButton{border:1px solid #e3d7b1;background:#fff0c7;border-radius:10px;padding:5px 9px;margin-top:4px;font-size:10px;color:#8d7751;min-height:30px}.control-caption #abilityButton:disabled{opacity:.5}.subject-tabs{display:flex;gap:8px;margin:12px 0 9px}.subject-tabs button{flex:1;min-height:36px;border:1px solid #e1e7da;border-radius:12px;background:#f2f5ed;font-size:14px;font-weight:700}.subject-tabs button[aria-pressed=true]{background:#dcece3;border-color:#a8cbb9;color:#527565}.level-picker{display:flex;justify-content:space-between;gap:7px}.level-picker button{flex:1;min-height:36px;border:1px solid #e8dfc5;border-radius:11px;background:#f9f3e4;font-size:14px;font-weight:700}.level-picker button[aria-pressed=true]{background:#f3cf80;border-color:#d4b162;color:#725b35}.level-description{font-size:10px;color:#89988e;margin:8px 0 10px;min-height:15px}.start-card{padding:15px 18px}.start-card h2{font-size:21px;margin:7px 0}.start-card .start-intro{font-size:11px;margin-bottom:7px}.garage{margin:8px 0}.garage-choice{min-height:72px;padding:5px;font-size:11px}.garage-choice img{height:45px;width:100%;margin-bottom:2px}.start-card .trip-summary{font-size:9px;gap:6px;margin:9px 0}.start-card .primary-button{min-height:47px;font-size:16px}.start-card .sound-toggle{min-height:25px;margin-top:6px}.garage-pages button{height:32px}.learning-zone{min-height:122px;padding:11px 14px}.question-body{gap:6px}.question-body h2{font-size:19px}.question-objects{max-width:188px;gap:3px}.question-objects .brick{width:16px;height:12px}.question-objects .brick:after{width:18px;top:5px}.answers{gap:5px}.answer-button{width:52px;height:55px;font-size:25px}.visual-question{font-size:10px;color:#8a998e;line-height:1.6}.visual-question.picture-word{font-size:35px;line-height:1.2}.answer-feedback{font-size:10px;line-height:1.5}.question-index{flex-shrink:0}.visitor-notice{font-size:10px;max-width:94%;white-space:normal;width:max-content;text-align:center}.transform-badge{font-size:8px;top:-19px;padding:2px 5px}.visitor:before{inset:-5px;border-width:2px;border-radius:17px}.transformation-toast{font-size:12px}.world{min-height:200px}
.vehicle-effect{position:absolute;top:77%;left:50%;width:100px;height:130px;transform:translate(-50%,-50%);z-index:4;pointer-events:none;display:none}.vehicle-effect.active{display:block}.vehicle-effect i{display:block;position:absolute}.drop{height:8px;width:4px;border-radius:50%;background:#84d9ef;left:48%;top:73%;opacity:0;animation:water-spray .8s linear infinite;animation-delay:calc(var(--i)*-.1s)}@keyframes water-spray{0%{opacity:.7;transform:translate(0,0) scale(.7)}90%{opacity:.3}100%{opacity:0;transform:translate(calc(var(--side)*40px),calc(20px + var(--i)*3px)) scale(1.2)}}.effect-fire .drop{top:18%;animation-name:fire-spray;animation-duration:.65s}@keyframes fire-spray{0%{opacity:.8;transform:translate(0,0) scale(.7)}100%{opacity:0;transform:translate(calc(var(--side)*14px),calc(-50px - var(--i)*3px)) scale(1.4)}}.drum-motion{width:20px;height:27px;top:46%;left:41%;border:2px dashed #74a9b4;border-radius:50%;animation:drum-turn 1.3s linear infinite}@keyframes drum-turn{to{transform:rotate(360deg)}}.cargo-bit{width:7px;height:6px;border-radius:2px;background:#b49b6b;left:48%;top:12%;opacity:0;animation:earth-move 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.22s)}@keyframes earth-move{0%{opacity:0;transform:translate(0,0)}35%{opacity:.9}100%{opacity:0;transform:translate(calc(var(--side)*(12px + var(--i)*3px)),-25px)}}.effect-dump .cargo-bit{top:82%;animation-name:unload}.effect-collect .cargo-bit{top:90%;background:#a6bc8c;animation:unload 1.2s ease-in infinite reverse;animation-delay:calc(var(--i)*-.2s)}@keyframes unload{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(calc(var(--side)*(10px + var(--i)*4px)),30px)}}.effect-push .cargo-bit{top:20%;animation-duration:1.1s}.effect-load .cargo-bit{top:15%;animation-direction:reverse}.road-trail{left:29%;top:78%;width:42%;height:45px;background:linear-gradient(#7e8b8140,transparent);border-left:5px solid #75867b40;border-right:5px solid #75867b40}.hanging-cargo{left:45%;top:-10%;width:17px;height:14px;background:#d5b57f;border:2px solid #ac915f;animation:cargo-lift 2s ease-in-out infinite}.hanging-cargo:before{content:"";position:absolute;left:6px;bottom:13px;width:2px;height:17px;background:#6b8074}@keyframes cargo-lift{50%{transform:translateY(-14px) rotate(7deg)}}.fork-cargo{left:38%;top:5%;width:25px;height:18px;background:repeating-linear-gradient(90deg,#d4b483 0 6px,#b59a71 6px 8px);border:2px solid #b9a078;animation:cargo-lift 2s ease-in-out infinite}.medical-glow{left:35%;top:28%;width:30%;height:8px;border-radius:8px;background:#b6dce7;box-shadow:0 0 12px 6px #c7e7ed66}@media(max-height:700px){.garage-choice{min-height:63px}.garage-choice img{height:36px}.subject-tabs{margin-top:7px}.start-card{padding:12px 15px}.start-card .eyebrow{font-size:9px}.level-description{margin:6px 0}.vehicle{height:67px}.traffic{height:62px}}@media(prefers-reduced-motion:reduce){.vehicle-effect i{animation-duration:3s!important}}

/* Compact header and controls preserve the largest possible driving area. */
.topbar{padding:calc(6px + env(safe-area-inset-top)) 16px 3px}.brand{gap:8px}.brand-icon{width:30px;height:30px;font-size:20px;border-radius:9px}h1{font-size:16px;letter-spacing:1px}.brand p{font-size:9px;letter-spacing:1px;margin-top:2px}.icon-button{width:32px;height:32px;font-size:19px;border-radius:11px}.journey{padding:4px 18px 7px;font-size:9px;gap:9px}.progress-track{height:5px}.progress-track>span{font-size:15px}.run-status{font-size:9px;padding:0 16px 5px}.learning-zone{min-height:88px;padding:7px 11px;margin:0 10px 7px;border-radius:16px}.little-label{font-size:9px}.question-body h2{font-size:17px;margin:3px 0 4px}.question-top{min-height:11px}.question-index{font-size:9px}.question-objects{min-height:17px}.answer-button{height:45px;width:48px;min-width:44px;border-radius:13px;font-size:23px}.answer-feedback{margin-top:4px;min-height:12px;font-size:9px}.learning-zone:not(.has-question){min-height:42px;padding:5px 10px}.welcome-message{padding:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.welcome-message .little-label{display:none}.welcome-message h2{font-size:14px;letter-spacing:0;margin:4px 0}.welcome-message p{font-size:9px;max-width:58%;line-height:1.5}.controls{padding:7px 18px calc(8px + env(safe-area-inset-bottom));gap:8px}.steer{height:54px;width:82px;border-radius:18px}.steer svg{width:38px;height:29px}.control-caption>span{font-size:11px}.control-caption #abilityButton{min-height:27px;padding:3px 9px;margin-top:3px;font-size:10px}.control-caption small{display:none}
.answer-button{display:flex;align-items:center;justify-content:center;gap:2px}.answer-result{font-size:13px;font-weight:900}.answer-button.incorrect{background:#f6e8d9;border-color:#d5ab88;color:#a16f50;box-shadow:0 3px #dbc3ad}.question-progress{display:flex;gap:4px;margin-left:auto;margin-right:9px}.question-progress>span{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;font-size:9px;color:#9ba694;background:#eef1e8}.question-progress .mark-correct{background:#e2efdf;color:#5d885a}.question-progress .mark-wrong{background:#f4e4d6;color:#aa7552}#earnedStars{font-size:39px;letter-spacing:5px;color:#e7b754;text-shadow:0 2px #c9a05c40;margin:8px 0 12px}.review-check{color:#648a5d!important;font-size:17px!important}.end-vehicle{height:85px;margin:8px 0}
.horn-wave{top:8%;left:33%;width:34px;height:24px;border:2px solid #ddc374;border-bottom:0;border-radius:50% 50% 0 0;animation:horn-ring 1.2s ease-out infinite}.tank-outline{top:42%;left:35%;width:30%;height:33px;border:2px solid #dfc58c;border-radius:12px}@keyframes horn-ring{from{opacity:.6;transform:scale(.5) translateY(0)}to{opacity:0;transform:scale(1.3) translateY(-16px)}}
.effect-snow .cargo-bit{background:#f6fcf1}.effect-concrete .drop{background:#b6c5b8}.bus-door{top:23%;left:66%;width:12px;height:25px;border:2px solid #a0bfb2;background:#b7d5c5;transform-origin:left center;animation:bus-door-open 2s ease-in-out infinite}.brush-wheel{width:23px;height:23px;border:3px dashed #91b4a3;border-radius:50%;top:31%;animation:drum-turn 1s linear infinite}.brush-left{left:24%}.brush-right{right:24%}.pile-hammer{width:15px;height:24px;background:#a9a78a;border:2px solid #858c73;left:53%;top:14%;animation:pile-drive .8s ease-in-out infinite}@keyframes bus-door-open{50%{transform:perspective(60px) rotateY(-60deg)}}@keyframes pile-drive{50%{transform:translateY(14px)}}
.coin-counter{color:#b58c35;font-weight:700}.coin{position:absolute;z-index:2;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(130deg,#fff1ad,#edc25b);border:2px solid #d3a64a;box-shadow:inset 0 0 0 1px #fff0b4,0 2px 3px #596e5630;font-size:9px;color:#b18735;transform:translate(-50%,-50%);pointer-events:none}.pinyin-question .answer-button{font-family:"Comic Sans MS","Chalkboard SE",sans-serif;font-size:25px;letter-spacing:0}.pinyin-question .question-body h2{font-size:16px}
#pauseButton{width:68px;min-height:34px;height:34px;font-size:12px;font-weight:750;white-space:nowrap;flex-shrink:0;background:#dfedf2;border-color:#bcd8e2;color:#4e7d91}#pauseButton>span{font-size:15px;vertical-align:-1px;margin-right:2px}#pauseButton:disabled{opacity:.4}
.pinyin-question .answer-button{width:61px;min-width:54px;font-size:21px}.long-answers .question-body{flex-wrap:wrap}.long-answers .question-body>div:first-child{width:100%}.long-answers .answers{width:100%;justify-content:center;margin-top:3px}.long-answers .answer-button{flex:1;max-width:145px;height:40px;font-size:18px}.pinyin-question .question-body h2{font-size:15px;line-height:1.45}.pinyin-question .visual-question{font-size:9px}
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.mute-button{width:51px;min-height:34px;border:1px solid #cfdfd4;background:#eaf2e8;border-radius:11px;font-size:10px;font-weight:700;color:#6d887b;white-space:nowrap}.mute-button[aria-pressed=true]{background:#f1ede3;border-color:#dcd8cd;color:#9a978c}
