/* AUTHENTICATED APP */
        html,
        body,
        #authenticated-app {
            height: 100%;
        }

        #authenticated-app {
            min-height: 100dvh;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
        }

        .app-layout {
            display: grid;
            grid-template-rows: 1fr;
            position: relative;
            z-index: 5;
            min-height: 0;
            height: 100%;
            grid-template-columns: 260px minmax(0, 1fr) 280px;
        }

        #authenticated-app.visible {
            height: 100dvh;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
        }

        /* LOADING OVERLAY */
        #loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(2, 4, 8, 0.95);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            backdrop-filter: blur(8px);
        }

        #loading-overlay.show {
            display: flex;
        }

        .loading-spinner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .spinner-ring {
            width: 60px;
            height: 60px;
            border: 3px solid rgba(74, 158, 255, 0.1);
            border-top-color: var(--glow-blue);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            font-family: 'Cinzel', serif;
            font-size: 14px;
            color: var(--glow-blue);
            letter-spacing: 2px;
        }

        .hidden {
            display: none !important;
        }

        /* ── GRID FILTERS: always horizontally scrollable ── */
        .grid-controls {
            overflow-x: auto;
            white-space: nowrap;
            flex-wrap: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
            /* allow a bit of padding so buttons don't touch edges */
            padding: 0 8px;
        }
        .grid-controls::-webkit-scrollbar { display: none; }
        .filter-btn { flex-shrink: 0; }

        /* ── ACTIVITY DRAWER (tablet + desktop fallback) ── */
        .activity-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 300px;
            max-width: 90vw;
            z-index: 200;
            background: rgba(5,13,24,0.97);
            border-left: 1px solid var(--border);
            backdrop-filter: blur(16px);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 20px 16px;
            gap: 20px;
            transform: translateX(100%);
            transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        }
        .activity-drawer.open {
            transform: translateX(0);
        }
        .drawer-close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-mid);
            border-radius: 6px;
            padding: 6px 10px;
            cursor: pointer;
            font-size: 14px;
            min-height: 44px;
            min-width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .drawer-close-btn:hover { border-color: var(--glow-blue); color: var(--glow-blue); }

        .drawer-backdrop {
            position: fixed;
            inset: 0;
            z-index: 199;
            background: rgba(2,4,8,0.5);
            backdrop-filter: blur(2px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s;
        }
        .drawer-backdrop.open {
            opacity: 1;
            pointer-events: all;
        }

        /* ── MOBILE BOTTOM NAV ── */
        .mobile-bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 150;
            background: rgba(5,13,24,0.97);
            border-top: 1px solid var(--border);
            backdrop-filter: blur(12px);
            padding-bottom: env(safe-area-inset-bottom);
            flex-direction: row;
        }
        .mobile-nav-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 8px 4px;
            background: transparent;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            font-family: 'Cinzel', serif;
            font-size: 9px;
            letter-spacing: 1px;
            min-height: 56px;
            transition: color 0.2s;
        }
        .mobile-nav-btn .nav-icon { font-size: 20px; }
        .mobile-nav-btn.active { color: var(--glow-blue); }
        .mobile-nav-btn.active .nav-icon {
            filter: drop-shadow(0 0 6px var(--glow-blue));
        }

        /* ── MOBILE SECTION PANELS ── */
        .mobile-section {
            display: none;
            position: relative;
            z-index: 5;
        }

        /* ── MOBILE MENU (hamburger) ── */
        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-mid);
            border-radius: 6px;
            padding: 6px 10px;
            cursor: pointer;
            font-size: 18px;
            min-height: 44px;
            min-width: 44px;
            align-items: center;
            justify-content: center;
        }
        .mobile-menu-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            right: 14px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px;
            gap: 6px;
            flex-direction: column;
            z-index: 300;
            min-width: 180px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.6);
        }
        .mobile-menu-dropdown.open { display: flex; }
        .mobile-menu-dropdown .btn { width: 100%; text-align: center; }

        /* header needs position:relative for dropdown positioning */
        header { position: relative; }

        .header-desktop-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        /* ── TABLET (951px – 1199px) ── */
        @media (max-width: 1199px) {
            .app-layout {
                grid-template-columns: 220px minmax(0, 1fr);
            }

            /* right sidebar is now in the drawer only */
            .sidebar-right {
                display: none;
            }

            .logo span {
                display: none;
            }

            .header-stats {
                gap: 8px;
            }

            /* show the Activity button that opens the drawer */
            .btn-activity-drawer {
                display: inline-flex;
            }
        }

        @media (max-width: 950px) and (min-width: 768px) {
            .header-stats {
                display: none;
            }

            header {
                padding-inline: 16px;
            }
        }

        /* always hide the tablet-only activity button on wide screens */
        .btn-activity-drawer {
            display: none;
        }

        /* ── MOBILE (<768px) ── */
        @media (max-width: 767px) {
            /* Lock the whole page — no body/html scroll at all.
               position:fixed + inset:0 hard-clips the viewport regardless of
               document content height, so fixed-position children that now
               live outside #authenticated-app (bottom nav, modal overlay,
               toast container) can never inflate the scrollable page. */
            html, body {
                position: fixed;
                inset: 0;
                overflow: hidden;
                height: 100%;
                width: 100%;
            }

            /* Authenticated shell becomes a viewport-height flex column */
            #authenticated-app {
                display: flex;
                flex-direction: column;
                height: 100dvh;
                overflow: hidden;
                padding-bottom: 0;
            }

            header {
                flex-shrink: 0;
                padding: 10px 14px;
                gap: 8px;
            }

            .header-stats { display: none; }
            .header-desktop-actions { display: none; }
            .mobile-menu-btn { display: flex; }

            .app-footer { display: none; }

            .sidebar-left,
            .sidebar-right { display: none; }

            /* Map view: app-layout stretches to fill remaining space above nav */
            .app-layout {
                flex: 1;
                min-height: 0;
                display: block;
                overflow: hidden;
            }

            /* Canvas panel fills the entire content area on map */
            .sphere-grid-panel {
                width: 100%;
                height: 100%;
                min-height: 0;
                display: block;
                overflow: hidden;
            }

            /* Non-map: hide the canvas layout entirely */
            body.mobile-nonmap .app-layout {
                display: none;
            }

            /* Mobile content sections — hidden by default, fill remaining space when active */
            .mobile-section {
                display: none;
            }
            .mobile-section.active {
                display: block;
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 16px 16px calc(72px + env(safe-area-inset-bottom));
            }

            /* Bottom nav only shows when authenticated. Uses a body class
               (rather than a descendant selector off #authenticated-app)
               since the nav element lives outside #authenticated-app in the
               DOM to avoid being clipped by its overflow:hidden container. */
            body.authenticated .mobile-bottom-nav { display: flex; }

            /* Modals centered on mobile */
            .modal-overlay {
                align-items: center;
                justify-content: center;
                padding: 16px;
                /* Sit above the fixed bottom nav (z-index 150) so the modal is
                   never visually covered by it while open. */
                z-index: 200;
                /* Reserve space for the bottom nav so the overlay (and therefore
                   the centered modal) never extends underneath it. The actual
                   height is measured in JS (ui.js) and written to this custom
                   property, since env(safe-area-inset-bottom) + button height
                   varies across devices (e.g. iPhone 12 Pro Max). */
                bottom: var(--mobile-nav-h, 72px);
            }

            .modal {
                width: 100%;
                max-width: none;
                /* Leave room above the fixed bottom nav bar so the modal's
                   bottom edge/actions never render underneath it, and so
                   overflow-y scrolling reveals all content. */
                max-height: calc(100dvh - 2rem - var(--mobile-nav-h, 72px));
                height: calc(100dvh - 2rem - var(--mobile-nav-h, 72px));
                padding: 20px 16px;
                border-radius: 12px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .form-row { grid-template-columns: 1fr; }

            .modal-actions {
                position: sticky;
                bottom: 0;
                background: var(--panel);
                padding-top: 10px;
                margin-top: 10px;
            }

            .modal input,
            .modal select,
            .modal textarea {
                font-size: 16px !important;
                padding-top: 0.4rem !important;
                padding-bottom: 0.4rem !important;
            }

            /* Touch targets */
            button, .btn, .btn-icon { min-height: 44px; }

            /* Filter bar: full-width strip, horizontally scrollable, smaller buttons */
            .grid-controls {
                left: 0;
                transform: none;
                width: 100%;
                top: 8px;
                padding: 0 10px;
                box-sizing: border-box;
            }

            .filter-btn {
                font-size: 8px;
                letter-spacing: 1px;
                padding: 4px 10px;
                min-height: 0;
            }

            .btn-icon { padding: 8px 10px; font-size: 13px; }

            .activity-title, .schedule-name { font-size: 14px; }
        }

        /* ── MOBILE SECTION LAYOUT HELPERS ── */
        .mobile-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 20px;
        }
        .mobile-section-header h2 {
            font-family: 'Cinzel', serif;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-bright);
            margin: 0;
        }
        .mobile-section-header .btn {
            flex-shrink: 0;
            font-size: 9px;
        }
        .mobile-content-group {
            margin-bottom: 24px;
        }
        .mobile-content-group > .section-label {
            margin-bottom: 12px;
        }
        .mobile-content-group > .btn {
            width: 100%;
            margin-top: 12px;
        }
        .mobile-profile-actions {
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }
        .mobile-profile-actions .btn {
            width: 100%;
        }
        .mobile-profile-footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        .mobile-profile-footer a {
            color: var(--text-dim);
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            letter-spacing: 0.08em;
            text-decoration: none;
        }
        .mobile-profile-footer a:hover {
            color: var(--glow-blue);
        }
        /* Profile card fills full width on mobile */
        #mobile-char-card {
            width: 100%;
            box-sizing: border-box;
        }

        /* PERSISTENT DESKTOP FOOTER */
        .app-footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 12px 20px;
            border-top: 1px solid var(--border);
            background: rgba(4, 15, 29, 0.6);
            position: relative;
            z-index: 5;
        }
        .app-footer a {
            color: var(--text-dim);
            font-family: 'Share Tech Mono', monospace;
            font-size: 10px;
            letter-spacing: 0.08em;
            text-decoration: none;
        }
        .app-footer a:hover {
            color: var(--glow-blue);
        }

        /* ── REDUCED MOTION ── */
        @media (prefers-reduced-motion: reduce) {
            .star { animation: none; opacity: 0.4; }
            .activity-item { animation: none; }
            .btn:hover, .btn-icon:hover { transform: none; }
            .activity-drawer { transition: none; }
            .drawer-backdrop { transition: none; }
        }