/* Fallen Kingdom — DARK / CLASSIC mobile layout.
   Loaded ONLY in Dark Mode. Light/Parchment mobile changes belong in ../light/mobile.css. */

/*
 * Fallen Kingdom — shared mobile layout
 *
 * STRUCTURE ONLY.
 * Do not put Dark/Parchment colours in this file.
 * This file is deliberately loaded after every active theme so future themes
 * automatically inherit the same mobile header and compact page geometry.
 */

@media (max-width: 760px) {

    /* =====================================================================
       CLASSIC / STANDARD HEADER
       Mobile:
         SERVERTIME 16:01:23                 [☰ Menu]
         VIP SHOP | LOGOUT
       ===================================================================== */

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .game-header {
        padding-top: 8px !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .game-header-topline {
        display: block !important;
        min-height: 58px !important;
    }

    /* No game/site name on mobile. */
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-logo,
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-advertisement-slot {
        display: none !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-user {
        display: grid !important;
        grid-template-columns: auto auto minmax(54px, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 4px 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-user-summary {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        align-items: flex-start !important;
        justify-self: start !important;
        gap: 0 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-user-info {
        display: none !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-server-clock {
        display: inline-flex !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    /* Replace "Server Time" visually with the requested compact SERVERTIME. */
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-server-clock-label {
        display: inline-block !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-server-clock-label::after {
        content: "SERVERTIME";
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .07em !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-server-clock-date,
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-server-clock-zone {
        display: none !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-server-clock time,
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-server-clock-time {
        display: inline !important;
        font-size: 11px !important;
        font-weight: 850 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-vip-btn {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-vip-btn > span[aria-hidden="true"] {
        display: none !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-vip-label {
        display: inline !important;
        font-size: 0 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-vip-label::after {
        content: "VIP SHOP";
        font-size: 11px !important;
        font-weight: 900 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-logout-form {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-self: start !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-logout-form::before {
        content: "|";
        font-weight: 800 !important;
        opacity: .62;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .logout-btn {
        width: auto !important;
        min-width: 0 !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-menu-btn {
        grid-column: 4 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: end !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
    }


    /* =====================================================================
       MODERN / ADMIN PREVIEW HEADER
       Same mobile information hierarchy. Colours continue to come from the
       active Modern UI theme.
       ===================================================================== */

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-topbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 5px 8px !important;
        min-height: 0 !important;
        padding: 7px 8px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-topbar-brand {
        display: none !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-topbar-actions {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: auto auto minmax(52px, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 4px 6px !important;
        width: 100% !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-clock {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 6px !important;
        min-width: 0 !important;
        justify-self: start !important;
        text-align: left !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-clock::before {
        content: "SERVERTIME";
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .07em !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-icon-action {
        display: none !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-vip-button {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 4px 8px !important;
        font-size: 0 !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-vip-button > span:first-child {
        display: none !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-vip-button > span:last-child {
        font-size: 0 !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-vip-button > span:last-child::after {
        content: "VIP SHOP";
        font-size: 11px !important;
        font-weight: 900 !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-logout-form {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-self: start !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-logout-form::before {
        content: "|";
        font-weight: 800 !important;
        opacity: .62;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-logout {
        min-height: 28px !important;
        margin: 0 !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-mobile-menu {
        grid-column: 4 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: end !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 40px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-mobile-menu::after {
        content: " Menu";
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-strip {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        order: initial !important;
        padding-top: 3px !important;
    }


    /* =====================================================================
       CREATURES — MOBILE STATUS SUMMARY
       Replace the large 2-column cards with a small wrapping status strip:
       TOTAL 46  IDLE 46  BUSY 0 ...
       This is structural and therefore shared by Dark/Parchment/future themes.
       ===================================================================== */

    html body.page-creatures:not(.landing-page) .welcome-text {
        display: none !important;
    }

    html body.page-creatures:not(.landing-page) .fk-creature-stat-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px 12px !important;
        margin: 4px 2px 8px !important;
        padding: 4px 2px !important;
    }

    html body.page-creatures:not(.landing-page) .fk-creature-stat-grid .stat-card {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-align: left !important;
    }

    html body.page-creatures:not(.landing-page) .fk-creature-stat-grid .stat-title {
        display: inline !important;
        margin: 0 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;
        letter-spacing: .025em !important;
    }

    html body.page-creatures:not(.landing-page) .fk-creature-stat-grid .stat-value {
        display: inline !important;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        text-shadow: none !important;
    }

    html body.page-creatures:not(.landing-page) .small-page-links {
        margin-bottom: 5px !important;
        line-height: 1.5 !important;
    }
}

/* Extra-tight phones: keep the left account controls readable. */
@media (max-width: 390px) {
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-user,
    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-topbar-actions {
        grid-template-columns: auto auto minmax(18px, 1fr) auto !important;
        gap: 3px 4px !important;
    }

    html body.page-creatures:not(.landing-page) .fk-creature-stat-grid {
        gap: 1px 9px !important;
    }

    html body.page-creatures:not(.landing-page) .fk-creature-stat-grid .stat-title {
        font-size: 9px !important;
    }

    html body.page-creatures:not(.landing-page) .fk-creature-stat-grid .stat-value {
        font-size: 12px !important;
    }
}

/* =====================================================================
   MOBILE HEADER — menu left, VIP/logout right + two-row resources
   Shared structural layer for Classic/Dark and Modern/Parchment.
   ===================================================================== */
@media (max-width: 760px) {
    /* Classic header: keep Server Time on the first row, then swap the
       action groups so Menu sits left and VIP Shop / Logout sit right. */
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-user {
        grid-template-columns: auto minmax(16px, 1fr) auto auto !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-user-summary {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-menu-btn {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: start !important;
        min-height: 32px !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-vip-btn {
        grid-column: 3 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-logout-form {
        grid-column: 4 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    /* Classic resources already use the same six-resource set. Force a
       stable 3 x 2 grid and prevent legacy horizontal layouts from winning. */
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-resources {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Modern header uses the same information hierarchy. */
    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-topbar-actions {
        grid-template-columns: auto minmax(16px, 1fr) auto auto !important;
        grid-template-rows: auto auto !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-clock {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-mobile-menu {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: start !important;
        min-height: 32px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-vip-button {
        grid-column: 3 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-logout-form {
        grid-column: 4 !important;
        grid-row: 2 !important;
        justify-self: end !important;
    }

    /* Replace the old horizontally scrolling resource strip with two rows. */
    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-strip {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding-top: 4px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-chip {
        display: flex !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 38px !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 5px 6px !important;
        white-space: nowrap !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-chip span {
        flex: 0 0 auto !important;
        font-size: 14px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-chip strong {
        min-width: 0 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 390px) {
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-user,
    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-topbar-actions {
        grid-template-columns: auto minmax(8px, 1fr) auto auto !important;
        gap: 3px 4px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-strip,
    html body.logged-in-game:not(.landing-page):not(.fk-admin-dashboard-beta) .header-resources {
        gap: 4px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-chip {
        min-height: 36px !important;
        gap: 3px !important;
        padding: 4px 5px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-chip span {
        font-size: 13px !important;
    }

    html body.fk-admin-dashboard-beta.logged-in-game:not(.landing-page) .fk-beta-resource-chip strong {
        font-size: 10px !important;
    }
}

/* =====================================================================
   MOBILE MENU DRAWER — always above the sticky game header
   The base game drawer used z-index 1200 while Dashboard Beta's sticky
   header uses 1300. Keep the backdrop above the header and the drawer
   above that. Modern themes use their active page background so the
   drawer itself stays opaque without hard-coding a theme colour.
   ===================================================================== */
@media (max-width: 760px) {
    html body.logged-in-game:not(.landing-page).menu-open::before {
        z-index: 1390 !important;
    }

    html body.logged-in-game:not(.landing-page) .sidebar {
        z-index: 1400 !important;
    }

    html body.fk-modern-ui.logged-in-game:not(.landing-page) aside.sidebar.fk-beta-leftbar {
        background-color: var(--ui-page-bg) !important;
        background-image: var(--ui-page-bg-image) !important;
    }
}