@media (max-width: 768px) {

    /* ── Sidebar: overlay instead of push ── */
    .page-wrapper.sidebar-open {
        margin-left: 0 !important;
    }

    /* ── Header ── */
    .header {
        padding: 0 0.5rem !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }
    .header-left {
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }
    .header-right {
        gap: 0.4rem !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        width: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .login-btn, .register-btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
    #loggedInText {
        display: none !important;
    }
    #headerAuthLoading {
        min-width: 0 !important;
    }

    /* ── Topnav: horizontal scroll ── */
    .topnav {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        flex: 1 !important;
        margin: 0 0.25rem !important;
    }
    .topnav::-webkit-scrollbar {
        display: none;
    }
    .topnav a {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.78rem !important;
        padding: 0 0.5rem !important;
    }
    .topnav-secondary {
        flex-shrink: 0 !important;
    }
    /* ── Login form: keep on-screen on mobile ── */
    .header-login-form {
        right: 0 !important;
        width: 180px !important;
        z-index: 1000 !important;
    }

    /* ── Widgets: prevent overlap ── */
    .spotify-widget {
        bottom: 96px !important;
        left: 10px !important;
        width: 200px !important;
    }
    .community-widget {
        right: 10px !important;
    }
    .footer-widget {
        position: fixed !important;
        bottom: 36px !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        padding: 0.35rem 1rem !important;
        background: #1a1a1a !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 49 !important;
        box-sizing: border-box !important;
    }
    .footer-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.4rem !important;
        font-size: 0.75rem !important;
    }
    /* pad page bottom so content isn't hidden behind footer+community tab */
    .page-wrapper {
        padding-bottom: 80px !important;
    }

    /* ── index.html ── */
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .content {
        padding: 0.75rem !important;
    }
    .dashboard-card {
        overflow: hidden !important;
    }
    .status-bar {
        gap: 0.6rem;
        padding: 0.75rem;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    .bottom-row {
        grid-template-columns: 1fr !important;
    }
    .announcement-card {
        grid-column: span 1 !important;
        height: auto !important;
        margin-top: 0 !important;
    }
    /* Unique Visitors: thin bar layout */
    .bottom-row .dashboard-card:not(.announcement-card) {
        padding: 0.6rem 1rem !important;
    }
    .bottom-row .dashboard-card:not(.announcement-card) h3 {
        display: none !important;
    }
    .bottom-row .dashboard-card:not(.announcement-card) .stat-item {
        display: inline-flex !important;
        margin-bottom: 0 !important;
        margin-right: 1.5rem !important;
    }
    .bottom-row .dashboard-card:not(.announcement-card) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    .dashboard-grid .dashboard-card:nth-child(1),
    .dashboard-grid .dashboard-card:nth-child(2) {
        height: auto !important;
    }
    .middle-card {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    /* ── minecraft.html / teamspeak.html ── */
    .discord-hero {
        padding: 1.5rem 1rem !important;
    }
    .discord-server-info {
        flex-direction: column;
        gap: 1rem;
    }
    .server-details h1 {
        font-size: 1.6rem;
    }
    .server-description {
        font-size: 1rem;
    }
    .member-stats {
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .stat-box {
        padding: 0.75rem 1rem;
        min-width: 80px;
    }
    .stat-number {
        font-size: 1.3rem;
    }
    .join-btn {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    .features-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── register.html ── */
    .register-container {
        margin: 0 0.75rem;
    }
    .main-title {
        font-size: 2rem;
        padding-bottom: 2rem;
    }

    /* ── Popups ── */
    .access-denied-content,
    .popup-content {
        width: 90vw !important;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.6rem;
    }
    .status-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .member-stats {
        gap: 0.5rem;
    }
    .stat-box {
        min-width: 70px;
        padding: 0.6rem 0.75rem;
    }
}