:root{--ink: #f4f1e8;--ink-dim: rgba(244, 241, 232, .62);--shadow: 0 2px 12px rgba(20, 30, 20, .55);--accent: #ffd166;--accent-hot: #ff8f5e}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#12181a;font-family:ui-rounded,SF Pro Rounded,Avenir Next,Avenir,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#scene{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:clamp(14px,2.4vw,30px);display:flex;flex-direction:column;justify-content:space-between;text-shadow:var(--shadow);opacity:0;transition:opacity .5s ease}#hud.on{opacity:1}.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.stat-main{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}.stat-main .value{font-size:clamp(38px,6.5vw,74px);font-weight:700;letter-spacing:-.03em;line-height:.9}.stat-main .unit{font-size:clamp(14px,1.8vw,20px);color:var(--ink-dim);font-weight:600}.stat-side{text-align:right;font-size:clamp(11px,1.3vw,14px);font-variant-numeric:tabular-nums;line-height:1.55}.stat-side .row{display:flex;gap:10px;justify-content:flex-end}.stat-side .label{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.12em;font-size:.82em}#env{transition:color .9s ease}#env.bump{color:var(--accent);transition:color .1s ease}.hud-speed{position:absolute;left:50%;bottom:clamp(52px,8vh,90px);transform:translate(-50%);width:min(340px,62vw);text-align:center}.speed-readout{font-variant-numeric:tabular-nums;font-size:clamp(15px,2vw,20px);font-weight:700;margin-bottom:7px}.speed-readout .unit{font-size:.6em;color:var(--ink-dim);margin-left:4px;font-weight:600}.bar{position:relative;height:7px;border-radius:99px;background:#0a140e6b;box-shadow:inset 0 0 0 1px #ffffff24;overflow:hidden}.bar-zone{position:absolute;left:62%;right:0;top:0;bottom:0;background:#ffd16629;border-left:1px solid rgba(255,209,102,.5)}.bar-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:99px;background:linear-gradient(90deg,#9fd4a3,var(--accent) 68%,var(--accent-hot));transition:width .09s linear}.streak{margin-top:8px;font-size:clamp(11px,1.3vw,13px);color:var(--ink-dim);font-variant-numeric:tabular-nums;letter-spacing:.03em}.streak.hot{color:var(--accent)}.streak em{font-style:normal;opacity:.62;margin-left:8px}.hud-hint{position:absolute;left:50%;bottom:clamp(16px,2.5vh,26px);transform:translate(-50%);font-size:clamp(10px,1.2vw,12.5px);color:var(--ink-dim);letter-spacing:.04em;white-space:nowrap;transition:opacity .6s ease}.hud-hint b{color:var(--ink);font-weight:700}.hud-hint.fade{opacity:0}.flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(120,30,20,.62) 100%)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:#0c14128c;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:opacity .35s ease}.overlay.hidden{opacity:0;pointer-events:none}.panel{width:min(430px,100%);padding:clamp(24px,4vw,38px);border-radius:20px;background:#16211ed1;box-shadow:0 24px 70px #00000080,inset 0 0 0 1px #ffffff14;text-align:center}.panel h1{font-size:clamp(30px,5vw,42px);letter-spacing:-.02em;margin-bottom:10px}.panel .sub{color:var(--ink-dim);font-size:14.5px;line-height:1.55;margin-bottom:22px}.keys{list-style:none;text-align:left;font-size:13px;color:var(--ink-dim);line-height:2;margin-bottom:26px;padding:14px 16px;border-radius:12px;background:#0003}.keys b{color:var(--ink);font-weight:700;display:inline-block;min-width:74px}button{width:100%;padding:14px 20px;border:0;border-radius:12px;font:inherit;font-weight:700;font-size:16px;color:#1b2420;background:linear-gradient(180deg,#ffdf8a,var(--accent));cursor:pointer;transition:transform .12s ease,filter .12s ease}button:hover{transform:translateY(-1px);filter:brightness(1.05)}button:active{transform:translateY(1px)}button.ghost{margin-top:10px;background:transparent;color:var(--ink-dim);font-size:13px;font-weight:600;padding:10px;box-shadow:inset 0 0 0 1px #ffffff1f}button.ghost:hover{color:var(--ink)}.saved{margin-top:16px;font-size:12px;color:var(--ink-dim);min-height:1.2em}@media (max-width: 560px){.hud-hint{white-space:normal;text-align:center;width:90vw;line-height:1.7}}