:root{color-scheme:dark;--green:#14e782;--yellow:#ffda47;--blue:#5da3ff;--ink:#09121c;--paper:#eef5f8;--muted:#a4b5c3;--car:#11d274;font-family:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#050b14;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}#app{width:100%;height:100%;min-height:320px;position:relative;overflow:hidden;background:#091526}#game{display:block;position:absolute;inset:0;width:100%;height:100%;outline:0;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 25px #01060ebd;z-index:1}.topline{position:absolute;z-index:7;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(20px,3vw,56px);background:linear-gradient(#071522ef,#07152200)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:48px;height:48px;display:grid;place-items:center;position:relative;transform:skew(-10deg);border:2px solid #24ee94;background:linear-gradient(135deg,#063523,#091c39);box-shadow:0 0 18px #11ef8359;color:#e5fff2;font-size:22px;font-weight:1000;letter-spacing:-3px}.brand-mark span{position:absolute;font-size:9px;color:#ffda42;right:0;top:0}.brand strong{display:block;font-size:19px;letter-spacing:1.5px;font-weight:950}.brand strong em{color:var(--yellow);font-style:normal}.brand small{font-size:8px;letter-spacing:3.5px;color:#adc4d2;font-weight:700}.top-right{display:flex;align-items:center;gap:17px}.tag{font-size:10px;font-weight:900;letter-spacing:2px;color:#cce1e9}.live-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}.icon-button{border:1px solid #ffffff3a;color:#fff;background:#10243a99;width:38px;height:38px;border-radius:12px;font-size:20px}.screen-overlay{position:absolute;inset:0;z-index:4;padding:clamp(90px,12vh,130px) 28px 65px clamp(24px,6.5vw,110px);background:linear-gradient(90deg,#07111bf5 0%,#07111bf0 28%,#07111bba 51%,#07111b25 80%);overflow:auto;scrollbar-width:thin;scrollbar-color:#2b5e6f transparent}.menu-eyebrow{display:flex;align-items:center;gap:11px;font-weight:900;color:#9ac8bb;font-size:11px;letter-spacing:3px}.slash{width:17px;height:17px;border-left:4px solid var(--green);transform:skew(-22deg)}.short-line{width:35px;height:1px;background:#328e80}h1{margin:7px 0 0;font-size:clamp(48px,6.7vw,103px);line-height:1.03;letter-spacing:-4px;font-weight:1000;text-shadow:0 8px 30px #0008}h1 span{color:#eefbf7}h1 b{font-weight:1000;color:var(--yellow)}.main-copy{max-width:520px;margin:13px 0 19px;color:#c2d5de;font-size:clamp(13px,1.3vw,16px);line-height:1.65}.feature-badges{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 25px}.feature-badges span{border:1px solid #40746c9c;background:#0a261eae;color:#a8f0d0;font-size:9px;letter-spacing:1px;font-weight:900;padding:8px 10px;border-radius:5px}.feature-badges span:nth-child(2){color:#f9e2a1;border-color:#98843e7d;background:#302919a0}.feature-badges span:nth-child(3){color:#9ccaff;border-color:#406898b3;background:#15253aa0}.garage{width:min(450px,100%);border:1px solid #5372798a;background:linear-gradient(150deg,#122739dd,#08131ce8);box-shadow:0 24px 80px #0008, inset 0 1px #ffffff13;backdrop-filter:blur(14px);border-radius:14px;padding:21px 22px 14px}.garage-header{display:flex;align-items:center;justify-content:space-between}.overline{display:block;color:#8eafa9;font-size:10px;letter-spacing:1.9px;font-weight:900}.garage h2{font-size:21px;font-weight:900;margin:4px 0 0}.car-counter{font-size:12px;color:var(--yellow);letter-spacing:2px;font-weight:900}.car-picker{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}.round-nav{color:#cae6ff;background:#112b3b;border:1px solid #49717b;border-radius:50%;min-width:31px;height:31px;font-size:25px;line-height:1}.round-nav:hover{background:#225263}.car-preview{--car:#00d56c;position:relative;height:103px;flex:1;display:flex;align-items:center;justify-content:center}.car-glow{position:absolute;border-radius:50%;width:65%;height:32px;left:17%;bottom:5px;background:var(--car);filter:blur(28px);opacity:.30}.car-svg{position:relative;width:100%;max-width:320px;height:110px;filter:drop-shadow(0 7px 10px #000a)}.car-info{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:7px}.car-info strong{font-size:15px;letter-spacing:1px}.car-info span{font-size:11px;color:#b6c6cc}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:16px 0 19px}.stats>div{min-width:0}.stats label{display:block;font-size:9px;font-weight:800;letter-spacing:1px;color:#afbbc6;margin-bottom:8px}.stat-track{display:block;width:100%;height:5px;background:#314151;border-radius:4px;overflow:hidden}.stat-track i{display:block;height:100%;width:60%;border-radius:4px;background:var(--green)}.stats>div:nth-child(2) i{background:var(--blue)}.stats>div:nth-child(3) i{background:var(--yellow)}.start-button{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;padding:14px 17px;border:none;border-radius:8px;background:linear-gradient(100deg,#05cb70,#8ce94a);color:#06211b;font-weight:1000;font-size:14px;letter-spacing:1px;box-shadow:0 7px 24px #00ef8540}.start-button:hover{filter:brightness(1.13)}.button-arrow{margin-left:auto;font-size:21px}.menu-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:13px;color:#8ca5ab;font-size:9px;font-weight:800;letter-spacing:1px}.desktop-tips{display:flex;flex-wrap:wrap;gap:15px;margin:20px 0 0;color:#b7ceda;font-size:11px}.desktop-tips b{color:var(--yellow);letter-spacing:1px}.desktop-tips span{border-left:1px solid #637e8c;padding-left:12px}.game-footer{position:absolute;bottom:13px;right:27px;z-index:2;font-size:9px;color:#acb9c7b0;letter-spacing:1.5px;pointer-events:none}.is-hidden{display:none!important}
/* HUD */
.hud{position:absolute;z-index:3;inset:80px 0 0;pointer-events:none}.hud-row{display:flex;gap:9px;margin:8px 0 0 clamp(16px,3vw,52px)}.hud-card{border:1px solid #6f96ac53;background:#091a2ad9;backdrop-filter:blur(10px);border-radius:8px;padding:10px 15px;color:#fff}.hud-card strong{font-size:30px;font-weight:1000;font-variant-numeric:tabular-nums}.hud-small{color:#bbd1d9;font-size:12px}.hud-card.place-card strong{color:var(--yellow)}.timer-card strong{font-size:23px}.hud-side{display:flex;flex-direction:column;gap:10px;align-items:stretch;position:absolute;right:clamp(15px,3vw,50px);top:8px;width:165px}.hud-side .hud-card{text-align:right}.speed-card strong{font-size:47px}.speed-card .hud-small{display:block;margin-top:-5px}.meter{width:100%;height:6px;border-radius:20px;background:#23394b;overflow:hidden;margin-top:9px}.meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#14dc70,#e6e75b);border-radius:20px}.meter.nitro i{background:linear-gradient(90deg,#0e65eb,#75e8f7)}.hint{display:block;color:#8da8bb;font-size:9px;letter-spacing:1px;margin-top:7px}.pickup-card strong{display:block;font-size:16px!important;color:var(--yellow);margin-top:8px}.lap-progress{position:absolute;top:0;left:0;width:100%;height:4px;background:#142a35}.lap-progress i{display:block;height:4px;width:0;background:linear-gradient(90deg,#23f08b,#ffdf4c)}.race-message{position:absolute;top:19%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:1000;letter-spacing:3px;text-align:center;color:#fff;text-shadow:0 3px 20px #000;white-space:nowrap;opacity:0;transition:opacity .4s}.race-message.visible{opacity:1}.countdown{position:absolute;z-index:6;top:38%;left:50%;transform:translate(-50%,-50%);font-size:clamp(92px,20vw,230px);line-height:1;font-weight:1000;color:var(--yellow);text-shadow:0 0 50px #d9b333aa,0 9px 20px #000}.result-overlay{z-index:8;background:#061320e6;display:flex;align-items:center;justify-content:center;padding:100px 20px}.results-card{width:min(520px,100%);padding:35px;background:linear-gradient(160deg,#112e3c,#07131d);border:1px solid #4c7881;border-radius:18px;text-align:center;box-shadow:0 30px 100px #000b}.results-card .menu-eyebrow{justify-content:center}.result-medal{font-size:80px;margin:20px 0 0}.results-card h2{font-size:43px;margin:10px 0}.results-card p{color:#b4c9d3}.result-stats{display:flex;justify-content:space-around;gap:12px;margin:28px 0}.result-stats>div{display:flex;flex-direction:column;gap:5px}.result-stats span{color:#8eacb5;font-size:9px;letter-spacing:1px;font-weight:900}.result-stats b{font-size:21px;color:var(--yellow)}.text-button{margin:13px auto 0;background:transparent;color:#b4d8eb;border:0;padding:10px;font-size:12px;font-weight:800;letter-spacing:1px}.pause-cover{position:absolute;z-index:9;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#06141de8}.pause-cover h2{font-size:65px;margin:0}.pause-cover p{color:#a5b9c8}.pause-cover button{padding:12px 26px;color:#072012;font-weight:900;background:#05d874;border:0;border-radius:9px}.pause-cover button.text-button{color:#c5dbea;background:transparent}
/* touch */
.touch-controls{position:absolute;z-index:5;bottom:25px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.touch-controls>div{display:flex;gap:11px;align-items:flex-end;pointer-events:auto}.touch-controls button{user-select:none;-webkit-user-select:none;touch-action:none;border:2px solid #93d2ff6b;color:#eaf6fb;background:#0e2a44ce;border-radius:18px;min-width:62px;min-height:65px;font-size:29px;font-weight:1000;box-shadow:inset 0 1px #ffffff50,0 6px 19px #0008}.touch-controls button:active,.touch-controls button.pressed{transform:scale(.94);background:#206fa1ed}.touch-controls .gas-btn{min-width:83px;min-height:84px;color:#06160d;background:#19d46f;border-color:#b4ffba;font-size:19px;border-radius:25px}.touch-controls .nitro-btn{border-color:#6ec8ff;color:#c4e9ff}.touch-controls .item-btn{border-color:#ffe278;color:#ffe278}.touch-controls .brake-btn{font-size:22px}.orientation-tip{position:absolute;z-index:6;top:78px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;border:1px solid #fce38e8c;background:#122333ed;border-radius:8px;color:#ffe6a6;font-size:11px;padding:7px 12px}
@media (max-width:850px){.screen-overlay{padding-left:28px;padding-top:92px}.menu-eyebrow{font-size:9px}.desktop-tips{max-width:420px}.garage{max-width:410px}h1{font-size:60px}.topline{padding:13px 20px}.brand strong{font-size:16px}.brand small{font-size:7px}}
@media (max-width:640px){.screen-overlay{background:linear-gradient(90deg,#07111bef,#07111bd7 82%,#07111bb3);padding:85px 17px 50px}.screen-overlay h1{font-size:clamp(42px,11vw,66px);letter-spacing:-3px}.main-copy{font-size:12px;margin:9px 0}.feature-badges{gap:4px;margin-bottom:13px}.feature-badges span{font-size:8px;padding:6px}.garage{padding:15px}.garage h2{font-size:17px}.car-preview{height:77px}.car-svg{height:86px}.stats{margin:8px 0 13px}.menu-bottom{font-size:8px}.desktop-tips{display:none}.game-footer{display:none}.top-right .tag{display:none}.brand-mark{width:40px;height:40px;font-size:19px}.brand strong{font-size:14px}.hud-row{gap:4px;margin:2px 0 0 9px}.hud-card{padding:8px 9px}.hud-card strong{font-size:22px}.timer-card strong{font-size:17px}.overline{font-size:8px}.hud-side{right:8px;top:1px;width:104px;gap:5px}.hud-side .hud-card{padding:8px}.speed-card strong{font-size:30px}.hud-side .hint{font-size:7px}.hud-small{font-size:9px}.race-message{font-size:17px}.touch-controls{left:9px;right:9px;bottom:17px}.touch-controls button{min-width:48px;min-height:50px;font-size:21px;border-radius:12px}.touch-controls>div{gap:6px}.touch-controls .gas-btn{min-width:59px;min-height:63px;font-size:14px;border-radius:16px}.touch-controls .brake-btn{font-size:17px}.touch-controls .nitro-btn,.touch-controls .item-btn{min-width:47px}.results-card{padding:20px}.results-card h2{font-size:29px}}
@media (max-height:650px) and (min-width:720px){.screen-overlay{padding-top:76px}.screen-overlay h1{font-size:53px;margin-top:2px}.main-copy{margin:7px 0}.feature-badges{margin-bottom:11px}.garage{padding:12px 15px;width:440px}.car-preview{height:70px}.car-svg{height:78px}.stats{margin:10px 0}.garage h2{font-size:17px}.desktop-tips{margin-top:12px;font-size:10px}.topline{padding-top:12px;padding-bottom:8px}.car-info{margin-top:0}}

@media (max-height:490px) and (min-width:680px){
  .screen-overlay{padding:70px 18px 12px 28px}
  .screen-overlay h1{font-size:39px;margin:2px 0;letter-spacing:-2px}
  .menu-eyebrow{font-size:8px}
  .main-copy,.feature-badges,.desktop-tips{display:none}
  .garage{margin-top:6px;max-width:390px;padding:8px 13px}
  .garage h2{font-size:14px;margin:1px 0}
  .garage .overline{font-size:8px}
  .car-picker{margin:4px 0}
  .car-preview{height:28px}
  .car-svg{display:none}
  .car-glow{display:none}
  .car-info{margin-top:0}
  .car-info strong{font-size:11px}
  .car-info span{font-size:9px}
  .stats{margin:5px 0 7px;gap:6px}
  .stats label{font-size:7px;margin-bottom:3px}
  .start-button{font-size:11px;padding:10px 12px}
  .menu-bottom{margin-top:7px;font-size:7px}
  .brand-mark{width:35px;height:35px}
  .brand strong{font-size:13px}
  .topline{padding:8px 16px}
  .hud{inset:52px 0 0}
  .hud-row{margin:4px 0 0 12px}
  .hud-side{top:4px}
  .touch-controls{bottom:10px}
}