/*
 * navbar.css — Genesis in-game navigation bar.
 *
 * Replaces the old #game-navigation sidebar with a single bar:
 *   - Desktop (> 900px): a vertical bar on the left, in the old sidebar's
 *     footprint. A pin button keeps the full menu shown inline (the classic
 *     sidebar). Unpinned, only the dropdown toggle + right-side buttons show
 *     and the menu opens as a popover.
 *   - Phone/tablet (<= 900px): a fixed bar pinned to the bottom of the screen.
 *     Dropdown toggle on the left, Kingdom + throne-toggle buttons on the
 *     right, menu opens upward. The pin button is hidden (irrelevant there).
 *
 * Loaded LAST in common/base.html (after layout.css, theme.css, responsive.css)
 * so it owns the #game-navbar element outright. It only styles #game-navbar,
 * so it never touches shared/lobby pages that have no nav bar.
 */

/* =====================================================================
 * DESKTOP — vertical bar on the left (matches old #game-navigation float).
 * ===================================================================== */
#game-navbar {
    float: left;
    /* Width is capped at ~110px total (100 + 10 margin): the desktop layout
       floats the 700px content (.game-header/.game-content) beside this bar in
       an ~810px column, so a wider bar drops the content below it. The 1.3x
       size increase therefore shows as larger text/taller bar, not a wider
       column; long button/date labels wrap (see white-space rules below). */
    width: 100px;
    margin-right: 10px;
    text-align: left;
    box-sizing: border-box;
    font-size: 1.3em;
}

#game-navbar .navbar-dropdown { position: relative; }

/* The full menu is always shown inline as part of the bar (the old sidebar).
   The pin + dropdown-toggle controls were removed; the bar is always pinned. */
#game-navbar .navbar-menu {
    display: block;
    position: static;
    margin-top: 8px;
    min-width: 0;
}

#game-navbar .navbar-menu .navigation {
    margin-bottom: 10px;
    /* Kill the legacy theme.css ".navigation" panel — a tan/olive radial gradient
       (#7b7354 -> #29261c) with a grey border + inset shadow — so the menu groups
       don't paint a tan box behind/around the chips. navbar.css owns the bar
       chrome, so reset it here for EVERY theme (game_bubble_theme.html also strips
       it, but only when the Bubble theme is active). */
    background: none;
    border: none;
    box-shadow: none;
}
#game-navbar .navbar-menu .navigation div { margin-bottom: 3px; }
#game-navbar .navbar-menu .current-date { margin-bottom: 8px; opacity: 0.85; }

/* Game date, shown in the always-visible part of the bar (between the dropdown
   and the right-side buttons). Vertical block on the desktop bar. */
#game-navbar .navbar-date {
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.2;
    opacity: 0.85;
    text-align: left;
    /* Wrap in the narrow desktop column (mobile re-enables nowrap + ellipsis). */
    white-space: normal;
}
#game-navbar .navbar-next-tick {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.9;
    white-space: nowrap;
}

/* Right-side buttons. On the vertical desktop bar they stack under the
   dropdown; on the phone bar they line up on the right (see media query). */
#game-navbar .navbar-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 13px;
}
#game-navbar .navbar-btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
    padding: 6px 8px;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    /* Wrap long labels in the narrow desktop column; mobile resets to nowrap. */
    white-space: normal;
}

/* =====================================================================
 * DESKTOP, PINNED SIDEBAR — stacking order requested for the side bar:
 *   1. Game date (in its own prominent box)
 *   2. Kingdom / Enemy toggle button (+ throne toggle when sitting)
 *   3. The rest of the menu items (the dropdown list + its pin control)
 * Scoped to the pinned bar at desktop widths only; the unpinned popover and
 * the <=900px bottom bar keep their original document order untouched.
 * ===================================================================== */
