*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#15173a;color:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none}
body{display:flex;align-items:center;justify-content:center}
canvas{display:block;image-rendering:auto}
.hud{position:fixed;top:8px;left:0;right:0;display:flex;justify-content:center;gap:18px;
  font-weight:700;font-size:15px;pointer-events:none;text-shadow:0 2px 0 rgba(0,0,0,.35);z-index:5}
.hud span{background:rgba(0,0,0,.35);padding:4px 10px;border-radius:999px}
#ov{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:rgba(10,12,40,.78);text-align:center;padding:20px;z-index:10}
#ov.hide{display:none}
#ov h1{margin:0;font-size:clamp(26px,6vw,42px);letter-spacing:.5px}
#ov p{margin:0;max-width:340px;opacity:.9;line-height:1.45}
#ov button{margin-top:8px;font:inherit;font-weight:800;font-size:18px;border:0;border-radius:14px;
  padding:12px 28px;background:#ffd23f;color:#15173a;cursor:pointer;box-shadow:0 4px 0 #c79a00}
#ov button:active{transform:translateY(2px);box-shadow:0 2px 0 #c79a00}
.keys{font-size:13px;opacity:.7}