/* ===========================================================
   Pong — game-specific styles only.
   Chrome (body, h1, button, #status, .hint, .score-box) all
   come from shared.css. We just lay out the court + pad here.
   =========================================================== */

/* Tighten the vertical rhythm a touch for this single-column game */
body { gap: 14px; }

/* Score chips sit side by side above the court */
.scores {
  display: flex;
  gap: 14px;
}

/* The court canvas: 3:2 aspect, capped width, scales down on phones.
   The drawing buffer stays 600x400; CSS just scales the element. */
#court {
  width: clamp(300px, 92vw, 600px);
  aspect-ratio: 3 / 2;
  height: auto;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 6px 20px var(--shadow);
  border: 1px solid var(--border);
  /* Stop the browser hijacking touch drags for scrolling/zooming */
  touch-action: none;
  display: block;
}

/* On-screen up/down pad for keyboard-less play (touch & embedded iframes) */
#pad {
  display: flex;
  gap: 16px;
}
.pad-btn {
  width: 64px;
  height: 52px;
  font-size: 1.3rem;
  padding: 0;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
  /* Prevent the press from also firing a drag / text-select */
  touch-action: manipulation;
  user-select: none;
}
.pad-btn:hover { opacity: 1; background: var(--accent); color: var(--accent-text); }
.pad-btn:active { transform: translateY(1px); }