/* ── Mobile (< 640px) ── */
@media (max-width: 639px) {
    .nav {
        padding: 0.6rem 1rem;
    }

    .nav__links {
        gap: 1rem;
        font-size: 0.8rem;
    }

    .hero {
        padding: 2rem 1rem 1rem;
    }

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

    .features {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .controls-panel {
        grid-template-columns: 1fr;
        padding: 0.5rem 1rem 1rem;
    }

    .action-bar {
        flex-direction: column;
        align-items: center;
        padding: 0 1rem 1.5rem;
    }

    .action-btn {
        width: 100%;
        text-align: center;
    }

    .section--board {
        padding: 0.5rem 0.5rem 1rem;
    }

    .about-section {
        padding: 0 1rem 2rem;
    }

    .about-card {
        padding: 1.5rem;
    }

    .about-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

/* ── Tablet (640px – 1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {
    .hero {
        padding: 2.5rem 2rem 1.5rem;
    }

    .features {
        padding: 1.5rem;
    }
}

/* ── Large displays (>= 1440px) ── */
@media (min-width: 1440px) {
    .board .tile .tile-face {
        font-size: clamp(40px, 3.5vw, 62px);
    }

    .section {
        max-width: 1100px;
    }
}

/* ── 4K / TV (>= 2560px) ── */
@media (min-width: 2560px) {
    .board .tile .tile-face {
        font-size: 62px;
    }

    .nav {
        padding: 1.2rem 3rem;
        font-size: 1.1rem;
    }

    .hero__title {
        font-size: 2.2rem;
    }
}