*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  display:grid;place-items:center;min-height:100dvh;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#1b2431 0%,#0b0f15 70%);
  color:#e7eef7;font:500 15px/1.4 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px}
header{display:flex;align-items:center;gap:18px;justify-content:space-between;width:100%;max-width:640px}
h1{margin:0;font-size:20px;letter-spacing:.02em;font-weight:800}
h1 span{color:#8ef05a}
.hud{display:flex;gap:16px}
.hud div{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.hud b{font-size:16px;color:#8ef05a;font-variant-numeric:tabular-nums}
.hud span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#67788c}
.stage{position:relative;display:grid;place-items:center}
canvas{display:block;border-radius:14px;touch-action:none;
  box-shadow:0 24px 60px -20px #000,0 0 0 1px #ffffff0f inset,0 0 70px -30px #8ef05a66}
.ov{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:#070a0fb8;backdrop-filter:blur(3px);border-radius:14px}
.ov.show{display:flex}
.ov p{margin:0;font-size:22px;font-weight:800;letter-spacing:.02em}
button{cursor:pointer;font:inherit;border:0}
.ov button{padding:10px 22px;border-radius:999px;font-weight:700;background:#8ef05a;color:#0b1108}
.ov button:hover{background:#a6ff78}
.pad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,42px);gap:6px;margin-top:2px}
.pad button{background:#161e29;color:#9fb3c8;border-radius:10px;font-size:13px;
  box-shadow:0 0 0 1px #ffffff10 inset}
.pad button:active{background:#8ef05a;color:#0b1108}
.pad button:nth-child(1){grid-column:2;grid-row:1}
.pad button:nth-child(2){grid-column:1;grid-row:2}
.pad button:nth-child(3){grid-column:2;grid-row:2}
.pad button:nth-child(4){grid-column:3;grid-row:2}
.hint{margin:0;font-size:11px;color:#5b6b7e}
@media (max-width:520px){.hud{gap:12px}.hint{display:none}h1{font-size:17px}}
@media (min-width:760px){.pad{display:none}}