/* Responsive Design */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  main {
    gap: 20px;
  }

  #login-container {
    padding: 20px;
  }

  #login-container h1 {
    font-size: 2rem;
  }

  #user-header {
    flex-direction: column;
    gap: 15px;
  }

  #user-info {
    flex-direction: column;
    text-align: center;
  }

  #user-info h2 {
    font-size: 1.3rem;
  }

  #logout-btn {
    width: 100%;
    text-align: center;
  }

  #post-creation-container, .post-content {
    padding: 20px;
  }

  .post .game-image {
    aspect-ratio: 4 / 3;
  }

  .game-card img {
    aspect-ratio: 4 / 3;
  }
  
  #checkin-filters {
    flex-direction: column;
    align-items: stretch;
  }

  #profile-stats, #game-stats-overview {
    flex-direction: column;
    gap: 20px;
  }

  #games-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  #games-grid.collapsed {
    max-height: 380px; /* Adjust for smaller cards on mobile */
  }
}