*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#14171c;color:#eef1f5;font:600 14px/1.3 system-ui,-apple-system,Segoe UI,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}#view{position:fixed;inset:0;width:100%;height:100%;display:block}#hud{position:fixed;inset:0;pointer-events:none;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}#round{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));background:#0a0c108c;padding:6px 10px}#status{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));background:#0a0c108c;padding:6px 10px;text-align:right;min-width:120px}#status .bar{height:6px;background:#333a44;margin-top:4px}#status .bar i{display:block;height:100%;background:#4cd07d;transition:width .2s}#status .parts{margin-top:4px;font-size:12px;opacity:.9}#status .bad{color:#ff5f56}#feed{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);text-align:center;font-size:13px}#feed div{background:#0a0c108c;padding:3px 8px;margin-bottom:3px;animation:fade 4s forwards}@keyframes fade{0%,75%{opacity:1}to{opacity:0}}#big{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:44px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 12px rgba(0,0,0,.6)}#big small{display:block;font-size:16px;font-weight:600;opacity:.85}#speed{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);font-size:20px;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,0,0,.7)}#touch{position:fixed;inset:0;display:none}body.playing #touch{display:block}.pad{position:absolute;top:0;bottom:0;width:50%}#throttle{left:0}#steer{right:0}.pad .track{position:absolute;display:none;background:#ffffff1f;border:1px solid rgba(255,255,255,.25)}.pad .knob{position:absolute;width:46px;height:46px;border-radius:50%;background:#ffffff73;left:50%;top:50%;margin:-23px}#steer .track{width:190px;height:56px;margin:-28px -95px;border-radius:28px}.pad.on .track{display:block}.pad.hb .knob{background:#ff5f56cc}.pad .hint{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));font-size:11px;opacity:.45;text-align:center;width:140px}#throttle .hint{left:max(18px,env(safe-area-inset-left))}#steer .hint{right:max(18px,env(safe-area-inset-right))}.pad.on .hint{display:none}#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0e1259}body.playing #start,body.garage #start,body.started #start{display:none}.panel{background:#14171ceb;padding:16px 18px;width:min(560px,92vw);max-height:94vh;overflow:auto}.panel h1{margin:0 0 2px;font-size:26px;letter-spacing:3px}.rule{margin:0 0 10px;opacity:.75;font-size:13px}#name{width:100%;padding:10px;font:inherit;font-size:16px;background:#0d0f13;color:inherit;border:1px solid #333a44;outline:none;-webkit-user-select:text;user-select:text}#cars{display:flex;gap:10px;margin:10px 0}.car{flex:1;background:#0d0f13;border:2px solid #333a44;padding:8px 10px;cursor:pointer}.car.on{border-color:#e8463f}.car b{display:block;font-size:16px}.car span{display:block;font-size:12px;opacity:.75;font-weight:500}#go{width:100%;padding:12px;font:inherit;font-size:17px;font-weight:800;background:#e8463f;color:#fff;border:0;cursor:pointer}.small{margin:8px 0 0;font-size:11px;opacity:.55;font-weight:500}.pedal{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));width:92px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.16);border-radius:14px;color:#eef1f58c;font-size:13px;font-weight:800;letter-spacing:1px;transition:opacity .25s,background .1s}.pedal small{font-size:10px;font-weight:600;opacity:.7;letter-spacing:0}#gas{left:max(18px,env(safe-area-inset-left));height:150px}#brake{left:calc(max(18px,env(safe-area-inset-left)) + 106px)}.pedal.down{background:#e8463f4d;border-color:#ffffff4d}#gas.down{background:#4cd07d47}#throttle.on .pedal{opacity:.15}#throttle.on .pedal.down{opacity:.45}#drive{display:flex;gap:6px;margin-bottom:10px}#drive button{flex:1;padding:8px 4px;font:inherit;font-size:12px;color:#eef1f5;background:#0d0f13;border:2px solid #333a44;cursor:pointer}#drive button.on{border-color:#e8463f}#drive button:disabled{opacity:.4;cursor:default}#drive button small{display:block;font-size:10px;opacity:.8;font-weight:500}#speed small{font-size:11px;opacity:.6}#back-bar{position:fixed;z-index:5;top:calc(max(10px,env(safe-area-inset-top)) + 38px);left:max(14px,env(safe-area-inset-left));display:none;gap:6px}body.playing #back-bar{display:flex}#back-bar button,#g-top button,#g-tools button,#g-stats .drives button{padding:8px 12px;font:inherit;font-size:13px;color:#eef1f5;background:#0a0c10a6;border:1px solid rgba(255,255,255,.22);cursor:pointer}button.primary{background:#e8463f!important;border-color:#e8463f!important;font-weight:800}button.danger{color:#ff8a84!important}button.dim{opacity:.45}button.on{border-color:#e8463f!important}#garage{display:none}body.garage #garage{display:block}body.garage #hud,body.garage #touch,body.garage #back-bar{display:none!important}#g-top{position:fixed;top:0;left:0;right:0;display:flex;gap:6px;align-items:center;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));background:#0e1014d9;z-index:4}#g-top .grow{flex:1}#g-name,#g-template{font:inherit;font-size:14px;color:#eef1f5;background:#0d0f13;border:1px solid #333a44;padding:7px 8px;-webkit-user-select:text;user-select:text}#g-name{width:140px}#g-drawer{position:fixed;left:0;top:calc(max(8px,env(safe-area-inset-top)) + 46px);bottom:0;width:calc(max(8px,env(safe-area-inset-left)) + 156px);padding-left:max(6px,env(safe-area-inset-left));display:flex;background:#0e1014d9;z-index:3}#g-tabs{display:flex;flex-direction:column;gap:4px;padding:6px 4px;width:58px;overflow-y:auto}#g-tabs button{font:inherit;font-size:10px;font-weight:700;color:#cdd3da;background:#1b2027;border:1px solid #2c333c;padding:9px 2px;cursor:pointer}#g-tabs button.on{border-color:#e8463f;color:#fff}#g-parts{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px 4px;align-content:start;touch-action:pan-y}#g-parts .part{position:relative;padding:0;background:#6b7480;border:2px solid transparent;cursor:pointer;aspect-ratio:1;overflow:hidden}#g-parts .part.on{border-color:#e8463f}#g-parts .part img{width:100%;height:100%;display:block}#g-parts .part span{position:absolute;left:0;right:0;bottom:0;font-size:8px;font-weight:600;line-height:1.1;color:#cfd5dc;background:#0a0c1099;padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#g-stats{position:fixed;right:max(10px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 52px);width:220px;background:#0e1014d9;padding:8px 10px;font-size:12px;z-index:3}#g-stats .row{display:flex;justify-content:space-between;margin:2px 0;font-weight:500}#g-stats .row b{font-weight:700}#g-stats .bar{height:5px;background:#333a44;margin:2px 0 5px}#g-stats .bar i{display:block;height:100%}#g-stats .drives{display:flex;gap:4px;margin:6px 0}#g-stats .drives button{flex:1;padding:5px 2px;font-size:11px}#g-stats .drives button:disabled{opacity:.35}#g-stats .state{font-size:11px;margin-top:4px}#g-stats .state.good{color:#4cd07d;font-weight:700}.bad{color:#ff5f56}#g-hint{position:fixed;left:calc(max(8px,env(safe-area-inset-left)) + 168px);right:200px;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 52px);font-size:11px;opacity:.6;text-align:center;pointer-events:none}#g-tools{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100vw - 190px);z-index:3}#g-tools button{min-width:54px;min-height:40px}#g-tools .t-held,#g-tools .t-selected{display:none}#g-tools[data-mode=held] .t-held,#g-tools[data-mode=selected] .t-selected{display:inline-block}#g-tools .swatch{min-width:40px;background:#b40000}#g-colors{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:calc(max(10px,env(safe-area-inset-bottom)) + 52px);display:none;grid-template-columns:repeat(5,34px);gap:5px;padding:6px;background:#0e1014eb;z-index:4}#g-colors.open{display:grid}#g-colors button{width:34px;height:34px;border:1px solid rgba(255,255,255,.3);cursor:pointer}#g-toast{position:fixed;left:50%;top:30%;transform:translate(-50%);background:#0a0c10e6;padding:10px 14px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:6;max-width:60vw;text-align:center}#g-toast.on{opacity:1}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#menu-back{position:fixed;inset:0;z-index:5;display:none;background:#04060a80}body.menu.playing #menu-back{display:block}#menu{position:fixed;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);display:none;flex-direction:column;gap:8px;box-sizing:border-box;width:min(480px,calc(100vw - (2*max(16px,env(safe-area-inset-left),env(safe-area-inset-right)))));max-height:calc(100vh - (2*max(10px,env(safe-area-inset-top),env(safe-area-inset-bottom))));max-height:calc(100dvh - (2*max(10px,env(safe-area-inset-top),env(safe-area-inset-bottom))));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 12px 12px;background:#0c0e13f5;border:1px solid rgba(255,255,255,.18);border-radius:10px;box-shadow:0 10px 40px #00000080}body.menu.playing #menu{display:flex}body.menu #menu-btn{border-color:#f2b33d;color:#f2b33d}#menu .menu-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;letter-spacing:.04em;color:#eef1f5}#menu .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}@media(max-width:420px){#menu .menu-grid{grid-template-columns:1fr}}#menu button{min-height:44px;padding:8px 12px;font:inherit;font-size:15px;color:#eef1f5;background:#ffffff12;border:1px solid rgba(255,255,255,.22);border-radius:6px;cursor:pointer;text-align:center}#menu #menu-close{min-height:36px;min-width:44px;padding:4px 10px;font-size:16px}#menu button.on{border-color:#f2b33d;color:#f2b33d}#menu .row{display:none;align-items:center;gap:6px;font-size:13px;color:#aab2bd}body.online #menu .row,#menu .row.always{display:flex}#menu .row>span:first-child{width:54px;flex:none}#menu .row #model,#menu .row #tone{flex:1}#menu #bot-less,#menu #bot-more{width:44px;padding:8px 0;flex:none}#menu #bot-n{flex:1;text-align:center;color:#eef1f5}@media(orientation:portrait){#steer{left:0;right:0;width:auto}#throttle{top:auto;height:calc(max(16px,env(safe-area-inset-bottom)) + 310px);width:calc(max(18px,env(safe-area-inset-left)) + 150px);z-index:1}.pedal{width:96px}#gas{height:140px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 122px)}#brake{left:max(18px,env(safe-area-inset-left));height:110px}#throttle .hint{display:none}#feed{top:calc(max(10px,env(safe-area-inset-top)) + 84px);width:90vw}#big{top:28%}#speed{left:auto;right:max(14px,env(safe-area-inset-right));transform:none;text-align:right}#steer .hint{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 34px);text-align:right}}@media(orientation:portrait){#g-top{flex-wrap:wrap}#g-top .grow{display:none}#g-name,#g-template{flex:1 1 40%;min-width:0;width:auto}#g-top button{flex:1 1 40%;min-height:40px}#g-stats{top:calc(max(8px,env(safe-area-inset-top)) + 100px);left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto;font-size:11px;padding:6px 10px}#garage #g-stats.open .more{display:grid;grid-template-columns:repeat(2,1fr);column-gap:14px}#g-stats .row{margin:1px 0}#g-stats .drives,#g-stats .state{grid-column:1 / -1}#g-stats .drives{margin:4px 0 2px}#g-drawer{top:auto;right:0;bottom:0;width:auto;height:calc(max(8px,env(safe-area-inset-bottom)) + 178px);transition:transform .25s ease;flex-direction:column;padding:0 max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}#g-tabs{flex-direction:row;width:auto;overflow-x:auto;overflow-y:hidden;padding:6px 2px 4px;flex:none;touch-action:pan-x}#g-tabs button{flex:none;padding:8px 12px;font-size:11px}#g-parts{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-auto-columns:66px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;padding:4px 2px}#g-parts .part{aspect-ratio:auto}#g-tools{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));max-width:none;justify-content:center;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 186px)}#g-colors{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 236px)}#g-hint{left:10px;right:10px;bottom:auto;top:calc(max(8px,env(safe-area-inset-top)) + 150px)}#g-tools{transition:bottom .25s ease}#garage:not([data-mode=idle]):not(.peek) #g-drawer{transform:translateY(calc(100% - 46px - max(8px,env(safe-area-inset-bottom))))}#garage:not([data-mode=idle]):not(.peek) #g-tools{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 54px)}#garage:not([data-mode=idle]):not(.peek) #g-colors{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 104px)}}#g-stats .sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:100%;padding:0;font:inherit;font-size:12px;color:#eef1f5;background:none;border:0;cursor:pointer;text-align:left}#g-stats .sum .st{flex:1 0 auto;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#g-stats .sum .st.good{color:#4cd07d}#g-stats .sum i{font-style:normal;opacity:.7;padding:0 2px 0 6px}#g-stats .bar{margin:5px 0 2px}#g-stats .more{display:none;margin-top:4px}#g-stats.open .more{display:block}#g-drawer{transition:transform .25s ease,width .25s ease}@media(orientation:landscape){#garage:not([data-mode=idle]):not(.peek) #g-drawer{width:calc(max(6px,env(safe-area-inset-left)) + 62px)}#garage:not([data-mode=idle]):not(.peek) #g-parts{display:none}}#g-stats.open~#g-hint{display:none}#g-stats .more .row:first-child{display:none}
