.pong-page .game-panel { display:grid; gap:1rem; }
.pong-ui { border:1px solid rgba(132, 173, 255, 0.42); border-radius:1.1rem; padding:1rem; background: radial-gradient(circle at 12% 0%, rgba(255,79,198,.22), transparent 32%), radial-gradient(circle at 84% 10%, rgba(37,236,255,.2), transparent 30%), linear-gradient(160deg, rgba(39,19,88,.94), rgba(17,40,82,.9)); }
.pong-topbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; align-items:center; }
.pong-stat { border:1px solid rgba(132, 173, 255, 0.42); border-radius:.8rem; background: rgba(18, 30, 77, 0.56); padding:.55rem .7rem; display:grid; gap:.25rem; }
.pong-stat span { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: #e4d8ff; }
.pong-stat strong { font-family:"Orbitron",system-ui,sans-serif; font-size:1.02rem; }
.pong-hint { margin:.8rem 0 0; color: #d5d1ff; font-size:.9rem; }
.pong-canvas-wrap { margin-top:.95rem; border:1px solid rgba(132, 173, 255, 0.42); border-radius:.95rem; padding:.5rem; background: linear-gradient(150deg, rgba(206,224,255,.12), rgba(255,255,255,.03)), linear-gradient(150deg, rgba(72,24,102,.72), rgba(18,42,90,.76)); }
#pgCanvas { display:block; width:100%; max-width:420px; margin:0 auto; border-radius:.8rem; touch-action:none; }
@media (max-width:980px){ .pong-page .game-panel { padding:.8rem; } }
@media (max-width:720px){ .pong-topbar { grid-template-columns:repeat(2,minmax(0,1fr)); } .pong-hint { font-size:.84rem; } }