:root{--ink:#101b25;--panel:#172630;--line:#ffffff17;--gold:#f4cb74;--muted:#93a7b1;--mint:#7fd1b7}
body{background:var(--ink);font-family:'Segoe UI',Arial,sans-serif;color:#edf3f2}
.icon{width:21px;height:21px;vertical-align:middle;flex-shrink:0}
button{cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,transform .15s}
button:focus-visible,.card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#menu{background:radial-gradient(ellipse at 75% 10%,#264451bb,transparent 65%),#0c1723ed;padding:28px;backdrop-filter:blur(9px)}
#menuBox{max-width:850px;background:#14232ff5;border:1px solid #3e5563;border-radius:18px;padding:30px;box-shadow:0 30px 100px #0008}
#menuBox h2{color:#f0e6cf;display:flex;gap:12px;align-items:center;letter-spacing:-.5px;font-size:24px}
#menuBox h3{color:var(--mint);font-size:13px;letter-spacing:1px;text-transform:uppercase}
#menuBox p{color:#a8b9c2;line-height:1.6}
.btn{border:1px solid #405561;background:#223742;border-radius:7px;font-size:13px;padding:12px 18px;color:#e6edee}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#14212b}
.btn.danger{background:#522b35;border-color:#8a4652;color:#ffd1d4}
.btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.card{padding:18px;border:1px solid #37505e;background:linear-gradient(120deg,#1e3341,#182935);border-radius:10px;margin:12px 0;transition:border-color .2s,background .2s}
.card:hover,.card.sel{border-color:var(--gold);background:#243944}
.card .t{color:#edf1ed;font-size:17px}.card .d{line-height:1.6;margin-top:8px;color:#a4b9c5}.card .r{color:var(--mint);margin-top:12px;font-size:12px;letter-spacing:.4px}
.tabs .btn.on{background:var(--gold);border-color:var(--gold)}
.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--gold);font-weight:600;margin-bottom:18px}
#menuBox.title-screen{max-width:1120px;padding:30px 40px;background:linear-gradient(140deg,#142533,#10202b);overflow:hidden;position:relative}
.title-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px;gap:15px}
.wordmark{font-size:13px;letter-spacing:3px;font-weight:800}.wordmark span{color:var(--gold);padding:0 10px}
.edition{font-size:9px;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:8px}.edition i{width:5px;height:5px;background:var(--mint);border-radius:50%;box-shadow:0 0 9px var(--mint)}
.title-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:20px;padding:38px 0 28px}
#menuBox .hero h1{font-size:clamp(36px,4.7vw,62px);line-height:1.05;color:#f0f1e8;letter-spacing:-2.8px;margin:0;font-weight:850}
.hero h1 em{color:var(--gold);font-style:normal}.hero-copy{font-size:13px!important;margin:20px 0!important}
.world-stats{display:flex;gap:28px;padding-top:8px}.world-stats div{display:flex;flex-direction:column;gap:6px}.world-stats strong{font-size:27px;font-weight:500;color:#e7efed}.world-stats span{font-size:8px;letter-spacing:1.3px;color:#8aa3af}
.city-art{position:relative;min-height:310px;background:radial-gradient(ellipse,#31546470,transparent 68%);overflow:hidden;border:1px solid #ffffff0b;border-radius:8px}
.atlas-art{width:100%;height:100%;object-fit:cover;opacity:.75;transform:rotate(-9deg) scale(1.14);filter:saturate(.65);mask-image:linear-gradient(#000 40%,transparent 100%)}
.atlas-label{position:absolute;left:18px;top:17px;font-size:10px;letter-spacing:2px;color:#b6c9c9}.atlas-label span{display:block;font-size:8px;color:#7295a5;margin-top:5px}
.hero-car{position:absolute;bottom:10px;left:0;right:0;display:flex;flex-direction:column;align-items:center}.hero-car img{width:90%;filter:drop-shadow(0 18px 12px #0008);image-rendering:auto}.hero-car span{font-size:8px;letter-spacing:2px;color:var(--gold)}
.careers{display:grid;grid-template-columns:1fr 1fr;gap:16px}.career{text-align:left;background:linear-gradient(120deg,#253443,#182d39);border:1px solid #43525b;border-radius:10px;padding:20px 24px;color:#edf3f2}.career.thief{border-top:2px solid var(--gold)}.career.police{border-top:2px solid #77b8d8}.career:hover{background:#2c4352;transform:translateY(-3px)}
.career-head{display:flex;gap:10px;align-items:center;color:var(--gold);font-size:9px;letter-spacing:1.7px}.career.police .career-head{color:#8bcde7}.career-arrow{margin-left:auto;font-size:20px}
#menuBox .career h2{font-size:22px;margin:13px 0 7px;letter-spacing:-.6px;color:#e9efe9}.career p{font-size:12px!important;max-width:360px;line-height:1.55!important}.career-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.3px;color:var(--gold)}.career.police .career-foot{color:#8bcde7}
.title-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--line);margin-top:26px;padding-top:20px;color:#79939f;font-size:8px;letter-spacing:1px}.title-bottom button{background:none;border:0;color:#c4d4d9;display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1px}.title-bottom .icon{width:15px;height:15px}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}.control-grid>div{background:#ffffff05;border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:#a7bdc7}kbd{font-family:inherit;color:var(--gold);font-size:11px;font-weight:600;letter-spacing:1px}
.contract-meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:9px;letter-spacing:1px;color:#93aebd;text-transform:uppercase}.card .t .icon{color:var(--gold);margin-right:6px}
.garage-card{position:relative;min-height:135px;padding-right:250px}.garage-car{position:absolute;right:14px;top:8px;width:210px}.car-specs{display:flex;gap:12px;margin-top:14px}.car-specs>div{flex:1;max-width:140px}.car-specs span{font-size:8px;letter-spacing:1px;color:#8da8b8}.car-specs>div>div{height:3px;background:#ffffff18;margin-top:7px}.car-specs i{display:block;height:3px;background:var(--gold)}
#hudTop{left:20px;top:20px;gap:10px}.hudBox{background:#101e2be8;border:1px solid #6b8d9938;border-radius:9px;padding:10px 14px;backdrop-filter:blur(6px);font-size:12px;line-height:1.6}#hudClan{color:#f4cb74;letter-spacing:.4px}#hudStars{font-size:16px}#hudBars{left:20px;top:105px;width:188px}.bar{gap:10px;margin-bottom:8px}.bar .lbl .icon{width:15px;height:15px;color:#c4d4d7}.bar .track{height:4px;border-radius:2px;background:#102130aa}.fill.car{background:#7fd1b7}.fill.hp{background:#ef8c89}#hudWeapon{background:#101e2bda;border:1px solid #6b8d9938;padding:6px 9px;font-size:10px;color:#bfd1d9}
#btnsTop{top:205px;right:12px;gap:7px}.tbtn{display:flex;align-items:center;gap:9px;min-width:105px;border:1px solid #69808d66;border-radius:7px;background:#101e2bdf;padding:9px 12px;font-size:9px;letter-spacing:.7px}.tbtn .icon{width:16px;height:16px;color:#bed3d9}.abtn{background:#112333df;border:1px solid #7896a077;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:8px;letter-spacing:.8px;width:62px;height:62px}.abtn.act{background:#f4cb74;color:#172a34;border-color:#ffe3a6}.abtn.fire{background:#542b37cf;border-color:#a46a72}.abtn .icon{width:22px;height:22px}.tbtn.on,.abtn.on{background:#637e83}body.desktop #btns,body.desktop #btnsTop{opacity:.85}
#hudObj{background:#101e2bef;border:1px solid #7f92993d;bottom:22px;max-width:480px;width:40%;padding:14px 18px;border-radius:9px;text-align:left;box-shadow:0 8px 30px #0003;font-size:12px}#hudMissionLabel{font-size:9px;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase;margin-bottom:7px}#hudHint{font-size:11px;color:var(--mint);margin-top:8px}.mission-track{height:2px;background:#ffffff15;margin-top:12px}.mission-track i{display:block;background:var(--gold);height:100%;transition:width .2s}
#hudToast{top:25px;max-width:36%}#hudToast div{background:#192e3aef;border-left:2px solid var(--gold);border-radius:5px;padding:10px 14px;font-size:12px}
#location{position:absolute;left:22px;bottom:25px;display:flex;flex-direction:column;gap:5px;text-shadow:0 2px 5px #000}#location span{font-size:8px;letter-spacing:2px;color:#c2d1d2}#location strong{font-size:18px;font-weight:600;color:#f2ead8}#hudSpeed{position:absolute;right:174px;bottom:25px;font-size:39px;font-weight:300;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px #000;display:flex;flex-direction:column;align-items:center}#hudSpeed small{font-size:8px;letter-spacing:2px;color:#bad0d6}
#mapPanel{background:#10202bf2;border-color:#4b6c7a;padding:20px;border-radius:10px;font-size:12px}#mapPanel h3{color:var(--gold)}#mapClose{position:fixed;right:24px;bottom:24px;z-index:8;background:var(--gold);border:0;color:#132332;padding:12px 16px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:1px}#mapClose kbd{color:#132332;margin-left:12px}
#joy{background:#142d3955;border:1px solid #bed4d580}#joyKnob{background:#d2e1d9a0;border:1px solid #fff8}
.map-mode #hud{visibility:hidden}.map-legend{display:grid;gap:14px;margin:24px 0}.map-legend>div{display:flex;align-items:center;gap:12px}.map-legend .icon{width:18px;height:18px}#mapPanel p{line-height:1.7;color:#a7bbc6}
@media(max-width:760px){#menu{padding:14px}#menuBox,#menuBox.title-screen{padding:22px}.title-grid{padding:24px 0;gap:10px}.city-art{min-height:240px}.hero .eyebrow{font-size:8px;letter-spacing:1px}#menuBox .hero h1{font-size:36px;letter-spacing:-1.5px}.world-stats{gap:14px}.world-stats strong{font-size:22px}.world-stats span{font-size:6px}.career{padding:17px}#menuBox .career h2{font-size:18px}.title-bottom>span:last-child{display:none}.edition{font-size:7px}.garage-card{padding-right:180px}.garage-car{width:160px}.hudBox{padding:7px 10px}#hudTop{left:12px;top:12px}#hudBars{top:91px;left:12px;width:145px}#hudObj{width:42%;max-width:42%;bottom:65px;left:12px;transform:none;padding:10px 12px;font-size:11px}#btnsTop{top:190px}.tbtn{min-width:84px;padding:7px;font-size:8px}.abtn{width:54px;height:54px}#btns{grid-template-columns:54px 54px;gap:8px}#hudSpeed{right:140px;bottom:20px;font-size:30px}#location{left:13px;bottom:18px}#location strong{font-size:13px}#hudToast{top:150px;max-width:60%;width:60%}#hudToast div{font-size:10px}#mapPanel{display:none!important}}
@media(max-width:520px){.title-grid{grid-template-columns:1fr}.city-art{display:none}.careers{grid-template-columns:1fr}.hero-copy{font-size:12px!important}#menuBox .hero h1{font-size:44px}.title-top{padding-bottom:16px}.wordmark{font-size:10px;letter-spacing:2px}.edition{font-size:6px}.title-bottom{flex-wrap:wrap;margin-top:18px}.control-grid{grid-template-columns:1fr}.garage-card{padding-right:20px;padding-top:115px}.garage-car{top:0;left:20px;width:200px}.car-specs{gap:8px}.hudBox.center{max-width:115px}#hudStars{font-size:13px}.career p{max-width:none}}
@media(max-height:500px) and (min-width:521px){#menu{padding:12px}#menuBox.title-screen{padding:18px 26px}.title-grid{padding:20px 0}.city-art{min-height:220px}#menuBox .hero h1{font-size:36px}.careers{gap:10px}.career{padding:13px 18px}.title-bottom{margin-top:16px;padding-top:12px}.tbtn{padding:6px 8px}#btnsTop{top:185px;gap:3px}.abtn{width:46px;height:46px}#btns{grid-template-columns:46px 46px;gap:5px}.abtn .icon{width:18px;height:18px}#hudObj{bottom:16px;width:40%;font-size:10px}#hudSpeed{right:130px;font-size:28px}#hudToast{top:16px}}
@media(max-height:500px) and (min-width:521px){#btnsTop{top:12px;right:192px;flex-direction:row;gap:5px}.tbtn{min-width:36px;width:36px;height:36px;padding:8px;justify-content:center}.tbtn span{display:none}#hudToast{top:70px}#hudObj{width:38%;max-width:38%}}
