/* ==========================================================================
   Royal Armies — mobile & tablet responsive layer
   Load after style.css / style2.css
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.royal-armies-touch-device,
html.royal-armies-touch-device body,
html.royal-armies-touch-device body * {
    cursor: auto !important;
}

html.royal-armies-touch-device #royal-armies-custom-cursor,
html.royal-armies-touch-device #cursor-click-fx-layer {
    display: none !important;
}

/* Prevent horizontal scroll without altering desktop backgrounds */
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Portal + layout tweaks — tablet/phone only (do not leak to desktop) */
@media (max-width: 1024px) {
    #main-dashboard-canvas {
        width: 100% !important;
        max-width: 100% !important;
        background-image: none !important;
        background-color: #050403 !important;
        background-attachment: scroll !important;
        background:
            radial-gradient(ellipse 130% 70% at 50% -8%, rgba(92, 68, 32, 0.42) 0%, transparent 58%),
            radial-gradient(ellipse 85% 55% at 12% 88%, rgba(28, 48, 62, 0.35) 0%, transparent 52%),
            radial-gradient(ellipse 70% 45% at 88% 72%, rgba(48, 22, 18, 0.28) 0%, transparent 48%),
            linear-gradient(168deg, #0a0806 0%, #12161e 36%, #0c1016 68%, #050403 100%) !important;
    }

    .staging-deck-master-wrapper {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }

    .over-bar-utility-deck {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
        padding-bottom: 8px !important;
    }

    .portal-brand-logo-stack {
        --portal-early-access-lift: 144px;
    }

    .portal-brand-header .portal-early-access-readout {
        position: absolute !important;
        top: calc(100% - var(--portal-early-access-lift, 144px)) !important;
        margin: 0 !important;
        margin-top: 0 !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.24em !important;
    }

    .developer-maintenance-alert-bar {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    input:not(#page-landing .landing-login-field),
    textarea,
    select,
    .login-input {
        font-size: max(16px, 1rem) !important;
    }
}

/* Touch targets — phone/tablet only (landing login uses dedicated sizing below) */
@media (max-width: 768px) {
    .portal-mobile-nav-toggle,
    .portal-mobile-nav-page-item,
    .portal-mobile-nav-auth-btn,
    .portal-mobile-commander-trigger {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.18) !important;
    }

    button:not(#page-landing button):not(.metric-roster-hover-trigger),
    .header-logout-btn,
    .commander-hub-top-tab,
    .commander-hub-subnav-item,
    .chronicle-rewards-track-tab,
    .chat-channel-btn,
    .chat-message-action-btn,
    .img-btn:not(#page-landing .img-btn),
    .settings-btn,
    .master-action-btn,
    .lore-audio-play-btn,
    .dropdown-action-item {
        min-height: 44px;
        touch-action: manipulation;
    }

    .nav-tab {
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* Coarse pointer: always show chat reply/edit */
@media (hover: none), (pointer: coarse) {
    .chat-message-hover-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .chat-message-action-btn {
        min-height: 36px !important;
        padding: 6px 10px !important;
    }
}

/* =============================================================================
   TABLET (≤ 1024px)
   ============================================================================= */
@media (max-width: 1024px) {
    .portal-brand-logo-asset {
        max-width: min(520px, 92vw) !important;
    }

    .staging-deck-master-wrapper {
        margin-top: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 8px !important;
    }

    .dashboard-news-card-box {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .portal-sidebar-flex-column {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        position: static !important;
    }

    .portal-twin-split-deck-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    #panel-age-portal-mode.age-portal-view-canvas,
    #panel-age-portal-mode.portal-age-portal-layout-mounted {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    #panel-age-portal-mode .portal-age-intro-card,
    #panel-age-portal-mode .portal-age-portal-right-stack {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack {
        height: auto !important;
        align-self: auto !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-intro-card {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack > .portal-deployment-control-deck {
        width: 100% !important;
        max-width: 100% !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack > .portal-deployment-control-deck .deployment-action-button-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack .portal-sidebar-flex-column {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack .portal-developers-log-card,
    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack .portal-sidebar-flex-column .dashboard-news-card-box {
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack #dashboard-patch-notes-dock,
    #panel-age-portal-mode.portal-age-portal-layout-mounted .portal-age-portal-right-stack .portal-developers-log-scroll {
        max-height: min(420px, 52vh) !important;
        overflow-y: auto !important;
    }

    .portal-age-intro-art {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px 0 !important;
    }

    #panel-age-portal-mode > .portal-twin-split-deck-row {
        display: contents !important;
    }

    #panel-age-portal-mode .portal-twin-split-deck-row > .dashboard-news-card-box:first-child,
    #panel-age-portal-mode .portal-age-intro-card {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #panel-age-portal-mode > .portal-deployment-control-deck {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }

    #panel-age-portal-mode > .portal-deployment-control-deck .deployment-action-button-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #panel-age-portal-mode .portal-sidebar-flex-column {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #panel-age-portal-mode .portal-sidebar-flex-column .dashboard-news-card-box,
    #panel-age-portal-mode .portal-sidebar-flex-column .portal-developers-log-card {
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #panel-age-portal-mode #dashboard-patch-notes-dock,
    #panel-age-portal-mode .portal-developers-log-scroll {
        max-height: min(420px, 52vh) !important;
        overflow-y: auto !important;
    }

    /* Slim age metrics strip — stacked above nav; 3 rows: countdown | cycle+mode+nation | rosters */
    .portal-age-metrics-dashboard-bar {
        order: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px 6px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
        margin-top: max(6px, env(safe-area-inset-top)) !important;
        margin-bottom: 4px !important;
        padding: 5px 8px !important;
        border-width: 5px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.88) !important;
    }

    #master-age-metrics-banner-bar > .metric-capsule-cell:nth-child(1) {
        order: 2 !important;
        grid-column: 1 / 3 !important;
    }

    #master-age-metrics-banner-bar > .metric-capsule-cell:nth-child(2) {
        order: 3 !important;
        grid-column: 3 / 5 !important;
    }

    #master-age-metrics-banner-bar > .metric-capsule-cell:nth-child(4) {
        order: 4 !important;
        grid-column: 5 / 7 !important;
    }

    #metric-registered-players-cell {
        order: 5 !important;
        grid-column: 1 / 4 !important;
    }

    #metric-active-players-cell {
        order: 6 !important;
        grid-column: 4 / 7 !important;
    }

    #portal-metrics-auth-build-column,
    #portal-alpha-version-capsule {
        order: 7 !important;
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #portal-metrics-auth-build-column .metric-auth-build-readout,
    #portal-alpha-version-capsule {
        justify-content: center !important;
    }

    #portal-metrics-auth-build-column .metric-text-stack,
    #portal-alpha-version-capsule .metric-text-stack {
        align-items: center !important;
    }

    .portal-age-metrics-dashboard-bar .metric-roster-hover-cell .metric-roster-hover-trigger {
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.15 !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0.52rem !important;
        letter-spacing: 0.4px !important;
        text-underline-offset: 2px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .portal-age-metrics-dashboard-bar .metric-label-short {
        display: inline !important;
    }

    .portal-age-metrics-dashboard-bar .metric-label-full {
        display: none !important;
    }

    .portal-age-metrics-dashboard-bar .metric-roster-hover-cell .metric-text-stack {
        align-items: flex-start !important;
    }

    .portal-mobile-nav-bar-clip {
        order: 2 !important;
        position: relative !important;
        z-index: 50 !important;
        isolation: isolate !important;
    }

    body#main-dashboard-canvas .developer-maintenance-alert-bar.portal-maintenance-alert-below-nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        order: 3 !important;
        z-index: 90 !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        animation: developerMaintenanceAlertPulse 3s ease-in-out infinite !important;
    }

    body#main-dashboard-canvas.developer-maintenance-alert-active {
        padding-top: 0 !important;
        box-sizing: border-box !important;
    }

    .dynamic-portal-view-container {
        order: 4 !important;
    }

    .metric-capsule-cell {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: none !important;
        min-width: 0 !important;
        gap: 5px !important;
        padding: 3px 5px !important;
        border-radius: 3px !important;
        background: rgba(0, 0, 0, 0.28) !important;
    }

    .metric-capsule-cell.metric-capsule-divider {
        border-left: none !important;
        padding-left: 5px !important;
    }

    .metric-glyph-icon {
        font-size: 0.8rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    .metric-text-stack {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .metric-label-title {
        font-size: 0.52rem !important;
        letter-spacing: 0.4px !important;
        line-height: 1.15 !important;
    }

    .metric-live-data-value {
        font-size: 0.7rem !important;
        margin-top: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    #metrics-transition-countdown-display {
        font-size: 0.4rem !important;
        letter-spacing: 0.03em !important;
        white-space: nowrap !important;
    }

    .portal-universal-game-time-panel,
    .portal-age-countdown-panel,
    .portal-deployment-server-panel {
        max-width: min(420px, 100%) !important;
    }

    .portal-universal-game-time-display {
        font-size: clamp(1.15rem, 5.4vw, 1.95rem) !important;
        max-width: 52% !important;
        transform: translateY(-4%) !important;
        grid-template-columns:
            0.78em 0.78em 0.3em 0.94em 0.94em 0.3em 0.78em 0.78em !important;
        column-gap: 0.01em !important;
    }

    .portal-game-time-char--wing-outer {
        font-size: 0.56em !important;
    }

    .portal-game-time-char--center {
        font-size: 1em !important;
    }

    .portal-server-panel-header {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .portal-server-panel-heading {
        text-align: center !important;
        width: 100% !important;
    }

    .portal-server-status-pill {
        margin: 0 auto !important;
    }

    .portal-age-countdown-panel #dynamic-age-sub-timer-display {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        font-size: 1rem !important;
    }

    /* Join Age buttons: no hover/build SFX or aura shake on mobile; click select SFX stays in JS */
    .action-btn-aura-housing.aura-glow-red,
    .action-btn-aura-housing.aura-glow-blue {
        animation: none !important;
        filter: none !important;
        transition: none !important;
    }

    .action-btn-aura-housing.aura-glow-red.is-building-up,
    .action-btn-aura-housing.aura-glow-blue.is-building-up,
    .action-btn-aura-housing.aura-glow-red.shake-level-1,
    .action-btn-aura-housing.aura-glow-red.shake-level-2,
    .action-btn-aura-housing.aura-glow-red.shake-level-3,
    .action-btn-aura-housing.aura-glow-blue.shake-level-1,
    .action-btn-aura-housing.aura-glow-blue.shake-level-2,
    .action-btn-aura-housing.aura-glow-blue.shake-level-3,
    .action-btn-aura-housing.deploy-confirm-pulse,
    .action-btn-aura-housing.deploy-confirm-pulse.phase-grow,
    .action-btn-aura-housing.deploy-confirm-pulse.phase-settle {
        animation: none !important;
        filter: none !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    /* Main portal only — mobile uses inline commander-hub page, not the modal */
    body#main-dashboard-canvas #commander-hub-modal.commander-hub-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .portal-commander-hub-page {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        padding: 4px 0 20px !important;
        min-height: 0 !important;
    }

    .portal-commander-hub-intro {
        text-align: left !important;
        padding: 0 2px 4px !important;
        border-bottom: 1px solid rgba(184, 144, 48, 0.22) !important;
        margin-bottom: 2px !important;
    }

    .portal-commander-hub-title {
        margin: 0 0 6px !important;
        font-family: 'Cinzel', serif !important;
        font-size: 1.15rem !important;
        color: #ffd700 !important;
        letter-spacing: 1px !important;
    }

    .portal-commander-hub-subtitle {
        margin: 0 !important;
        font-family: 'Segoe UI', sans-serif !important;
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        color: rgba(241, 224, 172, 0.62) !important;
    }

    .portal-commander-hub-page .commander-hub-top-nav {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 2px !important;
        padding: 4px 6px !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .portal-commander-hub-page .commander-hub-top-nav-bg {
        background-size: auto 100% !important;
        background-repeat: repeat-x !important;
        background-position: center center !important;
    }

    .portal-commander-hub-page .commander-hub-body-frame {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px 16px !important;
    }

    .portal-commander-hub-page .commander-hub-body,
    .portal-commander-hub-page .commander-hub-content-pane,
    .portal-commander-hub-page .commander-hub-body-frame,
    .portal-commander-hub-page .settings-scroll-wrapper,
    .portal-commander-hub-page .message-workspace-canvas,
    .portal-commander-hub-page .message-mailbox-canvas,
    .portal-commander-hub-page .message-compose-canvas,
    .portal-commander-hub-page .msg-folder-panel,
    .portal-commander-hub-page .msg-portal-scroll-bin,
    .portal-commander-hub-page .profile-fullscreen-canvas,
    .portal-commander-hub-page .compact-grid-scroll-track {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #portal-commander-hub-page.commander-hub-settings-active .commander-hub-body,
    #portal-commander-hub-page.commander-hub-settings-active .commander-hub-body > .settings-scroll-wrapper,
    #portal-commander-hub-page.commander-hub-messages-active .commander-hub-body,
    #portal-commander-hub-page.commander-hub-messages-active .message-workspace-canvas,
    #portal-commander-hub-page.commander-hub-profile-active .commander-hub-body,
    #portal-commander-hub-page.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas,
    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-body,
    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-content-pane {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-body-frame {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        padding: 12px 12px 8px !important;
    }

    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-subnav-column,
    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-section-title,
    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-profile-header-host,
    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-profile-footer-host {
        display: none !important;
    }

    #portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    #portal-commander-hub-page.commander-hub-view-profile-active {
        padding-bottom: 8px !important;
    }

    .portal-commander-hub-page .public-profile-hub-inline {
        width: 100% !important;
        max-width: 100% !important;
    }

    .portal-commander-hub-page .public-profile-hub-inline .public-profile-identity-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .portal-commander-hub-page .public-profile-hub-inline .public-profile-split-body {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .portal-commander-hub-page .public-profile-hub-inline .public-profile-split-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .portal-commander-hub-page .public-profile-hub-inline .public-profile-card-actions--hub {
        margin-top: 12px !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .portal-commander-hub-page .message-workspace-canvas {
        min-height: 0 !important;
        height: auto !important;
    }

    .portal-commander-hub-page .commander-hub-subnav-list {
        flex-wrap: wrap !important;
        overflow: visible !important;
        overflow-x: visible !important;
        gap: 6px !important;
        padding-bottom: 2px !important;
    }

    .portal-commander-hub-page .commander-hub-subnav-column {
        padding-bottom: 6px !important;
    }

    .portal-commander-hub-page .commander-hub-subnav-label {
        font-size: 0.68rem !important;
        letter-spacing: 1px !important;
        margin-bottom: 4px !important;
    }

    .portal-commander-hub-page .commander-hub-subnav-item {
        padding: 5px 9px !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.2px !important;
        min-height: 0 !important;
        line-height: 1.2 !important;
        border-left-width: 2px !important;
    }

    .portal-commander-hub-page .msg-folder-tab-bar {
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
        padding: 0 !important;
        border-bottom: none !important;
    }

    .portal-commander-hub-page .msg-folder-tab {
        flex: 0 1 auto !important;
        padding: 4px 8px !important;
        font-size: 0.58rem !important;
        letter-spacing: 0.03em !important;
        min-height: 0 !important;
    }

    .portal-commander-hub-page .commander-hub-top-tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 25% !important;
        font-size: 0.58rem !important;
        padding: 4px 2px !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        align-self: center !important;
    }

    .portal-commander-hub-page > .portal-save-confirmation-toast {
        position: sticky !important;
        bottom: 8px !important;
        left: 8px !important;
        z-index: 6 !important;
    }

    .commander-hub-overlay {
        padding: 10px !important;
        align-items: flex-end !important;
    }

    .commander-hub-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: min(92dvh, 100%) !important;
        max-height: 92dvh !important;
    }

    .commander-hub-body-frame,
    .portal-commander-hub-body-frame {
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .commander-hub-subnav-column,
    .portal-commander-hub-page .commander-hub-subnav-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(184, 144, 48, 0.2) !important;
        padding-bottom: 8px !important;
    }

    .commander-hub-subnav-list,
    .portal-commander-hub-page .commander-hub-subnav-list {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
    }

    .commander-hub-subnav-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .chat-workspace-chassis {
        flex-direction: column !important;
        height: auto !important;
        min-height: min(65dvh, calc(100dvh - 260px)) !important;
        max-height: none !important;
    }

    .chat-sidebar-channels-deck {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(184, 144, 48, 0.2) !important;
        padding-right: 0 !important;
        padding-bottom: 10px !important;
        height: auto !important;
        max-height: none !important;
        gap: 6px !important;
    }

    .chat-sidebar-channels-label {
        display: none !important;
    }

    .chat-main-feed-compartment {
        flex: 1 1 auto !important;
        min-height: 240px !important;
    }

    .chat-sidebar-player-roster-deck,
    .chat-sidebar-player-roster-compact {
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        border-top: 1px solid rgba(184, 144, 48, 0.2) !important;
        padding-left: 0 !important;
        padding-top: 10px !important;
        max-height: min(220px, 32dvh) !important;
        height: auto !important;
    }

    .chat-body-split-row {
        flex-direction: column !important;
    }

    .milestone-landmark-capsule-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .lore-reader-prose::first-letter {
        font-size: 2.75rem !important;
    }
}

/* =============================================================================
   TABLET / PHONE (≤ 1024px) — portal mobile nav (desktop columns hidden)
   ============================================================================= */
@media (max-width: 1024px) {
    .portal-desktop-nav-only,
    .portal-desktop-nav-stack {
        display: none !important;
    }

    #game-page-canvas .game-page-nav-stack {
        display: block !important;
    }

    #game-page-canvas .portal-nav-commander-identity-row.portal-desktop-nav-only {
        display: none !important;
    }

    #game-page-canvas .game-page-mobile-commander-clip {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 8px 0 !important;
        position: relative !important;
        z-index: 100000 !important;
    }

    #age-page-canvas .age-page-mobile-commander-clip {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(240px, 46vw) !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 6 !important;
    }

    #age-page-canvas .age-page-mobile-commander-clip .portal-mobile-commander-block {
        width: 100% !important;
    }

    #age-page-canvas .age-page-mobile-commander-clip .portal-mobile-commander-submenu {
        z-index: 30 !important;
    }

    #game-page-canvas .game-page-mobile-commander-block {
        width: 100% !important;
    }

    #game-page-canvas .game-onboarding-progress {
        max-width: 100% !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    #game-page-canvas .game-onboarding-progress-track {
        padding: 14px 10px 12px !important;
    }

    #game-page-canvas .game-onboarding-step-label {
        font-size: 0.52rem !important;
        letter-spacing: 0.06em !important;
    }

    #game-page-canvas .game-onboarding-step-marker {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.68rem !important;
    }

    #game-page-canvas .game-onboarding-progress-track::before,
    #game-page-canvas .game-onboarding-progress-track::after {
        left: 8% !important;
        right: 8% !important;
        top: 24px !important;
    }

    #game-page-canvas .game-onboarding-progress-track::after {
        width: calc(84% * (var(--game-onboarding-fill, 0%) / 100)) !important;
    }

    #game-page-canvas .game-page-class-modal-stage {
        margin-top: 0 !important;
    }

    #game-page-canvas,
    #game-page-canvas.game-page-canvas,
    #age-page-canvas,
    #age-page-canvas.age-page-canvas {
        height: var(--game-viewport-h, 100dvh) !important;
        max-height: var(--game-viewport-h, 100dvh) !important;
        overflow: hidden !important;
    }

    #game-page-canvas .game-page-staging-deck {
        padding: 0 max(12px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right)) !important;
    }

    .main-portal-nav-bar .nav-tabs-centered-flex-dock,
    .main-portal-nav-bar .nav-embedded-account-label,
    .main-portal-nav-bar .portal-commander-identity-card,
    .main-portal-nav-bar .nav-right-logout-action-dock,
    .main-portal-nav-bar .nav-tab {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    .portal-mobile-nav-shell {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 999999980 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        isolation: isolate !important;
        pointer-events: auto !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .main-portal-nav-bar > .portal-mobile-nav-shell {
        z-index: 999999980 !important;
    }

    #portal-mobile-nav-shell.is-nav-open {
        z-index: 999999990 !important;
    }

    #game-mobile-nav-shell.is-nav-open {
        z-index: 999999990 !important;
    }

    .portal-mobile-nav-bar-clip {
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        position: relative !important;
        flex-shrink: 0 !important;
        z-index: 999999970 !important;
        isolation: isolate !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .main-portal-nav-bar {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        position: sticky !important;
        top: 0 !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        padding: 0 max(0px, env(safe-area-inset-right)) 0 max(0px, env(safe-area-inset-left)) !important;
        overflow: visible !important;
        z-index: 999999975 !important;
        isolation: isolate !important;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .main-portal-nav-bar::before {
        display: none !important;
        content: none !important;
        background: none !important;
        background-image: none !important;
    }

    .portal-mobile-nav-shell {
        pointer-events: auto !important;
    }

    .portal-mobile-nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        height: auto !important;
        flex: 1 1 auto !important;
        padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)) !important;
        border: none !important;
        border-bottom: 1px solid rgba(184, 144, 48, 0.18) !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #ffd700 !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.82rem !important;
        font-weight: bold !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 5 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.22) !important;
        box-shadow: none !important;
    }

    .portal-mobile-nav-toggle-label {
        flex: 1 1 auto !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .portal-mobile-nav-chevron {
        flex-shrink: 0 !important;
        font-size: 0.75rem !important;
        line-height: 1 !important;
        color: #e2ba3b !important;
        transition: transform 0.2s ease !important;
    }

    #portal-mobile-nav-shell.is-nav-open > .portal-mobile-nav-toggle .portal-mobile-nav-chevron,
    #portal-mobile-commander-toggle[aria-expanded="true"] .portal-mobile-commander-chevron {
        transform: rotate(180deg) !important;
    }

    #game-mobile-nav-shell.is-nav-open > .portal-mobile-nav-toggle .portal-mobile-nav-chevron {
        transform: rotate(180deg) !important;
    }

    .portal-mobile-nav-brand-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 10px 6px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        min-height: 0 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        border-bottom: 1px solid rgba(184, 144, 48, 0.2) !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%) !important;
    }

    .portal-mobile-nav-brand-logo {
        display: block !important;
        width: auto !important;
        max-width: min(600px, 100vw) !important;
        max-height: 88px !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        vertical-align: top !important;
    }

    .portal-mobile-nav-menu:not(.is-menu-open) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .portal-mobile-nav-menu.is-menu-open {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(184, 144, 48, 0.45) !important;
        border-bottom: 2px solid rgba(184, 144, 48, 0.35) !important;
        border-radius: 0 !important;
        background: radial-gradient(circle at top, rgba(28, 32, 42, 0.99) 0%, rgba(6, 8, 12, 1) 100%) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.95) !important;
        z-index: 999999995 !important;
        box-sizing: border-box !important;
    }

    .portal-mobile-nav-menu[hidden] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .portal-mobile-nav-menu-sticky-head {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 3 !important;
        background: radial-gradient(circle at top, rgba(28, 32, 42, 1) 0%, rgba(14, 16, 22, 1) 100%) !important;
        border-bottom: 1px solid rgba(184, 144, 48, 0.2) !important;
    }

    .portal-mobile-nav-media-mount {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        border-bottom: 1px solid rgba(184, 144, 48, 0.2) !important;
        box-sizing: border-box !important;
    }

    #portal-media-player-home,
    .portal-media-player-home {
        display: none !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        z-index: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 3px 10px 4px !important;
        gap: 2px !important;
        justify-content: flex-start !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: inset 0 -1px 0 rgba(184, 144, 48, 0.08) !important;
        background: rgba(6, 8, 12, 0.72) !important;
        background-image: linear-gradient(180deg, rgba(14, 16, 22, 0.95) 0%, rgba(6, 8, 12, 0.88) 100%) !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px 10px 10px !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: inset 0 -1px 0 rgba(184, 144, 48, 0.12) !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked .media-track-identity-row,
    #portal-floating-media-player-deck.is-mobile-nav-docked .media-timeline-interface-wrapper,
    #portal-floating-media-player-deck.is-mobile-nav-docked .media-control-buttons-row,
    #portal-floating-media-player-deck.is-mobile-nav-docked .media-volume-mixer-sub-row {
        max-width: 100% !important;
        width: 100% !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-player-expanded-only {
        display: none !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-track-identity-row {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        gap: 6px !important;
        align-items: center !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-meta-text-cell {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-track-title-ticker {
        font-size: 0.6rem !important;
        letter-spacing: 0.35px !important;
        line-height: 1.15 !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-timeline-interface-wrapper {
        height: 12px !important;
        min-height: 12px !important;
        margin-top: 0 !important;
        gap: 4px !important;
        align-items: center !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-time-stamp-clock {
        font-size: 0.48rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked .media-timeline-interface-wrapper {
        align-self: stretch !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked .media-scrub-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 4px !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-scrub-input {
        height: 4px !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-timeline-interface-wrapper {
        height: 12px !important;
        min-height: 12px !important;
        margin-top: 0 !important;
        gap: 4px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-time-stamp-clock {
        font-size: 0.48rem !important;
        line-height: 1 !important;
        min-width: 28px !important;
        flex-shrink: 0 !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-scrub-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 4px !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-player-expand-toggle {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin: 0 0 0 4px !important;
        padding: 0 !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked:not(.is-media-expanded) .media-player-expand-icon {
        font-size: 0.7rem !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-disc-vinyl-icon-housing,
    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-artist-label,
    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-control-buttons-row,
    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-volume-mixer-sub-row,
    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-playlist-block {
        display: flex !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-track-identity-row {
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-disc-vinyl-icon-housing {
        width: 26px !important;
        height: 26px !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-track-title-ticker {
        font-size: 0.68rem !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-artist-label {
        font-size: 0.55rem !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-control-buttons-row {
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 28px !important;
        flex-wrap: nowrap !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-deck-btn {
        width: auto !important;
        min-width: 32px !important;
        flex: 0 0 auto !important;
        min-height: 28px !important;
        padding: 4px 6px !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-volume-mixer-sub-row {
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-vol-range-slider {
        flex: 0 1 auto !important;
        width: min(200px, 55vw) !important;
        max-width: none !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-btn-icon-symbol {
        font-size: 0.72rem !important;
    }

    #portal-mobile-nav-auth-btn {
        display: none !important;
    }

    .portal-mobile-guest-login-block:not([hidden]) {
        display: flex !important;
        flex-direction: column !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        position: relative !important;
        pointer-events: auto !important;
        padding: 0 6px 6px !important;
        box-sizing: border-box !important;
    }

    #portal-mobile-commander-block:not([hidden]) {
        display: flex !important;
    }

    .portal-mobile-guest-login-trigger {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.22) !important;
    }

    .portal-mobile-commander-block {
        display: flex !important;
        flex-direction: column !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .portal-mobile-nav-menu-scroll {
        flex: 0 0 auto !important;
        min-height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
        padding-bottom: 8px !important;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .portal-mobile-nav-menu-scroll::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .portal-mobile-commander-trigger {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: none !important;
        background: transparent !important;
        cursor: pointer !important;
        text-align: left !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    .portal-mobile-commander-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border: 1px solid rgba(184, 144, 48, 0.45) !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    .portal-mobile-commander-identity {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .portal-mobile-commander-name {
        color: #ffd700 !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .portal-mobile-commander-submenu {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 4px 6px 8px !important;
        margin: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(184, 144, 48, 0.18) !important;
        background: rgba(0, 0, 0, 0.22) !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    .portal-mobile-commander-submenu[hidden] {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .portal-mobile-submenu-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 9px 10px !important;
        border: 1px solid transparent !important;
        border-radius: 3px !important;
        background: transparent !important;
        color: #b0b8c4 !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.76rem !important;
        font-weight: bold !important;
        text-align: left !important;
        cursor: pointer !important;
    }

    .portal-mobile-submenu-item:first-child {
        color: #ffd700 !important;
    }

    .portal-mobile-submenu-item:active,
    .portal-mobile-submenu-item:hover {
        background: rgba(184, 144, 48, 0.1) !important;
        border-color: rgba(184, 144, 48, 0.25) !important;
        color: #ffd700 !important;
    }

    .portal-mobile-submenu-item.portal-mobile-submenu-item-return-portal {
        margin-top: 8px !important;
        border: 1px solid rgba(184, 144, 48, 0.55) !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .portal-mobile-submenu-item.portal-mobile-submenu-item-return-portal:hover,
    .portal-mobile-submenu-item.portal-mobile-submenu-item-return-portal:active {
        border-color: rgba(255, 215, 0, 0.75) !important;
        background: rgba(184, 144, 48, 0.1) !important;
        color: #ffd700 !important;
    }

    .portal-mobile-submenu-item.portal-mobile-submenu-item-logout {
        margin-top: 8px !important;
        border: 1px solid rgba(212, 175, 55, 0.82) !important;
        text-align: center !important;
        justify-content: center !important;
        box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.08) !important;
    }

    .portal-mobile-submenu-item.portal-mobile-submenu-item-logout:hover,
    .portal-mobile-submenu-item.portal-mobile-submenu-item-logout:active {
        border-color: rgba(255, 215, 0, 0.92) !important;
        background: rgba(184, 144, 48, 0.14) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18), 0 0 10px rgba(255, 215, 0, 0.12) !important;
    }

    .portal-mobile-submenu-item.portal-mobile-submenu-item-report-player {
        margin-top: 8px !important;
        border: 1px solid rgba(220, 96, 72, 0.55) !important;
        text-align: center !important;
        justify-content: center !important;
        color: rgba(255, 176, 148, 0.98) !important;
        background: linear-gradient(180deg, rgba(120, 28, 28, 0.88) 0%, rgba(48, 12, 10, 0.95) 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            inset 0 0 0 1px rgba(255, 120, 90, 0.12) !important;
    }

    .portal-mobile-submenu-item.portal-mobile-submenu-item-report-player:hover,
    .portal-mobile-submenu-item.portal-mobile-submenu-item-report-player:active {
        border-color: rgba(240, 112, 88, 0.85) !important;
        color: rgba(255, 210, 188, 1) !important;
        background: linear-gradient(180deg, rgba(148, 36, 32, 0.95) 0%, rgba(64, 14, 12, 0.98) 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            inset 0 0 0 1px rgba(255, 140, 110, 0.2),
            0 0 14px rgba(220, 72, 48, 0.28) !important;
    }

    .portal-mobile-nav-pages {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 6px 4px !important;
    }

    .portal-mobile-nav-page-item {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1px solid transparent !important;
        border-radius: 3px !important;
        background: transparent !important;
        color: rgba(241, 224, 172, 0.72) !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.78rem !important;
        font-weight: bold !important;
        letter-spacing: 0.06em !important;
        text-align: left !important;
        cursor: pointer !important;
    }

    .portal-mobile-nav-page-item.is-active {
        color: #ffd700 !important;
        border-color: rgba(184, 144, 48, 0.35) !important;
        background: rgba(184, 144, 48, 0.08) !important;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.35) !important;
    }

    .portal-mobile-nav-page-item.portal-nav-guest-hidden {
        display: none !important;
    }

    .portal-mobile-nav-page-item.nav-tab-preview-locked {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
    }

    .portal-mobile-nav-auth-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: calc(100% - 24px) !important;
        margin: 8px auto 4px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(184, 144, 48, 0.4) !important;
        border-radius: 4px !important;
        background: rgba(13, 15, 20, 0.92) !important;
        color: #f1e0ac !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.72rem !important;
        font-weight: bold !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
    }

    .portal-mobile-nav-auth-icon {
        width: 18px !important;
        height: 18px !important;
        object-fit: contain !important;
    }
}

/* =============================================================================
   PHONE (≤ 768px) — portal metrics & hub (nav uses block above)
   ============================================================================= */
@media (max-width: 768px) {
    .portal-age-metrics-dashboard-bar {
        gap: 3px 6px !important;
        padding: 4px 6px !important;
        border-width: 4px !important;
        margin-bottom: 2px !important;
    }

    .metric-capsule-cell {
        gap: 4px !important;
        padding: 2px 4px !important;
    }

    .metric-glyph-icon {
        font-size: 0.72rem !important;
    }

    .metric-label-title {
        font-size: 0.48rem !important;
    }

    .metric-live-data-value {
        font-size: 0.64rem !important;
    }

    #metrics-transition-countdown-display {
        font-size: 0.34rem !important;
    }

    .portal-age-countdown-panel #dynamic-age-sub-timer-display {
        font-size: 1rem !important;
    }

    .portal-age-metrics-dashboard-bar .metric-roster-hover-cell .metric-roster-hover-trigger {
        font-size: 0.48rem !important;
        min-height: 0 !important;
    }

    .metric-roster-popover {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        z-index: 200001 !important;
    }

    .deployment-action-button-row {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .action-btn-aura-housing {
        width: min(240px, 86vw) !important;
    }

    .portal-deployment-control-deck {
        padding: 16px 8px !important;
    }

    .commander-hub-top-nav {
        height: auto !important;
        min-height: 56px !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .commander-hub-top-tab {
        font-size: 0.82rem !important;
        padding: 10px 12px !important;
        flex: 1 1 auto !important;
    }

    .commander-hub-close-btn {
        top: 4px !important;
        right: 4px !important;
    }

    #main-portal-dynamic-viewport:has(.portal-commander-hub-page) {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Mobile portal: dark layout — lock desktop-only visual tuning controls */
    #portal-commander-hub-page .preview-sandbox-window,
    .portal-commander-hub-page .preview-sandbox-window {
        display: none !important;
    }

    .portal-mobile-setting-locked,
    .portal-mobile-setting-locked .settings-label {
        opacity: 0.42 !important;
        color: rgba(241, 224, 172, 0.45) !important;
    }

    .portal-mobile-setting-locked .settings-right-wrapper,
    .portal-mobile-setting-locked .settings-hint-line {
        opacity: 0.42 !important;
    }

    .portal-mobile-setting-locked input[type="range"] {
        opacity: 0.38 !important;
        filter: grayscale(0.85) !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    .portal-mobile-setting-locked .settings-value-label {
        color: rgba(241, 224, 172, 0.45) !important;
    }

    .portal-mobile-setting-locked .switch-toggle-bar {
        opacity: 0.38 !important;
        filter: grayscale(0.85) !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    .portal-mobile-setting-locked .switch-toggle-bar input {
        pointer-events: none !important;
    }

    .portal-mobile-setting-locked .switch-toggle-bar input:checked + .toggle-slider-track {
        background: rgba(60, 60, 60, 0.55) !important;
    }

    .portal-mobile-setting-locked .switch-toggle-bar input:checked + .toggle-slider-track::before {
        transform: translateX(0) !important;
    }

    /* Message compose: recipient directory expands in-flow between To and Subject */
    .message-compose-canvas {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        gap: 10px !important;
    }

    .msg-send-to-row {
        position: relative !important;
    }

    .msg-recipient-directory-slot {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transition: max-height 0.22s ease, margin 0.22s ease, opacity 0.18s ease !important;
    }

    .msg-recipient-directory-slot--collapsed {
        max-height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .msg-recipient-directory-slot--collapsed #msg-directory-floating-drawer {
        display: none !important;
    }

    .msg-recipient-directory-slot--open {
        max-height: min(52dvh, 320px) !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: hidden !important;
    }

    .msg-recipient-directory-slot--open #msg-directory-floating-drawer {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(48dvh, 300px) !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        transform: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55) !important;
        z-index: 1 !important;
    }

    .msg-recipient-directory-slot .msg-directory-drawer-body {
        position: relative !important;
        flex: 1 1 auto !important;
        min-height: 140px !important;
        height: min(36dvh, 220px) !important;
        max-height: min(36dvh, 220px) !important;
        overflow: hidden !important;
    }

    /* Stack category + drilldown panes in the same slot (swap views, no vertical push) */
    .msg-recipient-directory-slot .msg-directory-drawer-body > .drawer-category-scroll-bin,
    .msg-recipient-directory-slot .msg-directory-drawer-body > #drawer-main-category-view,
    .msg-recipient-directory-slot .msg-directory-drawer-body > #drawer-drilldown-category-view {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .msg-recipient-directory-slot .msg-directory-drawer-body > .msg-drawer-pane-hidden {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .profile-identity-title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .profile-fullscreen-split-row {
        flex-direction: column !important;
    }

    .profile-split-panel-half {
        width: 100% !important;
        max-width: 100% !important;
    }

    #portal-commander-hub-page #profile-extracted-header-banner.profile-fullscreen-header-card,
    #portal-commander-hub-page .profile-fullscreen-header-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        margin-bottom: 10px !important;
    }

    #portal-commander-hub-page .profile-fullscreen-canvas,
    #portal-commander-hub-page .settings-scroll-wrapper.profile-fullscreen-canvas {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #portal-commander-hub-page .profile-avatar-armory-slot {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        box-sizing: border-box !important;
    }

    #portal-commander-hub-page .profile-avatar-preset-bin {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        border: 1px solid rgba(184, 144, 48, 0.25) !important;
        border-radius: 4px !important;
    }

    #portal-commander-hub-page .profile-avatar-preset-bin[hidden] {
        display: none !important;
    }

    #portal-commander-hub-page .profile-avatar-preset-bin .avatar-selection-header {
        font-family: 'Cinzel', serif !important;
        font-size: 0.72rem !important;
        color: #c5a059 !important;
        letter-spacing: 1px !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    #portal-commander-hub-page .profile-avatar-preset-bin .avatar-thumbnail-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    #portal-commander-hub-page .profile-avatar-preset-bin .avatar-thumb-lever {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    #portal-commander-hub-page .profile-avatar-preset-bin .close-armory-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    #portal-commander-hub-page .profile-split-panel-half .profile-section-box:first-of-type {
        margin-top: 0 !important;
    }

    .chronicle-premium-upsell-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .chronicle-rewards-track-tab {
        padding: 10px 8px !important;
    }

    .chronicle-track-tab-title {
        font-size: 0.7rem !important;
    }

    .royalty-workspace-header-deck,
    .chronicles-workspace-container header {
        text-align: left !important;
    }

    .royalty-master-subtitle,
    .royalty-master-title {
        text-align: left !important;
    }

    .royalty-workspace-header-deck {
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .royalty-plans-deck {
        padding: 14px 12px 16px !important;
    }

    .royalty-tier-cards-flex-row {
        gap: 14px !important;
    }

    .royalty-package-visual-stage {
        padding: 14px 12px 12px !important;
    }

    .royalty-package-visual-frame {
        min-height: 260px !important;
        max-width: 100% !important;
        padding: 10px !important;
    }

    .royalty-package-tier-art {
        max-width: 440px !important;
        max-height: 300px !important;
    }

    .royalty-package-info-deck {
        padding: 14px 14px 0 !important;
        gap: 10px !important;
    }

    .royalty-package-action-footer {
        padding: 12px 14px 14px !important;
    }

    #main-logout-confirmation-modal .logout-confirmation-bezel,
    .portal-alert-bezel,
    .modal-alert-bezel {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px !important;
    }

    .public-profile-overlay .public-profile-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 90dvh !important;
    }

    .avatar-hover-dropdown-menu {
        left: 0 !important;
        right: auto !important;
        min-width: min(220px, calc(100vw - 24px)) !important;
    }

    /* Expand control visible for nav-docked player (rules above) */
    #portal-floating-media-player-deck.is-mobile-nav-docked .media-player-expand-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        border: 1px solid rgba(184, 144, 48, 0.35) !important;
        border-radius: 3px !important;
        background: rgba(13, 15, 20, 0.92) !important;
        color: #e2ba3b !important;
        cursor: pointer !important;
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8) !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked .media-player-expand-icon {
        line-height: 1 !important;
        transition: transform 0.2s ease !important;
    }

    #portal-floating-media-player-deck.is-mobile-nav-docked.is-media-expanded .media-player-expand-icon {
        transform: rotate(180deg) !important;
    }

    /* ----- Lore codex (mobile / tablet): custom nation dropdown + compact reader ----- */
    .lore-workspace-chassis {
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        padding: 8px 10px 10px !important;
        gap: 8px !important;
    }

    .lore-codex-hero {
        padding: 8px 10px !important;
    }

    .lore-codex-title {
        font-size: 1rem !important;
        margin-bottom: 2px !important;
    }

    .lore-codex-lead {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
    }

    .lore-codex-body {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 6px !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex: 1 1 auto !important;
    }

    .lore-nation-picker-mobile {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 20 !important;
    }

    .lore-nation-picker-label {
        margin: 0 0 4px 2px !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: #c5a059 !important;
    }

    .lore-nation-mobile-trigger {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 6px 10px !important;
        border: 1px solid rgba(184, 144, 48, 0.45) !important;
        border-radius: 4px !important;
        background: linear-gradient(180deg, rgba(28, 32, 42, 0.98) 0%, rgba(10, 12, 16, 1) 100%) !important;
        color: #f1e0ac !important;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.45) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    .lore-nation-picker-mobile.is-picker-open .lore-nation-mobile-trigger {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-color: rgba(184, 144, 48, 0.25) !important;
    }

    .lore-nation-mobile-trigger-sigil {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        border: 1px solid rgba(184, 144, 48, 0.35) !important;
        border-radius: 4px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        overflow: hidden !important;
    }

    .lore-nation-mobile-trigger-crest {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .lore-nation-mobile-trigger-name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.78rem !important;
        font-weight: bold !important;
        letter-spacing: 0.04em !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #e8c96a !important;
    }

    .lore-nation-mobile-trigger-chevron {
        flex-shrink: 0 !important;
        font-size: 0.75rem !important;
        color: #e2ba3b !important;
        transition: transform 0.2s ease !important;
    }

    .lore-nation-picker-mobile.is-picker-open .lore-nation-mobile-trigger-chevron {
        transform: rotate(180deg) !important;
    }

    .lore-nation-mobile-options {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
        max-height: min(42dvh, 280px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 4px !important;
        border: 1px solid rgba(184, 144, 48, 0.45) !important;
        border-top: none !important;
        border-radius: 0 0 4px 4px !important;
        background: rgba(8, 10, 14, 0.98) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.85) !important;
        box-sizing: border-box !important;
    }

    .lore-nation-mobile-options[hidden] {
        display: none !important;
    }

    .lore-nation-mobile-option {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 6px 8px !important;
        border: 1px solid rgba(184, 144, 48, 0.15) !important;
        border-radius: 3px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        color: #f1e0ac !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    .lore-nation-mobile-option.is-active,
    .lore-nation-mobile-option:hover {
        border-color: rgba(255, 215, 0, 0.45) !important;
        background: rgba(28, 21, 14, 0.92) !important;
        color: #ffd700 !important;
    }

    .lore-nation-mobile-option-sigil {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 28px !important;
        height: 28px !important;
    }

    .lore-nation-mobile-option-crest {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .lore-nation-mobile-option-name {
        font-family: 'Cinzel', serif !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.03em !important;
        text-align: left !important;
    }

    .lore-nation-index-deck,
    .lore-nation-index-deck.portal-desktop-lore-index {
        display: none !important;
    }

    .lore-reader-compartment {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .lore-reader-panel {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px 10px 8px !important;
    }

    .lore-reader-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .lore-reader-header {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .lore-reader-sigil-ring {
        width: 40px !important;
        height: 40px !important;
    }

    .lore-reader-nation-name {
        font-size: 0.92rem !important;
        margin-bottom: 0 !important;
        letter-spacing: 0.03em !important;
    }

    .lore-reader-epithet {
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
    }

    .lore-reader-eyebrow {
        font-size: 0.55rem !important;
        margin-bottom: 1px !important;
    }

    .lore-audio-play-btn {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        margin-top: 2px !important;
        padding: 6px 8px !important;
    }

    .lore-audio-play-label {
        font-size: 0.58rem !important;
    }

    .lore-reader-divider {
        margin: 6px 0 4px !important;
        flex-shrink: 0 !important;
    }

    .lore-reader-prose-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 268px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
    }

    .lore-reader-prose {
        font-size: 1.15rem !important;
        line-height: 1.8 !important;
    }

    .lore-reader-prose::first-letter {
        font-size: 1.55rem !important;
        padding: 2px 6px 0 0 !important;
        line-height: 0.9 !important;
    }

    .lore-reader-empty-state {
        padding: 16px 12px !important;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    #main-portal-dynamic-viewport:has(.lore-workspace-chassis) {
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }
}

/* =============================================================================
   NARROW PHONE (≤ 480px)
   ============================================================================= */
@media (max-width: 480px) {
    .staging-deck-master-wrapper {
        margin-top: 0 !important;
        gap: 14px !important;
    }

    .card-title-header {
        font-size: 1rem !important;
    }

    .card-scrollable-body-text {
        font-size: 0.88rem !important;
    }

    .metric-capsule-cell {
        flex: 1 1 100% !important;
    }

    .nav-embedded-account-label strong {
        max-width: 36vw !important;
    }

    .nav-commander-membership-badge-row .membership-badge,
    .portal-mobile-nav-membership-slot .membership-badge {
        font-size: 0.66rem !important;
        padding: 1px 6px !important;
    }

    .chat-scrolling-messages-bin {
        min-height: 180px !important;
    }

    .chat-input-toolbar-row-inner,
    .chat-input-toolbar-stack {
        width: 100% !important;
    }

    .chat-compose-context-banner {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .developer-maintenance-alert-message,
    .developer-maintenance-alert-window {
        font-size: 0.8rem !important;
    }
}

/* =============================================================================
   LANDING PAGE (index.html) — nav/overlays only; login layout is landing-login.css
   ============================================================================= */
@media (max-width: 1200px) {
    .navigator-bar {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        gap: 12px !important;
    }

    .nav-icon,
    #updates-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .version-stamp,
    .copyright-stamp {
        font-size: 0.62rem !important;
        max-width: 46vw !important;
        text-align: center !important;
    }

    .roadmap-container {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }

    #chronicle-detail-modal .detail-card,
    .detail-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 88dvh !important;
    }
}

/* =============================================================================
   DESKTOP RESTORE (≥ 1025px) — undo mobile globals on PC
   ============================================================================= */
@media (min-width: 1025px) {
    #main-dashboard-canvas {
        width: 100vw !important;
        max-width: none !important;
        background-image: url('images/mainpagebg.png') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        background-color: #050403 !important;
    }

    .staging-deck-master-wrapper {
        padding: 0 40px 40px 40px !important;
        margin-top: -30px !important;
    }

    .over-bar-utility-deck {
        padding: 12px 40px 10px 40px !important;
        margin-bottom: 0 !important;
    }

    .main-portal-nav-bar {
        height: 100px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 0 20px !important;
    }

    .main-portal-nav-bar::before {
        top: 50% !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        height: 71px !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
    }

    .nav-tabs-centered-flex-dock {
        flex: 1 !important;
        justify-content: center !important;
        overflow: visible !important;
        mask-image: none !important;
        width: auto !important;
        flex-wrap: nowrap !important;
    }

    .nav-tab {
        min-height: 0 !important;
        padding: 12px 24px !important;
        font-size: 1.1rem !important;
        letter-spacing: 1.5px !important;
        touch-action: auto !important;
    }

    .portal-mobile-nav-shell {
        display: none !important;
    }

    .portal-desktop-nav-only {
        display: flex !important;
    }

    .portal-desktop-nav-stack.portal-desktop-nav-only {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .portal-brand-header {
        display: flex !important;
    }

    .portal-mobile-nav-bar-clip {
        overflow: visible !important;
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }

    .main-portal-nav-bar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        transform: none !important;
        overflow: visible !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-portal-nav-bar > .portal-mobile-nav-shell {
        display: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .portal-desktop-nav-stack {
        display: block !important;
    }

    #game-page-canvas .game-page-nav-stack {
        display: block !important;
    }

    .portal-nav-commander-identity-row {
        width: 100% !important;
        min-height: 56px !important;
        overflow: visible !important;
        z-index: 100000 !important;
    }

    .nav-embedded-account-label {
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        order: unset !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        z-index: 100000 !important;
    }

    .nav-right-logout-action-dock {
        width: 250px !important;
        order: unset !important;
    }

    .header-logout-btn {
        min-height: 0 !important;
        transform: translateY(-3px) !important;
    }

    .header-logout-label {
        display: inline !important;
    }

    #page-landing .slideshow-container,
    #page-landing .slide {
        background-size: cover !important;
        background-position: center center !important;
    }

    #page-landing .slide {
        inset: -20% !important;
    }

    .age-mobile-only,
    .age-mobile-hud-backdrop {
        display: none !important;
    }

    #age-page-canvas .age-page-mobile-commander-clip {
        display: none !important;
    }
}

/* =============================================================================
   Age map page — mobile / tablet HUD reflow (≤ 1024px)
   ============================================================================= */
.age-mobile-only {
    display: none !important;
}

@media (max-width: 1024px) {
    .age-mobile-only {
        display: block !important;
    }

    .age-mobile-hud-controls.age-mobile-only {
        display: flex !important;
    }

    #age-page-canvas {
        --age-map-slot-gap: 6px;
        --age-map-hud-top-bar-height: auto;
        --age-map-hud-bottom-bar-height: 52px;
        --age-chat-messages-width: min(calc(100vw - 24px), 100%);
        --age-chat-compose-width: min(calc(100vw - 24px), 100%);
        --age-chat-messages-height: min(132px, 20vh);
        --age-chat-messages-gap: 8px;
        --age-age-mobile-dock-stack: calc(
            var(--age-map-hud-bottom-bar-height)
            + var(--age-chat-messages-gap)
            + var(--age-chat-messages-height)
            + 12px
        );
    }

    #age-page-canvas .age-page-main,
    #age-page-canvas .age-map-shell {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
    }

    #age-page-canvas .age-map-hud--top {
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        top: max(8px, env(safe-area-inset-top)) !important;
    }

    #age-page-canvas .age-map-hud-top-bar {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    #age-page-canvas .age-map-top-bar-brand {
        flex: 1 1 100% !important;
        max-width: none !important;
        --age-top-bar-logo-slot-w: min(145px, 38vw) !important;
        --age-top-bar-logo-slot-h: 37px !important;
    }

    #age-page-canvas .age-map-top-bar-brand {
        --age-top-bar-age-divider-gap: 14px !important;
    }

    #age-page-canvas .age-map-top-bar-separator:not(.age-map-top-bar-separator--nation) {
        margin: 0 var(--age-top-bar-age-divider-gap, 14px) 0 8px !important;
        height: 36px !important;
    }

    #age-page-canvas .age-map-age-badge-title {
        font-size: 0.92rem !important;
    }

    #age-page-canvas .age-map-top-bar-separator--nation {
        margin: 0 0 0 var(--age-top-bar-age-divider-gap, 14px) !important;
        height: 36px !important;
    }

    #age-page-canvas .age-map-top-bar-nation {
        flex: 1 1 auto !important;
        max-width: none !important;
        gap: 8px !important;
        margin-left: var(--age-top-bar-age-divider-gap, 14px) !important;
    }

    #age-page-canvas .age-map-top-bar-nation-crest {
        max-height: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
    }

    #age-page-canvas .age-map-top-bar-nation-text {
        font-size: 0.72rem !important;
        letter-spacing: 0.06em !important;
    }

    #age-page-canvas .age-map-resource-strip {
        flex: 1 1 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    #age-page-canvas .age-map-resource-strip::-webkit-scrollbar {
        display: none !important;
    }

    #age-page-canvas .age-map-resource-item {
        flex: 0 0 auto !important;
        min-width: 72px !important;
        padding: 4px 8px !important;
    }

    #age-page-canvas .age-map-resource-label {
        font-size: 0.52rem !important;
    }

    #age-page-canvas .age-map-resource-value {
        font-size: 0.82rem !important;
    }

    .age-mobile-hud-controls {
        flex: 1 1 100% !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .age-mobile-hud-toggle-btn {
        appearance: none !important;
        border: 1px solid rgba(184, 144, 48, 0.42) !important;
        border-radius: 999px !important;
        padding: 8px 12px !important;
        min-height: 44px !important;
        font-family: 'Cinzel', serif !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: rgba(236, 220, 180, 0.92) !important;
        background: rgba(0, 0, 0, 0.42) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    .age-mobile-hud-toggle-btn[aria-expanded="true"] {
        border-color: rgba(255, 215, 0, 0.72) !important;
        color: #ffd978 !important;
        background: rgba(48, 40, 24, 0.92) !important;
    }

    #age-page-canvas[data-age-view="city"] [data-age-mobile-toggle="city-info"],
    #age-page-canvas[data-age-view="headquarters"] [data-age-mobile-toggle="city-info"],
    #age-page-canvas[data-age-view="headquarters"] [data-age-mobile-toggle="reports"],
    #age-page-canvas[data-age-view="council-room"] [data-age-mobile-toggle="city-info"],
    #age-page-canvas[data-age-view="council-room"] [data-age-mobile-toggle="reports"] {
        display: none !important;
    }

    #age-page-canvas .age-map-hud--left,
    #age-page-canvas .age-map-hud--right {
        display: none !important;
    }

    #age-page-canvas.is-age-mobile-reports-open #age-map-hud-left,
    #age-page-canvas.is-age-mobile-city-info-open #age-map-hud-right {
        display: flex !important;
        position: fixed !important;
        top: calc(max(8px, env(safe-area-inset-top)) + 88px) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--age-age-mobile-dock-stack)) !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        z-index: 24 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #age-page-canvas[data-age-view="city"] #age-map-hud-right {
        display: flex !important;
        position: fixed !important;
        top: calc(max(8px, env(safe-area-inset-top)) + 88px) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--age-age-mobile-dock-stack)) !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        z-index: 14 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #age-page-canvas[data-age-view="headquarters"] #age-map-hud-left,
    #age-page-canvas[data-age-view="headquarters"] #age-map-hud-right,
    #age-page-canvas[data-age-view="council-room"] #age-map-hud-left,
    #age-page-canvas[data-age-view="council-room"] #age-map-hud-right {
        display: none !important;
    }

    #age-page-canvas[data-age-view="city"] #age-map-hud-left,
    #age-page-canvas[data-age-view="headquarters"] #age-map-hud-left,
    #age-page-canvas[data-age-view="council-room"] #age-map-hud-left {
        display: none !important;
    }

    .age-mobile-hud-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 20 !important;
        background: rgba(0, 0, 0, 0.58) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    .age-mobile-hud-backdrop[hidden] {
        display: none !important;
    }

    #age-page-canvas .age-map-hud--bottom {
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        z-index: 16 !important;
    }

    #age-page-canvas .age-map-bottom-dock-shell::before {
        display: none !important;
        content: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }

    #age-page-canvas .age-map-bottom-dock-shell {
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 0 !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    #age-page-canvas .age-map-bottom-dock-chat-column {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
    }

    #age-page-canvas .age-map-bottom-chat-messages-host {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: var(--age-chat-messages-height) !important;
        margin-bottom: var(--age-chat-messages-gap) !important;
    }

    #age-page-canvas .age-map-bottom-chat-compose-host {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: var(--age-map-hud-bottom-bar-height) !important;
        padding: 0 6px !important;
    }

    #age-page-canvas .age-map-bottom-dock-shell > .age-map-bottom-dock-nav {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        order: 2 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    #age-page-canvas .age-map-bottom-dock-shell > .age-map-view-tabs {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        order: 2 !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #age-page-canvas .age-map-view-tab,
    #age-page-canvas .age-map-bottom-war-ledger-btn {
        min-height: 44px !important;
        padding: 10px 14px !important;
        touch-action: manipulation !important;
    }

    #age-page-canvas .age-map-bottom-dock-controls {
        order: 3 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: var(--age-map-hud-bottom-bar-height) !important;
        padding: 0 !important;
        justify-content: flex-end !important;
    }

    #age-page-canvas .age-map-hud--right {
        right: max(8px, env(safe-area-inset-right)) !important;
    }

    #age-page-canvas .age-world-map-terrain-controls {
        top: calc(max(8px, env(safe-area-inset-top)) + 92px) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        z-index: 10 !important;
    }

    #age-page-canvas .age-world-map-terrain-toggle {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }

    #age-page-canvas .game-chat-module--age-docked {
        width: 100% !important;
        max-width: none !important;
    }

    #age-page-canvas .game-chat-module--age-docked .game-chat-messages {
        max-height: calc(var(--age-chat-messages-height) - 42px) !important;
    }
}

