/* ========================================
   📱 MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablets and smaller */
@media (max-width: 768px) {
    .night-sky {
        height: 250px;
    }

    .gem-row {
        gap: 8px;
        padding: 8px;
    }

    .gem,
    .gem-placeholder {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .night-sky {
        height: 200px;
    }

    .gem-row {
        gap: 6px;
        padding: 6px;
        flex-wrap: wrap;
    }

    .gem,
    .gem-placeholder {
        width: 35px;
        height: 35px;
        min-width: 35px;
        min-height: 35px;
    }

    /* Make input and button easier to tap */
    #gem-input {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        padding: 12px !important;
    }

    #btn-add-gem {
        padding: 14px !important;
        font-size: 1.1rem !important;
    }


}

/* Very small screens */
@media (max-width: 360px) {

    .gem,
    .gem-placeholder {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .gem-row {
        gap: 4px;
    }
}