:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#020407; touch-action:none; }
body { position:fixed; inset:0; }
#game, #game canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 70% 15%,rgba(255,76,44,.17),transparent 34%),linear-gradient(135deg,rgba(2,5,9,.98),rgba(4,10,15,.93)); backdrop-filter:blur(16px); }
.boot-card { width:min(640px,92vw); text-align:left; }
.eyebrow { font-size:11px; letter-spacing:.28em; opacity:.62; margin-bottom:13px; }
h1 { margin:0; line-height:.78; font-size:clamp(58px,11vw,112px); letter-spacing:-.075em; font-style:italic; text-transform:uppercase; }
h1 span { color:#ff5a35; text-shadow:0 0 35px rgba(255,90,53,.35); }
.boot-card p { font-weight:700; opacity:.78; margin:26px 0 9px; letter-spacing:.04em; }
.load-status { font-size:12px; color:#8ed4ff; min-height:18px; }
#startBtn { margin-top:24px; width:100%; border:0; border-radius:16px; padding:18px 22px; font-size:17px; font-weight:900; color:#fff; background:linear-gradient(110deg,#ff4a2a,#ff8b2c); box-shadow:0 12px 50px rgba(255,82,38,.28); cursor:pointer; }
.boot-card small { display:block; opacity:.48; margin-top:13px; line-height:1.45; }
#portraitBlock { display:none; position:fixed; inset:0; z-index:200; background:#030609; place-items:center; align-content:center; text-align:center; gap:8px; }
.rotate-phone { font-size:50px; animation:rotateHint 1.5s ease-in-out infinite alternate; }
#portraitBlock strong { font-size:20px; }
#portraitBlock span { opacity:.58; font-size:13px; }
@keyframes rotateHint { from{transform:rotate(-18deg)} to{transform:rotate(18deg)} }
@media (orientation:portrait) and (max-width:900px) { body.started #portraitBlock { display:grid; } }
#hud { position:fixed; z-index:20; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:flex-start; padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)); pointer-events:none; }
.location-card { display:flex; gap:10px; align-items:center; min-width:270px; padding:10px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(3,8,12,.62); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.28); }
.location-card .dot { width:8px; height:8px; border-radius:50%; background:#ff5a35; box-shadow:0 0 14px #ff5a35; }
.location-card b,.location-card span { display:block; }
.location-card b { font-size:13px; }
.location-card span { margin-top:1px; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; opacity:.55; }
.top-actions { display:flex; gap:7px; pointer-events:auto; }
.top-actions button { height:38px; min-width:42px; border:1px solid rgba(255,255,255,.14); border-radius:11px; color:#fff; background:rgba(3,8,12,.62); backdrop-filter:blur(14px); font-weight:900; }
#speedometer { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:20; width:135px; height:76px; padding:10px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.13); background:rgba(2,6,10,.7); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:space-between; box-shadow:0 14px 35px rgba(0,0,0,.28); }
#speed { font-size:34px; font-weight:1000; letter-spacing:-.06em; line-height:.9; }
#speedometer small { display:block; font-size:8px; opacity:.52; letter-spacing:.14em; }
.gear { font-size:24px; font-weight:900; color:#ff673e; }
#miniMapWrap { position:fixed; left:max(18px,env(safe-area-inset-left)); bottom:max(18px,env(safe-area-inset-bottom)); z-index:20; width:160px; height:105px; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.13); background:rgba(2,6,10,.72); box-shadow:0 14px 35px rgba(0,0,0,.28); }
#miniMap { width:100%; height:100%; opacity:.95; }
#miniMapWrap>span { position:absolute; right:9px; top:6px; font-size:9px; font-weight:900; color:#ff6541; }
#touchControls { position:fixed; inset:0; z-index:18; pointer-events:none; }
.steer-group,.pedal-group { position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); display:flex; gap:9px; pointer-events:auto; }
.steer-group { left:195px; }
.pedal-group { right:168px; align-items:flex-end; }
.drive-btn { border:1px solid rgba(255,255,255,.15); color:#fff; background:rgba(2,7,11,.56); backdrop-filter:blur(13px); box-shadow:0 10px 30px rgba(0,0,0,.28); font-weight:900; touch-action:none; }
.steer { width:58px; height:58px; border-radius:19px; font-size:20px; }
.brake { width:64px; height:64px; border-radius:50%; font-size:9px; background:rgba(158,37,29,.55); }
.throttle { width:72px; height:72px; border-radius:50%; font-size:11px; background:rgba(34,128,66,.5); }
.drive-btn.active { transform:scale(.94); filter:brightness(1.5); }
#hint { position:fixed; z-index:15; bottom:8px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.06em; opacity:.45; white-space:nowrap; pointer-events:none; }
#attribution { position:fixed; z-index:14; right:12px; top:58px; font-size:8px; opacity:.36; pointer-events:none; }
@media (max-width:740px) and (orientation:landscape) { .location-card { min-width:205px; padding:7px 10px; } .location-card b{font-size:11px}.location-card span{max-width:190px}.top-actions button{height:33px;min-width:36px}.steer-group{left:150px}.pedal-group{right:136px}.steer{width:50px;height:50px}.brake{width:54px;height:54px}.throttle{width:61px;height:61px}#speedometer{width:112px;height:62px;padding:8px 11px}#speed{font-size:28px}#miniMapWrap{width:128px;height:84px} }