@media (min-width: 901px) {
    /* Advisor/council sub-nav: shown on EVERY in-game page on desktop too (not
       just mobile). Rendered as a horizontal pill-chip row at the top of the
       700px content column, floated beside the left bar exactly like
       .game-header/.game-content (which stack below it). The throne page's own
       in-content council tabs are hidden below to avoid a duplicate row. */
    #m-council-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        float: left;
        width: 700px;
        box-sizing: border-box;
        margin: 0 0 12px;
        padding: 8px 10px;
        background: #14141f;
        border: 1px solid rgba(255, 195, 0, 0.25);
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    }
    #m-council-nav .m-cnav-link {
        flex: 0 0 auto;
        display: block;
        padding: 6px 13px;
        border-radius: 14px;
        border: 1px solid rgba(255, 195, 0, 0.35);
        background: rgba(255, 255, 255, 0.05);
        color: #e6eaf0;
        text-decoration: none;
        font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
        font-size: 13px;
        line-height: 1.1;
        white-space: nowrap;
    }
    #m-council-nav .m-cnav-link.active {
        color: #14161b;
        font-weight: 700;
        background: linear-gradient(180deg, #ffe9a8, #ffc300);
        border-color: rgba(255, 195, 0, 0.85);
    }
    /* Keep chip text colours consistent against game_bubble_theme's broad
       "#content-area a -> blue" rule (same fix the mobile bar applies). */
    #m-council-nav .m-cnav-link { color: #e6eaf0 !important; }
    #m-council-nav .m-cnav-link.active {
        color: #14161b !important;
        font-weight: 600 !important;
        text-shadow: none !important;
    }
    /* The global advisor bar replaces the throne page's in-content council tabs
       on desktop now (avoids showing two identical rows). */
    #game-navbar.council-view ~ .game-header { display: none; }

    #game-navbar.navbar-pinned {
        display: flex;
        flex-direction: column;
        /* Centre the stacked div layers (date box, Kingdom button, menu, logout)
           within the bar instead of left-aligning them. */
        align-items: center;
        text-align: center;
        /* Black-and-grey panel behind the left nav bar (grey at the top fading to
           near-black at the bottom). Padding/border stay inside the 100px
           border-box footprint so the floated content column doesn't shift. */
        background: linear-gradient(180deg, #1c1f26 0%, #0c0d10 100%);
        border: 1px solid #2a2f39;
        border-radius: 10px;
        padding: 10px 6px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    }
    /* Lobby link removed from the DESKTOP bar (still shown on the mobile bar). */
    #game-navbar.navbar-pinned .navbar-lobby  { display: none; }
    #game-navbar.navbar-pinned .navbar-date   { order: 1; }
    #game-navbar.navbar-pinned .navbar-right  { order: 2; }
    #game-navbar.navbar-pinned .navbar-left   { order: 3; }
    #game-navbar.navbar-pinned .navbar-logout { order: 9; margin-top: 12px; }
    #game-navbar.navbar-pinned .navbar-theme  { order: 10; margin-top: 10px; }
    /* Each layer fills the column so its centred content lines up vertically. */
    #game-navbar.navbar-pinned .navbar-date,
    #game-navbar.navbar-pinned .navbar-right,
    #game-navbar.navbar-pinned .navbar-left,
    #game-navbar.navbar-pinned .navbar-theme,
    #game-navbar.navbar-pinned .navbar-logout { width: 100%; }

    /* The date gets its own boxed, prominent treatment at the top. */
    #game-navbar.navbar-pinned .navbar-date {
        margin: 0 0 12px;
        padding: 7px 6px;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        line-height: 1.25;
        opacity: 1;
        color: #ffc300;
        border: 1px solid rgba(255, 195, 0, 0.55);
        border-radius: 4px;
        background: rgba(255, 195, 0, 0.10);
    }

    /* The Kingdom button row sits directly under the date, above the menu. */
    #game-navbar.navbar-pinned .navbar-right { margin-top: 0; margin-bottom: 12px; }

    /* The menu block (dropdown toggle + pin + inline list) drops to the bottom;
       no longer needs a top margin since it is now the last child. */
    #game-navbar.navbar-pinned .navbar-menu { margin-top: 8px; }
}

/* =====================================================================
 * DESKTOP — recolour the in-game chrome to match the dark/gold lobby
 * ("bubble") scheme: the left-bar menu links, the council tab row on the
 * throne page, and the money/resource bar. navbar.css loads after theme.css
 * so these win without !important (via slightly higher specificity).
 * ===================================================================== */
