/* ================================================
   DSNAKES POLYPONG — css/polypong.css
   Kept separate from css/games.css/arcade.css/swarm.css/turf.css — same
   per-concern split the repo already uses (see css/arcade.css's own
   header comment for the reasoning).
   ================================================ */

.polypong-page { max-width: 1000px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* ─── Lobby / size picker ──────────────────────── */
.pp-size-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem; margin-top: 0.75rem;
}
.pp-size-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 1.25rem 1rem; text-align: center; cursor: pointer; transition: var(--transition);
}
.pp-size-card:hover { border-color: var(--border-hover); box-shadow: var(--glow-sm); transform: translateY(-2px); }
.pp-size-card .shape { font-size: 2rem; margin-bottom: 0.5rem; }
.pp-size-card .label { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 1px; color: var(--green-secondary); }
.pp-size-card .sub { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.25rem; }

.pp-queue-status {
  text-align: center; padding: 2rem 1rem;
}
.pp-queue-status .waiting { font-family: var(--font-heading); font-size: 1.1rem; color: var(--green-secondary); margin-bottom: 1rem; }

/* ─── Match view ───────────────────────────────── */
.pp-match-canvas-wrap {
  position: relative; width: 100%; aspect-ratio: 1/1; max-width: 560px; max-height: 560px; margin: 0 auto;
  background: #050a06; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--glow-sm);
}
#polypong-canvas { width: 100%; height: 100%; display: block; }

.pp-hud-players {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.9rem 0;
}
.pp-hud-player {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px;
  padding: 0.35rem 0.8rem; font-size: 0.75rem;
}
.pp-hud-player .swatch { width: 9px; height: 9px; border-radius: 50%; }
.pp-hud-player.self { border-color: var(--border-hover); color: var(--green-secondary); font-weight: 700; }
.pp-hud-player.dead { opacity: 0.4; text-decoration: line-through; }

.pp-dpad {
  display: none; gap: 0.75rem; justify-content: center; margin: 0.9rem auto 0;
}
@media (max-width: 768px) { .pp-dpad { display: flex; } }
.pp-dpad-btn {
  width: 72px; height: 56px; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); color: var(--green-secondary); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none;
}
.pp-dpad-btn:active { background: var(--green-accent); }

.pp-results-table { width: 100%; max-width: 320px; margin: 0 auto; font-size: 0.85rem; }
.pp-results-table div { display: flex; justify-content: space-between; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border-color); }
.pp-results-table div.winner { color: var(--green-secondary); font-weight: 700; }
.pp-results-table div.you { color: #FFD700; }