/* Responsive Design */
@media (max-width: 768px) {
    .game-container {
        padding: 20px;
        margin: 10px;
    }
    
    .main-menu {
        padding: 30px 20px;
        margin: 10px;
    }
    
    .score-section {
        gap: 10px;
        padding: 15px;
    }
    
    .game-board {
        max-width: 350px;
        padding: 20px;
        gap: 12px;
    }

    .cell {
        font-size: 2.8rem;
    }

    

        .tournament-row {
            max-width: 320px;
            margin: 12px auto 15px;
        }

        .tournament-card {
            padding: 14px 16px;
        }

        .tournament-title {
            font-size: 0.8rem;
        }

        .tournament-game-info {
            font-size: 0.8rem;
        }

        .tournament-scores {
            gap: 15px;
        }

    .current-player {
        font-size: 1.5rem;
        letter-spacing: 0.5px;
    }

    .timer-value {
        font-size: 1.5rem;
    }
    
    .controls {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 200px;
    }

    .difficulty-options {
        flex-direction: column;
        align-items: center;
    }

    .difficulty-btn {
        width: 100%;
        max-width: 150px;
    }

    .modal {
        padding: 30px 20px;
        margin: 10px;
    }

    .modal-buttons {
        flex-direction: column;
        align-items: center;
    }

    .modal-btn {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .menu-title {
        font-size: 2rem;
    }
    
    .cell {
        font-size: 2rem;
    }
    
    .winner-announcement {
        font-size: 3rem;
    }

    .score-value {
        font-size: 2rem;
    }

    .current-player {
        font-size: 1.5rem;
    }

    .mode-card {
        padding: 20px 15px;
    }

    .mode-icon {
        font-size: 2.5rem;
    }

    .mode-title {
        font-size: 1.25rem;
    }

    .mode-description {
        font-size: 0.875rem;
    }
}

@media (max-width: 320px) {
    .main-container {
        padding: 10px;
    }

    .game-container,
    .main-menu {
        padding: 20px 15px;
    }

    .score-section {
        padding: 10px;
        gap: 5px;
    }

    .game-board {
        padding: 15px;
        gap: 10px;
    }

    .cell {
        font-size: 1.75rem;
    }

    .controls {
        gap: 10px;
    }

    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .main-container {
        padding: 10px;
    }

    .game-container,
    .main-menu {
        max-width: 90vw;
        padding: 20px;
    }

    .menu-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .score-section {
        margin-bottom: 15px;
        padding: 15px;
    }

    .game-info {
        margin-bottom: 15px;
        padding: 15px;
    }

    .game-board {
        margin: 15px auto;
        max-width: 300px;
    }

    .cell {
        font-size: 2rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .custom-cursor {
        width: 16px;
        height: 16px;
    }

    .cursor-trail {
        width: 3px;
        height: 3px;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .cell:hover {
        transform: none;
        border-color: var(--theme-border-medium);
        box-shadow: none;
    }

    .cell:active {
        transform: scale(0.95);
    }

    .btn:hover,
    .mode-card:hover,
    .difficulty-btn:hover {
        transform: none;
        box-shadow: none;
    }

    .btn:active,
    .mode-card:active,
    .difficulty-btn:active {
        transform: scale(0.95);
    }

    /* Hide custom cursor on touch devices */
    .custom-cursor,
    .cursor-trail {
        display: none;
    }

    body {
        cursor: auto;
    }
}

/* Print styles */
@media print {
    .background-container,
    .confetti-container,
    .custom-cursor,
    .cursor-trail {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .game-container,
    .main-menu {
        background: white !important;
        border: 1px solid var(--theme-border-medium) !important;
        box-shadow: none !important;
    }
}