:root{--ink:#f4f6ff;--ink-dim:#f4f6ffbd;--cyan:#38e8ff;--amber:#ffa23d;--mint:#4dffc3;--danger:#ff5a4d;--panel:#100e20d1;--edge:#78dcff38;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);font-synthesis:none;text-rendering:geometricprecision}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;background:#151226;margin:0;font-family:PingFang SC,Microsoft YaHei,Segoe UI,system-ui,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:relative}#game-canvas{touch-action:none;width:100%;height:100%;display:block}#hud{pointer-events:none;padding:calc(18px + var(--safe-top)) calc(20px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(20px + var(--safe-left));font-variant-numeric:tabular-nums;grid-template-rows:auto 1fr auto;grid-template-columns:1fr 1fr;gap:10px;display:grid;position:absolute;inset:0}.hud-corner{flex-direction:column;gap:6px;display:flex}.hud-left{grid-area:1/1;align-items:flex-start}.hud-right{grid-area:1/2;align-items:flex-end}.hud-block{text-shadow:0 1px 2px #000000e6,0 2px 14px #000000d9;align-items:baseline;gap:8px;line-height:1.2;display:flex}.hud-align-right{justify-content:flex-end}.hud-label{letter-spacing:.18em;color:var(--ink-dim);font-size:11px}.hud-number{letter-spacing:.01em;font-size:26px;font-weight:650}.hud-score{color:var(--mint)}.hud-best{color:var(--ink-dim);font-size:17px;font-weight:600}.hud-unit{color:var(--ink-dim);font-size:11px}.hud-speed .hud-number{color:var(--cyan);font-size:19px}#combo-badge{border:1px solid var(--edge);color:var(--ink-dim);letter-spacing:.16em;opacity:0;background:#0a182280;border-radius:999px;grid-area:2/1/auto/-1;place-self:start center;align-items:baseline;gap:8px;margin-top:4px;padding:6px 14px;font-size:12px;transition:opacity .16s,transform .16s,color .16s;display:flex;transform:translateY(-6px)}#combo-badge[data-active=true]{opacity:1;color:var(--amber);border-color:#ffa23d73;transform:translateY(0)}#combo-badge strong{letter-spacing:0;font-size:18px}#energy-bar{grid-area:3/1;align-self:end;align-items:center;gap:10px;width:min(260px,46vw);display:flex}.energy-track{background:#ffffff1f;border-radius:999px;flex:1;height:9px;position:relative;overflow:hidden}#energy-fill{transform-origin:0;background:linear-gradient(90deg, var(--cyan), var(--mint));border-radius:999px;transition:transform 90ms linear;position:absolute;inset:0;transform:scaleX(0)}#energy-fill[data-low=true]{background:linear-gradient(90deg, var(--danger), var(--amber))}#status-line{text-align:right;max-width:62%;color:var(--ink);text-shadow:0 1px 2px #000000e6,0 2px 12px #000000d9;grid-area:3/2;place-self:end;font-size:12px;line-height:1.6}#touch-controls{padding:0 calc(22px + var(--safe-right)) calc(26px + var(--safe-bottom)) calc(22px + var(--safe-left));pointer-events:none;justify-content:space-between;align-items:flex-end;display:none;position:absolute;inset:auto 0 0}#touch-stick{border:1px solid var(--edge);pointer-events:auto;touch-action:none;background:#0c121e6b;border-radius:50%;width:124px;height:124px;position:relative}#touch-knob{background:radial-gradient(circle at 35% 30%, var(--cyan), #12465c);border-radius:50%;width:52px;height:52px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 18px #38e8ff73}.touch-buttons{gap:14px;display:flex}.touch-buttons button{pointer-events:auto;border:1px solid var(--edge);width:74px;height:74px;color:var(--ink);touch-action:none;background:#0c121e8c;border-radius:50%;font-family:inherit;font-size:17px;font-weight:600}#boost-button{color:var(--amber);border-color:#ffa23d80}.overlay{padding:calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;background:radial-gradient(circle at 50% 40%,#0c0a1a8c,#080612e0);justify-content:center;align-items:center;transition:opacity .2s,visibility .2s;display:flex;position:absolute;inset:0}.overlay[data-visible=true]{opacity:1;visibility:visible}.panel{border:1px solid var(--edge);background:var(--panel);text-align:center;border-radius:20px;width:min(430px,100%);max-height:100%;padding:30px 30px 24px;overflow-y:auto;box-shadow:0 26px 70px #0000008c}.eyebrow{letter-spacing:.3em;color:var(--cyan);margin:0 0 8px;font-size:11px}.panel h1{letter-spacing:.04em;background:linear-gradient(120deg, var(--amber), var(--cyan));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-size:38px;line-height:1.2}.panel h2{margin:0 0 14px;font-size:27px;line-height:1.25}.lede{color:var(--ink-dim);margin:0 0 18px;font-size:14px;line-height:1.7}.keys{color:var(--ink-dim);gap:9px;margin:0 0 22px;padding:0;font-size:13px;line-height:1.5;list-style:none;display:grid}kbd{min-width:22px;color:var(--ink);background:#ffffff14;border:1px solid #ffffff2e;border-radius:6px;margin:0 2px;padding:2px 6px;font-family:inherit;font-size:12px;display:inline-block}button.primary{background:linear-gradient(120deg, var(--amber), #ff6a3d);color:#1a0f06;letter-spacing:.04em;cursor:pointer;border:0;border-radius:12px;width:100%;padding:13px 20px;font-family:inherit;font-size:16px;font-weight:700;transition:transform .12s,filter .12s}button.primary:hover{filter:brightness(1.08)}button.primary:active{transform:translateY(1px)}button.primary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.result-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px;display:grid}.result-grid div{background:#ffffff0f;border-radius:12px;padding:12px 6px}.result-grid span{letter-spacing:.1em;color:var(--ink-dim);margin-bottom:4px;font-size:11px;display:block}.result-grid strong{font-variant-numeric:tabular-nums;font-size:20px}.hint{color:var(--ink-dim);margin:12px 0 0;font-size:12px;line-height:1.6}.back-home{margin:14px 0 0;font-size:12px;line-height:1.6}.back-home a{color:var(--ink-dim);border:1px solid #f4f6ff38;border-radius:999px;padding:6px 14px;text-decoration:none;transition:color .18s,border-color .18s,background .18s;display:inline-block}.back-home a:hover,.back-home a:focus-visible{color:#fff;background:#ffa85c24;border-color:#ffa85cb3}.brand{letter-spacing:.2em;color:#f4f6ff57;margin:18px 0 0;font-size:11px}#flash{opacity:0;pointer-events:none;background:#fff;position:absolute;inset:0}#rotate-tip{left:50%;bottom:calc(18px + var(--safe-bottom));color:var(--ink-dim);letter-spacing:.08em;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;background:#0a0c1899;border:1px solid #ffffff29;border-radius:999px;padding:8px 16px;font-size:12px;position:absolute;transform:translate(-50%)}@media (hover:none) and (pointer:coarse) and (orientation:portrait){#rotate-tip{visibility:visible;animation:6s forwards tip-fade}}@keyframes tip-fade{0%{opacity:0}12%{opacity:1}72%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){#rotate-tip{animation-duration:8s}}@media (hover:none) and (pointer:coarse){#touch-controls{display:flex}#status-line{display:none}#energy-bar{grid-area:1/1/auto/-1;place-self:start center;width:min(320px,70vw);margin-top:84px}}@media (width<=430px){.hud-number{font-size:22px}.panel{padding:24px 20px 20px}.panel h1{font-size:31px}}