/* Pong : arène plein écran sous l'en-tête commun. Couleurs et rayons viennent des jetons du thème actif. */
.pong-page { height: 100vh; height: 100dvh; overflow: hidden; }
.pong-page .site-header__inner { min-height: 3rem; padding-block: 0.25rem; }
.pong-page .brand span { display: none; }
.pong-main { position: relative; flex: 1; min-height: 0; display: flex; padding: 0.5rem clamp(0.5rem, 2vw, 1.25rem); }
.pong-main canvas { width: 100%; height: 100%; display: block; touch-action: none; border-radius: var(--radius-lg); border: 1px solid var(--glass-card-border); background: var(--bg-card); }
.pong-score { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; pointer-events: none; color: var(--text-heading); }
.pong-score__box { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; }
.pong-score__label { font-size: var(--fs-0-7rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pong-score__val { font-size: var(--fs-clamp-1-85rem-3-8vw-2-6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pong-score__colon { font-size: var(--fs-2rem); color: var(--text-muted); }
.pong-overlay { position: absolute; inset: 0.5rem; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; text-align: center; border-radius: var(--radius-lg); background: var(--glass-modal-bg); -webkit-backdrop-filter: blur(var(--glass-floating-blur)); backdrop-filter: blur(var(--glass-floating-blur)); }
.pong-overlay.is-visible { display: flex; }
.pong-overlay h2 { margin: 0; font-size: var(--fs-clamp-1-6rem-4vw-2-3rem); }
.pong-overlay p { margin: 0; max-width: 32rem; }
.pong-noscript { position: absolute; inset: auto 1rem 1rem; text-align: center; color: var(--text-muted); }
.site-footer--compact { padding-block: 0.4rem; font-size: var(--fs-0-8rem); }
.site-footer--compact .site-footer__inner { align-items: center; }
.site-footer--compact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); }
@media (max-width: 640px) {
  .site-footer--compact .site-footer__inner > span { display: none; }
  .pong-score { top: 0.5rem; gap: 0.5rem; }
}