:root{--night:#070c16;--panel:#0d1929;--panel2:#142438;--edge:#315170;--text:#f3f8ff;--soft:#b5c7da;--gold:#ffca56;--green:#5bf4a3;--blue:#5cc9ff;--red:#fc4d70}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;touch-action:manipulation}button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.52}h1,h2,h3,p{margin:0}#app{width:100%;height:100dvh;overflow:hidden;position:relative;background:radial-gradient(ellipse at 60% 0%,#172b46,#060b14 75%)}.topbar{height:62px;padding:6px clamp(12px,2vw,30px);display:flex;align-items:center;gap:15px;position:relative;z-index:10;background:linear-gradient(180deg,#080f1deF,#080e1bf5);border-bottom:1px solid #2b4264;box-shadow:0 5px 22px #0007}.back{font-size:33px!important;line-height:0}.btn-icon{display:grid;place-items:center;min-width:43px;height:43px;border:1px solid #547697;background:linear-gradient(145deg,#172b43,#091626);border-radius:12px;font-size:25px;font-weight:900}.logo{margin-right:auto;white-space:nowrap;line-height:1}.logo b{font-style:italic;font-size:clamp(18px,2.3vw,30px);letter-spacing:-.04em}.logo em{color:#ff436c}.logo span{display:block;font-size:10px;color:var(--gold);letter-spacing:.12em;font-weight:950;margin-top:5px}.logo i{font-style:normal;color:#7c9ab5;font-size:9px}.top-right{display:flex;align-items:center;gap:10px}.season{padding:8px 12px;border:1px solid #c79d4e;color:var(--gold);font-weight:950;border-radius:9px}.wallet{display:flex;align-items:center;gap:10px;padding:5px 15px 5px 5px;border:1px solid #a3824f;background:linear-gradient(130deg,#2d2514,#060d1b);border-radius:40px;font-size:20px;min-width:105px;justify-content:space-between}.coin{height:34px;width:34px;display:grid;place-items:center;border:2px solid #ffe48a;color:#5e3e08;background:linear-gradient(145deg,#fff9b0,#dfa121);border-radius:50%;box-shadow:0 0 15px #e5b63a65;font-weight:1000;font-size:12px;font-style:normal}.autosave{color:#8ee9bb;font-weight:900;font-size:11px;white-space:nowrap;opacity:.9}#main{height:calc(100% - 62px);position:relative;overflow:auto}.screen{padding:clamp(10px,2vw,24px) clamp(14px,3vw,38px);min-height:100%;background:radial-gradient(ellipse at 30% 0%,#1931505e,transparent 64%)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.section-title h1{font-size:clamp(19px,2.7vw,34px);font-style:italic;font-weight:1000}.section-title h1 em{color:var(--gold);font-style:normal}.subtitle{color:var(--soft);font-size:clamp(10px,1.1vw,14px);margin-top:5px}.chip{padding:8px 13px;border-radius:25px;color:#c7ddf5;background:#122338;border:1px solid #436384;font-size:12px;font-weight:850;white-space:nowrap}.panel{background:linear-gradient(145deg,#14243aeD,#0a1524f7);border:1px solid #355679;border-radius:17px;box-shadow:0 15px 30px #0005}.primary,.gold,.secondary,.mint{border:1px solid #5a91d1;border-radius:12px;padding:13px 19px;font-weight:1000;font-size:clamp(12px,1.5vw,18px);background:linear-gradient(180deg,#14bce4,#0056a8);box-shadow:0 5px 17px #0c88ea48}.gold{color:#181102;border-color:#fff0a3;background:linear-gradient(180deg,#ffe482,#f8ac17);box-shadow:0 4px 18px #ffbf4470}.secondary{background:#13243b;border-color:#58748f;box-shadow:none}.mint{background:linear-gradient(180deg,#0fcf89,#036b56);border-color:#6dffbe;box-shadow:0 4px 18px #17cb8590}.danger{color:#fda3b4}.good{color:#70ffb3}.bb{color:var(--gold)}.muted{color:var(--soft)}.carimg{display:block;object-fit:contain;object-position:center center;max-width:100%;max-height:100%;filter:drop-shadow(0 17px 12px #000b)}
/* Home – entirely new composition */
.home{height:100%;min-height:280px;position:relative;overflow:hidden;background:linear-gradient(90deg,#040918db 2%,#08142da8 53%,#0408196e),url('assets/bg/paris-v4.webp') center 50%/cover}.home:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#060a14 0%,transparent 64%),radial-gradient(ellipse at 76% 62%,#2085ff3c,transparent 40%)}.home-identity{position:absolute;top:13%;left:5%;z-index:2;max-width:34%}.home-identity span{letter-spacing:.2em;font-size:12px;color:var(--gold);font-weight:900}.home-identity h1{font-size:clamp(35px,5.4vw,78px);font-style:italic;line-height:.93;text-shadow:0 8px 20px #000a;margin:9px 0}.home-identity h1 strong{color:#ff4d72}.home-identity p{max-width:320px;font-size:clamp(11px,1.35vw,16px);color:#d0ddef}.home-hero-car{position:absolute;right:4%;top:11%;width:58%;height:50%;display:flex;align-items:center;justify-content:center;z-index:2}.home-hero-car img{width:96%;height:100%;object-fit:contain;filter:drop-shadow(10px 25px 16px #000d)}.home-car-name{position:absolute;right:7%;top:62%;z-index:2;text-align:right;background:#061222ba;border-right:3px solid #ffcb63;padding:8px 14px;font-weight:950}.home-car-name small{display:block;font-size:12px;color:#b4cde0;margin-top:3px;font-weight:650}.home-actions{position:absolute;bottom:5%;left:4%;right:4%;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.home-actions button{height:clamp(66px,14vh,112px);background:linear-gradient(155deg,#192b49ee,#08121eee);border:1px solid #5b83a8;border-radius:15px;font-size:clamp(15px,2.2vw,28px);font-weight:1000;display:flex;align-items:center;justify-content:center;gap:14px}.home-actions button:first-child{border-color:#ffdb6b;box-shadow:0 0 19px #edb63878}.home-actions b{font-size:28px}.home-save{position:absolute;top:4%;right:3%;z-index:4;display:flex;gap:8px}.home-save button{font-size:10px;padding:7px 9px;border:1px solid #587997;background:#111d31dc;border-radius:8px}
/* Map – entirely new geographic tiles */
.map{background:radial-gradient(ellipse at 50% 20%,#223b58b0,#060d1a 72%)}.map-grid{display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:18px;margin:1.5vh auto 0;max-width:1500px;align-items:stretch}.map-tile{min-height:clamp(230px,54vh,445px);position:relative;overflow:hidden;text-align:left;padding:0;border:1px solid #497296;border-radius:22px;background:#071323}.map-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#05101e 5%,transparent 68%);z-index:1}.map-tile>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:brightness(.82) saturate(1.25)}.map-tile.event{border:2px solid #ffcf64;box-shadow:0 0 28px #fbbd4555}.map-tile .tile-content{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:23px}.map-tile strong{display:block;font-style:italic;font-size:clamp(17px,2.1vw,29px);line-height:1.1;text-shadow:0 2px 10px #000}.map-tile small{display:block;margin:9px 0;color:#c7d8ea;font-size:clamp(11px,1vw,15px)}.map-tile .state{font-size:clamp(10px,1.1vw,14px);font-weight:950;color:#79ffb8}.map-tile.coming{background:radial-gradient(circle at center,#1b3857,#091222);border-style:dashed}.map-tile .coming-mark{position:absolute;inset:0 0 25%;display:grid;place-items:center;font-size:clamp(62px,9vw,135px);opacity:.45}
/* Shop / garage */
.two-pane{display:grid;grid-template-columns:minmax(340px,.96fr) minmax(400px,1.05fr);gap:18px;min-height:calc(100dvh - 138px)}.car-list{padding:9px;overflow:auto;max-height:calc(100dvh - 140px);display:flex;flex-direction:column;gap:7px}.car-row{display:grid;grid-template-columns:28px 34% 1fr auto;align-items:center;gap:9px;min-height:87px;padding:6px 13px;background:#0d1a2b;border:1px solid #354c67;border-radius:11px;text-align:left}.car-row.selected{border:1px solid #ffd66c;background:linear-gradient(90deg,#4d391b,#102037 74%);box-shadow:0 0 12px #ffc94b33}.car-row img{width:100%;height:72px;object-fit:contain;object-position:center}.car-row b{display:block;font-size:clamp(11px,1.1vw,16px)}.car-row small{display:block;color:#aebfce;margin-top:5px;font-size:clamp(10px,1vw,13px)}.car-row .order{color:#8da9c4;font-weight:900}.car-row .price{color:#ffce62;font-weight:1000;font-size:clamp(10px,1vw,15px);text-align:right}.car-showcase{padding:clamp(12px,2vw,25px);display:flex;flex-direction:column;min-width:0;overflow:auto;gap:11px;max-height:calc(100dvh - 140px);background:radial-gradient(ellipse at 50% 33%,#294263,#0c192a 70%)}.car-showcase h2{font-size:clamp(20px,2.35vw,31px);font-style:italic}.car-showcase .show-car{width:100%;flex:0 0 clamp(145px,31vh,280px);display:flex;align-items:center;justify-content:center;background:linear-gradient(0deg,#050d1e52,transparent 50%);overflow:visible;padding:10px}.show-car img{height:100%;width:100%;max-width:calc(100% - 16px);object-fit:contain;filter:drop-shadow(0 18px 12px #0009)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stat{padding:13px 16px;background:#081527;border:1px solid #35577b;border-radius:11px;min-width:0}.stat small{color:#94b0c7;font-size:11px;display:block}.stat strong{font-size:clamp(20px,2.4vw,30px);display:block;margin-top:5px}.stat strong em{font-size:13px;font-style:normal;color:#b7d1e8}.show-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}.show-actions .primary,.show-actions .gold,.show-actions .secondary{flex:1}.garage-side{padding:14px;overflow:auto;max-height:calc(100dvh - 140px)}.own-fleet{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px}.own-fleet button{min-width:95px;width:125px;display:flex;flex-direction:column;align-items:center;gap:4px;background:#0b1728;border:1px solid #385978;border-radius:10px;padding:5px}.own-fleet button.selected{border-color:var(--gold)}.own-fleet img{height:43px;width:100%;object-fit:contain}.own-fleet small{font-size:10px;max-width:115px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.upgrade-card{padding:12px;background:#0c192d;border:1px solid #385572;border-radius:12px;margin:9px 0}.upgrade-title{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:14px;font-weight:1000}.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}.slot{text-align:center;background:#15273e;border:1px solid #49617b;border-radius:7px;padding:8px 0;font-weight:900;color:#afc4d8}.slot.done{background:#15644d;border-color:#66e7a4;color:#fff}.upgrade-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}.upgrade-foot small{color:#bdcfe1;font-size:10px}.upgrade-foot b{display:block;font-size:14px;margin-top:4px}.upgrade-foot button{font-size:12px;padding:10px 14px}
/* Event */
.event{padding:14px clamp(12px,3vw,38px);background:radial-gradient(circle at 45% 10%,#213454,#070c18 75%)}.event-frame{border:2px solid #efc65c;box-shadow:0 0 28px #d6a4434d;border-radius:18px;overflow:hidden;max-width:1500px;margin:auto;background:linear-gradient(140deg,#1b2040,#080e1d)}.event-hero{position:relative;height:clamp(140px,38vh,330px);background:linear-gradient(0deg,#0a1022,transparent 65%),url('assets/bg/paris-v4.webp') center 55%/cover;overflow:hidden}.event-tag{position:absolute;top:15px;left:15px;z-index:2;background:#592477e5;padding:9px 17px;border:1px solid #c884ff;transform:skew(-6deg);font-weight:1000}.event-cars{display:flex;align-items:end;justify-content:space-around;position:absolute;inset:24% 2% 0}.event-cars img{width:31%;height:90%;object-fit:contain;filter:drop-shadow(0 15px 10px #000d)}.event-info{padding:12px 16px 16px}.event-info h1{color:#ffcf66;font-size:clamp(23px,3.3vw,45px);font-style:italic;text-align:center;margin:3px 0 13px}.event-bottom{display:grid;grid-template-columns:1fr minmax(190px,24%);gap:15px}.rewards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.reward{background:linear-gradient(150deg,#271e30,#0a1426);border:1px solid #706184;border-radius:11px;min-height:110px;padding:8px 5px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;gap:5px}.reward.active{border:2px solid #ffdb64;box-shadow:0 0 15px #ffd35c69}.reward.done{background:#123329;border-color:#41ac85}.reward img{width:100%;height:52px;object-fit:contain}.reward .bbmedal{font-size:27px}.reward b{color:#ffd878;font-size:clamp(10px,1.3vw,17px)}.reward small{font-size:11px;font-weight:1000}.event-cta{display:flex;flex-direction:column;align-items:stretch;justify-content:space-around;border-left:1px solid #446182;padding-left:12px;gap:9px}.event-cta h3{border:1px solid #3fbe82;color:#7affb3;text-align:center;padding:9px;border-radius:11px}.event-cta p{text-align:center;color:#c9d8e8;font-size:12px}
/* Street */
.street-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.street-box{padding:12px;display:flex;flex-direction:column;gap:10px}.street-box img{height:clamp(110px,28vh,230px);width:100%;object-fit:cover;border-radius:10px}.street-box h3{font-size:clamp(16px,2vw,24px)}.street-box p{color:#c2d6e8;font-size:13px}.street-box button{margin-top:auto}
/* Canvas driven racing – completely different engine */
.race{position:relative;height:100%;overflow:hidden;background:#090e1a;touch-action:none}.race-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}.race-overlay-top{position:absolute;z-index:2;left:clamp(10px,2vw,25px);right:clamp(10px,2vw,25px);top:10px;display:flex;justify-content:space-between;align-items:start;gap:15px;pointer-events:none}.race-badge{padding:10px 14px;border:1px solid #6b91ac;border-radius:13px;background:#081226d9;backdrop-filter:blur(5px);box-shadow:0 6px 20px #0006}.race-badge small{color:#bad3e9;font-size:10px;display:block;font-weight:800}.race-badge strong{font-size:clamp(16px,2vw,26px)}.race-bars{width:min(39%,520px);display:flex;flex-direction:column;gap:6px;background:#071122c9;padding:9px 12px;border-radius:13px;border:1px solid #334b68}.race-bars .bar{height:8px;background:#243b54;border-radius:10px;overflow:hidden}.race-bars .bar>div{width:0;height:100%;background:linear-gradient(90deg,#0cab87,#6effbc);transition:width .08s linear}.race-bars .bar.enemy>div{background:linear-gradient(90deg,#1175bc,#68cbff)}.race-pause{pointer-events:auto;padding:9px 18px;border:1px solid #5a80a8;background:#081a2dd8;border-radius:11px;font-size:13px;font-weight:950}.race-driver{position:absolute;z-index:2;padding:5px 10px;background:#071628cf;border:1px solid #4fa4c7;border-radius:8px;font-size:clamp(10px,1.05vw,13px);font-weight:950;white-space:nowrap}.race-driver.me{top:62%;left:2%;border-color:#61ffb5}.race-driver.rival{top:44%;left:2%}.race-status{position:absolute;left:50%;transform:translateX(-50%);top:21%;z-index:3;max-width:70%;min-width:190px;text-align:center;border-radius:12px;border:1px solid #ffcc71;background:#061023de;box-shadow:0 7px 22px #0009;padding:12px 17px;font-weight:950;font-size:clamp(13px,1.5vw,19px)}.race-bottom{position:absolute;z-index:5;bottom:0;left:0;right:0;height:clamp(100px,25%,172px);padding:8px clamp(10px,3vw,36px) max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:clamp(85px,14%,150px) 1fr clamp(90px,15%,170px);gap:16px;background:linear-gradient(0deg,#030711 0%,#061123ee 75%,#06112315 100%);border-top:1px solid #253e5b}.nitro{border:3px solid #45caff;background:radial-gradient(circle at 38% 22%,#257ac4,#07152c 70%);border-radius:50%;max-width:105px;aspect-ratio:1;align-self:center;width:90%;box-shadow:0 0 19px #42bfff83;font-size:clamp(13px,1.6vw,19px);font-weight:1000}.shift{border:3px solid #6dffb5;background:linear-gradient(140deg,#0c8b66,#05352a);border-radius:16px;box-shadow:0 0 22px #51eaa075;font-size:clamp(40px,6vw,80px);font-weight:1000}.hud{display:flex;justify-content:center;flex-direction:column;min-width:0;gap:6px}.hud-values{display:flex;align-items:end;justify-content:space-between;gap:8px}.hud-speed{font-size:clamp(30px,5vw,64px);font-weight:1000;line-height:1;letter-spacing:-.045em}.hud-speed small{font-size:13px;letter-spacing:0}.gear{font-size:clamp(17px,2.35vw,34px);color:#ffca58;font-weight:950;white-space:nowrap}.shiftbar{height:clamp(15px,3vh,25px);border:2px solid #d8e4f5;border-radius:18px;position:relative;background:linear-gradient(90deg,#df3150 0% 42%,#ff9b37 50% 64%,#44f383 71% 85%,#ff9b37 91%,#df3150 98%);box-shadow:0 0 20px #ffb4542a}.marker{position:absolute;top:-5px;bottom:-5px;left:0;width:5px;background:white;border-radius:3px;box-shadow:0 0 10px white}.hint{text-align:center;min-height:14px;color:#fee6a7;font-size:clamp(10px,1.2vw,14px);font-weight:950}.modal-overlay{position:absolute;inset:0;z-index:9;background:#030814d9;display:grid;place-items:center;padding:14px}.modal{min-width:min(550px,90%);max-width:94%;background:linear-gradient(150deg,#183450,#0a1527);border:2px solid #edc765;border-radius:20px;box-shadow:0 0 45px #000d;padding:clamp(16px,3vw,36px);text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}.modal h1{font-size:clamp(25px,4vw,47px);color:#ffd66a}.modal p{color:#d0e5f7}.modal-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}#toast{position:absolute;bottom:20px;left:50%;transform:translate(-50%,80px);opacity:0;transition:.2s;pointer-events:none;z-index:21;padding:11px 19px;border:1px solid #6995ba;background:#142940f5;border-radius:12px;font-weight:850;font-size:13px;box-shadow:0 8px 22px #0008}#toast.visible{opacity:1;transform:translate(-50%,0)}#rotate{display:none;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:radial-gradient(circle,#213a5b,#070c17 70%);text-align:center;padding:20px}#rotate p{font-size:14px;color:#cbdeef}
@media (orientation:portrait) and (max-width:700px){#rotate:not(.ignored){display:flex}}
@media (max-height:480px) and (orientation:landscape){.topbar{height:46px;padding:3px 10px;gap:7px}.btn-icon{min-width:34px;height:34px;border-radius:9px;font-size:22px}.logo b{font-size:18px}.logo span{font-size:8px;margin-top:3px}.top-right{gap:6px}.season{padding:6px 8px;font-size:10px}.wallet{font-size:15px;min-width:82px;padding:2px 10px 2px 3px;gap:5px}.coin{height:26px;width:26px;font-size:9px}.autosave{font-size:8px}#main{height:calc(100% - 46px)}.screen{padding:8px 13px}.section-title{margin-bottom:7px}.section-title h1{font-size:19px}.subtitle{font-size:10px}.two-pane{min-height:calc(100dvh - 88px);grid-template-columns:minmax(260px,.98fr) minmax(320px,1.12fr);gap:9px}.car-list,.car-showcase,.garage-side{max-height:calc(100dvh - 89px)}.car-list{gap:4px}.car-row{min-height:59px;grid-template-columns:21px 32% 1fr auto;padding:2px 6px;gap:6px}.car-row img{height:47px}.car-row b{font-size:11px}.car-row small{font-size:9px;margin-top:3px}.car-row .price{font-size:10px}.car-showcase{padding:10px;gap:5px}.car-showcase h2{font-size:19px}.car-showcase .show-car{flex-basis:clamp(87px,25vh,140px);padding:4px}.stats{gap:5px}.stat{padding:6px 9px}.stat small{font-size:9px}.stat strong{font-size:18px;margin-top:2px}.stat strong em{font-size:10px}.show-actions button{padding:8px 10px}.own-fleet button{min-width:81px;width:91px}.own-fleet img{height:35px}.upgrade-card{padding:7px;margin:5px 0}.slots{margin:5px 0}.slot{padding:5px 0}.upgrade-foot button{padding:7px 8px}.home-identity{top:9%}.home-identity h1{font-size:33px}.home-identity p{font-size:10px}.home-hero-car{top:5%;height:53%}.home-car-name{top:60%;font-size:12px}.home-car-name small{font-size:10px}.home-actions{bottom:3%;gap:8px}.home-actions button{height:53px;font-size:16px}.home-actions b{font-size:20px}.home-save button{font-size:8px;padding:4px}.map-grid{gap:11px}.map-tile{min-height:clamp(150px,51vh,240px)}.map-tile .tile-content{padding:11px}.map-tile strong{font-size:16px}.map-tile small{font-size:10px;margin:3px 0}.map-tile .state{font-size:9px}.event{padding:5px 12px}.event-hero{height:31vh}.event-info{padding:5px 9px}.event-info h1{font-size:20px;margin:0 0 6px}.reward{min-height:85px;padding:3px;gap:2px}.reward .bbmedal{font-size:16px}.reward img{height:36px}.reward small{font-size:9px}.event-cta{gap:5px}.event-cta h3{font-size:12px;padding:5px}.event-cta p{font-size:10px}.event-cta button{padding:9px}.street-box{padding:7px}.street-box img{height:21vh}.street-box p{font-size:10px}.street-box h3{font-size:15px}.street-box button{padding:7px}.race-bottom{height:clamp(90px,30%,115px);grid-template-columns:75px 1fr 104px;gap:9px;padding:4px 10px}.nitro{max-width:73px;font-size:12px}.hud{gap:3px}.hud-speed{font-size:33px}.hud-speed small{font-size:10px}.gear{font-size:18px}.shiftbar{height:17px}.hint{font-size:10px}.race-badge{padding:5px 8px}.race-badge strong{font-size:16px}.race-badge small{font-size:9px}.race-bars{padding:5px 8px;gap:3px}.race-bars .bar{height:6px}.race-pause{padding:7px 12px;font-size:11px}.race-status{top:15%;padding:6px 12px;font-size:12px}.race-driver{font-size:9px;padding:3px 6px}.race-driver.rival{top:35%}.race-driver.me{top:58%}}