* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0f172a; color: #f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overscroll-behavior: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#app { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#hud { display: flex; justify-content: space-around; padding: 14px 12px; background: #1e293b; flex: 0 0 auto; }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; }
#score, #time { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
#arena { position: relative; flex: 1 1 auto; overflow: hidden; }
#target { position: absolute; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a, #f97316 70%); box-shadow: 0 0 0 6px rgba(249,115,22,.3);
  left: 0; top: 0; cursor: pointer; }
#target:active { transform: scale(.9); }
#over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.88); padding: 20px; z-index: 5; }
.hidden { display: none !important; }
.card { text-align: center; width: 100%; max-width: 340px; }
.card h1 { margin: 0 0 8px; font-size: 32px; }
.final { margin: 0; color: #94a3b8; }
.big { margin: 4px 0 20px; font-size: 72px; font-weight: 800; line-height: 1; }
#again { width: 100%; padding: 18px; font-size: 20px; font-weight: 700; border: 0; border-radius: 14px;
  background: #22c55e; color: #052e16; cursor: pointer; }