@media (min-width: 901px) {
    /* --- Left nav menu links: lobby blue, gold for the current page. --- */
    #game-navbar .navbar-menu .navigation a {
        color: #7fa8e6;
        text-decoration: none;
    }
    #game-navbar .navbar-menu .navigation a:hover { color: #a9c6f5; }
    /* "Reservations" is the longest nav label and overflows the ~100px column.
       It is a single word with no spaces, so white-space:normal alone can't wrap
       it — shrinking the font wasn't enough on its own. Allow the word itself to
       break so it flows onto a second line inside the bar instead of spilling
       past the border. */
    #game-navbar .navbar-menu .navigation a[data-view="game_reservations"] {
        font-size: 0.85em;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    #game-navbar .navbar-menu .navigation a.navbar-active {
        color: #ffc300;
        font-weight: bold;
    }

    /* "Manage" (combined /game/management page) is hidden on the DESKTOP nav for
       now (all themes); it stays available on the mobile nav via .nav-mobile-only. */
    #game-navbar .navbar-menu .navigation div.nav-mobile-only { display: none !important; }

    /* The throne page's in-content council tab row (Throne / State / Military /
     * ...) is no longer styled/shown on desktop: the global advisor bar
     * (#m-council-nav, above) now provides it on every page, and the duplicate
     * .game-header tab row is hidden by the `display: none` rule near the top of
     * this media block. (The old chip-styling block here was removed 2026-06-26.) */

    /* --- Resource / money bar: dark card, gold Cinzel labels, light current
     *     values, subtle predicted/delta rows, thin column separators — the
     *     same palette as the lobby (replaces the old silver parchment bar). --- */
    #content-area #resource-bar {
        width: 700px;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid rgba(255, 195, 0, 0.30);
        border-radius: 8px;
        box-shadow: none;
        overflow: hidden;
        margin-bottom: 12px;
        background: linear-gradient(180deg, #1c1f26 0%, #14161b 100%);
        font-family: 'Marcellus', Georgia, serif;
    }
    #content-area #resource-bar thead { background: rgba(0, 0, 0, 0.25); }
    #content-area #resource-bar thead th {
        width: auto;
        color: #ffc300;
        font-family: 'Marcellus', Georgia, serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: center;
        padding: 6px 8px 3px;
        border: none;
        background: transparent;
        white-space: nowrap;
    }
    #content-area #resource-bar tbody th {       /* current values (prominent) */
        width: auto;
        color: #f3f5f8;
        font-family: 'Marcellus', Georgia, serif;
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        padding: 3px 8px;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
        background: transparent;
        white-space: nowrap;
    }
    #content-area #resource-bar tbody td {       /* predicted value + delta (subtle) */
        width: auto;
        color: #9aa3b2;
        font-family: 'Marcellus', Georgia, serif;
        font-size: 11px;
        font-weight: 400;
        text-align: center;
        padding: 1px 8px;
        border: none;
        background: transparent;
        white-space: nowrap;
    }
    #content-area #resource-bar tbody th:last-child,
    #content-area #resource-bar tbody td:last-child { border-right: none; }
    #content-area #resource-bar .positive { color: #8fbf6a; }
    #content-area #resource-bar .negative { color: #e2a3a3; }
}

/* =====================================================================
 * PHONE / TABLET (<= 900px) — keep the DESKTOP-style vertical bar on the
 * LEFT (not a bottom strip). The bar floats left with the full menu shown
 * as a vertical list; the game content sits in the column to its right.
 * Floating (rather than position:fixed) keeps the bar BELOW the site header
 * — a top-anchored fixed bar would cover the header — and mirrors how the
 * desktop sidebar already lays out.
 * ===================================================================== */
