/* First selected art direction: an open road above an ivory / emerald control deck. */
body{background:#123c32}
.header{height:94px;background:#103b30;border-bottom:3px solid #d8b86e;padding:0 28px;gap:18px}
.brand strong{font-size:28px}.brand small{color:#e6c77b}.brand-mark{width:58px;height:58px}
.header-right{gap:12px}.header .demo-note{display:none}.rank-nav{margin:0 auto;gap:8px;flex-wrap:nowrap}.rank-nav button{min-height:46px;border-radius:15px!important;white-space:nowrap}
main{max-width:1920px;width:100%;padding:0 12px;margin:auto;position:relative}
.journey-bar{height:48px;color:#f0e5c2;gap:18px}.place{min-width:220px;gap:10px}.place strong{font-size:14px}.place div>span{display:none}.location-icon{width:28px;height:32px;border-radius:8px}.location-icon:after{font-size:16px}.route{width:290px;background:transparent;border:0;padding:4px}.route>div:first-child{color:#e2d6b5;font-size:10px;margin-bottom:5px}.route-track{height:4px}.traffic-label{color:#b9c9ad}.journey-bar .text-button{color:#eac77c}
.world{height:calc(100dvh - 416px);min-height:380px;max-height:1050px;border:2px solid #c7aa67;border-radius:13px 13px 4px 4px;box-shadow:none}
.world-top{top:16px}.scene-caption{font-size:11px}.scene-actions #pickup{opacity:.85}.world-bottom{bottom:12px}

#road-status{top:134px;right:18px}
.dashboard{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);grid-template-rows:142px 64px;gap:12px 18px;padding:16px 20px;margin:0 0 8px;border:3px double #bc9b57;border-radius:20px;background:#f0e2bd;box-shadow:inset 0 0 0 3px #fff3ce,0 5px 0 #877143;color:#fff2cd}
.dashboard:before,.dashboard:after{content:none}
.metrics{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr) minmax(0,.95fr);gap:0;grid-row:1;grid-column:1;border:2px solid #b79c5e;border-radius:15px;background:#123e32;overflow:hidden;min-width:0}
.metric{min-width:0!important;gap:8px;padding:12px!important;align-items:center;border:0!important}.metric>div{min-width:0;width:100%}.metric strong{font-size:35px;line-height:1.1;font-variant-numeric:tabular-nums}.metric strong small{font-size:13px;margin-left:4px}.metric label{font-size:12px;color:#ede5c7;letter-spacing:0}.metric .metric-foot{font-size:9px;line-height:1.3}.metric-icon{display:none}.metric:not(.speed) label:before{content:'';display:inline-block;width:20px;height:20px;vertical-align:middle;margin-right:7px;background:#edce7e;mask:url('./assets/icons/fuel-pump-fill.svg') center/contain no-repeat}.metric:last-child label:before{mask-image:url('./assets/icons/wrench-adjustable.svg')}
.metric.speed{width:auto;min-width:0;max-width:none;height:100%;padding:12px!important;background:#f7e8bf;border:0;border-radius:11px;box-shadow:inset 0 0 0 3px #d3ba80;align-items:center;text-align:left}
.speed label{color:#344736;font-size:12px;letter-spacing:1px;margin:0 0 7px}.speed strong{display:flex;align-items:baseline;gap:10px;width:100%;min-width:0;padding:9px 8px;background:#143e32;border:1px solid #ad9250;border-radius:8px;box-sizing:border-box;line-height:1;color:#f4d782;height:65px;align-items:center;overflow:hidden}.speed strong small{font-size:12px;flex:none;color:#ffedb3;margin:0}.speed #speed-value{font-size:64px;white-space:nowrap;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;font-weight:850;flex:none}.speed .metric-foot{max-width:100%;font-size:9px;margin-top:6px;color:#756843;text-align:center}
.meter{height:11px;max-width:none;margin-top:9px;border:1px solid #9daf71;box-shadow:inset 0 2px 3px #001e1a}.range-value{font-size:11px;color:#ffe4a1}.condition-meter{max-width:none}
.inventory{grid-column:2;grid-row:1;padding:13px 16px;min-width:0;border:2px solid #b79c5e;border-radius:15px;background:#123e32;overflow:hidden}.inventory-title{font-size:16px;margin-bottom:12px}.inventory-title b{background:none;border:0;font-size:14px;color:#f5d88a;margin-left:8px}.slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.slot{width:100%;height:66px;border-radius:9px;min-width:0;overflow:hidden}.slot .loot-icon{width:100%!important;height:100%!important;max-width:58px;max-height:58px;object-fit:contain;padding:5px;box-sizing:border-box}.slot.empty{background:#254c3e;border-color:#81956a}.slot .qty{font-size:10px}.slot .slot-no{font-size:8px}
.service-buttons{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:auto;grid-column:1;grid-row:2}.service-buttons #refuel{grid-column:1;grid-row:1;background:#b83d23;border-color:#efbb71}.service-buttons #repair{grid-column:2;grid-row:1;background:#194b39}.service-buttons button,.deck-navigation button{height:64px;min-height:64px;font-size:19px;font-weight:800;border:3px double #d8b773;border-radius:16px;box-shadow:inset 0 2px #ffffff4d,0 3px 0 #9b7e44;padding:8px 14px;white-space:normal}
.deck-navigation{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.deck-navigation button{display:flex;align-items:center;justify-content:center;gap:10px;background:#efd18a;color:#233e30;font-size:20px}.deck-navigation button:before{content:'';width:28px;height:30px;background:currentColor;mask:url('./assets/icons/backpack-fill.svg') center/contain no-repeat;flex:none}.deck-navigation #change-ride:before{mask-image:url('./assets/icons/house-door-fill.svg')}.deck-navigation button:hover{background:#ffe4a5}.dashboard button:focus-visible{outline:3px solid #fff2af;outline-offset:3px}.footnote{color:#a7b69b;padding:0 4px 8px}
@media(max-width:1150px){.header{padding:0 16px;gap:8px}.brand strong{font-size:22px}.brand small{font-size:7px}.brand-mark{width:42px;height:42px}.rank-nav{gap:4px}.rank-nav button{padding:8px!important;font-size:11px!important}.main-wallet{min-width:100px;padding:7px 10px}.main-wallet strong{font-size:18px}.header-right{gap:6px}.dashboard{gap:10px;padding:12px;grid-template-rows:136px 60px}.metric{padding:9px!important}.metric strong{font-size:30px}.slot{height:55px}.service-buttons button,.deck-navigation button{height:60px;min-height:60px;font-size:16px}.world{height:calc(100dvh - 396px)}.range-value{font-size:9px}}
@media(max-width:820px){.header{height:auto;min-height:108px;flex-wrap:wrap;padding:10px 14px}.rank-nav{order:3;width:100%}.rank-nav button{flex:1;min-height:34px}.brand strong{font-size:20px}.header-right{margin-left:auto}.journey-bar{height:50px}.place{min-width:0}.route{width:180px}.traffic-label{display:none}.world{height:52vh;min-height:330px}.dashboard{grid-template-columns:1fr;grid-template-rows:142px 60px 125px 60px;padding:12px}.metrics{grid-column:1;grid-row:1}.service-buttons{grid-column:1;grid-row:2}.inventory{grid-column:1;grid-row:3}.deck-navigation{grid-column:1;grid-row:4}.slot{height:60px}.metric strong{font-size:32px}.range-value{font-size:11px}.footnote{font-size:8px}.scene-caption [data-i18n=scene-tip]{display:none}}

@media(min-width:821px){.world{min-height:260px;height:calc(100dvh - 432px)}}
@media(min-width:821px) and (max-height:780px){.header{height:76px}.journey-bar{height:42px}.world{height:calc(100dvh - 370px);min-height:240px}.dashboard{grid-template-rows:120px 54px;padding:10px 16px;gap:10px}.metric.speed{padding:8px!important}.speed strong{height:57px}.inventory{padding:10px 14px}.inventory-title{margin-bottom:8px}.slot{height:54px}.service-buttons button,.deck-navigation button{height:54px;min-height:54px;font-size:17px}.metric strong{font-size:30px}.metric label{font-size:11px}.range-value{font-size:10px}}

.dashboard .service-buttons .secondary-button{font-size:20px}.dashboard .service-buttons .secondary-button:before{content:'';display:inline-block;width:28px;height:30px;background:currentColor;mask:url('./assets/icons/fuel-pump-fill.svg') center/contain no-repeat;flex:none;margin-right:8px}.dashboard .service-buttons #repair:before{mask-image:url('./assets/icons/wrench-adjustable.svg')}@media(max-width:1150px){.dashboard .service-buttons .secondary-button{font-size:16px}}