/* Mobile-first overrides for existing classes without touching HTML */

/* General paddings */
body { padding: 16px; }

/* Ranking grid default: 1 column on phones */
#ranking-list { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Player card stacks on small screens */
.player-card { display: flex; gap: 16px; }
.player-photo { width: 72px; height: 72px; }

/* Insignias grid tightened for phones */
.insignias { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.insignia-img { width: 56px; height: 56px; }

/* Modal sizing */
.modal { width: 95%; max-width: 900px; }
#login-modal { width: 92%; max-width: 420px; }

/* Login button min tap target */
.login-button { min-height: 44px; padding: 10px 18px; }

/* Charts canvases fit container */
#modal-graficos canvas { display: block; width: 100% !important; height: auto !important; }

/* sm >= 480px */
@media (min-width: 480px) {
  .player-photo { width: 80px; height: 80px; }
}

/* md >= 768px: 2 cols ranking, bigger charts */
@media (min-width: 768px) {
  #ranking-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .insignias { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
  #modal-graficos canvas { height: auto; }
}

/* lg >= 1024px */
@media (min-width: 1024px) {
  #ranking-list { grid-template-columns: repeat(2, 1fr); }
}

/* xl >= 1440px: roomy */
@media (min-width: 1440px) {
  #ranking-list { grid-template-columns: repeat(3, 1fr); }
}