@media (max-width: 900px) {
    /* In-game pages hide the shared top user header on mobile only (desktop keeps
       it); on mobile the Lobby + Logout links live in the left bar instead. */
    #inner-container:has(#game-navbar) #header,
    #inner-container:has(#game-navbar) #header2 { display: none !important; }

    #game-navbar {
        /* Locked in: sticks to the top of the screen as the page scrolls. Unlike
           a top-fixed bar this never covers the site header (it starts in flow
           below it and only pins once scrolled). Falls back to a normal floated
           bar where sticky-on-float isn't supported. Its own content scrolls when
           the menu is taller than the viewport. */
        position: -webkit-sticky;
        position: sticky;
        top: 8px;
        float: left !important;
        width: 118px !important;
        margin: 0 10px 12px 0 !important;
        /* Stacking: lift the bar's context ABOVE the page content (so its fixed
           children — the ticker + the collapsed bottom nav strip — don't get the
           scrolling page painted over them), but keep it BELOW the fixed top bars
           (resource/money bar 2200, council/advisors bar 2150) so the sticky left
           bar slides BEHIND them on scroll instead of over them. Any positive
           value works for the content-overlap fix; 2140 sits just under 2150. */
        z-index: 2140;
        /* The bar is NOT its own scroll container — it grows with its content and
           the PAGE scrolls (per request). Swiping it away turns it into the
           bottom horizontal nav strip (see .game-nav-collapsed below). */
        box-sizing: border-box;
        text-align: left;
        /* Smaller than the 1.3em desktop bar so labels fit the narrow column. */
        font-size: 1em;
        display: flex;
        flex-direction: column;
        /* Dark panel matching the council/advisor bar (#m-council-nav): same
           #14141f fill, gold edge and soft shadow, so the chips sit on a bar
           instead of floating on the plain black page. border-box keeps the
           padding/border inside the 118px footprint so the content column (which
           clears the bar with margin-left:130px) doesn't shift. */
        background: #14141f;
        border: 1px solid rgba(255, 195, 0, 0.25);
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
        padding: 8px 6px;
    }
    /* Order inside the bar: Lobby, then date + next-tick timer, then the
       Kingdom/throne buttons, then the menu list, and Logout at the bottom. */
    #game-navbar .navbar-lobby  { order: 0; margin-bottom: 8px; }
    #game-navbar .navbar-date   { order: 1; }
    #game-navbar .navbar-right  { order: 2; }
    #game-navbar .navbar-left   { order: 3; }
    #game-navbar .navbar-logout { order: 9; margin-top: 12px; }
    #game-navbar .navbar-theme  { order: 10; margin-top: 10px; }

    #game-navbar .navbar-left,
    #game-navbar .navbar-dropdown { position: static; }

    /* Show the full menu as a vertical list (the pinned-sidebar look). */
    #game-navbar .navbar-menu {
        display: block;
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        min-width: 0;
        max-height: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }
    #game-navbar .navbar-menu .navigation { display: block; margin-bottom: 8px; }
    #game-navbar .navbar-menu .navigation div { margin-bottom: 5px; }
    /* Nav links rendered as pill chips, matching the top council/advisor row
       (#m-council-nav .m-cnav-link). In the default left bar they stack
       vertically; in the swiped-away bottom strip they line up in a row (the
       collapsed rules further down keep the same chip look with nowrap). */
    #game-navbar .navbar-menu .navigation a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
        line-height: 1.1;
        border-radius: 14px;
        border: 1px solid rgba(255, 195, 0, 0.35);
        background: rgba(255, 255, 255, 0.05);
        color: #e6eaf0;
        font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
        font-size: 13px;
        white-space: normal;
    }
    /* Highlight the current page (class added by the navbar script) — gold chip
       exactly like the active council/advisor chip. */
    #game-navbar .navbar-menu .navigation a.navbar-active {
        color: #14161b;
        font-weight: 700;
        background: linear-gradient(180deg, #ffe9a8, #ffc300);
        border-color: rgba(255, 195, 0, 0.85);
    }

    /* Date + next-tick ticker: LOCKED full-width at the top, directly ABOVE the
       money/resource bar (its height is measured into --tick-h so the resource
       bar, council sub-nav, content and left bar all stack below it). Pulled out
       of the nav bar's flow via position:fixed so it stays put even when the bar
       is swiped into the bottom strip. */
    #game-navbar .navbar-date {
        position: fixed;
        top: var(--rcb-h, 0px);
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2250;
        box-sizing: border-box;
        margin: 0;
        /* Extra bottom padding so this ticker (the top bar's solid backing) extends
           below the taller Lobby/mentor corner buttons that sit on top of it —
           otherwise their bottom edge overhangs the backing and looks cut off. */
        padding: 4px 8px 14px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
        color: #ffc300;
        background: #14141f;
        /* The base (desktop) .navbar-date rule sets opacity:0.85 — without this
           reset the whole ticker (background included) stays 15% see-through and
           the scrolling page shows through it. */
        opacity: 1;
        border: none;
        border-bottom: 1px solid rgba(255, 195, 0, 0.40);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #game-navbar .navbar-next-tick { display: inline; margin-left: 10px; font-size: 12px; }
    #game-navbar .navbar-right {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 10px;
    }
    #game-navbar .navbar-btn { display: block; white-space: normal; }

    /* Game content sits in the column to the RIGHT of the floated bar. Override
       responsive.css's single-column stacking (width:100%; float:none) and clear
       the bar with a left margin so nothing slides underneath it. */
    #content-area .game-header,
    #content-area .game-content {
        float: none !important;
        width: auto !important;
        margin-left: 130px !important;
        transition: margin-left .2s ease;
    }
    /* The throne page's in-content council tabs are replaced on mobile by the
       global #m-council-nav (pinned below the money bar), so hide them here to
       avoid duplication. Other pages keep their .game-header (page title). */
    #game-navbar.council-view ~ .game-header { display: none; }
    html.game-nav-collapsed #content-area .game-header { margin-left: 16px !important; }

    /* Council sub-nav: pinned full-width just below the money bar, on EVERY page.
       Pretty chip links matching the dark/gold layout; horizontally scrollable. */
    #m-council-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: calc(var(--rcb-h, 0px) + var(--tick-h, 26px) + var(--rbar-h, 52px));
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2150;
        box-sizing: border-box;
        padding: 6px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: #14141f;
        border-bottom: 1px solid rgba(255, 195, 0, 0.25);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
        white-space: nowrap;
    }
    #m-council-nav::-webkit-scrollbar { height: 3px; }
    #m-council-nav::-webkit-scrollbar-thumb { background: rgba(255,195,0,0.3); border-radius: 2px; }
    #m-council-nav .m-cnav-link {
        flex: 0 0 auto;
        display: block;
        padding: 6px 13px;
        border-radius: 14px;
        border: 1px solid rgba(255, 195, 0, 0.35);
        background: rgba(255, 255, 255, 0.05);
        color: #e6eaf0;
        text-decoration: none;
        font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
        font-size: 13px;
        line-height: 1.1;
        white-space: nowrap;
    }
    #m-council-nav .m-cnav-link.active {
        color: #14161b;
        font-weight: 700;
        background: linear-gradient(180deg, #ffe9a8, #ffc300);
        border-color: rgba(255, 195, 0, 0.85);
    }

    /* Keep the chip TEXT colours identical between the top council/advisor row
       and the bottom/left nav chips. game_bubble_theme.html has a broad
       "#content-area a -> #7fa8e6 (blue)" rule that otherwise tints these chrome
       chips, and tints them INCONSISTENTLY (it out-specifies the council chip but
       not the nav-active chip), so the two rows ended up different colours. Force
       the intended palette on both — light text normally, near-black on the gold
       active chip — so they match exactly. !important beats the (non-important)
       blue rule regardless of source order. */
    #m-council-nav .m-cnav-link,
    #game-navbar .navbar-menu .navigation a {
        color: #e6eaf0 !important;
    }
    #m-council-nav .m-cnav-link.active,
    #game-navbar .navbar-menu .navigation a.navbar-active {
        color: #14161b !important;
        /* Selected-chip text: semibold (600) — a real loaded Cinzel weight, so it
           stays crisp (no faux-bold fuzz) while keeping a touch more emphasis than
           normal. The gold background already marks the current page. This wins
           over the per-state font-weight:700 rules (default, collapsed strip,
           council) via !important, keeping every selected chip identical. */
        font-weight: 600 !important;
        text-shadow: none !important;
    }

    /* Royal command banner: locked full-width at the very top, ABOVE the money
       bar. --rcb-h (measured in game/base.html, 0 when absent) stacks the money
       bar and content below it. */
    #royal-command-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2300;
        box-sizing: border-box;
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #14141f;
        border-bottom: 1px solid rgba(255, 195, 0, 0.40);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        padding: 6px 8px;
    }

    /* Resource bar (money / peasants / food / ...): locked full-device-width,
       just below the royal command banner. */
    #content-area #resource-bar {
        position: fixed;
        top: calc(var(--rcb-h, 0px) + var(--tick-h, 26px));
        left: 0;
        right: 0;
        width: 100% !important;
        margin: 0 !important;
        z-index: 2200;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        background: #14141f;
        border-bottom: 1px solid rgba(255, 195, 0, 0.40);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
    /* Themed money bar: gold uppercase labels, light values, subtle predicted/
       delta rows, thin column separators — matches the dark/gold mobile layout. */
    /* Normalise the table box so every theme spaces the mobile money bar the same:
       Neo Classic + Intel theme.css put padding (3px 6px) + border-spacing on
       #resource-bar that Bubble/Retro don't, which offset their contents here. */
    #content-area #resource-bar { border-collapse: collapse; padding: 0; border-spacing: 0; }
    #content-area #resource-bar thead th {
        color: #ffc300;
        font-family: 'Marcellus', Georgia, serif;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: center;
        padding: 3px 10px 1px;
        border: none;
        white-space: nowrap;
    }
    #content-area #resource-bar tbody th {           /* current values (prominent) */
        color: #f3f5f8;
        font-family: 'Marcellus', Georgia, serif;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        padding: 1px 10px 3px;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
        white-space: nowrap;
    }
    #content-area #resource-bar thead th + th { border-left: 1px solid rgba(255, 255, 255, 0.07); }
    #content-area #resource-bar tbody td {           /* predicted value + delta (subtle) */
        color: #9aa3b2;
        font-size: 10px;
        text-align: center;
        padding: 0 10px;
        border: none;
        white-space: nowrap;
    }
    #content-area #resource-bar tbody tr:last-child th:last-child,
    #content-area #resource-bar tbody th:last-child { border-right: none; }
    #content-area { padding-top: calc(var(--rcb-h, 0px) + var(--tick-h, 26px) + var(--rbar-h, 52px) + var(--cnav-h, 40px) + 6px) !important; }
    #game-navbar { top: calc(var(--rcb-h, 0px) + var(--tick-h, 26px) + var(--rbar-h, 52px) + var(--cnav-h, 40px) + 8px) !important; }

    /* No bottom-bar spacer is needed any more. */
    #inner-container { padding-bottom: 0; }

    /* ---- Swipe-away: turn the left bar into a BOTTOM horizontal nav strip ----
     * Swiping the bar left adds .game-nav-collapsed to <html> (see the script in
     * game/base.html). Instead of hiding the bar, we dock it to the bottom of the
     * screen as a single horizontally-scrolling row of nav chips, and the content
     * reclaims the full width. Swiping right (handled in JS) restores the left
     * bar. Scoped inside this media query so desktop is never affected. */
    /* The bar itself collapses to a zero-width nothing (NOT position:fixed —
       a fixed child, the ticker, mis-anchors when its parent is fixed on mobile,
       which made the ticker vanish). overflow:visible so the fixed menu below
       isn't clipped. The ticker keeps its own fixed top strip. */
    html.game-nav-collapsed #game-navbar {
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: visible !important;
    }
    /* Drop the lobby / Kingdom / logout from the bottom dock — it is just the
       page nav links (swipe right to bring the full left bar back). */
    html.game-nav-collapsed #game-navbar .navbar-lobby,
    html.game-nav-collapsed #game-navbar .navbar-right,
    html.game-nav-collapsed #game-navbar .navbar-logout { display: none !important; }
    /* The menu becomes the fixed, horizontally-scrolling bottom strip. */
    html.game-nav-collapsed #game-navbar .navbar-left { position: static; }
    html.game-nav-collapsed #game-navbar .navbar-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0;
        padding: 6px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        background: #14141f;
        border-top: 1px solid rgba(255, 195, 0, 0.25);
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.45);
        z-index: 2400;
    }
    html.game-nav-collapsed #game-navbar .navbar-menu .navigation { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; margin: 0; }
    html.game-nav-collapsed #game-navbar .navbar-menu .navigation div { margin: 0; }
    html.game-nav-collapsed #game-navbar .navbar-menu .navigation a {
        display: block;
        white-space: nowrap;
        padding: 6px 13px;
        border-radius: 14px;
        border: 1px solid rgba(255, 195, 0, 0.35);
        background: rgba(255, 255, 255, 0.05);
        color: #e6eaf0;
        font-family: 'Marcellus', Georgia, 'Times New Roman', serif;
        font-size: 13px;
        line-height: 1.1;
    }
    html.game-nav-collapsed #game-navbar .navbar-menu .navigation a.navbar-active {
        color: #14161b;
        font-weight: 700;
        background: linear-gradient(180deg, #ffe9a8, #ffc300);
        border-color: rgba(255, 195, 0, 0.85);
    }
    /* With the left bar gone, the content fills the width and is CENTRED (equal
       margins) instead of leaving a gap on the left. Bottom padding clears the
       fixed bottom strip. */
    html.game-nav-collapsed #content-area .game-header,
    html.game-nav-collapsed #content-area .game-content {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    html.game-nav-collapsed #inner-container { padding-bottom: 58px; }
    /* The bottom strip IS the nav now, so the reopen edge tab isn't needed. */
    html.game-nav-collapsed #game-nav-handle { display: none; }

    /* ===== Lobby + Mentor pinned to the top, flanking the admin message =====
     * On phones the Lobby link and the throne-switch ("mentor") button leave the
     * left nav bar / bottom strip and pin to the top CORNERS, on the admin
     * message's row (Lobby left, mentor right). Each selector is paired with the
     * `.game-nav-collapsed` variant so it shows in BOTH nav states (the
     * collapsed-hide rules above are matched at equal specificity and beaten by
     * source order here). */
    html.game-nav-collapsed #game-navbar .navbar-lobby,
    #game-navbar .navbar-lobby {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-width: 84px !important;
        margin: 0 !important;
        z-index: 2350 !important;
    }
    html.game-nav-collapsed #game-navbar .navbar-right,
    #game-navbar .navbar-right {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: auto !important;
        max-width: 132px !important;
        margin: 0 !important;
        gap: 0 !important;
        background: none !important;
        z-index: 2350 !important;
    }
    /* Keep the Enemy-kingdom shortcut off the phone top bar; surface only mentor. */
    #game-navbar .navbar-right .navbar-kingdom-btn { display: none !important; }
    #game-navbar .navbar-mentor-btn { display: block !important; margin: 0 !important; }
    /* Compact the two flanking buttons so they tuck into the top corners. */
    #game-navbar .navbar-lobby-btn,
    #game-navbar .navbar-mentor-btn {
        font-size: 13px !important;
        padding: 4px 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Admin message removed from the top on phones. With it gone --rcb-h is 0, so
       the ticker (.navbar-date) rises to top:0 and becomes the row's solid
       backing; Lobby + mentor align with it (see ticker padding below). */
    #royal-command-bar { display: none !important; }

    /* Ticker is the top row's solid full-width backing. Pad its date text in so it
       clears the Lobby (left) + mentor (right) corner buttons, which sit on top of
       it (their z-index beats the ticker's within #game-navbar's context). */
    #game-navbar .navbar-date {
        padding-left: 88px !important;
        padding-right: 138px !important;
    }
}

/* The reopen tab is hidden everywhere except mobile-while-collapsed (above). */
#game-nav-handle { display: none; }

/* -------- Nav-bar theme picker (under the Logout button) -------- */
#game-navbar .navbar-theme {
    text-align: center;
}
#game-navbar .navbar-theme-label {
    font-family: 'Marcellus', serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffc300;
    margin-bottom: 4px;
}
#game-navbar .navbar-theme-form {
    margin: 0;
}
#game-navbar .navbar-theme-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 6px;
    font-family: 'Marcellus', serif;
    font-size: 12px;
    color: #e6eaf0;
    background-color: #14141f;
    border: 1px solid rgba(255, 195, 0, 0.35);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#game-navbar .navbar-theme-select:hover {
    border-color: rgba(255, 195, 0, 0.7);
}
#game-navbar .navbar-theme-select option {
    color: #14141f;
    background-color: #fff;
}

/* On the mobile bottom strip the theme picker is hidden (the left bar / the
   in-game Preferences > Display Theme page still expose it on phones). */
@media (max-width: 900px) {
    html.game-nav-collapsed #game-navbar .navbar-theme { display: none !important; }
}