/* Responsive Design */
@media (max-width: 500px) {
    :root {
        --header-height: 50px;
    }

    .app-container {
        padding: 5px;
        margin-top: var(--header-height);
        height: calc(100vh - var(--header-height));
    }

    .brand {
        font-size: 24px;
    }

    header {
        padding: 0 8px;
    }

    .header-icons {
        gap: 5px;
    }

    .icon-btn-simple svg {
        width: 24px;
        height: 24px;
    }

    #game-board {
        max-height: none; /* Allow it to shrink */
        width: 100%;
        padding: 5px;
    }

    .grid-container {
        width: 100%;
        height: auto;
        max-width: 100%;
        grid-gap: 4px;
    }

    .row {
        grid-gap: 4px;
    }

    .tile {
        font-size: 24px; /* Smaller text in tiles */
        border-width: 1px;
    }

    #keyboard-container {
        padding: 0 2px;
        margin-bottom: 5px;
        margin-top: 10px; /* Space between board and keyboard */
    }

    .keyboard-row {
        gap: 3px; /* Tighter keys */
        height: 50px;
    }

    .key {
        height: 50px;
        font-size: 11px;
        border-radius: 3px;
    }

    .key.wide {
        font-size: 10px;
    }

    .modal {
        width: 95%;
        padding: 12px;
    }

    .modal h2 {
        font-size: 14px;
    }

    .btn-close {
        top: 8px;
        right: 8px;
    }

    .stat span {
        font-size: 24px;
    }

    .stat label {
        font-size: 10px;
    }

    #login-desc, .login-footer {
        font-size: 12px;
    }

    .form-group input {
        padding: 8px;
        font-size: 14px;
    }

    .btn-primary {
        padding: 10px;
        font-size: 12px;
    }
}

@media (max-height: 700px) {
    #game-board {
        flex-grow: 0.8;
    }

    .key {
        height: 45px;
    }

    .keyboard-row {
        height: 45px;
    }

    #keyboard-container {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}