:root{color-scheme:dark;--ink: #f4f1ea;--muted: #9a96a8;--magenta: #ff2d95;--cyan: #3df0ff;--panel: rgba(8, 8, 14, .55)}*{box-sizing:border-box;margin:0;padding:0}html,body,#game{width:100%;height:100%;height:100dvh;overflow:hidden;background:#050508;font-family:DIN Alternate,Bahnschrift,Segoe UI,PingFang SC,Noto Sans SC,sans-serif;color:var(--ink);touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#game{position:fixed;top:0;right:0;bottom:0;left:0}#view{display:block;width:100%;height:100%;outline:none;touch-action:none}#hud{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.hud-title{position:absolute;top:22px;left:26px;letter-spacing:.28em;font-size:13px;font-weight:600;text-transform:uppercase;color:var(--ink);pointer-events:none;transition:opacity .7s ease}.hud-title.dim{opacity:.38}.hud-title span{display:block;margin-top:4px;letter-spacing:.42em;font-size:10px;color:var(--cyan)}.hud-retry{position:absolute;top:22px;right:26px;text-align:right;font-size:12px;letter-spacing:.18em;color:var(--muted)}.hud-retry kbd{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid rgba(255,255,255,.22);border-radius:4px;color:var(--ink);font:inherit;letter-spacing:.12em}.hud-pad{pointer-events:auto;position:absolute;top:52px;right:26px;height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:#08080eb8;color:var(--ink);font:inherit;font-size:12px;letter-spacing:.16em;cursor:pointer;-webkit-tap-highlight-color:transparent}.hud-pad:hover{border-color:var(--cyan)}.hud-pad.on{border-color:var(--magenta);background:#ff2d9547;box-shadow:0 0 16px #ff2d9547}.hud-feel{position:absolute;left:26px;bottom:28px;min-width:220px;padding:14px 16px 12px;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-left:2px solid var(--magenta);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}.hud-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}.hud-value{font-size:28px;font-variant-numeric:tabular-nums;letter-spacing:.04em}.hud-value small{margin-left:6px;font-size:11px;letter-spacing:.2em;color:var(--muted)}.hud-bars{display:grid;gap:5px;margin-top:10px}.hud-bar{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.hud-bar i{display:block;height:3px;background:#ffffff14;overflow:hidden}.hud-bar i em{display:block;height:100%;width:0%;background:var(--cyan)}.hud-bar.brake i em{background:#ffb347}.hud-bar.hand i em{background:var(--magenta)}.hud-drift{position:absolute;right:26px;bottom:28px;text-align:right}.hud-badge{display:inline-block;padding:8px 14px;border:1px solid rgba(255,45,149,.25);color:var(--muted);letter-spacing:.42em;font-size:12px;opacity:.35;transition:opacity 80ms linear,color 80ms linear,border-color 80ms linear}.hud-badge.on{opacity:1;color:var(--magenta);border-color:var(--magenta);text-shadow:0 0 18px rgba(255,45,149,.45)}.hud-angle{margin-top:8px;font-size:42px;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink)}.hud-angle.hot{color:var(--magenta);text-shadow:0 0 18px rgba(255,45,149,.35)}.hud-dir{font-size:18px;letter-spacing:.18em;color:var(--cyan);margin-right:4px}.hud-angle small{font-size:14px;margin-left:4px;color:var(--muted);letter-spacing:.18em}.hud-meter{position:relative;margin:10px 0 0 auto;width:148px;height:6px;background:#ffffff14;border-radius:99px;overflow:visible}.hud-meter:before{content:"";position:absolute;left:50%;top:-3px;width:1px;height:12px;background:#ffffff59}.hud-meter i{position:absolute;top:-3px;left:50%;width:8px;height:12px;margin-left:-4px;border-radius:2px;background:var(--muted);transition:left 60ms linear,background 80ms linear}.hud-meter i.on{background:var(--magenta);box-shadow:0 0 10px #ff2d95b3}.hud-help{position:absolute;left:50%;bottom:28px;transform:translate(-50%);text-align:center;font-size:12px;letter-spacing:.12em;color:var(--ink);background:var(--panel);border:1px solid rgba(61,240,255,.18);padding:10px 18px;transition:opacity .6s ease}.hud-help.dim{opacity:.22}.hud-help b{color:var(--cyan);font-weight:600}#touch{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;touch-action:none}#touch[hidden]{display:none}.touch-hint{position:absolute;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom) + clamp(84px,18vh,132px) + clamp(44px,10vh,58px) + 22px);width:max-content;max-width:min(560px,calc(100vw - 24px));margin:0;padding:8px 12px;text-align:center;font-size:12px;letter-spacing:.04em;line-height:1.45;color:var(--ink);background:var(--panel);border:1px solid rgba(61,240,255,.18);pointer-events:none;animation:touch-hint-out .7s ease 4s forwards}.touch-hint b{color:var(--cyan);font-weight:600}@keyframes touch-hint-out{to{opacity:0}}.touch-left,.touch-right,.touch-right-row{pointer-events:none}.touch-left{position:absolute;left:calc(10px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:8px}.touch-right{position:absolute;right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-start;gap:10px}.touch-right-row{display:flex;align-items:flex-end;gap:8px}.touch-top{position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));display:flex;align-items:center;gap:8px;pointer-events:none}.touch-btn,.touch-retry,.touch-pad{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;color:var(--ink);background:#0a0a10db;border:2px solid rgba(255,255,255,.42);box-shadow:0 8px 22px #00000073;cursor:pointer}.touch-btn{width:clamp(64px,19vw,112px);height:clamp(84px,18vh,132px);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;line-height:1.05}.touch-btn .zh{font-size:clamp(14px,3.4vw,18px);font-weight:600;letter-spacing:.08em}.touch-btn .en{font-size:10px;letter-spacing:.18em;color:var(--muted)}.touch-btn.drift{width:clamp(76px,23vw,136px);background:#400a28eb;border-color:var(--magenta)}.touch-btn.gas{background:#061c24eb;border-color:var(--cyan)}.touch-btn.brake{width:clamp(64px,18vw,96px);height:clamp(44px,10vh,58px);flex-direction:row;gap:6px;border-radius:14px;border-color:#ffb34773}.touch-btn.held{background:#3df0ff47;border-color:var(--cyan)}.touch-btn.held .en{color:var(--ink)}.touch-btn.drift.held{background:#ff2d9575;border-color:var(--magenta);box-shadow:0 0 22px #ff2d9559}.touch-btn.gas.held{background:#3df0ff52;box-shadow:0 0 16px #3df0ff47}.touch-btn.brake.held{background:#ffb34761;border-color:#ffb347}.touch-retry,.touch-pad{height:40px;padding:0 14px;border-radius:999px;letter-spacing:.14em;font-size:12px;color:var(--muted)}.touch-pad{color:var(--ink)}.touch-pad.on,.touch-pad.held{border-color:var(--magenta);background:#ff2d9552;color:var(--ink);box-shadow:0 0 16px #ff2d9547}.touch-retry span{color:var(--ink);margin-right:6px}.touch-retry.held{border-color:var(--cyan);color:var(--ink)}@media(orientation:landscape){.touch-hint{bottom:calc(env(safe-area-inset-bottom) + clamp(84px,18vh,132px) + 16px)}.touch-right{flex-direction:row;align-items:flex-end}}@media(max-width:420px){.touch-hint{font-size:11px;padding:6px 8px}}html.touch-mode .hud-retry,html.touch-mode .hud-pad,html.touch-mode .hud-help{display:none}html.touch-mode .hud-title{top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}html.touch-mode .hud-feel{top:calc(64px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));bottom:auto;min-width:0;padding:8px 10px;transform:scale(.78);transform-origin:top left}html.touch-mode .hud-drift{top:calc(64px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));bottom:auto;transform:scale(.78);transform-origin:top right}html.touch-mode .hud-value{font-size:22px}html.touch-mode .hud-angle{font-size:30px}@media(orientation:landscape)and (max-height:480px){html.touch-mode .hud-title{display:none}html.touch-mode .hud-feel,html.touch-mode .hud-drift{top:calc(54px + env(safe-area-inset-top));transform:scale(.64)}}