/* Reduce container padding on mobile for wider working area */
@media screen and (max-width: 768px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Make the game box take more width on mobile */
    .column.is-three-quarters-mobile {
        width: 100%;
        flex: none;
    }
}

/* Optional: Further reduce padding on very small screens */
@media screen and (max-width: 400px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .box {
        padding: 1rem;
    }
}

/* Make the sequence display boxes slightly larger and easier to read */
    #result-section .notification {
        padding: 1rem;
        background-color: #f5f5f5; /* Light grey background */
        border: 1px solid #dbdbdb;
    }

    /* Ensure long numbers wrap nicely on mobile */
    #correct-sequence, #user-sequence {
        font-family: monospace; /* Makes numbers align better */
        letter-spacing: 1px;
    }