/* =============================================================
   GAME: Paddle Ball
   ============================================================= */
.board-paddleball { display: flex; flex-direction: column; align-items: center; gap: 12px; outline: none; width: 100%; }
.pb-stage { position: relative; touch-action: none; }
.pb-canvas {
  display: block; width: min(calc(100vw - 60px), 820px, calc((100vh - 250px) * 5 / 3)); min-width: 260px; aspect-ratio: 5 / 3;
  border-radius: 14px; background: #070c0a;
  box-shadow: 0 0 0 2px #e8ff3d, 0 0 26px rgba(232, 255, 61, .3);
}
.board-paddleball:focus-visible .pb-canvas { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(232, 255, 61, .5); }
.pb-msg {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: max-content; max-width: 86%;
  padding: 10px 16px; border-radius: 12px; background: rgba(6, 10, 8, .86); color: #f4ffc4; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px rgba(232, 255, 61, .55), 0 0 22px rgba(232, 255, 61, .2); pointer-events: none;
}
.pb-msg[hidden] { display: none; }
.pb-num { color: #eaff7a; font-variant-numeric: tabular-nums; }
.pb-sc-l strong { color: #29e8ff; font-variant-numeric: tabular-nums; }
.pb-sc-r strong { color: #ff4fd8; font-variant-numeric: tabular-nums; }
.pb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

/* on-screen buttons: phones and tablets only; the right pair only in two-player mode */
.pb-pad { display: none; width: min(calc(100vw - 60px), 820px); justify-content: space-between; align-items: center; touch-action: none; }
.pb-pair { display: flex; gap: 8px; }
.pb-pair-r { visibility: hidden; }
.pb-2p .pb-pair-r { visibility: visible; }
.pb-key {
  display: grid; place-items: center; width: 60px; height: 50px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(232, 255, 61, .4), 0 4px 0 rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.pb-key.pb-l { color: #29e8ff; box-shadow: inset 0 0 0 1px rgba(41, 232, 255, .5), 0 4px 0 rgba(0, 0, 0, .35); }
.pb-key.pb-r { color: #ff4fd8; box-shadow: inset 0 0 0 1px rgba(255, 79, 216, .5), 0 4px 0 rgba(0, 0, 0, .35); }
.pb-key svg { width: 26px; height: 26px; fill: currentColor; }
.pb-key:active, .pb-key.down { transform: translateY(2px); background: #1f2a16; }
.pb-key-pause { width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.pb-key-pause svg { width: 18px; height: 18px; }
@media (pointer: coarse) {
  .pb-pad { display: flex; }
  .board-paddleball { gap: 10px; }
}
@media (max-width: 400px) {
  .pb-key { width: 52px; height: 46px; }
  .pb-pair { gap: 6px; }
}