html,body{color:#fff;background:#1b1d22;height:100%;margin:0;font:13px/1.3 system-ui,sans-serif;overflow:hidden}#game{touch-action:none;width:100vw;height:100vh;display:block}body.on-title>:not(#title,#game,#credits){visibility:hidden}#title{z-index:10;background:linear-gradient(100deg,#0f1116e6 0%,#0f111699 40%,#0f111600 70%);align-items:end;padding:6vh 6vw;transition:opacity .5s;display:grid;position:fixed;inset:0;overflow-y:auto}#title.gone{opacity:0;pointer-events:none}#title .card{max-width:420px}#title h1{letter-spacing:-.02em;white-space:nowrap;text-shadow:0 4px 18px #00000080;margin:0;font:800 min(72px,15vw)/1 system-ui,sans-serif}#title h1 span{color:#ff3b30;display:block}#title .tagline{color:#ffffffe6;margin:16px 0 22px;font-size:16px;line-height:1.45}#title .controls{grid-template-columns:auto 1fr;align-items:center;gap:7px 14px;margin:0 0 14px;font-size:14px;display:grid}#title .more{color:#fff9;margin:0 0 24px;font-size:13px;line-height:1.5}#title .more kbd{min-width:0;margin:0;padding:0 5px;font-size:11px}#title dt{white-space:nowrap;font-weight:700}#title dd{color:#ffffffd9;margin:0}#title kbd{text-align:center;background:#ffffff14;border:1px solid #ffffff59;border-bottom-width:2px;border-radius:5px;min-width:14px;margin-right:3px;padding:2px 6px;font:700 12px system-ui,sans-serif;display:inline-block}#title .touch{display:none}#loading{flex-direction:column;justify-content:center;gap:10px;height:52px;font-size:18px;font-weight:600;display:flex}#loading span{animation:1s ease-in-out infinite alternate loading-pulse}#loading .bar{background:#fff3;border-radius:3px;width:220px;height:6px;overflow:hidden}#loading .bar div{transform-origin:0;background:#fff;height:100%;transition:transform .4s ease-out;transform:scaleX(0)}@keyframes loading-pulse{to{opacity:.5}}#title .play{color:#111;letter-spacing:.02em;cursor:pointer;background:#fff;border:0;border-radius:26px;height:52px;padding:0 48px;font:800 20px system-ui,sans-serif;box-shadow:0 4px 18px #00000059}#title .play:hover{background:#ffd60a}@media (pointer:coarse){#title{background:linear-gradient(#0f111633 0%,#0f1116b3 45%,#0f1116eb 100%)}#title .tagline{font-size:15px}#title .keys{display:none}#title .touch{display:grid}}@media (height<=520px) and (orientation:landscape){#title{padding:4vh 5vw}#title .card{grid-template-columns:auto minmax(0,360px);align-items:end;column-gap:32px;max-width:none;display:grid}#title h1{grid-row:span 2;font-size:44px}#title .tagline{display:none}#title .controls{gap:5px 12px;margin-bottom:14px;font-size:13px}#title .more{display:none}#title .play{justify-self:start}}#views{flex-wrap:wrap;gap:6px;max-width:calc(100vw - 20px);display:flex;position:fixed;top:10px;left:10px}#views button{font:inherit;color:#fff;cursor:pointer;background:#14161cb3;border:1px solid #ffffff40;border-radius:6px;padding:6px 10px}#views button:hover{background:#282c38d9}#stats{color:#fffc;text-shadow:0 1px 2px #000;white-space:pre;pointer-events:none;font:11px/1.4 ui-monospace,monospace;position:fixed;bottom:8px;left:10px}#credits{z-index:11;color:#fff9;text-shadow:0 1px 2px #000;align-items:center;gap:2px;font-size:11px;display:flex;position:fixed;bottom:8px;right:10px}#credits a{color:inherit}#credits summary{cursor:pointer;padding:2px 4px;font-size:13px;list-style:none}#credits summary::-webkit-details-marker{display:none}#credits details>div{color:#ffffffd9;text-align:right;background:#14161cd9;border-radius:6px;width:max-content;max-width:80vw;padding:8px 10px;line-height:1.6;position:absolute;bottom:calc(100% + 6px);right:0}#hud{z-index:1;pointer-events:none;text-shadow:0 2px 4px #0009;font-weight:700;position:fixed;inset:0}#hud .speed{font-variant-numeric:tabular-nums;font-size:40px;position:absolute;bottom:34px;right:18px}#hud .speed small{opacity:.8;font-size:16px}#hud .controls-list{color:#fff;opacity:.82;white-space:pre-line;text-shadow:0 1px 2px #00000080;background:#0f111680;border-radius:7px;padding:6px 10px;font:600 13px/1.55 system-ui,sans-serif;position:absolute;bottom:206px;left:16px}#hud .controls-list[hidden]{display:none}#hud .hint{text-shadow:none;background:#0f1116a6;border-radius:8px;padding:8px 14px;font-size:16px;position:absolute;bottom:90px;left:50%;transform:translate(-50%)}#hud .toast{text-align:center;opacity:0;max-width:90vw;font-size:22px;transition:opacity .4s;position:absolute;top:18%;left:50%;transform:translate(-50%)}#hud .toast.show{opacity:1}#hud :is(.police,.vehicle,.street,.district){text-shadow:none;background:#0f1116a6;border-radius:8px;padding:4px 10px;font-size:15px;position:absolute;right:18px}#hud .street{opacity:0;top:146px}#hud .street.show{animation:4s forwards street}@keyframes street{0%{opacity:0}10%,75%{opacity:1}to{opacity:0}}#hud .district{opacity:0;top:174px}#hud .vehicle{opacity:0;top:118px}#hud :is(.district,.vehicle).show{animation:5s forwards street}#hud .police{top:58px}#hud .fade{opacity:0;pointer-events:none;background:#000;position:fixed;inset:0}#hud .fade.out{animation:.5s ease-out fade-in-from-black}@keyframes fade-in-from-black{0%{opacity:1}to{opacity:0}}#hud .fade.defeat{animation:defeat-black var(--defeat) ease-in forwards}@keyframes defeat-black{0%,40%{opacity:0}to{opacity:1}}#hud .health{background:#14161cbf;border-radius:4px;width:176px;height:8px;transition:opacity .3s;position:absolute;bottom:12px;left:16px;overflow:hidden;box-shadow:0 2px 6px #0006}#hud .health.full{opacity:0}#hud .health>div{background:#4caf50;position:absolute;inset:0 auto 0 0}#hud .health>.lost{background:#fff;transition:width .5s ease-in .4s}#hud .health.low>:not(.lost){background:#ff3b30;animation:.5s ease-in-out infinite alternate health-low}#hud .stamina{background:#14161cbf;border-radius:3px;width:176px;height:5px;position:absolute;bottom:22px;left:16px;overflow:hidden;box-shadow:0 2px 6px #0006}#hud .stamina[hidden]{display:none}#hud .stamina>div{background:#f5c542;position:absolute;inset:0 auto 0 0}#hud .stamina.low>div{background:#ff8c1a}@keyframes health-low{to{opacity:.4}}#hud .hurt{opacity:0;background:radial-gradient(#0000 45%,#dc1414a6);position:fixed;inset:0}#hud .hurt.flash{animation:.8s ease-out hurt}@keyframes hurt{0%{opacity:var(--hurt)}}#touch{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}#touch .stick{pointer-events:auto;touch-action:none;background:#ffffff1f;border:2px solid #ffffff4d;border-radius:50%;width:130px;height:130px;position:absolute;bottom:34px;left:28px}#touch .knob{background:#ffffff8c;border-radius:50%;width:50px;height:50px;position:absolute;top:40px;left:40px}#touch .btn{pointer-events:auto;touch-action:none;color:#fff;background:#14161c8c;border:2px solid #ffffff59;border-radius:50%;font:700 15px system-ui,sans-serif;position:absolute}#touch .action{width:70px;height:70px;font-size:24px;bottom:150px;right:28px}#touch .handbrake{width:88px;height:88px;font-size:13px;bottom:50px;right:110px}#touch .punch{width:64px;height:64px;font-size:12px;bottom:160px;right:120px}#touch[data-seat=foot] .handbrake,#touch[data-seat=vehicle] .punch{display:none}#minimap{cursor:pointer;border:3px solid #14161cbf;border-radius:10px;width:170px;height:170px;position:fixed;bottom:30px;left:16px;box-shadow:0 2px 10px #0006}#worldmap{z-index:20;touch-action:none;-webkit-user-select:none;user-select:none;background:#2a2d33;position:fixed;inset:0}#worldmap canvas{cursor:crosshair;width:100%;height:100%;display:block}#worldmap .dest{pointer-events:none;background:#14161ccc;border-radius:8px;padding:8px 14px;font-size:16px;font-weight:700;position:absolute;top:14px;left:16px}#worldmap .dest:empty,#worldmap .street:empty{display:none}#worldmap .street{text-shadow:0 2px 4px #000c;white-space:nowrap;pointer-events:none;font-size:20px;font-weight:700;position:absolute;bottom:52px;left:50%;transform:translate(-50%)}#worldmap .help{box-sizing:border-box;color:#ffffffd9;text-align:center;pointer-events:none;background:#14161cbf;border-radius:14px;max-width:calc(100vw - 24px);padding:6px 12px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}#worldmap .close{color:#fff;cursor:pointer;background:#14161ccc;border:1px solid #ffffff4d;border-radius:50%;width:44px;height:44px;font:700 24px/1 system-ui,sans-serif;position:absolute;top:10px;right:10px}body>.radio{gap:6px;display:flex;position:fixed;top:10px;left:50%;transform:translate(-50%)}body>.radio[hidden]{display:none}.radio>button{color:#fff;white-space:nowrap;cursor:pointer;background:#14161c99;border:1px solid #ffffff4d;border-radius:20px;height:40px;font:700 15px system-ui,sans-serif}.radio>.power{width:40px;padding:0;font-size:18px;line-height:1}.radio>.power.off{opacity:.45}.radio>.station{padding:0 16px}.radio>.station.tuning{animation:.5s ease-in-out infinite alternate radio-tuning}@keyframes radio-tuning{to{opacity:.45}}body>button.sound{cursor:pointer;background:#14161c99;border:1px solid #ffffff4d;border-radius:50%;width:40px;height:40px;font-size:18px;line-height:1;position:fixed;top:10px;right:10px}body>button.view{color:#fff;cursor:pointer;background:#14161c99;border:1px solid #ffffff4d;border-radius:50%;width:40px;height:40px;font:700 13px/1 system-ui,sans-serif;position:fixed;top:10px;right:58px}@media (pointer:coarse){#hud .speed{font-size:30px;top:80px;bottom:auto}#hud .police{top:52px}#hud .controls-list{display:none}#credits{font-size:9px;inset:6px 90px auto 8px}#credits details>div{text-align:left;inset:calc(100% + 6px) auto auto 0}#stats{top:40px;bottom:auto}#minimap{width:120px;height:120px;top:34px;bottom:auto;left:10px}#hud .health{width:126px;height:6px;top:171px;bottom:auto;left:10px}#hud .stamina{width:126px;top:163px;bottom:auto;left:10px}}@media (pointer:coarse) and (height<=520px){#hud :is(.vehicle,.street,.district){right:196px}}#net{pointer-events:none;grid-template-columns:auto auto 1fr;justify-items:start;gap:6px;display:grid;position:fixed;top:10px;left:10px}#net button{pointer-events:auto;color:#fff;white-space:nowrap;cursor:pointer;background:#14161c99;border:1px solid #ffffff4d;border-radius:16px;height:32px;font:700 13px system-ui,sans-serif}#net .pill{padding:0 12px 0 10px}#net .pill:before{content:"";vertical-align:1px;background:#9aa0a6;border-radius:50%;width:8px;height:8px;margin-right:7px;display:inline-block}#net .pill.online:before{background:#4caf50;box-shadow:0 0 6px #4caf50}#net .chat-button{width:32px;padding:0;font-size:15px}#chat{grid-column:1/-1;gap:6px;width:min(380px,70vw);display:grid}#chat .log{flex-direction:column;gap:2px;max-height:11.5em;font-size:14px;display:flex;overflow:hidden}#chat .line{text-shadow:0 1px 2px #000c;overflow-wrap:anywhere;background:#14161c73;border-radius:6px;align-self:start;max-width:100%;padding:2px 8px;transition:opacity 1s}#chat .line b{color:#8ec5ff;margin-right:2px}#chat .line.self b{color:#ffd479}#chat .line.system{color:#ffffffbf;font-style:italic}#chat .line.faded{opacity:0}#chat.open .log{pointer-events:auto;background:#14161c66;border-radius:8px;padding:4px;overflow-y:auto}#chat.open .line.faded{opacity:1;transition:none}#chat input{pointer-events:auto;box-sizing:border-box;color:#fff;background:#14161ccc;border:1px solid #fff6;border-radius:8px;outline:none;width:100%;height:36px;padding:0 12px;font:16px system-ui,sans-serif}#chat input:focus{border-color:#8ec5ff}@media (pointer:coarse){#net{top:4px}#net button{height:26px;font-size:12px}#net .chat-button{width:26px}#chat{width:min(300px,100vw - 200px);margin-left:130px}#chat .log{max-height:8em;font-size:13px}}#nametags{pointer-events:none;position:fixed;inset:0;overflow:hidden}#nametags .nametag{will-change:transform;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;top:0;left:0}#nametags .name{white-space:nowrap;background:#14161c8c;border-radius:9px;padding:2px 7px;font-weight:700}#nametags .say{color:#1b1d22;text-align:center;overflow-wrap:anywhere;background:#ffffffeb;border-radius:10px;max-width:220px;padding:5px 10px;font-weight:600;box-shadow:0 2px 6px #00000059}
