/* Pong touch: two stacked full-screen canvases plus a small HUD, chrome from the --lab-* tokens. */
html, body { overflow: hidden; background: #000; }

#pt-canvas, #pt-fx {
  position: fixed; inset: 0; display: block; width: 100vw; height: 100vh;
}
#pt-canvas { touch-action: none; cursor: crosshair; }
#pt-fx { pointer-events: none; }

#pt-hud {
  position: fixed; z-index: 20; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 16px; padding: 6px 14px; white-space: nowrap;
  font: var(--lab-font-size)/1.3 var(--lab-font); pointer-events: none;
}
#pt-hud b { color: var(--lab-ink); font-family: var(--lab-mono); font-weight: 400; font-variant-numeric: tabular-nums; }

#pt-done {
  position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 20px 28px; text-align: center; font-family: var(--lab-font);
}
#pt-done[hidden] { display: none; }
#pt-done h2 { margin: 0 0 6px; color: var(--lab-ink); font-size: 22px; }
#pt-done p { margin: 0 0 14px; }
#pt-done b { color: var(--lab-accent); }

#pt-hint { max-width: min(520px, calc(100% - 24px)); white-space: normal; }