.game-window--pong{max-width:560px}
.game-canvas-wrap--pong{aspect-ratio:3/2;background:var(--bg-alt)}
#pongCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}

.game-diff-buttons{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.game-diff-hint{margin-top:10px;color:var(--text-dim);font-size:12px}
.game-diff-hint.is-hidden{display:none}

.game-card-pong-paddle{
  position:absolute;top:50%;width:6px;height:34%;margin-top:-17%;
  border-radius:3px;
}
.game-card-pong-paddle--l{
  left:14%;background:var(--accent);box-shadow:0 0 12px rgba(143,227,168,.5);
  animation:game-card-pong-paddle-l 3.6s ease-in-out infinite;
}
.game-card-pong-paddle--r{
  right:14%;background:var(--warn);box-shadow:0 0 12px rgba(251,146,60,.5);
  animation:game-card-pong-paddle-r 3.6s ease-in-out infinite;
}
@keyframes game-card-pong-paddle-l{
  0%,50%,100%{margin-top:-17%}
  75%{margin-top:-3%}
}
@keyframes game-card-pong-paddle-r{
  0%,50%,100%{margin-top:-17%}
  25%{margin-top:-31%}
}
.game-card-pong-ball{
  position:absolute;top:50%;left:50%;width:11px;height:11px;border-radius:3px;
  background:var(--accent-bright);box-shadow:0 0 16px rgba(143,227,168,.6);
  animation:game-card-pong-ball 3.6s ease-in-out infinite;
}
@keyframes game-card-pong-ball{
  0%{transform:translate(-50%,-50%)}
  25%{transform:translate(calc(-50% + 92px),calc(-50% - 34px))}
  50%{transform:translate(-50%,-50%)}
  75%{transform:translate(calc(-50% - 92px),calc(-50% + 34px))}
  100%{transform:translate(-50%,-50%)}
}

@media (max-width:520px){
  .game-window--pong{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  .game-card-pong-ball{animation:none}
}