@media (max-width: 768px) {
    #age-page-canvas {
        --age-chat-messages-height: min(118px, 18vh);
    }

    #age-page-canvas .age-map-top-bar-brand {
        --age-top-bar-logo-slot-w: min(123px, 42vw) !important;
    }

    #age-page-canvas.is-age-mobile-reports-open #age-map-hud-left,
    #age-page-canvas.is-age-mobile-city-info-open #age-map-hud-right,
    #age-page-canvas[data-age-view="city"] #age-map-hud-right {
        top: calc(max(8px, env(safe-area-inset-top)) + 112px) !important;
    }
}

@media (max-width: 1024px) {
    #age-page-canvas .game-chat-module:not(.game-chat-module--age-docked):not(.is-resizing),
    #game-page-canvas .game-chat-module:not(.is-resizing) {
        --game-chat-width: min(360px, calc(100vw - 24px));
        max-width: calc(100vw - 24px) !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 640px) {
    #age-page-canvas .game-chat-module:not(.game-chat-module--age-docked):not(.is-resizing),
    #game-page-canvas .game-chat-module:not(.is-resizing) {
        --game-chat-width: calc(100vw - 20px);
        --game-chat-height: min(42vh, 280px);
        max-width: calc(100vw - 20px) !important;
    }
}

/* Royal Family on titles/headers — wins over mobile Cinzel overrides above */
h1,
h2,
h3,
h4,
h5,
h6,
th,
.nav-tab,
.metric-label-title,
.card-title-header,
.modal-alert-header,
.portal-server-panel-heading,
.portal-intro-subhead,
.suicide-popup-header,
[class*="-title"],
[class*="-heading"],
[class*="-eyebrow"],
[class*="-section-title"],
[class*="-section-label"],
[class*="-grid-heading"] {
    font-family: var(--font-title) !important;
}