.pong-canvas-wrap { max-width: 900px; margin: 0 auto; }
#pong-board { display: block; width: 100%; aspect-ratio: 9 / 5; background: #172033; border: 3px solid var(--surface-light); border-radius: var(--border-radius); touch-action: none; }
.pong-status { min-height: 1.6rem; text-align: center; color: #cbd5e1; font-weight: 600; }
.pong-touch-controls { display: none; justify-content: space-between; gap: 1rem; margin: 1rem auto; max-width: 520px; text-align: center; }
.pong-touch-controls div { display: flex; align-items: center; gap: .45rem; background: var(--surface); border-radius: 8px; padding: .4rem; }
.pong-touch-controls span { font-size: .85rem; }.pong-touch-controls button { width: 48px; height: 48px; border: 0; border-radius: 8px; background: var(--surface-light); color: var(--text-color); font-size: 1.4rem; font-weight: 700; }.pong-touch-controls button:active { background: var(--primary); }
@media (max-width: 768px) { .pong-touch-controls { display: flex; } .pong-stats { width: 100%; } }
@media (max-width: 430px) { .pong-touch-controls { flex-direction: column; align-items: stretch; } .pong-touch-controls div { justify-content: center; } }