*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#172227;color:#f6f1e5;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #efbd68;outline-offset:4px}button:disabled{opacity:.55;cursor:default}a{color:inherit;text-decoration:none}.header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid #ffffff0e}.brand{display:flex;gap:13px;align-items:center}.brand-mark{font-size:46px;line-height:1;color:#e7b866;font-family:Georgia}.brand strong{display:block;font-size:20px;font-weight:650;letter-spacing:2px}.brand small{display:block;font-size:9px;letter-spacing:3px;color:#9ba9a9;margin-top:5px}.header-right{display:flex;gap:25px;align-items:center}.demo-note{color:#a9bab6;font-size:12px;display:flex;gap:9px;align-items:center}.demo-note i,.live-dot{display:inline-block;width:6px;height:6px;background:#91bb96;border-radius:50%}.quiet{background:none;font-size:12px}.quiet span{color:#83918f}.icon-button{width:28px;height:28px;border:1px solid #61716e;border-radius:50%;background:none;color:#b2bfba}main{max-width:1920px;margin:auto;padding:0 26px}.journey-bar{height:78px;display:flex;align-items:center;gap:35px;padding:0 10px}.place{display:flex;align-items:center;gap:12px;min-width:260px}.location-icon{color:#ebbc75;font-size:28px}.place strong{display:block;font-size:15px;font-weight:550}.place div>span{display:block;color:#8faaa4;font-size:11px;margin-top:5px}.route{width:250px;margin-left:auto}.route>div:first-child{display:flex;justify-content:space-between;font-size:10px;color:#a8b7b0;margin-bottom:8px}.route-track{height:3px;background:#33423f;border-radius:5px}.route-track span{display:block;width:25.6%;height:100%;background:#dcba7e;border-radius:5px;transition:width .5s}.traffic-label{display:flex;align-items:center;gap:8px;font-size:11px;color:#bbc6bd;min-width:170px;justify-content:flex-end}.world{position:relative;width:100%;height:calc(100dvh - 352px);min-height:390px;max-height:900px;border:1px solid #ffffff20;border-radius:16px;overflow:hidden;background:#727a79;isolation:isolate}#world{width:100%;height:100%;display:block;touch-action:pan-y;cursor:pointer}.world-top,.world-bottom{position:absolute;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.world-top{top:18px}.world-bottom{bottom:16px}.world-top button,.world-bottom button{pointer-events:auto}.scene-caption{display:flex;gap:10px;align-items:center;color:#fff7e7;background:#20302bd6;padding:10px 15px;border:1px solid #ffffff2e;border-radius:7px;font-size:11px;box-shadow:0 3px 10px #0001}.sun{color:#ffd185;font-size:17px}.caption-divider{opacity:.35}.glass-button{background:#20302be3;border:1px solid #fff3;border-radius:7px;padding:9px 13px;color:#fff9eb;font-size:11px;transition:background .2s}.glass-button:hover{background:#3b5041}.scene-actions{display:flex;gap:7px}.own-label{display:flex;gap:7px;align-items:center;background:#20302bd6;border:1px solid #fff2;color:#fff5dc;font-size:10px;border-radius:20px;padding:8px 12px}.own-label i{width:5px;height:5px;background:#efbd68;border-radius:50%}.dashboard{display:flex;align-items:center;gap:24px;min-height:144px;padding:22px 12px 14px}.metrics{display:flex;gap:25px;flex:1}.metric{display:flex;align-items:flex-start;gap:11px;flex:1;min-width:100px}.metric-icon{color:#c9d0bd;font-size:29px;line-height:1.5}.metric label{display:block;font-size:10px;letter-spacing:1px;color:#a1b1a6;margin-bottom:7px}.metric strong{font-size:28px;line-height:1.15;font-weight:550;display:block;font-variant-numeric:tabular-nums}.metric strong small{font-size:12px;font-weight:400;color:#b2bfb4;margin-left:4px}.metric-foot{display:block;font-size:9px;color:#839b8d;margin-top:9px}.meter{width:82px;height:4px;background:#344a42;border-radius:9px;margin-top:12px}.meter i{display:block;height:100%;width:72%;border-radius:9px;background:#d9bc7f}.inventory{flex:1.3;min-width:300px;padding:0 24px;border-left:1px solid #ffffff13;border-right:1px solid #ffffff13}.inventory-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:11px;color:#b3c1b4}.inventory-title b{font-size:10px;background:#2c4037;color:#d0ddc6;border-radius:4px;padding:3px 6px;margin-left:9px;font-weight:500}.text-button{background:none;color:#dfbc7a;padding:0;font-size:10px}.slots{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.slot{position:relative;border:1px solid #6f80604d;border-radius:6px;height:45px;background:#24332d;display:grid;place-items:center;font-size:25px;transition:border .2s,transform .2s}.slot:hover{border-color:#d5b272;transform:translateY(-2px)}.slot.empty{background:#1a2925;border-style:dashed;color:#657865;font-size:13px}.slot .slot-no{position:absolute;top:3px;left:5px;font-size:7px;color:#93a78d}.slot .qty{position:absolute;right:4px;bottom:2px;font-size:9px;color:#f6e3af}.service-buttons{display:flex;flex-direction:column;gap:8px;width:164px}.primary-button,.secondary-button{border-radius:7px;min-height:40px;padding:11px 17px;font-size:12px;font-weight:600;display:flex;justify-content:center;align-items:center;gap:8px}.primary-button{background:#e7bb73;color:#24362d;box-shadow:inset 0 1px #ffefa855}.primary-button:hover{background:#f3ce90}.secondary-button{border:1px solid #63785d;background:#293d32;color:#e2e6cf}.secondary-button:hover{background:#37503e}.new-dot{width:5px;height:5px;background:#5b7143;border-radius:50%;margin-left:2px}.footnote{display:flex;justify-content:space-between;font-size:9px;color:#7f958a;line-height:1.5;padding:0 12px 14px}.foot-divider{padding:0 9px}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#24382af5;z-index:9;color:#e8d7ab}.loader{width:32px;height:32px;border:2px solid #637656;border-top-color:#f3ce90;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.speech{position:absolute;left:49%;top:53%;transform:translate(-50%,-100%);padding:10px 15px;border-radius:9px;background:#fff7df;color:#354233;font-size:12px;font-weight:600;box-shadow:0 4px 16px #0003;pointer-events:none}.speech:after{content:"";position:absolute;bottom:-7px;left:50%;border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #fff7df}.event-card{position:absolute;left:22px;top:76px;background:#20302be8;border:1px solid #dbc08060;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;pointer-events:none;max-width:340px}.event-symbol{font-size:25px;color:#efc17a}.event-card small{display:block;color:#aebe9b;font-size:9px;margin-bottom:4px}.event-card strong{font-size:12px;font-weight:500}.event-card[hidden],.speech[hidden]{display:none}.toast{position:fixed;left:50%;bottom:35px;transform:translate(-50%,15px);opacity:0;background:#f4e7c9;color:#263c30;border:1px solid #cba86d;border-radius:9px;padding:13px 22px;font-size:12px;z-index:30;pointer-events:none;transition:.2s;box-shadow:0 6px 30px #0003}.toast.show{transform:translate(-50%,0);opacity:1}.dialog{position:fixed;border:1px solid #bbac8055;background:#20332b;color:#f3eddb;border-radius:18px;padding:28px;width:min(440px,calc(100vw - 32px));box-shadow:0 20px 100px #0006;max-height:90dvh;overflow:auto}.dialog::backdrop{background:#0d17159c;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:15px;top:12px;font-size:25px;background:none;color:#afbea9;line-height:1}.dialog-kicker{font-size:9px;letter-spacing:2px;color:#d7bb83;margin-bottom:20px}.ride-preview{height:170px;border:1px solid #adc59524;border-radius:10px;background:radial-gradient(ellipse at bottom,#4a6343,#273b31 70%);margin-bottom:22px;display:grid;place-items:center}.ride-preview canvas{max-width:100%;width:100%;height:160px;object-fit:contain;image-rendering:pixelated}.creator{display:flex;gap:12px;align-items:center}.avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#8c7648;color:#ffecb6;font-family:Georgia;font-size:20px}.creator h2{font-size:19px;margin:0 0 4px}.creator div>span{font-size:11px;color:#adbea4}.dialog p{font-size:12px;line-height:1.9;color:#bac8af;margin:18px 0}.ride-stats{display:flex;gap:55px;border-top:1px solid #b7cc9f24;padding-top:18px;margin:20px 0}.ride-stats small{display:block;font-size:10px;color:#9cb294;margin-bottom:6px}.ride-stats strong{font-size:21px;font-weight:500}.dialog-actions{display:flex;gap:9px}.dialog-actions button:first-child{flex:1.5}.dialog-actions button:last-child{flex:1}.dialog-hint{font-size:9px;color:#92a58a;line-height:1.6;display:block;margin-top:13px}.bag-items{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:20px 0}.bag-item{display:flex;align-items:center;gap:12px;background:#304537;border:1px solid #6f805844;border-radius:8px;padding:13px}.bag-item>span{font-size:28px}.bag-item small{display:block;color:#adbd9e;font-size:9px;margin-top:5px}.wallet{display:flex;justify-content:space-between;padding:15px 0;margin-bottom:13px;border-top:1px solid #6f805844;color:#dec48c}.dialog>h2{font-size:24px;margin:10px 0}.dialog>.primary-button{width:100%}.engine-illustration{text-align:center;color:#e3bd77;font-size:90px;line-height:1;margin:15px 0}.upgrade-compare{display:flex;align-items:center;justify-content:space-between;border:1px solid #829f6544;border-radius:9px;padding:17px;margin:20px 0}.upgrade-compare small{display:block;font-size:10px;color:#9bb290;margin-bottom:6px}.upgrade-compare strong{font-size:27px;font-weight:500}.upgrade-compare em{font-size:11px;font-style:normal}.upgrade-compare b{color:#a1b889;font-size:23px}.gold{color:#edc77d}@media(min-width:1600px){.dashboard{gap:40px;padding-top:26px}.metrics{gap:35px}.metric strong{font-size:34px}.slot{height:53px}.inventory{padding:0 35px}}@media(max-width:1050px){main{padding:0 16px}.header{padding:0 24px}.dashboard{gap:14px}.metrics{gap:12px}.metric{gap:6px;min-width:80px}.metric-icon{font-size:22px}.inventory{padding:0 12px;min-width:250px}.service-buttons{width:145px}.metric strong{font-size:24px}.metric-foot{font-size:8px}.slot{height:39px;font-size:22px}.world{height:calc(100dvh - 335px);min-height:360px}.route{width:190px}.journey-bar{gap:15px}.place{min-width:220px}.traffic-label{min-width:150px}}@media(max-width:760px){.header{height:68px;padding:0 16px}.brand-mark{font-size:35px}.brand{gap:8px}.brand strong{font-size:16px;letter-spacing:1px}.brand small{font-size:7px;letter-spacing:1.8px}.header-right{gap:14px}.demo-note{display:none}.icon-button{width:24px;height:24px}.journey-bar{height:70px;padding:0 2px}.place{min-width:0;flex:1}.place strong{font-size:12px}.place div>span{font-size:9px}.location-icon{font-size:23px}.route{width:145px}.traffic-label{display:none}.world{height:58vw;min-height:310px;max-height:500px;border-radius:12px}.world-top,.world-bottom{left:12px;right:12px}.world-top{top:12px}.scene-caption{padding:7px 9px;font-size:9px;gap:6px}.scene-caption [data-i18n="scene-tip"],.caption-divider{display:none}.glass-button{font-size:10px;padding:8px 10px}.world-bottom{bottom:12px}.own-label{font-size:8px;padding:6px 8px}.scene-actions{gap:5px}.dashboard{display:grid;grid-template-columns:1fr auto;gap:20px 12px;padding:21px 2px 14px}.metrics{grid-column:1/3;gap:15px}.metric{justify-content:flex-start;padding-left:5px}.metric+.metric{border-left:1px solid #ffffff13;padding-left:15px}.metric-icon{font-size:25px}.metric strong{font-size:27px}.metric label{font-size:9px}.metric-foot{font-size:8px}.inventory{border:0;padding:0;min-width:0}.inventory-title{margin-bottom:9px}.service-buttons{width:125px;gap:6px}.service-buttons button{font-size:10px;padding:8px;min-height:36px}.slots{gap:3px}.slot{height:35px;font-size:20px;border-radius:4px}.slot .slot-no{font-size:6px;left:3px}.slot .qty{font-size:7px}.footnote{padding:0 2px 16px;font-size:8px;gap:12px}.footnote>span:first-child{max-width:60%}.footnote>span:last-child{text-align:right}.event-card{top:56px;left:12px;padding:8px 11px;max-width:250px}.event-card strong{font-size:10px}.event-card small{font-size:8px}.speech{font-size:10px;max-width:200px;white-space:nowrap}.toast{max-width:90%;width:max-content;font-size:11px;bottom:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.loader{animation:none}}
/* A static painted backdrop stays on its own composited layer. */
.world{background-image:url('./assets/city.png');background-size:100% 100%;background-repeat:no-repeat}
@media(max-width:760px){.metric-foot{max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot{font-size:18px}}
/* The canvas now moves three background strips independently. */
.world{background-image:none;background-color:#5e6764}
.bag-dialog{width:min(570px,calc(100vw - 28px))}
.bag-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bag-item{display:block;padding:13px;background:#293f33;min-width:0;transition:border-color .15s}
.bag-item.is-locked{border-color:#dbb66f;background:#354737}
.bag-item-head{display:flex;gap:11px;align-items:center;margin-bottom:15px}
.bag-item-icon{font-size:29px;flex-shrink:0}
.bag-item-info{min-width:0}.bag-item-info strong{font-size:12px;display:block;font-weight:550}.bag-item-info small{font-size:9px;line-height:1.5;margin-top:5px}
.bag-item-actions{display:flex;gap:6px;justify-content:space-between}
.item-lock,.item-sell{font-size:10px;padding:7px 9px;border-radius:5px;min-height:30px}
.item-lock{background:#1c3027;border:1px solid #7e92715c;color:#c5d0af}.item-lock[aria-pressed="true"]{color:#f1d194;border-color:#c8a362}
.item-sell{background:#d7b679;color:#263e2e;flex:1}.item-sell:disabled{background:#52634f;color:#b2bc9d}
.lock-mark{position:absolute;right:3px;top:3px;font-size:8px;color:#f0c97f}.slot.locked{border-color:#d2b16c}
.bag-empty{grid-column:1/-1;padding:25px;text-align:center}
.demo-tools{padding:16px 0;margin-bottom:18px;border-top:1px solid #81936a44}.demo-tools>small{color:#aebe9f;font-size:9px;display:block;margin-bottom:9px}.demo-tools>div{display:flex;gap:8px}.demo-tools button{font-size:10px;flex:1;padding:10px 8px}
.service-buttons .secondary-button{font-size:10px}
@media(max-width:430px){.bag-item{padding:10px}.bag-item-actions{gap:4px}.item-lock,.item-sell{font-size:9px;padding:6px 5px}.bag-item-head{gap:7px}.bag-item-info strong{font-size:11px}.bag-item-info small{font-size:8px}}
.ride-stats{justify-content:space-between;gap:12px}.ride-stats>span{min-width:0}.ride-stats small{font-size:9px}
.dialog-actions button:first-child,.dialog-actions button:last-child{flex:1}
#dislike{background:#2b3b34;border-color:#9c99824d;color:#c9cabb}
#dislike[aria-pressed="true"]{background:#6f5a45;color:#fff1d3;border-color:#c5a879}
#like[aria-pressed="true"]{background:#f2cb85}
.collection-button{display:block;width:100%;min-height:35px;background:none;color:#acbba6;border-top:1px solid #b7cc9f24;padding:12px 0 0;margin-top:15px;font-size:11px}
.collection-button:hover{color:#eed099}

/* Illustrated loot and visible roadside maintenance. */
.slot .loot-icon{width:38px;height:38px;display:block;margin:auto}.bag-item-icon{width:64px;height:64px;flex:0 0 64px}.bag-item-head{align-items:center}.bag-items{gap:12px}.bag-item{padding:14px}.bag-item-info small{line-height:1.6}.engine-illustration canvas{width:150px;height:125px}.metric-foot{max-width:210px;white-space:normal;line-height:1.5}.service-buttons{gap:6px}.service-buttons button{min-height:34px}.slot{overflow:hidden}@media(max-width:760px){.slot .loot-icon{width:28px;height:28px}.bag-item-icon{width:48px;height:48px;flex-basis:48px}.bag-item{padding:10px}.bag-items{grid-template-columns:1fr}.metric-foot{max-width:105px;font-size:8px}}
@media(min-width:761px){.world{height:calc(100dvh - 390px)}} .bag-item-actions{flex-wrap:wrap}.bag-item-actions .item-sell{min-width:92px}

#price-list{max-height:58dvh;overflow:auto;padding-right:8px}.price-row{display:flex;align-items:center;gap:14px;border-bottom:1px solid #ffffff12;padding:10px 0}.price-row canvas{width:54px;height:54px;flex:0 0 54px}.price-row span{flex:1;font-size:13px}.price-row strong{color:#edc77d;font-size:14px;white-space:nowrap}

.range-value{display:block;color:#edd395;font-size:10px;margin-top:7px;white-space:nowrap}#tank-label{display:block;margin-top:3px}.metric .meter{margin-top:5px}@media(max-width:760px){.range-value{font-size:8px}}
