*{box-sizing:border-box}html,body{margin:0;overflow:hidden;width:100%;height:100%;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#27233b;background:#d5c8ed}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:11px 17px;background:#fff9ed;color:#302743;font-weight:700}button:hover{filter:brightness(.95)}button:focus-visible,a:focus-visible{outline:3px solid #f8b82e;outline-offset:4px}#game{display:block;width:100%;height:100%}header{position:absolute;top:26px;left:32px;right:32px;display:flex;align-items:flex-start;justify-content:space-between;z-index:2;pointer-events:none}header>*{pointer-events:auto}.brand{font-size:22px;letter-spacing:-1px;color:#302743;text-decoration:none;font-weight:950;line-height:1.1}.brand span{color:#7655cc}.brand small{display:block;font-size:9px;letter-spacing:2.6px;margin-top:8px}.tools{display:flex;gap:8px}.tools button{background:#fff9edcc}.stats{position:absolute;left:32px;top:111px;display:flex;gap:34px;padding:16px 23px;background:#fff9edf2;border-radius:17px;box-shadow:0 6px 25px #38205012}.stats small{display:block;font-size:9px;letter-spacing:1.8px;color:#82778d;font-weight:800}.stats strong{font-size:27px;line-height:1.4}.stats em{font-size:12px;font-style:normal;color:#8b8196}.charge{position:absolute;right:32px;top:112px;background:#fff9edf2;border-radius:15px;padding:14px 18px;display:flex;gap:12px;align-items:center}.charge span{font-size:10px;letter-spacing:1px;font-weight:800}.charge>div{width:100px;height:8px;background:#e6dfeb;border-radius:8px;overflow:hidden}.charge i{display:block;height:100%;background:#8663d3;border-radius:8px}.charge b{color:#8663d3}#gps{position:absolute;bottom:65px;left:50%;transform:translateX(-50%);background:#fff9edf2;padding:11px 19px;border-radius:14px;display:flex;align-items:center;gap:12px;white-space:nowrap;max-width:94%;box-shadow:0 6px 30px #30274315}#gps span{background:#e4d9f5;color:#7254aa;padding:5px 7px;font-size:10px;font-weight:900;border-radius:6px}#gps p{font-size:13px;margin:0;white-space:normal}#menu{position:absolute;inset:0;display:flex;align-items:center;padding:88px 6vw 50px;background:linear-gradient(90deg,#ede3f0aa,transparent 75%)}.card{background:#fff9edee;border:1px solid #ffffffaa;border-radius:25px;padding:34px;max-width:490px;box-shadow:0 20px 90px #39235319;backdrop-filter:blur(12px)}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:#9b7aab}h1{font-size:clamp(38px,4.4vw,62px);letter-spacing:-3px;line-height:1.04;margin:19px 0}h1 span{color:#8660ca}p.intro{font-size:14px;line-height:1.8;color:#7c7187}.controls{display:grid;grid-template-columns:1fr 1fr;gap:15px 10px;margin:25px 0}.controls>div{display:flex;align-items:center;gap:10px}.controls span{font-size:12px;color:#8c8197}kbd{font:700 11px system-ui;background:#eee6f1;border:1px solid #ddd1e5;border-bottom:3px solid #d9cce2;border-radius:6px;padding:7px 8px;min-width:45px;text-align:center}.primary{background:#8056ca;color:#fff;width:100%;padding:17px 20px;text-align:left;box-shadow:0 5px 0 #61419f}.primary span{float:right}.foot{font-size:10px;color:#9c8fa4;line-height:1.7;margin-top:21px}.foot b{display:block;color:#705887;margin-top:5px}footer{position:absolute;bottom:21px;width:100%;text-align:center;font-size:10px;color:#5d4a7e;letter-spacing:.4px;pointer-events:none}.hidden{display:none!important}#trick{position:absolute;top:29%;width:100%;text-align:center;font-size:32px;font-weight:950;color:#fff9ed;text-shadow:0 3px 0 #6d4b9f,0 6px 30px #6d4b9f;pointer-events:none;transition:opacity .25s;opacity:0}.modal{position:absolute;inset:0;display:grid;place-items:center;background:#342c4b55;backdrop-filter:blur(5px);z-index:4}.modal .card{width:350px}.modal h2{font-size:32px}.modal #restart{margin-top:18px;width:100%;background:#eae0f1}#touch{display:none;position:absolute;bottom:110px;left:15px;right:15px;justify-content:space-between;gap:8px}#touch>div{display:flex;gap:6px;flex-wrap:wrap;max-width:60%}#touch button{touch-action:none;user-select:none;font-size:12px;padding:15px;background:#fff9edcc}@media(pointer:coarse){body.playing #touch{display:flex}footer{display:none}#gps{bottom:23px}}@media(max-width:650px){header{left:18px;right:18px;top:18px}.brand{font-size:18px}.brand small{font-size:7px}.tools button{font-size:11px;padding:9px}.stats{top:85px;left:15px;padding:10px 14px;gap:22px}.stats strong{font-size:21px}.charge{top:165px;right:15px;padding:10px}.charge>div{width:60px}#menu{justify-content:center;padding:90px 16px 60px}.card{padding:25px}h1{font-size:43px}.controls{margin:18px 0;gap:10px}#gps{font-size:11px}#trick{font-size:25px;top:33%}footer{font-size:8px;padding:0 12px}}

/* Sunny cartoon backdrop behind the transparent WebGL canvas. */
#game{background:linear-gradient(180deg,#75c9f2 0%,#b6e5f4 43%,#edf4cd 74%,#d3edac 100%)}
#hint{color:#334f58;font-weight:600;text-shadow:0 1px 3px #fff9ed}
/* Three destinations; previews remain selectable before starting a run. */
#menu>.card{max-width:560px;padding:25px 29px;max-height:calc(100svh - 155px);overflow:auto;scrollbar-width:thin;scrollbar-color:#c4b3dc transparent}#menu h1{font-size:44px;margin:12px 0;line-height:1.03}#menu .intro{font-size:12px;line-height:1.6;margin:10px 0}#menu .controls{margin:16px 0;gap:10px}#menu .foot{margin-top:14px}.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;padding:0;margin:18px 0 0}.tracks legend{font-size:9px;font-weight:900;letter-spacing:1.7px;color:#90759c;padding:0;margin-bottom:8px}.tracks button{padding:5px 5px 10px;background:#f1eaf2;border:2px solid transparent;border-radius:12px;min-width:0;text-align:left;transition:transform .15s,border-color .15s}.tracks button:hover{transform:translateY(-2px)}.tracks button[aria-pressed=true]{border-color:#8056ca;background:#e9def5;box-shadow:0 0 0 2px #8056ca15}.track-art{display:flex;height:54px;align-items:center;justify-content:center;font-size:31px;border-radius:7px;margin-bottom:7px;overflow:hidden}.sunset-art{background:linear-gradient(#44266d,#ed6a9b 55%,#ffce77)}.country-art{background:linear-gradient(#77cef1 55%,#b3df79 56%)}.city-art{background:linear-gradient(#263955,#6787a4)}.tracks b{display:block;font-size:10px;padding:0 3px}.tracks small{display:block;font-size:8px;line-height:1.5;color:#93829e;padding:4px 3px 0}.modal #choose-track{margin-top:9px;width:100%;background:#eae0f1}body[data-track=sunset] #game{background:linear-gradient(#352158 0%,#944276 30%,#fa8f91 63%,#ffd07a 83%,#dc86a9 100%)}body[data-track=city] #game{background:linear-gradient(#243653,#6586a6 60%,#a9c7d8 100%)}body[data-track=sunset] header .brand,body[data-track=city] header .brand{color:#fff9ed}body[data-track=sunset] #hint,body[data-track=city] #hint{color:#fff9ed;text-shadow:0 1px 3px #221932}@media(max-width:650px){#menu{padding:86px 14px 70px}#menu>.card{padding:20px;max-height:calc(100svh - 155px)}#menu h1{font-size:36px}.tracks b{font-size:9px}.tracks small{font-size:7px}.track-art{height:45px;font-size:25px}#menu .controls{gap:8px}#menu .primary{font-size:13px;padding:14px}}
.paint-picker{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}.paint-picker>span{font-size:9px;letter-spacing:1.2px;font-weight:900;color:#90759c}.paint-swatches{display:flex;gap:7px}.paint-swatches button{padding:0;width:24px;height:24px;border-radius:50%;background:var(--paint);border:2px solid #fff;box-shadow:0 0 0 1px #d4c7dc}.paint-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px #8056ca;transform:scale(1.12)}.custom-paint{display:flex;gap:5px;align-items:center;font-size:10px;color:#84718f;margin-left:auto}.custom-paint input{width:28px;height:27px;padding:0;border:0;background:transparent;cursor:pointer}
/* Two-thumb mobile controls: analog driving on the left, stunt icons on the right. */
#touch{bottom:calc(85px + env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));align-items:flex-end;pointer-events:none}#touch .stick-wrap{display:flex;flex-direction:column;align-items:center;gap:9px;max-width:none;pointer-events:auto}#joystick{position:relative;width:126px;height:126px;border-radius:50%;background:#fff9ed33;border:2px solid #fff9edb0;box-shadow:inset 0 0 22px #30274325,0 4px 16px #30274325;touch-action:none;user-select:none}#stick-knob{position:absolute;left:calc(50% - 25px);top:calc(50% - 25px);width:50px;height:50px;border-radius:50%;background:#fff9ede8;border:3px solid #a484dd;box-shadow:0 4px 12px #30274340;pointer-events:none}.active #stick-knob{background:#d8c1ff}#joystick span{position:absolute;color:#fff9edbb;font-size:11px;pointer-events:none}.stick-up{top:5px;left:calc(50% - 5px)}.stick-down{bottom:5px;left:calc(50% - 5px)}.stick-left{left:7px;top:calc(50% - 7px)}.stick-right{right:7px;top:calc(50% - 7px)}#touch small{font-size:8px;font-weight:800;letter-spacing:.6px;color:#fff9ed;text-shadow:0 1px 4px #302743}#touch .touch-actions{display:grid;grid-template-columns:repeat(2,51px);gap:9px;max-width:none;pointer-events:auto}#touch .touch-actions button{padding:9px;width:51px;height:51px;border-radius:50%;border:2px solid #fff9edbb;background:#fff9edce;color:#65439e;box-shadow:0 3px 9px #30274320}#touch button svg{width:100%;height:100%;display:block}#touch button.pressed{background:#b798ed;color:white;transform:scale(.93)}#touch button[data-key=Space]{grid-column:span 2;width:111px;border-radius:25px;background:#8056cadb;color:#fff9ed}#touch button[data-key=Space] svg{width:31px;margin:auto}@media(max-width:650px){body.playing #touch{display:flex}footer{display:none}}@media(max-height:500px){#touch{bottom:calc(30px + env(safe-area-inset-bottom))}#joystick{width:106px;height:106px}#touch .touch-actions{grid-template-columns:repeat(3,45px);gap:7px}#touch .touch-actions button{width:45px;height:45px}#touch button[data-key=Space]{grid-column:span 2;width:97px}#gps{bottom:9px;padding:6px 10px;max-width:44%}#gps p{font-size:10px}}
#missions{position:absolute;top:111px;left:50%;transform:translateX(-50%);display:flex;gap:8px;pointer-events:none}.mission{position:relative;display:flex;align-items:center;gap:5px;background:#fff9edf2;border:2px solid #e6d9f0;border-radius:13px;padding:10px 9px;color:#7654b0;box-shadow:0 4px 15px #30274315}.mission-object{font-size:23px}.mission-plus{font-size:10px;color:#a594ae}.mission svg{width:25px;height:25px}.mission strong{font-size:20px;color:#302743;white-space:nowrap}.mission em{font-size:12px;color:#9c8aa8;font-style:normal}.mission b{font-size:11px;background:#e9def4;padding:3px;border-radius:5px}.mission-check{font-size:13px;color:#348355}.mission.complete{border-color:#6fb789;background:#efffedf0}.mission-reward{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-weight:900;color:#7250af;text-shadow:0 1px #fff}.mission-flash{animation:mission-pop 1.8s ease-out}@keyframes mission-pop{0%,30%{box-shadow:0 0 0 5px #c0a1ff99;transform:translateY(-4px)}100%{box-shadow:0 4px 15px #30274315}}@media(max-width:1150px){#missions{top:192px}}@media(max-width:650px){#missions{top:133px;gap:5px;width:calc(100% - 24px);justify-content:center}.mission{padding:7px 5px;gap:3px;flex:1;max-width:145px;justify-content:center;border-radius:10px}.mission-object{font-size:19px}.mission svg{width:21px;height:21px}.mission strong{font-size:17px}.mission em{font-size:10px}.mission b{font-size:9px;padding:2px}.mission-check{font-size:10px}.charge{top:198px}}@media(max-height:500px){#missions{top:80px;left:50%;width:auto}.mission{padding:5px;gap:3px}.mission svg{width:20px;height:20px}.mission-object{font-size:19px}.mission strong{font-size:16px}.stats{top:70px}.charge{top:130px}}
/* Decorative motion feedback stays behind every HUD and touch control. */
#speed-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s}body.nitro-active #speed-lines{opacity:.65}#speed-lines i{position:absolute;left:50%;top:48%;width:40vmax;height:2px;transform-origin:left center;transform:rotate(var(--angle)) translateX(28vmax);background:linear-gradient(90deg,transparent,#e4f7ffcc);animation:boost-streak .5s linear infinite;animation-delay:var(--delay)}@keyframes boost-streak{0%{opacity:0;transform:rotate(var(--angle)) translateX(21vmax) scaleX(.5)}45%{opacity:.9}100%{opacity:0;transform:rotate(var(--angle)) translateX(42vmax) scaleX(1.25)}}body.game-paused #speed-lines i{animation-play-state:paused}body.game-paused #speed-lines{opacity:0}@media(prefers-reduced-motion:reduce){#speed-lines{display:none}}
