@media (min-width: 1025px) {
  .main-content {
    max-width: 1100px;
    margin: 20px auto;
    padding: 0 20px;
  }
  
  .game-section {
    width: 100%;
  }
  
  .sidebar {
    max-width: 1100px;
    margin: 20px auto;
    padding: 0 20px;
  }
  
  .game-container {
    min-height: 600px;
    max-height: 700px;
  }
}

/* Tablet and below - Single column layout with bottom navigation */
@media (max-width: 1024px) {
  .main-content {
    margin: 15px auto;
    padding: 0 15px;
  }
  
  .game-section {
    width: 100%;
  }
  
  .sidebar {
    margin: 15px auto;
    padding: 0 15px;
  }
  
  .header-container {
    flex-direction: column;
    height: auto;
    padding: 15px;
    gap: 15px;
  }

  .main-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .nav-item {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .main-content {
    margin: 10px auto;
    padding: 0 10px;
  }

  .sidebar {
    margin: 10px auto;
    padding: 0 10px;
  }

  .game-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .game-title {
    font-size: 20px;
  }

  .game-container {
    padding-bottom: 56.25%; /* 16:9 aspect ratio for mobile */
    min-height: 400px; /* Adequate height for mobile */
    max-height: 500px;
  }

  .game-details {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .games-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
  }

  .search-input {
    width: 150px;
  }
}

@media (max-width: 480px) {
  .game-title {
    font-size: 18px;
  }

  .info-container, .games-container {
    padding: 20px;
  }

  .sport-game-thumb {
    height: 80px;
  }

  .game-container {
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    min-height: 350px; /* Minimum height for small screens */
    max-height: 450px;
  }
}