*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#30203e;font-family:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;overscroll-behavior:none}body{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#503365,#291a36)}button{font:inherit;cursor:pointer;touch-action:none;user-select:none}button:focus-visible{outline:3px solid #ffed56;outline-offset:4px}#game-shell{container-type:size;position:relative;width:min(100vw,153.846vh);height:min(100vh,65vw);overflow:hidden;background:#211b14;box-shadow:0 0 90px #160f22aa;touch-action:none;user-select:none}canvas{display:block;width:100%;height:100%;outline:none}.top-tools{position:absolute;display:flex;gap:7px;top:2%;left:50%;transform:translateX(-50%)}
.candy{--top:#10bafb;--bottom:#00a0ee;--edge:#075091;--base:#00519c;background:linear-gradient(var(--top),var(--bottom));border:2px solid var(--edge);border-radius:17px;color:#fff;box-shadow:inset 0 2px 0 #ffffff65,inset 0 -4px 0 #0002,0 4px 0 var(--base),0 7px 0 #1a102b66;font-weight:1000;font-size:20px;line-height:1.1;letter-spacing:-.5px;text-shadow:2px 0 #25232a,-2px 0 #25232a,0 2px #25232a,0 -2px #25232a,2px 2px #25232a,-2px -2px #25232a,0 3px #25232a;padding:13px 18px;transition:filter .1s,transform .1s}.candy:hover{filter:brightness(1.09)}.candy:active,.candy.pressed{transform:translateY(3px);box-shadow:inset 0 2px 0 #ffffff45,0 1px 0 var(--base)}.red{--top:#ff333b;--bottom:#ff0b0e;--edge:#89122c;--base:#a00712}.orange{--top:#ffad12;--bottom:#ff8000;--edge:#975119;--base:#b25b00}.green{--top:#39ff0e;--bottom:#0fe500;--edge:#277e16;--base:#188807}.purple{--top:#b122ff;--bottom:#8c02ff;--edge:#4a087a;--base:#580691}.top-tools .candy{font-size:13px;padding:9px 12px;border-radius:11px}.top-tools .icon-button{font-size:19px;padding:4px 11px}.drive-controls{position:absolute;left:4%;bottom:6%;display:flex;gap:18px}.drive{width:clamp(49px,8.5vw,12vh);height:clamp(49px,8.5vw,12vh);padding:15px;border-radius:24px}.drive svg{width:100%;height:100%;overflow:visible}.drive path{fill:white;stroke:#292031;stroke-width:3;stroke-linejoin:round}#fire{position:absolute;right:5%;bottom:7%;width:clamp(58px,8vw,12vh);height:clamp(58px,8vw,12vh);padding:11px;border-radius:26px}#fire svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:3;filter:drop-shadow(1px 2px 0 #a80017)}#ammo{position:absolute;top:119%;left:50%;transform:translateX(-50%);white-space:nowrap;font:bold 10px Arial;color:#ffe467;letter-spacing:1px;text-shadow:0 2px #30203e}#nitro{position:absolute;right:16%;bottom:8%;font-size:13px;padding:15px 13px}#nitro:disabled{filter:grayscale(.7);cursor:default;opacity:.65}#hint{position:absolute;bottom:1.5%;left:50%;transform:translateX(-50%);color:#ffe7b8;font:bold 11px Arial;text-shadow:0 2px 2px #000;white-space:nowrap;transition:opacity 1s}.round-chip{position:absolute;top:10.5%;left:50%;transform:translateX(-50%);background:#38204de6;color:#ffe9b8;padding:6px 16px;border:1px solid #9857c5;border-radius:20px;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:1px}.hidden{display:none!important}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#513569f0,#30203fee);z-index:5;padding:32px 20px;color:#fff;overflow:auto}.panel{position:relative;width:min(92%,480px);max-height:100%;padding:50px 27px 26px;border:8px solid #9109f7;border-bottom-width:12px;border-radius:30px;background:#f9edc9;box-shadow:inset 0 0 0 2px #ddb874,0 4px 0 #4f077d,0 10px 4px #1f12334d;text-align:center;color:#634468;overflow:visible}.panel.wide{width:min(96%,840px)}.ribbon{position:absolute;top:-20px;left:-21px;right:-21px;height:54px;margin:0;border:2px solid #470075;border-radius:27px 27px 11px 11px;background:linear-gradient(#ac14ff,#8900eb);box-shadow:inset 0 2px 0 #dc74ff,0 3px 0 #62049a;color:white;font-size:29px;font-weight:1000;line-height:48px;text-shadow:0 2px #5e1092;z-index:1}.ribbon:before,.ribbon:after{content:'';position:absolute;top:31px;width:26px;height:32px;background:#8c04db;border:2px solid #470075;z-index:-1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,28% 50%)}.ribbon:before{left:-17px;transform:rotate(-13deg)}.ribbon:after{right:-17px;transform:rotate(193deg)}.close{position:absolute;right:12px;top:9px;width:29px;height:29px;border-radius:50%;background:#6700bd;border:2px solid #41026f;color:white;font:bold 20px Arial;text-shadow:1px 1px #240039;line-height:20px}.panel p{font-size:14px;line-height:1.5;margin:8px 0 17px}.small-label{font-size:11px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;color:#96732f}.panel .candy{display:block;width:100%;margin:12px 0 0}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:4px 0 18px}.button-grid .candy{margin:0}.audio-row{display:flex;gap:18px;margin:2px 0 24px;justify-content:center}.audio-toggle{display:flex;align-items:center;gap:7px;background:#f3d7ac;border:0;border-radius:18px;padding:0 10px 0 0;color:white;font-size:14px;font-weight:1000;text-shadow:1px 1px #28232d,-1px -1px #28232d,1px -1px #28232d,-1px 1px #28232d}.audio-toggle b{display:grid;place-items:center;width:48px;height:48px;border:2px solid #2d7a19;background:linear-gradient(#41ff17,#00d20c);border-radius:18px;color:white;box-shadow:inset 0 2px #c8ffac,0 3px #087707;font-size:29px}.audio-toggle.off b{background:linear-gradient(#ff383f,#ff1015);border-color:#9a1924;box-shadow:inset 0 2px #ff8e8e,0 3px #a61914}.audio-captions{display:flex;justify-content:space-around;margin:-12px 0 13px;font-size:10px;font-weight:bold;color:#957144}.setting-stack{display:grid;gap:4px}.settings-footer{font-size:11px;color:#9b8354;margin-top:16px}.coin-stack{position:absolute;right:-62px;bottom:18px;width:74px;height:82px;pointer-events:none}.coin-stack i{position:absolute;width:47px;height:38px;border-radius:50%;background:#ffe832;border:4px solid #ffbb00;box-shadow:inset 0 0 0 3px #fff67d,0 5px #d58b00,0 9px #ffb700;transform:rotate(-15deg)}.coin-stack i:nth-child(2){left:20px;top:20px}.coin-stack i:nth-child(3){left:0;top:36px}.medal{position:absolute;left:-58px;bottom:35px;display:grid;place-items:center;width:70px;height:70px;background:#ff6860;border:8px solid #f1c891;outline:3px solid #d68c58;border-radius:35%;transform:rotate(-10deg);box-shadow:0 4px #8d5060;color:white;font-size:27px;font-weight:1000;text-shadow:2px 2px #963237}.tutorial-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0 18px}.lesson{background:#f3dbac;border:2px solid #e7c68a;border-radius:18px;padding:18px 12px;min-width:0}.lesson .lesson-icon{font-size:32px;line-height:42px;display:block;color:#8229bd;font-weight:1000}.lesson h2{margin:7px 0;font-size:17px;color:#6a3582}.lesson p{font-size:12px;margin:7px 0 0}.keycap{display:inline-block;min-width:27px;padding:5px 7px;border-radius:7px;background:white;border:2px solid #c4a67a;box-shadow:0 2px #b59567;color:#604766;font-size:12px}.tutorial-bottom{display:flex;gap:14px;align-items:center}.tutorial-bottom .candy{flex:1}.tutorial-bottom .ready{flex:2}.first-tip{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);max-width:42%;padding:9px 15px;background:#fff1ca;border:3px solid #a00bff;border-radius:14px;box-shadow:0 3px #600694;color:#6a3883;text-align:center;font-size:12px;font-weight:bold;pointer-events:none}.garage-meta{display:flex;justify-content:space-between;font-weight:bold;color:#8a692f;font-size:12px}.cars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.car-choice{min-width:0;position:relative;background:#f2d9a7;border:3px solid #d2af6d;border-radius:15px;color:#543265;padding:7px;font-weight:bold;box-shadow:0 3px #bf9e61}.car-choice.selected{border-color:#9a06f1;background:#eed6ff;box-shadow:0 3px #69079d}.car-choice svg{width:100%;height:58px;display:block;filter:drop-shadow(0 4px 0 #0002)}.car-choice strong{font-size:13px;display:block}.car-choice small{display:block;font-size:9px;line-height:1.4;margin-top:5px;color:#805c36}.car-choice .new{position:absolute;right:3px;top:3px;background:#ff8810;color:white;border:1px solid #c66300;border-radius:5px;padding:2px 4px;font-size:8px}.selected-info{background:#ead6bb;border-radius:10px;font-size:12px;padding:10px;line-height:1.6;color:#704970}.rewards{display:flex;justify-content:center;gap:25px;font-size:25px;font-weight:1000;margin:18px 0;color:#bc821b}.result-title{font-size:35px;font-weight:1000;color:#8707cc;text-shadow:0 2px #d3a8e4;margin:4px}.status-text{min-height:16px;font-size:11px;color:#876443;margin:10px 0 0}.round-number{display:inline-block;border-radius:50%;background:#ffb316;border:3px solid #d48006;color:white;text-shadow:2px 2px #8c5f20;font-size:34px;font-weight:1000;padding:9px 20px;margin:6px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#30203e;color:#ffe8aa;font-weight:900;letter-spacing:3px}
@container(max-height:520px){.overlay{padding:24px 18px}.panel{padding:35px 19px 16px;border-width:6px;border-bottom-width:9px;border-radius:24px;max-width:94%}.panel:not(.wide){width:350px}.ribbon{height:40px;font-size:23px;line-height:36px;top:-17px;left:-15px;right:-15px}.ribbon:before,.ribbon:after{top:24px;height:24px}.close{width:25px;height:25px;top:5px;right:9px;font-size:17px}.panel .candy{font-size:15px;padding:9px 13px;border-radius:12px;margin-top:8px}.button-grid{gap:10px;margin:0 0 10px}.panel p{font-size:11px;margin:4px 0 9px}.audio-row{margin:2px 0 16px;gap:12px}.audio-toggle b{width:36px;height:36px;font-size:23px;border-radius:12px}.audio-toggle{font-size:11px}.audio-captions{font-size:9px;margin-bottom:8px}.settings-footer{display:none}.tutorial-steps{gap:9px;margin:5px 0 6px}.lesson{padding:8px}.lesson .lesson-icon{font-size:23px;line-height:26px}.lesson h2{font-size:13px;margin:5px 0}.lesson p{font-size:10px}.keycap{padding:3px 5px;font-size:10px;min-width:22px}.small-label{font-size:9px}.cars{gap:8px;margin:6px 0}.car-choice{padding:4px;border-width:2px;border-radius:10px}.car-choice svg{height:36px}.car-choice strong{font-size:11px}.car-choice small{font-size:8px;margin-top:2px}.selected-info{font-size:10px;padding:5px}.garage-meta{font-size:10px}.top-tools{gap:5px}.top-tools .candy{font-size:10px;padding:6px 9px;border-radius:8px}.top-tools .icon-button{font-size:14px;padding:3px 7px}.round-chip{top:11%;font-size:8px;padding:4px 9px}.drive-controls{gap:12px}.drive{padding:10px;border-radius:17px}#fire{border-radius:18px;padding:9px}#nitro{font-size:10px;padding:10px 9px;right:17%}#hint{font-size:8px}.first-tip{font-size:9px;padding:6px 9px}.coin-stack,.medal{display:none}.result-title{font-size:28px}.round-number{font-size:25px;padding:5px 14px}.status-text{font-size:9px;margin-top:5px}}
@media(max-width:540px) and (min-height:521px){.overlay{padding:21px 18px}.panel{padding:30px 15px 15px}.tutorial-steps{gap:5px}.lesson{padding:5px}.lesson h2{font-size:12px}.lesson p{font-size:9px}.lesson .lesson-icon{font-size:22px}.cars{gap:5px}.car-choice svg{height:30px}.car-choice small{display:none}.coin-stack,.medal{display:none}}

/* Keep all buttons inside the cream panel; scroll only when a portrait screen needs it. */
.overlay{align-items:safe center}.panel{max-height:none;flex-shrink:0}.status-text:empty{display:none}
@container(max-height:520px){.setting-stack{gap:0}.setting-stack .candy{font-size:14px;padding:7px 12px;margin-top:6px}.button-grid .candy{margin-top:0}.audio-row{margin-bottom:15px}.audio-captions{margin-bottom:5px}}

/* Bigger foreground controls and readable information at desktop and touch sizes. */
.drive{width:clamp(56px,9.5vw,13.5vh);height:clamp(56px,9.5vw,13.5vh)}
#fire{width:clamp(65px,9vw,13.5vh);height:clamp(65px,9vw,13.5vh)}
#ammo{font-size:13px;letter-spacing:1px}.round-chip{font-size:13px}.first-tip{font-size:14px}
.top-tools .candy{font-size:15px}.top-tools .icon-button{font-size:21px}
.car-choice svg{height:70px}.car-choice strong{font-size:15px}.car-choice small{font-size:11px}
@container(max-height:520px){.top-tools .candy{font-size:11px}.top-tools .icon-button{font-size:16px}.round-chip{font-size:10px}#ammo{font-size:11px}.first-tip{font-size:11px}.car-choice svg{height:42px}.car-choice strong{font-size:12px}.car-choice small{font-size:9px}#hint{font-size:10px}}

body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#game-shell{max-width:100%;max-height:100%}
#game-shell[inert]{pointer-events:none}