/* Responsive Design */

/* Tablets and below */
@media (max-width: 991.98px) {
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .game-board {
        padding: 1rem;
        max-height: calc(100vh - 300px);
    }
}

/* Small tablets and landscape phones */
@media (max-width: 767.98px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    nav {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .game-card {
        padding: 1rem;
    }
    
    .game-icon {
        font-size: 3rem;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .game-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .game-info {
        justify-content: space-around;
    }
    
    .game-buttons {
        justify-content: center;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .leaderboard-table {
        font-size: 0.9rem;
    }
    
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.5rem;
    }
    
    .game-board {
        padding: 0.75rem;
        max-height: calc(100vh - 280px);
    }
    
    .game-container {
        margin: 1rem auto;
    }
}

/* Mobile phones */
@media (max-width: 575.98px) {
    .game-grid {
        grid-template-columns: 1fr;
    }
    
    .hero h1 {
        font-size: 1.5rem;
    }
    
    .hero p {
        font-size: 0.9rem;
    }
    
    .form-container {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .game-board {
        padding: 0.5rem;
        max-height: calc(100vh - 260px);
    }
    
    .modal-content {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .notification {
        right: 10px;
        left: 10px;
        transform: translateY(-100px);
    }
    
    .notification.show {
        transform: translateY(0);
    }
    
    .profile-stats {
        grid-template-columns: 1fr;
    }
    
    .leaderboard-filters {
        flex-direction: column;
    }
    
    .leaderboard-filters select {
        width: 100%;
    }
    
    .game-header h1 {
        font-size: 1.5rem;
    }
    
    .game-header p {
        font-size: 0.85rem;
    }
    
    .info-value {
        font-size: 1.1rem;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .cell:hover {
        background: var(--bg-color);
        color: var(--text-color);
    }
    
    .cell:active {
        background: var(--primary-color);
        color: white;
    }
    
    .game-card:hover {
        transform: none;
    }
    
    .game-card:active {
        transform: scale(0.98);
    }
}

/* Landscape orientation on mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .game-board {
        max-height: calc(100vh - 180px);
    }
    
    .game-container {
        margin: 0.5rem auto;
    }
    
    .game-header {
        margin-bottom: 0.5rem;
    }
    
    .game-controls {
        padding: 0.5rem;
    }
}