:root{--panel-bg:#1e1238e0;--panel-border:#ffbe8259;--text:#fff3e6;--text-dim:#d9c4e6;--accent:#ff9a4d;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--text);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#2a1b4d;margin:0;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:fixed;inset:0}#ui>*{pointer-events:auto}#loading{white-space:pre-line;text-align:center;background:linear-gradient(#2a1b4d,#7a3d6b 60%,#f08a4b);place-items:center;padding:24px;font-size:20px;display:grid;position:fixed;inset:0}.fps-counter{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));white-space:pre;background:#0000008c;border-radius:8px;padding:6px 10px;font:12px/1.4 ui-monospace,Consolas,monospace;position:absolute;pointer-events:none!important}.top-buttons{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));gap:8px;display:flex;position:absolute}button{font:inherit;color:var(--text);cursor:pointer}.icon-button{border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:12px;min-width:44px;height:44px;padding:0 10px;font-size:14px;font-weight:600}.icon-button.active{border-color:var(--accent);color:var(--accent)}.settings-panel{top:calc(60px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;width:min(320px,100vw - 16px);max-height:calc(100vh - 76px);padding:16px;position:absolute;overflow-y:auto}.settings-panel h2{margin:0 0 12px;font-size:18px}.settings-label{color:var(--text-dim);margin:14px 0 6px;font-size:13px}.settings-hint{color:var(--text-dim);margin-top:6px;font-size:12px;line-height:1.4}.segmented{border:1px solid var(--panel-border);border-radius:10px;display:flex;overflow:hidden}.segmented button{background:0 0;border:0;flex:1;height:44px}.segmented button+button{border-left:1px solid var(--panel-border)}.segmented button.active{background:var(--accent);color:#2a1b4d;font-weight:700}.settings-check{align-items:center;gap:6px;min-height:32px;margin-top:14px;display:flex}.settings-check input{width:20px;height:20px;accent-color:var(--accent)}.lan-url{-webkit-user-select:text;user-select:text;padding:4px 0;font:14px ui-monospace,Consolas,monospace}.pad-info{white-space:pre-wrap;word-break:break-word;color:var(--text-dim);font:11px/1.45 ui-monospace,Consolas,monospace}.close-button{border:1px solid var(--panel-border);background:0 0;border-radius:10px;width:100%;height:44px;margin-top:16px}.toast{left:50%;top:calc(64px + env(safe-area-inset-top));background:var(--panel-bg);border:1px solid var(--panel-border);text-align:center;border-radius:12px;width:max-content;max-width:calc(100vw - 32px);padding:10px 16px;font-size:14px;position:absolute;transform:translate(-50%)}.drive-hud{left:50%;bottom:calc(16px + env(safe-area-inset-bottom));white-space:nowrap;background:#00000073;border-radius:12px;align-items:baseline;gap:6px;padding:6px 14px;display:flex;position:absolute;transform:translate(-50%);pointer-events:none!important}.has-touch-controls .drive-hud{bottom:calc(132px + env(safe-area-inset-bottom))}.drive-hud .speed{text-align:right;min-width:2ch;font:700 22px ui-monospace,Consolas,monospace}.drive-hud .unit{color:var(--text-dim);font-size:11px}.drive-hud .surface{color:#1f1530;background:#b9b6c4;border-radius:8px;margin-left:8px;padding:2px 8px;font-size:12px;font-weight:600}.drive-hud .surface[data-surface=tanah]{background:#d3a266}.drive-hud .surface[data-surface=rumput]{background:#9fd07c}.drive-hud .surface[data-surface=lumpur]{color:#fff3e6;background:#8a6248}.action-prompt{left:50%;bottom:calc(64px + env(safe-area-inset-bottom));border:1px solid var(--accent);background:var(--panel-bg);white-space:nowrap;border-radius:14px;min-height:44px;padding:0 18px;font-size:15px;font-weight:600;position:absolute;transform:translate(-50%)}.has-touch-controls .action-prompt{bottom:calc(180px + env(safe-area-inset-bottom))}.screen-fade{opacity:0;background:#120b24;transition:opacity .17s;position:absolute;inset:0;pointer-events:none!important}.screen-fade.dark{opacity:1}.activity-overlay{flex-direction:column;justify-content:center;align-items:center;gap:16px;display:none;position:absolute;inset:0}.activity-overlay.show{display:flex}.activity-text{text-shadow:0 2px 8px #0009;font-size:26px;font-weight:700}.activity-track{background:#fff3;border-radius:6px;width:min(260px,70vw);height:10px;overflow:hidden}.activity-bar{background:var(--accent);width:0;height:100%}.map-overlay{background:#100a2299;place-items:center;display:grid;position:absolute;inset:0}.map-panel{border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:16px;width:min(92vw,78vh,560px);padding:14px}.map-panel h2{margin:0 0 10px;font-size:18px}.map-panel canvas{border-radius:10px;width:100%;height:auto;display:block}.map-legend{color:var(--text-dim);margin-top:8px;font-size:12px}.map-panel .close-button{margin-top:10px}.benchmark-status{left:50%;top:calc(64px + env(safe-area-inset-top));border:1px solid var(--accent);background:var(--panel-bg);text-align:center;border-radius:12px;width:max-content;max-width:calc(100vw - 32px);padding:10px 16px;font-size:14px;position:absolute;transform:translate(-50%);pointer-events:none!important}.benchmark-device{color:var(--text-dim);word-break:break-word;margin-bottom:10px;font:11px/1.4 ui-monospace,Consolas,monospace}.benchmark-table{border-collapse:collapse;width:100%;font-size:13px}.benchmark-table th,.benchmark-table td{text-align:left;border-bottom:1px solid var(--panel-border);white-space:nowrap;padding:6px 4px}.benchmark-table th{color:var(--text-dim);font-size:11px;font-weight:600}.benchmark-table tr.recommended td{color:var(--accent);font-weight:700}.benchmark-table td.bad{color:#ff8080}.benchmark-advice{margin-top:12px;font-size:14px;line-height:1.4}.benchmark-advice.bad{color:#ffb0a0}.close-button.primary{background:var(--accent);border-color:var(--accent);color:#2a1b4d;font-weight:700}.benchmark-panel{max-height:calc(100vh - 32px);overflow-y:auto}.touch-controls{position:absolute;inset:0;pointer-events:none!important}.touch-steer,.touch-pedals{bottom:calc(22px + env(safe-area-inset-bottom));pointer-events:auto;touch-action:none;display:flex;position:absolute}.touch-steer{left:calc(16px + env(safe-area-inset-left));border:1px solid var(--panel-border);background:#1e12388c;border-radius:22px;width:176px;height:92px;overflow:hidden}.touch-half{pointer-events:none;flex:1;place-items:center;font-size:30px;display:grid}.touch-half+.touch-half{border-left:1px solid var(--panel-border)}.touch-pedals{right:calc(16px + env(safe-area-inset-right));align-items:flex-end;gap:12px}.touch-pedal{border:1px solid var(--panel-border);letter-spacing:.5px;background:#1e12388c;border-radius:22px;place-items:center;width:80px;height:80px;font-size:14px;font-weight:700;display:grid}.touch-pedal.gas{width:88px;height:104px}.touch-pedal.small{height:60px;font-size:11px}.touch-stick{left:calc(20px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));border:1px solid var(--panel-border);pointer-events:auto;touch-action:none;background:#1e123873;border-radius:50%;place-items:center;width:132px;height:132px;display:grid;position:absolute}.touch-knob{pointer-events:none;background:#ffbe82bf;border-radius:50%;width:56px;height:56px}@media (width<=430px){.touch-steer{left:calc(10px + env(safe-area-inset-left));width:150px;height:84px}.touch-pedals{right:calc(10px + env(safe-area-inset-right));gap:10px}.touch-pedal{letter-spacing:0;width:70px;height:72px;font-size:12px}.touch-pedal.gas{width:80px;height:94px}.touch-pedal.small{height:56px}.touch-stick{left:calc(12px + env(safe-area-inset-left));width:120px;height:120px}}.touch-half.held,.touch-pedal.held{background:var(--accent);color:#2a1b4d}[hidden]{display:none!important}
