*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#a9c7d2;color:#fff;font-family:Inter,system-ui,Arial}#world{position:fixed;inset:0}canvas{display:block}.topbar{position:fixed;z-index:2;top:0;left:0;right:0;height:62px;padding:9px 14px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#07111de8,transparent)}.brand{display:flex;align-items:center;gap:9px;font-size:14px;letter-spacing:1px}.brand-mark{font-size:28px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#a8c7d9}.top-actions{display:flex;gap:7px}.small-btn,.right-tools button{border:1px solid #ffffff55;background:#0c1a2bce;color:#fff;border-radius:11px;padding:9px 11px;font-weight:700}.hud{position:fixed;z-index:2;top:72px;left:12px;right:12px;display:flex;gap:8px;pointer-events:none}.hud-card{background:#0b1928d9;border:1px solid #ffffff30;border-radius:12px;padding:8px 12px;min-width:78px;backdrop-filter:blur(8px)}.hud-card small{display:block;font-size:9px;color:#b6c9d7}.hud-card strong{display:block;font-size:24px;line-height:1.2}.hud-card.mission{flex:1;max-width:310px}.hud-card.mission strong{font-size:14px;margin:3px 0}.right-tools{position:fixed;z-index:3;right:12px;top:145px;display:grid;gap:8px}.right-tools button{font-size:11px}.controls{position:fixed;z-index:3;bottom:17px;left:0;right:0;display:flex;justify-content:space-between;align-items:end;padding:0 17px;pointer-events:none}.steer,.pedals{display:flex;gap:10px;pointer-events:auto}.controls button{touch-action:none;user-select:none;border:2px solid #ffffffa0;color:#fff;background:#0c1a2bd9;font-weight:900;box-shadow:0 4px 15px #0005}.steer button{width:62px;height:62px;border-radius:50%;font-size:22px}.pedals button{width:74px;height:76px;border-radius:17px;font-size:11px}.pedals .gas{background:#087b54e8}.pedals .brake{background:#9c302de8}.rule-panel{position:fixed;z-index:2;bottom:105px;left:50%;transform:translateX(-50%);background:#0c1a2bdc;border:1px solid #ffffff35;border-radius:12px;padding:9px 13px;width:min(90%,420px);font-size:12px;text-align:center}.rule-panel b{display:block;color:#70d8ff;font-size:9px;letter-spacing:1px;margin-bottom:3px}.toast{position:fixed;z-index:5;left:50%;top:43%;transform:translate(-50%,-50%);background:#081827ed;border:1px solid #ffffff55;border-radius:13px;padding:13px 18px;text-align:center;font-weight:800;opacity:0;transition:opacity .2s;pointer-events:none;max-width:85%}.toast.show{opacity:1}.overlay{position:fixed;z-index:10;inset:0;background:#06101dcc;display:grid;place-items:center;padding:18px}.hidden{display:none!important}.modal{position:relative;width:min(100%,440px);background:linear-gradient(145deg,#142b40,#0b1728);border:1px solid #ffffff35;border-radius:22px;padding:25px;box-shadow:0 20px 80px #0008}.modal h1{font-size:30px;line-height:1.05;margin:4px 0 12px}.modal p{color:#c6d6e3;font-size:13px;line-height:1.55}.hero-icon{font-size:42px}.eyebrow{color:#72d5ff!important;letter-spacing:2px;font-weight:800;font-size:10px!important}.modal label{display:block;font-size:12px;color:#b9cbd9;margin:16px 0}.modal input{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #ffffff45;background:#081522;color:#fff;border-radius:10px;font-size:15px}.choice-row{display:flex;gap:9px}.primary,.secondary{border:0;border-radius:11px;padding:13px 15px;font-weight:800;flex:1;color:#fff}.primary{background:#0879cf}.secondary{background:#34495d}.full{display:block;width:100%;margin-top:10px}.fine{font-size:10px!important;color:#94a9b9!important;margin-bottom:0}.close{position:absolute;right:14px;top:12px;background:#263b50;color:#fff;border:0;border-radius:8px;padding:7px}.map-preview{height:180px;border-radius:12px;background:repeating-linear-gradient(0deg,#42534c 0 26px,#c3bda7 27px 34px,#42534c 35px 62px);display:flex;flex-direction:column;justify-content:space-around;align-items:center;color:#10202b;font-weight:900;text-shadow:0 1px #fff;padding:12px}@media(min-width:800px){.controls{padding:0 36px 22px}.steer button{width:72px;height:72px}.pedals button{width:88px;height:86px}.hud{left:24px;top:82px}.right-tools{right:24px}}


