:root{--blue:#20b8f4;--navy:#083d82;--green:#35ca51;--safeT:env(safe-area-inset-top,0px);--safeB:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#69cdf7;font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;color:#173b73}button,input{font:inherit}button{border:0;cursor:pointer}.screen{position:fixed;inset:0;display:none}.screen.active{display:block}
/* START */
.start-screen{background:#65cef8}.start-art{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.start-hit{position:absolute;left:15%;right:15%;bottom:10.4%;height:13%;border-radius:42px;background:transparent}.reset-hit{position:absolute;left:28%;right:28%;bottom:3.4%;height:4.8%;border-radius:22px;background:transparent}
/* SETUP */
.setup-screen{background:linear-gradient(#55c9f8 0 58%,#f7f8df 58%);overflow:auto;padding:calc(10px + var(--safeT)) 10px calc(18px + var(--safeB))}.setup-card{position:relative;width:min(100%,520px);min-height:calc(100dvh - var(--safeT) - var(--safeB) - 28px);margin:auto;background:linear-gradient(#fffefa,#fffef0);border:5px solid #fff;border-radius:34px;box-shadow:0 14px 40px #144c7630;padding:13px 16px 22px;display:flex;flex-direction:column;align-items:center;gap:10px}.round-back{position:absolute;left:12px;top:12px;width:48px;height:48px;border-radius:50%;background:linear-gradient(#52c9ff,#178ddb);color:white;border:3px solid white;box-shadow:0 4px 0 #0872b4;font-size:30px;font-weight:900;z-index:4}.setup-card h1{text-align:center;margin:7px 50px 0;line-height:.92}.setup-card h1 small{display:block;color:white;font-size:clamp(24px,6.2vw,34px);text-shadow:0 4px 0 #0b438b}.setup-card h1 strong{display:block;color:#ffd328;font-size:clamp(35px,10vw,54px);text-shadow:0 4px 0 #0b438b}.setup-preview{position:relative!important;width:100%;height:clamp(190px,28vh,280px);display:flex;align-items:center;justify-content:center}.setup-preview img{max-width:78%;max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 10px #0003);transition:transform .18s ease}.setup-preview .girl-bow{position:absolute;right:18%;top:15%;font-size:48px}.girl-bow{display:none;z-index:5;filter:drop-shadow(0 3px 2px #0003)}.girl .girl-bow,.setup-preview.girl .girl-bow{display:block}.gender-picker{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}.gender{min-height:58px;border-radius:22px;background:#eef8ff;border:4px solid #c9e8f8;color:#1688db;font-size:20px;font-weight:900}.gender.active{border-color:#168fe3;box-shadow:0 5px 0 #0b6fb3}.gender[data-gender=girl]{background:#fff0f8;color:#d72a89;border-color:#f5c6df}.gender[data-gender=girl].active{border-color:#ed69af;box-shadow:0 5px 0 #bd3e82}.name-label{font-size:17px;font-weight:900;margin-top:2px}.setup-card input{width:96%;height:58px;border-radius:20px;border:4px solid #d7d7d7;background:#fff;text-align:center;font-size:27px;font-weight:900;color:#172e62;outline:none}.color-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;width:100%;padding:2px 5px}.color{aspect-ratio:1;border-radius:50%;background:var(--sw);border:5px solid white;box-shadow:0 0 0 3px #d7d7d7,0 4px 6px #0002}.color.active{box-shadow:0 0 0 5px #32c852,0 6px 9px #0002;transform:scale(1.06)}.main-btn{min-height:58px;padding:10px 24px;border-radius:24px;background:linear-gradient(#60e94f,#17b52e);color:white;font-size:24px;font-weight:900;text-shadow:0 2px 1px #087426;box-shadow:inset 0 0 0 4px #fff,0 7px 0 #078d2a,0 10px 18px #0002}.main-btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 4px #fff,0 3px 0 #078d2a}.main-btn:disabled{filter:grayscale(.7);opacity:.6}.setup-done{width:min(82%,340px);margin-top:2px}
/* GAME HEADER */
.game-screen{background:#dff5ff;padding-top:var(--safeT);display:none!important}.game-screen.active{display:grid!important;grid-template-rows:86px minmax(0,1fr);height:100dvh}.game-header{z-index:50;background:linear-gradient(#fff,#edf9ff);border-bottom:3px solid white;box-shadow:0 4px 12px #174c7630;padding:5px 8px}.header-row{height:39px;display:flex;align-items:center;gap:7px}.icon-btn{width:38px;height:38px;border-radius:50%;background:linear-gradient(#51c7ff,#158cdf);color:white;border:3px solid white;box-shadow:0 3px 0 #0b70af;font-size:21px;font-weight:900}.scene-title{flex:1;text-align:center;font-size:18px;font-weight:1000;color:#114a94}.weather-chip{min-width:45px;height:36px;border-radius:18px;background:#fff;border:2px solid #cceafa;font-size:20px;box-shadow:0 2px 4px #0001}.meters{height:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:3px}.meter{display:grid;grid-template-columns:21px 1fr;grid-template-rows:1fr 12px;gap:1px 3px;align-items:center;background:#fff;border:2px solid #d4edf8;border-radius:13px;padding:2px 4px}.meter span{grid-row:1/3;font-size:17px}.meter i{height:12px;border-radius:8px;background:#dfe7eb;border:1px solid #9caab2;overflow:hidden}.meter em{display:block;height:100%;background:linear-gradient(90deg,#58df48,#2fb837);transition:width .3s}.meter:nth-child(2) em{background:linear-gradient(90deg,#61d8ff,#148be0)}.meter:nth-child(3) em{background:linear-gradient(90deg,#ffe356,#f4a91c)}.meter:nth-child(4) em{background:linear-gradient(90deg,#ff91c7,#ef3b8c)}.meter b{font-size:7px;line-height:1;text-align:center;color:#2e537e;white-space:nowrap}
/* SCENE COMMON */
.scene{position:relative;overflow:hidden;min-height:0;background:#7bd7fb}.scene-view{position:absolute;inset:0;display:none;overflow:hidden}.scene-view.active-view{display:block}.scene-car{position:absolute;z-index:9}.scene-car .car-art{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 12px 8px #0005)}.scene-car .girl-bow{position:absolute;right:10%;top:5%;font-size:36px}.scene-car.girl .girl-bow{display:block}.weather-layer{position:absolute;inset:0;z-index:29;pointer-events:none}.speech{position:absolute;z-index:35;left:12px;top:10px;max-width:58%;min-height:44px;border-radius:22px;background:#fffffff1;color:#143d78;border:3px solid #0d4d91;padding:7px 34px 7px 12px;font-weight:900;font-size:14px;line-height:1.1;box-shadow:0 5px 12px #0003}.speech:after{content:"";position:absolute;left:27%;bottom:-12px;border:7px solid transparent;border-top-color:#0d4d91}.speech small{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
/* GARAGE */
.garage-photo{position:absolute;inset:0;background:url('assets/scenes/garage.jpg?v=3') center/cover no-repeat}.garage-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 56%,#0005 100%)}.garage-car-shell{width:min(63vw,360px);height:min(38vh,325px);left:50%;top:16%;transform:translateX(-50%)}.garage-actions{position:absolute;z-index:15;left:10px;right:10px;bottom:92px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.garage-actions button{height:58px;background:#fffffff0;border:3px solid white;border-radius:16px;box-shadow:0 4px 8px #0003;font-size:22px}.garage-actions span{display:block;font-size:9px;font-weight:900;color:#173d79}.destination-dock{position:absolute;z-index:16;left:0;right:0;bottom:0;height:82px;padding:7px 7px calc(7px + var(--safeB));display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(transparent,#16365a66)}.destination-dock::-webkit-scrollbar{display:none}.destination{flex:0 0 88px;height:68px;border-radius:17px;border:3px solid white;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 #0004;font-weight:900;text-shadow:0 2px 1px #0004}.destination span{font-size:23px}.destination b{font-size:10px}.destination.gas{background:linear-gradient(#ffd32d,#ee9810)}.destination.wash{background:linear-gradient(#49ccff,#178ade)}.destination.track{background:linear-gradient(#65df5e,#24a936)}.destination.bistro{background:linear-gradient(#ffb639,#f07c24)}.destination.city{background:linear-gradient(#a96df0,#7045c9)}
/* OUTDOOR */
.outdoor-sky,.wash-sky,.bistro-sky,.city-sky,.track-sky{position:absolute;inset:0;background:linear-gradient(#51c9ff 0 48%,#d6f7ff 48% 56%,#76d65a 56%)}.green-hills{position:absolute;left:-12%;right:-12%;bottom:18%;height:38%;background:radial-gradient(ellipse at 18% 100%,#4caf43 0 45%,transparent 46%),radial-gradient(ellipse at 58% 100%,#67c94f 0 48%,transparent 49%),radial-gradient(ellipse at 95% 100%,#3fa948 0 42%,transparent 43%)}.scene-road{position:absolute;left:-18%;right:-18%;bottom:-18%;height:45%;background:#50575e;transform:perspective(680px) rotateX(58deg);border-top:8px solid #fff}.scene-road:after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:7px dashed #ffd42a}.scene-building{position:absolute;object-fit:contain;filter:drop-shadow(0 15px 12px #0004)}
/* GAS */
.gas-station{width:96%;height:59%;left:2%;top:2%;z-index:4}.gas-car-shell{width:min(58vw,325px);height:min(29vh,245px);left:7%;bottom:15%}.action-card{position:absolute;left:10px;right:10px;bottom:10px;z-index:20;background:#fffffff0;border:4px solid white;border-radius:21px;padding:8px 10px;box-shadow:0 7px 16px #0003}.action-copy{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:5px}.big-progress i{display:block;height:18px;border-radius:10px;background:#dce5ea;border:2px solid #a8b3ba;overflow:hidden;margin-bottom:7px}.big-progress em{display:block;height:100%;background:linear-gradient(90deg,#54df48,#2caf35);width:78%}.main-btn.compact{min-height:45px;border-radius:19px;font-size:17px;padding:7px 18px}.gas-panel .main-btn{width:100%}.fuel-drops{position:absolute;inset:0;z-index:12;pointer-events:none}.fuel-drop{position:absolute;font-size:22px;animation:fuelFly .7s ease-in forwards}@keyframes fuelFly{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(-30vw,22vh) scale(1.1);opacity:0}}
/* WASH */
.carwash-building{width:108%;height:75%;left:-4%;top:-5%;z-index:3}.wash-car-shell{left:50%;transform:translateX(-50%);bottom:14%;width:min(62vw,340px);height:min(30vh,255px)}.wash-controls{position:absolute;z-index:20;left:7px;right:7px;bottom:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.wash-controls button{height:67px;border-radius:17px;border:3px solid white;color:white;font-size:22px;box-shadow:0 4px 0 #0004}.wash-controls button b{display:block;font-size:9px}.wash-controls button:nth-child(1){background:#ee62b5}.wash-controls button:nth-child(2){background:#f4b51d}.wash-controls button:nth-child(3){background:#2aa8ec}.wash-controls button:nth-child(4){background:#4bcf62}.wash-controls button.done{box-shadow:0 0 0 4px #58df58,0 4px 0 #197a2b}.wash-fx{position:absolute;inset:0;z-index:12;pointer-events:none}.foam-bubble{position:absolute;border-radius:50%;background:#fff;box-shadow:inset -4px -5px 0 #bde8ff;animation:bubblePop 1.6s ease-out forwards}@keyframes bubblePop{0%{transform:scale(.2);opacity:0}25%{opacity:.95}100%{transform:translateY(-60px) scale(1.2);opacity:0}}.water-drop{position:absolute;width:4px;height:38px;background:linear-gradient(transparent,#77d9ff);border-radius:10px;animation:rainFall .55s linear forwards}@keyframes rainFall{to{transform:translateY(60vh);opacity:.1}}.air-streak{position:absolute;height:4px;background:#e8fbff;border-radius:10px;animation:airMove .55s linear forwards}@keyframes airMove{to{transform:translateX(65vw);opacity:0}}
/* TRACK */
.track-sky{background:linear-gradient(#4fc5ff 0 54%,#79d85d 54%)}.track-hills{position:absolute;left:-10%;right:-10%;bottom:31%;height:34%;background:radial-gradient(ellipse at 15% 100%,#3ca04a 0 45%,transparent 46%),radial-gradient(ellipse at 50% 100%,#59b94e 0 50%,transparent 51%),radial-gradient(ellipse at 90% 100%,#348d45 0 44%,transparent 45%)}.track-loop{position:absolute;width:48vw;max-width:250px;aspect-ratio:1;border:20px solid #ff6c19;border-radius:50%;right:2%;top:17%;box-shadow:inset 0 0 0 5px #f44414,0 8px 0 #c63c11;z-index:3}.track-loop i{position:absolute;inset:20%;border-radius:50%;border:3px dashed #fff8}.track-ramp{position:absolute;width:36%;height:12%;right:18%;bottom:32%;background:#4b535a;transform:skewY(-12deg);border:6px solid #f37822;z-index:4}.track-road{position:absolute;left:-15%;right:-15%;bottom:12%;height:29%;background:#343a40;transform:rotate(-4deg);border-top:9px solid #fff;border-bottom:9px solid #fff;box-shadow:0 9px 0 #d42a2a}.track-road:after{content:"";position:absolute;left:0;right:0;top:47%;border-top:6px dashed #ffd329}.track-flags{position:absolute;top:17%;left:6%;font-size:32px;z-index:4}.race-car-shell{width:min(46vw,265px);height:min(24vh,210px);left:5%;bottom:23%}.race-bar{position:absolute;z-index:18;left:10px;right:10px;bottom:10px;display:flex;gap:8px;align-items:center}.race-bar .main-btn{flex:1}.result-pill{flex:1;background:#fffffff0;border-radius:18px;padding:10px;text-align:center;font-weight:900;border:3px solid white;font-size:13px}
/* BISTRO */
.bistro-building{width:94%;height:60%;right:-2%;top:0;z-index:3}.bistro-car-shell{left:3%;bottom:24%;width:min(48vw,285px);height:min(26vh,225px)}.food-tray{position:absolute;z-index:17;left:8px;right:8px;bottom:65px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.food-item{height:84px;border-radius:18px;background:#fffffff0;border:3px solid white;box-shadow:0 4px 0 #0003;overflow:hidden;padding:2px;color:#173b73}.food-item img{width:53px;height:53px;object-fit:contain}.food-item b{display:block;font-size:9px}.food-item.selected{box-shadow:0 0 0 4px #48cd58,0 4px 0 #197a2b}.deliver-btn{position:absolute;z-index:18;left:10px;right:10px;bottom:9px;width:calc(100% - 20px)}.cargo-rack{position:absolute;right:14%;top:10%;display:flex}.cargo-rack img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 2px #0004)}.delivery-truck{position:absolute;width:65vw;max-width:420px;right:-80%;bottom:22%;z-index:15;filter:drop-shadow(0 14px 10px #0005);transition:right .8s cubic-bezier(.2,.8,.2,1)}.delivery-truck.show{right:1%}
/* CITY */
.city-sky{background:linear-gradient(#55c8ff 0 46%,#daf7ff 46% 55%,#7dd759 55%)}.city-houses{position:absolute;left:0;right:0;top:25%;height:33%;display:flex;align-items:flex-end;justify-content:space-around;z-index:2}.city-houses i{width:18%;height:73%;background:#ffd773;border:5px solid #fff;border-radius:8px 8px 0 0;box-shadow:0 6px 0 #df9c37}.city-houses i:nth-child(2){height:95%;background:#ef7d77}.city-houses i:nth-child(3){height:81%;background:#75c6ee}.city-houses i:nth-child(4){height:90%;background:#a9d77b}.city-houses i:nth-child(5){height:69%;background:#f0a9cc}.city-fountain{position:absolute;left:50%;transform:translateX(-50%);top:42%;font-size:54px;z-index:5}.city-road{position:absolute;left:-15%;right:-15%;bottom:-10%;height:49%;background:#535a60;transform:perspective(700px) rotateX(60deg);border-top:8px solid white}.city-road:after{content:"";position:absolute;left:0;right:0;top:48%;border-top:7px dashed #ffd52e}.city-car-shell{width:min(49vw,285px);height:min(26vh,220px);left:3%;bottom:19%}.city-truck{position:absolute;width:37vw;max-width:230px;right:1%;bottom:25%;z-index:7;filter:drop-shadow(0 10px 7px #0004)}.city-controls{position:absolute;left:8px;right:8px;bottom:8px;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.city-controls button{height:65px;border-radius:18px;background:#fffffff0;border:3px solid white;box-shadow:0 4px 0 #0003;color:#183d78;font-size:21px}.city-controls b{display:block;font-size:9px}
/* WEATHER */
.weather-layer.rain{background-image:repeating-linear-gradient(110deg,transparent 0 17px,#bdeaffaa 18px 20px,transparent 21px 45px);animation:rainSlide .45s linear infinite}@keyframes rainSlide{to{background-position:-26px 50px}}.weather-layer.snow{background-image:radial-gradient(circle,#fff 0 3px,transparent 4px),radial-gradient(circle,#fff 0 2px,transparent 3px);background-size:55px 55px,37px 37px;animation:snowSlide 4s linear infinite}@keyframes snowSlide{to{background-position:25px 80px,-20px 60px}}.weather-layer.storm{background:#24365955;animation:flash 5s infinite}@keyframes flash{0%,91%,94%,100%{background:#24365955}92%{background:#ffffff55}93%{background:#24365955}}
/* SLEEP */
.sleep-overlay{position:absolute;inset:0;z-index:60;background:radial-gradient(circle at 50% 25%,#3a5698,#101b48 65%,#070d28);display:flex;align-items:center;justify-content:center;overflow:hidden}.sleep-overlay.hidden{display:none}.stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#ffe68a 0 2px,transparent 3px);background-size:55px 55px,83px 83px;animation:twinkle 2.2s ease-in-out infinite alternate}@keyframes twinkle{to{opacity:.55}}.sleep-card{position:relative;z-index:2;width:min(90%,420px);text-align:center;color:white}.sleep-card img{width:82%;max-height:40vh;object-fit:contain;filter:drop-shadow(0 15px 12px #0007)}.sleep-card b{display:block;font-size:28px}.sleep-card small{display:block;margin-top:7px;color:#dce9ff;font-size:14px}.zzz{position:absolute;right:8%;top:0;font-size:34px;font-weight:900;color:#fff39c;animation:zzz 1.4s ease-in-out infinite alternate}@keyframes zzz{to{transform:translateY(-10px) scale(1.12);opacity:.65}}
/* MODAL */
.modal{position:fixed;inset:0;z-index:100;background:#06203f99;display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.settings-card{width:min(92vw,430px);background:#fffdf5;border:5px solid white;border-radius:28px;padding:24px 18px;box-shadow:0 18px 50px #0005;position:relative}.settings-card h2{text-align:center;margin:0 0 18px;color:#154a8f}.modal-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border-radius:50%;background:#ef4944;color:white;font-size:27px}.toggle-row{display:flex;align-items:center;justify-content:space-between;background:#edf8ff;border-radius:18px;margin:10px 0;padding:12px 14px;font-weight:900}.toggle-row input{display:none}.toggle-row i{width:55px;height:31px;border-radius:18px;background:#bbb;position:relative}.toggle-row i:after{content:"";position:absolute;width:25px;height:25px;border-radius:50%;background:white;left:3px;top:3px;transition:.2s}.toggle-row input:checked+i{background:#39ce59}.toggle-row input:checked+i:after{left:27px}.voice-info{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#5d7696;padding:0 5px 7px;gap:8px}.voice-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voice-info button,.sub-btn{background:#2a9de6;color:white;padding:8px 11px;border-radius:13px;font-weight:900}.sub-btn{width:100%;margin-top:12px;font-size:16px;padding:12px}.voice-note{font-size:11px;line-height:1.25;color:#70859d;margin:12px 3px 0}.toast{position:fixed;left:50%;bottom:calc(18px + var(--safeB));transform:translate(-50%,30px);z-index:120;background:#133c73ed;color:white;padding:10px 18px;border-radius:20px;font-weight:900;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:760px){.game-screen.active{grid-template-rows:94px 1fr}.game-header{padding-left:max(20px,calc((100vw - 980px)/2));padding-right:max(20px,calc((100vw - 980px)/2))}.scene-title{font-size:22px}.garage-car-shell{width:390px;height:350px;top:13%}.garage-actions{left:50%;right:auto;transform:translateX(-50%);width:520px;bottom:96px}.destination-dock{justify-content:center}.destination{flex-basis:140px}.gas-car-shell,.wash-car-shell,.bistro-car-shell,.city-car-shell{width:360px;height:300px}.wash-controls,.city-controls,.food-tray,.action-card,.race-bar{left:50%;right:auto;transform:translateX(-50%);width:min(720px,92vw)}}