@import url('../global.css');

/* =============================================================================
   Pong — game-specific styles (frame/controls/score-bar = shared).
   ========================================================================== */

/* --- Square board: paddles/ball positioned in % by the JS. --- */
.pong-board {
  background: var(--pong-board-bg);
  touch-action: none;
}

/* Dashed center net. */
.pong-net {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 2px dashed var(--pong-net);
  transform: translateX(-50%);
}

/* --- Paddles --- */
.pong-paddle {
  position: absolute;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-sm);
}

.pong-paddle--player {
  background: var(--pong-paddle-player);
  box-shadow:
    var(--shadow-sm),
    0 0 10px rgba(20, 184, 166, 0.4);
}

.pong-paddle--opponent {
  background: var(--pong-paddle-opponent);
  box-shadow:
    var(--shadow-sm),
    0 0 10px rgba(239, 68, 68, 0.4);
}

/* --- Ball --- */
.pong-ball {
  position: absolute;
  background: var(--pong-ball);
  border-radius: 50%;
  box-shadow:
    var(--shadow-sm),
    0 0 8px 2px rgba(255, 255, 255, 0.4);
  animation: pongBallGlow 1.2s ease-in-out infinite;
}

/* Past the fire threshold: a blazing orange ball with a flickering glow. */
.pong-ball.is-onfire {
  background: radial-gradient(
    circle at 50% 40%,
    #fff3c4 0%,
    #fbbf24 35%,
    #f97316 65%,
    #ef4444 100%
  );
  animation: pongFire 0.28s ease-in-out infinite;
}