:root{font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#304839;background:#eff1e8;font-synthesis:none;--paper:#fffdf6;--line:#d0d8c4}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #839767;outline-offset:3px}button{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 14px;min-height:44px}button:hover{background:#f0f2e5}[hidden]{display:none!important}.brand{font-size:10px;letter-spacing:1.7px;color:#7b876e}.hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));width:320px;padding:17px 20px;background:#fffdf8f5;border:1px solid var(--line);border-radius:20px;z-index:5;box-shadow:0 8px 35px #3048390b}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:23px;margin:5px 0 0;letter-spacing:1px}h1 small{font-size:10px;color:#8a927d;letter-spacing:0;font-weight:400}.actions{display:flex;gap:6px;align-items:center}.actions button{padding:0;min-width:36px;font-size:19px;border:0;background:#edf1e4}.actions a{font-size:11px;text-decoration:none;white-space:nowrap}.stats{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px}.stats>div>span{display:block;font-size:11px;color:#76826d}.stats strong{display:block;font-size:29px;font-variant-numeric:tabular-nums;margin-top:3px;line-height:1.2;white-space:nowrap}.stats strong small{font-size:11px;font-weight:400}#cash{color:#a36635}.stats p{font-size:10px;color:#7a866e;line-height:1.9;margin:0}.stats p b{font-weight:500;color:#566c48}#camera{position:fixed;inset:0;overflow:auto;overscroll-behavior:none;touch-action:pan-x pan-y;scrollbar-width:none;background:radial-gradient(#b6c5a447 .8px,transparent .8px) 0 0/22px 22px}#camera::-webkit-scrollbar{display:none}#camera::before{content:"";display:block;width:var(--cw);height:var(--ch)}#scene{position:absolute;width:1040px;height:800px;transform-origin:top left;user-select:none;-webkit-user-select:none}#roads{position:absolute;width:100%;height:100%;pointer-events:none}.stop{position:absolute;transform:translate(-50%,-24px);width:180px;text-align:center}.station{position:relative;display:flex;align-items:center;justify-content:center;margin:auto;border:4px solid #fffdf8;background:var(--paper);color:var(--color);border-radius:50%;width:58px;height:58px;box-shadow:0 0 0 2px #c8d2bb,0 4px 10px #344c3215;padding:0;font-size:28px;transition:box-shadow .15s,background .15s;opacity:1!important}.station.reachable{box-shadow:0 0 0 3px var(--color),0 4px 10px #344c3220}.station.current{background:var(--color);color:#fffdf5;box-shadow:0 0 0 6px #e0e5d6}.station.selected{box-shadow:0 0 0 7px #9b9690,0 0 0 10px #fffdf6}.station .can-deliver{position:absolute;right:-12px;top:-11px;border:2px solid #fffdf5;background:#354e3b;color:#fff;border-radius:20px;font-size:11px;padding:2px 6px;line-height:17px;white-space:nowrap}.stop-name{display:block;margin-top:7px;font-size:14px;font-weight:650;color:#50634a}.stop-name em{font-size:10px;margin-left:5px;font-style:normal;font-weight:400;color:#89957a}.queue{display:flex;align-items:center;justify-content:center;gap:5px;margin:7px 0 0;min-height:34px;font-size:11px;color:#849075}.queue .order{font-size:10px;color:#8a957e}.token{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--color);color:#fffdf8;font-size:12px;line-height:1;flex:none}.token.empty{background:#e7eadf;color:#acb5a0;box-shadow:inset 0 0 0 1px #cdd5c2}#bus{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:2}#seats{display:flex;gap:4px;justify-content:center;margin-bottom:7px}#seats .token{width:23px;height:23px;border:2px solid #fffdf5;font-size:10px;box-shadow:0 2px 3px #30483920}.bus-body{position:relative;width:54px;height:29px;background:#496044;border:3px solid #fffdf6;border-radius:8px;display:flex;align-items:center;gap:4px;padding:5px;box-shadow:0 3px 10px #34482930;margin:auto}.bus-body i{height:10px;width:7px;background:#edf1d7;border-radius:2px}.bus-body span{font-size:14px;color:#edf1d7}.bus-body:before,.bus-body:after{content:"";position:absolute;width:7px;height:7px;background:#334432;border-radius:50%;bottom:-7px}.bus-body:before{left:7px}.bus-body:after{right:7px}.map-tools{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;gap:12px}.map-tools button{box-shadow:0 3px 14px #3048390c;font-size:12px}.map-tools span{font-size:11px;color:#77866b;background:#eff1e8da;padding:5px;border-radius:8px}#status{position:fixed;bottom:23px;right:20px;font-size:12px;background:#fffdf8ee;padding:12px 16px;border:1px solid var(--line);border-radius:12px;z-index:4;max-width:48vw}.close{position:absolute;right:7px;top:7px;padding:0;border:0;background:none;font-size:24px;min-width:40px}.primary{background:#425c39;color:#fffdf5;border-color:#425c39}.primary:hover{background:#304a2b}dialog{width:min(470px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:27px;color:#304839;box-shadow:0 20px 60px #24352030}dialog::backdrop{background:#273e326b;backdrop-filter:blur(5px)}dialog h2{font-size:25px;margin:13px 0}dialog p,dialog li{font-size:13px;line-height:1.9;color:#79886d}dialog ol{padding-left:18px}dialog li{padding-left:3px;margin:12px 0}dialog b{color:#415e35}dialog>.primary{width:100%}.dialog-actions{display:flex;gap:10px;margin-top:22px}.dialog-actions button{flex:1;font-size:12px}.result-money{font-size:52px;color:#ac6c36;margin:20px 0 5px}.comparison{padding:12px;background:#edf2e3;border-radius:10px}.insight{border-top:1px dashed #cdd8c1;margin-top:14px;padding-top:14px;font-size:13px;line-height:1.8}.insight span{display:block;color:#849075;font-size:12px}.route-log{font-size:11px;line-height:1.8;color:#8a947e;margin-top:16px}.income{position:absolute;pointer-events:none;font-size:25px;color:#567336;background:#fffdf5;border:1px solid #c3d3a8;border-radius:14px;padding:9px 14px;box-shadow:0 5px 16px #30482b20;font-weight:750;z-index:3;animation:money 1.9s ease-out forwards;white-space:nowrap}.income small{font-size:11px;display:block;font-weight:500;margin-bottom:3px}@keyframes money{0%{opacity:0;transform:translate(-50%,0) scale(.8)}20%{opacity:1;transform:translate(-50%,-20px) scale(1.08)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-75px)}}
@media(max-width:760px),(max-height:560px){.hud{top:max(8px,env(safe-area-inset-top));left:8px;width:calc(100% - 16px);padding:10px 14px;border-radius:16px}.heading h1{font-size:18px;margin:0}.brand{font-size:8px}.heading .brand{display:none}.actions button{min-height:36px}.stats{margin-top:6px}.stats strong{font-size:26px}.stats>div>span{font-size:10px}.stats p{font-size:10px}#camera{top:130px}.map-tools{left:10px;bottom:max(10px,env(safe-area-inset-bottom));gap:6px}.map-tools span{font-size:9px;max-width:95px}.map-tools button{font-size:11px;padding:8px 10px}#status{font-size:10px;right:10px;bottom:65px;max-width:calc(100% - 20px);padding:8px 11px}}
@media(orientation:landscape) and (max-height:560px){.hud{display:flex;align-items:center;gap:24px;padding:7px 13px}.stats{flex:1;margin:0}.stats p{font-size:9px}.stats strong{font-size:22px}#status{bottom:13px}.map-tools{bottom:12px}.stats>div>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.income{animation-duration:.1s}}
/* The map owns touch gestures so pinching scales the city, not the HUD. */
#camera{touch-action:none;cursor:grab}#camera:active{cursor:grabbing}.station{cursor:pointer}
.queue{gap:5px;min-height:39px}.queue .order{margin-right:4px}.waiting-person{display:flex;align-items:center;flex:none}.little-person{display:inline-block;width:24px;height:34px;color:var(--color);flex:none;filter:drop-shadow(0 2px 1px #30483916)}.little-person svg{display:block;width:100%;height:100%}.seat{display:flex;width:23px;height:29px;align-items:center;justify-content:center;flex:none}.seat .little-person{width:21px;height:29px}#seats{gap:4px;align-items:center;min-height:29px}.boarding-person,.alighting-person{position:absolute;pointer-events:none;z-index:4;width:24px;height:34px}.boarding-person .little-person,.alighting-person .little-person{width:100%;height:100%}.zoom-controls{display:flex;align-items:center;background:#fffdf8f5;border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 14px #3048390c}.zoom-controls button{border:0;background:none;min-width:40px;padding:7px!important;font-size:18px!important}.zoom-controls output{font-size:10px;color:#7b886e;min-width:38px;text-align:center;font-variant-numeric:tabular-nums}.map-tools>span{max-width:none}
@media(max-width:760px),(max-height:560px){.map-tools{gap:7px}.map-tools>span{position:absolute;bottom:51px;left:0;white-space:nowrap;font-size:10px;padding:4px 7px;background:#eff1e8e8;border-radius:8px}#status{bottom:92px;max-width:calc(100% - 20px)}}

/* Chapter information stays within the compact floating HUD. */
#scene{width:1640px;height:900px}.level-switch{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:36px;padding:7px 0 0;margin-top:9px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;font-size:11px;color:#667957}.level-switch span:last-child{font-size:10px;color:#8a967e}.level-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;margin-top:9px;text-align:left;padding:13px 15px}.level-card b{font-size:14px}.level-card span{font-size:12px;color:#6b7b61}.level-card small{font-size:11px;color:#859177}.level-card.active{border:2px solid #789163;background:#eef3e4}.level-card:disabled{opacity:.6;background:#eef0e7}.bus-body{min-width:calc(var(--seat-count,3)*18px + 9px)}#seats{width:max-content;min-width:100%;justify-content:center}.dialog-actions{flex-wrap:wrap}.dialog-actions button{min-width:100px}
@media(max-width:760px),(max-height:560px){.level-switch{margin-top:5px;min-height:30px;padding-top:5px}.hud{padding-bottom:7px}.heading h1{font-size:19px}}
@media(orientation:landscape) and (max-height:560px){.hud{gap:15px}.level-switch{width:145px;display:block;border-top:0;border-left:1px solid var(--line);padding:0 0 0 12px;margin:0;flex:none;text-align:left}.level-switch span{display:block}.level-switch span:last-child{margin-top:4px}}

/* Quiet, neutral roads leave destination colors exclusively on passengers and stops. */
#result{width:min(410px,calc(100% - 28px));padding:25px 25px 22px;text-align:center}#result[open]{animation:result-arrive .3s ease-out}#result h2{font-size:22px;margin:12px 0 10px}#result .result-money{font-size:42px;margin:9px 0 4px}#result .result-summary{margin:0;font-size:12px;line-height:1.8}#result .star-message{font-size:12px;margin:13px 0;color:#826d42}.result-stars{display:flex;justify-content:center;gap:18px;padding:12px 0 0}.star-slot{display:flex;flex-direction:column;align-items:center;gap:5px}.star-slot small{font-size:10px;color:#8f8676}.result-star{position:relative;display:block;width:64px;height:64px}.result-star svg{width:100%;height:100%;overflow:visible}.star-outline,.star-fill{position:absolute;inset:0;display:block}.star-outline path{fill:#ede9df;stroke:#d9d1c1;stroke-width:2;stroke-linejoin:round}.star-fill{opacity:0}.star-fill path{fill:#e8b947;stroke:#b5852a;stroke-width:2;stroke-linejoin:round}.earned .star-fill{animation:star-reveal .62s cubic-bezier(.22,.8,.32,1.15) var(--delay) both;filter:drop-shadow(0 4px 7px #d4a84235)}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}.result-actions button{font-size:13px;min-height:44px}.result-actions .primary{grid-column:1/-1}.result-details{text-align:left;border-top:1px solid #e1ded4;margin-top:15px;padding-top:11px}.result-details summary{cursor:pointer;text-align:center;font-size:11px;color:#8b877c;min-height:28px;padding:5px}.result-details .comparison{font-size:12px}.result-details .insight{font-size:12px}.result-details .insight span{font-size:11px}
@keyframes star-reveal{0%{opacity:0;transform:translateY(14px) scale(.25) rotate(-18deg)}55%{opacity:1;transform:translateY(-3px) scale(1.2) rotate(5deg)}80%{transform:translateY(1px) scale(.95) rotate(-2deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes result-arrive{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:380px){#result{padding:23px 18px 18px}.result-stars{gap:12px}#result h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){#result[open]{animation:none}.earned .star-fill{animation:none;opacity:1}}