.city-status{position:fixed;left:12px;bottom:112px;z-index:8;max-width:min(460px,calc(100vw - 24px));padding:8px 11px;border:1px solid #ffffff26;border-radius:10px;background:#101c2cdb;color:#eaf3fa;font:12px/1.4 system-ui;pointer-events:none;backdrop-filter:blur(8px)}
@media(max-width:700px){.city-status{bottom:126px;font-size:10px;max-width:calc(100vw - 24px)}}

/* Phase 5 traffic simulation status inherits the city status panel. */

.account-box{margin-top:16px;padding-top:12px;border-top:1px solid #ffffff26;text-align:left}
.account-box h3{margin:0 0 9px;font-size:14px;color:#e9f4ff}
.account-box input,.modal input{box-sizing:border-box;width:100%;margin:5px 0;padding:11px 12px;border:1px solid #ffffff35;border-radius:9px;background:#0d1a29;color:#fff;font:inherit}
.account-box .choice-row{margin-top:7px}
.room-list{display:grid;gap:8px;margin-top:12px;max-height:220px;overflow:auto}
.room-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid #ffffff26;border-radius:9px;background:#15263a;color:#eef5ff;font-size:13px}
.room-item button{padding:7px 10px}

.fail-reason{font-size:18px;line-height:1.7;color:#fff;background:#6d2020;padding:12px;border-radius:10px}
.hud-card.speed b{font-weight:800;color:#ffdf78}

.reward-ad-panel{margin:12px 0;padding:12px;border:1px solid #6fc8ff66;border-radius:14px;background:#071522}.ad-label{font-size:10px;letter-spacing:2px;color:#70d8ff;font-weight:900}.reward-ad-creative{width:100%;max-height:190px;min-height:80px;display:grid;place-items:center;overflow:hidden;margin:8px 0;border-radius:10px;background:#101f30}.reward-ad-creative img,.reward-ad-creative video{display:block;max-width:100%;max-height:190px;object-fit:contain}.ad-countdown{font-weight:900;color:#ffe18a!important;text-align:center}.modal{max-height:92vh;overflow:auto}
.ad-cta{display:inline-block;margin:4px 0 8px;color:#8edbff;font-weight:800;font-size:12px;text-decoration:none}

.wallet-home{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;padding:10px 12px;border:1px solid #70d8ff55;border-radius:12px;background:#071522;color:#8fdcff;font-size:10px;font-weight:900;letter-spacing:1px}
.wallet-home strong{font-size:20px;color:#fff;letter-spacing:0}
.wallet-home span{font-size:9px;color:#9fb5c5;font-weight:500;letter-spacing:0}
.garage-modal{width:min(100%,620px)}
.garage-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.garage-card{display:grid;gap:5px;padding:12px;border:1px solid #ffffff2d;border-radius:12px;background:#0a1b2c}
.garage-card strong{font-size:13px;color:#fff}
.garage-card small{font-size:10px;color:#9eb4c5}
.garage-card span{font-size:13px;font-weight:900;color:#ffdf83}
.garage-card button{padding:8px;border:0;border-radius:8px;color:#fff;font-weight:800}
.garage-card button:disabled{opacity:.6}
@media(max-width:520px){.garage-list{grid-template-columns:1fr}.garage-modal{padding:18px}.right-tools{top:150px;right:7px}.right-tools button{padding:7px 8px;font-size:10px}}

/* ---------- v3: device-aware layout, safe areas and PWA install ---------- */
.topbar{padding-top:calc(9px + env(safe-area-inset-top,0px));height:auto;min-height:62px}
.hud{top:calc(72px + env(safe-area-inset-top,0px))}
.right-tools{top:calc(145px + env(safe-area-inset-top,0px))}
.controls{padding-bottom:env(safe-area-inset-bottom,0px)}
.city-status{bottom:calc(112px + env(safe-area-inset-bottom,0px))}

/* Phones: stack the mission card under the speed and wallet cards so nothing overlaps. */
@media(max-width:700px){
  .hud{flex-wrap:wrap;gap:6px}
  .hud-card{min-width:0;padding:6px 9px}
  .hud-card strong{font-size:20px}
  .hud-card.speed,.hud-card.score{flex:1}
  .hud-card.mission{flex-basis:100%;max-width:none;order:3}
  .brand small{display:none}
  .small-btn{padding:7px 8px;font-size:11px}
}
@media(max-width:380px){
  .brand span:first-child{display:none}
  .top-actions .small-btn:first-child{display:none}
}

/* Low-quality devices (phones, low-memory laptops): blur effects are costly, so drop them. */
html[data-quality="low"] .hud-card,
html[data-quality="low"] .city-status,
html[data-quality="low"] .small-btn,
html[data-quality="low"] .topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-quality="low"] .topbar{background:#07111df0}

/* Landscape phones: short screen, so shrink the HUD and keep the tools on the right edge. */
@media(max-height:500px) and (orientation:landscape){
  .topbar{min-height:48px;padding-bottom:4px}
  .hud{top:calc(52px + env(safe-area-inset-top,0px));left:8px;right:auto}
  .hud-card{padding:4px 8px;min-width:0}
  .hud-card strong{font-size:18px}
  .hud-card.mission{max-width:220px}
  .right-tools{top:calc(52px + env(safe-area-inset-top,0px));right:8px;gap:5px}
  .right-tools button{padding:5px 7px;font-size:10px}
  .steer button{width:56px;height:56px}
  .pedals button{width:66px;height:64px}
  .modal{padding:16px;max-height:96vh}
  .modal h1{font-size:24px}
}

.wheel{width:132px;height:132px;touch-action:none;user-select:none;pointer-events:auto;border-radius:50%;cursor:grab}.wheel svg{width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 4px 10px #0008)}
.gears{display:grid;gap:6px;pointer-events:auto;align-self:end}.controls .gears button{width:46px;height:46px;border-radius:12px;font-size:16px}.controls .gears button.on{background:#0879cf;border-color:#fff}
.map-overlay{padding:0;background:#000}.map-overlay iframe{width:100%;height:100%;border:0;display:block}#mapBack{position:absolute;right:12px;bottom:34px;flex:none;padding:12px 18px;box-shadow:0 4px 18px #0008}
@media(max-height:500px) and (orientation:landscape){.wheel{width:96px;height:96px}.controls .gears button{width:38px;height:38px}}

.lv-modal{width:min(100%,520px);max-height:88vh;overflow:auto}.lv-list{display:grid;gap:8px;margin-top:10px}.lv-card{display:flex;align-items:center;gap:10px;background:#0b1928;border:1px solid #ffffff2a;border-radius:13px;padding:10px 12px}.lv-card.locked{opacity:.55}
.lv-no{width:30px;height:30px;border-radius:50%;background:#0879cf;display:grid;place-items:center;font-weight:900;flex:none}.lv-main{flex:1;min-width:0}.lv-main b{display:block;font-size:14px}.lv-main small{color:#a8c0d1;font-size:11px}.lv-card button{flex:none;padding:9px 12px;font-size:12px}
.br-body{max-height:48vh;overflow:auto;color:#d6e4ee;font-size:14px;line-height:1.6}.br-body ul{padding-left:20px;margin:6px 0}.dn-rows{display:grid;gap:6px;margin:12px 0}.dn-rows div{display:flex;justify-content:space-between;background:#0b1928;padding:9px 12px;border-radius:10px}.dn-rows .tot{background:#087b54;font-size:17px}

/* Garage 3D preview (Phase 6) */
.garage-preview{width:100%;height:220px;display:block;border-radius:12px;touch-action:none;cursor:grab;background:radial-gradient(circle at 50% 35%,#2e4a63 0%,#131c26 75%);margin:8px 0 2px}
.garage-preview:active{cursor:grabbing}

/* Destination arrow (Phase 8) */
.nav-box{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:6px}
.nav-arrow{width:46px;height:46px;line-height:46px;text-align:center;font-size:30px;color:#72d5ff;transition:transform .25s linear;text-shadow:0 0 10px #0879cf}