*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:#04101a;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif}#app{position:relative;width:100vw;height:100vh;display:grid;place-items:center}#app canvas{display:block;max-width:100vw;max-height:100vh}#hud{position:absolute;inset:0;pointer-events:none;z-index:10;padding:18px 22px;color:#eaffff;text-shadow:0 0 10px rgba(0,230,255,.4)}.hud-top{display:flex;justify-content:space-between;align-items:flex-start}.hud-left .score{font-size:44px;font-weight:900;color:#bfefff}.hud-left .dist{font-size:16px;color:#7fd6e8;margin-top:2px}.hud-right{text-align:right}.hud-right .combo{font-size:34px;font-weight:900;color:#ffd24a;min-height:38px}.hud-right .best{font-size:14px;color:#88b8c8}.hud-powers{position:absolute;left:0;right:0;bottom:22px;text-align:center}.hud-powers .p{display:inline-block;margin:0 8px;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:700;letter-spacing:1px;background:#081e2a8c;backdrop-filter:blur(4px)}.p.surge{color:#ff8fd6;box-shadow:0 0 14px #ff66cc80 inset}.p.magnet{color:#66ffe0;box-shadow:0 0 14px #66ffe066 inset}.p.shield{color:#9fc6ff;box-shadow:0 0 14px #6af6 inset}[dir=rtl] .hud-top{flex-direction:row-reverse}[dir=rtl] .hud-right{text-align:left}