/* ===== RESPONSIVE DESIGN ===== */

/* Mobile Optimizations */
@media (max-width: 480px) {
    :root {
        --block-cell-size: 18px;
    }

    .top-bar {
        padding: 12px 15px;
    }

    .score-value {
        font-size: 2.2em;
    }

    .control-btn {
        width: 40px;
        height: 40px;
    }

    .btn-icon, #musicIcon {
        font-size: 1.1em;
    }

    .game-content {
        padding: 15px;
        gap: 15px;
    }

    .title {
        font-size: 2.5em;
    }

    .block-cell, .block-cell.empty {
        width: var(--block-cell-size);
        height: var(--block-cell-size);
    }

    .blocks-section {
        padding: 15px;
    }

    .difficulty-buttons {
        gap: 20px;
    }

    .difficulty-btn {
        width: 80px;
        height: 80px;
    }

    .difficulty-icon {
        font-size: 2em;
    }

    .difficulty-label {
        font-size: 0.7em;
    }
}

/* Landscape mobile optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .game-content {
        flex-direction: row;
        align-items: center;
    }

    .grid-container {
        flex: 1;
    }

    .blocks-section {
        flex: 0 0 auto;
        margin-left: 20px;
        min-width: 200px;
    }

    .blocks-container {
        flex-direction: column;
        min-height: auto;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .score-value {
        font-size: 2em;
    }

    .game-content {
        padding: 10px;
    }

    .control-btn {
        width: 35px;
        height: 35px;
    }

    .difficulty-buttons {
        gap: 15px;
    }

    .difficulty-btn {
        width: 70px;
        height: 70px;
    }

    .difficulty-icon {
        font-size: 1.8em;
    }

    .difficulty-label {
        font-size: 0.65em;
    }
}

/* Large desktop screens */
@media (min-width: 1200px) {
    .grid {
        max-width: 500px;
        max-height: 500px;
    }

    :root {
        --block-cell-size: 26px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .block-cell {
        border-width: 0.5px;
    }

    .cell {
        border-width: 0.5px;
    }
}