*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0d1117;color:#f4f1ea;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
#loading{position:fixed;inset:0;display:grid;place-content:center;text-align:center;font:900 34px system-ui;letter-spacing:.08em;color:#ffc83d;background:#0d1117;z-index:50}
#loading small{font:500 14px system-ui;color:#9aa7b3;letter-spacing:.2em}
button{font:inherit;color:inherit;cursor:pointer;border:0}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;display:none}
body[data-state=play] #hud{display:block}
.top{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px}
.chip{background:rgba(10,14,18,.78);backdrop-filter:blur(6px);border-left:3px solid #ffc83d;padding:7px 14px;min-width:110px}
.chip:nth-child(2){border-color:#3ee6c2}.chip.obj{flex:1;border-color:#ff6b4a;min-width:0}
.chip label,.info label{display:block;font-size:10px;letter-spacing:.16em;color:#ffc83d;font-weight:700}
.chip b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#pauseBtn{pointer-events:auto;position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:40px;height:40px;border-radius:50%;background:rgba(10,14,18,.32);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:.75}
#pauseBtn svg{width:18px;height:18px;fill:#fff}
body:not(.clean) .top{right:max(62px,calc(env(safe-area-inset-right) + 62px))}
body.clean:not(.touch) #pauseBtn{display:none}
body.clean .top,body.clean .info,body.clean #speedo,body.clean #minimap{display:none!important}
.info{position:absolute;left:250px;bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:22px;background:rgba(10,14,18,.78);padding:10px 18px}
.info b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.info b.warn{color:#ff6b4a}
#speedo{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));width:220px;height:220px}
#minimap{position:absolute;right:max(14px,env(safe-area-inset-right));top:76px;width:180px;height:180px;background:rgba(10,14,18,.55);border:1px solid rgba(255,255,255,.12);border-radius:50%}
#toast{position:absolute;top:max(18px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-14px);background:rgba(10,14,18,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:700;font-size:14px;letter-spacing:.03em;padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .45s,transform .45s;max-width:min(80vw,560px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#toast::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffc83d;margin-right:9px;vertical-align:1px;box-shadow:0 0 10px #ffc83d}
#toast.warn::before{background:#ff5a45;box-shadow:0 0 10px #ff5a45}#toast.good::before{background:#3ee6c2;box-shadow:0 0 10px #3ee6c2}
#toast.show{opacity:1;transform:translate(-50%,0)}
body:not(.clean) #toast{top:84px}
#cd{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font:900 120px system-ui;color:#ffc83d;text-shadow:0 6px 30px rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
/* touch — controles translúcidos */
#touch{display:none}
body.touch #touch{display:block}
#touch button{pointer-events:auto;position:absolute;display:grid;place-items:center;align-content:center;gap:4px;color:rgba(255,255,255,.92);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.16),rgba(255,255,255,.04) 70%);border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 6px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25);touch-action:none;transition:transform .08s,background .08s,border-color .08s;opacity:.82}
#touch button svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#touch button span{font-size:9px;font-weight:800;letter-spacing:.16em;opacity:.8}
#touch button.on{transform:scale(.93);background:radial-gradient(circle at 50% 35%,rgba(255,200,61,.55),rgba(255,200,61,.18) 70%);border-color:#ffc83d;opacity:1}
#touch .tl,#touch .tr{bottom:max(22px,env(safe-area-inset-bottom));width:88px;height:88px;border-radius:50%}
#touch .tl svg,#touch .tr svg{width:38px;height:38px}
#touch .tl{left:max(20px,env(safe-area-inset-left))}#touch .tr{left:calc(max(20px,env(safe-area-inset-left)) + 102px)}
#touch .tg,#touch .tb{bottom:max(22px,env(safe-area-inset-bottom));border-radius:22px}
#touch .tg{right:max(20px,env(safe-area-inset-right));width:84px;height:132px;border-color:rgba(110,240,170,.45);background:radial-gradient(circle at 50% 30%,rgba(80,220,140,.28),rgba(80,220,140,.06) 75%)}
#touch .tg svg{width:26px;height:44px}
#touch .tb{right:calc(max(20px,env(safe-area-inset-right)) + 98px);width:78px;height:100px;border-color:rgba(255,120,100,.45);background:radial-gradient(circle at 50% 30%,rgba(255,90,70,.26),rgba(255,90,70,.06) 75%)}
#touch .tb svg{width:24px;height:34px}
#touch .th,#touch .tc{width:44px;height:44px;border-radius:50%;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 146px);opacity:.55}
#touch .th svg,#touch .tc svg{width:20px;height:20px;stroke-width:2}
#touch .th{right:max(20px,env(safe-area-inset-right))}#touch .tc{right:calc(max(20px,env(safe-area-inset-right)) + 54px)}
@media (max-height:400px){#touch .tg{height:116px}#touch .th,#touch .tc{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 128px)}}
body.touch #speedo{left:50%;transform:translateX(-50%);width:150px;height:150px;bottom:6px}
body.touch .info{left:50%;transform:translateX(-50%);bottom:auto;top:70px;padding:6px 12px;gap:14px}
body.touch .info b{font-size:15px}
body.touch #minimap{width:100px;height:100px;top:58px;right:12px}
body.touch #toast{font-size:13px;padding:7px 15px}
body.touch .chip{min-width:0;padding:5px 10px}.body.touch .chip b{font-size:13px}
@media (max-height:430px){body.touch .chip:first-child{display:none}}
#rot{display:none}
body.portrait #rot{display:block;position:fixed;top:40%;left:50%;transform:translateX(-50%);background:rgba(10,14,18,.85);padding:12px 18px;font-weight:700;z-index:30;pointer-events:none;border-left:3px solid #ffc83d}
/* painéis */
#ui{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));pointer-events:none;overflow:auto}
#ui:empty{display:none}
.panel{pointer-events:auto;background:linear-gradient(135deg,rgba(10,14,18,.86),rgba(10,14,18,.66));backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);padding:26px 28px;max-width:760px;width:100%;max-height:100%;overflow:auto;animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(12px)}}
.panel.small{max-width:420px;margin:auto;display:flex;flex-direction:column;gap:10px}
.menu{max-width:470px;background:linear-gradient(90deg,rgba(10,14,18,.9),rgba(10,14,18,.55) 80%,rgba(10,14,18,0))}
.brand .logo{line-height:.86;font-weight:900;letter-spacing:-.02em}
.brand .logo span{display:block;font-size:52px;color:#f4f1ea}
.brand .logo b{display:block;font-size:68px;color:#ffc83d;padding-left:28px;text-shadow:4px 4px 0 #b3261e}
.tag{color:#c9c3b6;margin:12px 0 22px;font-size:15px}
button.big{display:block;width:100%;text-align:left;padding:14px 18px 12px 52px;margin-bottom:10px;font-size:22px;font-weight:900;letter-spacing:.06em;position:relative;transition:transform .15s}
button.big:hover{transform:translateX(6px)}
button.big small{position:absolute;left:18px;top:19px;font-size:12px;opacity:.7}
button.big em{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.14em;opacity:.75;margin-top:2px}
.gold{background:#ffc83d;color:#17140c}
.red{background:#b3261e;color:#fff}
.panel button:not(.big){padding:11px 16px;font-weight:800;letter-spacing:.08em;font-size:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.panel button.gold{background:#ffc83d;color:#17140c;border-color:#ffc83d}
.panel button:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:10px;margin-top:12px}.row button{flex:1}
.stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:12px;color:#c9c3b6;letter-spacing:.06em}
.stats span:first-child{color:#3ee6c2;font-weight:800}
.credit{margin-top:12px;font-size:11px;color:#7f8a95;letter-spacing:.08em}
h2{font-size:26px;font-weight:900;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
h2 span{font-size:15px;color:#ffc83d}
h3{margin:18px 0 10px;font-size:14px;letter-spacing:.12em;color:#ffc83d}
.sub{color:#aeb6bf;font-size:13px;margin:6px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:14px;display:flex;flex-direction:column;gap:8px}
.cg{font-weight:900;font-size:18px;color:#fff;border-left:5px solid var(--c);padding-left:9px}
.cg i{font-style:normal;font-size:10px;background:#ff6b4a;color:#111;padding:2px 6px;vertical-align:middle;letter-spacing:.1em}
.rt{font-size:14px;color:#d8d2c5}.kv{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:#9aa7b3}
.pay{font-size:24px;font-weight:900;color:#3ee6c2}
.trucks,.ups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.tk,.up{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:14px;display:flex;flex-direction:column;gap:7px}
.tk.cur{border-color:#ffc83d}.tk p,.up p{font-size:12px;color:#aeb6bf;flex:1}
.sw{height:8px;width:56px}
.bars{display:grid;grid-template-columns:80px 1fr;gap:4px 8px;align-items:center;font-size:11px;color:#9aa7b3}
.bars i{height:6px;background:linear-gradient(90deg,#3ee6c2 var(--w),rgba(255,255,255,.1) var(--w))}
.lv{display:flex;gap:5px}.lv i{width:28px;height:7px;background:rgba(255,255,255,.14)}.lv i.on{background:#3ee6c2}
.opt span small{display:block;font-size:11px;color:#8d98a3;font-weight:500;margin-top:2px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.seg{display:flex;gap:6px}
.result table{width:100%;border-collapse:collapse;margin:6px 0 8px}
.result td{padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.result td:last-child{text-align:right;font-weight:800}
.result tr:last-child td{color:#3ee6c2;font-size:17px}
@media (max-width:700px),(max-height:480px){
 .brand .logo span{font-size:34px}.brand .logo b{font-size:46px}.tag{margin:8px 0 12px;font-size:13px}
 button.big{font-size:18px;padding:10px 14px 9px 46px}button.big small{top:14px}
 .panel{padding:16px 18px}h2{font-size:20px}.cards{grid-template-columns:repeat(3,1fr)}.card{padding:10px}.pay{font-size:19px}
 .trucks,.ups{grid-template-columns:repeat(3,1fr)}.tk p{display:none}
}
/* v3 — quadrado de localização (sempre visível) */
#mmbox{pointer-events:auto;position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:172px;border-radius:16px;overflow:hidden;background:rgba(10,14,18,.45);border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 28px rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;opacity:.94}
#mm2{display:block;width:172px;height:172px}
#mmfoot{display:flex;align-items:center;gap:6px;padding:5px 8px 6px;font-size:10.5px;line-height:1.2;background:rgba(10,14,18,.62)}
#loctxt{flex:1;font-weight:700;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#mmspd{font-size:11px;color:#ffc83d;white-space:nowrap;font-variant-numeric:tabular-nums}
body.clean #mmbox{display:block!important}
#pauseBtn{left:max(12px,env(safe-area-inset-left));right:auto}
body:not(.clean) .top{left:max(62px,calc(env(safe-area-inset-left) + 62px));right:max(196px,calc(env(safe-area-inset-right) + 196px))}
body.touch #mmbox{width:132px;border-radius:14px}body.touch #mm2{width:132px;height:132px}body.touch #mmfoot{font-size:9.5px;padding:4px 6px}
@media (max-height:420px){body.touch #mmbox{width:118px}body.touch #mm2{width:118px;height:118px}}
body.touch #touch .th,body.touch #touch .tc{bottom:calc(max(22px,env(safe-area-inset-bottom)) + 146px)}
/* mapa em tela cheia */
#fullmap{position:fixed;inset:0;z-index:20;display:none;background:#0d1117}
#fullmap.on{display:block}
#fmcanvas{width:100%;height:100%;display:block;touch-action:none}
#fminfo{position:absolute;left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));background:rgba(10,14,18,.78);border-left:3px solid #ffc83d;padding:9px 14px;max-width:min(70vw,520px);backdrop-filter:blur(6px)}
#fminfo b{display:block;font-size:15px}#fminfo span{display:block;font-size:12px;color:#c9c3b6;margin-top:2px}
#fmbtns{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:8px}
#fmbtns button{width:46px;height:46px;border-radius:50%;background:rgba(10,14,18,.75);border:1px solid rgba(255,255,255,.25);font-size:22px;font-weight:800;color:#fff}
#fmbtns #fmclose{background:#ffc83d;color:#17140c;border-color:#ffc83d}
#fmleg{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:6px 14px;background:rgba(10,14,18,.7);padding:8px 12px;font-size:11px;color:#ddd}
#fmleg i{display:inline-block;width:18px;height:4px;margin-right:6px;vertical-align:middle;border-radius:2px}
#fmleg .lr{background:#ffd678}#fmleg .lroute{background:#ffc83d;height:6px}#fmleg .lcap{width:9px;height:9px;border-radius:50%;background:#ffd678}#fmleg .lriv{background:#4696d2}
/* mapa do Brasil no menu */
#menumap{position:fixed;right:max(3vw,env(safe-area-inset-right));top:50%;transform:translateY(-50%);height:min(84vh,820px);width:auto;aspect-ratio:900/880;display:none;pointer-events:none;opacity:.95;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
body[data-state=menu] #menumap{display:block}
@media (max-width:760px){#menumap{opacity:.35;right:-20vw}}
.via{font-size:11px;color:#ffc83d;letter-spacing:.06em;font-weight:700}
.rt small{color:#9aa7b3;font-size:11px}
/* garagem v3 */
.garage2{max-width:330px;align-self:stretch;display:flex;flex-direction:column;gap:8px;padding:18px}
.tlist{display:flex;flex-direction:column;gap:6px;overflow:auto;flex:1;min-height:0}
.panel button.ti{display:grid;grid-template-columns:14px 1fr auto;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:8px 10px;letter-spacing:0;font-size:13px}
.ti i{grid-row:1/3;width:14px;height:100%;min-height:28px;border-radius:3px}
.ti b{font-size:13px}.ti small{grid-column:2;font-size:10.5px;color:#9aa7b3;font-weight:600}.ti em{grid-row:1/3;grid-column:3;align-self:center;font-style:normal;font-size:11px;color:#3ee6c2}
.panel button.ti.sel{border-color:#ffc83d;background:rgba(255,200,61,.14)}.ti.cur em{color:#ffc83d}
.gdet{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));max-width:360px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.gdet h3{margin:0;font-size:20px;color:#fff;letter-spacing:.02em}.gdet .gt{font-size:12px;color:#aeb6bf}
.gdet .kv{display:flex;gap:12px;font-size:12px;color:#ffc83d;font-weight:700}
.paints{display:flex;flex-wrap:wrap;gap:6px}
.panel button.pt{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.3)}.panel button.pt.on{border-color:#ffc83d;box-shadow:0 0 0 2px #ffc83d}
.gdet .ups{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0}
.gdet .up{padding:7px;gap:4px}.gdet .up b{font-size:12px}.gdet .up button{padding:6px 4px;font-size:11px}
body[data-state=garage] #ui{justify-content:flex-start;align-items:stretch}
@media (max-height:480px){.garage2{max-width:250px;padding:10px}.garage2 h2{font-size:17px}.panel button.ti{padding:5px 8px}.ti small{display:none}.gdet{max-width:300px;padding:10px 12px;gap:5px}.gdet .gt{display:none}.gdet h3{font-size:16px}.panel button.pt{width:20px;height:20px}}

body.race #mmbox{display:none!important}

/* v3.1 câmbio: marcha + giro sempre visíveis; botões +/− no celular quando manual */
#gearbox{pointer-events:auto;position:absolute;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;padding:5px 10px 5px 12px;border-radius:14px;background:rgba(10,14,18,.5);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-family:system-ui,sans-serif;user-select:none}
#gearbox b{font:900 26px/1 system-ui,sans-serif;color:#ffc83d;min-width:20px;text-align:center}
#gearbox .gbr{display:flex;flex-direction:column;gap:3px;width:92px}
#gearbox .gbbar{height:6px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
#gearbox .gbbar i{display:block;height:100%;width:0;background:#3ee6c2;border-radius:3px}
#gearbox .gbbar i.red{background:#ff4d3d}#gearbox .gbbar i.low{background:#ffb02e}
#gearbox span{font-size:10px;font-weight:700;opacity:.8;letter-spacing:.04em}
#gearbox em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.12em;padding:4px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.3);cursor:pointer;opacity:.85}
body.man #gearbox em{color:#ffc83d;border-color:#ffc83d}
body:not(.clean):not(.touch) #gearbox{left:262px;transform:none}
body.touch:not(.clean) #gearbox{bottom:162px}
body.touch #gearbox{bottom:max(8px,env(safe-area-inset-bottom));padding:4px 8px;gap:6px}
body.touch #gearbox b{font-size:22px}body.touch #gearbox .gbr{width:74px}
body.race #gearbox em{display:none}
body[data-state="map"] #gearbox{display:none}
#touch .gu,#touch .gd{display:none!important;right:calc(max(20px,env(safe-area-inset-right)) + 188px);width:56px;height:54px;border-radius:16px;font:800 30px/1 system-ui,sans-serif;color:#ffc83d!important;border-color:rgba(255,200,61,.5)!important}
#touch .gu{bottom:calc(max(22px,env(safe-area-inset-bottom)) + 64px)}#touch .gd{bottom:max(22px,env(safe-area-inset-bottom))}
body.man.touch #touch .gu,body.man.touch #touch .gd{display:grid!important}
@media (max-height:400px){#touch .gu{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 60px)}}