/* Mobile Responsiveness */
@media (max-width: 768px) {
    #app {
        width: 100vw;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        padding: 0;
        gap: 0;
        border-radius: 0;
    }

    aside {
        flex-direction: row;
        overflow-x: auto;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        border-radius: 0;
        border-bottom: 1px solid var(--glass-border);
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.4);
        /* Make header slightly more opaque */
    }

    aside h2 {
        display: none;
        /* Hide title on mobile to save space */
    }

    nav {
        display: flex;
        width: 100%;
        justify-content: space-around;
        align-items: center;
    }

    .nav-item {
        padding: 0.5rem;
        font-size: 0.9rem;
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    /* Adjust main content padding */
    main {
        padding: var(--spacing-md);
        padding-bottom: 80px;
        /* Space for potential fixed elements if needed */
    }

    /* Dashboard Grid */
    .stats-grid {
        grid-template-columns: 1fr;
        /* Stack cards */
    }

    /* Table adjustments */
    .table-responsive {
        overflow-x: auto;
    }

    .glass-table th,
    .glass-table td {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    /* Hide less important columns on very small screens? */
    @media (max-width: 480px) {
        .glass-table th:nth-child(4),
        .glass-table td:nth-child(4),
        /* Categories */
        .glass-table th:nth-child(5),
        .glass-table td:nth-child(5)

        /* Stats */
            {
            display: none;
        }
    }

    /* Modal adjustments */
    #word-modal {
        width: 95% !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Buttons */
    button {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}