@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@600;700&display=swap');

/* ==========================================================================
   SECTION 1: STRUCTURAL BASE LAYOUTS & SCROLLBAR HIDDEN FILTERS
   ========================================================================== */

:root {
    --ra-viewport-h: 100vh;
    --ra-viewport-h: 100svh;
    --ra-viewport-h: var(--ra-layout-vh, var(--game-layout-vh, 100dvh));
    --ra-viewport-w: 100%;
    --ra-viewport-w: var(--ra-layout-vw, var(--game-layout-vw, 100%));
}

/* Block 1: FULLSCREEN SCROLLABLE FRAME WITH HIDDEN TRACKERS */
#main-dashboard-canvas {
    --ra-viewport-h: 100vh;
    --ra-viewport-h: 100svh;
    --ra-viewport-h: var(--ra-layout-vh, 100dvh);
    --ra-viewport-w: 100%;
    --ra-viewport-w: var(--ra-layout-vw, 100%);
    margin: 0 !important;
    padding: 0 !important;
    background-image: url('images/mainpagebg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #050403 !important;
    min-height: var(--ra-viewport-h, 100vh) !important;
    width: var(--ra-viewport-w, 100%) !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;

    /* 🔥 THE SCROLL BAR EXCLUSION MATRIX: */
    /* Allows full natural page vertical scrolling loops while keeping the scrollbar 100% hidden! */
    overflow-y: scroll !important; 
    overflow-x: hidden !important;
    scrollbar-width: none !important; /* Forces hiding on Mozilla Firefox Engine layers */
    -ms-overflow-style: none !important; /* Forces hiding on older IE/Edge Engine layers */
}

/* Forces hiding on Chrome, Safari, and newer Opera Webkit layers */
#main-dashboard-canvas::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Block 2: CENTERED MAIN TITLE BLOCK (PADDING ADJUSTED) */
.over-bar-utility-deck {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 40px 10px 40px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%) !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
}

.header-logo-housing-block {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.portal-brand-logo-asset {
    display: block !important;
    width: 100% !important; 
    max-width: 680px !important; 
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
}

/* Block 3: RELAXED MAIN MASTER WRAPPER */
.staging-deck-master-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;      /* 🌟 THE REAL FIX: Changes center to stretch to unlock full row width widths */
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 80px) !important;
    margin: -30px 0 0 0 !important;
    padding: 0 40px 40px 40px !important; 
    box-sizing: border-box !important;
    flex-grow: 1 !important;
    gap: 20px !important;
}


/* ==========================================================================
   SECTION 2: STICKY THREE-COLUMN NAVIGATION SYSTEM CONFIGURATIONS
   ========================================================================== */

/* Block 4: STICKY COCHLEAR GRID NAVIGATION BAR DECK */
.main-portal-nav-bar {
 width: 100% !important;
 height: 100px !important;
 position: sticky !important;
 top: 0 !important;
 z-index: 99999 !important;

 /* No fill on the nav shell — only the bar image layer paints the chrome */
 background: none !important;
 background-color: transparent !important;
 box-shadow: none !important;
 border: none !important;
 border-radius: 0 !important;

 display: flex !important;
 flex-direction: row !important;
 justify-content: space-between !important;
 align-items: center !important;

 padding: 0 20px !important;
 box-sizing: border-box !important;
 flex-shrink: 0 !important;
 isolation: isolate !important;
}

/* Bar artwork only — centered strip, no solid rectangle behind it */
.main-portal-nav-bar::before {
 content: '' !important;
 position: absolute !important;
 left: 0 !important;
 right: 0 !important;
 top: 50% !important;
 transform: translateY(-50%) !important;
 height: 71px !important;
 background-image: url('images/topnavigationbar.png') !important;
 background-size: 100% 100% !important;
 background-repeat: no-repeat !important;
 background-position: center center !important;
 pointer-events: none !important;
 z-index: 0 !important;
}

.main-portal-nav-bar > * {
 position: relative !important;
 z-index: 1 !important;
}

/* 👥 Desktop commander identity above nav + horizontal menu rail inside nav */
.portal-desktop-nav-stack {
    width: 100% !important;
    position: relative !important;
    z-index: 99999 !important;
}

.portal-nav-commander-identity-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px 2px 35px !important;
    margin: 0 0 -2px 0 !important;
    min-height: 58px !important;
    position: relative !important;
    z-index: 2 !important;
}

.portal-commander-identity-shell {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(100%, 420px) !important;
    overflow: visible !important;
}

.portal-commander-new-messages-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
    background: linear-gradient(180deg, rgba(58, 44, 18, 0.98) 0%, rgba(36, 28, 12, 0.96) 100%) !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    cursor: pointer !important;
    appearance: none !important;
    font: inherit !important;
    color: inherit !important;
    transition:
        max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.28s ease,
        filter 0.2s ease !important;
}

.portal-commander-new-messages-bar:hover,
.portal-commander-new-messages-bar:focus-visible {
    filter: brightness(1.08) !important;
    outline: none !important;
}

.portal-commander-new-messages-bar-text {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: rgba(255, 224, 148, 0.96) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-commander-identity-shell.has-unread-messages .portal-commander-new-messages-bar {
    max-height: 24px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    border-color: rgba(184, 144, 48, 0.55) !important;
}

.portal-commander-identity-shell.is-new-messages-arrival .portal-commander-new-messages-bar {
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.28) !important;
}

.portal-mobile-commander-shell {
    width: 100% !important;
}

.portal-commander-identity-card {
    --nav-commander-avatar-size: 52px;
    --nav-commander-plate-height: 34px;
    --nav-commander-plate-name-chars: 22;
    --nav-commander-plate-inset-left: calc(var(--nav-commander-avatar-size, 52px) / 2 + 8px);
    --nav-commander-plate-name-offset: 10px;
    --nav-commander-plate-padding-end: 10px;
    /* Plate fits 22ch name (Cinzel 0.98rem) + inset, name offset, and a little air */
    --nav-commander-plate-width: calc(
        var(--nav-commander-plate-inset-left) +
        var(--nav-commander-plate-name-offset) +
        (var(--nav-commander-plate-name-chars) * 1ch) +
        0.85ch +
        var(--nav-commander-plate-padding-end)
    );
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: auto !important;
    max-width: min(100%, calc(var(--nav-commander-avatar-size, 52px) + var(--nav-commander-plate-width))) !important;
    min-height: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.portal-commander-identity-card-body {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    padding-bottom: 13px !important;
    overflow: visible !important;
}

.portal-commander-identity-card-body.portal-commander-identity-trigger {
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.portal-commander-identity-card-body.portal-commander-identity-trigger:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.65) !important;
    outline-offset: 3px !important;
    border-radius: 8px !important;
}

.portal-commander-identity-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: max(100%, 268px) !important;
    min-width: 268px !important;
    max-width: min(100vw - 48px, 340px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 10px 9px 9px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(212, 175, 88, 0.62) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(ellipse 120% 90% at 50% -30%, rgba(255, 200, 96, 0.16) 0%, transparent 58%),
        linear-gradient(180deg, rgba(42, 32, 20, 0.99) 0%, rgba(10, 8, 5, 0.99) 100%) !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(255, 215, 0, 0.07),
        inset 0 1px 0 rgba(255, 230, 160, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38) !important;
    z-index: 100003 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) scale(0.98) !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.2s !important;
}

.portal-commander-identity-card.is-commander-menu-open .portal-commander-identity-menu:not([hidden]) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.portal-commander-identity-menu .dropdown-action-item {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 11px 12px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.25 !important;
    text-align: center !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    border-radius: 5px !important;
    color: rgba(228, 236, 246, 0.96) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease !important;
}

.portal-commander-identity-menu .dropdown-action-item:hover,
.portal-commander-identity-menu .dropdown-action-item:focus-visible {
    background: linear-gradient(180deg, rgba(184, 144, 48, 0.2) 0%, rgba(120, 90, 30, 0.14) 100%) !important;
    border-color: rgba(255, 215, 0, 0.42) !important;
    color: #fff0c8 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.12), 0 0 14px rgba(255, 215, 0, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

.portal-commander-identity-menu .dropdown-action-item-view-profile {
    border-right: none !important;
    margin-bottom: 2px !important;
    padding-bottom: 10px !important;
    color: #ffd978 !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.22) !important;
    border-radius: 3px 3px 2px 2px !important;
}

.portal-commander-identity-menu .dropdown-action-item-discoveries,
.portal-mobile-submenu-item-discoveries {
    color: #e8d4a0 !important;
}

.rift-discovery-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.65);
    flex: 0 0 auto;
    align-self: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.has-discovery-unread > .rift-discovery-unread-dot,
.rift-discoveries-workspace-tab.has-discovery-unread > .rift-discovery-unread-dot {
    opacity: 1;
}

.rift-discoveries-workspace-tab.has-discovery-unread .rift-discoveries-workspace-tab-label {
    font-weight: 700;
    color: #ffe8a8;
}

.rift-discoveries-workspace-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.rift-discoveries-workspace-article-discovery-line {
    margin: 0 0 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: rgba(255, 224, 160, 0.9);
}

.portal-commander-identity-menu .dropdown-action-item-chronicles-bp,
.portal-commander-identity-menu .dropdown-action-item-return-portal,
.portal-commander-identity-menu .dropdown-action-item-logout {
    margin-top: 4px !important;
}

.portal-nav-commander-menu-rail {
    display: none !important;
}

/* 👥 COLUMN 1 STRUCTURES: PROFILE INFO SHIELD LOCKS */
.nav-embedded-account-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    color: rgba(241, 224, 172, 0.4) !important;
    text-shadow: 1px 1px 2px #000 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-right: none !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    padding: 0 !important;
}

/* Desktop nav: avatar + commander name row (beats .nav-embedded-account-label padding: 0) */
@media (min-width: 1025px) {
    .portal-nav-commander-identity-row.nav-embedded-account-label {
        padding: 0 20px 2px 35px !important;
    }
}

.portal-commander-identity-card-body .nav-account-identity-cluster {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    width: var(--nav-commander-plate-width) !important;
    min-width: var(--nav-commander-plate-width) !important;
    max-width: var(--nav-commander-plate-width) !important;
    height: var(--nav-commander-plate-height, 34px) !important;
    min-height: var(--nav-commander-plate-height, 34px) !important;
    max-height: var(--nav-commander-plate-height, 34px) !important;
    margin: 0 0 0 calc((var(--nav-commander-avatar-size, 52px) - var(--nav-commander-plate-height, 34px)) / -2 - 6px) !important;
    padding: 0 var(--nav-commander-plate-padding-end, 10px) 0 var(--nav-commander-plate-inset-left) !important;
    box-sizing: border-box !important;
    border: 2px solid #b89030 !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    background:
        linear-gradient(135deg, rgba(30, 26, 18, 0.96) 0%, rgba(12, 10, 8, 0.98) 100%),
        url('images/borderedcontainer_thin.png') center / 100% 100% no-repeat !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 5px 14px rgba(0, 0, 0, 0.42) !important;
    overflow: visible !important;
    z-index: 1 !important;
}

.portal-commander-identity-card-body .nav-account-identity-cluster::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: calc(var(--nav-commander-avatar-size, 52px) / 2 + 8px) !important;
    height: calc(100% - 6px) !important;
    transform: translateY(-50%) !important;
    border: 2px solid #b89030 !important;
    border-right: none !important;
    border-radius: 6px 0 0 6px !important;
    background:
        linear-gradient(90deg, rgba(30, 26, 18, 0.98) 0%, rgba(18, 14, 10, 0.96) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.nav-account-identity-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    line-height: 1.05 !important;
}

.portal-commander-identity-card-body .nav-account-identity-stack {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--nav-commander-plate-height, 34px) !important;
}

.nav-embedded-account-label strong {
    color: #ffd700 !important;
    padding-left: 0 !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.35) !important;
    font-size: 0.98rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.portal-commander-identity-card-body #logged-user-tag,
.portal-commander-identity-card-body .nav-account-identity-stack strong {
    color: #ffd700 !important;
    padding-left: var(--nav-commander-plate-name-offset, 10px) !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.35) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(var(--nav-commander-plate-name-chars, 22) * 1ch) !important;
}

.portal-commander-identity-card-body .nav-commander-membership-tab {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: translateY(calc(100% - 2px)) !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    cursor: default !important;
    z-index: 3 !important;
}

.portal-commander-identity-card-body .nav-commander-membership-tab .membership-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.05em !important;
    padding: 3px 9px 4px !important;
    line-height: 1.1 !important;
    border-radius: 0 0 7px 7px !important;
    border: 2px solid #b89030 !important;
    border-top: 1px solid rgba(184, 144, 48, 0.55) !important;
    background:
        linear-gradient(180deg, rgba(48, 38, 24, 0.98) 0%, rgba(16, 12, 8, 0.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

.portal-commander-identity-card-body .nav-commander-membership-tab::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: 8px !important;
    right: 8px !important;
    height: 2px !important;
    background: linear-gradient(180deg, rgba(30, 26, 18, 0.98) 0%, rgba(18, 14, 10, 0.96) 100%) !important;
    pointer-events: none !important;
}

.portal-commander-identity-card-body .nav-commander-membership-tab .membership-badge.tier-basic,
.portal-commander-identity-card-body .nav-commander-membership-tab .membership-badge.tier-bronze {
    color: #f4c892 !important;
    border-color: #cd7f32 !important;
    background:
        linear-gradient(180deg, rgba(120, 72, 32, 0.96) 0%, rgba(48, 28, 12, 0.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 210, 150, 0.22),
        0 0 10px rgba(205, 127, 50, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.portal-commander-identity-card-body .nav-commander-membership-tab .membership-badge.tier-royalty {
    color: #fff0b8 !important;
    border-color: #e0b840 !important;
    background:
        linear-gradient(180deg, rgba(168, 132, 36, 0.96) 0%, rgba(72, 54, 14, 0.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 190, 0.28),
        0 0 12px rgba(201, 162, 39, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.portal-commander-identity-card-body .nav-commander-membership-tab .membership-badge.tier-silver {
    color: #f0f0f0 !important;
    border-color: #b8b8b8 !important;
    background:
        linear-gradient(180deg, rgba(88, 88, 92, 0.96) 0%, rgba(36, 36, 40, 0.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 10px rgba(192, 192, 192, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.portal-commander-identity-card-body .nav-commander-membership-tab .membership-badge.tier-gold {
    color: #fff6c8 !important;
    border-color: #ffd700 !important;
    background:
        linear-gradient(180deg, rgba(160, 128, 24, 0.96) 0%, rgba(64, 48, 8, 0.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 200, 0.3),
        0 0 12px rgba(255, 215, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.portal-commander-identity-card-body .nav-commander-owner-tag-slot {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
}

.portal-commander-identity-card-body .nav-commander-owner-tag-slot .commander-owner-tag {
    font-size: 0.52rem !important;
    padding: 1px 6px !important;
    line-height: 1.1 !important;
}

.portal-desktop-member-auth-cluster {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.portal-desktop-member-auth-cluster[hidden],
.portal-desktop-guest-auth-card[hidden],
#portal-mobile-guest-login-block[hidden],
#portal-mobile-commander-block[hidden],
#portal-mobile-nav-auth-btn,
#metrics-auth-action-btn {
    display: none !important;
}

.portal-desktop-guest-auth-card {
    width: auto !important;
    max-width: 100% !important;
}

.portal-desktop-guest-auth-trigger.portal-commander-identity-card {
    display: flex !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    margin: 0 !important;
    appearance: none !important;
    cursor: pointer !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.portal-desktop-guest-auth-trigger:hover,
.portal-desktop-guest-auth-trigger:focus-visible {
    outline: none !important;
}

.portal-desktop-guest-auth-icon,
.portal-desktop-guest-auth-trigger .nav-bar-embedded-avatar-thumbnail {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(8, 6, 4, 0.55) !important;
    box-shadow: none !important;
}

.portal-mobile-guest-auth-card {
    width: 100% !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.22) !important;
}

/* Guest page: log-in controls without bordered card chrome */
body.portal-guest-mode #portal-desktop-login-btn.portal-commander-identity-card,
body.portal-guest-mode .portal-desktop-guest-auth-trigger.portal-commander-identity-card {
    width: auto !important;
    min-height: 0 !important;
    padding: 6px 6px 6px 6px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.portal-guest-mode .portal-desktop-guest-auth-trigger:hover .nav-account-identity-cluster,
body.portal-guest-mode .portal-desktop-guest-auth-trigger:focus-visible .nav-account-identity-cluster,
body.portal-guest-mode .portal-desktop-guest-auth-trigger:hover .nav-avatar-hub-wrapper,
body.portal-guest-mode .portal-desktop-guest-auth-trigger:focus-visible .nav-avatar-hub-wrapper {
    filter: brightness(1.08) !important;
}

body.portal-guest-mode #portal-desktop-login-btn.portal-commander-identity-card:hover,
body.portal-guest-mode #portal-desktop-login-btn.portal-commander-identity-card:focus-visible,
body.portal-guest-mode .portal-desktop-guest-auth-trigger.portal-commander-identity-card:hover,
body.portal-guest-mode .portal-desktop-guest-auth-trigger.portal-commander-identity-card:focus-visible {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.portal-guest-mode .portal-desktop-guest-auth-card {
    width: auto !important;
}

body.portal-guest-mode #metrics-auth-action-btn.header-logout-btn,
body.portal-guest-mode #metrics-auth-action-btn.metrics-auth-action-btn {
    padding: 0 4px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    gap: 8px !important;
}

body.portal-guest-mode #metrics-auth-action-label.header-logout-label {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    white-space: nowrap !important;
    letter-spacing: 0.12em !important;
}

body.portal-guest-mode #metrics-auth-action-btn.header-logout-btn:hover,
body.portal-guest-mode #metrics-auth-action-btn.header-logout-btn:focus-visible {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.portal-guest-mode .portal-mobile-guest-auth-card,
body.portal-guest-mode .portal-mobile-guest-login-trigger.portal-mobile-guest-auth-card {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.portal-guest-mode .portal-mobile-guest-login-block {
    padding: 0 !important;
}

body.portal-guest-mode #portal-universal-game-time-panel {
    margin-bottom: 12px !important;
}

body.portal-guest-mode #portal-deployment-guest-cta {
    margin-top: 0 !important;
}

body.portal-guest-mode #portal-desktop-guest-auth-label,
body.portal-guest-mode #portal-mobile-guest-login-label,
body.portal-guest-mode #portal-mobile-nav-auth-label,
body.portal-guest-mode #metrics-auth-action-label,
body.portal-guest-mode .portal-desktop-guest-auth-trigger .nav-account-identity-stack strong {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap !important;
}

body.portal-guest-mode .portal-desktop-guest-auth-trigger .nav-account-identity-stack {
    overflow: visible !important;
    max-width: none !important;
}

body.portal-guest-mode .portal-desktop-guest-auth-trigger .nav-account-identity-cluster,
body.portal-guest-mode #portal-desktop-login-btn .nav-account-identity-cluster {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
}

.portal-desktop-guest-auth-card:not([hidden]) {
    display: block !important;
}

.portal-desktop-member-auth-cluster:not([hidden]) {
    display: flex !important;
}

.portal-mobile-guest-login-block {
    display: none !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.portal-mobile-guest-login-trigger {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

.portal-mobile-guest-login-icon {
    object-fit: contain !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    background: rgba(8, 6, 4, 0.55) !important;
    border-radius: 50% !important;
}

.nav-commander-membership-badge-row {
    padding-left: 0 !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

.nav-commander-membership-badge-row .membership-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.04em !important;
    padding: 2px 7px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    border: 1px solid rgba(184, 144, 48, 0.65) !important;
    background:
        linear-gradient(180deg, rgba(48, 38, 24, 0.98) 0%, rgba(16, 12, 8, 0.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

.nav-commander-owner-tag-slot {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: 2px !important;
}

.nav-commander-owner-tag-slot .commander-owner-tag {
    font-size: 0.58rem !important;
    padding: 2px 7px !important;
    line-height: 1.15 !important;
}

.commander-membership-badge-row {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.profile-identity-badge-row {
    flex-shrink: 0 !important;
}

.commander-owner-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #1a1408 !important;
    border: 1px solid #f1e0ac !important;
    background: linear-gradient(90deg, #c9a227 0%, #ffe9a8 100%) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25) !important;
    white-space: nowrap !important;
}

.commander-owner-tag-icon {
    font-size: 0.7rem !important;
    line-height: 1 !important;
}

.royalty-owner-exempt-banner,
.chronicle-owner-exempt-banner {
    margin-top: 16px !important;
    padding: 14px 16px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(201, 162, 39, 0.45) !important;
    background: linear-gradient(135deg, rgba(14, 11, 8, 0.96) 0%, rgba(6, 5, 4, 0.98) 100%) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65) !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #f1e0ac !important;
}

.royalty-owner-exempt-banner strong,
.chronicle-owner-exempt-banner strong {
    color: #ffd978 !important;
}

.status-owner-exempt-tag {
    color: #ffe9a8 !important;
    border-color: rgba(201, 162, 39, 0.55) !important;
}

/* 🎯 COLUMN 2 STRUCTURES: THE PERFECT DEAD CENTER TAB FLEX SECTOR WRAPPER */
.nav-tabs-centered-flex-dock {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
}

.portal-chat-nav-dock {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    row-gap: 6px !important;
    max-width: 100% !important;
}

.portal-chat-nav-dock .nav-tab {
    font-size: 0.78rem !important;
    letter-spacing: 0.8px !important;
    padding: 8px 12px !important;
}

.portal-brand-logo-static {
    cursor: default !important;
    pointer-events: none !important;
    user-select: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.portal-brand-logo-static .portal-brand-logo-asset {
    margin-bottom: 0 !important;
    pointer-events: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.portal-brand-header {
    position: relative !important;
    isolation: isolate !important;
    flex-shrink: 0 !important;
}

.portal-brand-logo-stack {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    contain: layout style !important;
    --portal-early-access-lift: 142px;
}

.portal-brand-logo-stack .portal-brand-logo-asset,
.portal-brand-logo-stack .portal-mobile-nav-brand-logo {
    position: relative !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
}

.portal-early-access-readout {
    position: absolute !important;
    left: 50% !important;
    top: calc(100% - var(--portal-early-access-lift, 142px)) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: rgba(255, 224, 148, 0.94) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92), 0 0 12px rgba(0, 0, 0, 0.85) !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.portal-alpha-version-readout {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(232, 197, 71, 0.88) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.portal-alpha-version-readout--mobile {
    margin-top: 2px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
}

#portal-alpha-version-capsule .portal-alpha-version-value {
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.06em !important;
    color: #e8c96a !important;
    text-shadow: 0 0 6px rgba(201, 162, 39, 0.25) !important;
}

/* Block 5: CHROMATIC HEADER TEXT TABS SCALE ENGINE */
.nav-tab {
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    color: rgba(241, 224, 172, 0.6) !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.25s ease !important;
    text-shadow: 2px 2px 4px #000 !important;
    border-bottom: 3px solid transparent !important;
    white-space: nowrap !important;
}
.nav-tab:hover,
.nav-tab.active {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
    border-bottom: 3px solid #b89030 !important;
}

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

body.portal-guest-mode .nav-tab[data-portal-view="chat"],
body.portal-guest-mode .nav-tab[data-portal-view="lore"],
body.portal-guest-mode .nav-tab[data-portal-view="royalty"],
body.portal-guest-mode .nav-tab[data-portal-view="chronicles"],
body.portal-guest-mode .portal-mobile-nav-page-item[data-portal-view="chat"],
body.portal-guest-mode .portal-mobile-nav-page-item[data-portal-view="lore"],
body.portal-guest-mode .portal-mobile-nav-page-item[data-portal-view="royalty"],
body.portal-guest-mode .portal-mobile-nav-page-item[data-portal-view="chronicles"] {
    display: none !important;
}

/* Desktop guest nav: keep tabs centered inside the bar shell */
@media (min-width: 1025px) {
    body.portal-guest-mode .main-portal-nav-bar {
        justify-content: center !important;
    }
}

.nav-tab.nav-tab-preview-locked,
.nav-tab.nav-tab-preview-locked:hover,
.nav-tab.nav-tab-preview-locked.active {
    color: rgba(241, 224, 172, 0.32) !important;
    text-shadow: none !important;
    border-bottom-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.72 !important;
    pointer-events: auto !important;
}

/* 🔒 COLUMN 3 STRUCTURES: THE RIGHT ALIGNED DISCONNECT COMMAND LEVER CONTAINER */
.nav-right-logout-action-dock {
    width: 250px !important; /* Balanced structural width matching your account label to force dead centering */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding-right: 15px !important; /* Synchronized padding offset from the right boundary */
}

.header-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 32px !important;
    transform: translateY(-3px) !important;
    padding: 5px 16px 5px 12px !important;
    background:
        linear-gradient(135deg, rgba(30, 26, 18, 0.92) 0%, rgba(17, 14, 10, 0.96) 100%),
        url('images/borderedcontainer_thin.png') center / 100% 100% no-repeat !important;
    border: 2px solid #b89030 !important;
    border-radius: 3px !important;
    color: #f1e0ac !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.85) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 1px 3px rgba(255, 215, 0, 0.12) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.header-logout-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    opacity: 0.92 !important;
    filter: sepia(0.35) saturate(1.4) hue-rotate(5deg) brightness(1.15)
        drop-shadow(0 0 4px rgba(255, 215, 0, 0.35)) !important;
}
.header-logout-label {
    line-height: 1 !important;
    white-space: nowrap !important;
    color: inherit !important;
}
.header-logout-btn:hover {
    color: #ffffff !important;
    border-color: #ffd700 !important;
    background:
        linear-gradient(135deg, rgba(43, 36, 23, 0.95) 0%, rgba(23, 19, 14, 0.98) 100%),
        url('images/borderedcontainer_thin.png') center / 100% 100% no-repeat !important;
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.45), inset 0 1px 4px rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-4px) !important;
}
.header-logout-btn:hover .header-logout-icon {
    filter: sepia(0.2) saturate(1.6) hue-rotate(5deg) brightness(1.25)
        drop-shadow(0 0 6px rgba(255, 215, 0, 0.55)) !important;
}
.header-logout-btn:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65) !important;
}
.header-logout-btn:focus-visible {
    outline: 2px solid #ffd700 !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   SECTION 3: UTILITY BAR METRICS & STATISTICS CORES (EXPANDED SCREEN SIZE)
   ========================================================================== */

/* Block 6: DENSE AGE METRICS STRIP TRAY OVERSIZE HARDWARE */
.portal-age-metrics-dashboard-bar {
    width: 100% !important;
    
    /* 🌟 THE ALPHA DESTRUCTION ENGINE: BYPASSES SEMI-TRANSPARENT GRAPHICS PIPELINES */
    /* 1. We remove ALL 'background' and 'background-image' properties so the image cannot fight color layers */
    background: #15181f !important;            /* 🔥 Holds a 100% solid, flat opaque foundation canvas to block scenery */
    
    /* 2. We inject your image file path directly as an absolute border mask instead */
    border: 12px solid transparent !important; /* Opens tracking clearance room for your asset file outlines */
    border-image-source: url('images/navbar.png') !important; /* ⚙️ Change navbar.png to your exact file name if different */
    border-image-slice: 24 fill !important;     /* 🌟 THE EMBEDDED FILL ENGINE: Forces the file graphics to stamp down with 100% solid density */
    border-image-repeat: stretch !important;
    
    opacity: 1.0 !important;                   /* Hard-locks the absolute layout presentation density to 100% solid */
    box-shadow: 0 8px 25px rgba(0,0,0,0.95) !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 100 !important;
    
    /* HORIZONTAL METRICS DISPATCH FLEX ARRANGEMENTS GRID */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

/* HARDWARE CAPSULE GRID DESIGN PARAMETERS */
.metric-capsule-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-width: max-content !important;
    position: relative !important;
}

.metric-capsule-cell.metric-capsule-divider {
    border-left: 1px dashed rgba(184, 144, 48, 0.22) !important;
    padding-left: 14px !important;
}

.metric-capsule-auth-build-column {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    min-width: 0 !important;
}

.metric-auth-build-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.metric-auth-build-readout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.metrics-auth-action-btn {
    transform: none !important;
    min-height: 30px !important;
    padding: 4px 14px 4px 10px !important;
    font-size: 0.72rem !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.metric-auth-build-stack {
    pointer-events: auto !important;
}

.metric-capsule-auth-build-column {
    pointer-events: auto !important;
}

.metrics-auth-action-btn:hover {
    transform: translateY(-1px) !important;
}

.metrics-auth-action-btn:active {
    transform: translateY(0) !important;
}

.metrics-auth-action-btn[hidden] {
    display: none !important;
}

@media (max-width: 1024px) {
    .metrics-auth-action-btn {
        display: none !important;
    }

    .metric-capsule-auth-build-column .metric-auth-build-stack {
        gap: 0 !important;
    }
}

@media (min-width: 1025px) {
    .portal-desktop-nav-stack.portal-desktop-nav-only {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .portal-desktop-nav-stack {
        order: 0 !important;
        flex: 0 0 auto !important;
    }

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

    .main-portal-nav-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        overflow: visible !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;
    }

    .main-portal-nav-bar .nav-tabs-centered-flex-dock.portal-desktop-nav-only {
        display: flex !important;
        flex: 1 1 auto !important;
        align-self: center !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
    }

    body.portal-guest-mode .main-portal-nav-bar {
        justify-content: center !important;
    }

    body.portal-guest-mode .nav-tabs-centered-flex-dock {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    .portal-age-metrics-dashboard-bar {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

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

    #main-dashboard-canvas > .main-portal-legal-footer {
        order: 3 !important;
        flex: 0 0 auto !important;
    }
}

body.portal-guest-mode #portal-mobile-nav-auth-btn {
    display: none !important;
}

#portal-metrics-auth-build-column .metrics-auth-action-btn,
#metrics-auth-action-btn {
    display: none !important;
}

.metric-capsule-auth-build-column:has(.metrics-auth-action-btn[hidden]) {
    justify-content: center !important;
}

.metric-capsule-auth-build-column:has(.metrics-auth-action-btn[hidden]) .metric-auth-build-stack {
    gap: 0 !important;
}

.metric-roster-hover-cell {
    z-index: 2 !important;
}

.metric-roster-hover-trigger {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
    cursor: help !important;
    text-align: left !important;
    text-decoration: underline dotted rgba(184, 144, 48, 0.35) !important;
    text-underline-offset: 3px !important;
}

.metric-roster-hover-trigger:hover,
.metric-roster-hover-cell.is-roster-open .metric-roster-hover-trigger {
    color: #f1e0ac !important;
    text-decoration-color: rgba(255, 215, 0, 0.55) !important;
}

.metric-roster-popover {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 240px !important;
    max-width: 320px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    padding: 10px 12px !important;
    background: rgba(10, 8, 6, 0.97) !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.85) !important;
    z-index: 120 !important;
    pointer-events: none !important;
}

.metric-roster-hover-cell.is-roster-open {
    z-index: 130 !important;
}

.metric-roster-popover-title {
    margin: 0 0 8px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    color: #c5a059 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
}

.metric-roster-popover-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.metric-roster-popover-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.12) !important;
}

.metric-roster-popover-item:last-child {
    border-bottom: none !important;
}

.metric-roster-name {
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.8rem !important;
    color: #ffd700 !important;
}

.metric-roster-meta {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    color: rgba(241, 224, 172, 0.55) !important;
}

.metric-roster-popover-empty {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    color: rgba(241, 224, 172, 0.6) !important;
    font-style: italic !important;
    padding: 4px 0 !important;
}

.metric-glyph-icon {
    font-size: 1.1rem !important;
    color: #b89030 !important;
    text-shadow: 0 0 8px rgba(184,144,48,0.4) !important;
}

.metric-text-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.metric-label-title {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    color: rgba(241, 224, 172, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.metric-label-short {
    display: none !important;
}

.metric-label-full {
    display: inline !important;
}

.metric-live-data-value {
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.88rem !important;
    font-weight: bold !important;
    color: #ffd700 !important;
    text-shadow: 0 0 4px rgba(255,215,0,0.3) !important;
    margin-top: 1px !important;
}

/* TEXT COLOR OVERRIDES FOR SPECIAL CODES STATS INDICATORS */
#metrics-transition-countdown-display {
    color: #f1e0ac !important; /* Softer balance indicator splits countdown from general integer counts */
}


/* ==========================================================================
   SECTION 4: CORE MAIN TILES GRID COMPARTMENTS (WIDESCREEN RESPONSIVE SCALING)
   ========================================================================== */

/* Block 7: WINDOW VIEWER CANVAS PANEL FULL HEIGHT */
.dynamic-portal-view-container {
    width: 100% !important;
    flex: 1 !important; /* Dynamically consumes all remaining open vertical room on screen */
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-height: 0 !important; /* Critical layout parameter preventing card overflows */
}

.age-portal-view-canvas {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
}

/* Age Portal home: intro natural height; right column matches intro bottom with scrollable log */
#panel-age-portal-mode.age-portal-view-canvas {
    height: auto !important;
    flex: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) min(420px, 100%) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 24px !important;
}

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

#panel-age-portal-mode .portal-age-intro-card,
#panel-age-portal-mode .portal-age-intro-card.dashboard-news-card-box {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    align-self: start !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-height: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack > .portal-deployment-control-deck {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    align-self: start !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack .portal-sidebar-flex-column {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 420px !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: auto !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack .portal-developers-log-card,
#panel-age-portal-mode .portal-age-portal-right-stack .portal-sidebar-flex-column .dashboard-news-card-box {
    width: 100% !important;
    max-width: 420px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 16px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65) !important;
    overflow: hidden !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack #dashboard-patch-notes-dock,
#panel-age-portal-mode .portal-age-portal-right-stack .portal-developers-log-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #9a7a32 rgba(10, 8, 6, 0.88) !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack .portal-sidebar-flex-column .card-scrollable-body-text {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

#panel-age-portal-mode #dashboard-patch-notes-dock::-webkit-scrollbar,
#panel-age-portal-mode .portal-developers-log-scroll::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

#panel-age-portal-mode #dashboard-patch-notes-dock::-webkit-scrollbar-track,
#panel-age-portal-mode .portal-developers-log-scroll::-webkit-scrollbar-track {
    background: rgba(10, 8, 6, 0.88) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.12) !important;
}

#panel-age-portal-mode #dashboard-patch-notes-dock::-webkit-scrollbar-thumb,
#panel-age-portal-mode .portal-developers-log-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c5a059 0%, #7a5f24 100%) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 215, 0, 0.22) !important;
}

#panel-age-portal-mode #dashboard-patch-notes-dock::-webkit-scrollbar-thumb:hover,
#panel-age-portal-mode .portal-developers-log-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffd700 0%, #9a7a32 100%) !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack > .portal-deployment-control-deck .deployment-action-button-row {
    flex-direction: column !important;
    gap: 14px !important;
}

#panel-age-portal-mode .portal-age-portal-right-stack > .portal-deployment-control-deck .action-btn-aura-housing {
    width: min(260px, 100%) !important;
}

/* Legacy grid selectors (pre-mount DOM); harmless when layout is mounted */
#panel-age-portal-mode > .portal-deployment-control-deck {
    display: none !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-twin-split-deck-row .portal-age-intro-card {
    grid-area: intro !important;
}

#panel-age-portal-mode .portal-sidebar-flex-column {
    grid-area: updates !important;
}

#panel-age-portal-mode .portal-sidebar-flex-column .portal-deployment-control-deck {
    display: none !important;
}

#panel-age-portal-mode .portal-twin-split-deck-row {
    flex: none !important;
}

/* Block 8: RE-BALANCED CARD SLOTS ROW */
.portal-twin-split-deck-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* 🌟 Pushes the sidebar to the right edge */
    align-items: flex-start !important;         /* Each column grows to fit its own content */
    gap: 24px !important;
    width: 100% !important;                     /* 🌟 Forces the grid row to utilize full layout widths */
    flex: 1 !important;
    min-height: 0 !important;
}

/* Block 9: GEOMETRIC MATTE-ONYX INFORMATION DECK TILES */
.dashboard-news-card-box {
    flex: none !important;              /* Disables auto-flex scaling to allow manual width handling */
    width: 1220px !important;           /* 🌟 INCREASE OR DECREASE THIS PIXEL VALUE MANUALLY TO FIT YOUR VIEWPORT */
    background: linear-gradient(135deg, rgba(14, 11, 8, 0.94) 0%, rgba(8, 6, 4, 0.97) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.3) !important;
    border-radius: 4px !important;
    padding: 24px !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.7) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: 100% !important;
}

.card-title-header {
    font-family: 'Cinzel', serif !important;
    font-size: 1.2rem !important; /* Expanded title headers */
    color: #ffd700 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    text-align: left !important;
    border-bottom: 2px solid rgba(184, 144, 48, 0.2) !important;
    padding-bottom: 8px !important;
    flex-shrink: 0 !important;
}

/* Block 10: SIDEBAR COMPONENT HEIGHT RESTRICTIONS */
/* FIXED RE-BALANCED SIDEBAR CONTAINER WRAPPER CHASSIS LINK */
.portal-sidebar-flex-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: min(420px, 100%) !important;
    height: auto !important;
    flex-shrink: 0 !important;
    position: static !important;
    right: auto !important;
    margin: 0 !important;
}

.portal-sidebar-flex-column .dashboard-news-card-box {
    height: auto !important;
    flex: none !important;
}

.portal-sidebar-flex-column .card-scrollable-body-text {
    overflow: visible !important;
    flex: none !important;
    height: auto !important;
}

.portal-sidebar-flex-column .news-bulletin-item {
    margin-bottom: 1em !important;
}

.portal-sidebar-flex-column .news-bulletin-item:last-child {
    margin-bottom: 0 !important;
}

.portal-sidebar-flex-column .news-bulletin-section-label {
    display: block !important;
    font-weight: 600 !important;
    color: #c5a059 !important;
    margin-bottom: 0.35em !important;
}

.portal-sidebar-flex-column .news-bulletin-bullet {
    display: block !important;
    padding-left: 1em !important;
    text-indent: -1em !important;
    margin-top: 0.35em !important;
}

/* Block 10b: Guest JOIN NOW deployment CTA (shape-following green glow) */
.portal-deployment-guest-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 8px 0 12px 0 !important;
}

.portal-join-now-aura-housing {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.portal-join-now-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    line-height: 0 !important;
    overflow: visible !important;
}

.portal-join-now-artwork {
    display: block !important;
    width: min(72vw, 300px) !important;
    height: auto !important;
    max-width: 100% !important;
    pointer-events: none !important;
    animation: portalJoinNowGreenGlow 2.6s ease-in-out infinite !important;
}

@keyframes portalJoinNowGreenGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 6px rgba(72, 220, 120, 0.55))
            drop-shadow(0 0 14px rgba(48, 180, 90, 0.4))
            drop-shadow(0 0 22px rgba(32, 140, 70, 0.25));
    }
    50% {
        filter:
            drop-shadow(0 0 10px rgba(100, 255, 160, 0.9))
            drop-shadow(0 0 22px rgba(60, 210, 110, 0.65))
            drop-shadow(0 0 36px rgba(40, 170, 85, 0.45))
            drop-shadow(0 0 48px rgba(24, 130, 60, 0.3));
    }
}

.portal-join-now-trigger-btn:hover .portal-join-now-artwork,
.portal-join-now-trigger-btn:focus-visible .portal-join-now-artwork {
    animation-duration: 1.8s !important;
}

body.portal-guest-mode #portal-deployment-member-block {
    display: none !important;
}

body:not(.portal-guest-mode) #portal-deployment-guest-cta {
    display: none !important;
}

/* Block 11: THE AUTOMATIC DEPLOYMENT HORIZONTAL CENTERING DECK */
.portal-age-countdown-panel,
.portal-deployment-server-panel {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.portal-universal-game-time-panel {
    --portal-game-time-frame: url('images/countdowntimermodal.png');
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    isolation: isolate !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 420px !important;
    aspect-ratio: 688 / 258 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(
            168deg,
            rgba(108, 78, 38, 0.5) 0%,
            rgba(24, 18, 11, 0.82) 46%,
            rgba(54, 40, 22, 0.58) 100%
        ),
        var(--portal-game-time-frame) !important;
    background-blend-mode: soft-light, normal !important;
    background-size: contain, contain !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    -webkit-mask-image: var(--portal-game-time-frame) !important;
    mask-image: var(--portal-game-time-frame) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-mode: alpha !important;
    mask-mode: alpha !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 16px rgba(184, 144, 48, 0.14)) !important;
}

.portal-universal-game-time-panel[hidden] {
    display: none !important;
}

.portal-universal-game-time-display {
    display: inline-grid !important;
    grid-template-columns:
        0.78em 0.78em 0.3em 0.94em 0.94em 0.3em 0.78em 0.78em !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 0.01em !important;
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    max-width: 56% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: translateY(-5%) !important;
    transform-origin: center center !important;
    border: none !important;
    box-shadow: none !important;
    --portal-game-time-gold-fill: linear-gradient(
        180deg,
        #ffe566 0%,
        #ffd600 42%,
        #ffc400 74%,
        #f9a825 100%
    );
    font-family: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif !important;
    font-size: clamp(1.5rem, 6.4vw, 2.65rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #ffd600 !important;
    background: var(--portal-game-time-gold-fill) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    filter:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9))
        drop-shadow(0 1px 0 rgba(255, 230, 120, 0.42))
        drop-shadow(0 0 14px rgba(255, 214, 0, 0.45)) !important;
}

.portal-game-time-char {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    line-height: 1 !important;
    transform-origin: center center !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: 'tnum' 1 !important;
    color: #ffd600 !important;
    background: var(--portal-game-time-gold-fill, linear-gradient(
        180deg,
        #ffe566 0%,
        #ffd600 42%,
        #ffc400 74%,
        #f9a825 100%
    )) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 1 !important;
}

/* Left / right wings — thinner band of the modal frame */
.portal-game-time-char--wing-outer {
    font-size: 0.58em !important;
    transform: translateY(0.06em) !important;
    opacity: 1 !important;
}

.portal-game-time-char--wing-inner {
    font-size: 0.74em !important;
    transform: translateY(0.03em) !important;
    opacity: 1 !important;
}

/* Colons sit in the thinner side channels */
.portal-game-time-char--sep {
    font-size: 0.5em !important;
    transform: translateY(0.05em) !important;
    opacity: 1 !important;
    padding: 0 0.04em !important;
}

/* Center crest — tallest readout over the modal's raised middle */
.portal-game-time-char--center {
    font-size: 1em !important;
    transform: translateY(-0.02em) !important;
    opacity: 1 !important;
}

.portal-age-countdown-panel[hidden] {
    display: none !important;
}

.portal-join-age-btn {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(197, 160, 89, 0.42) !important;
    border-radius: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

.portal-join-age-btn--primary {
    color: #ffe8c8 !important;
    background:
        linear-gradient(180deg, rgba(120, 28, 28, 0.95) 0%, rgba(48, 8, 8, 0.98) 100%) !important;
    border-color: rgba(220, 90, 70, 0.55) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 120, 90, 0.35) !important;
}

.portal-join-age-btn--tutorial {
    color: #d8ecff !important;
    background:
        linear-gradient(180deg, rgba(28, 52, 96, 0.95) 0%, rgba(8, 16, 36, 0.98) 100%) !important;
    border-color: rgba(90, 150, 220, 0.55) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(100, 170, 255, 0.35) !important;
}

.portal-join-age-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;
}

.portal-join-age-btn:active {
    transform: translateY(0) !important;
}

.portal-age-countdown-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, rgba(36, 41, 54, 0.95) 0%, rgba(10, 12, 16, 0.98) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.45) !important;
}

.portal-deployment-server-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    position: relative !important;
}

.portal-server-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 2px !important;
}

.portal-server-panel-heading {
    margin: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: #ffd700 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 215, 0, 0.28) !important;
}

.portal-server-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 10px 5px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(120, 200, 140, 0.45) !important;
    background: linear-gradient(180deg, rgba(28, 58, 38, 0.92) 0%, rgba(12, 24, 18, 0.96) 100%) !important;
    box-shadow: 0 0 12px rgba(72, 180, 110, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(168, 230, 188, 0.95) !important;
    white-space: nowrap !important;
}

.portal-server-status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #6fe89a !important;
    box-shadow: 0 0 8px rgba(111, 232, 154, 0.95), 0 0 16px rgba(72, 200, 120, 0.55) !important;
    animation: portal-server-status-pulse 2.2s ease-in-out infinite !important;
}

@keyframes portal-server-status-pulse {
    0%, 100% {
        opacity: 0.72;
        transform: scale(0.92);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* FLEX — canonical panel/modal surface (onboarding progression bar uses this class). */
.portal-server-panel-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 18px 18px 16px !important;
    border: 1px solid rgba(197, 160, 89, 0.42) !important;
    border-radius: 6px !important;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.07) 0%, transparent 22%),
        linear-gradient(145deg, rgba(28, 22, 14, 0.96) 0%, rgba(8, 6, 4, 0.98) 55%, rgba(18, 14, 10, 0.94) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.12),
        inset 0 -16px 28px rgba(0, 0, 0, 0.35),
        0 10px 26px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(255, 190, 60, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Game onboarding / region / class panels — same surface, slightly tighter padding */
.game-page-panel-bezel.portal-server-panel-controls {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 14px 14px 12px !important;
    gap: 14px !important;
}

.portal-server-panel-controls::before,
.portal-server-panel-controls::after {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    border-color: rgba(255, 215, 0, 0.35) !important;
    border-style: solid !important;
    pointer-events: none !important;
}

.portal-server-panel-controls::before {
    top: 8px !important;
    left: 8px !important;
    border-width: 1px 0 0 1px !important;
}

.portal-server-panel-controls::after {
    bottom: 8px !important;
    right: 8px !important;
    border-width: 0 1px 1px 0 !important;
}

.portal-server-panel-label {
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(241, 224, 172, 0.82) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.portal-server-select-shell {
    position: relative !important;
}

.portal-server-select-shell::after {
    content: '\25BE' !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-52%) !important;
    pointer-events: none !important;
    font-size: 0.9rem !important;
    color: rgba(255, 215, 0, 0.75) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.35) !important;
}

.portal-active-server-select {
    width: 100% !important;
    padding: 12px 38px 12px 14px !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(180deg, rgba(42, 34, 22, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%) !important;
    color: #fff3d4 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 215, 0, 0.06) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.portal-active-server-select:hover {
    border-color: rgba(255, 215, 0, 0.62) !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 14px rgba(255, 200, 80, 0.16) !important;
}

.portal-active-server-select:focus {
    outline: none !important;
    border-color: rgba(255, 215, 0, 0.85) !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 2px rgba(255, 215, 0, 0.2),
        0 0 18px rgba(255, 200, 80, 0.22) !important;
}

.portal-active-server-select option {
    background: #1a1410 !important;
    color: #f1e0ac !important;
}

.portal-rejoin-age-btn:not(.confirm-btn) {
    width: 100% !important;
    margin-top: 4px !important;
    padding: 12px 16px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(255, 190, 60, 0.18) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.portal-rejoin-age-btn:not(.confirm-btn):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(255, 200, 80, 0.28) !important;
}

.portal-rejoin-age-btn:not(.confirm-btn):active {
    transform: translateY(0) !important;
}

/* FLEX — canonical framed action button (confirm, cancel, revert, undo — site-wide) */
:root {
    --ra-confirm-accent-glow: rgba(255, 215, 0, 0.42);
    --ra-action-btn-fill:
        linear-gradient(180deg, rgba(255, 215, 0, 0.16) 0%, rgba(255, 215, 0, 0.04) 38%, transparent 52%),
        linear-gradient(168deg, rgba(34, 26, 16, 0.98) 0%, rgba(8, 6, 4, 0.98) 54%, rgba(20, 15, 10, 0.97) 100%);
    --ra-action-btn-fill-hover:
        linear-gradient(180deg, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.06) 40%, transparent 54%),
        linear-gradient(168deg, rgba(40, 30, 18, 0.98) 0%, rgba(10, 8, 5, 0.98) 54%, rgba(24, 18, 12, 0.97) 100%);
}

.confirm-btn-dock {
    width: 100%;
    max-width: 100%;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.52));
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 22px;
    border: 1px solid rgba(197, 160, 89, 0.58);
    border-radius: 6px;
    background: var(--ra-action-btn-fill);
    background-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 180, 0.2),
        inset 0 -3px 12px rgba(0, 0, 0, 0.48),
        0 0 24px color-mix(in srgb, var(--ra-confirm-accent-glow) 55%, transparent);
    color: #fff2c8;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.78rem, 1.2vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow:
        0 0 14px var(--ra-confirm-accent-glow),
        0 2px 8px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    outline: none;
    overflow: hidden;
    isolation: isolate;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    transition:
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        transform 0.22s ease,
        filter 0.24s ease,
        opacity 0.2s ease;
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn)::before,
:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn)::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.24s ease, box-shadow 0.24s ease;
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn)::before {
    top: 5px;
    left: 5px;
    border-top: 1px solid rgba(255, 215, 0, 0.72);
    border-left: 1px solid rgba(255, 215, 0, 0.72);
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn)::after {
    right: 5px;
    bottom: 5px;
    border-right: 1px solid rgba(255, 215, 0, 0.72);
    border-bottom: 1px solid rgba(255, 215, 0, 0.72);
}

.confirm-btn-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent 36%,
        rgba(255, 248, 220, 0.16) 50%,
        transparent 64%
    );
    transform: translateX(-130%);
    transition: transform 0.65s ease;
    pointer-events: none;
    z-index: 0;
}

.confirm-btn-label {
    position: relative;
    z-index: 1;
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: rgba(255, 215, 0, 0.88);
    background: var(--ra-action-btn-fill-hover);
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 210, 0.28),
        inset 0 -3px 12px rgba(0, 0, 0, 0.42),
        0 0 32px var(--ra-confirm-accent-glow),
        0 8px 20px rgba(0, 0, 0, 0.38);
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):hover:not(:disabled):not([aria-disabled="true"]) .confirm-btn-shine {
    transform: translateX(130%);
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):hover:not(:disabled):not([aria-disabled="true"])::before,
:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):hover:not(:disabled):not([aria-disabled="true"])::after {
    opacity: 1;
    box-shadow: 0 0 10px var(--ra-confirm-accent-glow);
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow:
        inset 0 2px 10px rgba(0, 0, 0, 0.55),
        0 0 16px color-mix(in srgb, var(--ra-confirm-accent-glow) 40%, transparent);
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.82);
    outline-offset: 3px;
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):disabled,
:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn)[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.15);
    transform: none;
}

:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):disabled:hover,
:is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn)[aria-disabled="true"]:hover {
    transform: none;
    filter: grayscale(0.15);
}

.portal-rejoin-age-btn.confirm-btn {
    width: 100% !important;
    margin-top: 4px !important;
    background: var(--ra-action-btn-fill) !important;
    border-radius: 6px !important;
}

.commander-hub-settings-action-deck .confirm-btn,
.commander-hub-settings-action-deck .revert-btn,
.commander-hub-profile-footer-host .confirm-btn,
.commander-hub-profile-footer-host .revert-btn,
.commander-hub-profile-footer-host .settings-controls .confirm-btn,
.commander-hub-profile-footer-host .settings-controls .revert-btn {
    width: auto !important;
    min-width: 132px !important;
    max-width: none !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    flex: 0 0 auto !important;
}

.commander-hub-settings-action-deck .confirm-btn::before,
.commander-hub-settings-action-deck .revert-btn::before,
.commander-hub-profile-footer-host .confirm-btn::before,
.commander-hub-profile-footer-host .revert-btn::before {
    top: 4px !important;
    left: 4px !important;
    width: 8px !important;
    height: 8px !important;
}

.commander-hub-settings-action-deck .confirm-btn::after,
.commander-hub-settings-action-deck .revert-btn::after,
.commander-hub-profile-footer-host .confirm-btn::after,
.commander-hub-profile-footer-host .revert-btn::after {
    right: 4px !important;
    bottom: 4px !important;
    width: 8px !important;
    height: 8px !important;
}

:is(.confirm-btn, .cancel-btn, .revert-btn).game-onboarding-continue-btn,
:is(.confirm-btn, .cancel-btn, .revert-btn).game-session-back-btn,
:is(.confirm-btn, .cancel-btn, .revert-btn).game-tutorial-complete-btn {
    width: min(320px, 88vw) !important;
    max-width: min(320px, 88vw) !important;
    min-height: 40px !important;
    flex: 0 0 auto;
}

:is(.confirm-btn, .cancel-btn, .revert-btn).game-page-return-btn {
    background: var(--ra-action-btn-fill) !important;
    border-radius: 6px !important;
    font-size: 0.88rem !important;
}

:is(.confirm-btn, .cancel-btn).game-location-panel-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 8px 12px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

.cancel-btn.age-hq-planning-clear-btn {
    padding: calc(6px * var(--age-hq-planning-scale, 1)) calc(7px * var(--age-hq-planning-scale, 1));
    font-size: calc(0.54rem * var(--age-hq-panel-text-scale, 0.82));
    letter-spacing: 0.08em;
    min-height: calc(26px * var(--age-hq-planning-scale, 1));
}

.confirm-btn.age-hq-planning-confirm-btn {
    padding: calc(6px * var(--age-hq-planning-scale, 1)) calc(7px * var(--age-hq-planning-scale, 1));
    font-size: calc(0.54rem * var(--age-hq-panel-text-scale, 0.82));
    letter-spacing: 0.08em;
    min-height: calc(26px * var(--age-hq-planning-scale, 1));
}

.confirm-btn.age-hq-planning-confirm-btn.is-edit-mode {
    --ra-confirm-accent-glow: rgba(168, 214, 255, 0.45);
    border-color: rgba(168, 214, 255, 0.55);
    color: #d8ecff;
}

.game-class-showcase .confirm-btn {
    --ra-confirm-accent-glow: var(--game-class-showcase-accent-glow);
}

.game-class-showcase.is-swapping .confirm-btn {
    transition:
        border-color calc(var(--game-class-swap-ms, 900) * 1ms) ease,
        box-shadow calc(var(--game-class-swap-ms, 900) * 1ms) ease,
        transform 0.22s ease,
        filter 0.24s ease;
}

@media (prefers-reduced-motion: reduce) {
    .confirm-btn-shine {
        display: none;
    }

    :is(.confirm-btn, .revert-btn, .cancel-btn, .modal-action-btn.confirm, .modal-action-btn.cancel, .chat-compose-context-cancel, .age-hq-planning-clear-btn, .game-location-back-region-btn, .suicide-safe-retreat-btn):hover:not(:disabled):not([aria-disabled="true"]) {
        transform: none;
    }
}

.portal-age-countdown-panel #dynamic-age-sub-timer-display {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    font-family: 'Share Tech Mono', 'Consolas', monospace !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
    color: #e2ba3b !important;
    text-shadow: 0 0 10px rgba(226, 186, 59, 0.45), 1px 1px 2px rgba(0, 0, 0, 0.85) !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

.portal-age-countdown-panel #dynamic-age-sub-timer-display.timer-readout-active {
    color: #d4c4a0 !important;
}

.portal-age-countdown-panel #dynamic-age-sub-timer-display.timer-readout-alert,
.portal-age-countdown-panel #dynamic-age-sub-timer-display[style*="color: rgb(255, 85, 85)"],
.portal-age-countdown-panel #dynamic-age-sub-timer-display[style*="color: #ff5555"] {
    color: #ff6666 !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    text-shadow: 0 0 12px rgba(255, 80, 80, 0.55), 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.portal-deployment-control-deck {
    width: 100% !important;
    background: linear-gradient(135deg, rgba(14, 11, 8, 0.94) 0%, rgba(6, 5, 4, 0.97) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    border-radius: 6px !important;
    padding: 24px 20px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important; 
    margin-bottom: 24px !important;            /* Lower card layout downward push barrier handle */
    height: max-content !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

.deployment-deck-title {
    font-family: 'RoyalDetails', serif !important;
    font-size: 1rem !important;
    color: #ffd700 !important;
    letter-spacing: 2px !important;
    margin: 0 0 16px 0 !important;             /* Splits header title away from buttons */
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow: 2px 2px 4px #000, 0 0 10px rgba(255, 215, 0, 0.4) !important; 
}

/* Block 12: EXPANDED GIANT HORIZONTAL ACTION BUTTON FIELDS */
.deployment-action-button-row {
    display: flex !important;
    flex-direction: row !important;            /* Forces buttons side-by-side horizontally */
    justify-content: center !important;        /* Dead-centers row automatically across any device viewport */
    align-items: center !important;
    gap: 40px !important;                       /* Spacing track pushes buttons 40px apart from each other */
    width: 100% !important;
    box-sizing: border-box !important;
}

#portal-deployment-member-actions[hidden],
.portal-deployment-member-actions[hidden],
#portal-deployment-server-panel[hidden],
.portal-deployment-server-panel[hidden],
#portal-deployment-guest-cta[hidden],
.portal-deployment-guest-cta[hidden] {
    display: none !important;
}

/* Block 13: SILHOUETTE SHAPE SHIELD DECK CONTROLLERS */
.action-btn-aura-housing {
    position: relative !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;       
    box-shadow: none !important;
    width: 260px !important;                   /* Structural footprint scale limits */
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
}

.deployment-image-trigger-btn {
    background: transparent !important;        
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

/* BUTTONS IMAGE LAYER PROPERTIES SETUP */
.deployment-image-trigger-btn img {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
    
    /* 🌟 THE TRANSPARENCY FIX FOR BUTTONS: */
    /* Removing mix-blend-mode and applying full opacity handles non-transparent rendering profiles natively */
    background: transparent !important;       
    mix-blend-mode: normal !important;        /* Changed from screen to normal to completely eliminate button transparency */
    opacity: 1.0 !important;                  /* Forces full solid pixel color layout presentation down onto the fields */
}

/* Block 14: deployment countdown — panel chrome lives on .portal-age-countdown-panel */

/* ==========================================================================
   SECTION 6: SILHOUETTE GLOW TIMELINES & FILTER EFFECTS
   ========================================================================== */

/* 🔴 CHRONICLE DEPLOYMENT: AMBIENT STATE LOOP CONTROLLERS */
.aura-glow-red {
    animation: permanentCrimsonIdlePulse 4s infinite ease-in-out !important;
    /* 🌟 THE WIND-UP GAP: Controls the smooth 5-second mechanical expansion rate */
    transition: transform 5.0s cubic-bezier(0.1, 0.8, 0.2, 1), filter 5.0s ease-in-out !important; 
}

/* 🔵 INTRODUCTORY TUTORIAL: AMBIENT STATE LOOP CONTROLLERS */
.aura-glow-blue {
    animation: permanentAzureIdlePulse 4s infinite ease-in-out !important;
    transition: transform 5.0s cubic-bezier(0.1, 0.8, 0.2, 1), filter 5.0s ease-in-out !important;
}

/* ==========================================================================
   SECTION 6: SILHOUETTE GLOW TIMELINES & FILTER EFFECTS
   ========================================================================== */

/* 🔴 CHRONICLE DEPLOYMENT: AMBIENT STATE LOOP CONTROLLERS */
.aura-glow-red {
    animation: permanentCrimsonIdlePulse 4s infinite ease-in-out !important;
    /* 🌟 THE WIND-UP GAP: Natively handles the slow 5-second expansion footprint */
    transition: transform 5.0s cubic-bezier(0.1, 0.8, 0.2, 1), filter 5.0s ease-in-out !important; 
    position: relative !important;
}

/* 🔵 INTRODUCTORY TUTORIAL: AMBIENT STATE LOOP CONTROLLERS */
.aura-glow-blue {
    animation: permanentAzureIdlePulse 4s infinite ease-in-out !important;
    transition: transform 5.0s cubic-bezier(0.1, 0.8, 0.2, 1), filter 5.0s ease-in-out !important;
    position: relative !important;
}

/* 🌟 STATE 1: PHYSICAL SCALE GROWTH STEP (CSS HANDLES SCALING ONLY - NO KEYFRAME INTERFERENCE) */
.aura-glow-red.is-building-up,
.aura-glow-blue.is-building-up {
    transform: scale(1.15) !important; 
}

/* 🌟 STATE 2: AMPLIFIED EMISSIONS DECK UPON INTENSE BUILD-UP */
.aura-glow-red.shake-level-3 {
    filter: drop-shadow(0 0 25px rgba(255, 0, 0, 1.0))
            drop-shadow(0 0 55px rgba(255, 30, 30, 0.95)) !important;
}
.aura-glow-blue.shake-level-3 {
    filter: drop-shadow(0 0 25px rgba(0, 153, 255, 1.0))
            drop-shadow(0 0 55px rgba(51, 153, 255, 0.95)) !important;
}

/* Join Age click confirm: stillness, brief growth, then gentle settle */
.action-btn-aura-housing.deploy-confirm-pulse {
    animation: none !important;
}

.action-btn-aura-housing.deploy-confirm-pulse.phase-grow {
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.2s ease,
                top 0.2s ease,
                filter 0.35s ease !important;
    left: 0 !important;
    top: 0 !important;
    transform: scale(1.2) rotate(0deg) !important;
}

.action-btn-aura-housing.deploy-confirm-pulse.phase-settle {
    transition: transform 0.72s cubic-bezier(0.45, 0, 0.55, 1),
                filter 0.45s ease !important;
    transform: scale(1) rotate(0deg) !important;
}

/* AMBIENT BACKGROUND IDLE CORES MAINTAINED NATIVELY */
@keyframes permanentCrimsonIdlePulse {
    0% { filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.4)) drop-shadow(0 0 12px rgba(180, 0, 0, 0.2)) !important; }
    50% { filter: drop-shadow(0 0 22px rgba(255, 20, 20, 0.9)) drop-shadow(0 0 48px rgba(255, 0, 0, 0.7)) drop-shadow(0 0 68px rgba(180, 0, 0, 0.35)) !important; }
    100% { filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.4)) drop-shadow(0 0 12px rgba(180, 0, 0, 0.2)) !important; }
}
@keyframes permanentAzureIdlePulse {
    0% { filter: drop-shadow(0 0 5px rgba(0, 153, 255, 0.4)) drop-shadow(0 0 12px rgba(0, 80, 180, 0.2)) !important; }
    50% { filter: drop-shadow(0 0 22px rgba(40, 140, 255, 0.9)) drop-shadow(0 0 48px rgba(0, 130, 255, 0.7)) drop-shadow(0 0 68px rgba(0, 80, 180, 0.35)) !important; }
    100% { filter: drop-shadow(0 0 5px rgba(0, 153, 255, 0.4)) drop-shadow(0 0 12px rgba(0, 80, 180, 0.2)) !important; }
}

/* ==========================================================================
   SECTION 7: COMMUNITY UTILITIES FOOTER DECK
   ========================================================================== */

/* Block 15: SOCIAL SHORTCUT LINK TRAY BAR */
.portal-staging-footer-bar {
    width: 100% !important;
    border-top: 1px solid rgba(184, 144, 48, 0.28) !important;
    padding: 18px 16px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, rgba(10, 8, 6, 0.88) 0%, rgba(6, 5, 4, 0.96) 100%) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45) !important;
}

.footer-social-dock { 
    display: flex !important; 
    gap: 20px !important; 
}
.footer-icon-link {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(244, 232, 200, 0.82) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    transition: color 0.2s ease !important;
}
.footer-icon-link:hover { 
    color: #ffd700 !important; 
}
.footer-version-tag { 
    font-family: 'Segoe UI', sans-serif !important; 
    font-size: 0.68rem !important; 
    color: rgba(244, 232, 200, 0.58) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

/* Block 15b: MAIN PORTAL LEGAL FOOTER (publisher + legal links) */
#main-dashboard-canvas > .main-portal-legal-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

.main-portal-legal-footer {
    width: 100% !important;
    padding: 22px 16px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(184, 144, 48, 0.24) !important;
    background: linear-gradient(180deg, rgba(10, 8, 6, 0.72) 0%, rgba(6, 5, 4, 0.92) 100%) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
}

.main-portal-legal-footer-brand {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.02em !important;
    color: rgba(244, 232, 200, 0.62) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.main-portal-legal-footer-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px 10px !important;
}

.main-portal-legal-footer-nav a {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(244, 232, 200, 0.84) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    transition: color 0.2s ease !important;
}

.main-portal-legal-footer-nav a:hover {
    color: #ffd700 !important;
}

.main-portal-legal-footer-separator {
    color: rgba(244, 232, 200, 0.35) !important;
    font-size: 0.72rem !important;
    user-select: none !important;
}


/* ==========================================================================
   SECTION 8: DISSOLVE INTERFACE CONFIRMATION MODALS
   ========================================================================== */

/* Block 16: FIXED BLUR OVERLAY SHUTTER MASKS */
.main-portal-modal-hidden {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Hidden modals must beat ID-level display:flex rules below */
#main-portal-login-modal.main-portal-modal-hidden,
#main-logout-confirmation-modal.main-portal-modal-hidden,
#register-modal.main-portal-auth-overlay.main-portal-modal-hidden,
#forgot-modal.main-portal-auth-overlay.main-portal-modal-hidden {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#main-logout-confirmation-modal:not(.main-portal-modal-hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* Block 17: Auth-style modals — borderedcontainer_thin frame */
.portal-overlay-modal-bezel,
.bordered-modal-panel {
    background-color: rgba(12, 10, 8, 0.94) !important;
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.88) !important;
}

.portal-overlay-modal-bezel {
    padding: 28px 32px 26px 32px !important;
    width: 380px !important;
    max-width: 90% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* Logout dialog: frame fits content height */
#main-logout-confirmation-modal .logout-confirmation-bezel {
    background-color: rgba(14, 11, 8, 0.96) !important;
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: none !important;
    border-image: none !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.88) !important;
    width: min(408px, 92vw) !important;
    min-width: 0 !important;
    max-width: min(408px, 92vw) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 30px 18px 30px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

#main-logout-confirmation-modal .modal-alert-header {
    font-size: 1.12rem !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

#main-logout-confirmation-modal .modal-alert-body {
    max-width: 328px !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main-logout-confirmation-modal .modal-action-btn-row {
    margin: 0 !important;
    padding-top: 4px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* Block 17b: Main portal login / register / forgot (borderedcontainer_thin + closebtn) */
#main-portal-login-modal:not(.main-portal-modal-hidden),
#register-modal.main-portal-auth-overlay:not(.main-portal-modal-hidden),
#forgot-modal.main-portal-auth-overlay:not(.main-portal-modal-hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999998 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
}

#main-portal-login-modal .main-portal-auth-modal-frame,
#register-modal .main-portal-auth-modal-frame,
#forgot-modal .main-portal-auth-modal-frame {
    position: relative !important;
    width: min(420px, 94vw) !important;
    max-width: min(420px, 94vw) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#main-portal-login-modal .main-portal-auth-modal-frame .portal-server-panel-header,
#register-modal .main-portal-auth-modal-frame .portal-server-panel-header,
#forgot-modal .main-portal-auth-modal-frame .portal-server-panel-header {
    padding: 0 36px 0 2px !important;
}

#main-portal-login-modal .main-portal-auth-modal-frame .portal-server-panel-heading,
#register-modal .main-portal-auth-modal-frame .portal-server-panel-heading,
#forgot-modal .main-portal-auth-modal-frame .portal-server-panel-heading {
    text-align: center !important;
    width: 100% !important;
}

#main-portal-login-modal .main-portal-modal-close-btn,
#register-modal .main-portal-modal-close-btn,
#forgot-modal .main-portal-modal-close-btn {
    top: 4px !important;
    right: 4px !important;
    z-index: 4 !important;
}

.main-portal-auth-panel-body {
    text-align: left !important;
}

.main-portal-auth-panel-body .reg-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
}

.main-portal-auth-panel-body .reg-group label.portal-server-panel-label {
    margin: 0 !important;
}

.main-portal-auth-panel-body .main-portal-auth-field-hint {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    color: rgba(241, 224, 172, 0.62) !important;
}

.main-portal-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-portal-modal-close-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.main-portal-login-form-stack,
.main-portal-register-form,
.main-portal-forgot-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: left;
}

.main-portal-auth-field,
.main-portal-auth-panel-body .reg-input,
#register-modal .reg-input,
#forgot-modal .reg-input {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    background:
        linear-gradient(180deg, rgba(42, 34, 22, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%) !important;
    color: #fff3d4 !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    border-radius: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    outline: none !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 215, 0, 0.06) !important;
}

.main-portal-auth-field::placeholder {
    color: rgba(241, 224, 172, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.main-portal-auth-field:focus,
.main-portal-auth-panel-body .reg-input:focus,
#register-modal .reg-input:focus,
#forgot-modal .reg-input:focus {
    border-color: rgba(255, 215, 0, 0.85) !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 2px rgba(255, 215, 0, 0.2),
        0 0 18px rgba(255, 200, 80, 0.22) !important;
}

#main-portal-login-modal #btn-register-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 46px !important;
    margin-top: 0 !important;
    padding: 10px 18px !important;
    box-sizing: border-box !important;
    background-color: rgba(12, 10, 8, 0.94) !important;
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    color: #f1e0ac !important;
}

#main-portal-login-modal #btn-register-main:hover {
    color: #ffffff !important;
    filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 215, 0, 0.35)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 200, 80, 0.22) !important;
}

#main-portal-login-modal #btn-register-main:active {
    transform: translateY(0) scale(0.98) !important;
}

.main-portal-auth-panel-body :is(.confirm-btn, .cancel-btn, .revert-btn, .modal-action-btn.confirm, .modal-action-btn.cancel),
#main-portal-login-modal #btn-login-main,
#register-modal .main-portal-auth-panel-body :is(.confirm-btn, .cancel-btn, .revert-btn, .modal-action-btn.confirm, .modal-action-btn.cancel),
#forgot-modal .main-portal-auth-panel-body :is(.confirm-btn, .cancel-btn, .revert-btn, .modal-action-btn.confirm, .modal-action-btn.cancel),
#terms-dashboard-confirm-btn,
#player-report-submit-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin-top: 0 !important;
    background: var(--ra-action-btn-fill) !important;
}

.main-portal-auth-panel-body .portal-rejoin-age-btn.confirm-btn,
#main-portal-login-modal #btn-login-main,
#register-modal .main-portal-auth-panel-body .portal-rejoin-age-btn.confirm-btn,
#forgot-modal .main-portal-auth-panel-body .portal-rejoin-age-btn.confirm-btn {
    color: #fff2c8 !important;
}

.main-portal-forgot-link-row {
    display: flex;
    justify-content: center;
    margin: 2px 0 4px;
}

.main-portal-forgot-link {
    background: none;
    border: none;
    padding: 0;
    color: #f1e0ac;
    font-family: 'Georgia', serif;
    font-size: 0.82rem;
    font-style: italic;
    cursor: pointer;
    text-shadow: 1px 1px 3px #000;
}

.main-portal-forgot-link:hover {
    color: #ffd978;
}

.main-portal-remember-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 2px;
    font-family: 'Georgia', serif;
    font-size: 0.82rem;
    color: #f1e0ac;
    cursor: pointer;
    user-select: none;
}

.main-portal-remember-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #c9a227;
    cursor: pointer;
}

.main-portal-terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 4px;
    font-family: 'Georgia', serif;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #e8dcc0;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.main-portal-terms-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #c9a227;
    cursor: pointer;
}

.main-portal-terms-row a {
    color: #ffd978;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.main-portal-terms-row a:hover {
    color: #fff0b8;
}

#reg-submit-btn:disabled,
#reg-submit-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

.terms-acceptance-lead {
    margin: 0 0 12px;
    font-family: 'Georgia', serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e8dcc0;
    text-align: left;
}

.terms-acceptance-feedback {
    margin: 8px 0 0;
    font-size: 0.84rem;
    color: #ffb4b4;
    text-align: left;
}

#terms-acceptance-modal.main-portal-auth-overlay:not(.main-portal-modal-hidden) {
    display: flex !important;
    opacity: 1 !important;
    z-index: 100050 !important;
}

/* Dashboard terms gate — blocks portal until acceptance */
body.is-terms-gate-active {
    overflow: hidden;
}

body.is-terms-gate-active .staging-deck-master-wrapper,
body.is-terms-gate-active .portal-desktop-nav-stack,
body.is-terms-gate-active .over-bar-utility-deck,
body.is-terms-gate-active .portal-metrics-capsule-deck,
body.is-terms-gate-active #main-portal-dynamic-viewport {
    pointer-events: none !important;
    user-select: none !important;
}

.terms-dashboard-gate {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.terms-dashboard-gate[hidden] {
    display: none !important;
}

.terms-dashboard-gate-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 2, 0.88);
    backdrop-filter: blur(4px);
}

.terms-dashboard-gate-panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(88vh, 720px);
    overflow: auto;
    padding: 22px 24px 20px;
    box-sizing: border-box;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 24%),
        linear-gradient(165deg, rgba(34, 28, 20, 0.98) 0%, rgba(10, 8, 6, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.14),
        0 18px 48px rgba(0, 0, 0, 0.65);
    pointer-events: auto;
}

.terms-dashboard-gate-title {
    margin: 0;
    font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffd978;
    line-height: 1.3;
}

.terms-dashboard-gate-lead {
    margin: 14px 0 16px;
    font-family: 'Georgia', serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #e8dcc0;
    text-align: left;
}

.terms-dashboard-gate-checkbox {
    margin: 0 0 12px;
}

.terms-dashboard-feedback {
    margin: 0 0 10px;
    font-size: 0.84rem;
    color: #ffb4b4;
    text-align: left;
}

.terms-dashboard-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

#terms-dashboard-confirm-btn:disabled,
#terms-dashboard-confirm-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

@media (max-width: 720px) {
    .terms-dashboard-gate-panel {
        padding: 18px 16px 16px;
    }

    .terms-dashboard-gate-lead {
        font-size: 0.9rem;
    }
}

.main-portal-auth-loading {
    font-family: 'Georgia', serif;
    color: #d4af37;
    text-align: center;
    font-size: 0.9rem;
}

.main-portal-auth-btn-row,
#register-modal .modal-action-btn-row,
#forgot-modal .modal-action-btn-row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px !important;
    margin-top: 6px !important;
}

#main-portal-login-modal #auth-buttons {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

#main-portal-login-modal #auth-loading {
    position: relative !important;
    bottom: auto !important;
    margin-top: 4px !important;
}

.main-portal-forgot-copy {
    color: rgba(241, 224, 172, 0.82) !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.45 !important;
    margin: 0 0 6px !important;
    text-align: center !important;
}

@media (max-width: 1024px) {
    #main-portal-login-modal .main-portal-auth-modal-frame,
    #register-modal .main-portal-auth-modal-frame,
    #forgot-modal .main-portal-auth-modal-frame {
        width: min(400px, 96vw) !important;
        max-width: min(400px, 96vw) !important;
    }

    .main-portal-auth-field,
    #register-modal .reg-input,
    #forgot-modal .reg-input {
        height: 36px !important;
        font-size: 16px !important;
    }
}

.modal-alert-header { 
    font-family: 'Cinzel', serif !important; 
    font-size: 0.9rem !important; 
    color: #cc0000 !important; 
    margin: 0 !important; 
    letter-spacing: 0.5px; 
}
.modal-alert-body { 
    font-family: 'Segoe UI', sans-serif !important; 
    font-size: 0.78rem !important; 
    color: #f1e0ac !important; 
    line-height: 1.4 !important; 
    margin: 0 !important; 
}
.modal-action-btn-row { 
    display: flex !important; 
    gap: 12px !important; 
    justify-content: center !important; 
    margin-top: 5px !important; 
}

/* Block 18: OVERLAY ACTIONS TRIPPERS (layout; visual from canonical action button) */
.modal-action-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

#royal-armies-portal-alert-modal .modal-action-btn,
#main-logout-confirmation-modal .modal-action-btn {
    flex: 1 1 auto;
    min-width: min(160px, 42vw);
    min-height: 44px;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
}

#royal-armies-portal-alert-modal .modal-action-btn-row,
#main-logout-confirmation-modal .modal-action-btn-row {
    align-items: stretch;
}

/* Shared in-game alert / confirm (portal-alerts.js) */
#royal-armies-portal-alert-modal {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000000 !important;
}

#royal-armies-portal-alert-modal .portal-alert-bezel {
    background-color: rgba(14, 11, 8, 0.96) !important;
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    width: min(440px, 92vw) !important;
    max-width: min(440px, 92vw) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 30px 20px 30px !important;
    gap: 12px !important;
}

#royal-armies-portal-alert-modal .portal-alert-header--info {
    color: #e8c547 !important;
    font-size: 1.12rem !important;
}

#royal-armies-portal-alert-modal .portal-alert-header--confirm {
    color: #cc0000 !important;
    font-size: 1.12rem !important;
}

#royal-armies-portal-alert-modal .portal-alert-header--notice {
    color: #ffb347 !important;
    font-size: 1.18rem !important;
    letter-spacing: 0.06em !important;
}

#royal-armies-portal-alert-modal .portal-alert-update-countdown {
    margin: 4px 0 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    text-align: center !important;
}

#royal-armies-portal-alert-modal.is-update-underway,
#royal-armies-portal-alert-modal.is-update-complete {
    background:
        radial-gradient(ellipse at center, rgba(24, 18, 10, 0.5) 0%, rgba(0, 0, 0, 0.84) 72%) !important;
    backdrop-filter: blur(3px) !important;
}

#royal-armies-portal-alert-modal.is-update-underway .portal-alert-bezel--age-update,
#royal-armies-portal-alert-modal.is-update-complete .portal-alert-bezel--age-update {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 18%),
        linear-gradient(165deg, rgba(34, 28, 20, 0.98) 0%, rgba(10, 8, 6, 0.99) 58%, rgba(18, 14, 10, 0.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.16),
        inset 0 0 0 1px rgba(255, 215, 0, 0.06),
        0 22px 56px rgba(0, 0, 0, 0.72),
        0 0 40px rgba(255, 190, 60, 0.08) !important;
}

#royal-armies-portal-alert-modal.is-update-underway .portal-alert-header--notice,
#royal-armies-portal-alert-modal.is-update-complete .portal-alert-header--complete {
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase !important;
}

#royal-armies-portal-alert-modal.is-update-complete .portal-alert-header--complete {
    color: #9fe8a8 !important;
    letter-spacing: 0.08em !important;
}

#royal-armies-portal-alert-modal.is-update-complete .portal-alert-bezel--age-update {
    border-color: rgba(120, 200, 140, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(180, 255, 200, 0.14),
        inset 0 0 0 1px rgba(120, 220, 150, 0.08),
        0 22px 56px rgba(0, 0, 0, 0.72),
        0 0 36px rgba(80, 200, 120, 0.12) !important;
}

#royal-armies-portal-alert-modal.is-update-complete .modal-alert-body {
    color: #d8f0dc !important;
    text-align: center !important;
}

#royal-armies-portal-alert-modal.is-update-underway .modal-alert-body {
    color: #e8d5a3 !important;
    text-align: center !important;
}

#royal-armies-portal-alert-modal.is-update-underway .portal-alert-update-countdown {
    border-color: rgba(197, 160, 89, 0.42) !important;
    background: rgba(0, 0, 0, 0.38) !important;
}

#royal-armies-portal-alert-modal .portal-alert-update-countdown-value {
    display: block !important;
    font-size: 2rem !important;
    font-variant-numeric: tabular-nums !important;
    color: #ffd700 !important;
    line-height: 1.15 !important;
}

#royal-armies-portal-alert-modal .portal-alert-update-countdown-unit {
    display: block !important;
    margin-top: 4px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: rgba(241, 224, 172, 0.9) !important;
}

#royal-armies-portal-alert-modal .portal-alert-update-countdown-hint {
    display: block !important;
    margin-top: 6px !important;
    font-size: 0.78rem !important;
    color: rgba(241, 224, 172, 0.78) !important;
    line-height: 1.35 !important;
}

#royal-armies-portal-alert-modal .modal-alert-body {
    max-width: 360px !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    white-space: pre-line !important;
}

#royal-armies-portal-alert-modal .portal-alert-ok-btn {
    border-color: rgba(201, 162, 39, 0.55) !important;
    color: #f1e0ac !important;
}

#royal-armies-portal-alert-modal .portal-alert-ok-btn:hover {
    background: rgba(201, 162, 39, 0.25) !important;
    border-color: #ffd700 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.35) !important;
}

/* ============================================================
   SECTION 9: ALIGNMENT | Block 19: High-Density Staging Leaderboard Grids
   ============================================================ */

.leaderboard-workspace-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    background: linear-gradient(135deg, rgba(22, 18, 13, 0.75) 0%, rgba(13, 10, 8, 0.85) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.25) !important;
    border-radius: 4px !important;
    padding: 20px !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.6) !important;
    box-sizing: border-box !important;
}

/* TOP GRID TOOLBAR CHANNELS */
.leaderboard-sub-toolbar-strip {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.15) !important;
    padding-bottom: 10px !important;
    width: 100% !important;
}

.leaderboard-sub-toolbar-strip .settings-btn.mini-btn {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(184, 144, 48, 0.3) !important;
    color: rgba(241, 224, 172, 0.6) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    padding: 6px 16px !important;
    cursor: pointer !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
}
.leaderboard-sub-toolbar-strip .settings-btn.mini-btn:hover,
.leaderboard-sub-toolbar-strip .settings-btn.mini-btn.active-sub-glow {
    color: #ffd700 !important;
    border-color: #ffd700 !important;
    background: #1e1810 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25) !important;
}

/* PRODUCTION DATA SHEET GRID MATRIX HOUSINGS */
.leaderboard-scrollable-table-bin {
    width: 100% !important;
    max-height: 340px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
    box-sizing: border-box !important;
}

.leaderboard-production-table-grid {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.8rem !important;
}

.leaderboard-production-table-grid th {
    background: #0d0a07 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    color: #b89030 !important;
    letter-spacing: 1px !important;
    padding: 10px 12px !important;
    border-bottom: 2px solid rgba(184, 144, 48, 0.3) !important;
    text-transform: uppercase !important;
}

.leaderboard-production-table-grid td {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.1) !important;
    color: rgba(241, 224, 172, 0.85) !important;
    transition: background 0.1s ease !important;
}

.leaderboard-production-table-grid tr:hover td {
    background: rgba(184, 144, 48, 0.05) !important;
}

/* SPECIAL BADGE ROW OVERLAYS EFFECTS */
.rank-badge-cell {
    font-family: 'Cinzel', serif !important;
    font-weight: bold !important;
    text-align: center !important;
}
.rank-num-1 { color: #ffd700 !important; font-size: 0.85rem !important; text-shadow: 0 0 4px rgba(255,215,0,0.4) !important; }
.rank-num-2 { color: #c0c0c0 !important; }
.rank-num-3 { color: #cd7f32 !important; }

.commander-name-label { color: #ffffff !important; }
.score-numerical-cell { font-family: 'Cinzel', serif !important; font-weight: bold !important; text-align: right !important; color: #f1e0ac !important; }
.status-honorary-title-cell { text-align: right !important; font-size: 0.72rem !important; color: rgba(241, 224, 172, 0.5) !important; font-style: italic !important; }

/* In-game client account profile highlight line rows */
.current-player-row-highlight td {
    background: rgba(255, 215, 0, 0.08) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
}
.current-player-row-highlight .commander-name-label {
    color: #ffd700 !important;
}

/* Commander rank title pills (ranks 1–22, beside player name) */
.commander-identity-name-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

.commander-identity-name {
    color: inherit !important;
    font-weight: inherit !important;
}

.commander-rank-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: min(220px, 42vw) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    flex-shrink: 1 !important;
}

.commander-rank-pill--compact {
    font-size: 0.58rem !important;
    padding: 1px 6px !important;
    max-width: min(180px, 36vw) !important;
}

.commander-rank-pill--nametag {
    font-size: 0.5rem !important;
    padding: 1px 5px !important;
    max-width: min(132px, 28vw) !important;
    letter-spacing: 0.01em !important;
}

.nav-account-identity-stack--rank-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.logged-user-tag-rank-pill,
#logged-user-tag-rank-pill {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.portal-commander-identity-card-body .nav-account-identity-stack--rank-pill #logged-user-tag {
    flex: 0 1 auto !important;
}

.commander-rank-pill--tier-1 {
    color: #e8e8e8 !important;
    background: rgba(120, 120, 120, 0.35) !important;
    border-color: rgba(180, 180, 180, 0.35) !important;
}

.commander-rank-pill--tier-2 {
    color: #d8ecff !important;
    background: rgba(96, 168, 220, 0.32) !important;
    border-color: rgba(140, 200, 255, 0.45) !important;
}

.commander-rank-pill--tier-3 {
    color: #d8f5d0 !important;
    background: rgba(72, 150, 72, 0.34) !important;
    border-color: rgba(120, 200, 110, 0.45) !important;
}

.commander-rank-pill--tier-4 {
    color: #ffd4d0 !important;
    background: rgba(170, 56, 48, 0.38) !important;
    border-color: rgba(220, 90, 80, 0.5) !important;
}

.commander-rank-pill--tier-5 {
    color: #c8f0c4 !important;
    background: rgba(28, 88, 42, 0.55) !important;
    border-color: rgba(60, 130, 72, 0.55) !important;
}

.commander-rank-pill--tier-6 {
    color: #c8dcff !important;
    background: rgba(24, 52, 110, 0.58) !important;
    border-color: rgba(70, 110, 190, 0.55) !important;
}

.commander-rank-pill--tier-7 {
    color: #fff2c8 !important;
    background: rgba(120, 88, 16, 0.62) !important;
    border-color: rgba(212, 175, 55, 0.65) !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.25) !important;
}

.commander-rank-pill--tier-8 {
    color: #f0dcff !important;
    background: rgba(72, 36, 110, 0.62) !important;
    border-color: rgba(150, 90, 210, 0.58) !important;
}

#logged-user-tag.commander-identity-name-row-host,
.portal-commander-identity-stack .commander-identity-name-row {
    font-size: inherit !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .nav-account-identity-stack--rank-pill {
    gap: 10px !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .logged-user-tag-rank-pill .commander-rank-pill,
#age-page-canvas .age-map-bottom-commander-nametag #logged-user-tag-rank-pill .commander-rank-pill {
    flex-shrink: 0 !important;
}

.public-profile-commander-name-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.chat-message-sender-name .commander-identity-name-row,
.chat-roster-name-row .commander-identity-name-row {
    gap: 6px !important;
}

.game-chat-msg-author-row {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-right: 4px !important;
}

.game-chat-msg-author-row .commander-rank-pill {
    font-size: 0.58rem !important;
}

.profile-rank-title-gender-switch-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

.profile-rank-title-gender-switch-row .toggle-label-text {
    margin-right: 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    color: rgba(241, 224, 172, 0.62) !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.profile-rank-title-gender-switch-row .toggle-label-text:hover,
.profile-rank-title-gender-switch-row .toggle-label-text:focus-visible {
    color: rgba(255, 217, 120, 0.92) !important;
    outline: none !important;
}

.profile-rank-title-gender-switch-label.is-active {
    color: #ffd978 !important;
    text-shadow: 0 0 10px rgba(255, 214, 0, 0.28) !important;
}

.profile-rank-title-gender-switch input:checked + .toggle-slider-track {
    background-color: rgba(184, 144, 48, 0.28) !important;
    border-color: rgba(212, 175, 55, 0.88) !important;
}

.profile-rank-title-gender-switch input:checked + .toggle-slider-track::before {
    background: linear-gradient(135deg, #fff8c4 0%, #ffd600 100%) !important;
    box-shadow: 0 0 8px rgba(255, 214, 0, 0.55) !important;
}

.profile-rank-title-preview {
    margin: 8px 0 0 !important;
    font-size: 0.78rem !important;
    color: rgba(241, 224, 172, 0.82) !important;
}

/* ============================================================
   SECTION 10: ALIGNMENT | Block 20: Fullscreen Tavern Chat Skins
   ============================================================ */

.chat-channel-context-banner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    border-radius: 4px !important;
    background: rgba(8, 6, 4, 0.72) !important;
    flex-shrink: 0 !important;
}

.chat-channel-context-icon {
    font-size: 1.6rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.chat-channel-context-title {
    margin: 0 0 4px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1rem !important;
    color: #ffd700 !important;
    letter-spacing: 0.6px !important;
}

.chat-channel-context-blurb {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(241, 224, 172, 0.62) !important;
    line-height: 1.35 !important;
}

.chat-workspace-nav-driven {
    flex-direction: column !important;
}

.chat-body-split-row {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 16px !important;
    width: 100% !important;
}

.chat-main-feed-fullwidth {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.chat-channel-empty-state {
    padding: 48px 24px !important;
    text-align: center !important;
    font-style: italic !important;
}

.chat-sidebar-player-roster-compact {
    flex: 0 0 180px !important;
    max-width: 180px !important;
}

.chat-sidebar-player-roster-deck {
    width: 228px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-left: 1px solid rgba(184, 144, 48, 0.2) !important;
    padding-left: 14px !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.04) 0%, transparent 28%) !important;
}

.chat-roster-header-deck {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.14) !important;
}

.player-roster-header-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    color: #f1e0ac !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.chat-roster-header-icon {
    font-size: 0.9rem !important;
    color: #e8c547 !important;
    text-shadow: 0 0 8px rgba(201, 162, 39, 0.45) !important;
}

.chat-roster-header-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.chat-online-roster-count {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #1a1408 !important;
    background: linear-gradient(90deg, #c9a227 0%, #f1e0ac 100%) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    min-width: 1.4em !important;
    text-align: center !important;
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.25) !important;
}

.chat-roster-subtitle {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.65rem !important;
    line-height: 1.35 !important;
    color: rgba(241, 224, 172, 0.5) !important;
}

.chat-roster-subtitle #chat-online-in-age-count {
    color: #8aaee8 !important;
    font-weight: 700 !important;
}

.chat-roster-status-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
}

.chat-roster-legend-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
}

.chat-roster-legend-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    border: 1px solid #120e0a !important;
    flex-shrink: 0 !important;
}

.chat-roster-legend-dot--chat-active {
    background: #6fdc6f !important;
    box-shadow: 0 0 5px rgba(111, 220, 111, 0.55) !important;
}

.chat-roster-legend-dot--portal-browsing {
    background: #6a9fd4 !important;
    box-shadow: 0 0 5px rgba(106, 159, 212, 0.5) !important;
}

.chat-roster-legend-dot--idle {
    background: #e8c227 !important;
    box-shadow: 0 0 5px rgba(232, 194, 39, 0.5) !important;
}

.chat-roster-legend-item--portal {
    color: rgba(241, 224, 172, 0.65) !important;
    border-color: rgba(184, 144, 48, 0.22) !important;
    background: rgba(0, 0, 0, 0.25) !important;
}

.chat-roster-legend-item--in-age {
    color: #8aaee8 !important;
    border-color: rgba(106, 143, 199, 0.35) !important;
    background: rgba(106, 143, 199, 0.12) !important;
}

.chat-roster-legend-item--owner {
    color: #ffd700 !important;
    border-color: rgba(201, 162, 39, 0.55) !important;
    background: rgba(201, 162, 39, 0.15) !important;
}

.chat-roster-legend-item--moderator {
    color: #ff9999 !important;
    border-color: rgba(204, 0, 0, 0.35) !important;
    background: rgba(204, 0, 0, 0.12) !important;
}

.chat-roster-legend-item--royal-guard-bot {
    color: #ff8a8a !important;
    border-color: rgba(204, 0, 0, 0.4) !important;
    background: rgba(204, 0, 0, 0.14) !important;
}

.player-roster-scrollable-track-bin {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-right: 4px !important;
}

.chat-roster-commander-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px 10px 8px 8px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, rgba(18, 14, 10, 0.92) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.18) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.chat-roster-commander-card:hover {
    border-color: rgba(201, 162, 39, 0.38) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

.chat-roster-commander-card--self {
    border-color: rgba(201, 162, 39, 0.5) !important;
    background: linear-gradient(135deg, rgba(43, 36, 26, 0.75) 0%, rgba(8, 6, 4, 0.9) 100%) !important;
    box-shadow: 0 0 14px rgba(201, 162, 39, 0.12) !important;
}

.chat-roster-commander-card--owner {
    border-color: rgba(255, 215, 0, 0.55) !important;
    background: linear-gradient(135deg, rgba(62, 48, 18, 0.85) 0%, rgba(12, 10, 6, 0.95) 100%) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.14) !important;
}

.chat-roster-commander-card--moderator {
    border-color: rgba(204, 0, 0, 0.4) !important;
    background: linear-gradient(135deg, rgba(40, 12, 12, 0.55) 0%, rgba(8, 6, 4, 0.92) 100%) !important;
    box-shadow: 0 0 12px rgba(204, 0, 0, 0.1) !important;
}

.chat-roster-commander-card--royal-guard-bot {
    border-color: rgba(204, 0, 0, 0.5) !important;
    background: linear-gradient(135deg, rgba(48, 10, 10, 0.8) 0%, rgba(10, 6, 6, 0.95) 100%) !important;
    box-shadow: 0 0 16px rgba(204, 0, 0, 0.14) !important;
}

.chat-roster-commander-card--royal-guard-bot .chat-roster-name {
    color: #ff9999 !important;
}

.chat-roster-commander-card--in-age {
    border-color: rgba(106, 143, 199, 0.35) !important;
}

.chat-roster-avatar-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
}

.chat-roster-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(184, 144, 48, 0.35) !important;
    background: #0d0a07 !important;
    display: block !important;
}

.chat-roster-presence-ring {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 2px solid #120e0a !important;
    background: #6a9fd4 !important;
    box-shadow: 0 0 6px rgba(106, 159, 212, 0.5) !important;
}

.chat-roster-presence-ring--bot {
    background: #ff4d4d !important;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.65) !important;
    animation: chat-roster-presence-pulse 2s ease-in-out infinite !important;
}

.chat-roster-presence-ring--chat-active {
    background: #6fdc6f !important;
    box-shadow: 0 0 8px rgba(111, 220, 111, 0.6) !important;
    animation: chat-roster-presence-pulse 2.2s ease-in-out infinite !important;
}

.chat-roster-presence-ring--portal-browsing {
    background: #6a9fd4 !important;
    box-shadow: 0 0 8px rgba(106, 159, 212, 0.55) !important;
}

.chat-roster-presence-ring--idle {
    background: #e8c227 !important;
    box-shadow: 0 0 8px rgba(232, 194, 39, 0.55) !important;
}

.chat-roster-avatar-crown,
.chat-roster-avatar-mod-shield {
    position: absolute !important;
    top: -5px !important;
    left: -4px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
    pointer-events: none !important;
}

.chat-roster-staff-badge-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.chat-roster-staff-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}

.chat-roster-staff-badge-icon {
    font-size: 0.6rem !important;
}

.chat-roster-staff-badge--owner {
    color: #1a1408 !important;
    border: 1px solid #f1e0ac !important;
    background: linear-gradient(90deg, #c9a227 0%, #ffe9a8 100%) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25) !important;
}

.chat-roster-staff-badge--moderator {
    color: #ffe0e0 !important;
    border: 1px solid rgba(255, 120, 120, 0.45) !important;
    background: linear-gradient(90deg, rgba(140, 20, 20, 0.85) 0%, rgba(204, 0, 0, 0.55) 100%) !important;
}

.chat-roster-staff-badge--royal-guard-bot {
    color: #ffe8e8 !important;
    border: 1px solid rgba(255, 100, 100, 0.5) !important;
    background: linear-gradient(90deg, rgba(120, 16, 16, 0.9) 0%, rgba(180, 24, 24, 0.65) 100%) !important;
}

.chat-roster-avatar--royal-guard-bot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    border: 2px solid rgba(204, 0, 0, 0.55) !important;
    background: linear-gradient(145deg, rgba(60, 12, 12, 0.95) 0%, rgba(20, 8, 8, 1) 100%) !important;
    box-sizing: border-box !important;
}

.chat-roster-avatar-bot-mark {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.chat-roster-commander-card--royal-guard-bot .chat-roster-presence-ring {
    background: #ff4d4d !important;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.65) !important;
    animation: chat-roster-presence-pulse 2s ease-in-out infinite !important;
}

.chat-roster-status-pill--bot {
    color: #ffe0e0 !important;
    border: 1px solid rgba(255, 120, 120, 0.45) !important;
    background: rgba(204, 0, 0, 0.22) !important;
}

.chat-roster-commander-card--royal-guard-bot .chat-roster-rank-title {
    color: #ff7a7a !important;
}

.chat-roster-commander-card--royal-guard-bot .chat-roster-quip {
    color: rgba(255, 153, 153, 0.75) !important;
}

.chat-roster-empty-state--humans-only {
    margin-top: 4px !important;
}

.chat-roster-commander-card--owner .chat-roster-rank-title {
    color: #ffd700 !important;
}

.chat-roster-commander-card--moderator .chat-roster-rank-title {
    color: #ff9999 !important;
}

.chat-roster-commander-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    justify-content: center !important;
}

.chat-roster-commander-card--slim .chat-roster-commander-body,
.chat-roster-commander-card:not([data-staff-role]):not(.chat-roster-commander-card--expandable) .chat-roster-commander-body {
    gap: 0 !important;
}

.chat-roster-commander-card--expandable .chat-roster-commander-body {
    gap: 2px !important;
}

.chat-roster-commander-card--profile-open {
    cursor: pointer !important;
}

.chat-roster-commander-card--profile-open:hover {
    border-color: rgba(201, 162, 39, 0.42) !important;
    background: rgba(255, 215, 0, 0.04) !important;
}

.chat-roster-commander-card--profile-open:focus-visible {
    outline: 2px solid rgba(201, 162, 39, 0.55) !important;
    outline-offset: 2px !important;
}

.chat-roster-expand-btn {
    position: relative !important;
    z-index: 3 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    border-radius: 3px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    color: rgba(241, 224, 172, 0.75) !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.chat-roster-expand-btn:hover,
.chat-roster-expand-btn:focus-visible {
    border-color: rgba(255, 215, 0, 0.45) !important;
    color: #ffd978 !important;
    background: rgba(255, 215, 0, 0.08) !important;
}

.chat-roster-commander-card--expandable {
    cursor: default !important;
}

.chat-roster-commander-card--expandable:hover {
    border-color: rgba(201, 162, 39, 0.42) !important;
}

.chat-roster-commander-card--expandable:focus-visible {
    outline: 2px solid rgba(201, 162, 39, 0.55) !important;
    outline-offset: 2px !important;
}

.chat-roster-expand-hint {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    color: rgba(241, 224, 172, 0.4) !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    margin-left: 2px !important;
}

.chat-roster-commander-card--expandable.is-expanded .chat-roster-expand-hint {
    transform: rotate(90deg) !important;
    color: rgba(241, 224, 172, 0.7) !important;
}

.chat-roster-commander-expand-panel {
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.12) !important;
    width: 100% !important;
}

.chat-roster-commander-card.is-expanded .chat-roster-commander-expand-panel {
    display: flex !important;
}

.chat-roster-commander-expand-panel[hidden] {
    display: none !important;
}

.chat-roster-commander-card--royal-guard-bot.chat-roster-commander-card--expandable:hover {
    border-color: rgba(204, 0, 0, 0.55) !important;
}

.chat-roster-commander-topline {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
}

.chat-roster-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.chat-roster-name-row--profile-open {
    cursor: pointer !important;
}

.chat-roster-name-row--profile-open:hover .chat-roster-name {
    color: #ffd978 !important;
}

.chat-roster-name-row--profile-open:focus-visible {
    outline: 2px solid rgba(201, 162, 39, 0.55) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

.chat-roster-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #f1e0ac !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.chat-roster-commander-card--self .chat-roster-name {
    color: #ffd700 !important;
}

.chat-roster-status-pill {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.52rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.chat-roster-status-pill-icon {
    font-size: 0.55rem !important;
}

.chat-roster-status-pill--portal-browsing {
    color: #9ec5ef !important;
    border: 1px solid rgba(106, 159, 212, 0.45) !important;
    background: rgba(106, 159, 212, 0.14) !important;
}

.chat-roster-status-pill--chat-active {
    color: #b8f0b8 !important;
    border: 1px solid rgba(111, 220, 111, 0.45) !important;
    background: rgba(111, 220, 111, 0.14) !important;
}

.chat-roster-status-pill--idle {
    color: #f1e0ac !important;
    border: 1px solid rgba(232, 194, 39, 0.45) !important;
    background: rgba(232, 194, 39, 0.12) !important;
}

.chat-roster-status-pill--self-portal {
    color: #d8ecff !important;
    border: 1px solid rgba(138, 174, 232, 0.55) !important;
    background: linear-gradient(90deg, rgba(106, 143, 199, 0.45) 0%, rgba(138, 174, 232, 0.25) 100%) !important;
}

.chat-roster-status-pill--self-chat {
    color: #eaffea !important;
    border: 1px solid rgba(111, 220, 111, 0.55) !important;
    background: linear-gradient(90deg, rgba(70, 150, 70, 0.5) 0%, rgba(111, 220, 111, 0.28) 100%) !important;
}

.chat-roster-status-pill--self-idle {
    color: #fff4c9 !important;
    border: 1px solid rgba(232, 194, 39, 0.55) !important;
    background: linear-gradient(90deg, rgba(160, 130, 20, 0.45) 0%, rgba(232, 194, 39, 0.22) 100%) !important;
}

.chat-roster-status-pill--in-age {
    color: #8aaee8 !important;
    border: 1px solid rgba(106, 143, 199, 0.4) !important;
    background: rgba(106, 143, 199, 0.15) !important;
}

.chat-roster-status-pill--self {
    color: #1a1408 !important;
    border: 1px solid #f1e0ac !important;
    background: linear-gradient(90deg, #c9a227 0%, #f1e0ac 100%) !important;
}

.chat-roster-status-pill--self-age {
    color: #e8f2ff !important;
    border: 1px solid rgba(138, 174, 232, 0.55) !important;
    background: linear-gradient(90deg, rgba(106, 143, 199, 0.55) 0%, rgba(138, 174, 232, 0.35) 100%) !important;
}

.chat-roster-rank-title {
    font-family: 'Cinzel', serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
    color: #b89030 !important;
    text-transform: uppercase !important;
}

.chat-roster-quip {
    margin: 2px 0 0 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.64rem !important;
    font-style: italic !important;
    line-height: 1.35 !important;
    color: rgba(241, 224, 172, 0.48) !important;
}

.chat-roster-commander-card--in-age .chat-roster-quip {
    color: rgba(138, 174, 232, 0.72) !important;
}

.chat-roster-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 22px 12px !important;
    text-align: center !important;
    border: 1px dashed rgba(184, 144, 48, 0.22) !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, 0.28) !important;
}

.chat-roster-empty-icon {
    font-size: 1.6rem !important;
    line-height: 1 !important;
    filter: grayscale(0.2) !important;
}

.chat-roster-empty-title {
    margin: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    color: #e8c96a !important;
    letter-spacing: 0.04em !important;
}

.chat-roster-empty-copy {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.7rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.45) !important;
}

@keyframes chat-roster-presence-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.85; }
}

/* Legacy row class kept for any older markup paths */
.roster-commander-node-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(184, 144, 48, 0.15) !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(241, 224, 172, 0.88) !important;
}

.roster-commander-node-row.status-online .status-dot {
    color: #6fdc6f !important;
    text-shadow: 0 0 6px rgba(111, 220, 111, 0.5) !important;
    flex-shrink: 0 !important;
}

.chat-roster-empty-note,
.chat-roster-loading-note {
    padding: 16px 8px !important;
    text-align: center !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    font-style: italic !important;
    color: rgba(241, 224, 172, 0.45) !important;
}

.chat-workspace-chassis {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    
    /* 🔥 MAXIMUM CONTAINER LOCKOUT FORCE: */
    /* Hard-locks the maximum height to matching viewport dimensions, completely blocking */
    /* the master box frame from growing even 1px larger when text messages stack up! */
    height: calc(100vh - 280px) !important;
    max-height: calc(100vh - 280px) !important;
    min-height: calc(100vh - 280px) !important;
    
    background: linear-gradient(135deg, rgba(22, 18, 13, 0.8) 0%, rgba(13, 10, 8, 0.9) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.7) !important;
    box-sizing: border-box !important;
    gap: 16px !important;
    padding: 16px !important;
}

/* SIDEBAR RECONCILED CHANNELS DECK CONTROLLERS */
.chat-sidebar-channels-deck {
    width: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border-right: 1px solid rgba(184, 144, 48, 0.2) !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
}

.chat-sidebar-channels-label {
    margin: 0 0 4px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.7rem !important;
    color: #c5a059 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.chat-channel-context-banner-inline {
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
    padding: 10px 12px !important;
}

.chat-channel-btn {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    color: rgba(241, 224, 172, 0.6) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    font-weight: bold !important;
    padding: 10px 12px !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
}
.chat-channel-btn:hover,
.chat-channel-btn.active-channel-glow {
    color: #ffd700 !important;
    border-color: #ffd700 !important;
    background: #1c150e !important;
    box-shadow: inset 0 1px 3px rgba(255,215,0,0.1) !important;
}

/* RIGHT PANEL MESH: THE MAIN CHAT INTERFACE HUB GRID */
.chat-main-feed-compartment {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    
    /* Pins extremes: Keeps the stream at the ceiling and locks the input bar rigidly to the floor */
    justify-content: space-between !important; 
    align-items: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* THE MESSAGES SCROLL AREA SCROLL ZONE CONTAINER */
.chat-scrolling-messages-bin {
    width: 100% !important;
    
    /* INTERNAL HEIGHT VACUUM: Allocates 100% space dynamically while saving exactly room for the input */
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    
    /* 🔥 INTERNAL HEIGHT CONSTRAINT LOCKOUT: */
    /* Strictly forbids the scrolling space from expanding or following long text message strings down! */
    max-height: calc(100% - 62px) !important;
    
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(184, 144, 48, 0.15) !important;
    border-radius: 3px !important;
    padding: 16px !important;
    
    /* 🔥 NATIVE SCROLL ENFORCEMENT: */
    /* Safely turns on dynamic overflow mechanics internally inside this frozen boundary layer! */
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
}

.chat-message-strip-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.92rem !important;
    color: rgba(241, 224, 172, 0.85) !important;
    padding: 6px 10px 6px 10px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
.chat-message-strip-row:hover {
    background: rgba(184, 144, 48, 0.08) !important;
}

.chat-message-content-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.chat-message-hover-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease !important;
}

.chat-message-strip-row:hover .chat-message-hover-actions,
.chat-message-strip-row:focus-within .chat-message-hover-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.chat-message-action-btn {
    font-family: 'Cinzel', serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #e8c96a !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.chat-message-action-btn:hover {
    border-color: rgba(255, 215, 0, 0.55) !important;
    background: rgba(43, 36, 26, 0.85) !important;
    color: #ffd978 !important;
}

.chat-message-reply-quote {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 5px 8px !important;
    border-left: 2px solid rgba(184, 144, 48, 0.45) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 0 3px 3px 0 !important;
    max-width: 100% !important;
}

.chat-message-reply-quote-label {
    font-size: 0.72rem !important;
    color: rgba(232, 201, 106, 0.9) !important;
    font-weight: 600 !important;
}

.chat-message-reply-quote-text {
    font-size: 0.75rem !important;
    color: rgba(241, 224, 172, 0.55) !important;
    font-style: italic !important;
}

.chat-message-edited-tag {
    font-size: 0.68rem !important;
    color: rgba(241, 224, 172, 0.45) !important;
    font-style: italic !important;
    margin-left: 4px !important;
}

.chat-message-body-text-content {
    line-height: 1.45 !important;
    word-break: break-word !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.chat-message-reply-quote-text {
    text-align: justify !important;
    text-justify: inter-word !important;
}

.chat-message-meta-left {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.chat-message-timestamp { color: rgba(241, 224, 172, 0.3) !important; font-size: 0.78rem !important; }
.chat-message-sender-name { color: #b89030 !important; font-family: 'Cinzel', serif !important; font-size: 0.85rem !important; }

.local-sender-highlight-strip {
    background: rgba(255, 215, 0, 0.04) !important;
}
.local-sender-highlight-strip .chat-message-sender-name {
    color: #ffd700 !important;
}

/* 🔒 TRANSMIT INPUT ROW: UN-COLLAPSIBLE FIXED BASELINE FLOOR BAR */
#chat-portal-input-interaction-tray,
.chat-input-toolbar-row {
    width: 100% !important;
    flex-shrink: 0 !important;
    margin-top: 14px !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

.chat-input-toolbar-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.chat-input-toolbar-row-inner {
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.chat-input-mention-anchor {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
}

.chat-mention-suggest-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 6px) !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    z-index: 60 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    background: rgba(12, 10, 8, 0.97) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
    box-sizing: border-box !important;
}

.chat-mention-suggest-dropdown[hidden] {
    display: none !important;
}

.chat-mention-suggest-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #f1e0ac !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.9rem !important;
    text-align: left !important;
    cursor: pointer !important;
}

.chat-mention-suggest-item:hover,
.chat-mention-suggest-item.is-highlighted {
    border-color: rgba(255, 215, 0, 0.35) !important;
    background: rgba(255, 215, 0, 0.1) !important;
    color: #ffd978 !important;
}

.chat-mention-suggest-at {
    color: #e8c96a !important;
    font-weight: 600 !important;
}

.chat-mention-suggest-empty {
    margin: 0 !important;
    padding: 8px 10px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    color: rgba(201, 181, 130, 0.75) !important;
}

.chat-compose-context-banner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(241, 224, 172, 0.85) !important;
}

.chat-compose-context-banner--reply {
    border-color: rgba(106, 143, 199, 0.35) !important;
}

.chat-compose-context-banner--edit {
    border-color: rgba(201, 162, 39, 0.4) !important;
}

.chat-compose-context-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.chat-compose-context-cancel {
    flex-shrink: 0 !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 6px 14px !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
}

.chat-retention-policy-notice {
    margin: 0 !important;
    padding: 0 2px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
    color: rgba(201, 181, 130, 0.72) !important;
    text-align: center !important;
}

.chat-retention-policy-notice strong {
    color: rgba(232, 201, 106, 0.9) !important;
    font-weight: 600 !important;
}

#chat-portal-message-input-field {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,0.6) !important;
    border: 1px solid rgba(184, 144, 48, 0.25) !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.95rem !important;
    outline: none !important;
    border-radius: 3px !important;
}

/* ============================================================
   SECTION 11: ALIGNMENT | Block 21: Nav Bar Embedded Avatar Thumbnail
   ============================================================ */

.nav-bar-embedded-avatar-thumbnail {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: #0b0907 !important;
    box-shadow: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
    cursor: pointer !important;
}

.nav-avatar-hub-wrapper:hover,
.nav-avatar-hub-wrapper:focus-within {
    filter: brightness(1.06) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 16px rgba(255, 215, 0, 0.42),
        0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.nav-avatar-hub-wrapper:hover .nav-bar-embedded-avatar-thumbnail,
.nav-avatar-hub-wrapper:focus-within .nav-bar-embedded-avatar-thumbnail {
    transform: scale(1.02) !important;
}

.portal-commander-identity-trigger:hover .nav-account-identity-cluster,
.portal-commander-identity-trigger:hover .nav-avatar-hub-wrapper,
.portal-commander-identity-card.is-commander-menu-open .nav-account-identity-cluster,
.portal-commander-identity-card.is-commander-menu-open .nav-avatar-hub-wrapper {
    border-color: #d4af37 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 14px rgba(255, 215, 0, 0.18),
        0 5px 14px rgba(0, 0, 0, 0.45) !important;
}

/* ============================================================
   SECTION 12: ALIGNMENT | Block 22: Absolute Input Field Breakout
   ============================================================ */

/* Forces the main container to assume a relative position mapping channel */
.chat-main-feed-compartment {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Hard-locks your message stream to exactly 78% height, reserving the bottom space exclusively for your input tray */
.chat-scrolling-messages-bin {
    height: 78% !important;
    max-height: 78% !important;
    flex: none !important; /* Disables flex shrinking, blocking the container from collapsing around short text lines */
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin-bottom: auto !important;
}

/* 🔥 THE FORCE BREAKOUT LAYER ENGINE: */
/* Unlinks the text field from your message list and forces it into its own space at the absolute baseline floor rim! */
.chat-input-toolbar-row {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 48px !important;
    background-color: #0d0a07 !important; /* Thick matte onyx backing panel blocks out overlapping text elements */
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding-top: 6px !important;
}

/* ============================================================
   SECTION 13: ALIGNMENT | Block 23: Special Roster Roles & Handle Highlights
   ============================================================ */

/* 🛡️ SYSTEM BOT ROSTER DESIGN SPECIFIER:
   Gives the Royal Guard bot a distinct crimson crimson look to show it is an automated moderator */
.roster-commander-node-row.status-bot-admin {
    background: rgba(204, 0, 0, 0.12) !important;
    border: 1px solid rgba(204, 0, 0, 0.4) !important;
    color: #ff9999 !important;
    font-family: 'Cinzel', serif !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 0 8px rgba(204, 0, 0, 0.15) !important;
}

.roster-commander-node-row.status-bot-admin .status-dot {
    font-size: 0.85rem !important;
    text-shadow: 0 0 4px #ff3333 !important;
}

/* System bot text message background tinting highlights values */
.system-bot-message-highlight {
    background: rgba(204, 0, 0, 0.03) !important;
    border-left: 2px solid rgba(204, 0, 0, 0.3) !important;
}
.system-bot-message-highlight .chat-message-sender-name,
.chat-message-sender-name--royal-guard-bot {
    color: #ff4d4d !important;
}

.chat-message-sender-name--royal-guard-bot strong {
    color: #ff9999 !important;
}

.chat-sender-staff-badge--royal-guard-bot {
    margin-right: 4px !important;
}

.chat-sender-staff-badge {
    display: inline-block !important;
    margin-right: 4px !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.chat-message-sender-name--owner,
.chat-message-strip-row--owner {
    border-left: 2px solid rgba(255, 215, 0, 0.45) !important;
}

.chat-message-sender-name--owner {
    color: #ffd700 !important;
}

.chat-message-sender-name--owner strong {
    color: #ffd700 !important;
}

.chat-message-strip-row--owner {
    background: rgba(201, 162, 39, 0.05) !important;
}

.chat-message-sender-name--moderator,
.chat-message-strip-row--moderator {
    border-left: 2px solid rgba(204, 0, 0, 0.35) !important;
}

.chat-message-sender-name--moderator {
    color: #ff9999 !important;
}

.chat-message-sender-name--moderator strong {
    color: #ff9999 !important;
}

.chat-message-strip-row--moderator {
    background: rgba(204, 0, 0, 0.04) !important;
}

/* 🔥 SHOUTOUT METRIC TAG BADGES HOVER INDICES FILTERS */
.chat-shoutout-mention-badge {
    background: rgba(255, 215, 0, 0.12) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: #ffd700 !important;
    font-weight: bold !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 4px rgba(255,215,0,0.2) !important;
    display: inline-block !important;
}

/* ============================================================
   SECTION 13: ALIGNMENT | Block 24: Behavioral Review Board Controls
   ============================================================ */

/* 🛑 STAFF TRIAGE TICKERS CARD TILES Layouts */
.behavioral-review-triage-card {
    width: 100% !important;
    background: rgba(204, 0, 0, 0.04) !important;
    border: 1px dashed rgba(204, 0, 0, 0.3) !important;
    border-radius: 4px !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: left !important;
}

.review-card-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    color: rgba(241, 224, 172, 0.6) !important;
}
.review-timestamp-tag { color: rgba(255,255,255,0.3) !important; font-size: 0.72rem !important; }

.review-card-raw-text {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.9rem !important;
    color: #ffffff !important;
    font-style: italic !important;
    background: rgba(0,0,0,0.3) !important;
    padding: 8px 12px !important;
    border-radius: 2px !important;
}

.review-card-action-bar-row {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}

.review-action-btn {
    font-family: 'Cinzel', serif !important;
    font-weight: bold !important;
    font-size: 0.68rem !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
    border-radius: 2px !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}
.review-action-btn.triage-remove { border: 1px solid rgba(241,224,172,0.4) !important; color: #f1e0ac !important; }
.review-action-btn.triage-remove:hover { background: rgba(241,224,172,0.1) !important; border-color: #ffd700 !important; }

.review-action-btn.triage-mute { border: 1px solid #ffaa00 !important; color: #ffaa00 !important; }
.review-action-btn.triage-mute:hover { background: #ffaa00 !important; color: #000000 !important; box-shadow: 0 0 8px #ffaa00 !important; }

.review-action-btn.triage-ban { border: 1px solid #cc0000 !important; color: #ff9999 !important; }
.review-action-btn.triage-ban:hover { background: #cc0000 !important; color: #ffffff !important; box-shadow: 0 0 8px #cc0000 !important; }

/* 🚨 DISCIPLINARY INCIDENT LOG NOTICES */
.disciplinary-incident-system-row {
    background: rgba(204, 0, 0, 0.08) !important;
    border-left: 3px solid #cc0000 !important;
    color: #ff9999 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.88rem !important;
}

/* INPUT COMPARTMENT TIMEOUT BANNER LABELS */
.chat-restriction-alert-banner {
    width: 100% !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    padding: 12px 16px !important;
    border-radius: 3px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    letter-spacing: 0.5px !important;
}
.chat-restriction-alert-banner.system-muted { background: rgba(255, 170, 0, 0.1) !important; border: 1px solid #ffaa00 !important; color: #ffbb33 !important; }
.chat-restriction-alert-banner.system-banned { background: rgba(204, 0, 0, 0.15) !important; border: 1px solid #cc0000 !important; color: #ff9999 !important; }

/* Dynamic Notification Alert Dot Badges */
.review-board-tab-alert { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.review-counter-badge {
    background: #cc0000 !important;
    color: #ffffff !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: bold !important;
    font-size: 0.68rem !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    box-shadow: 0 0 6px #ff3333 !important;
}

/* ============================================================
   SECTION 14: ALIGNMENT | Block 25: Chat Sidebar Apex Separator Line
   ============================================================ */

/* Generates an elegant golden separation track directly beneath your behavioral board tab */
.chat-sidebar-apex-separator-line {
    width: 100% !important;
    height: 1px !important;
    border-bottom: 1px dashed rgba(184, 144, 48, 0.25) !important;
    margin: 6px 0 10px 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.chronicles-workspace-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* UPPER XP CALIBRATION MASKS CARD CONTAINER */
.chronicles-master-card-box {
    width: 100% !important;
    background: linear-gradient(135deg, rgba(22, 18, 13, 0.85) 0%, rgba(13, 10, 8, 0.95) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.3) !important;
    border-radius: 4px !important;
    padding: 24px 30px !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.6) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

.chronicles-level-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}
.chronicles-main-rank-readout { 
    font-family: 'Cinzel', serif !important; 
    font-size: 1.05rem !important; 
    font-weight: bold !important; 
    color: #ffd700 !important; 
    letter-spacing: 0.5px !important; 
}
.chronicle-xp-rules-deck {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    background: rgba(0, 0, 0, 0.28) !important;
}

.chronicle-xp-rules-lead {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    color: rgba(241, 224, 172, 0.78) !important;
    margin: 0 !important;
}

.chronicle-total-merit-readout {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(197, 160, 89, 0.65) !important;
    margin: 6px 0 0 !important;
    text-align: right !important;
}

.chronicle-merit-sources-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

.chronicle-merit-source-card {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.22) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    min-width: 0 !important;
}

.chronicle-merit-source-icon {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.chronicle-merit-source-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.chronicle-merit-source-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    color: #e8c96a !important;
    letter-spacing: 0.03em !important;
}

.chronicle-merit-source-hint {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.65rem !important;
    line-height: 1.35 !important;
    color: rgba(241, 224, 172, 0.5) !important;
}

.chronicle-merit-source-stats {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    color: rgba(168, 196, 240, 0.9) !important;
}

@media (max-width: 900px) {
    .chronicle-merit-sources-grid {
        grid-template-columns: 1fr !important;
    }
}

.chronicles-xp-fraction-tag { 
    font-family: 'Segoe UI', sans-serif !important; 
    font-size: 0.8rem !important; 
    color: rgba(241, 224, 172, 0.5) !important; 
    font-weight: bold !important; 
}

/* THE FLUID METALLIC XP METRIC STRIP TRAY TRACKS */
.chronicles-progress-bar-track-bezel {
    width: 100% !important;
    height: 14px !important;
    background: #0d0a07 !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    border-radius: 7px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.chronicles-progress-bar-fill-glow {
    height: 100% !important;
    border-radius: 5px !important;
    background: linear-gradient(90deg, #b89030 0%, #ffd700 50%, #ffffff 100%) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
    transition: width 0.4s ease !important;
}

/* LOWER INTERFACE CARD MILESTONES DECK PANELS */
.chronicles-milestones-scroll-bin {
    flex: 1 !important;
    width: 100% !important;
    overflow-y: auto !important; /* Activates seamless scroll layer handling internally inside the grid */
    padding-right: 4px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.chronicles-grid-heading-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.9rem !important;
    color: #b89030 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    text-align: left !important;
}

.chronicles-milestones-grid-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

.chronicle-rewards-track-tab-bar {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.chronicle-rewards-track-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(184, 144, 48, 0.25) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.chronicle-rewards-track-tab:hover {
    border-color: rgba(201, 162, 39, 0.45) !important;
    background: rgba(43, 36, 26, 0.5) !important;
}

.chronicle-rewards-track-tab.active {
    border-color: rgba(201, 162, 39, 0.65) !important;
    background: linear-gradient(180deg, rgba(43, 36, 26, 0.85) 0%, rgba(12, 10, 8, 0.95) 100%) !important;
    box-shadow: 0 0 16px rgba(201, 162, 39, 0.15) !important;
}

.chronicle-track-tab-title {
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    color: #f1e0ac !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
}

.chronicle-track-tab-badge {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
}

.chronicle-track-tab-badge-free {
    color: #a8c4f0 !important;
    background: rgba(106, 143, 199, 0.18) !important;
    border: 1px solid rgba(106, 143, 199, 0.35) !important;
}

.chronicle-track-tab-badge-premium {
    color: #1a1408 !important;
    background: linear-gradient(90deg, #c9a227 0%, #f1e0ac 100%) !important;
    border: 1px solid #f1e0ac !important;
}

.chronicle-premium-upsell-banner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px !important;
    padding: 14px 16px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.12) 0%, rgba(8, 6, 4, 0.85) 100%) !important;
    flex-shrink: 0 !important;
}

.chronicle-premium-upsell-banner[hidden] {
    display: none !important;
}

.chronicle-premium-upsell-copy {
    flex: 1 1 240px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.85) !important;
}

.chronicle-premium-upsell-copy strong {
    color: #f1e0ac !important;
    font-weight: 600 !important;
}

.chronicle-premium-upsell-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.chronicle-premium-panel-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 14px !important;
    flex-shrink: 0 !important;
}

.chronicle-premium-panel-unlock-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ============================================================
   SECTION: Royalty membership workspace (uniform plan cards)
   ============================================================ */

.royalty-workspace-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 4px 2px 8px !important;
}

.royalty-workspace-header-deck {
    flex-shrink: 0 !important;
    text-align: center !important;
    padding: 18px 20px 20px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(184, 144, 48, 0.32) !important;
    background: linear-gradient(135deg, rgba(14, 11, 8, 0.96) 0%, rgba(6, 5, 4, 0.98) 55%, rgba(18, 14, 10, 0.95) 100%) !important;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 215, 0, 0.06) !important;
}

.royalty-master-title {
    margin: 0 0 8px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.35rem !important;
    font-weight: bold !important;
    color: #ffd700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 2px 12px rgba(0, 0, 0, 0.75) !important;
}

.royalty-master-subtitle {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    color: #f4e8c8 !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 2px 8px rgba(0, 0, 0, 0.75) !important;
}

.royalty-master-subtitle strong {
    color: #fff5d6 !important;
    font-weight: 600 !important;
}

.royalty-active-member-banner {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(201, 162, 39, 0.45) !important;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.18) 0%, rgba(8, 6, 4, 0.9) 100%) !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.9) !important;
}

.royalty-active-member-banner strong {
    color: #f1e0ac !important;
}

.royalty-plans-deck {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(201, 162, 39, 0.08) 0%, transparent 58%),
        linear-gradient(155deg, rgba(22, 18, 13, 0.88) 0%, rgba(8, 6, 4, 0.94) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    border-radius: 6px !important;
    padding: 22px 20px 24px !important;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 215, 0, 0.06) !important;
    box-sizing: border-box !important;
}

.royalty-tier-cards-flex-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.royalty-package-display-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.42) !important;
    border: 1px solid rgba(184, 144, 48, 0.22) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

.royalty-package-display-card:hover {
    transform: translateY(-2px) !important;
}

.royalty-package--standard {
    border-color: rgba(106, 143, 199, 0.32) !important;
}

.royalty-package--standard:hover {
    box-shadow: 0 10px 28px rgba(48, 72, 110, 0.22) !important;
}

.royalty-package--royalty {
    border-color: rgba(201, 162, 39, 0.42) !important;
    background: linear-gradient(180deg, rgba(32, 24, 10, 0.5) 0%, rgba(0, 0, 0, 0.48) 100%) !important;
}

.royalty-package--royalty:hover {
    box-shadow: 0 12px 32px rgba(201, 162, 39, 0.18) !important;
}

.royalty-package-display-card.royalty-plan-current {
    border-color: rgba(201, 162, 39, 0.72) !important;
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.12),
        0 0 22px rgba(201, 162, 39, 0.16) !important;
}

.royalty-package-visual-stage {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 18px 16px 16px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.14) !important;
}

.royalty-package-visual-stage--standard {
    background:
        radial-gradient(ellipse 85% 70% at 50% 35%, rgba(106, 143, 199, 0.14) 0%, transparent 68%),
        linear-gradient(180deg, rgba(14, 18, 28, 0.65) 0%, rgba(6, 8, 12, 0.35) 100%) !important;
}

.royalty-package-visual-stage--royalty {
    background:
        radial-gradient(ellipse 90% 72% at 50% 30%, rgba(255, 215, 0, 0.12) 0%, transparent 65%),
        linear-gradient(180deg, rgba(36, 28, 12, 0.72) 0%, rgba(10, 8, 4, 0.4) 100%) !important;
}

.royalty-package-visual-eyebrow {
    margin: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(241, 224, 172, 0.62) !important;
}

.royalty-package-visual-stage--standard .royalty-package-visual-eyebrow {
    color: rgba(168, 196, 240, 0.78) !important;
}

.royalty-package-visual-stage--royalty .royalty-package-visual-eyebrow {
    color: rgba(255, 217, 120, 0.88) !important;
}

.royalty-package-visual-frame {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 600px !important;
    min-height: 336px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.22) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55) !important;
}

.royalty-package-visual-stage--standard .royalty-package-visual-frame {
    border-color: rgba(106, 143, 199, 0.35) !important;
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.5),
        0 0 16px rgba(106, 143, 199, 0.08) !important;
}

.royalty-package-visual-stage--royalty .royalty-package-visual-frame {
    border-color: rgba(201, 162, 39, 0.45) !important;
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(201, 162, 39, 0.12) !important;
}

.royalty-package-tier-art {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)) !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    pointer-events: none !important;
}

.royalty-package-info-deck {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    padding: 18px 20px 0 !important;
    box-sizing: border-box !important;
}

.royalty-package-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.15) !important;
}

.royalty-package-title-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.royalty-package-tier-name {
    margin: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    color: #f1e0ac !important;
    letter-spacing: 0.04em !important;
    line-height: 1.25 !important;
}

.royalty-badge-title-grant {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    color: rgba(241, 224, 172, 0.55) !important;
}

.royalty-badge-title-grant strong {
    color: rgba(241, 224, 172, 0.85) !important;
    font-weight: 600 !important;
}

.royalty-plan-pill {
    flex-shrink: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}

.royalty-plan-pill--free {
    color: #a8c4f0 !important;
    background: rgba(106, 143, 199, 0.18) !important;
    border: 1px solid rgba(106, 143, 199, 0.35) !important;
}

.royalty-plan-pill--paid {
    color: #1a1408 !important;
    background: linear-gradient(90deg, #c9a227 0%, #f1e0ac 100%) !important;
    border: 1px solid #f1e0ac !important;
}

.royalty-package-cost {
    font-family: 'Cinzel', serif !important;
    font-size: 1.35rem !important;
    font-weight: bold !important;
    color: #ffd700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
}

.royalty-package--standard .royalty-package-cost {
    color: rgba(241, 224, 172, 0.75) !important;
}

.royalty-package-features-list {
    flex: 1 1 auto !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.royalty-package-feature-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.82) !important;
}

.royalty-package-feature-bullet {
    flex-shrink: 0 !important;
    color: #b89030 !important;
    font-size: 0.7rem !important;
    line-height: 1.45 !important;
}

.royalty-package-action-footer {
    margin-top: auto !important;
    padding: 14px 20px 18px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.14) !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.28) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.royalty-checkout-compliance {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(184, 144, 48, 0.32) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.32) !important;
    font-family: 'Georgia', serif !important;
    font-size: 0.82rem !important;
    font-style: italic !important;
    line-height: 1.45 !important;
    color: rgba(236, 220, 180, 0.92) !important;
    text-align: left !important;
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.08) !important;
}

.royalty-checkout-compliance a {
    color: #ffd978 !important;
    font-style: normal !important;
    text-decoration: underline !important;
}

.royalty-package-action-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
}

.royalty-package-action-btn.disabled-active-btn {
    opacity: 0.65 !important;
}

.royalty-package-status-label {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 10px 12px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(120, 120, 120, 0.35) !important;
    color: rgba(241, 224, 172, 0.45) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    cursor: default !important;
    user-select: none !important;
    pointer-events: none !important;
}

.royalty-package-status-label--included {
    color: rgba(241, 224, 172, 0.5) !important;
    border-color: rgba(106, 143, 199, 0.22) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

.royalty-package-status-label--active {
    color: rgba(232, 197, 71, 0.75) !important;
    border-color: rgba(201, 162, 39, 0.35) !important;
    background: rgba(201, 162, 39, 0.1) !important;
}

.royalty-package-action-btn--downgrade {
    color: rgba(241, 224, 172, 0.75) !important;
    border: 1px solid rgba(140, 140, 140, 0.45) !important;
    background: linear-gradient(180deg, rgba(40, 38, 34, 0.95) 0%, rgba(18, 16, 14, 0.98) 100%) !important;
    box-shadow: none !important;
}

.royalty-package-action-btn--downgrade:hover {
    color: rgba(241, 224, 172, 0.9) !important;
    border-color: rgba(180, 120, 120, 0.5) !important;
    background: linear-gradient(180deg, rgba(48, 28, 28, 0.85) 0%, rgba(20, 14, 14, 0.98) 100%) !important;
}

@media (max-width: 820px) {
    .royalty-tier-cards-flex-row {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

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

    .royalty-package-tier-art {
        max-height: 360px !important;
    }
}

.chronicle-rewards-tracks-deck {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.chronicle-rewards-track-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: hidden !important;
}

.chronicle-rewards-track-panel .chronicles-milestones-scroll-bin {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: min(52vh, 520px) !important;
}

.chronicle-rewards-track-panel-active {
    display: flex !important;
}

.chronicle-rewards-track-panel-hidden {
    display: none !important;
}

.landmark-node-premium-gated {
    border-style: dashed !important;
    border-color: rgba(201, 162, 39, 0.28) !important;
}

.milestone-premium-hint {
    margin: 4px 0 0 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    font-style: italic !important;
    color: rgba(201, 162, 39, 0.75) !important;
}

.status-premium-required-tag {
    color: #e8c96a !important;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.2) !important;
}

/* INDOOR INDIVIDUAL MILESTONE CARD BADGE CAPSULES */
.milestone-landmark-capsule-card {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.landmark-node-unlocked { 
    border: 1px solid rgba(184, 144, 48, 0.2) !important; 
}
.landmark-node-locked { 
    border: 1px dashed rgba(184, 144, 48, 0.08) !important; 
    opacity: 0.55 !important; 
    background: rgba(0,0,0,0.6) !important; 
}

.milestone-landmark-no-reward {
    padding: 10px 16px !important;
    opacity: 0.72 !important;
}

.milestone-landmark-no-reward.landmark-node-unlocked {
    opacity: 0.88 !important;
    border-style: solid !important;
}

.milestone-badge-level-only {
    font-size: 1rem !important;
    color: rgba(241, 224, 172, 0.35) !important;
}

.status-reached-text-tag {
    color: rgba(168, 196, 240, 0.95) !important;
    text-shadow: 0 0 4px rgba(106, 143, 199, 0.25) !important;
}

.status-eligible-text-tag {
    color: #9fd89f !important;
    text-shadow: 0 0 4px rgba(120, 200, 120, 0.25) !important;
}

.milestone-badge-hexagon-icon {
    font-size: 1.3rem !important;
    width: 40px !important;
    height: 40px !important;
    background: #0d0a07 !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.milestone-meta-contents {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
}

.milestone-tier-level-label { 
    font-family: 'Segoe UI', sans-serif !important; 
    font-size: 0.65rem !important; 
    color: rgba(241, 224, 172, 0.4) !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.5px; 
}
.milestone-title-string { 
    font-family: 'Cinzel', serif !important; 
    font-size: 0.9rem !important; 
    font-weight: bold !important; 
    color: #ffffff !important; 
}
.milestone-reward-description-text { 
    font-family: 'Segoe UI', sans-serif !important; 
    font-size: 0.82rem !important; 
    color: rgba(241, 224, 172, 0.7) !important; 
    margin: 0 !important; 
}

.milestone-status-action-deck { 
    font-family: 'Cinzel', serif !important; 
    font-size: 0.75rem !important; 
    font-weight: bold !important; 
    letter-spacing: 0.5px !important; 
    flex-shrink: 0 !important; 
}
.status-unlocked-text-tag { 
    color: #ffd700 !important; 
    text-shadow: 0 0 4px rgba(255,215,0,0.2) !important; 
}
.status-locked-text-tag { 
    color: rgba(241, 224, 172, 0.25) !important; 
}

/* ============================================================
   SECTION 16: ALIGNMENT | Block 26: Metallic Range Mixer Slider Interface Customizations
   ============================================================ */

.audio-mixer-workspace-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    background: linear-gradient(135deg, rgba(22, 18, 13, 0.75) 0%, rgba(13, 10, 8, 0.85) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.25) !important;
    border-radius: 4px !important;
    padding: 24px 30px !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.6) !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
}

.audio-mixer-controls-deck-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.audio-mixer-group-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(184, 144, 48, 0.15) !important;
    border-radius: 4px !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
}

.mixer-label-meta-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
}

.mixer-channel-title-string {
    font-family: 'Cinzel', serif !important;
    font-size: 0.95rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
}

.mixer-channel-sub-tag {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    color: rgba(241, 224, 172, 0.4) !important;
}

/* HIGH-PRIORITY NATIVE HARDWARE SLIDER TRACK RIPPINGS WRAPPERS */
.mixer-slider-track-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 280px !important;
    height: 6px !important;
    background: #0d0a07 !important;
    border: 1px solid rgba(184, 144, 48, 0.3) !important;
    border-radius: 3px !important;
    outline: none !important;
    cursor: pointer !important;
}

/* CUSTOM SLIDER THUMB KNOB FORMATTING (FOR WEBKIT CHROME/SAFARI LAYERS) */
.mixer-slider-track-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 18px !important;
    background: linear-gradient(135deg, #ffd700 0%, #b89030 100%) !important;
    border: 1px solid #110e0a !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.85) !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
}
.mixer-slider-track-input::-webkit-slider-thumb:hover {
    transform: scale(1.15) !important;
    background: #ffffff !important;
}

/* CUSTOM SLIDER THUMB KNOB FORMATTING (FOR MOZILLA FIREFOX ENGINE LAYERS) */
.mixer-slider-track-input::-moz-range-thumb {
    width: 14px !important;
    height: 18px !important;
    background: linear-gradient(135deg, #ffd700 0%, #b89030 100%) !important;
    border: 1px solid #110e0a !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.85) !important;
}

/* ============================================================
   SECTION 17: INTERFACE GRAPHICS ENGINE | Block 27: Presentation Component Styling
   ============================================================ */

/* ROYAL DESIGN STYLE ARCHITECTURE - FAMILY: LOCAL ROYALDETAILS DISPLAY ENGINE */
.portal-age-intro-body-wrap {
    overflow: hidden;
}

.portal-age-intro-art {
    float: right;
    width: min(840px, 96%);
    max-width: 920px;
    margin: 2px 0 14px 28px;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(145deg, rgba(22, 17, 12, 0.92) 0%, rgba(8, 6, 4, 0.96) 100%);
    border: 1px solid rgba(197, 160, 89, 0.38);
    border-radius: 6px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 215, 0, 0.08);
}

.portal-age-intro-art-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
}

.portal-intro-wrap-clear {
    clear: both;
    height: 0;
}

.card-scrollable-body-text p.portal-intro-lead {
    font-family: 'RoyalDetails', serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #fff8ee;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.card-scrollable-body-text p.portal-intro-body {
    font-family: 'RoyalDetails', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #e8e2d6;
    margin-bottom: 16px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.card-scrollable-body-text h3.portal-intro-subhead {
    font-family: 'RoyalDetails', serif;
    font-size: 1.15rem;
    color: #c5a059;
    margin-top: 28px;
    margin-bottom: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.35);
}

/* PLAYSTYLE SELECTION LIST OVERRIDES */
.card-scrollable-body-text ul.portal-intro-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 22px;
}

.card-scrollable-body-text ul.portal-intro-list li {
    font-family: 'RoyalDetails', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #e0e5eb;
    border-left: 3px solid #c5a059;
    padding-left: 14px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.01);
}

/* GAME MODE DISPLAY BOXES */
.card-scrollable-body-text .portal-victory-box {
    font-family: 'RoyalDetails', serif;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #b0b8c4;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-scrollable-body-text .portal-victory-box:hover {
    border-color: rgba(197, 160, 89, 0.4);
    box-shadow: inset 0 0 20px rgba(197, 160, 89, 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-scrollable-body-text .portal-victory-box strong {
    color: #c5a059;
    letter-spacing: 0.5px;
}

/* ZONE WARS MATRIX INLINE TABS */
.card-scrollable-body-text .portal-zone-matrix-row {
    font-family: 'RoyalDetails', serif;
    display: block;
    font-weight: bold;
    color: #ffffff;
    margin-top: 6px;
    padding-left: 12px;
    border-left: 1px dashed rgba(197, 160, 89, 0.4);
    letter-spacing: 0.5px;
}

/* ==========================================================================
   SECTION 17: PORTAL VISUAL ENGINEERING | Block 28: Avatar Drop Submenu
   ========================================================================== */

/* ANCHORS DROPDOWN TRACK CORES POSITIONS RELATIVE TO IMAGE BOUNDARIES */
.nav-avatar-hub-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--nav-commander-avatar-size, 52px) !important;
    height: var(--nav-commander-avatar-size, 52px) !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    border: 2px solid #b89030 !important;
    background:
        radial-gradient(circle at 32% 28%, rgba(72, 58, 32, 0.95) 0%, rgba(12, 10, 8, 1) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 12px rgba(255, 215, 0, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.45) !important;
    top: 0 !important;
    z-index: 2 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

.portal-commander-identity-card-body .nav-avatar-hub-wrapper {
    z-index: 3 !important;
}

.nav-avatar-hub-wrapper::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -14px !important;
    width: var(--nav-commander-avatar-size, 52px) !important;
    height: 16px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
}

.avatar-hover-dropdown-menu .dropdown-action-item {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #b0b8c4 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.68rem !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 7px 6px !important;
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    border-radius: 2px !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    white-space: nowrap !important;
}

/* TARGET HOVER EFFECTS: Lights elements up to look exactly like royal update-item links */
.avatar-hover-dropdown-menu .dropdown-action-item:hover {
    background: rgba(184, 144, 48, 0.08) !important;
    border-color: rgba(184, 144, 48, 0.25) !important;
    color: #ffd700 !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4) !important;
}

.avatar-hover-dropdown-menu .dropdown-action-item-view-profile {
    color: #ffd700 !important;
}

.avatar-hover-dropdown-menu .dropdown-action-item-messages,
.portal-mobile-submenu-item-messages {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.dropdown-messages-label {
    flex: 0 0 auto !important;
    text-align: center !important;
}

.dropdown-action-item-messages .dropdown-messages-unread-count,
.portal-mobile-submenu-item-messages .dropdown-messages-unread-count {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

.dropdown-messages-unread-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #ffd978 0%, #c5a059 100%) !important;
    color: #1a1208 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.45) !important;
    flex-shrink: 0 !important;
}

.dropdown-action-item-messages.has-unread-messages .dropdown-messages-unread-count,
.portal-mobile-submenu-item-messages.has-unread-messages .dropdown-messages-unread-count {
    animation: mailboxUnreadCountPulse 2s ease-in-out infinite !important;
}

.portal-commander-identity-menu .dropdown-action-item.dropdown-action-item-return-portal,
.avatar-hover-dropdown-menu .dropdown-action-item.dropdown-action-item-return-portal,
.portal-mobile-submenu-item.portal-mobile-submenu-item-return-portal {
    margin-top: 8px !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    border-radius: 3px !important;
    color: rgba(255, 224, 148, 0.96) !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

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

.portal-commander-identity-menu .dropdown-action-item.dropdown-action-item-logout,
.avatar-hover-dropdown-menu .dropdown-action-item.dropdown-action-item-logout,
.portal-mobile-submenu-item.portal-mobile-submenu-item-logout {
    margin-top: 8px !important;
    border: 1px solid rgba(212, 175, 55, 0.82) !important;
    border-radius: 3px !important;
    color: rgba(255, 208, 128, 0.96) !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.08) !important;
}

.portal-commander-identity-menu .dropdown-action-item.dropdown-action-item-logout:hover,
.portal-commander-identity-menu .dropdown-action-item.dropdown-action-item-logout:focus-visible,
.avatar-hover-dropdown-menu .dropdown-action-item.dropdown-action-item-logout:hover,
.avatar-hover-dropdown-menu .dropdown-action-item.dropdown-action-item-logout:focus-visible,
.portal-mobile-submenu-item.portal-mobile-submenu-item-logout:hover,
.portal-mobile-submenu-item.portal-mobile-submenu-item-logout:active,
.portal-mobile-submenu-item.portal-mobile-submenu-item-logout:focus-visible {
    border-color: rgba(255, 215, 0, 0.92) !important;
    color: #ffd700 !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-commander-identity-menu .dropdown-action-item.dropdown-action-item-report-player,
.avatar-hover-dropdown-menu .dropdown-action-item.dropdown-action-item-report-player,
.portal-mobile-submenu-item.portal-mobile-submenu-item-report-player {
    margin-top: 8px !important;
    border: 1px solid rgba(220, 96, 72, 0.55) !important;
    border-radius: 3px !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;
    width: 100% !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(255, 120, 90, 0.12),
        0 0 10px rgba(180, 48, 32, 0.18) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.portal-commander-identity-menu .dropdown-action-item.dropdown-action-item-report-player:hover,
.portal-commander-identity-menu .dropdown-action-item.dropdown-action-item-report-player:focus-visible,
.avatar-hover-dropdown-menu .dropdown-action-item.dropdown-action-item-report-player:hover,
.avatar-hover-dropdown-menu .dropdown-action-item.dropdown-action-item-report-player:focus-visible,
.portal-mobile-submenu-item.portal-mobile-submenu-item-report-player:hover,
.portal-mobile-submenu-item.portal-mobile-submenu-item-report-player:active,
.portal-mobile-submenu-item.portal-mobile-submenu-item-report-player:focus-visible {
    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;
}

.dropdown-messages-unread-count[hidden] {
    display: none !important;
}

/* Commander nametag menu — unified centered rows (wins over avatar dropdown rules) */
.portal-commander-identity-menu .dropdown-action-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    cursor: pointer !important;
}

.portal-commander-identity-menu .commander-menu-side-slot {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    pointer-events: none !important;
}

.portal-commander-identity-menu .dropdown-action-item-label,
.portal-commander-identity-menu .dropdown-messages-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
    line-height: 1.25 !important;
}

.portal-commander-identity-menu .dropdown-action-item-messages {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.portal-commander-identity-menu .dropdown-action-item-messages .dropdown-messages-unread-count {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.portal-commander-identity-menu .dropdown-action-item-messages .dropdown-messages-unread-count[hidden] {
    display: none !important;
    visibility: hidden !important;
}

.portal-commander-identity-menu .dropdown-action-item-discoveries,
.portal-mobile-submenu-item-discoveries {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.portal-commander-identity-menu .dropdown-action-item-discoveries .rift-discovery-unread-dot,
.portal-mobile-submenu-item-discoveries .rift-discovery-unread-dot {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

.portal-mobile-submenu-item-discoveries {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 11px 12px !important;
}

.portal-mobile-submenu-item-discoveries .commander-menu-side-slot {
    flex: 0 0 20px !important;
    width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.portal-mobile-submenu-item-discoveries .portal-mobile-submenu-label {
    flex: 1 1 auto !important;
    text-align: center !important;
}

.commander-hub-top-tab[data-hub-tab="messages"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.commander-hub-tab-unread-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #ffd978 0%, #c5a059 100%) !important;
    color: #1a1208 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.45) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.commander-hub-tab-unread-count[hidden] {
    display: none !important;
}

@keyframes mailboxUnreadCountPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
    }
    50% {
        box-shadow: 0 0 14px rgba(255, 215, 0, 0.85), 0 0 20px rgba(255, 180, 40, 0.35);
    }
}

/* ==========================================================================
   SECTION 17A2: COMMUNITY CHAT @ SHOUTOUT ALERTS (LOWER RIGHT)
   ========================================================================== */

.chat-mention-alert-stack {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 248000 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
    gap: 10px !important;
    max-width: min(360px, calc(100vw - 44px)) !important;
    pointer-events: none !important;
}

.chat-mention-alert-card {
    pointer-events: auto !important;
    width: min(340px, calc(100vw - 44px)) !important;
    box-sizing: border-box !important;
    padding: 12px 14px 11px 14px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    border-right: 4px solid #b89030 !important;
    background: linear-gradient(145deg, rgba(28, 24, 18, 0.98) 0%, rgba(10, 8, 6, 0.99) 100%) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.88), inset 0 0 14px rgba(184, 144, 48, 0.08) !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    animation: chatMentionAlertSlideIn 0.28s ease !important;
}

@keyframes chatMentionAlertSlideIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.chat-mention-alert-card:hover,
.chat-mention-alert-card:focus-visible {
    transform: translateY(-2px) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.92), 0 0 16px rgba(255, 215, 0, 0.18) !important;
    outline: none !important;
}

.chat-mention-alert-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.chat-mention-alert-eyebrow {
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 1px !important;
    color: #c5a059 !important;
    text-transform: uppercase !important;
}

.chat-mention-alert-dismiss-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(241, 224, 172, 0.55) !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.chat-mention-alert-dismiss-btn:hover {
    color: #ffd700 !important;
}

.chat-mention-alert-sender {
    display: block !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.88rem !important;
    color: #ffd700 !important;
    margin-bottom: 6px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.chat-mention-alert-preview {
    display: block !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.88) !important;
    margin-bottom: 8px !important;
    font-style: italic !important;
    word-break: break-word !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.chat-mention-alert-cta {
    display: block !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.7rem !important;
    color: rgba(184, 144, 48, 0.95) !important;
    letter-spacing: 0.3px !important;
}

/* ==========================================================================
   SECTION 17A: LOWER-LEFT SAVE CONFIRMATION TOAST
   ========================================================================== */

.commander-hub-dialog > .portal-save-confirmation-toast,
.portal-commander-hub-page > .portal-save-confirmation-toast,
#lore-modal .lore-content-area > .portal-save-confirmation-toast,
.portal-save-confirmation-toast {
    position: absolute !important;
    left: 18px !important;
    bottom: 14px !important;
    z-index: 30 !important;
    max-width: min(360px, calc(100vw - 44px)) !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    letter-spacing: 0.4px !important;
    color: #ffd700 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    background: linear-gradient(145deg, rgba(32, 28, 20, 0.98) 0%, rgba(12, 10, 8, 0.99) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    border-left: 4px solid #b89030 !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), inset 0 0 12px rgba(184, 144, 48, 0.08) !important;
    opacity: 0 !important;
    transform: translateY(12px) !important;
    transition: opacity 0.28s ease, transform 0.28s ease !important;
    pointer-events: none !important;
}

.portal-save-confirmation-toast.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.portal-save-confirmation-toast[hidden] {
    display: none !important;
}

/* ==========================================================================
   SECTION 17B: PUBLIC COMMANDER PROFILE CARD (VIEW PROFILE)
   ========================================================================== */

.public-profile-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 260000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px 20px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.84) !important;
    opacity: 0;
    transition: opacity 0.22s ease !important;
}

.public-profile-overlay.is-visible {
    display: flex !important;
}

.public-profile-card-dialog {
    position: relative !important;
    width: min(720px, 96vw) !important;
    max-height: min(88vh, 760px) !important;
    box-sizing: border-box !important;
}

.public-profile-close-btn {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    z-index: 4 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.public-profile-close-icon {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
}

.public-profile-card-frame {
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    padding: 22px 26px 20px 26px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.public-profile-card-banner {
    height: 4px !important;
    margin: -6px 0 14px 0 !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, transparent 0%, #b89030 20%, #ffd700 50%, #b89030 80%, transparent 100%) !important;
}

.public-profile-card-mount {
    max-height: calc(88vh - 80px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #9a7a32 rgba(14, 11, 8, 0.85) !important;
}

.public-profile-identity-header {
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    align-items: flex-start !important;
    margin-bottom: 18px !important;
    text-align: left !important;
}

.public-profile-avatar-ring {
    flex-shrink: 0 !important;
    width: 108px !important;
    height: 108px !important;
    padding: 4px !important;
    border-radius: 50% !important;
    border: 2px solid #b89030 !important;
    background: radial-gradient(circle at 30% 20%, rgba(72, 58, 32, 0.95) 0%, rgba(12, 10, 8, 1) 100%) !important;
    box-shadow: 0 0 18px rgba(184, 144, 48, 0.25) !important;
}

.public-profile-avatar-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.public-profile-identity-copy {
    flex: 1 !important;
    min-width: 0 !important;
}

.public-profile-eyebrow {
    margin: 0 0 4px 0 !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 1.5px !important;
    color: rgba(184, 144, 48, 0.85) !important;
    text-transform: uppercase !important;
}

.public-profile-commander-name {
    margin: 0 0 8px 0 !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 1.55rem !important;
    color: #ffd700 !important;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9) !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
}

.public-profile-badge-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.public-profile-membership {
    font-family: 'Cinzel', serif !important;
    font-size: 0.68rem !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    color: #f1e0ac !important;
    background: rgba(20, 16, 11, 0.9) !important;
}

.public-profile-membership.tier-bronze,
.public-profile-membership.tier-basic,
.membership-badge.tier-bronze,
.membership-badge.tier-basic {
    color: #f4c892 !important;
    border-color: #cd7f32 !important;
    background: linear-gradient(180deg, rgba(100, 60, 28, 0.92) 0%, rgba(40, 24, 10, 0.96) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 200, 140, 0.18), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.public-profile-membership.tier-royalty,
.membership-badge.tier-royalty {
    color: #fff0b8 !important;
    border-color: #e0b840 !important;
    background: linear-gradient(180deg, rgba(150, 118, 32, 0.94) 0%, rgba(60, 46, 12, 0.97) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.22), 0 0 10px rgba(201, 162, 39, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.public-profile-membership.tier-owner,
.membership-badge.tier-owner {
    color: #fff6dc !important;
    border-color: #f0cc66 !important;
    background: linear-gradient(180deg, rgba(168, 128, 28, 0.96) 0%, rgba(54, 40, 10, 0.98) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 244, 196, 0.24), 0 0 12px rgba(255, 215, 120, 0.38), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.public-profile-membership.tier-silver,
.membership-badge.tier-silver {
    color: #f0f0f0 !important;
    border-color: #b0b0b0 !important;
    background: linear-gradient(180deg, rgba(82, 82, 88, 0.94) 0%, rgba(32, 32, 36, 0.97) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.public-profile-membership.tier-gold,
.membership-badge.tier-gold {
    color: #fff6c8 !important;
    border-color: #ffd700 !important;
    background: linear-gradient(180deg, rgba(148, 118, 22, 0.94) 0%, rgba(58, 44, 8, 0.97) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 248, 200, 0.24), 0 0 10px rgba(255, 215, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.public-profile-commander-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.public-profile-royalty-name-badge {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.public-profile-visibility-pill {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    letter-spacing: 0.4px !important;
}

.public-profile-visibility-pill.is-public {
    color: #e8e8e8 !important;
    border: 1px solid rgba(120, 120, 120, 0.65) !important;
    background: #6e6e6e !important;
}

.public-profile-visibility-pill.is-private {
    color: #d4a8a8 !important;
    border: 1px solid rgba(160, 80, 80, 0.4) !important;
    background: rgba(48, 18, 18, 0.45) !important;
}

.public-profile-split-body.public-profile-split-body--restricted .public-profile-split-left {
    flex: 1 1 100% !important;
}

.public-profile-split-body--private-only {
    display: block !important;
    margin-top: 4px !important;
}

.public-profile-split-body--private-only .public-profile-bio-section {
    width: 100% !important;
}

.public-profile-identity-header--private-only .public-profile-identity-copy {
    justify-content: center !important;
}

.public-profile-identity-header--private-only .public-profile-commander-name {
    margin: 0 !important;
}

.public-profile-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px 22px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(241, 224, 172, 0.72) !important;
    margin-bottom: 4px !important;
}

.public-profile-meta-row strong {
    color: #b89030 !important;
    font-weight: 600 !important;
}

.public-profile-split-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin-bottom: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.18) !important;
    text-align: left !important;
}

.public-profile-split-column {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.public-profile-split-left {
    flex: 1 1 52% !important;
}

.public-profile-split-right {
    flex: 1 1 48% !important;
    gap: 14px !important;
}

.public-profile-split-body .public-profile-section {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.public-profile-bio-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.public-profile-bio-panel .public-profile-bio-text,
.public-profile-bio-panel .public-profile-private-msg,
.public-profile-bio-panel .public-profile-bio-empty {
    margin: 0 !important;
    padding: 0 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.public-profile-bio-panel .public-profile-empty-state {
    text-align: center !important;
    padding: 24px 8px !important;
}

.public-profile-split-right .public-profile-medals-grid,
.public-profile-split-right .public-profile-awards-grid {
    min-height: 52px !important;
}

.public-profile-split-right .public-profile-age-history-list {
    max-height: 200px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.public-profile-split-right .public-profile-empty-state {
    text-align: left !important;
    padding: 8px 4px !important;
}

@media (max-width: 640px) {
    .public-profile-split-body {
        flex-direction: column !important;
    }

    .public-profile-split-left,
    .public-profile-split-right {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

}

.public-profile-section {
    margin-bottom: 16px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.18) !important;
    text-align: left !important;
}

.public-profile-section-label {
    margin: 0 0 8px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    color: #c5a059 !important;
    letter-spacing: 1px !important;
}

.public-profile-bio-text {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    color: #f1e0ac !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.public-profile-empty-state {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    color: rgba(241, 224, 172, 0.55) !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 10px 6px !important;
}

.public-profile-age-history-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.public-profile-age-entry {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    border-radius: 3px !important;
    background: rgba(12, 10, 8, 0.55) !important;
}

.public-profile-age-name {
    font-family: 'Cinzel', serif !important;
    font-size: 0.8rem !important;
    color: #ffd700 !important;
    letter-spacing: 0.4px !important;
}

.public-profile-age-meta {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(241, 224, 172, 0.62) !important;
}

.public-profile-medals-grid,
.public-profile-awards-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
    min-height: 44px !important;
}

.public-profile-medal-chip {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    cursor: help !important;
    outline: none !important;
}

.public-profile-medal-icon-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    border: 2px solid rgba(168, 196, 232, 0.55) !important;
    background: radial-gradient(circle at 30% 25%, rgba(48, 58, 78, 0.95) 0%, rgba(14, 11, 8, 1) 100%) !important;
    box-shadow: 0 0 10px rgba(120, 160, 220, 0.18) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.public-profile-medal-icon-img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    display: block !important;
    pointer-events: none !important;
}

.public-profile-medal-icon-fallback {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.public-profile-medal-chip:hover .public-profile-medal-icon-shell,
.public-profile-medal-chip:focus-visible .public-profile-medal-icon-shell {
    transform: scale(1.08) !important;
    border-color: #c8dcff !important;
    box-shadow: 0 0 14px rgba(168, 196, 255, 0.35) !important;
}

.public-profile-split-right .public-profile-medal-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: translateY(4px) !important;
}

.public-profile-split-right .public-profile-medal-chip:hover .public-profile-medal-tooltip,
.public-profile-split-right .public-profile-medal-chip:focus-visible .public-profile-medal-tooltip {
    transform: translateY(0) !important;
}

.public-profile-medal-tooltip {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 8px) !important;
    transform: translateX(-50%) translateY(4px) !important;
    min-width: 180px !important;
    max-width: 240px !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(168, 196, 232, 0.45) !important;
    background: rgba(10, 8, 6, 0.98) !important;
    color: #f1e0ac !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 6 !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.public-profile-medal-chip:hover .public-profile-medal-tooltip,
.public-profile-medal-chip:focus-visible .public-profile-medal-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

.public-profile-medals-empty {
    width: 100% !important;
}

.public-profile-award-chip {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    cursor: help !important;
    outline: none !important;
}

.public-profile-award-icon-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-profile-award-icon-img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    display: block !important;
    pointer-events: none !important;
    transition: transform 0.15s ease, filter 0.15s ease !important;
}

.public-profile-award-icon-fallback {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transition: transform 0.15s ease !important;
}

.public-profile-award-chip:hover .public-profile-award-icon-img,
.public-profile-award-chip:focus-visible .public-profile-award-icon-img,
.public-profile-award-chip:hover .public-profile-award-icon-fallback,
.public-profile-award-chip:focus-visible .public-profile-award-icon-fallback {
    transform: scale(1.08) !important;
}

.public-profile-award-chip:hover .public-profile-award-icon-img,
.public-profile-award-chip:focus-visible .public-profile-award-icon-img {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.45)) !important;
}

.public-profile-split-right .public-profile-award-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: translateY(4px) !important;
}

.public-profile-split-right .public-profile-award-chip:hover .public-profile-award-tooltip,
.public-profile-split-right .public-profile-award-chip:focus-visible .public-profile-award-tooltip {
    transform: translateY(0) !important;
}

.public-profile-award-tooltip {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 8px) !important;
    transform: translateX(-50%) translateY(4px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 200px !important;
    max-width: 260px !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    background: rgba(10, 8, 6, 0.98) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 6 !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.public-profile-award-tooltip-title {
    display: block !important;
    color: #ffd700 !important;
    font-family: var(--font-title) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.public-profile-award-tooltip-body {
    display: block !important;
    color: #d8c89a !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.public-profile-award-chip:hover .public-profile-award-tooltip,
.public-profile-award-chip:focus-visible .public-profile-award-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

.public-profile-awards-empty {
    width: 100% !important;
}

.public-profile-alliance-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.public-profile-alliance-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    background: linear-gradient(145deg, rgba(32, 26, 18, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%) !important;
}

.public-profile-alliance-name {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.75rem !important;
    color: #f1e0ac !important;
}

.public-profile-empty-roster,
.public-profile-private-msg {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.8rem !important;
    color: rgba(241, 224, 172, 0.55) !important;
    font-style: italic !important;
}

.public-profile-private-notice {
    border-top: none !important;
    padding-top: 0 !important;
}

.public-profile-card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-top: 8px !important;
    padding-top: 14px !important;
    border-top: 1px double rgba(212, 175, 55, 0.28) !important;
}

.public-profile-edit-link-btn,
.public-profile-dismiss-btn {
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    padding: 9px 18px !important;
    cursor: pointer !important;
    border-radius: 2px !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    transition: filter 0.2s ease, transform 0.1s ease !important;
}

.public-profile-edit-link-btn {
    background-image: url('images/borderedcontainer_thin.png') !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    color: #ffd700 !important;
}

.public-profile-dismiss-btn {
    border: 1px solid rgba(184, 144, 48, 0.25) !important;
    color: #f1e0ac !important;
    background: rgba(12, 10, 8, 0.85) !important;
}

.public-profile-edit-link-btn:hover,
.public-profile-dismiss-btn:hover {
    filter: brightness(1.2) !important;
}

.public-profile-edit-link-btn:active,
.public-profile-dismiss-btn:active {
    transform: scale(0.98) !important;
}

/* ==========================================================================
   SECTION 18: CRITICAL INTERMISSION ALERT TIMELINES
   ========================================================================== */

@keyframes criticalIntermissionPulsate {
    0% {
        background: rgba(15, 13, 10, 0.95) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.95) !important;
    }
    50% {
        /* High Wave Crest: Volumetric crimson ambient blood backing expands outwards dynamically */
        background: rgba(45, 10, 10, 0.98) !important;
        box-shadow: 0 0 25px rgba(204, 0, 0, 0.4), 0 15px 40px rgba(0,0,0,0.95) !important;
    }
    100% {
        background: rgba(15, 13, 10, 0.95) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.95) !important;
    }
}

/* ==========================================================================
   SECTION 19: deployment countdown (see .portal-age-countdown-panel near Block 11)
   ========================================================================== */

/* ==========================================================================
   SECTION 14: FLOATING STAGE AUDIO PLAYER PLACEMENT MAPS
   ========================================================================== */

/* FORCES THE MASTER AUDIO CONSOLE CHASSIS CARDS BOX OPEN SIZES */
#portal-floating-media-player-deck {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 999999999 !important; /* Floats safely far above background tiles grids */
    
    width: 290px !important;
    height: auto !important;
    min-height: 155px !important;
    max-height: none !important;
    
    background: #15181f !important;
    background-image: linear-gradient(135deg, #242936 0%, #15181f 50%, #0a0c10 100%) !important;
    border: 2px solid #38404d !important;
    border-top-color: #4f5a6b !important;
    border-left-color: #444d5c !important;
    border-bottom-color: #1a1e24 !important;
    border-right-color: #22262f !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.95), 0 15px 35px rgba(0, 0, 0, 0.95) !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Spreads interface rows evenly down your 155px box height */
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* HIGH-PRIORITY CONTENT CONFINEMENT MASK DEFINITIONS */
#portal-floating-media-player-deck .media-track-identity-row,
#portal-floating-media-player-deck .media-timeline-interface-wrapper,
#portal-floating-media-player-deck .media-control-buttons-row,
#portal-floating-media-player-deck .media-volume-mixer-sub-row {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    max-width: 262px !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    box-sizing: border-box !important;
}

/* 1. BRAND TRACK IDENTIFICATION HEADER ROW */
#portal-floating-media-player-deck .media-track-identity-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    height: 36px !important;
}

/* Expand control — collapses full player chrome (all viewports) */
.media-player-expand-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    border-radius: 3px !important;
    background: rgba(13, 15, 20, 0.9) !important;
    color: #c5a059 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.media-player-expand-icon {
    font-size: 0.75rem !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

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

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

#portal-floating-media-player-deck:not(.is-media-expanded) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 12px 8px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
}

#portal-floating-media-player-deck:not(.is-media-expanded) .media-track-identity-row {
    height: auto !important;
    min-height: 0 !important;
}

#portal-floating-media-player-deck.is-media-expanded {
    height: auto !important;
    min-height: 155px !important;
    max-height: none !important;
    padding: 12px 14px !important;
    gap: 8px !important;
}

/* Mobile portal nav — hidden on desktop (see mobile-responsive.css) */
.portal-mobile-nav-shell {
    display: none;
}

#portal-floating-media-player-deck .media-disc-vinyl-icon-housing {
    width: 32px !important;
    height: 32px !important;
    background: #090b0e !important;
    border: 1px solid rgba(184, 144, 48, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#portal-floating-media-player-deck .vinyl-spinning-glyph {
    font-size: 1rem !important;
    display: inline-block !important;
    line-height: 1 !important;
}

#portal-floating-media-player-deck .vinyl-active-spinning-loop {
    animation: continuousVinylRotation 3.5s infinite linear !important;
}

@keyframes continuousVinylRotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#portal-floating-media-player-deck .media-meta-text-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    flex: 1 !important;
}

#portal-floating-media-player-deck .media-track-title-ticker {
    font-family: 'Share Tech Mono', 'Orbitron', monospace !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    color: #e2ba3b !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 6px rgba(226, 186, 59, 0.4) !important;
    white-space: nowrap !important;
    width: 100% !important;
}

#portal-floating-media-player-deck .media-artist-label {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.62rem !important;
    color: rgba(241, 224, 172, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 1px !important;
}

/* 2. PROGRESSION SLIDER INTERFACE CORRIDORS */
#portal-floating-media-player-deck .media-timeline-interface-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    height: 16px !important;
}

#portal-floating-media-player-deck .media-time-stamp-clock {
    font-family: 'Consolas', monospace !important;
    font-size: 0.65rem !important;
    color: rgba(241, 224, 172, 0.5) !important;
    min-width: 32px !important;
}

#portal-floating-media-player-deck .media-scrub-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 180px !important;
    height: 4px !important;
    background: #090b0e !important;
    border: 1px solid rgba(184, 144, 48, 0.15) !important;
    border-radius: 2px !important;
    outline: none !important;
    cursor: pointer !important;
}

#portal-floating-media-player-deck .media-scrub-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #e2ba3b !important;
    border: 1px solid #000 !important;
    box-shadow: 0 0 4px #000 !important;
}

/* 3. CONTROL ACTIONS TIMELINE INTERFACE ROW TRAYS */
#portal-floating-media-player-deck .media-control-buttons-row {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    height: 32px !important;
}

#portal-floating-media-player-deck .media-playlist-block {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 4px !important;
    margin-top: 2px !important;
}

#portal-floating-media-player-deck .media-playlist-track-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-height: 108px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    border-radius: 3px !important;
    background: rgba(8, 10, 14, 0.92) !important;
    box-sizing: border-box !important;
}

#portal-floating-media-player-deck .media-playlist-track-item {
    margin: 0 !important;
    padding: 2px !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.08) !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
}

#portal-floating-media-player-deck .media-playlist-track-item:last-child {
    border-bottom: none !important;
}

#portal-floating-media-player-deck .media-playlist-track-item.is-active {
    padding: 1px !important;
    border: 1px solid rgba(255, 215, 0, 0.55) !important;
    background: rgba(184, 144, 48, 0.12) !important;
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.12), 0 0 8px rgba(184, 144, 48, 0.2) !important;
}

#portal-floating-media-player-deck .media-playlist-track-btn {
    display: block !important;
    width: 100% !important;
    padding: 7px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #b0b8c4 !important;
    font-family: 'Share Tech Mono', 'Consolas', monospace !important;
    font-size: 0.62rem !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

#portal-floating-media-player-deck .media-playlist-track-btn:hover {
    background: rgba(184, 144, 48, 0.1) !important;
    color: #f1e0ac !important;
}

#portal-floating-media-player-deck .media-playlist-track-btn.is-active {
    background: rgba(184, 144, 48, 0.2) !important;
    border-color: rgba(255, 215, 0, 0.35) !important;
    color: #ffd700 !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.35) !important;
}

#portal-floating-media-player-deck .media-deck-btn {
    background: rgba(13, 15, 20, 0.9) !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    border-radius: 3px !important;
    width: 42px !important;
    height: 28px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: inset 0 0 4px #000 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

#portal-floating-media-player-deck .media-deck-btn.master-play-trigger {
    width: 52px !important;
    border-color: rgba(184, 144, 48, 0.6) !important;
    background: rgba(22, 26, 36, 0.95) !important;
}

#portal-floating-media-player-deck .media-deck-btn.mini-btn-utility {
    width: 32px !important;
    height: 24px !important;
    border-color: rgba(184, 144, 48, 0.15) !important;
    opacity: 0.5 !important;
}

#portal-floating-media-player-deck .media-deck-btn.mini-btn-utility.utility-active-glow {
    opacity: 1 !important;
    border-color: #ffd700 !important;
    background: rgba(184, 144, 48, 0.1) !important;
}

#portal-floating-media-player-deck .media-deck-btn:hover {
    background: rgba(184, 144, 48, 0.12) !important;
    border-color: #ffd700 !important;
}

#portal-floating-media-player-deck .media-btn-icon-symbol {
    color: #b0b8c4 !important;
    font-size: 0.8rem !important;
}
#portal-floating-media-player-deck .media-btn-icon-symbol.smaller-size { font-size: 0.7rem !important; }
#portal-floating-media-player-deck .media-btn-icon-symbol.volume-icon-size { font-size: 0.8rem !important; }

#portal-floating-media-player-deck .media-deck-btn:hover .media-btn-icon-symbol,
#portal-floating-media-player-deck .media-deck-btn.utility-active-glow .media-btn-icon-symbol {
    color: #ffd700 !important;
    text-shadow: 0 0 6px rgba(255,215,0,0.6) !important;
}

/* 4. VOLUME MIXER SUB-ROW STRIP TRAYS */
#portal-floating-media-player-deck .media-volume-mixer-sub-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    height: 24px !important;
    border-top: 1px dashed rgba(184, 144, 48, 0.15) !important;
    padding-top: 8px !important;
}

#portal-floating-media-player-deck .media-mute-toggle-inline {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

#portal-floating-media-player-deck .media-vol-range-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 1 !important;
    height: 4px !important;
    background: #090b0e !important;
    border-radius: 2px !important;
    outline: none !important;
    cursor: pointer !important;
}

#portal-floating-media-player-deck .media-vol-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #b0b8c4 !important;
    border: 1px solid #111 !important;
    transition: background-color 0.15s ease !important;
}
#portal-floating-media-player-deck .media-vol-range-slider::-webkit-slider-thumb:hover {
    background: #ffd700 !important;
}

/* ==========================================================================
   SECTION 15: COMMANDER HUB CENTERED MODAL (PROFILE / MESSAGES / SETTINGS)
   ========================================================================== */

.commander-hub-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 250000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.82) !important;
    opacity: 0;
    transition: opacity 0.28s ease !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

.commander-hub-overlay.is-visible {
    display: flex !important;
}

.commander-hub-dialog {
    position: relative !important;
    width: min(1180px, 96vw) !important;
    height: min(760px, 90vh) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.portal-commander-hub-page {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    box-sizing: border-box !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-top-nav {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 4px !important;
}

.portal-commander-hub-page .commander-hub-top-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


.profile-avatar-armory-slot {
    width: 100% !important;
    box-sizing: border-box !important;
}

.profile-avatar-preset-bin {
    width: 100% !important;
    box-sizing: border-box !important;
}

.portal-commander-hub-intro {
    text-align: left !important;
}

.portal-commander-hub-title {
    margin: 0 0 6px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.35rem !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.82rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.62) !important;
}

#lore-modal .lore-content-area {
    position: relative !important;
}

.commander-hub-close-btn {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    z-index: 12 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.commander-hub-close-icon {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
}

.commander-hub-top-nav {
    position: relative !important;
    height: 71px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    padding: 0 48px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.commander-hub-top-nav-bg {
    position: absolute !important;
    inset: 0 !important;
    background-image: url('images/topnavigationbar.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.commander-hub-top-tab {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: rgba(241, 224, 172, 0.65) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    padding: 10px 18px !important;
    cursor: pointer !important;
    text-shadow: 2px 2px 4px #000 !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

.commander-hub-top-tab:hover,
.commander-hub-top-tab.active {
    color: #ffd700 !important;
    border-bottom-color: #b89030 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.65) !important;
}

.commander-hub-body-frame {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    padding: 28px 32px 24px 32px !important;
    box-sizing: border-box !important;
}

.commander-hub-subnav-column {
    width: 210px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: 0 !important;
}

.commander-hub-subnav-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.85rem !important;
    color: #c5a059 !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    text-align: center !important;
}

.commander-hub-subnav-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-right: 4px !important;
}

.commander-hub-subnav-item {
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    color: rgba(241, 224, 172, 0.75) !important;
    padding: 11px 14px !important;
    cursor: pointer !important;
    text-align: center !important;
    border: 1px solid rgba(184, 144, 48, 0.22) !important;
    border-left: 3px solid rgba(184, 144, 48, 0.4) !important;
    border-radius: 2px !important;
    background: linear-gradient(145deg, rgba(26, 22, 16, 0.94) 0%, rgba(11, 9, 7, 0.98) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}

.commander-hub-subnav-item:hover {
    background: linear-gradient(145deg, rgba(38, 32, 22, 0.96) 0%, rgba(16, 13, 9, 0.99) 100%) !important;
    border-color: rgba(184, 144, 48, 0.55) !important;
    border-left-color: #b89030 !important;
    color: #ffd700 !important;
    transform: translateX(2px) !important;
    box-shadow: inset 0 0 10px rgba(184, 144, 48, 0.1), 0 3px 10px rgba(0, 0, 0, 0.5) !important;
}

.commander-hub-subnav-item.active {
    color: #ffd700 !important;
    border-color: #b89030 !important;
    border-left-color: #ffd700 !important;
    background: linear-gradient(145deg, rgba(48, 40, 26, 0.98) 0%, rgba(20, 16, 11, 1) 100%) !important;
    box-shadow: inset 0 0 16px rgba(184, 144, 48, 0.16), 0 0 12px rgba(184, 144, 48, 0.14) !important;
}

.commander-hub-content-pane {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.commander-hub-section-title {
    font-family: 'Cinzel', serif !important;
    font-size: 0.95rem !important;
    color: #ffd700 !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
    min-height: 1.2rem !important;
}

.commander-hub-section-title:empty {
    display: none !important;
}

.commander-hub-profile-header-host {
    flex-shrink: 0 !important;
}

.commander-hub-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    color: #f1e0ac !important;
}

.commander-hub-settings-action-deck {
    flex-shrink: 0 !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 4px !important;
}

.commander-hub-settings-action-deck[hidden] {
    display: none !important;
}

.commander-hub-settings-action-deck:not([hidden]) {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 56px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
    border-top: 1px double rgba(212, 175, 55, 0.3) !important;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 6, 4, 0.55) 100%) !important;
}

.commander-hub-profile-footer-host {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
}

#commander-hub-modal .commander-hub-profile-footer-host .profile-fullscreen-controls,
#portal-commander-hub-page .commander-hub-profile-footer-host .profile-fullscreen-controls {
    transform: translate(-40px, -5px) !important;
    justify-content: flex-end !important;
    gap: 15px !important;
    pointer-events: auto !important;
}

#commander-hub-modal .commander-hub-profile-footer-host .confirm-btn,
#commander-hub-modal .commander-hub-profile-footer-host .revert-btn,
#portal-commander-hub-page .commander-hub-profile-footer-host .confirm-btn,
#portal-commander-hub-page .commander-hub-profile-footer-host .revert-btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Settings: fill modal height; scroll only when content overflows */
#commander-hub-modal.commander-hub-settings-active .commander-hub-content-pane, #portal-commander-hub-page.commander-hub-settings-active .commander-hub-content-pane {
    min-height: 0 !important;
}

#commander-hub-modal.commander-hub-settings-active .commander-hub-body, #portal-commander-hub-page.commander-hub-settings-active .commander-hub-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#commander-hub-modal.commander-hub-settings-active .commander-hub-body > .settings-scroll-wrapper, #portal-commander-hub-page.commander-hub-settings-active .commander-hub-body > .settings-scroll-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
}

#commander-hub-modal.commander-hub-settings-active .commander-hub-body .settings-controls, #portal-commander-hub-page.commander-hub-settings-active .commander-hub-body .settings-controls {
    display: none !important;
}

#commander-hub-modal.commander-hub-messages-active .commander-hub-body, #portal-commander-hub-page.commander-hub-messages-active .commander-hub-body {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#commander-hub-modal.commander-hub-messages-active .message-workspace-canvas, #portal-commander-hub-page.commander-hub-messages-active .message-workspace-canvas {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

#commander-hub-modal .message-mailbox-canvas, #portal-commander-hub-page .message-mailbox-canvas {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
}

#commander-hub-modal .msg-folder-tab-bar, #portal-commander-hub-page .msg-folder-tab-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.35) !important;
    margin-bottom: 8px !important;
    padding: 0 4px !important;
}

#commander-hub-modal .msg-folder-tab, #portal-commander-hub-page .msg-folder-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(241, 224, 172, 0.65) !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}

#commander-hub-modal .msg-folder-tab:hover, #portal-commander-hub-page .msg-folder-tab:hover {
    color: #f1e0ac !important;
    background: rgba(43, 36, 26, 0.45) !important;
}

#commander-hub-modal .msg-folder-tab.active, #portal-commander-hub-page .msg-folder-tab.active {
    color: #f1e0ac !important;
    border-bottom-color: #c9a227 !important;
    background: rgba(43, 36, 26, 0.65) !important;
}

#commander-hub-modal .msg-folder-panel, #portal-commander-hub-page .msg-folder-panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

#commander-hub-modal .msg-folder-panel-hidden, #portal-commander-hub-page .msg-folder-panel-hidden {
    display: none !important;
}

#commander-hub-modal .msg-folder-panel-active .msg-portal-scroll-bin, #portal-commander-hub-page .msg-folder-panel-active .msg-portal-scroll-bin {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

#commander-hub-modal.commander-hub-messages-active .message-compose-canvas, #portal-commander-hub-page.commander-hub-messages-active .message-compose-canvas {
    height: 100% !important;
    max-height: 100% !important;
}

#commander-hub-modal .msg-compose-context-body, #portal-commander-hub-page .msg-compose-context-body {
    max-height: 110px !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.commander-hub-profile-footer-host .settings-controls,
.commander-hub-profile-footer-host .profile-fullscreen-controls {
    margin-top: 8px !important;
}

/* Profile layout inside commander hub */
#commander-hub-modal.commander-hub-profile-active .commander-hub-subnav-column,
#portal-commander-hub-page.commander-hub-profile-active .commander-hub-subnav-column,
#portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-subnav-column {
    display: none !important;
}

#commander-hub-modal.commander-hub-profile-active .commander-hub-body-frame, #portal-commander-hub-page.commander-hub-profile-active .commander-hub-body-frame {
    padding-top: 20px !important;
}

#commander-hub-modal.commander-hub-profile-active .commander-hub-section-title,
#portal-commander-hub-page.commander-hub-profile-active .commander-hub-section-title,
#portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-section-title {
    display: none !important;
}

/* View Profile: no horizontal scroll; body hugs content (no empty stretch at bottom) */
#commander-hub-modal.commander-hub-view-profile-active.commander-hub-overlay .commander-hub-dialog,
#commander-hub-modal.commander-hub-view-profile-active .commander-hub-dialog {
    height: auto !important;
    max-height: min(760px, 90vh) !important;
}

#commander-hub-modal.commander-hub-view-profile-active .commander-hub-body-frame,
#portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-body-frame {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 14px 22px 10px 22px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    align-items: stretch !important;
}

@media (min-width: 1025px) {
    #commander-hub-modal.commander-hub-view-profile-active .commander-hub-body-frame,
    #portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-body-frame {
        padding: 12px 14px 10px 14px !important;
    }

    #portal-commander-hub-page.commander-hub-view-profile-active.commander-hub-page-canvas {
        width: 100% !important;
        max-width: 100% !important;
    }

    #commander-hub-modal.commander-hub-view-profile-active .commander-hub-dialog {
        width: min(1180px, 96vw) !important;
    }

    #commander-hub-modal.commander-hub-view-profile-active .public-profile-hub-inline,
    #portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline,
    #commander-hub-modal.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-split-body,
    #portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-split-body {
        width: 100% !important;
        max-width: 100% !important;
    }

    #commander-hub-modal.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-split-body,
    #portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-split-body {
        gap: 22px !important;
    }
}

#commander-hub-modal.commander-hub-view-profile-active .commander-hub-body-frame {
    max-height: calc(90vh - 120px) !important;
    overflow-y: auto !important;
}

#commander-hub-modal.commander-hub-view-profile-active .commander-hub-content-pane,
#portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-content-pane {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    align-self: stretch !important;
}

#commander-hub-modal.commander-hub-view-profile-active .commander-hub-profile-header-host,
#portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-profile-header-host,
#commander-hub-modal.commander-hub-view-profile-active .commander-hub-profile-footer-host,
#portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-profile-footer-host {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#commander-hub-modal.commander-hub-view-profile-active .commander-hub-body,
#portal-commander-hub-page.commander-hub-view-profile-active .commander-hub-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    align-self: stretch !important;
}

.public-profile-hub-inline {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

#commander-hub-modal.commander-hub-view-profile-active .public-profile-hub-inline,
#portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline {
    margin-bottom: 0 !important;
}

#commander-hub-modal.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-identity-header,
#portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-identity-header {
    margin-bottom: 12px !important;
}

#commander-hub-modal.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-split-body,
#portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-split-body {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
    padding-top: 10px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

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

#commander-hub-modal.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-card-actions--hub,
#portal-commander-hub-page.commander-hub-view-profile-active .public-profile-hub-inline .public-profile-card-actions--hub {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}

#commander-hub-modal.commander-hub-view-profile-active .public-profile-medal-tooltip,
#portal-commander-hub-page.commander-hub-view-profile-active .public-profile-medal-tooltip,
#commander-hub-modal.commander-hub-view-profile-active .public-profile-award-tooltip,
#portal-commander-hub-page.commander-hub-view-profile-active .public-profile-award-tooltip {
    max-width: min(240px, 100%) !important;
}

#commander-hub-modal.commander-hub-profile-active .profile-fullscreen-header-card, #portal-commander-hub-page.commander-hub-profile-active .profile-fullscreen-header-card {
    width: 100% !important;
    margin-bottom: 12px !important;
}

#commander-hub-modal.commander-hub-profile-active .profile-fullscreen-split-row,
#portal-commander-hub-page.commander-hub-profile-active .profile-fullscreen-split-row,
#commander-hub-modal.commander-hub-profile-active .profile-fullscreen-footer-deck,
#portal-commander-hub-page.commander-hub-profile-active .profile-fullscreen-footer-deck {
    width: 100% !important;
}

#commander-hub-modal.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas, #portal-commander-hub-page.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas {
    max-height: none !important;
    overflow: visible !important;
}

#commander-hub-modal .message-workspace-canvas, #portal-commander-hub-page .message-workspace-canvas {
    height: 100% !important;
    min-height: 420px !important;
}

#commander-hub-modal #msg-directory-floating-drawer, #portal-commander-hub-page #msg-directory-floating-drawer {
    z-index: 300001 !important;
}

#commander-hub-modal .msg-directory-drawer-body > .drawer-category-scroll-bin,
#portal-commander-hub-page .msg-directory-drawer-body > .drawer-category-scroll-bin,
#commander-hub-modal .msg-directory-drawer-body > #drawer-main-category-view,
#portal-commander-hub-page .msg-directory-drawer-body > #drawer-main-category-view,
#commander-hub-modal .msg-directory-drawer-body > #drawer-drilldown-category-view,
#portal-commander-hub-page .msg-directory-drawer-body > #drawer-drilldown-category-view {
    justify-content: flex-start !important;
    align-content: flex-start !important;
}

/* Profile: bio field uses bordered frame art directly (no white inner panel) */
#commander-hub-modal .bio-bezel-frame-wrapper , #portal-commander-hub-page .bio-bezel-frame-wrapper {
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
}

#commander-hub-modal #profile-bio-input , #portal-commander-hub-page #profile-bio-input {
    display: block !important;
    width: 100% !important;
    min-height: 112px !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    background-color: transparent !important;
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color-scheme: dark !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: #f1e0ac !important;
    padding: 16px 20px !important;
    margin: 0 !important;
}

#commander-hub-modal #profile-bio-input::placeholder , #portal-commander-hub-page #profile-bio-input::placeholder {
    color: rgba(241, 224, 172, 0.45) !important;
}

/* Profile: justified copy alignment */
#commander-hub-modal .profile-fullscreen-header-card,
#portal-commander-hub-page .profile-fullscreen-header-card,
#commander-hub-modal .profile-header-identity-group,
#portal-commander-hub-page .profile-header-identity-group,
#commander-hub-modal .profile-identity-sub-row,
#portal-commander-hub-page .profile-identity-sub-row,
#commander-hub-modal .profile-fullscreen-canvas,
#portal-commander-hub-page .profile-fullscreen-canvas,
#commander-hub-modal .profile-section-box,
#portal-commander-hub-page .profile-section-box,
#commander-hub-modal .profile-section-box label,
#portal-commander-hub-page .profile-section-box label,
#commander-hub-modal .profile-field-row,
#portal-commander-hub-page .profile-field-row,
#commander-hub-modal .toggle-label-text,
#portal-commander-hub-page .toggle-label-text,
#commander-hub-modal .empty-roster-txt,
#portal-commander-hub-page .empty-roster-txt,
#commander-hub-modal .alliance-capsule-badge,
#portal-commander-hub-page .alliance-capsule-badge,
#commander-hub-modal .capsule-username-text , #portal-commander-hub-page .capsule-username-text {
    text-align: justify !important;
    text-justify: inter-word !important;
}

#commander-hub-modal .profile-identity-title-row,
#portal-commander-hub-page .profile-identity-title-row,
#commander-hub-modal .profile-main-name,
#portal-commander-hub-page .profile-main-name,
#commander-hub-modal .membership-badge,
#portal-commander-hub-page .membership-badge,
#commander-hub-modal .settings-label , #portal-commander-hub-page .settings-label {
    text-align: left !important;
}

#commander-hub-modal .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: 90px !important;
}

/* Portal gold scrollbar — match commander hub / profile aesthetic */
.portal-gold-scrollbar {
    scrollbar-width: thin !important;
    scrollbar-color: #9a7a32 rgba(10, 8, 6, 0.88) !important;
}

.portal-gold-scrollbar::-webkit-scrollbar {
    width: 9px !important;
    height: 9px !important;
    display: block !important;
}

.portal-gold-scrollbar::-webkit-scrollbar-track {
    background: rgba(10, 8, 6, 0.88) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.12) !important;
}

.portal-gold-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c5a059 0%, #7a5f24 100%) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 215, 0, 0.22) !important;
}

.portal-gold-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffd700 0%, #9a7a32 100%) !important;
}

/* Portal-wide gold scrollbars (main page canvas keeps hidden track) */
*:not(#main-dashboard-canvas) {
    scrollbar-width: thin !important;
    scrollbar-color: #9a7a32 rgba(10, 8, 6, 0.88) !important;
}

*:not(#main-dashboard-canvas)::-webkit-scrollbar {
    width: 9px !important;
    height: 9px !important;
    display: block !important;
}

*:not(#main-dashboard-canvas)::-webkit-scrollbar-track {
    background: rgba(10, 8, 6, 0.88) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.12) !important;
}

*:not(#main-dashboard-canvas)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c5a059 0%, #7a5f24 100%) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 215, 0, 0.22) !important;
}

*:not(#main-dashboard-canvas)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffd700 0%, #9a7a32 100%) !important;
}

html.royal-armies-custom-cursor *::-webkit-scrollbar,
html.royal-armies-custom-cursor *::-webkit-scrollbar-track,
html.royal-armies-custom-cursor *::-webkit-scrollbar-thumb,
html.royal-armies-custom-cursor *::-webkit-scrollbar-corner {
    cursor: none !important;
}

/* Mailbox read popup — explicit width (flex parent otherwise shrink-wraps to 360px text) */
body #commander-suicide-overlay.mailbox-reading-overlay > .suicide-popup-bezel {
    width: min(840px, calc(100vw - 40px)) !important;
    max-width: min(840px, calc(100vw - 40px)) !important;
    min-width: min(840px, calc(100vw - 40px)) !important;
    min-height: 300px !important;
    padding: 32px 44px 28px 44px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

body #commander-suicide-overlay.mailbox-reading-overlay .suicide-popup-body-text {
    max-width: none !important;
    width: 100% !important;
    margin: 15px 0 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    text-align: left !important;
}

#commander-suicide-overlay.mailbox-reading-overlay .msg-reading-body-scroll {
    text-align: justify !important;
    text-justify: inter-word !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    min-height: 100px !important;
    max-height: min(340px, 50vh) !important;
    overflow-y: auto !important;
    padding: 6px 4px 6px 0 !important;
    white-space: pre-wrap !important;
    box-sizing: border-box !important;
}

#commander-suicide-overlay .suicide-popup-body-text,
#commander-penalty-overlay .suicide-popup-body-text,
#commander-security-overlay .suicide-popup-body-text,
.msg-portal-scroll-bin,
.drawer-category-scroll-bin,
.chat-scrolling-messages-bin,
.leaderboard-scrollable-table-bin,
.player-roster-scrollable-track-bin,
.chronicles-milestones-scroll-bin,
.card-scrollable-body-text,
.lore-reader-prose-scroll,
.settings-scroll-wrapper,
.commander-hub-body,
.commander-hub-subnav-list {
    scrollbar-width: thin !important;
    scrollbar-color: #9a7a32 rgba(10, 8, 6, 0.88) !important;
}

/* Profile: themed scrollbar */
#commander-hub-modal.commander-hub-profile-active .commander-hub-body,
#portal-commander-hub-page.commander-hub-profile-active .commander-hub-body,
#commander-hub-modal.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas,
#portal-commander-hub-page.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas,
#commander-hub-modal.commander-hub-profile-active .compact-grid-scroll-track , #portal-commander-hub-page.commander-hub-profile-active .compact-grid-scroll-track {
    scrollbar-width: thin !important;
    scrollbar-color: #9a7a32 rgba(14, 11, 8, 0.85) !important;
}

#commander-hub-modal.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar,
#portal-commander-hub-page.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar,
#commander-hub-modal.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar,
#portal-commander-hub-page.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar,
#commander-hub-modal.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar , #portal-commander-hub-page.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar {
    width: 9px !important;
    height: 9px !important;
    display: block !important;
}

#commander-hub-modal.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar-track,
#portal-commander-hub-page.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar-track,
#commander-hub-modal.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar-track,
#portal-commander-hub-page.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar-track,
#commander-hub-modal.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar-track , #portal-commander-hub-page.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar-track {
    background: rgba(10, 8, 6, 0.88) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.12) !important;
}

#commander-hub-modal.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar-thumb,
#portal-commander-hub-page.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar-thumb,
#commander-hub-modal.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar-thumb,
#portal-commander-hub-page.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar-thumb,
#commander-hub-modal.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar-thumb , #portal-commander-hub-page.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c5a059 0%, #7a5f24 100%) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 215, 0, 0.22) !important;
}

#commander-hub-modal.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar-thumb:hover,
#portal-commander-hub-page.commander-hub-profile-active .commander-hub-body::-webkit-scrollbar-thumb:hover,
#commander-hub-modal.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar-thumb:hover,
#portal-commander-hub-page.commander-hub-profile-active .settings-scroll-wrapper.profile-fullscreen-canvas::-webkit-scrollbar-thumb:hover,
#commander-hub-modal.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar-thumb:hover , #portal-commander-hub-page.commander-hub-profile-active .compact-grid-scroll-track::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffd700 0%, #9a7a32 100%) !important;
}

/* Rank reset controls locked until enrolled in an active Age round or uses exhausted */
#commander-hub-modal .rank-reset-action-btn.rank-reset-disabled,
#portal-commander-hub-page .rank-reset-action-btn.rank-reset-disabled,
#commander-hub-modal .danger-action-btn.rank-reset-disabled,
#portal-commander-hub-page .danger-action-btn.rank-reset-disabled,
#commander-hub-modal .rank-reset-action-btn:disabled,
#portal-commander-hub-page .rank-reset-action-btn:disabled,
#commander-hub-modal .danger-action-btn.rank-reset-disabled:disabled,
#portal-commander-hub-page .danger-action-btn.rank-reset-disabled:disabled,
#commander-hub-modal [data-commander-reset-mode].rank-reset-disabled,
#portal-commander-hub-page [data-commander-reset-mode].rank-reset-disabled,
#commander-hub-modal [data-commander-reset-mode]:disabled,
#portal-commander-hub-page [data-commander-reset-mode]:disabled {
    opacity: 0.38 !important;
    filter: grayscale(0.85) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: rgba(241, 224, 172, 0.45) !important;
    border-color: rgba(184, 144, 48, 0.22) !important;
    background: linear-gradient(135deg, rgba(24, 20, 15, 0.75) 0%, rgba(12, 10, 8, 0.85) 100%) !important;
    box-shadow: none !important;
    transform: none !important;
}

#commander-hub-modal .rank-reset-action-btn.rank-reset-limited,
#portal-commander-hub-page .rank-reset-action-btn.rank-reset-limited,
#commander-hub-modal .danger-action-btn.rank-reset-limited,
#portal-commander-hub-page .danger-action-btn.rank-reset-limited,
#commander-hub-modal [data-commander-reset-mode].rank-reset-limited,
#portal-commander-hub-page [data-commander-reset-mode].rank-reset-limited {
    opacity: 0.48 !important;
    filter: grayscale(0.72) !important;
    cursor: help !important;
    color: rgba(241, 224, 172, 0.6) !important;
    border-color: rgba(184, 144, 48, 0.28) !important;
    background: linear-gradient(135deg, rgba(24, 20, 15, 0.7) 0%, rgba(12, 10, 8, 0.82) 100%) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Messages / Settings channel list scrollbar */
#commander-hub-modal .commander-hub-subnav-list , #portal-commander-hub-page .commander-hub-subnav-list {
    scrollbar-width: thin !important;
    scrollbar-color: #9a7a32 rgba(14, 11, 8, 0.85) !important;
}

#commander-hub-modal .commander-hub-subnav-list::-webkit-scrollbar , #portal-commander-hub-page .commander-hub-subnav-list::-webkit-scrollbar {
    width: 7px !important;
}

#commander-hub-modal .commander-hub-subnav-list::-webkit-scrollbar-track , #portal-commander-hub-page .commander-hub-subnav-list::-webkit-scrollbar-track {
    background: rgba(10, 8, 6, 0.75) !important;
}

#commander-hub-modal .commander-hub-subnav-list::-webkit-scrollbar-thumb , #portal-commander-hub-page .commander-hub-subnav-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b89030 0%, #6e5420 100%) !important;
    border-radius: 3px !important;
}

/* ==========================================================================
   SECTION 18: DEVELOPER MAINTENANCE ALERT (FIXED TOP BANNER)
   ========================================================================== */

.developer-maintenance-alert-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000000 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    background: linear-gradient(90deg, rgba(92, 28, 8, 0.97) 0%, rgba(48, 18, 6, 0.98) 50%, rgba(92, 28, 8, 0.97) 100%) !important;
    border-bottom: 2px solid #e8a030 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 200, 120, 0.15) !important;
    animation: developerMaintenanceAlertPulse 3s ease-in-out infinite !important;
}

.developer-maintenance-alert-bar[hidden] {
    display: none !important;
    animation: none !important;
}

@keyframes developerMaintenanceAlertPulse {
    0%, 100% { border-bottom-color: #e8a030; }
    50% { border-bottom-color: #ffcc66; }
}

.developer-maintenance-alert-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.developer-maintenance-alert-icon {
    flex-shrink: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
}

.developer-maintenance-alert-copy {
    flex: 1 !important;
    min-width: 0 !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    color: #f8ead0 !important;
}

.developer-maintenance-alert-title {
    display: block !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #ffd978 !important;
    margin: 0 0 4px 0 !important;
}

.developer-maintenance-alert-message {
    margin: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    color: #f1e0ac !important;
}

.developer-maintenance-alert-window {
    margin: 6px 0 0 0 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #ffcc88 !important;
    letter-spacing: 0.02em !important;
}

.developer-maintenance-alert-window[hidden] {
    display: none !important;
}

/* Age Portal desktop (≥1025px): fixed banner at very top; mobile in-flow — mobile-responsive.css */
@media (min-width: 1025px) {
    body#main-dashboard-canvas .developer-maintenance-alert-bar.portal-maintenance-alert-below-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 100000000 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    body#main-dashboard-canvas.developer-maintenance-alert-active {
        padding-top: var(--developer-maintenance-alert-offset, 0px) !important;
        box-sizing: border-box !important;
    }

    body#main-dashboard-canvas.developer-maintenance-alert-active .main-portal-nav-bar {
        top: 0 !important;
    }

    /* Avatar commander menu must extend below nav without clipping */
    .portal-mobile-nav-bar-clip {
        overflow: visible !important;
    }

    .main-portal-nav-bar {
        overflow: visible !important;
    }

    .nav-embedded-account-label,
    .portal-commander-identity-card {
        overflow: visible !important;
        z-index: 100000 !important;
    }

    .portal-nav-commander-identity-row {
        overflow: visible !important;
        z-index: 100000 !important;
    }

    .portal-commander-identity-menu {
        z-index: 100002 !important;
    }
}

body.developer-maintenance-alert-active #page-landing {
    padding-top: var(--developer-maintenance-alert-offset, 0px) !important;
    box-sizing: border-box !important;
}

/* ============================================================
   Evolution Roadmap (portal tab)
   ============================================================ */

.evolution-roadmap-workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

.evolution-roadmap-hero {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px 24px !important;
    padding: 22px 26px !important;
    background: linear-gradient(135deg, rgba(28, 22, 14, 0.92) 0%, rgba(10, 8, 6, 0.96) 55%, rgba(18, 14, 10, 0.9) 100%) !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    border-radius: 6px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 215, 0, 0.08) !important;
}

.evolution-roadmap-eyebrow {
    margin: 0 0 6px 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(201, 162, 39, 0.85) !important;
}

.evolution-roadmap-title {
    margin: 0 0 10px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #f4e4b8 !important;
    letter-spacing: 0.04em !important;
}

.evolution-roadmap-lead {
    margin: 0 !important;
    max-width: 720px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    color: rgba(241, 224, 172, 0.82) !important;
}

.evolution-roadmap-lead strong {
    color: #e8c96a !important;
    font-weight: 600 !important;
}

.evolution-roadmap-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    align-items: center !important;
}

.evolution-roadmap-legend-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(241, 224, 172, 0.7) !important;
    letter-spacing: 0.03em !important;
}

.evolution-roadmap-legend-swatch {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.evolution-roadmap-legend-swatch.completed {
    background: #6a8fc7 !important;
    box-shadow: 0 0 8px rgba(106, 143, 199, 0.5) !important;
}

.evolution-roadmap-legend-swatch.current {
    background: #c9a227 !important;
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.65) !important;
}

.evolution-roadmap-legend-swatch.upcoming {
    background: rgba(241, 224, 172, 0.25) !important;
    border: 1px dashed rgba(201, 162, 39, 0.35) !important;
}

.evolution-roadmap-timeline {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 4px 6px 12px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.evolution-roadmap-phase-card {
    background: linear-gradient(180deg, rgba(16, 13, 10, 0.88) 0%, rgba(8, 7, 5, 0.95) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.22) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.evolution-roadmap-phase-card.current {
    border-color: rgba(201, 162, 39, 0.55) !important;
    box-shadow: 0 0 22px rgba(201, 162, 39, 0.12) !important;
}

.evolution-roadmap-phase-card.is-expanded {
    border-color: rgba(201, 162, 39, 0.4) !important;
}

.evolution-roadmap-phase-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    text-align: left !important;
    color: inherit !important;
    font: inherit !important;
}

.evolution-roadmap-phase-header:hover {
    background: rgba(43, 36, 26, 0.35) !important;
}

.evolution-roadmap-phase-rail {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 18px !important;
    flex-shrink: 0 !important;
    padding-top: 4px !important;
}

.evolution-roadmap-phase-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(201, 162, 39, 0.5) !important;
    background: #0d0a07 !important;
    flex-shrink: 0 !important;
}

.evolution-roadmap-phase-card.completed .evolution-roadmap-phase-dot {
    background: #6a8fc7 !important;
    border-color: #8aaee8 !important;
}

.evolution-roadmap-phase-card.current .evolution-roadmap-phase-dot {
    background: #c9a227 !important;
    border-color: #f1e0ac !important;
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.7) !important;
}

.evolution-roadmap-phase-line {
    flex: 1 1 auto !important;
    width: 2px !important;
    min-height: 24px !important;
    margin-top: 6px !important;
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.45) 0%, rgba(201, 162, 39, 0.08) 100%) !important;
}

.evolution-roadmap-phase-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.evolution-roadmap-phase-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
}

.evolution-roadmap-era {
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #f4e4b8 !important;
    letter-spacing: 0.03em !important;
}

.evolution-roadmap-status {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
}

.evolution-roadmap-status--completed {
    color: #a8c4f0 !important;
    background: rgba(106, 143, 199, 0.15) !important;
    border-color: rgba(106, 143, 199, 0.35) !important;
}

.evolution-roadmap-status--current {
    color: #1a1408 !important;
    background: linear-gradient(90deg, #c9a227 0%, #f1e0ac 100%) !important;
    border-color: #f1e0ac !important;
}

.evolution-roadmap-status--upcoming {
    color: rgba(241, 224, 172, 0.55) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(184, 144, 48, 0.2) !important;
}

.evolution-roadmap-period {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(201, 162, 39, 0.75) !important;
    letter-spacing: 0.04em !important;
}

.evolution-roadmap-summary {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: rgba(241, 224, 172, 0.78) !important;
}

.evolution-roadmap-chevron {
    flex-shrink: 0 !important;
    font-size: 0.65rem !important;
    color: rgba(201, 162, 39, 0.6) !important;
    transition: transform 0.2s ease !important;
    margin-top: 6px !important;
}

.evolution-roadmap-phase-card.is-expanded .evolution-roadmap-chevron {
    transform: rotate(180deg) !important;
}

.evolution-roadmap-phase-body {
    display: none !important;
    padding: 0 18px 18px 50px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.12) !important;
}

.evolution-roadmap-phase-card.is-expanded .evolution-roadmap-phase-body {
    display: block !important;
}

.evolution-roadmap-topic-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px !important;
    padding-top: 14px !important;
}

.evolution-roadmap-topic-card {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(184, 144, 48, 0.15) !important;
    border-radius: 4px !important;
    padding: 14px 16px !important;
}

.evolution-roadmap-topic-title {
    margin: 0 0 10px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    color: #e8c96a !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.evolution-roadmap-topic-list {
    margin: 0 !important;
    padding-left: 18px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.75) !important;
}

.evolution-roadmap-topic-list li {
    margin-bottom: 6px !important;
}

.evolution-roadmap-topic-list li:last-child {
    margin-bottom: 0 !important;
}

/* Portal profile — account security popups */
#security-popup-text-field.security-account-form-host,
#security-popup-text-field .security-account-form-lead {
    text-align: left !important;
}

.security-account-form-lead {
    margin: 0 0 12px 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    color: rgba(241, 224, 172, 0.85) !important;
}

.security-account-form-meta {
    margin: 0 0 14px 0 !important;
    font-size: 0.75rem !important;
    color: rgba(241, 224, 172, 0.6) !important;
}

.security-account-form-meta strong {
    color: #ffd700 !important;
}

.security-account-form-label {
    display: block !important;
    margin: 0 0 6px 0 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: rgba(241, 224, 172, 0.55) !important;
}

.security-account-form-input {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(184, 144, 48, 0.4) !important;
    padding: 8px 10px !important;
    color: #f1e0ac !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.8rem !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.security-account-form-input:focus {
    border-color: rgba(212, 175, 55, 0.75) !important;
}

.security-account-form-hint {
    margin: 4px 0 0 0 !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    color: rgba(241, 224, 172, 0.45) !important;
}

/* ==========================================================================
   LORE CODEX — NATIONS OF AMNEK
   ========================================================================== */

.lore-workspace-chassis {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: calc(100vh - 280px) !important;
    max-height: calc(100vh - 280px) !important;
    background: linear-gradient(145deg, rgba(18, 14, 10, 0.92) 0%, rgba(8, 6, 4, 0.96) 55%, rgba(14, 11, 8, 0.94) 100%) !important;
    border: 1px solid rgba(184, 144, 48, 0.32) !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 215, 0, 0.06) !important;
    padding: 18px 20px 20px !important;
    box-sizing: border-box !important;
    gap: 16px !important;
    overflow: hidden !important;
}

.lore-codex-hero {
    flex-shrink: 0 !important;
    padding: 14px 18px 16px !important;
    border: 1px solid rgba(184, 144, 48, 0.22) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(90deg, rgba(184, 144, 48, 0.08) 0%, transparent 42%),
        rgba(0, 0, 0, 0.35) !important;
}

.lore-codex-eyebrow {
    margin: 0 0 6px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(197, 160, 89, 0.85) !important;
}

.lore-codex-title {
    margin: 0 0 8px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.45rem !important;
    color: #e8c96a !important;
    letter-spacing: 0.04em !important;
}

.lore-codex-lead {
    margin: 0 !important;
    max-width: 720px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: rgba(241, 224, 172, 0.72) !important;
}

.lore-codex-lead strong {
    color: #ffd700 !important;
}

.lore-codex-body {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Mobile nation picker — shown only in mobile-responsive.css (≤1024px) */
.lore-nation-picker-mobile {
    display: none !important;
}

.lore-nation-index-deck {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    border: 1px solid rgba(184, 144, 48, 0.2) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.38) !important;
    padding: 12px 10px 12px 12px !important;
    box-sizing: border-box !important;
}

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

.lore-nation-index-scroll {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-right: 6px !important;
}

.lore-index-empty {
    margin: 12px 4px !important;
    font-size: 0.78rem !important;
    color: rgba(241, 224, 172, 0.5) !important;
    font-style: italic !important;
}

.lore-nation-chip {
    display: grid !important;
    grid-template-columns: 28px 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 10px 10px 8px !important;
    border: 1px solid rgba(184, 144, 48, 0.18) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: rgba(241, 224, 172, 0.75) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.lore-nation-chip:hover {
    border-color: rgba(255, 215, 0, 0.45) !important;
    background: rgba(28, 21, 14, 0.9) !important;
    transform: translateX(3px) !important;
}

.lore-nation-chip.is-active {
    border-color: var(--lore-nation-accent, #ffd700) !important;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
    box-shadow: inset 3px 0 0 var(--lore-nation-accent, #ffd700), 0 0 18px rgba(0, 0, 0, 0.35) !important;
    color: #f1e0ac !important;
}

.lore-nation-chip-index {
    font-family: 'Cinzel', serif !important;
    font-size: 0.62rem !important;
    color: rgba(197, 160, 89, 0.55) !important;
    letter-spacing: 0.06em !important;
}

.lore-nation-chip.is-active .lore-nation-chip-index {
    color: var(--lore-nation-accent, #ffd700) !important;
}

.lore-nation-chip-sigil {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

.lore-nation-chip-crest {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)) !important;
}

.lore-nation-chip-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.lore-nation-chip-name {
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    color: #e8c96a !important;
    letter-spacing: 0.03em !important;
}

.lore-nation-chip-epithet {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    color: rgba(241, 224, 172, 0.48) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.lore-reader-compartment {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(12, 10, 8, 0.92) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
}

.lore-reader-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 20px 22px 18px !important;
    box-sizing: border-box !important;
}

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

.lore-reader-empty-state {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 40px 24px !important;
    color: rgba(241, 224, 172, 0.55) !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
}

.lore-reader-empty-glyph {
    font-size: 2.2rem !important;
    opacity: 0.7 !important;
}

.lore-reader-header {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.lore-reader-sigil-ring {
    width: 72px !important;
    height: 72px !important;
    border-radius: 6px !important;
    border: 2px solid var(--lore-nation-accent, #b89030) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 0 24px color-mix(in srgb, var(--lore-nation-accent, #b89030) 35%, transparent) !important;
    overflow: hidden !important;
    padding: 4px !important;
    box-sizing: border-box !important;
}

.lore-reader-crest {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) !important;
}

.lore-reader-title-stack {
    min-width: 0 !important;
}

.lore-reader-eyebrow {
    display: block !important;
    margin-bottom: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(197, 160, 89, 0.8) !important;
}

.lore-reader-nation-name {
    margin: 0 0 6px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.9rem !important;
    color: #ffd700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.lore-reader-epithet {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 1.05rem !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    color: rgba(241, 224, 172, 0.72) !important;
}

.lore-audio-play-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 88px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(40, 30, 18, 0.95) 0%, rgba(12, 10, 8, 0.95) 100%) !important;
    color: #e8c96a !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}

.lore-audio-play-btn:hover {
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.15) !important;
}

.lore-audio-play-btn.is-playing {
    border-color: #ffd700 !important;
    background: linear-gradient(180deg, rgba(80, 60, 20, 0.5) 0%, rgba(20, 16, 10, 0.95) 100%) !important;
    color: #ffd700 !important;
}

.lore-audio-play-icon {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.lore-audio-play-label {
    font-family: 'Cinzel', serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.lore-reader-divider {
    flex-shrink: 0 !important;
    height: 1px !important;
    margin: 16px 0 14px !important;
    background: linear-gradient(90deg, transparent, rgba(184, 144, 48, 0.55), transparent) !important;
}

.lore-reader-prose-scroll {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}

.lore-reader-prose {
    margin: 0 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    color: rgba(241, 224, 172, 0.92) !important;
    text-align: justify !important;
    hyphens: auto !important;
}

.lore-reader-prose::first-letter {
    float: left !important;
    font-family: 'Cinzel', serif !important;
    font-size: 3.85rem !important;
    line-height: 0.82 !important;
    padding: 8px 12px 0 0 !important;
    color: var(--lore-nation-accent, #e8c96a) !important;
}

/* Lore codex — desktop: 4×4 nation grid, reader on the right (mobile: mobile-responsive.css ≤1024px) */
@media (min-width: 1025px) {
    .lore-codex-eyebrow {
        font-size: 0.38rem !important;
    }

    .lore-codex-title {
        font-size: 1.15rem !important;
    }

    .lore-codex-lead {
        font-size: 0.52rem !important;
    }

    .lore-codex-body {
        grid-template-columns: minmax(460px, 520px) minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    .lore-nation-index-deck.portal-desktop-lore-index {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 520px !important;
        overflow: visible !important;
        align-self: start !important;
    }

    .lore-index-label {
        font-size: 0.55rem !important;
        margin-bottom: 10px !important;
    }

    .lore-nation-index-scroll {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(4, minmax(0, auto)) !important;
        grid-auto-flow: row !important;
        gap: 10px !important;
        overflow: visible !important;
        flex: none !important;
        min-height: 0 !important;
        padding-right: 0 !important;
    }

    .lore-nation-chip {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 6px 9px !important;
        text-align: center !important;
    }

    .lore-nation-chip:hover {
        transform: translateY(-2px) !important;
    }

    .lore-nation-chip-index {
        font-size: 0.55rem !important;
        line-height: 1 !important;
    }

    .lore-nation-chip-sigil {
        width: 52px !important;
        height: 52px !important;
    }

    .lore-nation-chip-copy {
        align-items: center !important;
        width: 100% !important;
    }

    .lore-nation-chip-name {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        word-break: break-word !important;
    }

    .lore-nation-chip-epithet {
        display: none !important;
    }

    .lore-reader-compartment {
        min-width: 0 !important;
    }

    .lore-reader-panel {
        padding: 16px 18px 14px !important;
    }

    .lore-reader-header {
        grid-template-columns: 88px minmax(0, 1fr) auto !important;
        gap: 18px !important;
    }

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

    .lore-reader-eyebrow {
        font-size: 0.48rem !important;
    }

    .lore-reader-nation-name {
        font-size: 1.85rem !important;
    }

    .lore-reader-epithet {
        font-size: 0.92rem !important;
    }

    .lore-audio-play-icon {
        font-size: 0.8rem !important;
    }

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

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

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

    .lore-reader-empty-state {
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   SECTION 20: GAME PAGE SHELL (WIP) & HANDOFF ACHIEVEMENT POPUP
   ========================================================================== */

.royal-armies-route-transition {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: #060504 !important;
    transition: opacity 1.1s ease-in-out !important;
}

.royal-armies-route-transition.is-visible {
    pointer-events: auto !important;
}

.royal-armies-route-transition.is-covered,
.royal-armies-route-transition.is-fading-out {
    opacity: 1 !important;
}

.royal-armies-route-transition.is-revealing {
    opacity: 0 !important;
}

#game-page-canvas,
.game-page-canvas,
#age-page-canvas,
.age-page-canvas {
    --game-viewport-h: 100vh;
    --game-viewport-h: 100svh;
    --game-viewport-h: var(--game-layout-vh, 100dvh);
    --game-viewport-w: 100%;
    --game-viewport-w: var(--game-layout-vw, 100%);
    --game-shell-chrome-top: clamp(56px, 9vh, 88px);
    --game-shell-progress-h: clamp(88px, 14vh, 118px);
    --game-shell-title-h: clamp(44px, 7vh, 72px);
    --game-class-header-offset: 100px;
    --game-class-stage-offset-x: 80px;
    --game-class-stage-offset-y: 100px;
    --game-class-panel-slot-w: min(340px, 100%);
    --game-class-panel-offset-x: -100px;
    --game-class-showcase-track-w: 500px;
    --game-class-showcase-command-w: 400px;
    --game-class-showcase-label-min-w: 12.75rem;
    --game-class-title-gap: clamp(0.65rem, 1.8vh, 1.35rem);
    --game-class-archmage-portrait-scale: 1.15;
    --game-class-swap-ms: 900;
    --game-class-panel-fade-ms: calc(var(--game-class-swap-ms, 900) * 1ms);
    --game-class-stage-band-h: calc(
        var(--game-viewport-h)
        - var(--game-shell-chrome-top)
        - var(--game-shell-progress-h)
    );
    --game-class-content-band-h: calc(
        var(--game-class-stage-band-h)
        - var(--game-shell-title-h)
        - var(--game-class-title-gap)
        - 12px
    );
    --game-class-art-available-h: calc(
        var(--game-viewport-h)
        - var(--game-shell-chrome-top)
        - var(--game-shell-progress-h)
        - var(--game-shell-title-h)
        - var(--game-class-title-gap)
        - 48px
    );
    --game-class-art-max-h: min(
        520px,
        max(180px, calc(var(--game-class-art-available-h) - 28px))
    );
    margin: 0 !important;
    padding: 0 !important;
    height: var(--game-viewport-h) !important;
    max-height: var(--game-viewport-h) !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background-color: #060504 !important;
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -12%, rgba(184, 144, 48, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(90, 58, 22, 0.1) 0%, transparent 52%),
        radial-gradient(ellipse 55% 45% at 0% 88%, rgba(48, 36, 20, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 120% 80% at 50% 50%, rgba(18, 14, 10, 0.35) 0%, transparent 70%),
        linear-gradient(168deg, #14110e 0%, #0c0a09 36%, #080706 68%, #030302 100%) !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow: hidden !important;
    color: #f1e0ac !important;
}

/* PC — stonewall texture layered over base gradients (75% transparent) */
@media (min-width: 1025px) {
    #game-page-canvas::before,
    #age-page-canvas::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: url('images/stonewallbg.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.25;
    }
}

/* Game shell stacking — nav/dropdown above main content (avoid invisible click wall) */
#game-page-canvas .game-page-staging-deck,
#age-page-canvas .game-page-staging-deck {
    position: relative !important;
    z-index: 20 !important;
}

#game-page-canvas .game-page-main,
#age-page-canvas .age-page-main {
    position: relative !important;
    z-index: 1 !important;
}

#game-page-canvas.game-onboarding-active .game-page-staging-deck,
#game-page-canvas.game-onboarding-active .game-onboarding-progress {
    position: relative !important;
    z-index: 30 !important;
    flex-shrink: 0 !important;
}

#game-page-canvas .game-onboarding-progress {
    position: relative !important;
    z-index: 1 !important;
}

#game-page-canvas .portal-commander-identity-card.is-commander-menu-open {
    z-index: 100010 !important;
}

#how-did-you-get-here-canvas,
.how-did-you-get-here-canvas {
    --ra-viewport-h: 100vh;
    --ra-viewport-h: 100svh;
    --ra-viewport-h: var(--ra-layout-vh, var(--game-layout-vh, 100dvh));
    --ra-viewport-w: 100%;
    --ra-viewport-w: var(--ra-layout-vw, var(--game-layout-vw, 100%));
    margin: 0 !important;
    padding: 0 !important;
    min-height: var(--ra-viewport-h, 100vh) !important;
    width: var(--ra-viewport-w, 100%) !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background-color: #060504 !important;
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -12%, rgba(184, 144, 48, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(90, 58, 22, 0.1) 0%, transparent 52%),
        radial-gradient(ellipse 55% 45% at 0% 88%, rgba(48, 36, 20, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 120% 80% at 50% 50%, rgba(18, 14, 10, 0.35) 0%, transparent 70%),
        linear-gradient(168deg, #14110e 0%, #0c0a09 36%, #080706 68%, #030302 100%) !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #f1e0ac !important;
}

.game-page-staging-deck {
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 0 clamp(12px, 2vw, 40px) !important;
    box-sizing: border-box !important;
}

.game-page-nav-stack {
    width: 100% !important;
}

.game-page-nav-stack .portal-nav-commander-identity-row {
    margin-top: 10px !important;
    margin-bottom: -2px !important;
}

#game-page-canvas .game-page-mobile-commander-clip {
    margin-top: 10px !important;
}

#game-page-canvas .game-page-nav-bar,
#game-page-canvas .game-page-nav-tabs {
    display: none !important;
}

.game-page-mobile-commander-clip {
    display: none !important;
}

.portal-mobile-commander-trigger--static {
    cursor: default !important;
    pointer-events: none !important;
}

.game-page-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 clamp(8px, 1.5vw, 20px) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.game-page-viewport {
    --game-onboarding-slide-ms: 480ms;
    position: relative !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

#game-page-canvas.game-session-active .game-page-viewport {
    display: none !important;
}

.game-session-stage {
    display: none !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: clamp(12px, 2vh, 24px) !important;
    box-sizing: border-box !important;
}

#game-page-canvas.game-session-active .game-session-stage {
    display: flex !important;
}

.game-session-stage-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(20px, 3vh, 32px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.game-session-stage-placeholder {
    margin: 0 auto !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 215, 0, 0.82) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
    text-align: center !important;
}

.game-session-back-btn {
    width: min(320px, 88vw) !important;
    max-width: min(320px, 88vw) !important;
    flex: 0 0 auto;
}

.game-onboarding-session-transition {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: #060504 !important;
    transition: opacity 0.9s ease-in-out !important;
}

.game-onboarding-session-transition.is-visible {
    pointer-events: auto !important;
}

.game-onboarding-session-transition.is-visible.is-covered {
    opacity: 1 !important;
}

.game-onboarding-session-transition.is-visible.is-revealing {
    opacity: 0 !important;
}

.game-onboarding-step-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(16px, 2.5vh, 28px) !important;
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

.game-onboarding-continue-wrap {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.game-onboarding-progress {
    --game-onboarding-fill: 0%;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: min(1200px, 96vw) !important;
    margin: 0 auto !important;
    padding: 0 max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
}

.game-onboarding-progress-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.game-onboarding-progress-bezel {
    padding: 10px 14px 8px !important;
}

.game-onboarding-progress-track {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.game-onboarding-progress-track::before {
    content: '' !important;
    position: absolute !important;
    left: 12% !important;
    right: 12% !important;
    top: 28px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(28, 22, 14, 0.95) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.65) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.game-onboarding-progress-track::after {
    content: '' !important;
    position: absolute !important;
    left: 12% !important;
    width: calc(76% * (var(--game-onboarding-fill, 0%) / 100)) !important;
    top: 28px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #b89030 0%, #ffd700 55%, #fff2c8 100%) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.45) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: width 0.35s ease !important;
}

.game-onboarding-progress-connector {
    display: none !important;
}

.game-onboarding-step {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: none !important;
    background: transparent !important;
    cursor: default !important;
    pointer-events: none !important;
    text-align: center !important;
    transition: opacity 0.25s ease !important;
}

.game-onboarding-step-marker {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    background: linear-gradient(180deg, rgba(42, 34, 22, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 224, 148, 0.72) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 10px rgba(0, 0, 0, 0.45) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease !important;
}

.game-onboarding-step-label {
    font-family: 'RoyalDetails', serif !important;
    font-size: clamp(0.58rem, 1.1vw, 0.72rem) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    color: rgba(241, 224, 172, 0.62) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    transition: color 0.25s ease, text-shadow 0.25s ease !important;
}

.game-onboarding-step.is-complete .game-onboarding-step-marker {
    border-color: rgba(255, 215, 0, 0.65) !important;
    color: #ffd700 !important;
}

.game-onboarding-step.is-complete .game-onboarding-step-label {
    color: rgba(255, 236, 180, 0.82) !important;
}

.game-onboarding-step.is-active .game-onboarding-step-marker {
    border-color: rgba(255, 215, 0, 0.85) !important;
    background: linear-gradient(180deg, rgba(92, 68, 22, 0.95) 0%, rgba(28, 20, 8, 0.98) 100%) !important;
    color: #ffd700 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 14px rgba(255, 215, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.game-onboarding-step.is-active .game-onboarding-step-label {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.game-onboarding-step.is-upcoming {
    opacity: 0.78 !important;
}

.game-onboarding-step.is-clickable {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.game-onboarding-step.is-clickable:hover .game-onboarding-step-marker,
.game-onboarding-step.is-clickable:focus-visible .game-onboarding-step-marker {
    border-color: rgba(255, 215, 0, 0.9) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 12px rgba(255, 215, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.game-onboarding-step.is-clickable:hover .game-onboarding-step-label,
.game-onboarding-step.is-clickable:focus-visible .game-onboarding-step-label {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.game-onboarding-step:focus-visible {
    outline: none !important;
}

.game-onboarding-step.is-clickable:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.65) !important;
    outline-offset: 4px !important;
    border-radius: 6px !important;
}

.game-page-view {
    display: none !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
}

.game-page-view.is-active {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    justify-content: center !important;
    padding-bottom: calc(10px + 24px + clamp(10px, 1.2vh, 16px)) !important;
    box-sizing: border-box !important;
}

.game-page-view.is-onboarding-entering,
.game-page-view.is-onboarding-exiting {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    justify-content: center !important;
    will-change: transform, opacity;
}

.game-page-view.is-onboarding-exiting {
    z-index: 1 !important;
    animation: game-onboarding-view-slide-out var(--game-onboarding-slide-ms, 480ms) cubic-bezier(0.4, 0, 0.68, 0.2) both !important;
}

.game-page-view.is-onboarding-entering {
    z-index: 2 !important;
    animation: game-onboarding-view-slide-in var(--game-onboarding-slide-ms, 480ms) cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes game-onboarding-view-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0.94;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes game-onboarding-view-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-page-view.is-onboarding-entering,
    .game-page-view.is-onboarding-exiting {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.game-page-view-placeholder {
    margin: 120px auto 0 auto !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 215, 0, 0.82) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
    text-align: center !important;
}

/* FLEX — Choose a Region: map + side panels */
.game-page-view--region.is-active {
    justify-content: flex-start !important;
    align-self: stretch !important;
    width: 100% !important;
    gap: clamp(8px, 1.5vh, 16px) !important;
    padding: clamp(4px, 1vh, 12px) 12px calc(10px + 24px + clamp(10px, 1.2vh, 16px)) !important;
    box-sizing: border-box !important;
}

.game-region-picker {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

.game-region-map-cluster {
    --game-region-flank-gap: clamp(10px, 1.2vw, 16px);
    --game-region-list-map-gap: calc(var(--game-region-flank-gap) + 10px);
    --game-region-list-offset-x: -30px;
    --game-region-detail-offset-x: 30px;
    --game-region-detail-nudge-x: -145px;
    --game-region-detail-nudge-y: -102px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--game-region-list-map-gap);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    will-change: transform;
}

.game-region-map {
    width: min(100%, 920px);
    margin-inline: 0;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.game-region-list-panel.portal-deployment-server-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--game-region-flank-max-height, min(92vh, 720px)) !important;
    margin: 0 !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: translateX(var(--game-region-list-offset-x, 0px));
}

.game-region-detail-panel.portal-deployment-server-panel {
    position: fixed !important;
    left: -9999px !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--game-region-flank-max-height, min(92vh, 720px)) !important;
    margin: 0 !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.game-region-panel-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.game-region-panel-top-tab {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    align-self: center;
    order: -1;
    margin: 8px auto 0;
    padding: 8px 22px 9px;
    border: 1px solid rgba(197, 160, 89, 0.42);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.07) 0%, transparent 22%),
        linear-gradient(145deg, rgba(28, 22, 14, 0.96) 0%, rgba(8, 6, 4, 0.98) 55%, rgba(18, 14, 10, 0.94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.12);
    box-sizing: border-box;
    pointer-events: none;
}

.game-region-panel-top-tab-label {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.game-region-panel-shell > .game-page-panel-bezel {
    align-self: stretch;
    width: 100%;
    padding-top: 0 !important;
    gap: 0 !important;
    border-radius: 6px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.game-region-panel-shell > .game-page-panel-bezel > .game-region-list-panel-inner,
.game-region-panel-shell > .game-page-panel-bezel > .game-region-detail-panel-inner {
    margin-top: -1px;
    padding-top: 14px !important;
    border-top: 1px solid rgba(197, 160, 89, 0.42);
}

.game-region-list-panel .game-page-panel-bezel {
    max-height: var(--game-region-flank-max-height, min(92vh, 720px)) !important;
}

.game-region-list-panel.portal-deployment-server-panel:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.game-region-detail-panel.portal-deployment-server-panel:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.game-region-detail-panel:not([hidden]) .game-page-panel-bezel {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: var(--game-region-flank-max-height, min(92vh, 720px)) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.game-region-list-panel.portal-deployment-server-panel {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}

.game-region-detail-panel.portal-deployment-server-panel.is-active,
.game-region-detail-panel.portal-deployment-server-panel:not([hidden]) {
    width: 610px !important;
    min-width: 610px !important;
    max-width: 610px !important;
    opacity: 1;
    transition:
        opacity 180ms ease,
        transform 220ms ease,
        max-width 220ms ease,
        min-width 220ms ease,
        width 220ms ease,
        padding 220ms ease,
        border-width 220ms ease;
}

.game-region-detail-panel.portal-deployment-server-panel > .game-page-panel-bezel {
    padding-top: 8px;
    box-sizing: border-box;
}

.game-region-detail-panel .game-region-panel-top-tab {
    margin: 0 auto;
}

.game-region-detail-panel.portal-deployment-server-panel[hidden] {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-width: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.game-region-list-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.game-location-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.game-region-detail-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.game-region-detail-subtabs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    flex: 0 0 auto;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.32);
}

.game-region-detail-subtab {
    flex: 1 1 0;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, rgba(22, 18, 12, 0.92) 0%, rgba(10, 8, 6, 0.96) 100%);
    color: rgba(236, 220, 180, 0.82);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.game-region-detail-subtab:hover {
    border-color: rgba(197, 160, 89, 0.5);
    color: rgba(255, 236, 200, 0.95);
}

.game-region-detail-subtab.is-active {
    border-color: rgba(255, 215, 0, 0.62);
    background: linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(20, 16, 10, 0.98) 100%);
    color: rgba(255, 215, 0, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.14);
}

.game-region-detail-subtab:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.65);
    outline-offset: 2px;
}

.game-region-detail-tab-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.game-region-detail-tab-panel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.game-region-detail-tab-panel.is-active {
    display: block;
}

.game-region-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-region-list-btn {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(28, 24, 18, 0.92) 0%, rgba(14, 12, 9, 0.96) 100%);
    color: rgba(236, 220, 180, 0.92);
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
    transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.game-region-list-btn:hover,
.game-region-list-btn.is-hovered {
    border-color: rgba(120, 190, 255, 0.65);
    background: linear-gradient(180deg, rgba(36, 58, 88, 0.55) 0%, rgba(18, 28, 44, 0.92) 100%);
    color: rgba(220, 236, 255, 1);
    box-shadow: 0 0 12px rgba(48, 128, 220, 0.25);
}

.game-region-list-btn.is-selected {
    border-color: rgba(200, 230, 255, 0.85);
    background: linear-gradient(180deg, rgba(48, 88, 140, 0.72) 0%, rgba(22, 40, 68, 0.95) 100%);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 16px rgba(56, 140, 235, 0.35);
}

.game-region-list-btn-label {
    display: block;
}

.game-region-detail-copy {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(236, 220, 180, 0.88);
}

.game-region-terrain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-region-terrain-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 32px;
}

.game-region-terrain-item--empty {
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    color: rgba(236, 220, 180, 0.72);
}

.game-region-terrain-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px dashed rgba(197, 160, 89, 0.38);
    border-radius: 4px;
    background: rgba(12, 10, 8, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.06);
}

.game-region-terrain-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 236, 190, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.game-region-terrain-item--most-abundant {
    min-height: 36px;
    padding-top: 2px;
}

.game-region-terrain-item--most-abundant .game-region-terrain-icon {
    width: 32px;
    height: 32px;
    border-style: solid;
    border-color: rgba(255, 215, 0, 0.62);
    background:
        linear-gradient(145deg, rgba(255, 215, 0, 0.14) 0%, rgba(12, 10, 8, 0.72) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.2),
        0 0 10px rgba(255, 215, 0, 0.18);
}

.game-region-terrain-item--most-abundant .game-region-terrain-name {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffd700;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.9);
}

.game-region-nations-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    min-height: 0;
}

.game-region-nations-grid {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 14px 18px;
}

.game-region-nations-item {
    flex: 0 0 auto;
}

.game-region-nations-item--empty {
    width: 100%;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    color: rgba(236, 220, 180, 0.72);
}

.game-region-nation-crest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(24, 20, 14, 0.94) 0%, rgba(10, 8, 6, 0.98) 100%);
    cursor: pointer;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

.game-region-nation-crest-btn:hover {
    border-color: color-mix(in srgb, var(--game-region-nation-accent, #ffd700) 70%, #fff 30%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--game-region-nation-accent, #ffd700) 35%, transparent);
    transform: translateY(-1px);
}

.game-region-nation-crest-btn.is-selected {
    border-color: var(--game-region-nation-accent, #ffd700);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--game-region-nation-accent, #ffd700) 45%, transparent),
        0 0 18px color-mix(in srgb, var(--game-region-nation-accent, #ffd700) 40%, transparent);
}

.game-region-nation-crest-btn:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.65);
    outline-offset: 2px;
}

.game-region-nation-crest-sigil {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.game-region-nation-crest-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

.game-region-nation-reveal {
    margin: 0;
    padding: 0 8px 4px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--game-region-nation-accent, #ffd700);
    text-shadow:
        0 0 12px color-mix(in srgb, var(--game-region-nation-accent, #ffd700) 40%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.9);
}

.game-region-map-stage {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}

.game-region-map-frame {
    --game-region-map-bezel: 12px;
    position: relative;
    width: min(100%, 920px);
    max-height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
    padding: var(--game-region-map-bezel);
    box-sizing: border-box;
    user-select: none;
    border: 2px solid rgba(197, 160, 89, 0.58);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.09) 0%, transparent 24%),
        linear-gradient(145deg, rgba(28, 22, 14, 0.98) 0%, rgba(8, 6, 4, 0.99) 55%, rgba(18, 14, 10, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.18),
        inset 0 0 0 1px rgba(255, 215, 0, 0.08),
        inset 0 -18px 32px rgba(0, 0, 0, 0.42),
        0 12px 28px rgba(0, 0, 0, 0.62),
        0 0 28px rgba(255, 190, 60, 0.12);
    overflow: hidden;
}

.game-region-map-frame::before,
.game-region-map-frame::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(255, 215, 0, 0.42);
    border-style: solid;
    pointer-events: none;
    z-index: 3;
}

.game-region-map-frame::before {
    top: 6px;
    left: 6px;
    border-width: 2px 0 0 2px;
}

.game-region-map-frame::after {
    bottom: 6px;
    right: 6px;
    border-width: 0 2px 2px 0;
}

.game-region-map-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.22),
        inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.game-region-map-overlay {
    position: absolute;
    inset: var(--game-region-map-bezel);
    width: auto;
    height: auto;
    display: block;
    overflow: visible;
    pointer-events: none;
    border-radius: 2px;
}

.game-region-map-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Bottom: crisp borders and highlight fills only (no pointer capture). */
.game-region-map-layer--visual {
    z-index: 1;
    pointer-events: none;
}

.game-region-map-layer--visual .game-region-zone,
.game-region-map-layer--visual .game-region-visual {
    fill-rule: evenodd;
    fill-opacity: 0.001;
    stroke: none;
    pointer-events: none;
    transition:
        fill 120ms ease,
        fill-opacity 120ms ease,
        stroke 120ms ease,
        stroke-width 120ms ease;
}

.game-region-map-layer--visual .game-region-zone.is-hovered,
.game-region-map-layer--visual .game-region-visual.is-hovered {
    fill: rgb(48, 128, 220) !important;
    fill-opacity: 0.38 !important;
    stroke: rgba(120, 190, 255, 1);
    stroke-width: 2px;
}

.game-region-map-layer--visual .game-region-zone.is-selected,
.game-region-map-layer--visual .game-region-visual.is-selected {
    fill: rgb(56, 140, 235) !important;
    fill-opacity: 0.5 !important;
    stroke: rgba(200, 230, 255, 1);
    stroke-width: 2.5px;
}

.game-region-map-layer--nations {
    z-index: 2;
    pointer-events: none;
}

.game-region-map-layer--nations .game-nation-zone,
.game-region-map-layer--nations .game-nation-visual {
    fill-rule: evenodd;
    fill-opacity: 0.001;
    stroke: none;
    pointer-events: none;
    transition:
        fill 120ms ease,
        fill-opacity 120ms ease,
        stroke 120ms ease,
        stroke-width 120ms ease;
}

.game-region-map-layer--nations .game-nation-zone.is-hovered,
.game-region-map-layer--nations .game-nation-visual.is-hovered {
    fill: var(--game-nation-accent, rgb(200, 168, 96)) !important;
    fill-opacity: 0.42 !important;
    stroke: rgba(255, 220, 140, 0.95);
    stroke-width: 2px;
}

.game-region-map-layer--nations .game-nation-zone.is-selected,
.game-region-map-layer--nations .game-nation-visual.is-selected {
    fill: var(--game-nation-accent, rgb(220, 180, 110)) !important;
    fill-opacity: 0.55 !important;
    stroke: rgba(255, 235, 180, 1);
    stroke-width: 2.5px;
}

.game-location-list-wrap[hidden] {
    display: none !important;
}

.game-location-nation-list .game-region-list-btn {
    width: 100%;
}

.game-location-panel-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
    box-sizing: border-box;
}

.game-location-panel-actions[hidden] {
    display: none !important;
}

.game-location-panel-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    cursor: pointer !important;
}

.game-location-panel-btn:not(.confirm-btn):not(.cancel-btn) {
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: filter 0.18s ease, transform 0.12s ease, opacity 0.2s ease !important;
}

.game-location-panel-btn[hidden] {
    display: none !important;
}

.game-location-nation-detail-panel .game-location-nation-detail-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.2vh, 16px);
    text-align: center;
}

.game-location-nation-detail-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(140px, 42vw);
    height: min(140px, 42vw);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}

.game-location-nation-detail-crest-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.game-location-nation-detail-epithet {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(220, 200, 150, 0.95);
    line-height: 1.45;
}

.game-location-nation-detail-hint {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(180, 170, 150, 0.85);
    line-height: 1.5;
}

/* Hit layer kept for path data only; selection is via side panel. */
.game-region-map-layer--hit {
    z-index: 2;
    opacity: 0;
    pointer-events: none !important;
}

.game-region-map-layer--hit path {
    pointer-events: none !important;
}

.game-region-confirm-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: clamp(10px, 1.2vh, 14px);
    box-sizing: border-box;
}

/* FLEX — Choose a Nation: map + nation list */
.game-nation-picker {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}

.game-nation-map-cluster {
    --game-nation-flank-gap: clamp(10px, 1.2vw, 16px);
    --game-nation-list-map-gap: calc(var(--game-nation-flank-gap) + 10px);
    --game-nation-list-offset-x: -30px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--game-nation-list-map-gap);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    will-change: transform;
}

.game-nation-map {
    width: min(100%, 920px);
    margin-inline: 0;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.game-nation-list-panel.portal-deployment-server-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--game-nation-flank-max-height, min(92vh, 720px)) !important;
    margin: 0 !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: translateX(var(--game-nation-list-offset-x, 0px));
    width: 580px !important;
    min-width: 580px !important;
    max-width: 580px !important;
}

.game-nation-list-panel .game-page-panel-bezel {
    max-height: var(--game-nation-flank-max-height, min(92vh, 720px)) !important;
}

.game-nation-list-panel.portal-deployment-server-panel:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.game-nation-panel-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.game-nation-panel-shell > .game-page-panel-bezel {
    align-self: stretch;
    width: 100%;
    padding-top: 0 !important;
    gap: 0 !important;
    border-radius: 6px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.game-nation-panel-shell > .game-page-panel-bezel > .game-nation-list-panel-inner {
    margin-top: -1px;
    padding-top: 12px !important;
}

.game-nation-panel-top-tab {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    align-self: center;
    order: -1;
    margin: 8px auto 0;
    padding: 8px 22px 9px;
    border: 1px solid rgba(197, 160, 89, 0.42);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.07) 0%, transparent 22%),
        linear-gradient(145deg, rgba(28, 22, 14, 0.96) 0%, rgba(8, 6, 4, 0.98) 55%, rgba(18, 14, 10, 0.94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.12);
    box-sizing: border-box;
    pointer-events: none;
}

.game-nation-panel-top-tab-label {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.game-nation-list-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    max-height: 100%;
    overflow: visible;
    padding: 8px 12px 12px;
    box-sizing: border-box;
}

.game-nation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    columns: 4;
    column-gap: 8px;
}

.game-nation-list-item {
    break-inside: avoid;
    margin-bottom: 5px;
}

.game-nation-list-item--empty {
    column-span: all;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    color: rgba(236, 220, 180, 0.72);
}

.game-nation-list-btn {
    width: 100%;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(28, 24, 18, 0.92) 0%, rgba(14, 12, 9, 0.96) 100%);
    color: rgba(236, 220, 180, 0.92);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.game-nation-list-btn--major {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 236, 190, 0.98);
}

.game-nation-list-btn:hover,
.game-nation-list-btn.is-hovered {
    border-color: color-mix(in srgb, var(--game-nation-accent, rgb(48, 128, 220)) 70%, #fff 30%);
    background: linear-gradient(180deg, rgba(36, 58, 88, 0.55) 0%, rgba(18, 28, 44, 0.92) 100%);
    color: rgba(220, 236, 255, 1);
    box-shadow: 0 0 12px color-mix(in srgb, var(--game-nation-accent, rgb(48, 128, 220)) 35%, transparent);
}

.game-nation-list-btn.is-selected {
    border-color: color-mix(in srgb, var(--game-nation-accent, rgb(56, 140, 235)) 85%, #fff 15%);
    background: linear-gradient(180deg, rgba(48, 88, 140, 0.72) 0%, rgba(22, 40, 68, 0.95) 100%);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 16px color-mix(in srgb, var(--game-nation-accent, rgb(56, 140, 235)) 40%, transparent);
}

.game-nation-list-btn-label {
    display: block;
}

.game-nation-map-stage {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}

.game-nation-map-frame {
    --game-nation-map-bezel: 12px;
    position: relative;
    width: min(100%, 920px);
    max-height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
    padding: var(--game-nation-map-bezel);
    box-sizing: border-box;
    user-select: none;
    border: 2px solid rgba(197, 160, 89, 0.58);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.09) 0%, transparent 24%),
        linear-gradient(145deg, rgba(28, 22, 14, 0.98) 0%, rgba(8, 6, 4, 0.99) 55%, rgba(18, 14, 10, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.18),
        inset 0 0 0 1px rgba(255, 215, 0, 0.08),
        inset 0 -18px 32px rgba(0, 0, 0, 0.42),
        0 12px 28px rgba(0, 0, 0, 0.62),
        0 0 28px rgba(255, 190, 60, 0.12);
    overflow: hidden;
}

.game-nation-map-frame::before,
.game-nation-map-frame::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(255, 215, 0, 0.42);
    border-style: solid;
    pointer-events: none;
    z-index: 3;
}

.game-nation-map-frame::before {
    top: 6px;
    left: 6px;
    border-width: 2px 0 0 2px;
}

.game-nation-map-frame::after {
    bottom: 6px;
    right: 6px;
    border-width: 0 2px 2px 0;
}

.game-nation-map-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.22),
        inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.game-nation-map-overlay {
    position: absolute;
    inset: var(--game-nation-map-bezel);
    width: auto;
    height: auto;
    display: block;
    overflow: visible;
    pointer-events: none;
    border-radius: 2px;
}

.game-nation-map-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.game-nation-map-layer--visual {
    z-index: 1;
    pointer-events: none;
}

.game-nation-map-layer--visual .game-nation-zone,
.game-nation-map-layer--visual .game-nation-visual {
    fill-rule: evenodd;
    fill: transparent;
    fill-opacity: 0;
    stroke: none;
    pointer-events: none;
    transition: fill 0.2s ease-in-out, fill-opacity 0.2s ease-in-out, stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
}

.game-nation-map-layer--visual .game-nation-zone.is-hovered,
.game-nation-map-layer--visual .game-nation-visual.is-hovered {
    fill: rgb(48, 128, 220) !important;
    fill-opacity: 0.38 !important;
    stroke: rgba(120, 190, 255, 1);
    stroke-width: 2px;
}

.game-nation-map-layer--visual .game-nation-zone.is-selected,
.game-nation-map-layer--visual .game-nation-visual.is-selected {
    fill: rgb(56, 140, 235) !important;
    fill-opacity: 0.5 !important;
    stroke: rgba(200, 230, 255, 1);
    stroke-width: 2.5px;
}

.game-nation-confirm-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: clamp(10px, 1.2vh, 14px);
    box-sizing: border-box;
}

.game-page-view--class.is-active,
.game-page-view--nation.is-active,
.game-page-view--tutorial.is-active,
.game-page-view--join-battle.is-active {
    justify-content: flex-start !important;
    align-self: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 12px clamp(8px, 1vh, 12px) !important;
    box-sizing: border-box !important;
}

.game-page-view--class.is-active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    /* Band is main → progress footer; padding-bottom matches onboarding step clearance. */
    padding-bottom: calc(10px + 24px + clamp(10px, 1.2vh, 16px)) !important;
}

.game-page-class-modal-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.game-page-view--class {
    overflow: hidden !important;
}

.game-page-view--class .game-class-picker {
    overflow: visible !important;
}

.game-page-view--class .game-class-picker-stage {
    overflow: visible !important;
}

.game-class-picker {
    position: relative;
    width: 100%;
    max-width: min(1920px, 100%);
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0 auto;
    box-sizing: border-box;
    --game-class-panel-slot-min-h: var(--game-class-bm-panel-height, auto);
}

.game-class-picker-title {
    display: block;
    position: absolute;
    top: var(--game-class-header-offset, 100px);
    left: 50%;
    z-index: 12;
    width: auto;
    max-width: min(520px, 86%);
    max-height: var(--game-shell-title-h);
    height: auto;
    margin: 0;
    transform: translateX(-50%);
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.game-class-picker-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    max-width: min(1400px, 100%);
    min-height: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vh, 20px);
    box-sizing: border-box;
    overflow: visible;
    transform: translate(
        var(--game-class-stage-offset-x, 0px),
        var(--game-class-stage-offset-y, 0px)
    );
}

.game-class-picker-duo {
    flex: 0 0 auto;
}

#game-class-panel-battlemaster,
#game-class-panel-archmage {
    width: var(--game-class-panel-slot-w, min(340px, 94%));
    max-width: 340px;
    min-height: var(--game-class-panel-slot-min-h, auto);
    transform: translateX(var(--game-class-panel-offset-x, 0px));
}

@media (max-width: 899px) {
    .game-class-picker-stage {
        position: relative;
    }

    .game-class-side-panel:not(.is-active):not(.is-fading-in):not(.is-fading-out) {
        position: absolute;
        left: 50%;
        width: min(340px, 94%);
        max-width: 340px;
        transform: translateX(calc(-50% + var(--game-class-panel-offset-x, 0px)));
    }
}

.game-class-side-panel.portal-deployment-server-panel {
    position: relative !important;
    width: min(340px, 100%) !important;
    max-width: 340px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    flex: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.game-class-side-panel .game-page-panel-bezel {
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.game-class-side-panel.is-active .game-page-panel-bezel {
    height: 100% !important;
}

.game-class-side-panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--game-class-panel-fade-ms, 900ms) ease,
        visibility var(--game-class-panel-fade-ms, 900ms) ease;
}

.game-class-side-panel[hidden] {
    display: flex !important;
}

.game-class-side-panel.is-active:not(.is-fading-out) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible !important;
}

.game-class-picker-stage.is-swapping .game-class-side-panel.is-fading-out,
.game-class-picker-stage.is-swapping .game-class-side-panel.is-fading-in {
    visibility: visible;
    pointer-events: none;
}

.game-class-picker-stage.is-swapping .game-class-side-panel.is-active.is-fading-out {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    z-index: 1;
}

.game-class-picker-stage.is-swapping .game-class-side-panel.is-fading-in {
    opacity: 1;
    z-index: 2;
}

.game-class-side-panel.is-active {
    display: flex !important;
    flex-direction: column !important;
}

#game-class-panel-archmage.is-active {
    height: auto !important;
    min-height: var(--game-class-bm-panel-height, auto) !important;
}

#game-class-panel-archmage.is-active .game-class-side-panel-inner {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

.game-class-side-panel-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.game-class-side-panel-honor {
    margin: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #ffd86a !important;
    text-shadow: 0 0 10px rgba(255, 200, 64, 0.35), 0 2px 6px rgba(0, 0, 0, 0.9) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    line-height: 1.2 !important;
}

.game-class-side-panel-honor-line {
    display: block !important;
}

.game-class-side-panel-honor-emphasis {
    display: block !important;
    font-size: 1.25rem !important;
}

.game-class-side-panel-copy {
    margin: 0 !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    letter-spacing: 0.04em !important;
    color: rgba(241, 224, 172, 0.9) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.game-class-perk-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-top: 4px !important;
}

#game-class-panel-archmage .game-class-perk-layout {
    flex: 1 1 auto !important;
}

.game-class-perk-entry {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.game-class-perk-entry.is-active .game-class-perk-btn {
    border-color: rgba(255, 215, 0, 0.85) !important;
    box-shadow: 0 0 14px rgba(255, 200, 64, 0.28) !important;
}

.game-class-perk-entry.is-active .game-class-perk-icon {
    filter: grayscale(0%) brightness(1.05) !important;
}

.game-class-perk-icon-slot {
    flex: 0 0 auto !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(30, 26, 18, 0.88) 0%, rgba(12, 10, 8, 0.94) 100%) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
}

.game-class-perk-branch {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
}

.game-class-perk-branch-heading {
    margin: 0 !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 220, 140, 0.95) !important;
}

.game-class-perk-branch-hint {
    margin: 0 !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.68rem !important;
    line-height: 1.45 !important;
    color: rgba(210, 190, 130, 0.82) !important;
}

.game-class-perk-branch-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.game-class-perk-branch-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(184, 144, 48, 0.34) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(24, 20, 14, 0.92) 0%, rgba(10, 8, 6, 0.96) 100%) !important;
    color: rgba(241, 224, 172, 0.92) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.game-class-perk-branch-btn:hover {
    border-color: rgba(255, 215, 0, 0.55) !important;
    box-shadow: 0 0 12px rgba(255, 200, 64, 0.16) !important;
}

.game-class-perk-branch-btn.is-selected {
    border-color: rgba(255, 215, 0, 0.88) !important;
    box-shadow: 0 0 16px rgba(255, 200, 64, 0.28) !important;
    transform: translateY(-1px) !important;
}

.game-class-perk-branch-tag {
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 220, 140, 0.88) !important;
}

.game-class-perk-branch-title {
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: rgba(255, 236, 190, 0.98) !important;
}

.game-class-perk-branch-sub {
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(210, 190, 130, 0.86) !important;
}

.game-class-perk-branch-copy {
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.66rem !important;
    line-height: 1.45 !important;
    color: rgba(230, 210, 160, 0.9) !important;
}

.game-class-panel-notice,
.game-class-panel-alpha-notice {
    margin: 10px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.22) !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.68rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.03em !important;
    color: rgba(210, 190, 130, 0.78) !important;
    text-align: center !important;
    font-style: italic !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.game-class-perk-layout--static .game-class-perk-icon.is-placeholder {
    opacity: 0.82 !important;
}

.game-class-perk-layout--static .game-class-perk-entry:not(.is-active) .game-class-perk-entry-title,
.game-class-perk-layout--static .game-class-perk-entry:not(.is-active) .game-class-perk-entry-subtitle,
.game-class-perk-layout--static .game-class-perk-entry:not(.is-active) .game-class-perk-entry-copy,
.game-class-perk-layout--static .game-class-perk-entry .game-class-perk-entry-title,
.game-class-perk-layout--static .game-class-perk-entry .game-class-perk-entry-subtitle,
.game-class-perk-layout--static .game-class-perk-entry .game-class-perk-entry-copy {
    color: inherit !important;
}

.game-class-perk-layout--static .game-class-perk-entry .game-class-perk-entry-title {
    color: #ffd86a !important;
}

.game-class-perk-layout--static .game-class-perk-entry .game-class-perk-entry-subtitle {
    color: rgba(255, 224, 148, 0.72) !important;
}

.game-class-perk-layout--static .game-class-perk-entry .game-class-perk-entry-copy {
    color: rgba(235, 220, 170, 0.9) !important;
}

.game-class-perk-btn {
    flex: 0 0 auto !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(30, 26, 18, 0.92) 0%, rgba(12, 10, 8, 0.96) 100%) !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.game-class-perk-btn:hover {
    border-color: rgba(255, 215, 0, 0.55) !important;
    box-shadow: 0 0 10px rgba(255, 200, 64, 0.2) !important;
}

.game-class-perk-btn.is-active {
    border-color: rgba(255, 215, 0, 0.85) !important;
    box-shadow: 0 0 14px rgba(255, 200, 64, 0.28) !important;
    transform: none !important;
}

.game-class-perk-icon {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    filter: grayscale(35%) brightness(0.92) !important;
    pointer-events: none !important;
    user-select: none !important;
}

.game-class-perk-icon.is-placeholder {
    object-fit: contain !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    filter: none !important;
    opacity: 0.82 !important;
}

.game-class-perk-entry.is-active .game-class-perk-icon.is-placeholder {
    opacity: 1 !important;
}

.game-class-perk-entry-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.game-class-perk-entry-title {
    margin: 0 0 3px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: #ffd86a !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.game-class-perk-entry-subtitle {
    margin: 0 0 6px 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.54rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: rgba(255, 224, 148, 0.68) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.game-class-perk-entry-copy {
    margin: 0 !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.72rem !important;
    line-height: 1.48 !important;
    letter-spacing: 0.03em !important;
    color: rgba(235, 220, 170, 0.9) !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

.game-class-perk-entry:not(.is-active) .game-class-perk-entry-title {
    color: rgba(255, 216, 106, 0.72) !important;
}

.game-class-perk-entry:not(.is-active) .game-class-perk-entry-subtitle {
    color: rgba(255, 224, 148, 0.5) !important;
}

.game-class-perk-entry:not(.is-active) .game-class-perk-entry-copy {
    color: rgba(210, 195, 150, 0.62) !important;
}

.game-class-showcase .confirm-btn-dock {
    width: var(--game-class-showcase-command-w, 400px);
    max-width: 100%;
    margin: clamp(12px, 1.6vh, 16px) auto 0;
}

.game-class-picker-duo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 1;
    min-height: 0;
}

.game-class-showcase {
    --game-class-showcase-accent: rgba(255, 196, 72, 0.55);
    --game-class-showcase-accent-soft: rgba(255, 200, 64, 0.16);
    --game-class-showcase-accent-glow: rgba(255, 215, 0, 0.42);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.2vh, 22px);
    width: var(--game-class-showcase-track-w, min(100%, 500px));
    max-width: 100%;
    margin: 0 auto;
    flex: 0 0 auto;
}

.game-class-showcase[data-accent-class="battlemaster"],
.game-class-showcase[data-displayed-class="battlemaster"]:not([data-accent-class]) {
    --game-class-showcase-accent: rgba(220, 92, 48, 0.72);
    --game-class-showcase-accent-soft: rgba(255, 110, 48, 0.14);
    --game-class-showcase-accent-glow: rgba(255, 120, 48, 0.38);
}

.game-class-showcase[data-accent-class="archmage"],
.game-class-showcase[data-displayed-class="archmage"]:not([data-accent-class]) {
    --game-class-showcase-accent: rgba(92, 148, 255, 0.78);
    --game-class-showcase-accent-soft: rgba(72, 120, 255, 0.16);
    --game-class-showcase-accent-glow: rgba(100, 160, 255, 0.42);
}

.game-class-showcase.is-swapping {
    transition:
        --game-class-showcase-accent calc(var(--game-class-swap-ms, 900) * 1ms) ease,
        --game-class-showcase-accent-soft calc(var(--game-class-swap-ms, 900) * 1ms) ease,
        --game-class-showcase-accent-glow calc(var(--game-class-swap-ms, 900) * 1ms) ease;
}

.game-class-showcase-stage {
    --game-class-showcase-circle-drop: clamp(16px, 2.2vh, 30px);
    --game-class-showcase-aura-w: 500px;
    --game-class-showcase-aura-h: 120px;
    --game-class-showcase-ring-w: 465px;
    --game-class-showcase-ring-h: 64px;
    position: relative;
    width: min(100%, var(--game-class-showcase-aura-w));
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 clamp(8px, 2vw, 16px) clamp(6px, 1vh, 10px);
    box-sizing: border-box;
    overflow: visible;
}

.game-class-showcase-aura {
    position: absolute;
    left: 50%;
    bottom: clamp(2px, 0.5vh, 8px);
    width: var(--game-class-showcase-aura-w);
    height: var(--game-class-showcase-aura-h);
    transform: translateX(-50%) translateY(var(--game-class-showcase-circle-drop));
    border-radius: 50%;
    background:
        radial-gradient(ellipse 100% 100% at 50% 50%, var(--game-class-showcase-accent-soft) 0%, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.55s ease;
}

.game-class-showcase.is-swapping .game-class-showcase-aura {
    transition: opacity calc(var(--game-class-swap-ms, 900) * 1ms) ease;
}

.game-class-showcase-ring {
    position: absolute;
    left: 50%;
    bottom: clamp(8px, 1.4vh, 16px);
    width: var(--game-class-showcase-ring-w);
    height: var(--game-class-showcase-ring-h);
    box-sizing: border-box;
    transform: translateX(-50%) translateY(var(--game-class-showcase-circle-drop)) perspective(400px) rotateX(68deg);
    border: 1px solid var(--game-class-showcase-accent);
    border-radius: 50%;
    box-shadow:
        0 0 28px var(--game-class-showcase-accent-glow),
        inset 0 0 22px var(--game-class-showcase-accent-soft);
    opacity: 0.82;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.55s ease;
}

.game-class-showcase.is-swapping .game-class-showcase-ring {
    transition: opacity calc(var(--game-class-swap-ms, 900) * 1ms) ease;
}

.game-class-showcase-stage .game-class-portrait-stage {
    position: relative;
    z-index: 1;
}

.game-class-showcase.is-swapping .game-class-showcase-aura,
.game-class-showcase.is-swapping .game-class-showcase-ring {
    opacity: 1;
}

.game-class-showcase-command {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    width: var(--game-class-showcase-command-w, 400px);
    max-width: 100%;
    margin: 0 auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.game-class-showcase-nameplate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 16px);
    min-height: clamp(46px, 6vh, 54px);
    padding: 8px clamp(14px, 3vw, 22px);
    background:
        linear-gradient(180deg, rgba(18, 14, 10, 0.35) 0%, rgba(8, 6, 5, 0.55) 100%),
        url('images/borderedcontainer_thin.png') center / 100% 100% no-repeat;
    border-left: 1px solid rgba(184, 144, 48, 0.28);
    border-right: 1px solid rgba(184, 144, 48, 0.28);
    box-sizing: border-box;
}

.game-class-showcase-nameplate-rule {
    flex: 0 0 auto;
    width: clamp(18px, 3vw, 28px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--game-class-showcase-accent) 50%, transparent 100%);
    opacity: 0.85;
    box-shadow: 0 0 8px var(--game-class-showcase-accent-glow);
}

.game-class-showcase-label {
    margin: 0;
    flex: 1 1 auto;
    min-width: var(--game-class-showcase-label-min-w, 12.75rem);
    min-height: 1.2em;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.92rem, 1.65vw, 1.12rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    color: #ffe8a8;
    text-shadow:
        0 0 14px var(--game-class-showcase-accent-glow),
        0 2px 8px rgba(0, 0, 0, 0.92);
    transition: opacity 0.18s ease, color 0.45s ease;
}

.game-class-showcase.is-swapping .game-class-showcase-label {
    opacity: 1;
    transform: none;
}

.game-class-showcase-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 5.2vw, 52px);
    min-height: clamp(46px, 6vh, 54px);
    margin: 0;
    padding: 0;
    border: 1px solid rgba(184, 144, 48, 0.62);
    background:
        linear-gradient(165deg, rgba(42, 32, 20, 0.98) 0%, rgba(14, 11, 8, 0.98) 58%, rgba(24, 18, 12, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 180, 0.14),
        inset 0 -2px 6px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(255, 200, 64, 0.1);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        background 0.22s ease;
}

.game-class-showcase-arrow--prev {
    border-radius: 6px 0 0 6px;
    border-right: none;
}

.game-class-showcase-arrow--next {
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.game-class-showcase-arrow:hover {
    border-color: rgba(255, 215, 0, 0.88);
    background:
        linear-gradient(165deg, rgba(54, 40, 22, 0.98) 0%, rgba(18, 13, 9, 0.98) 58%, rgba(32, 24, 14, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 180, 0.2),
        0 0 20px var(--game-class-showcase-accent-glow);
    transform: translateY(-1px);
}

.game-class-showcase-arrow:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(255, 200, 64, 0.08);
}

.game-class-showcase-arrow:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.85);
    outline-offset: 2px;
    z-index: 1;
}

.game-class-showcase-arrow-glyph {
    display: block;
    width: clamp(10px, 1.2vw, 12px);
    height: clamp(10px, 1.2vw, 12px);
    border-top: 2px solid rgba(255, 224, 148, 0.95);
    border-right: 2px solid rgba(255, 224, 148, 0.95);
    box-shadow: 0 0 8px rgba(255, 200, 64, 0.35);
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.game-class-showcase-arrow--prev .game-class-showcase-arrow-glyph {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.game-class-showcase-arrow--next .game-class-showcase-arrow-glyph {
    transform: rotate(45deg);
    margin-right: 4px;
}

.game-class-showcase-arrow:hover .game-class-showcase-arrow-glyph {
    border-color: #fff2c8;
}

/* Legacy icon hook — kept for safety if cached HTML references old arrow markup */
.game-class-showcase-arrow-icon {
    display: none;
}

@property --game-class-showcase-accent {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(220, 92, 48, 0.72);
}

@property --game-class-showcase-accent-soft {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(255, 110, 48, 0.14);
}

@property --game-class-showcase-accent-glow {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(255, 120, 48, 0.38);
}

.game-class-portrait-stage {
    --game-class-stack-h: var(--game-class-art-max-h);
    position: relative;
    width: min(420px, 92vw);
    height: var(--game-class-stack-h);
    max-height: var(--game-class-stack-h);
    margin: 0 auto;
    overflow: visible;
}

.game-class-portrait-card {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateX(-50%);
    transform-origin: center bottom;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity calc(var(--game-class-swap-ms, 900) * 1ms) ease;
}

.game-class-portrait-card.is-front {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.game-class-portrait-card.is-back {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.game-class-portrait-stage.is-swapping .game-class-portrait-card {
    pointer-events: none;
}

.game-class-portrait-stage.is-swapping .game-class-portrait-card.is-fading-out {
    opacity: 0;
    z-index: 1;
}

.game-class-portrait-stage.is-swapping .game-class-portrait-card.is-fading-in {
    opacity: 1;
    z-index: 2;
}

.game-class-showcase-stage:has(.game-class-portrait-card.is-front.is-hovered) .game-class-showcase-aura {
    opacity: 1;
    filter: blur(6px);
}

.game-class-showcase-stage:has(.game-class-portrait-card.is-front.is-hovered) .game-class-showcase-ring {
    opacity: 1;
    box-shadow:
        0 0 24px var(--game-class-showcase-accent-glow),
        inset 0 0 18px var(--game-class-showcase-accent-soft);
}

.game-class-portrait-card.is-front .game-class-portrait-img {
    opacity: 1;
}

.game-class-portrait-img {
    display: block;
    width: auto;
    height: auto;
    max-height: var(--game-class-stack-h);
    max-width: min(360px, 42vw);
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    pointer-events: none;
    image-rendering: auto;
    transition: opacity 0.45s ease;
}

/* Archmage art is squarer (638×643); same caps render shorter than Battlemaster (552×636). */
.game-class-portrait-card[data-class-id="archmage"] .game-class-portrait-img {
    max-height: calc(var(--game-class-stack-h) * var(--game-class-archmage-portrait-scale, 1.15));
    max-width: min(calc(360px * var(--game-class-archmage-portrait-scale, 1.15)), 48vw);
}

.game-class-portrait-card.is-front.is-selected {
    outline: none;
}

.game-class-portrait-card.is-front.is-selected .game-class-portrait-img {
    opacity: 1;
}

.game-class-option:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.85);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .game-class-portrait-card,
    .game-class-showcase-label,
    .game-class-showcase-aura,
    .game-class-showcase-ring,
    .game-class-side-panel {
        transition: none !important;
    }
}

/* PC / desktop — 3-column grid keeps portraits centered; panels sit in side tracks (no translateX). */
@media (min-width: 900px) {
    #game-page-canvas,
    .game-page-canvas {
        --game-class-art-max-h: min(
            500px,
            max(180px, calc(var(--game-class-art-available-h) - 32px))
        );
    }

    .game-class-portrait-stage,
    .game-class-portrait-img {
        max-width: min(28vw, 320px);
    }

    .game-class-portrait-card[data-class-id="archmage"] .game-class-portrait-img {
        max-width: min(calc(28vw * var(--game-class-archmage-portrait-scale, 1.15)), 368px);
        max-height: calc(var(--game-class-stack-h) * var(--game-class-archmage-portrait-scale, 1.15));
    }

    .game-class-portrait-stage {
        width: min(320px, 28vw);
    }

    .game-page-main {
        justify-content: flex-start !important;
        align-items: center !important;
        padding-top: 6px !important;
    }

    .game-page-view--class.is-active {
        justify-content: stretch !important;
        align-items: stretch !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .game-page-class-modal-stage {
        justify-content: stretch !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        padding-top: 0 !important;
    }

    .game-class-picker {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    .game-class-picker-title {
        top: var(--game-class-header-offset, 100px) !important;
        transform: translateX(-50%) !important;
    }

    .game-class-picker-stage {
        display: grid !important;
        grid-template-columns: var(--game-class-panel-slot-w, min(340px, 100%)) var(--game-class-showcase-track-w, 500px) !important;
        grid-template-rows: minmax(0, 1fr);
        align-items: center !important;
        justify-content: center !important;
        justify-items: stretch !important;
        gap: clamp(14px, 2vw, 28px) !important;
        min-height: 0 !important;
        width: min(1180px, 100%) !important;
        max-width: min(1180px, 100%) !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .game-class-picker-duo {
        grid-column: 2 !important;
        grid-row: 1 !important;
        flex: 0 0 auto !important;
        order: unset !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        width: var(--game-class-showcase-track-w, 500px) !important;
        max-width: var(--game-class-showcase-track-w, 500px) !important;
        min-width: var(--game-class-showcase-track-w, 500px) !important;
        transform: none !important;
        justify-self: center !important;
    }

    #game-class-panel-battlemaster,
    #game-class-panel-archmage {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex: none !important;
        order: unset !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: translateX(var(--game-class-panel-offset-x, 0px)) !important;
        width: var(--game-class-panel-slot-w, min(340px, 100%)) !important;
        max-width: 340px !important;
        min-height: var(--game-class-panel-slot-min-h, auto) !important;
        align-self: center !important;
        justify-self: stretch !important;
        margin: 0 !important;
    }
}

@media (min-width: 900px) and (max-width: 1100px) {
    #game-page-canvas,
    .game-page-canvas {
        --game-shell-chrome-top: clamp(52px, 8vh, 72px);
        --game-shell-progress-h: clamp(82px, 12vh, 104px);
        --game-shell-title-h: clamp(36px, 6vh, 56px);
    }

    .game-class-picker-stage {
        gap: clamp(10px, 1.6vw, 18px) !important;
        width: min(100%, 980px) !important;
    }

    #game-class-panel-battlemaster,
    #game-class-panel-archmage {
        flex-basis: min(300px, 30vw) !important;
        width: min(300px, 30vw) !important;
        max-width: 300px !important;
    }

    .game-class-portrait-stage,
    .game-class-portrait-img {
        max-width: min(36vw, 280px);
    }

    .game-class-portrait-card[data-class-id="archmage"] .game-class-portrait-img {
        max-width: min(calc(36vw * var(--game-class-archmage-portrait-scale, 1.15)), 322px);
        max-height: calc(var(--game-class-stack-h) * var(--game-class-archmage-portrait-scale, 1.15));
    }

    .game-class-portrait-stage {
        width: min(280px, 36vw);
    }
}

@media (max-width: 768px) {
    #game-page-canvas,
    .game-page-canvas {
        --game-shell-chrome-top: clamp(48px, 7vh, 64px);
        --game-shell-progress-h: clamp(76px, 11vh, 96px);
        --game-shell-title-h: clamp(30px, 5vh, 44px);
    }

    .game-class-portrait-stage,
    .game-class-portrait-img {
        max-width: min(46vw, 260px);
    }

    .game-class-portrait-card[data-class-id="archmage"] .game-class-portrait-img {
        max-width: min(calc(46vw * var(--game-class-archmage-portrait-scale, 1.15)), 299px);
        max-height: calc(var(--game-class-stack-h) * var(--game-class-archmage-portrait-scale, 1.15));
    }

    .game-class-portrait-stage {
        width: min(300px, 88vw);
    }

    .game-onboarding-step-label {
        font-size: 0.5rem !important;
        letter-spacing: 0.05em !important;
    }
}

.game-page-class-modal-img {
    display: block !important;
    width: auto !important;
    max-width: min(960px, 94vw) !important;
    max-height: min(calc(100dvh - 120px), 88vh) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    user-select: none !important;
    pointer-events: none !important;
    transform: scale(2) !important;
    transform-origin: center center !important;
}

.game-page-panel {
    width: min(720px, 94vw) !important;
    margin: 0 auto !important;
}

.game-page-panel-frame {
    padding: 28px 32px 24px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.game-page-eyebrow {
    margin: 0 0 8px !important;
    font-family: 'RoyalDetails', serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(184, 144, 48, 0.9) !important;
}

.game-page-heading {
    margin: 0 0 16px !important;
    font-family: 'Cinzel', serif !important;
    font-size: clamp(1.35rem, 3.2vw, 1.85rem) !important;
    color: #ffd700 !important;
    letter-spacing: 0.06em !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
    line-height: 1.2 !important;
}

.game-page-copy {
    text-align: left !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: rgba(241, 224, 172, 0.88) !important;
    margin-bottom: 20px !important;
}

.game-page-copy p {
    margin: 0 0 12px !important;
}

.game-page-copy p:last-child {
    margin-bottom: 0 !important;
}

.game-page-actions {
    display: flex !important;
    justify-content: center !important;
    padding-top: 8px !important;
}

.game-page-return-btn:not(.confirm-btn) {
    font-family: 'Cinzel', serif !important;
    font-size: 0.88rem !important;
    font-weight: bold !important;
    letter-spacing: 0.08em !important;
    padding: 10px 22px !important;
    cursor: pointer !important;
    border-radius: 2px !important;
    border: 1px solid rgba(184, 144, 48, 0.55) !important;
    color: #ffd700 !important;
    background-image: url('images/borderedcontainer_thin.png') !important;
    background-size: 100% 100% !important;
    background-color: rgba(12, 10, 8, 0.92) !important;
    transition: filter 0.2s ease, transform 0.1s ease !important;
}

.game-page-return-btn:not(.confirm-btn):hover {
    filter: brightness(1.15) !important;
}

.game-page-return-btn:not(.confirm-btn):active {
    transform: scale(0.98) !important;
}

.how-did-you-get-here-main {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: var(--ra-viewport-h, 100vh) !important;
    padding: 32px 20px 48px !important;
    box-sizing: border-box !important;
}

.how-did-you-get-here-panel {
    margin: 0 auto !important;
}

/* --- In-game chat module (official age page only) --- */
#game-page-canvas #game-chat-module,
#game-chat-module.is-age-chat-gated,
#age-page-canvas .age-map-bottom-chat-messages-host.is-age-chat-gated,
#age-page-canvas .age-map-bottom-chat-compose-host.is-age-chat-gated {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- Site-wide page boot loading gate (RIFT) --- */
.ra-page-loading-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483640;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.ra-page-loading-gate.is-visible {
    pointer-events: auto;
    opacity: 1;
}

.ra-page-loading-gate[hidden] {
    display: none !important;
}

.ra-page-loading-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 2, 0.62);
}

.ra-page-loading-gate-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 48px));
    margin: 0;
}

.ra-page-loading-gate-dialog .portal-server-panel-controls {
    padding: 22px 28px;
    text-align: center;
}

.ra-page-loading-gate-message {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffd978;
}

#age-page-canvas.is-age-hud-layout-pending .age-map-hud--left {
    visibility: hidden;
    pointer-events: none;
}

/* --- Official age session: world map shell (agealpha, age1, age2, …) --- */
#age-page-canvas {
    --age-map-slot-gap: 10px;
    --age-map-hud-top-inset: max(12px, env(safe-area-inset-top));
    --age-map-hud-top-bar-height: 78px;
    --age-map-hud-bottom-inset: max(16px, env(safe-area-inset-bottom));
    --age-chat-compose-width: 420px;
    --age-chat-messages-width: 630px;
    --age-map-hud-bottom-bar-height: 58px;
    --age-quick-tips-copy-width: min(26rem, calc(100vw - min(520px, 42vw) - 12rem));
    --age-chat-compose-control-height: 36px;
    --age-chat-messages-gap: 10px;
    --age-chat-messages-height: 198px;
    --age-map-slot-top: calc(var(--age-map-hud-top-inset) + var(--age-map-hud-top-bar-height) + var(--age-map-slot-gap));
    --age-map-slot-bottom: calc(var(--age-map-hud-bottom-inset) + var(--age-map-hud-bottom-bar-height) + var(--age-map-slot-gap));
    /* Shared top/bottom HUD rail chrome */
    --age-hud-rail-border: rgba(184, 144, 48, 0.4);
    --age-hud-rail-bg: linear-gradient(165deg, rgba(34, 28, 20, 0.97) 0%, rgba(12, 10, 8, 0.99) 100%);
    --age-hud-rail-sheen: linear-gradient(180deg, rgba(255, 215, 0, 0.07) 0%, transparent 20%);
    --age-hud-rail-inset: inset 0 1px 0 rgba(255, 215, 0, 0.12);
    --age-hud-rail-shadow: 0 8px 22px rgba(0, 0, 0, 0.52);
    --age-hud-rail-chip-bg: rgba(0, 0, 0, 0.34);
    --age-hud-rail-chip-border: rgba(184, 144, 48, 0.28);
    --age-hud-rail-divider: rgba(184, 144, 48, 0.32);
}

#age-page-canvas .age-page-main {
    flex: 1 1 0 !important;
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.age-map-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    container-type: size;
    container-name: age-map-shell;
}

.age-map-anchor {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--age-map-slot-top);
    bottom: var(--age-map-slot-bottom);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    container-type: size;
    container-name: age-map-slot;
    pointer-events: none;
}

.age-map-anchor .game-region-map-stage,
.age-map-anchor .age-map-frame {
    pointer-events: auto;
}

#age-page-canvas .age-map-anchor .game-region-map-stage {
    flex: 0 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#age-page-canvas .age-map-frame.game-region-map-frame {
    --game-region-map-bezel: 12px;
    width: min(1642px, 100cqw, 100cqh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
}

#age-page-canvas .age-map-frame .game-region-map-bg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: fill;
}

.age-map-hud {
    position: fixed;
    z-index: 12;
    box-sizing: border-box;
    pointer-events: auto;
}

.age-map-hud-panel {
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.07) 0%, transparent 22%),
        linear-gradient(165deg, rgba(32, 26, 18, 0.96) 0%, rgba(10, 8, 6, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.12),
        0 10px 28px rgba(0, 0, 0, 0.55);
    color: #f1e0ac;
}

.age-map-hud--top {
    position: relative;
    z-index: 200;
    top: max(12px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    min-height: var(--age-map-hud-top-bar-height, 78px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

.age-map-hud--top > * {
    pointer-events: auto;
}

#age-page-canvas .age-map-hud-top-bar,
#age-page-canvas .age-map-bottom-dock-shell.age-map-hud-panel {
    border: 1px solid var(--age-hud-rail-border);
    border-radius: 6px;
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
}

.age-map-hud-top-bar {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    box-sizing: border-box;
    height: var(--age-map-hud-top-bar-height, 78px);
    min-height: var(--age-map-hud-top-bar-height, 78px);
    padding: 10px 16px;
}

#age-page-canvas .age-map-top-bar-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: min(72vw, 820px);
    --age-top-bar-age-divider-gap: 20px;
    --age-top-bar-logo-slot-h: calc((var(--age-map-hud-top-bar-height, 78px) - 22px) * 1.171875 - 5px);
    --age-top-bar-logo-slot-w: min(229px, 28.125vw);
}

#age-page-canvas .age-map-top-bar-logo-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--age-top-bar-logo-slot-w);
    height: var(--age-top-bar-logo-slot-h);
    line-height: 0;
}

#age-page-canvas .age-map-top-bar-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: calc(var(--age-top-bar-logo-slot-h) * 0.9);
    max-width: min(206px, 25.3125vw);
    object-fit: contain;
    object-position: center center;
}

#age-page-canvas .age-map-top-bar-separator:not(.age-map-top-bar-separator--nation) {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: calc(var(--age-map-hud-top-bar-height, 78px) - 26px);
    margin: 0 var(--age-top-bar-age-divider-gap, 20px) 0 14px;
    background: linear-gradient(
        180deg,
        rgba(184, 144, 48, 0) 0%,
        rgba(184, 144, 48, 0.55) 18%,
        rgba(255, 217, 120, 0.72) 50%,
        rgba(184, 144, 48, 0.55) 82%,
        rgba(184, 144, 48, 0) 100%
    );
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.12);
}

.age-map-age-badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.age-map-age-badge-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.82);
}

.age-map-age-badge-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd978;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.22);
}

#age-page-canvas .age-map-top-bar-separator--nation {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: calc(var(--age-map-hud-top-bar-height, 78px) - 26px);
    margin: 0 0 0 var(--age-top-bar-age-divider-gap, 20px);
    background: linear-gradient(
        180deg,
        rgba(184, 144, 48, 0) 0%,
        rgba(184, 144, 48, 0.55) 18%,
        rgba(255, 217, 120, 0.72) 50%,
        rgba(184, 144, 48, 0.55) 82%,
        rgba(184, 144, 48, 0) 100%
    );
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.12);
}

#age-page-canvas .age-map-top-bar-nation {
    position: relative;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    max-width: none;
    margin-left: var(--age-top-bar-age-divider-gap, 20px);
}

.age-nation-welcome-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: auto;
    padding-right: 4px;
}

#age-page-canvas .age-map-top-bar-nation-crest {
    flex: 0 0 auto;
    display: block;
    width: auto;
    height: calc(var(--age-map-hud-top-bar-height, 78px) - 24px);
    max-height: 52px;
    max-width: 52px;
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

#age-page-canvas .age-map-top-bar-nation-text {
    margin: 0;
    flex: 0 0 auto;
    min-width: max-content;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #ffd978;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
    overflow: visible;
}

/* Game Hub — top bar dropdown (views, War Room) */
.age-nation-hub {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 18px;
}

.age-nation-hub-anchor {
    position: relative;
    display: inline-block;
    width: var(--age-nation-hub-menu-min-width, max-content);
    max-width: none;
    vertical-align: middle;
}

.age-nation-hub-toggle {
    position: relative;
    z-index: 2;
    display: inline-grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 10px 0 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 176px;
    min-height: 42px;
    padding: 8px 16px 8px 12px;
    border: 1px solid rgba(184, 144, 48, 0.48);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.09) 0%, transparent 46%),
        linear-gradient(165deg, rgba(34, 26, 16, 0.98) 0%, rgba(8, 6, 4, 0.99) 100%);
    color: rgba(236, 220, 180, 0.92);
    font-family: 'Cinzel', serif;
    cursor: pointer;
    text-align: left;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.14),
        0 4px 14px rgba(0, 0, 0, 0.28);
    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.12s ease;
}

.age-nation-hub-toggle-mark {
    flex: 0 0 auto;
    width: 3px;
    height: 30px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffd978 0%, #c9a227 48%, #7a5520 100%);
    box-shadow: 0 0 10px rgba(255, 190, 60, 0.28);
}

.age-nation-hub-toggle-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    flex: 1 1 auto;
    margin-left: 5px;
    padding-right: 4px;
}

.age-nation-hub-toggle-eyebrow {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.15;
    color: rgba(255, 215, 128, 0.58);
}

.age-nation-hub-toggle-label {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    color: #ffe7b0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.age-nation-hub-toggle:hover,
.age-nation-hub-toggle:focus-visible {
    border-color: rgba(255, 215, 0, 0.62);
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.2),
        0 6px 18px rgba(0, 0, 0, 0.34);
    transform: translateY(-1px);
}

.age-nation-hub-toggle:hover .age-nation-hub-toggle-label,
.age-nation-hub-toggle:focus-visible .age-nation-hub-toggle-label {
    color: #fff0c8;
}

.age-nation-hub.is-open .age-nation-hub-toggle {
    border-color: rgba(255, 215, 0, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.14) 0%, transparent 50%),
        linear-gradient(165deg, rgba(52, 40, 22, 0.99) 0%, rgba(14, 10, 6, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.22),
        inset 3px 0 0 rgba(255, 215, 0, 0.55),
        0 8px 22px rgba(0, 0, 0, 0.38);
    transform: none;
}

.age-nation-hub.is-open .age-nation-hub-toggle-eyebrow {
    color: rgba(255, 215, 128, 0.78);
}

.age-nation-hub.is-open .age-nation-hub-toggle-label {
    color: #ffd978;
}

.age-nation-hub-toggle-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.32);
    color: rgba(255, 215, 128, 0.88);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.14s ease,
        background 0.14s ease;
}

.age-nation-hub-toggle-chevron::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-top: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.age-nation-hub.is-open .age-nation-hub-toggle-chevron {
    transform: rotate(180deg);
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(48, 36, 18, 0.55);
}

.age-nation-hub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Hidden until RIFT positions the menu (avoids pre-sync flash under the toggle) */
.age-nation-hub-menu:not(.is-menu-position-synced):not(.age-nation-hub-menu--box) {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
}

/* RIFT: fixed placement from age-nation-hub.js — rungs slide down from behind toggle */
.age-nation-hub-menu.is-menu-position-synced {
    position: fixed !important;
    top: var(--age-nation-hub-menu-top) !important;
    left: var(--age-nation-hub-menu-left) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: auto !important;
    min-width: var(--age-nation-hub-menu-min-width, 196px) !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 199;
    display: grid !important;
    grid-template-rows: 0fr;
    overflow: hidden;
    transform: none;
    clip-path: none;
    -webkit-clip-path: none;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: grid-template-rows 0.44s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.age-nation-hub.is-open .age-nation-hub-menu.is-menu-position-synced {
    grid-template-rows: 1fr;
    pointer-events: auto;
}

.age-nation-hub.is-hub-closing .age-nation-hub-menu.is-menu-position-synced {
    grid-template-rows: 0fr;
    pointer-events: none;
}

.age-nation-hub-menu-ladder {
    min-height: 0;
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.age-nation-hub.is-open .age-nation-hub-menu-ladder,
.age-nation-hub.is-hub-closing .age-nation-hub-menu-ladder {
    border: 1px solid var(--age-hud-rail-border);
    border-radius: 6px;
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
}

/* Hidden above/behind Game Hub toggle until they slide into the panel */
.age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--age-nation-hub-rung-travel, 40px)), 0);
    transition-property: transform, opacity;
    transition-duration: 0.36s, 0.28s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease;
    transition-delay: 0s;
}

.age-nation-hub.is-open .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Close: slide rungs back up (no width change — avoids fling to the right) */
.age-nation-hub.is-hub-closing .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--age-nation-hub-rung-travel, 40px)), 0);
    transition-property: transform, opacity;
    transition-duration: 0.24s, 0.2s;
}

.age-nation-hub.is-hub-closing .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--war-room {
    transition-delay: 0s;
}

.age-nation-hub.is-hub-closing .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--council-room {
    transition-delay: 0.04s;
}

.age-nation-hub.is-hub-closing .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--settlement {
    transition-delay: 0.08s;
}

.age-nation-hub.is-hub-closing .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--map {
    transition-delay: 0.12s;
}

.age-nation-hub.is-open .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--map {
    transition-delay: 0.06s;
}

.age-nation-hub.is-open .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--council-room {
    transition-delay: 0.11s;
}

.age-nation-hub.is-open .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--settlement {
    transition-delay: 0.16s;
}

.age-nation-hub.is-open .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item--war-room {
    transition-delay: 0.21s;
}

.age-nation-hub-menu-ladder > .age-nation-hub-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    border: none;
    border-bottom: 1px solid var(--age-hud-rail-divider);
    border-radius: 0;
    background: transparent;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.86);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition:
        background 0.14s ease,
        color 0.14s ease;
}

.age-nation-hub-menu-ladder > .age-nation-hub-menu-item:hover,
.age-nation-hub-menu-ladder > .age-nation-hub-menu-item:focus-visible {
    background: rgba(255, 215, 0, 0.14);
    color: #fff6d8;
    outline: none;
}

#age-page-canvas .age-nation-hub-menu-ladder > .age-nation-hub-menu-item {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

#age-page-canvas .age-nation-hub-menu-ladder > .age-nation-hub-menu-item:hover,
#age-page-canvas .age-nation-hub-menu-ladder > .age-nation-hub-menu-item:focus-visible {
    border-color: transparent;
    background: rgba(255, 215, 0, 0.16);
    color: #fff6d8;
    box-shadow: none;
}

.age-nation-hub-menu-ladder > .age-nation-hub-menu-item.is-active,
#age-page-canvas .age-nation-hub-menu-ladder > .age-nation-hub-menu-item.is-active {
    border-color: transparent;
    border-bottom-color: var(--age-hud-rail-divider);
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, transparent 100%);
    color: #ffd978;
    box-shadow: inset 3px 0 0 rgba(255, 215, 0, 0.72);
}

#age-page-canvas .age-nation-hub-menu-ladder > .age-nation-hub-menu-item.is-active:hover,
#age-page-canvas .age-nation-hub-menu-ladder > .age-nation-hub-menu-item.is-active:focus-visible {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.28) 0%, rgba(255, 215, 0, 0.06) 100%);
    color: #fff0c0;
}

.age-nation-hub-menu-ladder > .age-nation-hub-menu-item--war-room {
    border-bottom: none;
}

#age-page-canvas .age-map-bottom-dock-nav {
    display: none !important;
}

.age-map-resource-strip {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}

.age-map-resource-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 108px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--age-hud-rail-chip-border, rgba(184, 144, 48, 0.28));
    background: var(--age-hud-rail-chip-bg, rgba(0, 0, 0, 0.35));
}

#age-page-canvas .age-map-resource-item--hub {
    gap: 0;
    min-width: auto;
    padding: 0;
    border: none;
    background: none;
}

#age-page-canvas .age-map-resource-item--hub .age-nation-hub {
    margin-left: 0;
}

#age-page-canvas .age-map-resource-item--hub .age-nation-hub-anchor {
    width: auto;
    min-width: 0;
}

#age-page-canvas .age-nation-hub-toggle--resource-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: auto;
    min-width: 118px;
    min-height: 0;
    padding: 7px 14px 7px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.52);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.16) 0%, transparent 50%),
        linear-gradient(165deg, rgba(44, 34, 18, 0.96) 0%, rgba(10, 8, 5, 0.98) 100%);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.2),
        inset 3px 0 0 rgba(255, 215, 0, 0.58),
        0 3px 14px rgba(0, 0, 0, 0.34),
        0 0 16px rgba(184, 144, 48, 0.14);
    transform: none;
    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease;
}

#age-page-canvas .age-nation-hub-toggle--resource-chip .age-map-resource-label {
    color: rgba(255, 228, 168, 0.96);
    letter-spacing: 0.12em;
}

#age-page-canvas .age-nation-hub-toggle--resource-chip .age-nation-hub-toggle-label {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: none;
    line-height: 1;
    color: #fff3c4;
    text-shadow: none;
}

#age-page-canvas .age-nation-hub-toggle--resource-chip:hover,
#age-page-canvas .age-nation-hub-toggle--resource-chip:focus-visible {
    border-color: rgba(255, 215, 0, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.22) 0%, transparent 52%),
        linear-gradient(165deg, rgba(54, 42, 22, 0.98) 0%, rgba(12, 10, 6, 0.99) 100%);
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.26),
        inset 3px 0 0 rgba(255, 215, 0, 0.72),
        0 5px 18px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(255, 215, 0, 0.16);
    transform: translateY(-1px);
}

#age-page-canvas .age-nation-hub-toggle--resource-chip:hover .age-map-resource-label,
#age-page-canvas .age-nation-hub-toggle--resource-chip:focus-visible .age-map-resource-label,
#age-page-canvas .age-nation-hub-toggle--resource-chip:hover .age-nation-hub-toggle-label,
#age-page-canvas .age-nation-hub-toggle--resource-chip:focus-visible .age-nation-hub-toggle-label {
    color: #fff0c8;
}

#age-page-canvas .age-nation-hub.is-open .age-nation-hub-toggle--resource-chip {
    border-color: rgba(255, 215, 0, 0.78);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.24) 0%, transparent 54%),
        linear-gradient(165deg, rgba(58, 44, 22, 0.99) 0%, rgba(14, 10, 6, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.28),
        inset 3px 0 0 rgba(255, 215, 0, 0.82),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(255, 215, 0, 0.2);
    transform: none;
}

#age-page-canvas .age-nation-hub.is-open .age-nation-hub-toggle--resource-chip .age-map-resource-label,
#age-page-canvas .age-nation-hub.is-open .age-nation-hub-toggle--resource-chip .age-nation-hub-toggle-label {
    color: #ffd978;
}

#age-page-canvas .age-map-resource-item--commander-rank .age-map-resource-value {
    min-width: 7.5em;
    max-width: 16em;
    text-align: right;
    font-variant-numeric: normal;
    font-size: 0.76em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 232, 190, 0.96);
}

#age-page-canvas .age-map-resource-item--commander-rank.age-map-resource-item--rank-toggle {
    cursor: pointer;
    user-select: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

#age-page-canvas .age-map-resource-item--commander-rank.age-map-resource-item--rank-toggle:hover,
#age-page-canvas .age-map-resource-item--commander-rank.age-map-resource-item--rank-toggle:focus-within {
    border-color: rgba(255, 217, 120, 0.52);
    background: rgba(24, 18, 8, 0.58);
    box-shadow: 0 0 0 1px rgba(255, 217, 120, 0.18);
    outline: none;
}

#age-page-canvas button.age-map-resource-value--rank-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: right;
    cursor: pointer;
}

#age-page-canvas button.age-map-resource-value--rank-toggle:focus-visible {
    outline: 1px solid rgba(255, 217, 120, 0.72);
    outline-offset: 2px;
}

#age-page-canvas .age-map-resource-item--commander-rank.is-rank-ladder-open .age-map-resource-value {
    color: #ffe7a8;
    text-shadow: 0 0 10px rgba(255, 214, 0, 0.28);
}

/* Age — Commander rank ladder modal */
body.is-age-commander-rank-ladder-open {
    overflow: hidden;
}

.age-commander-rank-ladder-modal {
    position: fixed;
    inset: 0;
    z-index: 13080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.age-commander-rank-ladder-modal[hidden]:not(.is-open) {
    display: none !important;
}

.age-commander-rank-ladder-modal.is-open {
    display: flex !important;
    pointer-events: auto !important;
}

.age-commander-rank-ladder-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(4, 3, 2, 0.76);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.age-commander-rank-ladder-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100vw - 32px));
    max-height: min(78vh, 720px);
    border: 1px solid rgba(184, 144, 48, 0.48);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 200, 96, 0.1) 0%, transparent 42%),
        linear-gradient(180deg, rgba(28, 20, 12, 0.98) 0%, rgba(8, 6, 4, 0.98) 100%);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 230, 160, 0.12);
}

.age-commander-rank-ladder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.24);
}

.age-commander-rank-ladder-eyebrow {
    margin: 0 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 210, 120, 0.78);
}

.age-commander-rank-ladder-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 236, 196, 0.96);
}

.age-commander-rank-ladder-path {
    margin: 6px 0 0;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(241, 224, 172, 0.72);
}

.age-commander-rank-ladder-close {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(184, 144, 48, 0.34);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 236, 196, 0.92);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.age-commander-rank-ladder-close:hover,
.age-commander-rank-ladder-close:focus-visible {
    border-color: rgba(255, 217, 120, 0.58);
    color: #ffe7a8;
    outline: none;
}

.age-commander-rank-ladder-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px 14px;
}

.age-commander-rank-ladder-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.age-commander-rank-ladder-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(184, 144, 48, 0.16);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.22);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.age-commander-rank-ladder-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(184, 144, 48, 0.28);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(241, 224, 172, 0.82);
    background: rgba(12, 9, 6, 0.72);
}

.age-commander-rank-ladder-copy {
    display: flex;
    align-items: center;
    min-width: 0;
}

.age-commander-rank-ladder-name {
    font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(255, 236, 196, 0.9);
}

.age-commander-rank-ladder-row.is-attained {
    border-color: rgba(184, 144, 48, 0.24);
}

.age-commander-rank-ladder-row.is-future {
    opacity: 0.52;
}

.age-commander-rank-ladder-row.is-future .age-commander-rank-ladder-name {
    color: rgba(241, 224, 172, 0.68);
}

.age-commander-rank-ladder-row.is-current {
    border-color: rgba(255, 214, 0, 0.62);
    background: rgba(72, 54, 12, 0.42);
    box-shadow:
        0 0 0 1px rgba(255, 214, 0, 0.18),
        0 0 18px rgba(255, 214, 0, 0.22),
        inset 0 0 14px rgba(255, 214, 0, 0.08);
}

.age-commander-rank-ladder-row.is-current .age-commander-rank-ladder-level {
    border-color: rgba(255, 214, 0, 0.72);
    color: #ffe7a8;
    box-shadow: 0 0 12px rgba(255, 214, 0, 0.34);
}

.age-commander-rank-ladder-row.is-current .age-commander-rank-ladder-name {
    color: #ffe7a8;
    text-shadow: 0 0 12px rgba(255, 214, 0, 0.28);
}

.age-map-resource-tip {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    z-index: 12;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 217, 120, 0.42);
    background: rgba(8, 6, 3, 0.92);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.72);
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.25;
    color: rgba(244, 230, 200, 0.94);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.age-map-resource-tip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(255, 217, 120, 0.42);
}

.age-map-resource-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% - 1px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(8, 6, 3, 0.92);
}

.age-map-resource-item--has-tip:hover .age-map-resource-tip,
.age-map-resource-item--has-tip:focus-within .age-map-resource-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.age-map-resource-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.78);
}

.age-map-resource-value {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff3c4;
    font-variant-numeric: tabular-nums;
}

.age-map-resource-value--rsd {
    color: #dce8f4;
    text-shadow: 0 0 10px rgba(176, 208, 236, 0.18);
}

.age-hud-rsd-unit {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(196, 214, 232, 0.88);
}

#age-page-canvas .age-map-resource-item--treasury {
    min-width: 148px;
}

.age-map-resource-value--units {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    white-space: nowrap;
}

.age-hud-units-separator {
    color: rgba(236, 220, 180, 0.72);
    font-weight: 500;
    padding: 0 0.1em;
}

/* <60% healthy — red uninjured count + border pulse on Units chip only */
#age-page-canvas .age-map-resource-item--units.is-units-low-health:not(.is-units-critical-health) {
    animation: age-hud-units-border-pulse 1.5s ease-in-out infinite;
}

#age-page-canvas .age-map-resource-item--units.is-units-low-health .age-hud-units-uninjured,
#age-page-canvas .age-map-resource-value--units.is-units-low-health .age-hud-units-uninjured {
    color: #ff5c5c;
    text-shadow: 0 0 10px rgba(255, 70, 70, 0.45);
}

@keyframes age-hud-units-border-pulse {
    0%,
    100% {
        border-color: rgba(200, 56, 56, 0.42);
        box-shadow:
            inset 0 0 0 1px rgba(255, 80, 80, 0.08),
            0 0 0 rgba(220, 60, 60, 0);
    }

    50% {
        border-color: rgba(255, 100, 100, 0.88);
        box-shadow:
            inset 0 0 0 1px rgba(255, 120, 120, 0.22),
            0 0 14px rgba(220, 60, 60, 0.38);
    }
}

/* <25% healthy — entire Units chip interior (label + values) pulses red */
#age-page-canvas .age-map-resource-item--units.is-units-critical-health {
    animation: age-hud-units-chip-critical-pulse 1.25s ease-in-out infinite;
}

#age-page-canvas .age-map-resource-item--units.is-units-critical-health .age-map-resource-label {
    color: rgba(255, 175, 175, 0.95);
}

#age-page-canvas .age-map-resource-item--units.is-units-critical-health .age-hud-units-uninjured,
#age-page-canvas .age-map-resource-value--units.is-units-critical-health .age-hud-units-uninjured {
    color: #ff7070;
    text-shadow: 0 0 10px rgba(255, 80, 80, 0.5);
}

#age-page-canvas .age-map-resource-item--units.is-units-critical-health .age-hud-units-separator,
#age-page-canvas .age-map-resource-item--units.is-units-critical-health .age-hud-units-total {
    color: rgba(255, 220, 200, 0.88);
}

@keyframes age-hud-units-chip-critical-pulse {
    0%,
    100% {
        border-color: rgba(200, 52, 52, 0.55);
        background: rgba(72, 12, 12, 0.42);
        box-shadow:
            inset 0 0 14px rgba(190, 40, 40, 0.22),
            0 0 10px rgba(200, 45, 45, 0.18);
    }

    50% {
        border-color: rgba(255, 108, 108, 0.95);
        background: rgba(118, 20, 20, 0.68);
        box-shadow:
            inset 0 0 22px rgba(255, 70, 70, 0.38),
            0 0 18px rgba(230, 50, 50, 0.42);
    }
}

@media (prefers-reduced-motion: reduce) {
    #age-page-canvas .age-map-resource-item--units.is-units-low-health:not(.is-units-critical-health) {
        animation: none;
        border-color: rgba(255, 100, 100, 0.75);
        box-shadow: 0 0 10px rgba(220, 60, 60, 0.28);
    }

    #age-page-canvas .age-map-resource-item--units.is-units-critical-health {
        animation: none;
        border-color: rgba(255, 108, 108, 0.88);
        background: rgba(100, 18, 18, 0.55);
        box-shadow:
            inset 0 0 16px rgba(255, 70, 70, 0.28),
            0 0 12px rgba(220, 50, 50, 0.32);
    }
}

.age-map-top-bar-clock-cluster--brand {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 14px;
    width: auto;
    max-width: none;
    transform: none;
    pointer-events: auto;
    filter: none;
}

#age-page-canvas #portal-universal-game-time-panel.portal-universal-game-time-panel--age-hud {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 6px 14px 7px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 144, 48, 0.38) !important;
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.08) 0%, transparent 46%),
        rgba(0, 0, 0, 0.38) !important;
    background-image: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.14),
        0 2px 10px rgba(0, 0, 0, 0.28) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: none !important;
}

#age-page-canvas #portal-universal-game-time-display.portal-universal-game-time-display--age-hud {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 0 0.08em !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif !important;
    font-size: clamp(1.35rem, calc(4.8vw - 0.3rem), 2.6rem) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #ffd600 !important;
    background: linear-gradient(
        180deg,
        #ffe566 0%,
        #ffd600 42%,
        #ffc400 74%,
        #f9a825 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 0 !important;
    filter:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9))
        drop-shadow(0 1px 0 rgba(255, 230, 120, 0.42))
        drop-shadow(0 0 14px rgba(255, 214, 0, 0.45)) !important;
}

#age-page-canvas #portal-universal-game-time-display.portal-universal-game-time-display--age-hud .portal-game-time-char {
    color: #ffd600 !important;
    background: linear-gradient(
        180deg,
        #ffe566 0%,
        #ffd600 42%,
        #ffc400 74%,
        #f9a825 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 1 !important;
}

#age-page-canvas .age-map-hud--left {
    top: var(--age-council-board-top, var(--age-map-slot-top));
    left: var(--age-council-board-left, max(16px, env(safe-area-inset-left)));
    width: var(--age-council-board-width, min(415px, calc(100vw - 32px)));
    height: var(--age-left-column-height, var(--age-council-board-height, auto));
    max-width: calc(100vw - 32px);
    max-height: none;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

#age-page-canvas .age-map-hud-panel-inner--left {
    padding: 0;
    height: auto;
    min-height: 0;
    gap: 10px;
    overflow: visible;
}

#age-page-canvas .age-map-hud-panel-inner--left .age-council-board {
    flex: 1 1 auto;
    min-height: 0;
}

#age-page-canvas .age-map-hud--left,
#age-page-canvas .age-map-hud--left *,
#age-page-canvas .age-map-hud--right,
#age-page-canvas .age-map-hud--right * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#age-page-canvas .age-map-hud--left *::-webkit-scrollbar,
#age-page-canvas .age-map-hud--right *::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#age-page-canvas .age-map-hud-panel-inner--left .age-left-reports-panel {
    flex: 0 0 auto;
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible;
}

.age-map-hud--right {
    top: var(--age-map-slot-top);
    right: max(16px, env(safe-area-inset-right));
    width: min(340px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--age-map-slot-top) - var(--age-map-slot-bottom));
    overflow: hidden;
}

#age-page-canvas .age-map-hud--right {
    top: var(--age-council-board-top, calc(var(--age-map-slot-top) + 10px));
    bottom: var(--age-map-slot-bottom);
    right: calc(max(16px, env(safe-area-inset-right)) + 160px);
    width: min(540px, calc(100vw - 32px));
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

#age-page-canvas .age-map-hud-panel-inner--right {
    padding: 0;
    height: 100%;
    min-height: 0;
    gap: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

#age-page-canvas .age-map-hud-right-stack {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 100%;
    overflow: hidden;
}

#age-page-canvas .age-map-hud-right-stack .age-city-info-panel {
    flex: 0 0 auto;
}

#age-page-canvas .age-map-hud--right.is-city-info-players-open {
    overflow: hidden;
}

#age-page-canvas .age-map-hud--right.is-city-info-players-open .age-map-hud-panel-inner--right {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.age-map-hud-panel-inner--right,
.age-map-hud-panel-inner--left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.age-map-hud-section .age-map-hud-heading {
    margin-top: 0;
}

.age-map-hud-section + .age-map-hud-section .age-map-hud-heading {
    margin-top: 4px;
}

/* Nation council / notice board */
#age-page-canvas .age-council-board {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    height: var(--age-council-board-height, auto);
    min-height: 0;
    box-sizing: border-box;
    padding: 14px 16px 22px;
    border-radius: 6px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
    color: #f1e0ac;
}

.age-council-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 0;
    padding-bottom: 0;
    position: relative;
    flex: 0 0 auto;
}

/* Reserve top-right corner so title/status do not crowd the edit control */
.age-council-board-header:has(.age-council-board-edit-btn:not([hidden])) {
    padding-right: 58px;
    padding-bottom: 18px;
}

.age-council-board-header:has(.age-council-board-edit-btn:not([hidden])) .age-council-board-title-row {
    padding-right: 6px;
}

.age-council-board-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.age-council-board-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffd978;
    flex: 0 0 auto;
}

.age-council-board-status {
    flex: 0 1 auto;
    max-width: 58%;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.age-council-board-status--training-permitted {
    color: #e8f4ff;
    background: #1a4a8c;
}

.age-council-board-status--light-training-permitted {
    color: #2a2208;
    background: #e6c82a;
}

.age-council-board-status--stop-training {
    color: #f0e8dc;
    background: #0a0a0a;
}

.age-council-board-status--enemy-bordering {
    color: #ffe8e8;
    background: #8c1a1a;
}

.age-council-board-status--sf-time {
    color: #e8ffe8;
    background: #1a6b2e;
}

.age-council-board-status--rejoin {
    color: #1a1a1a;
    background: #f4f4f4;
}

.age-council-board-edit-btn {
    position: absolute;
    top: 2px;
    right: 8px;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(184, 144, 48, 0.55);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(48, 36, 18, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.16),
        0 2px 8px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.age-council-board-edit-btn:hover {
    border-color: rgba(255, 215, 0, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.24),
        0 0 14px rgba(255, 190, 60, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.55);
    transform: translateY(-1px);
}

.age-council-board-edit-btn:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.65);
    outline-offset: 2px;
}

.age-council-board-edit-glyph {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.age-council-board-edit-glyph::before {
    content: '';
    position: absolute;
    left: 2px;
    bottom: 1px;
    width: 11px;
    height: 13px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 2px 2px 1px 2px;
    background: linear-gradient(145deg, rgba(255, 228, 150, 0.22) 0%, rgba(28, 22, 12, 0.5) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.age-council-board-edit-glyph::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 14px;
    border-radius: 1px;
    background: linear-gradient(180deg, #f5e6b8 0%, #c9a227 55%, #8a6420 100%);
    transform: rotate(38deg);
    transform-origin: bottom right;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.age-council-board-schedule {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.age-council-board-schedule-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
    min-width: 0;
}

.age-council-board-schedule-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.72);
}

.age-council-board-schedule-value {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff3c4;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

#age-page-canvas .age-council-board-schedule-item {
    gap: 6px;
    padding: 8px 10px;
}

#age-page-canvas .age-council-board-notice {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.38);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(241, 224, 172, 0.94);
    white-space: pre-wrap;
    word-break: break-word;
}

.age-council-board-notice.is-empty {
    color: rgba(236, 220, 180, 0.55);
    font-style: italic;
}

#age-page-canvas .age-council-board-notice.age-council-board-notice--rich {
    white-space: normal;
}

#age-page-canvas .age-council-board-notice--rich .age-council-notice-heading {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 1.44rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd978;
    line-height: 1.25;
}

#age-page-canvas .age-council-board-notice--rich .age-council-notice-heading--sub {
    margin-top: 8px;
    font-size: 0.72rem;
    color: rgba(255, 217, 120, 0.9);
}

#age-page-canvas .age-council-board-notice--rich .age-council-notice-line,
#age-page-canvas .age-council-board-notice--rich .age-council-notice-bullet {
    margin: 0 0 6px;
}

#age-page-canvas .age-council-board-notice--rich .age-council-notice-bullet {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

#age-page-canvas .age-council-board-notice--rich .age-council-notice-bullet-mark {
    flex: 0 0 auto;
    color: rgba(255, 217, 120, 0.82);
}

#age-page-canvas .age-council-board-notice--rich strong {
    font-weight: 700;
    color: #fff8dc;
}

#age-page-canvas .age-council-board-notice--rich em {
    font-style: italic;
    color: rgba(241, 224, 172, 0.98);
}

#age-page-canvas .age-council-board-notice--rich u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

#age-page-canvas .age-council-board-notice--rich .age-council-notice-color {
    font-weight: inherit;
}

#age-page-canvas .age-council-board-edited-by {
    position: absolute;
    right: 16px;
    bottom: 8px;
    left: 16px;
    margin: 0;
    padding: 0;
    text-align: right;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.58rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(236, 220, 180, 0.58);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

#age-page-canvas .age-council-board-edited-by[hidden] {
    display: none !important;
}

#age-page-canvas .age-council-board:has(.age-council-board-edited-by:not([hidden])) .age-council-board-notice {
    padding-bottom: 18px;
}

/* Council board editor */
.age-council-board-editor {
    position: fixed;
    inset: 0;
    z-index: 10000020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.age-council-board-editor[hidden] {
    display: none !important;
}

.age-council-board-editor.is-open {
    display: flex !important;
}

.age-council-board-edit-btn[hidden] {
    display: none !important;
}

#age-page-canvas .age-council-board-edit-btn {
    z-index: 2;
    pointer-events: auto;
}

#age-page-canvas .age-council-board-edit-btn[hidden] {
    display: none !important;
    pointer-events: none;
}

.age-council-board-editor-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.age-council-board-editor-dialog {
    position: relative;
    z-index: 1;
    width: min(calc(var(--age-council-notice-viewport-width, 360px) + 72px), calc(100vw - 32px));
    max-width: min(640px, calc(100vw - 32px));
    max-height: min(96dvh, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    border: 1px solid rgba(184, 144, 48, 0.45);
    background:
        linear-gradient(165deg, rgba(34, 28, 20, 0.98) 0%, rgba(10, 8, 6, 0.99) 100%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.85);
    overflow: visible;
}

.age-council-board-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.28);
}

.age-council-board-editor-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffd978;
}

.age-council-board-editor-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.age-council-board-editor-close-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.age-council-board-editor-body {
    padding: 14px 16px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 1 auto;
}

.age-council-board-editor-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.age-council-board-editor-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.age-council-board-editor-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.82);
}

.age-council-board-editor-select,
.age-council-board-editor-input,
.age-council-board-editor-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    background: rgba(0, 0, 0, 0.45);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.85rem;
    color: #fff3c4;
}

.age-council-board-editor-notice-compose {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.age-council-board-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.24);
    background: rgba(0, 0, 0, 0.28);
}

.age-council-board-editor-toolbar-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: rgba(184, 144, 48, 0.35);
}

label.age-council-board-editor-tool {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.age-council-board-editor-toolbar .age-council-board-editor-tool--color-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    width: 30px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.age-council-board-editor-toolbar .age-council-board-editor-tool--color-picker .age-council-board-editor-tool-color-chip {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(184, 144, 48, 0.55);
    background: #ffd978;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 6px rgba(255, 215, 0, 0.12);
    pointer-events: none;
}

.age-council-board-editor-toolbar .age-council-board-editor-tool--color-picker:hover .age-council-board-editor-tool-color-chip {
    border-color: rgba(255, 217, 120, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 8px rgba(255, 215, 0, 0.22);
}

.age-council-board-editor-toolbar .age-council-board-editor-tool--color-picker .age-council-board-editor-color-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

.age-council-board-editor-tool {
    flex: 0 0 auto;
    min-width: 30px;
    height: 28px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.42);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #f1e0ac;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.age-council-board-editor-tool:hover {
    border-color: rgba(255, 217, 120, 0.55);
    background: rgba(255, 215, 0, 0.1);
    color: #fff3c4;
}

.age-council-board-editor-tool:active {
    transform: translateY(1px);
}

.age-council-board-editor-tool strong,
.age-council-board-editor-tool em,
.age-council-board-editor-tool u {
    font: inherit;
    color: inherit;
    text-decoration: none;
}

.age-council-board-editor-tool em {
    font-style: italic;
}

.age-council-board-editor-tool u {
    text-decoration: underline;
}

.age-council-board-editor-notice-compose .age-council-board-editor-textarea {
    border: none;
    border-radius: 0;
    background: transparent;
    min-height: 120px;
    resize: vertical;
}

.age-council-board-editor-preview-shell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
}

/* Editor modal sits outside #age-page-canvas — mirror the live board notice viewport */
.age-council-board-editor .age-council-board-editor-preview {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--age-council-notice-viewport-width, 100%);
    height: auto;
    min-height: var(--age-council-notice-viewport-height, 120px);
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.38);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(241, 224, 172, 0.94);
    white-space: pre-wrap;
    word-break: break-word;
}

.age-council-board-editor .age-council-board-editor-preview.is-empty {
    color: rgba(236, 220, 180, 0.55);
    font-style: italic;
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich {
    white-space: normal;
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich .age-council-notice-heading {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 1.44rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd978;
    line-height: 1.25;
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich .age-council-notice-heading--sub {
    margin-top: 8px;
    font-size: 0.72rem;
    color: rgba(255, 217, 120, 0.9);
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich .age-council-notice-line,
.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich .age-council-notice-bullet {
    margin: 0 0 6px;
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich .age-council-notice-bullet {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich .age-council-notice-bullet-mark {
    flex: 0 0 auto;
    color: rgba(255, 217, 120, 0.82);
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich strong {
    font-weight: 700;
    color: #fff8dc;
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich em {
    font-style: italic;
    color: rgba(241, 224, 172, 0.98);
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.age-council-board-editor .age-council-board-editor-preview.age-council-board-notice--rich .age-council-notice-color {
    font-weight: inherit;
}

.age-council-board-editor-feedback {
    margin: 0;
    padding: 8px 16px 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(241, 224, 172, 0.9);
}

.age-council-board-editor-feedback[hidden] {
    display: none !important;
}

.age-council-board-editor-feedback.is-error {
    color: #ffb4b4;
}

.age-council-board-editor-feedback.is-success {
    color: #b8f0c0;
}

.age-council-board-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(184, 144, 48, 0.28);
}

.age-council-board-editor-footer .confirm-btn.is-saving,
.age-council-board-editor-footer .confirm-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
}

/* SF Time — green screen-edge pulse */
#age-page-canvas.age-sf-time-pulse-active::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    box-shadow:
        inset 0 0 70px rgba(40, 200, 80, 0.55),
        inset 0 0 140px rgba(20, 120, 40, 0.35);
    animation: age-sf-border-pulse 1.1s ease-in-out infinite;
}

@keyframes age-sf-border-pulse {
    0%, 100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

.age-map-hud-panel-inner {
    padding: 14px 16px 16px;
}

.age-map-hud-heading {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.32);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffd978;
}

.age-map-stat-list,
.age-map-report-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.age-map-stat-row,
.age-map-report-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
}

.age-map-stat-label,
.age-map-report-label {
    font-size: 0.78rem;
    color: rgba(236, 220, 180, 0.82);
}

.age-map-stat-value,
.age-map-report-count {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff3c4;
    font-variant-numeric: tabular-nums;
}

.age-map-report-item--alert {
    border-color: rgba(200, 120, 80, 0.45);
    background: rgba(48, 22, 14, 0.45);
}

/* Shared HUD rail tabs (City Info + left reports) */
#age-page-canvas .age-hud-rail-tabs,
#age-page-canvas .age-city-info-tabs {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    flex: 0 0 auto;
}

#age-page-canvas .age-hud-rail-tab {
    flex: 1 1 0;
    margin: 0;
    padding: 9px 8px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.82);
    cursor: pointer;
    line-height: 1.25;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

#age-page-canvas .age-hud-rail-tab:hover {
    border-color: rgba(255, 217, 120, 0.45);
    color: #f1e0ac;
}

#age-page-canvas .age-hud-rail-tab.is-active {
    border-color: rgba(255, 215, 0, 0.62);
    background: linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(16, 12, 8, 0.98) 100%);
    color: #ffd978;
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.14);
}

#age-page-canvas .age-hud-rail-tabpanel[hidden],
#age-page-canvas .age-city-info-tabpanel[hidden] {
    display: none !important;
}

/* Nation reports panel (right HUD, under city info) */
#age-page-canvas .age-left-reports-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    height: var(--age-right-reports-height, auto);
    box-sizing: border-box;
    padding: 10px 12px 12px;
    border-radius: 6px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
    overflow: visible;
}

#age-page-canvas .age-left-reports-tabpanel {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding: 2px 0 0;
}

#age-page-canvas .age-left-reports-tabpanel .age-map-stat-list,
#age-page-canvas .age-left-reports-tabpanel .age-map-report-list {
    gap: 6px;
}

#age-page-canvas .age-left-reports-elections-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

#age-page-canvas .age-left-reports-elections-card,
#age-page-canvas .age-left-reports-elections-leadership {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-ops-card-head {
    padding: 0 0 8px;
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-ops-card-title {
    font-size: 0.68rem;
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-ops-card-sub {
    font-size: 0.62rem;
    line-height: 1.35;
}

#age-page-canvas .age-left-reports-elections-shell .age-hq-elections-host {
    gap: 10px;
}

#age-page-canvas .age-left-reports-elections-shell .age-hq-election-poll__title {
    font-size: 0.66rem;
}

#age-page-canvas .age-left-reports-elections-shell .age-hq-vote-candidate-btn {
    font-size: 0.68rem;
    padding: 5px 8px;
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-ops-action-btn {
    width: 100%;
    font-size: 0.62rem;
    padding: 7px 10px;
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-leadership-roster {
    margin: 0;
    display: grid;
    gap: 6px;
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-leadership-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-leadership-role {
    font-size: 0.62rem;
    color: rgba(241, 224, 172, 0.72);
}

#age-page-canvas .age-left-reports-elections-shell .age-headquarters-leadership-name {
    margin: 0;
    font-size: 0.72rem;
    color: #f6d998;
}

#age-page-canvas .age-map-bottom-dock-tips.age-quick-tips-panel {
    position: absolute;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px 12px;
    width: fit-content;
    max-width: calc(100% - min(520px, 42vw) - 12px);
    min-height: var(--age-map-hud-bottom-bar-height);
    height: auto;
    box-sizing: border-box;
    padding: 6px 10px 6px 6px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    overflow: visible;
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-title {
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1.3;
    align-self: center;
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-copy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 0 1 var(--age-quick-tips-copy-width);
    width: var(--age-quick-tips-copy-width);
    max-width: var(--age-quick-tips-copy-width);
    min-width: 0;
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.3;
    align-self: center;
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-next {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    text-transform: none;
    letter-spacing: 0;
    border-color: rgba(255, 217, 120, 0.5);
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 236, 170, 0.22) 0%, transparent 58%),
        linear-gradient(180deg, rgba(48, 38, 22, 0.96) 0%, rgba(18, 14, 10, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 230, 150, 0.18),
        0 0 10px rgba(255, 196, 72, 0.14);
    transition:
        border-color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.14s ease;
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-next:hover,
#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-next:focus-visible {
    border-color: rgba(255, 217, 120, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 180, 0.28),
        0 0 14px rgba(255, 210, 90, 0.32);
    transform: translateX(1px);
    outline: none;
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-next-icon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 1px;
    border-style: solid;
    border-width: 4.5px 0 4.5px 7px;
    border-color: transparent transparent transparent #e8c060;
    filter: drop-shadow(0 0 3px rgba(255, 210, 110, 0.45));
    transition: border-color 0.14s ease, filter 0.14s ease;
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-next:hover .age-quick-tips-next-icon,
#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-next:focus-visible .age-quick-tips-next-icon {
    border-left-color: #ffe7b0;
    filter: drop-shadow(0 0 5px rgba(255, 225, 140, 0.72));
}

#age-page-canvas .age-map-bottom-dock-tips .age-quick-tips-index {
    display: none !important;
}

.age-quick-tips-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.age-quick-tips-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffd978;
}

.age-quick-tips-next {
    appearance: none;
    margin: 0;
    padding: 0.28em 0.65em;
    border: 1px solid rgba(255, 217, 120, 0.38);
    border-radius: 999px;
    background: rgba(255, 217, 120, 0.08);
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.9);
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.age-quick-tips-next:hover,
.age-quick-tips-next:focus-visible {
    border-color: rgba(255, 217, 120, 0.72);
    color: #ffe7b0;
    background: rgba(255, 217, 120, 0.14);
    outline: none;
}

.age-quick-tips-body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(228, 214, 180, 0.9);
}

.age-quick-tips-index {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.52);
    text-align: right;
}

#age-page-canvas .age-nation-status-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

#age-page-canvas .age-nation-status-shell .age-map-stat-list--dual-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

#age-page-canvas .age-nation-status-shell .age-map-stat-list--dual-col .age-map-stat-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}

#age-page-canvas .age-nation-status-shell .age-map-stat-list--dual-col .age-map-stat-label {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: rgba(236, 220, 180, 0.9);
}

#age-page-canvas .age-nation-status-shell .age-map-stat-list--dual-col .age-map-stat-value {
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: left;
    word-break: break-word;
}

#age-page-canvas .age-nation-status-leadership {
    flex: 0 0 auto;
}

#age-page-canvas .age-nation-status-section-heading--leadership {
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: 0.12em;
}

#age-page-canvas .age-nation-status-leadership-roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#age-page-canvas .age-nation-status-leader-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 92px;
    padding: 10px 8px 12px;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

#age-page-canvas .age-nation-status-leader-card-frame {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

#age-page-canvas .age-nation-status-leader-card--leader {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 228, 140, 0.22) 0%, rgba(255, 228, 140, 0) 58%),
        linear-gradient(165deg, rgba(56, 42, 16, 0.98) 0%, rgba(18, 12, 6, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.24),
        inset 0 -10px 18px rgba(0, 0, 0, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.42);
}

#age-page-canvas .age-nation-status-leader-card--leader .age-nation-status-leader-card-frame {
    border: 1px solid rgba(255, 215, 0, 0.48);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.12),
        0 0 14px rgba(255, 196, 72, 0.18);
}

#age-page-canvas .age-nation-status-leader-card--vice {
    background:
        radial-gradient(circle at 50% 0%, rgba(168, 214, 255, 0.16) 0%, rgba(168, 214, 255, 0) 58%),
        linear-gradient(165deg, rgba(24, 34, 52, 0.98) 0%, rgba(10, 12, 18, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(168, 214, 255, 0.18),
        inset 0 -10px 18px rgba(0, 0, 0, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.42);
}

#age-page-canvas .age-nation-status-leader-card--vice .age-nation-status-leader-card-frame {
    border: 1px solid rgba(136, 196, 255, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(136, 196, 255, 0.1),
        0 0 14px rgba(96, 168, 240, 0.16);
}

#age-page-canvas .age-nation-status-leader-card-glyph {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.35));
}

#age-page-canvas .age-nation-status-leader-card--vice .age-nation-status-leader-card-glyph {
    filter: drop-shadow(0 0 8px rgba(136, 196, 255, 0.35));
}

#age-page-canvas .age-nation-status-leader-card-role {
    position: relative;
    z-index: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 215, 128, 0.78);
}

#age-page-canvas .age-nation-status-leader-card--vice .age-nation-status-leader-card-role {
    color: rgba(168, 214, 255, 0.82);
}

#age-page-canvas .age-nation-status-leader-card-name {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: #ffe7b0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

#age-page-canvas .age-nation-status-leader-card--vice .age-nation-status-leader-card-name {
    color: #d9ebff;
}

#age-page-canvas .age-nation-status-leader-card-name.is-empty {
    color: rgba(236, 220, 180, 0.42);
    font-weight: 600;
    letter-spacing: 0.12em;
}

#age-page-canvas .age-nation-status-divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--age-hud-rail-divider, rgba(184, 144, 48, 0.32));
    box-shadow: 0 1px 0 rgba(255, 215, 0, 0.06);
    opacity: 1;
}

#age-page-canvas .age-nation-status-section-heading {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd978;
}

#age-page-canvas .age-nation-status-terrain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#age-page-canvas .age-nation-status-terrain-list.is-unavailable {
    gap: 0;
}

#age-page-canvas .age-nation-status-relations-meta {
    margin: 0 0 8px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(241, 224, 172, 0.58);
}

#age-page-canvas .age-nation-status-relations-block .age-hq-relations-list {
    margin: 0;
}

#age-page-canvas .age-nation-status-terrain-empty-item {
    margin: 0;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px dashed rgba(184, 144, 48, 0.28);
    background: rgba(0, 0, 0, 0.28);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    color: rgba(236, 220, 180, 0.58);
}

#age-page-canvas .age-nation-status-terrain-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.18);
    background: rgba(0, 0, 0, 0.32);
}

#age-page-canvas .age-nation-status-terrain-name {
    font-family: 'Cinzel', serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.9);
}

#age-page-canvas .age-nation-status-terrain-value {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

#age-page-canvas .age-nation-status-terrain-row.is-positive .age-nation-status-terrain-value {
    color: #8fe48f;
}

#age-page-canvas .age-nation-status-terrain-row.is-negative .age-nation-status-terrain-value {
    color: #ffb3b3;
}

#age-page-canvas .age-nation-status-terrain-row.is-neutral .age-nation-status-terrain-value {
    color: rgba(236, 220, 180, 0.78);
}

#age-page-canvas .age-nation-status-terrain-list--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

#age-page-canvas .age-nation-status-terrain-tile {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 7px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.2);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.04) 0%, transparent 42%),
        rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.06);
    list-style: none;
}

#age-page-canvas .age-nation-status-terrain-tile.is-positive {
    border-color: rgba(111, 220, 111, 0.34);
    background:
        linear-gradient(180deg, rgba(111, 220, 111, 0.1) 0%, transparent 55%),
        rgba(0, 0, 0, 0.34);
}

#age-page-canvas .age-nation-status-terrain-tile.is-negative {
    border-color: rgba(255, 140, 140, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 120, 120, 0.1) 0%, transparent 55%),
        rgba(0, 0, 0, 0.34);
}

#age-page-canvas .age-nation-status-terrain-tile.is-neutral {
    border-color: rgba(184, 144, 48, 0.16);
}

#age-page-canvas .age-nation-status-terrain-tile-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

#age-page-canvas .age-nation-status-terrain-tile-swatch--forest { background: rgba(52, 128, 68, 0.92); }
#age-page-canvas .age-nation-status-terrain-tile-swatch--plains { background: rgba(126, 186, 78, 0.92); }
#age-page-canvas .age-nation-status-terrain-tile-swatch--desert { background: rgba(210, 165, 90, 0.92); }
#age-page-canvas .age-nation-status-terrain-tile-swatch--mountains { background: rgba(136, 118, 96, 0.92); }
#age-page-canvas .age-nation-status-terrain-tile-swatch--marshlands { background: rgba(48, 138, 158, 0.92); }

#age-page-canvas .age-nation-status-terrain-tile-label {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.88);
    line-height: 1.15;
    min-width: 0;
}

#age-page-canvas .age-nation-status-terrain-tile-value {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

#age-page-canvas .age-nation-status-terrain-tile.is-positive .age-nation-status-terrain-tile-value {
    color: #8fe48f;
}

#age-page-canvas .age-nation-status-terrain-tile.is-negative .age-nation-status-terrain-tile-value {
    color: #ffb3b3;
}

#age-page-canvas .age-nation-status-terrain-tile.is-neutral .age-nation-status-terrain-tile-value {
    color: rgba(236, 220, 180, 0.72);
}

#age-page-canvas .age-intelligence-matchups-shell {
    display: grid;
    grid-template-columns: 98px 1fr;
    gap: 10px;
    min-height: 0;
}

#age-page-canvas .age-intelligence-enemy-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: visible;
    padding-right: 2px;
}

#age-page-canvas .age-intelligence-enemy-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px 5px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.34);
    color: rgba(236, 220, 180, 0.84);
    cursor: pointer;
}

#age-page-canvas .age-intelligence-enemy-tab.is-active {
    border-color: rgba(255, 215, 0, 0.58);
    background: linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(16, 12, 8, 0.98) 100%);
    color: #ffd978;
}

#age-page-canvas .age-intelligence-enemy-crest {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

#age-page-canvas .age-intelligence-enemy-label {
    font-family: 'Cinzel', serif;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

#age-page-canvas .age-intelligence-matchup-content {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#age-page-canvas .age-intelligence-matchup-header {
    margin: 0;
}

#age-page-canvas .age-intelligence-matchup-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffd978;
}

#age-page-canvas .age-intelligence-matchup-subtitle {
    margin: 2px 0 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.7rem;
    color: rgba(236, 220, 180, 0.65);
}

#age-page-canvas .age-intelligence-terrain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
}

#age-page-canvas .age-intelligence-terrain-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "terrain total"
        "meta total";
    gap: 2px 8px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.18);
    background: rgba(0, 0, 0, 0.32);
}

#age-page-canvas .age-intelligence-terrain-name {
    grid-area: terrain;
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.9);
}

#age-page-canvas .age-intelligence-terrain-meta {
    grid-area: meta;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.68rem;
    color: rgba(236, 220, 180, 0.66);
}

#age-page-canvas .age-intelligence-terrain-total {
    grid-area: total;
    align-self: center;
    justify-self: end;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#age-page-canvas .age-intelligence-terrain-row.is-advantage .age-intelligence-terrain-total {
    color: #8fe48f;
}

#age-page-canvas .age-intelligence-terrain-row.is-disadvantage .age-intelligence-terrain-total {
    color: #ffb3b3;
}

#age-page-canvas .age-intelligence-terrain-row.is-even .age-intelligence-terrain-total {
    color: rgba(236, 220, 180, 0.7);
}

#age-page-canvas .age-intelligence-empty-note {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.75rem;
    color: rgba(236, 220, 180, 0.58);
}

#age-page-canvas .age-intelligence-matchups-shell.is-at-peace {
    display: block;
}

#age-page-canvas .age-intelligence-matchups-shell.is-at-peace .age-intelligence-enemy-tabs {
    display: none;
}

#age-page-canvas .age-intelligence-peace-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    padding: 14px 12px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.2);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.04) 0%, transparent 48%),
        rgba(0, 0, 0, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.06);
}

#age-page-canvas .age-intelligence-peace-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd978;
}

#age-page-canvas .age-intelligence-peace-copy {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(236, 220, 180, 0.72);
}

#age-page-canvas .age-weekly-missions-shell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

#age-page-canvas .age-weekly-missions-intro {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.66rem;
    line-height: 1.3;
    color: rgba(236, 220, 180, 0.66);
}

#age-page-canvas .age-weekly-missions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    overflow: visible;
}

#age-page-canvas .age-weekly-mission-card {
    margin: 0;
    padding: 5px 8px;
    border-radius: 3px;
    border: 1px solid rgba(184, 144, 48, 0.2);
    background: rgba(68, 68, 68, 0.42);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#age-page-canvas .age-weekly-mission-card.is-not-started {
    background: rgba(90, 90, 90, 0.38);
    border-color: rgba(165, 165, 165, 0.3);
}

#age-page-canvas .age-weekly-mission-card.is-started {
    background: rgba(110, 92, 24, 0.44);
    border-color: rgba(255, 215, 0, 0.45);
}

#age-page-canvas .age-weekly-mission-card.is-completed {
    background: rgba(24, 98, 45, 0.45);
    border-color: rgba(111, 220, 111, 0.48);
}

#age-page-canvas .age-weekly-mission-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}

#age-page-canvas .age-weekly-mission-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.92);
}

#age-page-canvas .age-weekly-mission-status {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(241, 224, 172, 0.88);
}

#age-page-canvas .age-weekly-mission-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

#age-page-canvas .age-weekly-mission-body-left {
    min-width: 0;
}

#age-page-canvas .age-weekly-mission-type {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.62rem;
    line-height: 1.25;
    color: rgba(236, 220, 180, 0.75);
}

#age-page-canvas .age-weekly-mission-progress {
    margin: 0;
    flex: 0 0 auto;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffd978;
    text-align: right;
}

#age-page-canvas .age-weekly-mission-meta {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

#age-page-canvas .age-weekly-mission-difficulty,
#age-page-canvas .age-weekly-mission-xp {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(241, 224, 172, 0.86);
}

#age-page-canvas .age-weekly-mission-difficulty--novice {
    color: #cd7f32;
}

#age-page-canvas .age-weekly-mission-difficulty--intermediate {
    color: #c0c0c0;
}

#age-page-canvas .age-weekly-mission-difficulty--hard {
    color: #ffd700;
}

#age-page-canvas .age-weekly-mission-difficulty--extreme {
    color: #ff4f4f;
}

/* City Info / Players (right HUD) */
#age-page-canvas .age-city-info-tab {
    flex: 1 1 0;
    margin: 0;
    padding: 9px 8px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.82);
    cursor: pointer;
    line-height: 1.25;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

#age-page-canvas .age-city-info-tab:hover {
    border-color: rgba(255, 217, 120, 0.45);
    color: #f1e0ac;
}

#age-page-canvas .age-city-info-tab.is-active {
    border-color: rgba(255, 215, 0, 0.62);
    background: linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(16, 12, 8, 0.98) 100%);
    color: #ffd978;
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.14);
}

#age-page-canvas #age-city-info-tab-btn-settlement {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#age-page-canvas .age-city-info-settlement-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

#age-page-canvas .age-settlement-menu-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

#age-page-canvas .age-settlement-menu-body > .age-settlement-menu-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

#age-page-canvas .age-city-info-settlement-shell .age-settlement-menu-list {
    --settlement-menu-label-size: 0.82rem;
    --settlement-menu-desc-size: 0.74rem;
    --settlement-menu-mark-size: 26px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

#age-page-canvas .age-settlement-menu-war-room-slot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.35rem;
    padding: 1.15rem 0.35rem 0.2rem;
    border-top: 1px solid rgba(255, 217, 120, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 217, 120, 0.1) 0%, rgba(255, 217, 120, 0.02) 42%, transparent 100%),
        rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 217, 120, 0.12);
}

#age-page-canvas .age-map-hud--right.is-city-info-settlement-open .age-city-info-settlement-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#age-page-canvas .age-settlement-menu-war-room-slot[hidden] {
    display: none !important;
}

#age-page-canvas .age-settlement-menu-war-room-eyebrow {
    margin: 0;
    padding: 0 0.15rem;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.62);
}

#age-page-canvas .age-settlement-menu-item--war-room {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 4.6rem;
    padding: 14px 16px;
    border: 1px solid rgba(255, 217, 120, 0.72);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 217, 120, 0.22) 0%, rgba(255, 140, 48, 0.1) 38%, rgba(0, 0, 0, 0.55) 100%),
        rgba(12, 8, 4, 0.92);
    box-shadow:
        0 0 0 1px rgba(255, 217, 120, 0.14),
        0 10px 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(255, 180, 64, 0.18);
}

#age-page-canvas .age-settlement-menu-item--war-room::before {
    width: 4px;
    background: linear-gradient(180deg, #ffe7a8 0%, #ff9a2e 100%);
}

#age-page-canvas .age-settlement-menu-item--war-room:hover,
#age-page-canvas .age-settlement-menu-item--war-room:focus-visible {
    border-color: rgba(255, 232, 168, 0.95);
    background:
        linear-gradient(135deg, rgba(255, 217, 120, 0.34) 0%, rgba(255, 140, 48, 0.16) 40%, rgba(0, 0, 0, 0.48) 100%),
        rgba(18, 12, 6, 0.96);
    box-shadow:
        0 0 0 1px rgba(255, 217, 120, 0.28),
        0 14px 34px rgba(0, 0, 0, 0.62),
        0 0 32px rgba(255, 180, 64, 0.32);
    transform: translateY(-1px);
}

#age-page-canvas .age-settlement-menu-item-mark--war-room {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 217, 120, 0.55);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 232, 176, 0.35), rgba(0, 0, 0, 0.65));
    font-size: 1.15rem;
    color: #ffe7b0;
    box-shadow: 0 0 16px rgba(255, 180, 64, 0.28);
}

#age-page-canvas .age-settlement-menu-item--war-room .age-settlement-menu-item-label {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #fff2c8;
    text-shadow: 0 0 18px rgba(255, 200, 96, 0.35);
}

#age-page-canvas .age-settlement-menu-item-tagline {
    display: block;
    margin-top: 0.28rem;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 232, 190, 0.72);
}

#age-page-canvas .age-settlement-menu-item--war-room .age-settlement-menu-item-chevron {
    font-size: 1.2rem;
    color: rgba(255, 232, 176, 0.92);
}

#age-page-canvas .age-map-hud--right.is-city-info-settlement-open #age-city-info-tab-settlement {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#age-page-canvas .age-map-hud-panel-inner--right .age-city-info-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 10px 12px 12px;
    border-radius: 6px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
}

#age-page-canvas .age-map-hud--right.is-city-info-players-open .age-map-hud-panel-inner--right .age-city-info-panel,
#age-page-canvas .age-map-hud--right.is-city-info-settlement-open .age-map-hud-panel-inner--right .age-city-info-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#age-page-canvas .age-map-hud--right.is-city-info-players-open #age-city-info-tab-players {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#age-page-canvas .age-city-info-players-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 120px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

#age-page-canvas .age-city-info-players-head {
    flex: 0 0 auto;
}

#age-page-canvas .age-city-info-players-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    min-height: 0;
    flex: 1 1 auto;
}

#age-page-canvas .age-map-hud--right.is-city-info-players-open .age-city-info-players-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#age-page-canvas .age-map-hud--right.is-city-info-players-open .age-city-info-players-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#age-page-canvas .age-city-info-players-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
}

#age-page-canvas .age-hq-planning-toolbar-status[hidden] {
    display: none !important;
}

#age-page-canvas .age-city-info-players-filter-toggle {
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    background: rgba(0, 0, 0, 0.42);
    box-sizing: border-box;
    gap: 3px;
}

#age-page-canvas .age-city-info-players-filter-btn {
    flex: 1 1 0;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(236, 220, 180, 0.72);
    cursor: pointer;
    line-height: 1.2;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

#age-page-canvas .age-city-info-players-filter-btn:hover {
    color: #f1e0ac;
}

#age-page-canvas .age-city-info-players-filter-btn.is-active {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(16, 12, 8, 0.98) 100%);
    color: #ffd978;
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.14);
}

#age-page-canvas .age-city-info-players-summary {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(236, 220, 180, 0.62);
}

#age-page-canvas .age-city-info-players-summary[hidden] {
    display: none !important;
}

#age-page-canvas .age-city-info-players-list {
    list-style: none;
    margin: 0;
    padding: 0 2px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#age-page-canvas .age-city-info-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.18);
    background: rgba(0, 0, 0, 0.34);
}

#age-page-canvas .age-city-info-player-name,
#age-page-canvas .age-city-info-player-identity {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(241, 224, 172, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#age-page-canvas .age-city-info-player-identity {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

#age-page-canvas .age-city-info-player-identity .commander-identity-name-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#age-page-canvas .age-city-info-player-identity .commander-identity-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    color: rgba(241, 224, 172, 0.92) !important;
    font-weight: 600 !important;
}

#age-page-canvas .age-city-info-player-identity .commander-rank-pill {
    font-size: 0.5rem !important;
    padding: 1px 5px !important;
    flex-shrink: 0 !important;
}

#age-page-canvas .age-city-info-player-move-points {
    flex: 0 0 auto;
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 217, 120, 0.95);
    white-space: nowrap;
}

#age-page-canvas .age-city-info-player-army-focus {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(184, 144, 48, 0.34);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.35;
    white-space: nowrap;
}

#age-page-canvas .age-city-info-player-army-focus--ranking {
    color: rgba(168, 214, 255, 0.92);
    border-color: rgba(96, 168, 240, 0.42);
    background: rgba(24, 56, 96, 0.42);
}

#age-page-canvas .age-city-info-player-army-focus--pvp {
    color: rgba(255, 176, 148, 0.94);
    border-color: rgba(220, 96, 72, 0.42);
    background: rgba(96, 24, 16, 0.42);
}

#age-page-canvas .age-city-info-player-royalty-badge {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    margin-right: 6px;
    object-fit: contain;
    animation: age-player-royalty-badge-spin3d 6s linear infinite;
    transform-origin: 50% 50%;
    backface-visibility: visible;
    filter: sepia(1) saturate(3.1) hue-rotate(8deg) brightness(1.03) contrast(1.04);
}

@keyframes age-player-royalty-badge-spin3d {
    0% {
        transform: perspective(320px) rotateY(0deg);
    }
    50% {
        transform: perspective(320px) rotateY(360deg);
    }
    100% {
        transform: perspective(320px) rotateY(360deg);
    }
}

#age-page-canvas .age-city-info-player-presence {
    flex: 0 0 auto;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(160, 150, 130, 0.78);
}

#age-page-canvas .age-city-info-player-row.is-online .age-city-info-player-presence {
    color: rgba(143, 228, 143, 0.92);
}

#age-page-canvas .age-city-info-players-list[hidden] {
    display: none !important;
}

#age-page-canvas .age-city-info-players-empty {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.94rem;
    line-height: 1.4;
    color: rgba(236, 220, 180, 0.55);
    font-style: italic;
}

#age-page-canvas .age-city-info-players-empty[hidden] {
    display: none !important;
}

/* Movement panel (right HUD) */
#age-page-canvas .age-movement-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#age-page-canvas .age-movement-label {
    display: block;
    margin-bottom: 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.72);
}

#age-page-canvas .age-movement-city-block {
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid var(--age-hud-rail-chip-border, rgba(184, 144, 48, 0.28));
    background: var(--age-hud-rail-chip-bg, rgba(0, 0, 0, 0.35));
}

#age-page-canvas .age-movement-city-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd978;
    line-height: 1.25;
}

#age-page-canvas .age-movement-terrain-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
}

#age-page-canvas .age-movement-region-block,
#age-page-canvas .age-movement-settlement-terrain-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#age-page-canvas .age-movement-settlement-terrain-block {
    padding-top: 8px;
    border-top: 1px solid rgba(184, 144, 48, 0.16);
}

#age-page-canvas .age-movement-region-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.88);
    line-height: 1.25;
}

#age-page-canvas .age-movement-terrain-name {
    margin: 0;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 3px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.88);
    line-height: 1.25;
    background: rgba(0, 0, 0, 0.32);
}

#age-page-canvas .age-movement-terrain-name--forest {
    border-color: rgba(52, 128, 68, 0.92);
    color: rgba(186, 232, 196, 0.96);
}

#age-page-canvas .age-movement-terrain-name--plains {
    border-color: rgba(126, 186, 78, 0.92);
    color: rgba(214, 238, 178, 0.96);
}

#age-page-canvas .age-movement-terrain-name--desert {
    border-color: rgba(210, 165, 90, 0.92);
    color: rgba(244, 220, 168, 0.96);
}

#age-page-canvas .age-movement-terrain-name--mountains {
    border-color: rgba(136, 118, 96, 0.92);
    color: rgba(228, 214, 196, 0.96);
}

#age-page-canvas .age-movement-terrain-name--marshlands {
    border-color: rgba(48, 138, 158, 0.92);
    color: rgba(178, 228, 240, 0.96);
}

#age-page-canvas .age-movement-terrain-name--snow {
    border-color: rgba(236, 244, 252, 0.92);
    color: rgba(244, 250, 255, 0.98);
}

#age-page-canvas .age-movement-routes-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
}

#age-page-canvas .age-movement-routes-summary {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(236, 220, 180, 0.72);
}

#age-page-canvas .age-movement-routes-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#age-page-canvas .age-movement-routes-list[hidden] {
    display: none !important;
}

#age-page-canvas .age-movement-route-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 3px;
    border: 1px solid rgba(184, 144, 48, 0.34);
    background: rgba(24, 18, 8, 0.55);
    color: #ffd978;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#age-page-canvas .age-movement-route-btn:hover:not(:disabled) {
    background: rgba(48, 36, 12, 0.72);
    border-color: rgba(255, 217, 120, 0.5);
}

#age-page-canvas .age-movement-route-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#age-page-canvas .age-movement-route-cost {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: rgba(236, 220, 180, 0.78);
}

#age-page-canvas .age-movement-routes-empty {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(236, 220, 180, 0.62);
}

#age-page-canvas .age-movement-routes-empty[hidden] {
    display: none !important;
}

#age-page-canvas .age-movement-terrain-name.is-empty {
    border-color: rgba(184, 144, 48, 0.22);
    color: rgba(236, 220, 180, 0.55);
    font-style: italic;
    text-transform: none;
    font-weight: 600;
    font-size: 0.82rem;
    background: transparent;
}

#age-page-canvas .age-movement-terrain-types {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#age-page-canvas .age-movement-terrain-types[hidden] {
    display: none !important;
}

#age-page-canvas .age-movement-terrain-type {
    padding: 4px 9px;
    border-radius: 3px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    background: rgba(0, 0, 0, 0.38);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.82);
}

#age-page-canvas .age-movement-terrain-type--primary {
    border-color: rgba(255, 217, 120, 0.45);
    color: #fff3c4;
}

.age-map-hud--bottom {
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

/* Bottom HUD + commander menu must stack above the left council column */
#age-page-canvas .age-map-hud--bottom {
    z-index: 80 !important;
}

#age-page-canvas .age-map-hud--left {
    z-index: 24 !important;
}

.age-map-bottom-dock {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.age-map-bottom-dock-shell {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    min-height: var(--age-map-hud-bottom-bar-height);
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}

.age-map-bottom-dock-shell.age-map-hud-panel {
    align-items: stretch;
}

/* Reserve original chat slot so tabs/commander bar stay put; chat is positioned separately */
#age-page-canvas .age-map-bottom-dock-shell::before {
    content: '';
    flex: 0 0 var(--age-chat-messages-width);
    width: var(--age-chat-messages-width);
    min-width: var(--age-chat-messages-width);
    max-width: var(--age-chat-messages-width);
    pointer-events: none;
}

#age-page-canvas .age-map-bottom-dock-chat-column {
    position: absolute;
    left: 0;
    bottom: 0;
    flex: none;
    width: var(--age-chat-messages-width);
    min-width: var(--age-chat-messages-width);
    max-width: var(--age-chat-messages-width);
    min-height: var(--age-map-hud-bottom-bar-height);
    box-sizing: border-box;
    border: none;
    z-index: 2;
}

.age-map-bottom-dock-chat-column {
    position: relative;
    flex: 0 0 var(--age-chat-messages-width);
    width: var(--age-chat-messages-width);
    min-width: var(--age-chat-messages-width);
    max-width: var(--age-chat-messages-width);
    min-height: var(--age-map-hud-bottom-bar-height);
    box-sizing: border-box;
    border: none;
}

.age-map-bottom-chat-messages-host {
    position: absolute;
    left: 0;
    bottom: calc(var(--age-map-hud-bottom-bar-height) + var(--age-chat-messages-gap));
    width: var(--age-chat-messages-width);
    height: var(--age-chat-messages-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2;
}

#age-page-canvas .age-map-bottom-chat-messages-host {
    width: var(--age-council-board-width, var(--age-chat-messages-width));
}

.age-map-bottom-chat-compose-host {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--age-chat-compose-width);
    max-width: var(--age-chat-compose-width);
    height: var(--age-map-hud-bottom-bar-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 8px;
    z-index: 2;
}

#age-page-canvas .age-map-bottom-chat-compose-host {
    width: var(--age-council-board-width, var(--age-chat-compose-width));
    max-width: var(--age-council-board-width, var(--age-chat-compose-width));
}

.age-map-bottom-dock-controls {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    height: var(--age-map-hud-bottom-bar-height);
    min-height: var(--age-map-hud-bottom-bar-height);
    padding: 0 14px;
    box-sizing: border-box;
    overflow: visible;
}

#age-page-canvas .age-map-bottom-dock-shell > .age-map-bottom-dock-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert.developer-maintenance-alert-bar {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 6 !important;
    width: min(920px, calc(100vw - min(460px, 36vw) - min(340px, 30vw) - 40px)) !important;
    max-width: min(920px, 62vw) !important;
    min-width: min(640px, calc(100vw - 360px)) !important;
    padding: 6px 14px !important;
    border: 1px solid rgba(232, 160, 48, 0.62) !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 120, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.42) !important;
    pointer-events: auto !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-inner {
    align-items: center !important;
    gap: 10px !important;
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-icon {
    flex: 0 0 auto !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-copy {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-title {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding-right: 12px !important;
    border-right: 1px solid rgba(232, 160, 48, 0.38) !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-message-marquee {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    height: 1.25rem !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%) !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-message-track {
    display: inline-flex !important;
    align-items: center !important;
    gap: 56px !important;
    min-width: 100% !important;
    white-space: nowrap !important;
    will-change: transform;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-message-marquee.is-scrolling .developer-maintenance-alert-message-track {
    animation: ageMaintenanceAlertMarquee var(--age-maintenance-marquee-duration, 24s) linear infinite !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-message {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-message-clone {
    flex: 0 0 auto !important;
}

@keyframes ageMaintenanceAlertMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

#age-page-canvas .age-map-bottom-dock-maintenance-alert .developer-maintenance-alert-window {
    display: none !important;
}

#age-page-canvas.developer-maintenance-alert-active {
    padding-top: 0 !important;
}

#age-page-canvas .age-map-bottom-dock-nav .age-map-view-tabs {
    position: static;
    transform: none;
}

/* Bottom-right tray — commander nametag */
#age-page-canvas .age-map-bottom-dock-tray {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
    max-width: min(520px, 42vw);
    z-index: 90;
    overflow: visible;
    pointer-events: none;
}

/* Commander nametag — bottom HUD (replaces End Turn) */
#age-page-canvas .age-map-bottom-commander-nametag {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    max-width: min(440px, 42vw);
    margin: 0;
    padding: 0 12px 0 14px;
    border-left: none;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.28) 100%);
    z-index: 92;
    overflow: visible;
    pointer-events: none;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-shell,
#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card,
#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card-body {
    pointer-events: auto;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-shell {
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    z-index: 91;
    overflow: visible !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card {
    position: relative;
    z-index: 93;
    overflow: visible !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card-body {
    padding-bottom: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 8px !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .nav-avatar-hub-wrapper {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--age-hud-rail-chip-border) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .nav-bar-embedded-avatar-thumbnail {
    width: 36px;
    height: 36px;
}

#age-page-canvas .age-map-bottom-commander-nametag .nav-account-identity-cluster {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .nav-account-identity-cluster::before {
    display: none !important;
    content: none !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .nav-account-identity-stack,
#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card-body .nav-account-identity-stack {
    min-height: 0 !important;
}

#age-page-canvas .age-map-bottom-commander-nametag #logged-user-tag,
#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card-body #logged-user-tag {
    font-size: 1.04rem !important;
    color: #ffd978 !important;
    text-shadow: none !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .nav-commander-membership-tab .membership-badge {
    font-size: 0.58rem !important;
    padding: 2px 7px !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-trigger:hover .nav-avatar-hub-wrapper,
#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card.is-commander-menu-open .nav-avatar-hub-wrapper {
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 10px rgba(255, 215, 0, 0.18) !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-trigger:hover .nav-account-identity-cluster,
#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card.is-commander-menu-open .nav-account-identity-cluster {
    border-color: transparent !important;
    box-shadow: none !important;
}

#age-page-canvas .age-map-view-tab {
    border-color: var(--age-hud-rail-chip-border);
    background: var(--age-hud-rail-chip-bg);
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-menu {
    top: auto !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    transform: translateY(4px) scale(0.98) !important;
    transform-origin: bottom center !important;
    z-index: 248120 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card.is-commander-menu-open .portal-commander-identity-menu:not([hidden]) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card.is-commander-menu-open {
    z-index: 248110 !important;
}

#age-page-canvas .age-map-bottom-commander-nametag .portal-commander-identity-card.is-commander-menu-open .portal-commander-identity-card-body {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Age map — commander menu portaled to body so it clears left HUD / bottom dock stacking */
.portal-commander-identity-menu.portal-commander-identity-menu--age-floating {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 300100 !important;
    transform: translateY(6px) scale(0.98) !important;
}

.portal-commander-identity-menu.portal-commander-identity-menu--age-floating:not([hidden]) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

#age-page-canvas .age-map-bottom-chat-messages-host .game-chat-module-header {
    flex-shrink: 0 !important;
    padding: 6px 8px 0 8px !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.28) !important;
}

#age-page-canvas .age-map-bottom-chat-messages-host .game-chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px 8px !important;
}

#age-page-canvas .age-map-bottom-chat-messages-host .game-chat-music-panel,
.game-chat-module-panel .game-chat-music-panel,
.age-game-chat-popout-shell .game-chat-music-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    box-sizing: border-box;
}

.game-chat-music-player {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.game-chat-music-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.game-chat-music-transport-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffd978;
    cursor: pointer;
}

.game-chat-music-transport-btn:hover,
.game-chat-music-transport-btn:focus-visible {
    color: #fff4d0;
    border-color: rgba(255, 215, 0, 0.62);
}

.game-chat-music-transport-glyph {
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: -0.08em;
}

.game-chat-music-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.game-chat-music-eyebrow {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(184, 144, 48, 0.82);
    line-height: 1.2;
}

.game-chat-music-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f1e0ac;
    line-height: 1.25;
}

.game-chat-music-utility-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(241, 224, 172, 0.92);
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.game-chat-music-utility-btn:hover,
.game-chat-music-utility-btn:focus-visible {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.55);
}

.game-chat-music-playlist-catalog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.game-chat-music-playlist-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.game-chat-music-playlist-heading {
    margin: 0;
    padding: 0 2px;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(184, 144, 48, 0.88);
    line-height: 1.2;
}

.game-chat-music-playlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-chat-music-playlist-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(184, 144, 48, 0.22);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.28);
    color: rgba(241, 224, 172, 0.88);
    font-family: 'Cinzel', serif;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.game-chat-music-playlist-btn:hover,
.game-chat-music-playlist-btn:focus-visible {
    color: #ffd700;
    border-color: rgba(184, 144, 48, 0.45);
    background: rgba(184, 144, 48, 0.1);
}

.game-chat-music-playlist-btn.is-active,
.game-chat-music-playlist-item.is-active .game-chat-music-playlist-btn {
    color: #ffd700;
    border-color: rgba(184, 144, 48, 0.55);
    background: rgba(184, 144, 48, 0.16);
}

.game-chat-music-playlist-item.is-locked .game-chat-music-playlist-btn,
.game-chat-music-playlist-btn.is-locked,
.game-chat-music-playlist-btn:disabled {
    color: #e07070;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

.game-chat-music-playlist-item.is-locked .game-chat-music-playlist-btn:hover,
.game-chat-music-playlist-item.is-locked .game-chat-music-playlist-btn:focus-visible,
.game-chat-music-playlist-btn.is-locked:hover,
.game-chat-music-playlist-btn:disabled:hover {
    color: #e07070;
    border-width: 1px;
    border-color: rgba(184, 144, 48, 0.22);
    background: rgba(0, 0, 0, 0.28);
}

.game-chat-module-panel--music-tab .game-chat-compose-form,
.game-chat-module-panel--music-tab #game-chat-compose-hint {
    display: none !important;
}

#age-page-canvas .age-map-bottom-chat-messages-host .game-chat-compose-hint {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 8px 4px 8px !important;
}

#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    border-top: none !important;
    box-sizing: border-box !important;
}

#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-mention-anchor,
.game-chat-compose-form .game-chat-compose-mention-anchor {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-mention-anchor .chat-mention-suggest-dropdown,
.game-chat-compose-form .game-chat-compose-mention-anchor .chat-mention-suggest-dropdown {
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    top: auto;
}

#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-mention-anchor .game-chat-compose-input,
.game-chat-compose-form .game-chat-compose-mention-anchor .game-chat-compose-input {
    width: 100%;
}

#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-input,
#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-send {
    height: var(--age-chat-compose-control-height) !important;
    min-height: var(--age-chat-compose-control-height) !important;
    max-height: var(--age-chat-compose-control-height) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    align-self: center !important;
}

#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    font-size: 0.84rem !important;
    line-height: 1 !important;
}

#age-page-canvas .age-map-bottom-chat-compose-host .game-chat-compose-send {
    flex: 0 0 auto !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#age-page-canvas .age-map-bottom-chat-messages-host .game-chat-module-header,
.age-game-chat-popout-shell .game-chat-module-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.game-chat-popout-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    margin-top: -1px;
    padding: 0;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.42);
    color: rgba(241, 224, 172, 0.88);
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.game-chat-popout-toggle-label {
    display: none !important;
}

.game-chat-popout-toggle-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.game-chat-popout-toggle-icon--popout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
}

.game-chat-popout-toggle-icon--dock {
    display: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E");
}

.game-chat-popout-toggle[aria-pressed="true"] .game-chat-popout-toggle-icon--popout {
    display: none;
}

.game-chat-popout-toggle[aria-pressed="true"] .game-chat-popout-toggle-icon--dock {
    display: inline-flex;
}

.game-chat-popout-toggle:hover,
.game-chat-popout-toggle[aria-pressed="true"] {
    color: #ffd700;
    background: rgba(184, 144, 48, 0.18);
    border-color: rgba(184, 144, 48, 0.55);
}

.age-game-chat-popout-overlay {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 28px;
    box-sizing: border-box;
    background: rgba(3, 5, 8, 0.78);
    backdrop-filter: blur(6px);
}

.age-game-chat-popout-overlay[hidden],
.age-game-chat-popout-overlay.is-age-chat-gated {
    display: none !important;
}

.age-game-chat-popout-panel {
    width: min(760px, 94vw);
    height: min(640px, 82vh);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 6px;
    background: rgba(8, 6, 4, 0.94);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}

.age-game-chat-popout-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.is-age-chat-popped-out.age-map-bottom-chat-messages-host {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.is-age-chat-popped-out.age-map-bottom-chat-compose-host {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 56px !important;
    flex-shrink: 0 !important;
    padding: 10px 12px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.22) !important;
    background: transparent !important;
}

.age-game-chat-popout-shell .game-chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
}

.age-game-chat-popout-shell .game-chat-compose-hint {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 12px 6px 12px !important;
}

.age-game-chat-popout-shell .game-chat-compose-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.age-game-chat-popout-shell .game-chat-compose-input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 0.92rem !important;
}

.age-game-chat-popout-shell .game-chat-compose-send {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
}

.age-map-bottom-chat-docked-placeholder {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--age-chat-compose-width);
    max-width: var(--age-chat-compose-width);
    height: var(--age-map-hud-bottom-bar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    box-sizing: border-box;
    z-index: 2;
}

#age-page-canvas .age-map-bottom-chat-docked-placeholder {
    width: var(--age-council-board-width, var(--age-chat-compose-width));
    max-width: var(--age-council-board-width, var(--age-chat-compose-width));
}

.age-map-bottom-chat-docked-placeholder[hidden],
.age-map-bottom-chat-docked-placeholder.is-age-chat-gated {
    display: none !important;
}

.age-game-chat-dock-restore-btn {
    width: 100%;
    height: var(--age-chat-compose-control-height);
    padding: 0 10px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.42);
    color: rgba(241, 224, 172, 0.88);
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.age-game-chat-dock-restore-btn:hover {
    color: #ffd700;
    background: rgba(184, 144, 48, 0.18);
    border-color: rgba(184, 144, 48, 0.55);
}

.age-map-view-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.age-map-view-tab {
    margin: 0;
    padding: 10px 18px;
    border-radius: 5px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Cinzel', serif;
    font-size: 0.884rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.82);
    cursor: pointer;
}

.age-map-view-tab.is-active {
    border-color: rgba(255, 215, 0, 0.62);
    background: linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(16, 12, 8, 0.98) 100%);
    color: #ffd978;
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.14);
}

.age-map-bottom-war-ledger-btn {
    margin: 0;
    padding: 10px 18px;
    border-radius: 5px;
    border: 1px solid rgba(196, 96, 96, 0.45);
    background: linear-gradient(180deg, rgba(72, 24, 24, 0.72) 0%, rgba(16, 8, 8, 0.92) 100%);
    font-family: 'Cinzel', serif;
    font-size: 0.884rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 196, 196, 0.92);
    cursor: pointer;
    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease;
}

.age-map-bottom-war-ledger-btn:hover,
.age-map-bottom-war-ledger-btn:focus-visible {
    border-color: rgba(240, 120, 120, 0.72);
    color: #ffe0e0;
    background: linear-gradient(180deg, rgba(96, 32, 32, 0.82) 0%, rgba(24, 8, 8, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 160, 160, 0.16);
    outline: none;
}

.age-map-bottom-war-ledger-btn[aria-expanded="true"] {
    border-color: rgba(240, 120, 120, 0.88);
    color: #fff0f0;
    box-shadow:
        inset 0 1px 0 rgba(255, 160, 160, 0.22),
        0 0 0 1px rgba(240, 96, 96, 0.18);
}

.age-war-ledger-modal[hidden] {
    display: none !important;
}

.age-war-ledger-modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.age-war-ledger-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.age-war-ledger-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.age-war-ledger-dialog {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: min(72vh, 560px);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(196, 96, 96, 0.45);
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(36, 16, 16, 0.98), rgba(8, 4, 4, 0.99));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.age-war-ledger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.age-war-ledger-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: #ffb8b8;
}

.age-war-ledger-close {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(255, 196, 196, 0.85);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.age-war-ledger-intro {
    margin: 0 0 14px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(232, 210, 210, 0.78);
}

.age-war-ledger-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.age-war-ledger-item {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(196, 96, 96, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
}

.age-war-ledger-item-type {
    display: inline-block;
    margin-bottom: 4px;
    padding: 0.15em 0.45em;
    border-radius: 999px;
    border: 1px solid rgba(196, 96, 96, 0.35);
    font-family: 'Cinzel', serif;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 180, 180, 0.82);
}

.age-war-ledger-item-title {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: #ffd0d0;
}

.age-war-ledger-item-detail {
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(232, 210, 210, 0.72);
}

.age-records-workspace {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    pointer-events: auto;
    overflow: hidden;
    padding: 0;
}

.age-records-page-header {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 20px;
    text-align: center;
    border: 2px solid rgba(184, 144, 48, 0.62);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.12) 0%, transparent 42%),
        linear-gradient(165deg, rgba(36, 28, 18, 0.98) 0%, rgba(8, 6, 4, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 40px rgba(255, 196, 88, 0.06);
}

.age-records-page-header::before,
.age-records-page-header::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 215, 128, 0.55);
}

.age-records-page-header::before {
    top: 6px;
    left: 6px;
    border-right: none;
    border-bottom: none;
}

.age-records-page-header::after {
    right: 6px;
    bottom: 6px;
    border-left: none;
    border-top: none;
}

.age-records-page-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.25rem, 1.9vw, 1.65rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffe7b0;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.72),
        0 0 24px rgba(255, 196, 88, 0.28);
}

.age-records-shell {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 var(--age-records-content-inset, var(--age-hq-header-side-inset, 155px));
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 24px 24px;
    box-sizing: border-box;
    border: 1px solid var(--age-records-frame-border, rgba(184, 144, 48, 0.42));
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 18%),
        linear-gradient(165deg, rgba(28, 22, 14, 0.94) 0%, rgba(6, 5, 4, 0.97) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.1),
        0 12px 32px rgba(0, 0, 0, 0.45);
}

.age-records-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex: 0 0 auto;
    min-width: 0;
}

.age-records-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.age-records-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.age-records-tabs {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    width: auto;
    gap: 4px;
    padding: 2px;
    border-radius: 5px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    background: rgba(0, 0, 0, 0.32);
}

.age-records-tab {
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 11px;
    border-radius: 3px;
    border: 1px solid transparent;
    background: transparent;
    font-family: 'Cinzel', serif;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.78);
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition:
        border-color 160ms ease,
        color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.age-records-tab:hover,
.age-records-tab:focus-visible {
    border-color: rgba(255, 217, 120, 0.35);
    color: #f1e0ac;
    background: rgba(255, 215, 0, 0.04);
    outline: none;
}

.age-records-tab.is-active {
    border-color: rgba(255, 215, 0, 0.55);
    background: linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(16, 12, 8, 0.98) 100%);
    color: #ffd978;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.16),
        0 0 18px rgba(255, 196, 88, 0.08);
}

.age-records-panel[hidden] {
    display: none !important;
}

.age-records-intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0 0;
}

.age-records-intro-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.72);
}

.age-records-intro-copy {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(236, 220, 180, 0.76);
}

.age-records-empty {
    margin: 0;
    padding: 22px 16px;
    border: 1px dashed rgba(184, 144, 48, 0.38);
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    line-height: 1.45;
    color: rgba(236, 220, 180, 0.68);
    text-align: center;
    background: rgba(0, 0, 0, 0.22);
}

.age-records-table-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--age-records-frame-border, rgba(184, 144, 48, 0.45));
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.04) 0%, transparent 14%),
        rgba(0, 0, 0, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.08),
        inset 0 0 32px rgba(0, 0, 0, 0.35),
        0 0 24px var(--age-records-frame-glow, rgba(255, 196, 88, 0.08));
    overflow: hidden;
}

.age-records-table-frame-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) top left / 14px 2px no-repeat,
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) top left / 2px 14px no-repeat,
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) top right / 14px 2px no-repeat,
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) top right / 2px 14px no-repeat,
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) bottom left / 14px 2px no-repeat,
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) bottom left / 2px 14px no-repeat,
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) bottom right / 14px 2px no-repeat,
        linear-gradient(rgba(255, 215, 128, 0.75), rgba(255, 215, 128, 0.75)) bottom right / 2px 14px no-repeat;
    opacity: 0.55;
}

.age-records-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 144, 48, 0.45) rgba(0, 0, 0, 0.35);
}

.age-records-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.age-records-table-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
}

.age-records-table-scroll::-webkit-scrollbar-thumb {
    border: 2px solid rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(184, 144, 48, 0.72) 0%, rgba(120, 88, 32, 0.88) 100%);
}

.age-records-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.age-records-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.age-records-table-head {
    padding: 0;
    border-bottom: 1px solid rgba(184, 144, 48, 0.48);
    border-right: 1px solid rgba(184, 144, 48, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.1) 0%, transparent 36%),
        linear-gradient(180deg, rgba(40, 32, 20, 0.98) 0%, rgba(12, 10, 8, 0.99) 100%);
    vertical-align: bottom;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.age-records-table-head-label {
    display: block;
    padding: 11px 14px 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: rgba(255, 231, 176, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.age-records-table-head:last-child {
    border-right: none;
}

.age-records-table-head--identity,
.age-records-table-cell--identity {
    position: sticky;
    left: 0;
    z-index: 2;
    border-right: 1px solid rgba(184, 144, 48, 0.42) !important;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.28);
}

.age-records-table-head--identity {
    z-index: 5;
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.14) 0%, transparent 36%),
        linear-gradient(180deg, rgba(48, 38, 22, 0.99) 0%, rgba(14, 11, 8, 0.99) 100%);
}

.age-records-table-row {
    transition: background 140ms ease, box-shadow 140ms ease;
}

.age-records-table-row:hover .age-records-table-cell {
    background-color: rgba(255, 215, 0, 0.045);
}

.age-records-table-row:hover .age-records-table-cell--identity {
    background:
        linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.02) 100%),
        rgba(20, 16, 10, 0.92);
}

.age-records-table-row:nth-child(even) .age-records-table-cell {
    background-color: rgba(255, 255, 255, 0.018);
}

.age-records-table-row:nth-child(even) .age-records-table-cell--identity {
    background:
        linear-gradient(90deg, rgba(255, 215, 0, 0.03) 0%, transparent 100%),
        rgba(14, 12, 9, 0.88);
}

.age-records-table-row.is-self .age-records-table-cell {
    background-color: rgba(255, 196, 88, 0.1);
    box-shadow: inset 3px 0 0 rgba(255, 196, 88, 0.82);
}

.age-records-table-row.is-self .age-records-table-cell--identity .age-records-table-cell-inner {
    color: #ffe7b0;
    text-shadow: 0 0 12px rgba(255, 196, 88, 0.22);
}

.age-records-table-cell {
    padding: 0;
    border-bottom: 1px solid rgba(184, 144, 48, 0.14);
    border-right: 1px solid rgba(184, 144, 48, 0.1);
    vertical-align: middle;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.18);
}

.age-records-table-cell-inner {
    display: block;
    padding: 10px 14px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(236, 228, 200, 0.88);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.age-records-table-cell:last-child {
    border-right: none;
}

.age-records-table-cell--identity {
    background:
        linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%),
        rgba(16, 13, 9, 0.9);
}

.age-records-table-cell--identity .age-records-table-cell-inner {
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffd978;
}

#age-records-panel-nations .age-records-table-cell--identity .age-records-table-cell-inner {
    font-size: 0.94rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
    padding-top: 11px;
    padding-bottom: 11px;
}

.age-records-table-cell--text.has-value .age-records-table-cell-inner {
    font-weight: 500;
}

.age-records-table-cell--number.has-value .age-records-table-cell-inner,
.age-records-table-cell--pair.has-value .age-records-table-cell-inner {
    color: #fff3c4;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.08);
}

.age-records-table-cell--rank.has-value .age-records-table-cell-inner {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    color: #ffe7b0;
}

.age-records-table-cell.is-empty .age-records-table-cell-inner {
    color: rgba(184, 168, 140, 0.22);
    text-shadow: none;
}

.age-records-table-row:last-child .age-records-table-cell {
    border-bottom: none;
}

#age-page-canvas[data-age-view="headquarters"] .age-map-anchor,
#age-page-canvas[data-age-view="guild-training"] .age-map-anchor {
    display: none;
}

#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="guild-training"] .age-map-hud--left,
#age-page-canvas[data-age-view="guild-training"] .age-map-hud--right {
    display: none !important;
}

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

#age-page-canvas[data-age-view="headquarters"] #age-world-map-player-pins,
#age-page-canvas[data-age-view="headquarters"] #age-world-map-terrain-controls,
#age-page-canvas[data-age-view="headquarters"] #age-world-map-key-dock,
#age-page-canvas[data-age-view="headquarters"] #age-world-map-continent-label,
#age-page-canvas[data-age-view="guild-training"] #age-world-map-player-pins,
#age-page-canvas[data-age-view="guild-training"] #age-world-map-terrain-controls,
#age-page-canvas[data-age-view="guild-training"] #age-world-map-key-dock,
#age-page-canvas[data-age-view="guild-training"] #age-world-map-continent-label {
    display: none !important;
}

#age-page-canvas[data-age-view="city"] .age-city-info-panel,
#age-page-canvas[data-age-view="city"] .age-left-reports-panel {
    display: none !important;
}

#age-page-canvas .age-settlement-menu-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 0;
    padding: 2px 0 4px;
    box-sizing: border-box;
    --settlement-menu-title-size: 1.18rem;
    --settlement-menu-tier-size: 0.74rem;
    --settlement-menu-label-size: 0.94rem;
    --settlement-menu-desc-size: 0.86rem;
    --settlement-menu-mark-size: 30px;
}

#age-page-canvas .age-settlement-menu-panel:not([hidden]) {
    display: flex;
}

#age-page-canvas .age-map-hud--right.is-settlement-view-open {
    bottom: auto;
    height: auto;
    max-height: none;
    overflow: visible;
}

#age-page-canvas .age-map-frame.is-settlement-map-frame .game-region-map-bg {
    object-fit: fill;
}

#age-page-canvas[data-age-view="city"] #age-world-map-svg {
    display: none;
}

.age-settlement-menu-header {
    flex: 0 0 auto;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--age-hud-rail-divider, rgba(184, 144, 48, 0.32));
}

.age-settlement-menu-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.age-settlement-menu-title {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-family: 'Cinzel', serif;
    font-size: var(--settlement-menu-title-size, 1.18rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffd978;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.age-settlement-menu-tier-label {
    margin: 0;
    flex: 0 0 auto;
    padding: 0.28em 0.7em;
    border: 1px solid rgba(255, 217, 120, 0.38);
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: var(--settlement-menu-tier-size, 0.74rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.88);
    background: rgba(255, 217, 120, 0.08);
}

.age-settlement-menu-list {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
}

#age-page-canvas[data-age-view="city"] .age-settlement-menu-list {
    max-height: none;
    overflow: visible;
    scrollbar-width: auto;
}

.age-settlement-menu-list::-webkit-scrollbar {
    width: 5px;
}

.age-settlement-menu-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 217, 120, 0.28);
}

.age-settlement-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px 10px 12px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    border-radius: 3px;
    background:
        linear-gradient(90deg, rgba(255, 217, 120, 0.07) 0%, transparent 28%),
        rgba(0, 0, 0, 0.38);
    font-family: 'Cinzel', serif;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.14s ease;
}

.age-settlement-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 217, 120, 0.18);
    transition: background 0.14s ease, width 0.14s ease;
}

.age-settlement-menu-item--bottom {
    margin-top: 6px;
}

.age-settlement-menu-item--border {
    border-color: rgba(196, 96, 96, 0.38);
    background:
        linear-gradient(90deg, rgba(220, 96, 96, 0.12) 0%, transparent 32%),
        rgba(24, 8, 8, 0.42);
}

.age-settlement-menu-item--border::before {
    background: rgba(220, 96, 96, 0.45);
}

.age-settlement-menu-item:hover,
.age-settlement-menu-item:focus-visible {
    border-color: rgba(255, 215, 0, 0.48);
    background:
        linear-gradient(90deg, rgba(255, 217, 120, 0.14) 0%, transparent 36%),
        linear-gradient(180deg, rgba(48, 40, 24, 0.96) 0%, rgba(16, 12, 8, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.28);
    outline: none;
    transform: translateX(1px);
}

.age-settlement-menu-item:hover::before,
.age-settlement-menu-item:focus-visible::before {
    width: 3px;
    background: rgba(255, 217, 120, 0.82);
}

.age-settlement-menu-item.is-locked,
.age-settlement-menu-item.is-locked:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    border-color: rgba(120, 120, 120, 0.28);
    background:
        linear-gradient(90deg, rgba(120, 120, 120, 0.08) 0%, transparent 28%),
        rgba(0, 0, 0, 0.42);
    box-shadow: none;
    transform: none;
}

.age-settlement-menu-item.is-locked::before,
.age-settlement-menu-item.is-locked:disabled::before {
    background: rgba(120, 120, 120, 0.35);
}

.age-settlement-menu-item.is-locked:hover,
.age-settlement-menu-item.is-locked:focus-visible,
.age-settlement-menu-item.is-locked:disabled:hover,
.age-settlement-menu-item.is-locked:disabled:focus-visible {
    border-color: rgba(120, 120, 120, 0.28);
    background:
        linear-gradient(90deg, rgba(120, 120, 120, 0.08) 0%, transparent 28%),
        rgba(0, 0, 0, 0.42);
    box-shadow: none;
    transform: none;
}

.age-settlement-menu-item.is-locked .age-settlement-menu-item-mark {
    border-color: rgba(120, 120, 120, 0.3);
    color: #9a9a9a;
    background: linear-gradient(180deg, rgba(120, 120, 120, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.age-settlement-menu-item-lock {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #b8a878;
    line-height: 1.3;
}

.age-settlement-menu-item--border:hover,
.age-settlement-menu-item--border:focus-visible {
    border-color: rgba(240, 120, 120, 0.62);
}

.age-settlement-menu-item--border:hover::before,
.age-settlement-menu-item--border:focus-visible::before {
    background: rgba(240, 120, 120, 0.88);
}

.age-settlement-menu-item-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--settlement-menu-mark-size, 30px);
    height: var(--settlement-menu-mark-size, 30px);
    flex: 0 0 var(--settlement-menu-mark-size, 30px);
    border: 1px solid rgba(255, 217, 120, 0.28);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 217, 120, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%);
    font-size: 0.92rem;
    line-height: 1;
    color: #ffd978;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.age-settlement-menu-item--border .age-settlement-menu-item-mark {
    border-color: rgba(240, 120, 120, 0.38);
    color: #ffb8b8;
    background: linear-gradient(180deg, rgba(220, 96, 96, 0.16) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.age-settlement-menu-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.age-settlement-menu-item-label {
    font-size: var(--settlement-menu-label-size, 0.94rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f3e4bc;
    line-height: 1.25;
}

.age-settlement-menu-item-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: var(--settlement-menu-desc-size, 0.86rem);
    font-weight: 500;
    line-height: 1.35;
    color: rgba(210, 198, 168, 0.82);
}

.age-settlement-menu-item-chevron {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
    color: rgba(255, 217, 120, 0.38);
    transition: color 0.14s ease, transform 0.14s ease;
}

.age-settlement-menu-item:hover .age-settlement-menu-item-chevron,
.age-settlement-menu-item:focus-visible .age-settlement-menu-item-chevron {
    color: rgba(255, 217, 120, 0.88);
    transform: translateX(2px);
}

.age-map-turn-cta {
    margin: 0;
    padding: 10px 18px;
    border: 1px solid rgba(60, 184, 106, 0.45);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(28, 52, 36, 0.95) 0%, rgba(10, 18, 12, 0.98) 100%);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7ddea0;
    cursor: pointer;
    white-space: nowrap;
}

.age-map-turn-cta:hover {
    border-color: rgba(125, 222, 160, 0.65);
    color: #b8f0cc;
    box-shadow: 0 0 14px rgba(60, 184, 106, 0.25);
}

.game-tutorial-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 120px auto 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.game-tutorial-complete-btn {
    min-width: 220px !important;
}

.game-chat-module {
    --game-chat-panel-opacity: 0.85;
    --game-chat-width: 380px;
    --game-chat-height: 320px;
    position: fixed !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: var(--game-chat-width) !important;
    height: var(--game-chat-height) !important;
    min-width: 280px !important;
    min-height: 200px !important;
    max-width: min(960px, calc(100vw - 32px)) !important;
    max-height: min(840px, calc(100dvh - 88px)) !important;
    z-index: 999999900 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

.game-chat-module.is-resizing {
    user-select: none !important;
}

.game-chat-module-panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    border-radius: 4px !important;
    background: rgba(8, 6, 4, var(--game-chat-panel-opacity)) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(2px) !important;
    overflow: hidden !important;
}

.game-chat-module-header {
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 8px 44px 0 8px !important;
    border-bottom: 1px solid rgba(184, 144, 48, 0.22) !important;
}

.game-chat-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

.game-chat-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(184, 144, 48, 0.28) !important;
    border-bottom: none !important;
    border-radius: 3px 3px 0 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    color: rgba(241, 224, 172, 0.78) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
}

.game-chat-tab:hover {
    color: #ffd700 !important;
    background: rgba(184, 144, 48, 0.12) !important;
}

.game-chat-tab.is-active {
    color: #ffd700 !important;
    background: rgba(184, 144, 48, 0.2) !important;
    border-color: rgba(184, 144, 48, 0.55) !important;
}

.game-chat-tab[hidden] {
    display: none !important;
}

.game-chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.game-chat-msg.is-pending {
    opacity: 0.72;
}

.game-chat-msg.is-pending .game-chat-msg-time::after {
    content: ' \00B7 sending';
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: rgba(255, 217, 120, 0.7);
}

.game-chat-empty {
    margin: auto 0 !important;
    text-align: center !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    color: rgba(241, 224, 172, 0.55) !important;
}

.game-chat-msg {
    text-align: left !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    padding: 4px 2px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.game-chat-msg-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
}

.game-chat-msg-time {
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
    color: rgba(241, 224, 172, 0.45) !important;
}

.game-chat-msg-tag {
    font-size: 0.62rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(241, 224, 172, 0.5) !important;
}

.game-chat-msg-author {
    font-weight: 700 !important;
    margin-right: 4px !important;
}

.game-chat-msg--system {
    color: rgba(255, 196, 120, 0.95) !important;
    font-style: italic !important;
}

.game-chat-msg--global,
.game-chat-msg--global .game-chat-msg-body,
.game-chat-msg--global .game-chat-msg-author {
    color: rgba(236, 236, 236, 0.92) !important;
}

.game-chat-msg--country,
.game-chat-msg--country .game-chat-msg-body,
.game-chat-msg--country .game-chat-msg-author {
    color: #ffd700 !important;
}

.game-chat-msg--alliance,
.game-chat-msg--alliance .game-chat-msg-body,
.game-chat-msg--alliance .game-chat-msg-author {
    color: #78b8ff !important;
}

.game-chat-msg-body .chat-shoutout-mention-badge {
    color: rgba(255, 232, 160, 0.96);
    font-weight: 700;
}

.game-chat-compose-hint {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 10px 4px 10px !important;
    font-size: 0.72rem !important;
    color: rgba(241, 224, 172, 0.62) !important;
}

.game-chat-compose-form {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 6px !important;
    padding: 8px 10px 10px 10px !important;
    border-top: 1px solid rgba(184, 144, 48, 0.18) !important;
    box-sizing: border-box !important;
}

.game-chat-compose-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(184, 144, 48, 0.35) !important;
    border-radius: 2px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #f1e0ac !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.82rem !important;
}

.game-chat-compose-input:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

.game-chat-compose-send {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(184, 144, 48, 0.45) !important;
    border-radius: 2px !important;
    background: rgba(12, 10, 8, 0.92) !important;
    color: #ffd700 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
}

.game-chat-compose-send:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.game-chat-resize-handle {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: nesw-resize !important;
    touch-action: none !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

.game-chat-resize-handle::after {
    content: '' !important;
    position: absolute !important;
    top: 9px !important;
    right: 9px !important;
    width: 14px !important;
    height: 14px !important;
    border-top: 2px solid rgba(255, 215, 0, 0.75) !important;
    border-right: 2px solid rgba(255, 215, 0, 0.75) !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    transition: border-color 0.15s ease !important;
}

.game-chat-resize-handle:hover::after,
.game-chat-module.is-resizing .game-chat-resize-handle::after {
    border-color: rgba(255, 215, 0, 0.98) !important;
}

body#how-did-you-get-here-canvas .achievement-toast-anchor {
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(
        var(--achievement-toast-stack-bottom, calc(24px + 88px + 16px)),
        env(safe-area-inset-bottom)
    ) !important;
    z-index: 999999990 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-toast {
    position: relative !important;
    width: 100% !important;
    pointer-events: auto !important;
    transform: scale(0) !important;
    transform-origin: bottom right !important;
    opacity: 0 !important;
    will-change: transform, opacity !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-toast.is-growing {
    animation: achievementToastGrow 0.45s cubic-bezier(0.22, 1.12, 0.36, 1) forwards !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-toast.is-held {
    transform: scale(1) !important;
    opacity: 1 !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-toast.is-exiting {
    animation: achievementToastShrink 0.22s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards !important;
}

@keyframes achievementToastGrow {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    72% {
        transform: scale(1.04);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes achievementToastShrink {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Achievement unlock toast — rectangular console-style banner */
body#how-did-you-get-here-canvas .achievement-unlock-card {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    min-height: 76px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(184, 144, 48, 0.42) !important;
    background: linear-gradient(
        118deg,
        rgba(28, 22, 14, 0.98) 0%,
        rgba(12, 10, 8, 0.98) 42%,
        rgba(6, 5, 4, 1) 100%
    ) !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.88),
        inset 0 1px 0 rgba(255, 215, 0, 0.08) !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #ffe566 0%, #c9a24a 48%, #7a5f24 100%) !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.42) !important;
    z-index: 2 !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-card-glow {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(ellipse 55% 120% at 0% 50%, rgba(255, 215, 0, 0.14) 0%, transparent 68%),
        radial-gradient(ellipse 40% 80% at 100% 0%, rgba(184, 144, 48, 0.08) 0%, transparent 70%) !important;
    opacity: 0.85 !important;
    transition: opacity 0.35s ease !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-card.is-reveal-active .achievement-unlock-card-glow {
    opacity: 1 !important;
    animation: achievementCardGlowPulse 2.4s ease-in-out infinite !important;
}

@keyframes achievementCardGlowPulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

body#how-did-you-get-here-canvas .achievement-unlock-card-body {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 76px !important;
    padding: 12px 16px 12px 18px !important;
    box-sizing: border-box !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-icon-slot {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    border: 2px solid rgba(201, 162, 74, 0.55) !important;
    background: radial-gradient(circle at 32% 22%, rgba(56, 44, 24, 0.95) 0%, rgba(8, 6, 4, 1) 100%) !important;
    box-shadow:
        inset 0 0 14px rgba(0, 0, 0, 0.65),
        0 0 14px rgba(255, 215, 0, 0.18) !important;
    overflow: hidden !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-icon {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85)) !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-headline {
    margin: 0 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-detail {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    color: rgba(241, 224, 172, 0.92) !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-xp {
    flex-shrink: 0 !important;
    font-weight: 700 !important;
    color: #ffe566 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.35) !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-xp[hidden] {
    display: none !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-xp:not([hidden]) + .achievement-unlock-title::before {
    content: '\2014 ' !important;
    color: rgba(241, 224, 172, 0.55) !important;
    font-weight: 400 !important;
}

body#how-did-you-get-here-canvas .achievement-unlock-title {
    margin: 0 !important;
    min-width: 0 !important;
    font-weight: 600 !important;
    color: #f1e0ac !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


@media (prefers-reduced-motion: reduce) {
    body#how-did-you-get-here-canvas .achievement-unlock-toast.is-growing,
    body#how-did-you-get-here-canvas .achievement-unlock-toast.is-exiting,
    body#how-did-you-get-here-canvas .achievement-unlock-card.is-reveal-active .achievement-unlock-card-glow {
        animation: none !important;
    }

    body#how-did-you-get-here-canvas .achievement-unlock-toast.is-growing,
    body#how-did-you-get-here-canvas .achievement-unlock-toast.is-held,
    body#how-did-you-get-here-canvas .achievement-unlock-toast.is-exiting {
        transform: scale(1) !important;
        opacity: 1 !important;
    }
}

@media (max-width: 640px) {
    body#how-did-you-get-here-canvas .achievement-toast-anchor {
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: max(
            var(--achievement-toast-stack-bottom, calc(24px + 88px + 12px)),
            env(safe-area-inset-bottom)
        ) !important;
        width: min(320px, calc(100vw - 16px)) !important;
    }

    body#how-did-you-get-here-canvas .achievement-unlock-card {
        max-width: 320px !important;
        min-height: 72px !important;
    }

    body#how-did-you-get-here-canvas .achievement-unlock-card-body {
        min-height: 72px !important;
        padding: 10px 12px 10px 16px !important;
        gap: 12px !important;
    }

    body#how-did-you-get-here-canvas .achievement-unlock-icon-slot {
        flex: 0 0 50px !important;
        width: 50px !important;
        height: 50px !important;
    }

    body#how-did-you-get-here-canvas .achievement-unlock-icon {
        width: 42px !important;
        height: 42px !important;
    }

    body#how-did-you-get-here-canvas .achievement-unlock-headline {
        font-size: 0.88rem !important;
    }

    body#how-did-you-get-here-canvas .achievement-unlock-detail {
        font-size: 0.75rem !important;
    }

    .game-page-panel-frame {
        padding: 22px 18px 18px !important;
    }
}

/* —— Age world map: zoom/pan, city borders, semantic labels —— */
.age-world-map-frame {
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.age-world-map-frame.is-over-city:not(.is-dragging):not(.is-plan-city-pick):not(.is-plan-editor-open) {
    cursor: pointer;
}

.age-world-map-frame.is-dragging {
    cursor: none !important;
}

.age-world-map-frame.is-dragging,
.age-world-map-frame.is-dragging * {
    cursor: none !important;
}

html.age-world-map-pan-locked #royal-armies-custom-cursor,
html.age-world-map-pan-locked #cursor-click-fx-layer {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.age-world-map-canvas {
    position: absolute;
    inset: var(--game-region-map-bezel);
    transform-origin: 0 0;
}

.age-world-map-bg-image {
    pointer-events: none;
    image-rendering: auto;
}

.age-world-map-terrain-overlay {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.age-world-map-frame.is-terrain-overlay-on .age-world-map-terrain-overlay {
    opacity: 1;
    visibility: visible;
}

.age-world-map-color-backdrop,
.age-world-map-layer--color-fill {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.age-world-map-frame.is-color-map-on .age-world-map-bg-image,
.age-world-map-frame.is-color-map-on .age-world-map-terrain-overlay {
    opacity: 0;
    visibility: hidden;
}

.age-world-map-frame.is-color-map-on .age-world-map-color-backdrop,
.age-world-map-frame.is-color-map-on .age-world-map-layer--color-fill {
    opacity: 1;
    visibility: visible;
}

.age-world-map-frame.is-color-map-on .age-world-map-color-backdrop {
    fill: #182430;
}

.age-world-map-color-layer-nations,
.age-world-map-color-layer-terrain {
    opacity: 0;
    visibility: hidden;
}

.age-world-map-frame.is-color-map-nations .age-world-map-color-layer-nations,
.age-world-map-frame.is-color-map-terrain .age-world-map-color-layer-terrain {
    opacity: 1;
    visibility: visible;
}

.age-world-map-frame.is-color-map-on .age-world-nation-color-fill {
    fill-opacity: 0.88;
    stroke: none;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-terrain-color-fill {
    fill-opacity: 0.9;
    stroke: rgba(12, 8, 4, 0.32);
    stroke-width: 1px;
    stroke-opacity: 1;
    vector-effect: non-scaling-stroke;
    paint-order: stroke fill;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-map-layer--nations path {
    stroke: none;
    opacity: 0 !important;
    visibility: hidden !important;
}

.age-world-map-frame.is-color-map-on .age-world-map-layer--cities .age-world-city-border-path {
    stroke: #000000;
    stroke-width: 1.5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-region-border,
.age-world-map-frame.is-color-map-on .age-world-map-layer--regions path {
    stroke: none;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Color map: black city strokes for all settlements (diplomacy shown via fills elsewhere). */
.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-own,
.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-own {
    fill: transparent !important;
    stroke: #000000;
    stroke-width: 1.5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-ally,
.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-ally {
    fill: transparent !important;
    stroke: #000000;
    stroke-width: 1.5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-nap,
.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-nap {
    fill: transparent !important;
    stroke: #000000;
    stroke-width: 1.5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-enemy,
.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-enemy {
    fill: transparent !important;
    stroke: #000000;
    stroke-width: 1.5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-neutral,
.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-neutral {
    fill: transparent !important;
    stroke: #000000;
    stroke-width: 1.5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-path.is-player-city,
.age-world-map-frame.is-color-map-on .age-world-map-layer--ownership .age-world-city-ownership-boost.is-player-city {
    fill: transparent !important;
    stroke: #000000 !important;
    stroke-width: 1.5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-color-swatch {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.age-world-map-key-dock {
    position: absolute;
    bottom: calc(var(--game-region-map-bezel, 0px) + 12px);
    left: calc(var(--game-region-map-bezel, 0px) + 12px);
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    max-height: min(52vh, 420px);
    pointer-events: none;
}

.age-world-map-map-key {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: min(220px, 34vw);
    max-height: min(48vh, 380px);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden auto;
    pointer-events: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 217, 120, 0.45) rgba(8, 6, 3, 0.35);
}

.age-world-map-map-key[hidden] {
    display: none !important;
}

.age-world-map-map-key > li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: rgba(244, 230, 200, 0.9);
    white-space: nowrap;
}

.age-world-map-city-search {
    position: fixed;
    top: var(--age-map-search-top, calc(var(--age-map-slot-top, 0px) + 24px));
    right: var(--age-map-search-right, max(16px, env(safe-area-inset-right, 0px)));
    left: auto;
    z-index: 13;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: min(300px, calc(100vw - 48px));
    max-width: min(380px, calc(100vw - 24px));
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#age-page-canvas[data-age-view="map"] .age-world-map-city-search-input,
#age-page-canvas[data-age-view="map"] .age-world-map-city-search-center-btn,
#age-page-canvas[data-age-view="map"] .age-world-map-city-search-suggest,
#age-page-canvas[data-age-view="map"] .age-world-map-city-search-suggest-item {
    pointer-events: auto;
    cursor: pointer;
}

#age-page-canvas[data-age-view="map"] .age-world-map-city-search-input {
    cursor: text;
}

.age-world-map-frame.is-plan-editor-open .age-world-map-city-search {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
}

.age-world-map-city-search-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    transform: translate(-7px, 7px);
}

.age-world-map-city-search-input {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    border: 1px solid rgba(255, 217, 120, 0.45);
    border-radius: 9999px;
    padding: 0.48em 1em;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #f4e6c8;
    background: rgba(8, 6, 3, 0.88);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.age-world-map-city-search-input::placeholder {
    color: rgba(244, 230, 200, 0.45);
}

.age-world-map-city-search-input:focus {
    outline: none;
    border-color: rgba(255, 217, 120, 0.9);
    box-shadow:
        0 0 0 2px rgba(255, 217, 120, 0.22),
        0 2px 12px rgba(0, 0, 0, 0.8);
}

.age-world-map-city-search-center-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.age-world-map-city-search-center-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.age-world-map-city-search-suggest {
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(255, 217, 120, 0.35);
    border-radius: 12px;
    background: rgba(8, 6, 3, 0.94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.82);
    max-height: 220px;
    overflow-y: auto;
}

.age-world-map-city-search-suggest[hidden] {
    display: none !important;
}

.age-world-map-city-search-suggest-item {
    padding: 0.45em 0.75em;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #f4e6c8;
    cursor: pointer;
}

.age-world-map-city-search-suggest-item:hover,
.age-world-map-city-search-suggest-item:focus {
    color: #1a1408;
    background: linear-gradient(180deg, rgba(255, 217, 120, 0.96), rgba(214, 170, 72, 0.92));
}

.age-world-map-terrain-controls,
#age-page-canvas[data-age-view="map"] #age-world-map-terrain-controls {
    position: absolute;
    top: calc(var(--game-region-map-bezel, 0px) + 12px);
    left: calc(var(--game-region-map-bezel, 0px) + 12px);
    z-index: 8;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
    pointer-events: auto;
}

body.age-map-shell-only .age-world-map-terrain-controls,
#age-page-canvas.age-map-shell-only #age-world-map-terrain-controls {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

.age-world-map-terrain-toggle {
    appearance: none;
    border: 1px solid rgba(255, 217, 120, 0.55);
    border-radius: 9999px;
    padding: 0.42em 0.95em;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f4e6c8;
    background: rgba(8, 6, 3, 0.82);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.age-world-map-terrain-toggle[hidden] {
    display: none !important;
}

.age-world-map-terrain-toggle:hover {
    border-color: rgba(255, 217, 120, 0.85);
    color: #ffd978;
}

.age-world-map-terrain-toggle.is-active {
    border-color: rgba(255, 217, 120, 0.95);
    color: #1a1408;
    background: linear-gradient(180deg, rgba(255, 217, 120, 0.96), rgba(214, 170, 72, 0.92));
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.age-world-map-plan-tool-dock {
    position: absolute;
    top: calc(var(--game-region-map-bezel, 0px) + 12px);
    right: calc(var(--game-region-map-bezel, 0px) + 12px);
    z-index: 9;
    display: block;
    pointer-events: none;
}

.age-world-map-plan-tool-dock[hidden] {
    display: none !important;
}

.age-world-map-plan-tool-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: auto;
}

.age-world-map-plan-tool-btn,
.age-world-map-plan-tool-orbit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 217, 120, 0.72);
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 215, 128, 0.16) 0%, transparent 58%),
        linear-gradient(165deg, rgba(34, 26, 16, 0.98) 0%, rgba(8, 6, 4, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 128, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition:
        border-color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.12s ease;
}

.age-world-map-plan-tool-btn:hover,
.age-world-map-plan-tool-btn:focus-visible {
    border-color: rgba(255, 217, 120, 0.95);
    outline: none;
    transform: translateY(-1px);
}

.age-world-map-plan-tool-btn.is-active {
    border-color: rgba(255, 217, 120, 1);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 128, 0.35),
        0 0 16px rgba(255, 190, 60, 0.28);
}

.age-world-map-plan-tool-placeholder {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 215, 128, 0.34);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.age-world-map-plan-tool-orbit-host {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.age-world-map-plan-tool-orbit {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    pointer-events: none;
}

.age-world-map-plan-tool-orbit[hidden] {
    display: none !important;
}

.age-world-map-plan-tool-orbit.is-open {
    display: flex;
    pointer-events: auto;
}

.age-world-map-plan-tool-orbit-btn {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    transform: none;
    transition:
        border-color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.12s ease;
}

.age-world-map-plan-tool-orbit-btn:hover,
.age-world-map-plan-tool-orbit-btn:focus-visible {
    outline: none;
    transform: translateY(-1px);
}

.age-world-map-plan-tool-orbit-btn.is-active,
.age-world-map-plan-tool-orbit-btn.is-active:hover,
.age-world-map-plan-tool-orbit-btn.is-active:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 128, 0.35),
        0 0 14px rgba(255, 190, 60, 0.24);
}

.age-world-map-plan-tool-orbit-label {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(244, 230, 200, 0.92);
    line-height: 1;
    pointer-events: none;
}

.age-world-map-plan-tool-btn--secondary {
    width: auto;
    min-width: 132px;
    height: auto;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 10px;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
}

.age-world-map-plan-tool-glyph {
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 217, 120, 0.95);
}

.age-world-map-plan-tool-caption {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 230, 200, 0.95);
    white-space: nowrap;
}

.age-world-map-plan-tool-btn--secondary.is-active {
    border-color: rgba(255, 217, 120, 1);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 128, 0.35),
        0 0 14px rgba(255, 190, 60, 0.24);
}

.age-world-map-plan-editor-hint {
    margin: 6px 0 0;
    max-width: 320px;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-align: right;
    color: rgba(244, 230, 200, 0.88);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

.age-world-map-plan-editor-hint[hidden] {
    display: none !important;
}

.age-world-map-plan-post-btn:disabled,
.age-world-map-plan-post-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.age-world-map-plan-post-btn.is-cancel-plan {
    border-color: rgba(255, 168, 88, 0.72);
    color: #ffe2b8;
}

.age-world-map-plan-post-btn.is-cancel-plan:not(:disabled):hover,
.age-world-map-plan-post-btn.is-cancel-plan:not(:disabled):focus-visible {
    border-color: rgba(255, 210, 120, 0.95);
    background: rgba(72, 40, 8, 0.55);
}

.age-world-map-plan-tool-orbit-btn--sf {
    border-color: rgba(220, 56, 56, 0.95);
}

.age-world-map-plan-tool-orbit-btn--sf:hover,
.age-world-map-plan-tool-orbit-btn--sf:focus-visible {
    border-color: rgba(255, 96, 96, 1);
}

.age-world-map-plan-tool-orbit-btn--sf.is-active {
    border-color: rgba(255, 120, 120, 1);
}

.age-world-map-plan-tool-orbit-btn--mf {
    border-color: rgba(140, 28, 28, 0.95);
}

.age-world-map-plan-tool-orbit-btn--mf:hover,
.age-world-map-plan-tool-orbit-btn--mf:focus-visible {
    border-color: rgba(180, 48, 48, 1);
}

.age-world-map-plan-tool-orbit-btn--mf.is-active {
    border-color: rgba(210, 72, 72, 1);
}

.age-world-map-plan-tool-orbit-btn--rally {
    border-color: rgba(255, 215, 0, 0.95);
}

.age-world-map-plan-tool-orbit-btn--rally:hover,
.age-world-map-plan-tool-orbit-btn--rally:focus-visible {
    border-color: rgba(255, 228, 96, 1);
}

.age-world-map-plan-tool-orbit-btn--rally.is-active {
    border-color: rgba(255, 236, 128, 1);
}

.age-world-map-plan-tool-orbit-btn--move {
    border-color: rgba(56, 196, 112, 0.95);
}

.age-world-map-plan-tool-orbit-btn--move:hover,
.age-world-map-plan-tool-orbit-btn--move:focus-visible {
    border-color: rgba(96, 228, 148, 1);
}

.age-world-map-plan-tool-orbit-btn--move.is-active {
    border-color: rgba(120, 240, 168, 1);
}

.age-world-map-plan-tool-orbit-btn--main {
    border-color: rgba(168, 120, 255, 0.95);
}

.age-world-map-plan-tool-orbit-btn--main:hover,
.age-world-map-plan-tool-orbit-btn--main:focus-visible {
    border-color: rgba(196, 148, 255, 1);
}

.age-world-map-plan-tool-orbit-btn--main.is-active {
    border-color: rgba(220, 180, 255, 1);
}

.age-world-map-plan-tool-orbit-btn--sf .age-world-map-plan-tool-placeholder {
    background: rgba(255, 96, 96, 0.42);
}

.age-world-map-plan-tool-orbit-btn--mf .age-world-map-plan-tool-placeholder {
    background: rgba(160, 36, 36, 0.48);
}

.age-world-map-plan-tool-orbit-btn--rally .age-world-map-plan-tool-placeholder {
    background: rgba(255, 220, 96, 0.42);
}

.age-world-map-plan-tool-orbit-btn--move .age-world-map-plan-tool-placeholder {
    background: rgba(96, 220, 140, 0.42);
}

.age-world-map-plan-tool-orbit-btn--main .age-world-map-plan-tool-placeholder {
    background: rgba(168, 120, 255, 0.42);
}

.age-world-map-plan-add-btn.is-active {
    border-color: rgba(255, 217, 120, 0.95);
    color: #1a1408;
    background: linear-gradient(180deg, rgba(255, 217, 120, 0.96), rgba(214, 170, 72, 0.92));
}

.age-world-map-frame.is-plan-editor-open,
.age-world-map-frame.is-plan-city-pick {
    cursor: crosshair;
}

#age-world-map-hit-layer.is-plan-city-pick .age-world-city-hit-path,
#age-world-map-hit-layer.is-plan-city-pick .age-world-city-hit-boost {
    pointer-events: all !important;
    cursor: crosshair;
}

#age-world-map-hit-layer.is-plan-city-pick .age-world-city-hit-path {
    stroke: rgba(0, 0, 0, 0.002);
    stroke-width: 16px;
}

.age-world-map-plan-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    overflow: visible;
}

.age-world-map-plan-overlay[hidden] {
    display: none !important;
}

.age-world-map-plan-arrows {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    --age-plan-ink-halo: #0a0804;
    --age-plan-ink-rim: rgba(184, 144, 48, 0.78);
    --age-plan-ink-gold: #ffd978;
}

.age-world-map-plan-route {
    pointer-events: none;
}

.age-world-map-plan-route-v2 .age-world-map-plan-arrow,
.age-world-map-plan-route-v2 .age-world-map-plan-arrow-ribbon,
.age-world-map-plan-route-v2 .age-world-map-plan-arrow-track,
.age-world-map-plan-route-v2 .age-world-map-plan-arrow-halo,
.age-world-map-plan-route-v2 .age-world-map-plan-arrow-rim,
.age-world-map-plan-route-v2 .age-world-map-plan-arrow-sheen,
.age-world-map-plan-arrow,
.age-world-map-plan-arrow-track,
.age-world-map-plan-arrow-halo,
.age-world-map-plan-arrow-rim {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.age-world-map-plan-route-v2 .age-world-map-plan-arrow-ribbon {
    opacity: 0.72;
    mix-blend-mode: screen;
}

.age-world-map-plan-route-v2 .age-world-map-plan-arrow-track {
    opacity: 0.62;
}

.age-world-map-plan-route-v2 .age-world-map-plan-arrow-sheen {
    opacity: 0.85;
    pointer-events: none;
}

.age-world-map-plan-arrow-track {
    opacity: 0.55;
}

.age-world-map-plan-arrow-halo {
    stroke: var(--age-plan-ink-halo);
    stroke-width: 6px;
}

.age-world-map-plan-arrow-rim {
    stroke-width: 3.6px;
}

.age-world-map-plan-arrow {
    stroke-width: 3px;
}

.age-world-map-plan-route-gem {
    pointer-events: none;
}

.age-world-map-plan-route-gem__ring {
    opacity: 0.88;
    animation: age-map-plan-route-gem-ring 2.2s ease-in-out infinite;
}

.age-world-map-plan-route-gem__core {
    filter: drop-shadow(0 0 4px rgba(255, 217, 120, 0.65));
}

.age-world-map-plan-route-gem--end .age-world-map-plan-route-gem__ring {
    animation-duration: 1.6s;
}

@keyframes age-map-plan-route-gem-ring {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.92);
        transform-origin: center;
        transform-box: fill-box;
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
        transform-origin: center;
        transform-box: fill-box;
    }
}

.age-world-map-plan-draft-arrows-layer .age-world-map-plan-route-v2 .age-world-map-plan-arrow.is-marching,
.age-world-map-plan-draft-arrows-layer .age-world-map-plan-route-v2 .age-world-map-plan-arrow.is-draft,
.age-world-map-plan-draft-arrows-layer .age-world-map-plan-route-v2 .age-world-map-plan-arrow-ribbon.is-marching,
.age-world-map-plan-draft-arrows-layer .age-world-map-plan-route-v2.age-world-map-plan-route--draft .age-world-map-plan-arrow-ribbon {
    stroke-dasharray: 12 9;
    animation: age-map-plan-arrow-march 1.2s linear infinite;
}

.age-world-map-plan-draft-arrows-layer .age-world-map-plan-route-v2 .age-world-map-plan-arrow.is-marching,
.age-world-map-plan-draft-arrows-layer .age-world-map-plan-route-v2 .age-world-map-plan-arrow.is-draft {
    stroke-dasharray: 8 7;
}

.age-world-map-plan-draft-arrows-layer .age-world-map-plan-route--draft .age-world-map-plan-arrow-rim {
    stroke: rgba(255, 217, 120, 0.92);
}

.age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow.is-new,
.age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow-ribbon.is-new {
    animation:
        age-map-plan-arrow-march 1.2s linear infinite,
        age-map-plan-arrow-pop 0.6s ease-out;
}

@keyframes age-map-plan-arrow-march {
    to {
        stroke-dashoffset: -36;
    }
}

@keyframes age-map-plan-arrow-pop {
    0% {
        stroke-width: 1.4;
        opacity: 0.4;
    }
    55% {
        stroke-width: 3.8;
        opacity: 1;
    }
    100% {
        stroke-width: 3;
        opacity: 1;
    }
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-arrows {
    pointer-events: auto;
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow {
    pointer-events: stroke;
    cursor: pointer;
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow-hit {
    pointer-events: stroke;
    cursor: pointer;
}

.age-world-map-frame.is-plan-route-assign .age-world-map-plan-arrow-hit,
.age-world-map-frame.is-plan-route-assign .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow {
    cursor: pointer;
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow.is-draft,
.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow--draft {
    stroke-width: 8;
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow--sf,
.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow--mf,
.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow--move,
.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow--temp-main,
.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow--rally {
    stroke-width: 8;
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow-halo {
    stroke-width: 9px;
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-draft-arrows-layer .age-world-map-plan-arrow-rim {
    stroke-width: 4.6px;
}

.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-route:hover .age-world-map-plan-arrow,
.age-world-map-plan-overlay--draft.is-interactive .age-world-map-plan-route:hover .age-world-map-plan-arrow-rim {
    filter: brightness(1.12);
}

.age-world-map-plan-pill--anchor {
    border-color: rgba(255, 217, 120, 0.9);
    color: #ffe7a8;
}

.age-world-map-plan-draft-pills {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

.age-world-map-plan-anchor-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    pointer-events: none;
    display: grid;
    place-items: center;
}

.age-world-map-plan-anchor-marker__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 217, 120, 0.95);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.65),
        0 0 18px rgba(255, 196, 72, 0.55);
    animation: age-map-plan-anchor-ring 1.8s ease-in-out infinite;
}

.age-world-map-plan-anchor-marker__core {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 230, 160, 0.98);
    box-shadow: 0 0 10px rgba(255, 217, 120, 0.9);
}

.age-world-map-plan-anchor-marker__label {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 217, 120, 0.75);
    background: rgba(8, 6, 4, 0.92);
    color: #ffe7a8;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@keyframes age-map-plan-anchor-ring {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.82;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.age-world-map-plan-arrow-head {
    stroke: #0a0804;
    stroke-width: 2px;
    stroke-linejoin: round;
    paint-order: stroke fill;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

.age-world-map-plan-arrow-head--draft {
    fill: #d8d0bc;
}

.age-world-map-plan-arrow-head--sf {
    fill: #e8a85a;
}

.age-world-map-plan-arrow-head--mf {
    fill: #9a2828;
}

.age-world-map-plan-arrow-head--move {
    fill: #7ec49a;
}

.age-world-map-plan-arrow-head--main {
    fill: #9eb8e8;
}

.age-world-map-plan-arrow-head--temp-main {
    fill: #c8b0ff;
}

.age-world-map-plan-arrow-head--rally {
    fill: #ffd978;
}

.age-world-map-plan-arrow-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    paint-order: stroke fill;
    stroke: rgba(0, 0, 0, 0.88);
    stroke-width: 2.5px;
    pointer-events: none;
}

.age-world-map-plan-arrow-label--sf {
    fill: #ffd0a0;
}

.age-world-map-plan-arrow-label--move {
    fill: #9dffc8;
}

.age-world-map-plan-arrow-label--main,
.age-world-map-plan-arrow-label--temp-main {
    fill: #c8dcff;
}

.age-world-map-plan-arrow-label--mf {
    fill: #e8a0a0;
}

.age-world-map-plan-arrow-label--rally,
.age-world-map-plan-arrow-label--taxi {
    fill: #ffd978;
}

.age-world-map-plan-rally-pulse {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    pointer-events: none;
    display: grid;
    place-items: center;
    z-index: 3;
}

.age-world-map-plan-rally-pulse__wave {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 204, 88, 0.72);
    box-shadow: 0 0 12px rgba(255, 196, 72, 0.45);
    opacity: 0;
    animation: age-map-plan-rally-wave 2.4s ease-out infinite;
}

.age-world-map-plan-rally-pulse__wave--b {
    animation-delay: 0.55s;
}

.age-world-map-plan-rally-pulse__wave--c {
    animation-delay: 1.1s;
}

.age-world-map-plan-rally-pulse__core {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 232, 160, 1) 0%, rgba(212, 162, 48, 0.95) 68%, rgba(140, 100, 24, 0.9) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 0 14px rgba(255, 204, 88, 0.85);
}

.age-world-map-plan-rally-pulse__label {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 204, 88, 0.8);
    background: rgba(12, 10, 6, 0.92);
    color: #ffd978;
    font-family: 'Cinzel', serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.age-world-map-plan-rally-pulse.is-new .age-world-map-plan-rally-pulse__core {
    animation: age-map-plan-rally-core-pop 0.65s ease-out;
}

@keyframes age-map-plan-rally-wave {
    0% {
        transform: scale(0.35);
        opacity: 0.88;
    }
    70% {
        opacity: 0.22;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@keyframes age-map-plan-rally-core-pop {
    0% {
        transform: scale(0.4);
        opacity: 0.4;
    }
    60% {
        transform: scale(1.25);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.age-world-map-plan-arrows-layer text {
    fill: #ffe7a8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    paint-order: stroke fill;
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 3px;
}

.age-world-map-plan-pills {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.age-world-map-plan-pill {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 128, 0.55);
    background: rgba(8, 6, 4, 0.88);
    color: #ffe7a8;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.age-world-map-plan-pill--hold { border-color: rgba(196, 196, 196, 0.75); color: #ececec; }
.age-world-map-plan-pill--taxi { border-color: rgba(120, 184, 255, 0.75); color: #b8daff; }
.age-world-map-plan-pill--main,
.age-world-map-plan-pill--temp-main { border-color: rgba(196, 148, 255, 0.75); color: #dfc8ff; }

.age-world-map-terrain-swatch {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.age-world-map-terrain-swatch--forest { background: rgba(52, 128, 68, 0.92); }
.age-world-map-terrain-swatch--plains { background: rgba(126, 186, 78, 0.92); }
.age-world-map-terrain-swatch--desert { background: rgba(210, 165, 90, 0.92); }
.age-world-map-terrain-swatch--mountains { background: rgba(136, 118, 96, 0.92); }
.age-world-map-terrain-swatch--marshlands { background: rgba(48, 138, 158, 0.92); }
.age-world-map-terrain-swatch--snow { background: rgba(236, 244, 252, 0.96); }

#age-page-canvas:not([data-age-view="map"]) .age-world-map-terrain-controls,
#age-page-canvas:not([data-age-view="map"]) .age-world-map-key-dock {
    display: none !important;
}

.age-world-map-canvas[hidden] {
    display: none !important;
}

.age-world-map-highlight-shell {
    position: absolute;
    inset: var(--game-region-map-bezel);
    pointer-events: none;
    z-index: 7;
    overflow: visible;
}

.age-world-map-highlight-shell[hidden] {
    display: none !important;
}

.age-world-map-highlight-root {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

#age-page-canvas #age-world-map-highlight-map.age-world-map-highlight-map {
    display: block;
    overflow: visible;
}

#age-world-map-highlight-layer.age-world-map-layer--highlight {
    z-index: 7;
    pointer-events: none !important;
}

#age-page-canvas #age-world-map-svg.age-world-map-unified {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.age-world-map-layer--regions,
.age-world-map-layer--nations,
.age-world-map-layer--ownership,
.age-world-map-layer--cities {
    pointer-events: none;
}

#age-world-map-ownership-layer.age-world-map-layer--ownership {
    pointer-events: none !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-path {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2.5px;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-own {
    fill: rgba(255, 196, 48, 0.30);
    stroke: rgba(255, 228, 120, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-ally {
    fill: rgba(64, 128, 255, 0.30);
    stroke: rgba(120, 176, 255, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-nap {
    fill: rgba(140, 210, 255, 0.30);
    stroke: rgba(190, 232, 255, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-enemy {
    fill: rgba(220, 72, 72, 0.30);
    stroke: rgba(255, 120, 120, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-path.is-nation-neutral {
    fill: rgba(168, 168, 168, 0.30);
    stroke: rgba(0, 0, 0, 0.85);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-own {
    fill: rgba(255, 196, 48, 0.30);
    stroke: rgba(255, 228, 120, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-ally {
    fill: rgba(64, 128, 255, 0.30);
    stroke: rgba(120, 176, 255, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-nap {
    fill: rgba(140, 210, 255, 0.30);
    stroke: rgba(190, 232, 255, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-enemy {
    fill: rgba(220, 72, 72, 0.30);
    stroke: rgba(255, 120, 120, 1);
    opacity: 1 !important;
    visibility: visible !important;
}

.age-world-map-layer--ownership .age-world-city-ownership-boost.is-nation-neutral {
    fill: rgba(168, 168, 168, 0.30);
    stroke: rgba(0, 0, 0, 0.85);
    opacity: 1 !important;
    visibility: visible !important;
}

#age-world-map-hit-layer.age-world-map-layer--hit {
    z-index: 6;
    opacity: 1;
    pointer-events: auto !important;
}

.age-world-map-layer--highlight .age-world-city-highlight-path {
    fill: rgba(255, 255, 255, 0.08);
    stroke: #ffcc00;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.age-world-map-layer--highlight .age-world-city-highlight-path.is-active {
    opacity: 1;
}

.age-world-map-layer--highlight .age-world-city-highlight-path.is-selected-city,
.age-world-map-layer--highlight .age-world-city-highlight-boost.is-selected-city {
    opacity: 1 !important;
    fill: rgba(255, 196, 72, 0.32);
    stroke: rgba(255, 217, 120, 1);
    stroke-width: 3.5px;
    filter: drop-shadow(0 0 10px rgba(255, 196, 72, 0.85));
}

.age-world-map-layer--highlight .age-world-city-highlight-path.is-bordering-neighbor,
.age-world-map-layer--highlight .age-world-city-highlight-boost.is-bordering-neighbor {
    opacity: 1 !important;
    fill: rgba(120, 200, 255, 0.22);
    stroke: rgba(100, 180, 255, 0.95);
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 6px rgba(80, 160, 255, 0.45));
}

#age-world-map-hit-layer.age-world-map-layer--hit .age-world-city-hit-path {
    pointer-events: all !important;
    fill: rgba(0, 0, 0, 0.001);
    stroke: transparent;
    cursor: pointer;
    vector-effect: non-scaling-stroke;
}

#age-world-map-hit-layer.age-world-map-layer--hit .age-world-city-hit-boost {
    pointer-events: all !important;
    fill: rgba(0, 0, 0, 0.001);
    stroke: transparent;
    cursor: pointer;
}

.age-world-map-layer--highlight .age-world-city-highlight-boost {
    display: none !important;
}

.age-world-map-layer--highlight .age-world-city-highlight-path.is-plan-anchor,
.age-world-map-layer--highlight .age-world-city-highlight-boost.is-plan-anchor {
    opacity: 1 !important;
    fill: rgba(255, 196, 72, 0.28);
    stroke: rgba(255, 217, 120, 1);
    stroke-width: 3px;
    filter: drop-shadow(0 0 8px rgba(255, 196, 72, 0.75));
}

.age-world-map-layer--highlight .age-world-city-highlight-path.is-plan-armed,
.age-world-map-layer--highlight .age-world-city-highlight-boost.is-plan-armed {
    opacity: 1 !important;
    fill: rgba(120, 200, 255, 0.2);
    stroke: rgba(160, 220, 255, 0.95);
    stroke-width: 2px;
}

.age-world-map-layer--highlight .age-world-city-highlight-path.is-plan-anchor-flash,
.age-world-map-layer--highlight .age-world-city-highlight-boost.is-plan-anchor-flash {
    animation: age-map-plan-anchor-city-flash 0.55s ease-out;
}

.age-world-map-layer--highlight .age-world-city-highlight-path.is-search-center-flash,
.age-world-map-layer--highlight .age-world-city-highlight-boost.is-search-center-flash {
    opacity: 1 !important;
    fill: rgba(255, 196, 72, 0.3);
    stroke: rgba(255, 217, 120, 1);
    animation: age-map-search-city-flash 3.2s ease-in-out;
}

@keyframes age-map-search-city-flash {
    0%,
    100% {
        stroke-width: 2px;
        filter: drop-shadow(0 0 6px rgba(255, 196, 72, 0.55));
    }

    50% {
        stroke-width: 4px;
        filter: drop-shadow(0 0 16px rgba(255, 230, 160, 1));
    }
}

.age-world-map-capital-shine-layer {
    pointer-events: none;
}

.age-world-map-frame.is-color-map-on .age-world-map-capital-shine-layer {
    display: none !important;
}

.age-world-map-capital-shine-sweep {
    mix-blend-mode: screen;
    opacity: 0.82;
    transform-box: fill-box;
    transform-origin: center;
    animation: age-world-capital-shine-sweep 4.2s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
    animation-delay: 0.6s;
}

@keyframes age-world-capital-shine-sweep {
    0% {
        transform: translate(-108%, -108%) rotate(-18deg);
        opacity: 0;
    }

    10% {
        opacity: 0.95;
    }

    90% {
        opacity: 0.95;
    }

    100% {
        transform: translate(108%, 108%) rotate(-18deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .age-world-map-capital-shine-layer {
        display: none !important;
    }
}

/* Color map: outline-only gold selection — darker on clicked city, lighter on neighbors. */
.age-world-map-frame.is-color-map-on .age-world-city-highlight-path.is-selected-city,
.age-world-map-frame.is-color-map-on .age-world-city-highlight-boost.is-selected-city {
    fill: transparent !important;
    stroke: rgba(168, 112, 8, 1) !important;
    stroke-width: 3px;
    filter: drop-shadow(0 0 6px rgba(168, 112, 8, 0.55));
}

.age-world-map-frame.is-color-map-on .age-world-city-highlight-path.is-bordering-neighbor,
.age-world-map-frame.is-color-map-on .age-world-city-highlight-boost.is-bordering-neighbor {
    fill: transparent !important;
    stroke: rgba(255, 210, 96, 1) !important;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 4px rgba(255, 210, 96, 0.45));
}

@keyframes age-map-plan-anchor-city-flash {
    0% {
        stroke-width: 2px;
        filter: drop-shadow(0 0 4px rgba(255, 217, 120, 0.5));
    }
    40% {
        stroke-width: 4px;
        filter: drop-shadow(0 0 14px rgba(255, 230, 160, 1));
    }
    100% {
        stroke-width: 3px;
        filter: drop-shadow(0 0 8px rgba(255, 196, 72, 0.75));
    }
}

#age-page-canvas .age-world-map-frame .age-world-map-settlement-bg {
    position: absolute;
    top: var(--game-region-map-bezel);
    left: var(--game-region-map-bezel);
    width: calc(100% - (2 * var(--game-region-map-bezel)));
    height: calc(100% - (2 * var(--game-region-map-bezel)));
    max-width: none;
    max-height: none;
    display: block;
    box-sizing: border-box;
    object-fit: fill;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.22),
        inset 0 0 24px rgba(0, 0, 0, 0.35);
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
}

#age-page-canvas .age-world-map-frame .age-world-map-settlement-bg[hidden] {
    display: none !important;
}

/* Border hierarchy: region (thickest) > nation > city; opacity driven by RIFT zoom + viewport fade. */
.age-world-map-layer--regions .age-world-region-border {
    opacity: 0;
    visibility: hidden;
}

.age-world-map-layer--regions path {
    fill: transparent;
    stroke: rgba(12, 8, 4, 0.88);
    stroke-width: 3px;
    vector-effect: non-scaling-stroke;
}

.age-world-map-layer--nations path {
    fill: transparent;
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

.age-world-map-layer--cities .age-world-city-border-path {
    fill: transparent;
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2.5px;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.age-world-map-layer--water-routes,
.age-hq-layer--water-routes {
    pointer-events: none;
}

.age-world-water-route-path {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.age-world-water-route-path--track {
    stroke: rgba(72, 148, 220, 0.22);
    stroke-width: 3px;
}

.age-world-water-route-path--march {
    stroke: rgba(136, 210, 255, 0.92);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 2 10;
    animation: age-world-water-route-march 1.1s linear infinite;
    filter: drop-shadow(0 0 4px rgba(96, 180, 255, 0.45));
}

.age-world-water-route-cost-bg {
    fill: rgba(8, 18, 32, 0.82);
    stroke: rgba(136, 210, 255, 0.55);
    stroke-width: 1px;
}

.age-world-water-route-cost-label {
    fill: #dff4ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    pointer-events: none;
}

@keyframes age-world-water-route-march {
    to {
        stroke-dashoffset: -24;
    }
}

@media (prefers-reduced-motion: reduce) {
    .age-world-water-route-path--march {
        animation: none;
        stroke-dasharray: 4 8;
    }
}

.age-world-map-player-pins {
    position: absolute;
    inset: var(--game-region-map-bezel);
    pointer-events: none;
    z-index: 9;
    overflow: visible;
}

/* Age — animated fog of war vignette on world + HQ planning maps */
.age-map-edge-fog {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
    border-radius: 4px;
}

.age-map-edge-fog--world {
    inset: var(--game-region-map-bezel);
}

.age-map-edge-fog--hq {
    inset: 0;
    border-radius: 6px;
}

.age-map-edge-fog__vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(4, 3, 2, 0.58) 7%,
            rgba(4, 3, 2, 0.24) 11%,
            transparent 17%
        ),
        linear-gradient(
            to left,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(4, 3, 2, 0.58) 7%,
            rgba(4, 3, 2, 0.24) 11%,
            transparent 17%
        );
    box-shadow:
        inset 38px 0 52px -18px rgba(0, 0, 0, 0.46),
        inset -38px 0 52px -18px rgba(0, 0, 0, 0.46);
}

.age-map-edge-fog__mist {
    position: absolute;
    border-radius: 50%;
    filter: blur(24px);
    mix-blend-mode: multiply;
    will-change: transform, opacity;
}

.age-map-edge-fog__mist--north,
.age-map-edge-fog__mist--south {
    display: none !important;
}

.age-map-edge-fog__mist--east {
    top: 12%;
    right: -42%;
    width: 30%;
    height: 76%;
    background: radial-gradient(ellipse at 0% 50%, rgba(10, 8, 6, 0.78) 0%, rgba(2, 2, 2, 0.48) 38%, transparent 58%);
    animation: age-map-fog-roll-e 12s ease-in-out infinite;
}

.age-map-edge-fog__mist--west {
    top: 10%;
    left: -42%;
    width: 30%;
    height: 78%;
    background: radial-gradient(ellipse at 100% 50%, rgba(10, 8, 6, 0.78) 0%, rgba(2, 2, 2, 0.48) 38%, transparent 58%);
    animation: age-map-fog-roll-w 10s ease-in-out infinite;
}

.age-map-edge-fog__mist--drift-a,
.age-map-edge-fog__mist--drift-b {
    display: none !important;
}

@keyframes age-map-fog-roll-n {
    0%, 100% { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.62; }
    50% { transform: translate3d(5%, 6%, 0) scale(1.06); opacity: 0.92; }
}

@keyframes age-map-fog-roll-s {
    0%, 100% { transform: translate3d(3%, 0, 0) scale(1.02); opacity: 0.64; }
    50% { transform: translate3d(-6%, -5%, 0) scale(1.08); opacity: 0.94; }
}

@keyframes age-map-fog-roll-e {
    0%, 100% { transform: translate3d(0, -3%, 0) scale(1); opacity: 0.44; }
    50% { transform: translate3d(-5%, 4%, 0) scale(1.05); opacity: 0.68; }
}

@keyframes age-map-fog-roll-w {
    0%, 100% { transform: translate3d(0, 4%, 0) scale(1.01); opacity: 0.44; }
    50% { transform: translate3d(6%, -3%, 0) scale(1.07); opacity: 0.66; }
}

@keyframes age-map-fog-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.52; }
    33% { transform: translate3d(14%, 8%, 0) scale(1.12); opacity: 0.78; }
    66% { transform: translate3d(6%, -4%, 0) scale(0.96); opacity: 0.58; }
}

@keyframes age-map-fog-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); opacity: 0.5; }
    40% { transform: translate3d(-12%, -6%, 0) scale(1.1); opacity: 0.76; }
    75% { transform: translate3d(-4%, 5%, 0) scale(0.94); opacity: 0.56; }
}

@media (prefers-reduced-motion: reduce) {
    .age-map-edge-fog__mist {
        animation: none !important;
        opacity: 0.62;
    }

    .age-world-map-plan-draft-arrows-layer path.age-world-map-plan-arrow.is-marching,
    .age-world-map-plan-draft-arrows-layer path.age-world-map-plan-arrow-ribbon.is-marching,
    .age-world-map-plan-draft-arrows-layer path.age-world-map-plan-arrow.is-draft,
    .age-world-map-plan-draft-arrows-layer path.age-world-map-plan-arrow.is-new,
    .age-world-map-plan-draft-arrows-layer path.age-world-map-plan-arrow-ribbon.is-new {
        animation: none;
        stroke-dasharray: 10 8;
    }

    .age-world-map-plan-rally-pulse__wave {
        animation: none;
        opacity: 0.42;
        transform: scale(0.92);
    }
}

.age-world-map-player-pin {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    pointer-events: none;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.72));
}

.age-world-map-player-pin--local {
    z-index: 3;
    transform-origin: 50% 100%;
    animation: age-world-map-player-pin-pulse 3.2s ease-in-out infinite;
}

@keyframes age-world-map-player-pin-pulse {
    0%,
    100% {
        transform: translate(-50%, -100%) scale(1);
    }

    50% {
        transform: translate(-50%, -100%) scale(1.14);
    }
}

.age-world-map-player-pin-image {
    display: block;
    width: 40px;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.age-world-map-player-pin--local .age-world-map-player-pin-image {
    width: 44px;
}

@media (prefers-reduced-motion: reduce) {
    .age-world-map-player-pin--local {
        animation: none;
    }
}

.age-world-map-player-pin--taxi-aura::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 72%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 214, 96, 0.55) 0%, rgba(201, 162, 39, 0.2) 48%, transparent 72%);
    box-shadow: 0 0 16px rgba(255, 210, 80, 0.65), 0 0 28px rgba(201, 162, 39, 0.35);
    animation: age-world-map-taxi-aura 2.4s ease-in-out infinite;
    z-index: -1;
}

@keyframes age-world-map-taxi-aura {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.age-world-map-labels-host {
    position: absolute;
    inset: var(--game-region-map-bezel);
    pointer-events: none;
    z-index: 4;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
}

.age-world-map-labels-host .age-world-map-label--city {
    pointer-events: auto;
    cursor: pointer;
}

.age-world-map-label {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 160px;
    color: #f4e6c8;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92);
}

.age-world-map-label-title {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 9999px;
    border: 1px solid rgba(255, 217, 120, 0.52);
    background: rgba(8, 6, 3, 0.78);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.age-world-map-label--region .age-world-map-label-title {
    font-size: 0.82rem;
    padding: 0.24em 0.62em;
    letter-spacing: 0.08em;
    border-color: rgba(255, 217, 120, 0.45);
}

.age-world-map-label--nation .age-world-map-label-title {
    font-size: 0.95rem;
    padding: 0.3em 0.75em;
}

.age-world-map-label--city {
    width: max-content;
    max-width: none;
}

.age-world-map-label--city .age-world-map-label-title {
    font-size: 0.58rem;
    padding: 0.095rem 0.258rem;
    border-color: rgba(244, 230, 200, 0.45);
    white-space: nowrap;
}

.age-world-map-label--city .age-world-map-label-sub {
    font-size: 0.56rem;
    margin-top: 2px;
    line-height: 1.15;
    white-space: nowrap;
}

.age-world-map-label--nation .age-world-map-label-title,
.age-world-map-label--nation .age-world-map-label-sub {
    white-space: nowrap;
}

.age-world-map-label-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.62rem;
    line-height: 1.25;
    color: rgba(244, 230, 200, 0.88);
}

.age-world-map-continent-label {
    position: absolute;
    right: calc(var(--game-region-map-bezel, 12px) + 10px);
    bottom: calc(var(--game-region-map-bezel, 12px) + 10px);
    left: auto;
    top: auto;
    display: block;
    pointer-events: none;
    z-index: 7;
    opacity: 1;
    visibility: visible;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.age-world-map-continent-label-title {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.8rem, 1.6vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffd978;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
    padding: 0.16em 0.5em;
    border-radius: 9999px;
    border: 1px solid rgba(255, 217, 120, 0.62);
    background: rgba(8, 6, 3, 0.72);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.age-world-city-drawer[hidden] {
    display: none !important;
}

.age-world-city-drawer:not([hidden]) {
    display: block;
    pointer-events: auto;
    z-index: 50;
    animation: age-world-city-drawer-in 0.22s ease-out;
}

@keyframes age-world-city-drawer-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.age-world-city-drawer {
    position: absolute;
    left: 12px;
    bottom: 12px;
    top: auto;
    right: auto;
    z-index: 20;
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
}

.age-world-city-drawer-shell,
.age-world-city-drawer-shell * {
    pointer-events: auto;
}

.age-world-city-drawer-shell {
    display: flex;
    align-items: stretch;
}

.age-world-city-drawer-side-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    padding-top: 42px;
    z-index: 1;
}

.age-world-city-drawer-side-tabs[hidden],
.age-world-city-drawer.is-masked-city .age-world-city-drawer-side-tabs {
    display: none !important;
    pointer-events: none !important;
}

.age-world-city-drawer.is-masked-city #age-world-city-drawer-panel-defenses {
    display: none !important;
}

.age-world-city-drawer.is-masked-city .age-world-city-drawer-box {
    border-radius: 8px;
}

.age-world-city-drawer-side-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 12px 8px;
    border: 1px solid rgba(197, 160, 89, 0.34);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 24%),
        linear-gradient(195deg, rgba(22, 18, 12, 0.96) 0%, rgba(8, 6, 4, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.08),
        2px 0 10px rgba(0, 0, 0, 0.28);
    color: rgba(197, 160, 89, 0.88);
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    cursor: pointer;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.age-world-city-drawer-side-tab:hover {
    color: #f4e6c8;
    border-color: rgba(255, 215, 0, 0.42);
}

.age-world-city-drawer-side-tab.is-active {
    color: #ffd978;
    border-color: rgba(255, 215, 0, 0.52);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.12) 0%, transparent 28%),
        linear-gradient(195deg, rgba(28, 22, 14, 0.98) 0%, rgba(10, 8, 6, 0.99) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.16);
}

.age-world-city-drawer-box {
    width: min(320px, calc(100vw - 72px));
    max-height: min(460px, calc(100vh - 24px));
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 28%),
        linear-gradient(165deg, rgba(28, 22, 14, 0.98) 0%, rgba(8, 6, 4, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.14),
        0 16px 40px rgba(0, 0, 0, 0.72);
}

.age-world-city-drawer-chrome {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(460px, calc(100vh - 24px));
    padding: 14px 14px 16px;
    overflow: auto;
}

.age-world-city-drawer-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.age-world-city-drawer-panel[hidden] {
    display: none !important;
}

.age-world-city-drawer-panel .age-world-city-drawer-section-head {
    margin-top: 2px;
}

.age-world-city-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.16);
}

.age-world-city-drawer-identity {
    min-width: 0;
    flex: 1;
}

.age-world-city-drawer-eyebrow {
    margin: 0 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(197, 160, 89, 0.88);
}

.age-world-city-drawer-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.age-world-city-drawer-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.12rem;
    line-height: 1.2;
    color: #ffd978;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.age-world-city-drawer-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18em 0.55em;
    border-radius: 9999px;
    border: 1px solid rgba(255, 217, 120, 0.45);
    background: rgba(255, 215, 0, 0.08);
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f4e6c8;
    white-space: nowrap;
}

.age-world-city-drawer-capital-badge {
    margin: 6px 0 0;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffe6a8;
}

.age-world-city-drawer-capital-badge::before {
    content: '\265B ';
    color: #ffd978;
}

.age-world-city-drawer.is-capital .age-world-city-drawer-box {
    border-color: rgba(255, 215, 0, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.2),
        0 0 0 1px rgba(255, 215, 0, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.72);
}

.age-world-city-drawer[data-settlement-tier="kingdom"] .age-world-city-drawer-tier-badge,
.age-world-city-drawer[data-settlement-tier="citadel"] .age-world-city-drawer-tier-badge {
    border-color: rgba(255, 230, 160, 0.72);
    background: rgba(255, 215, 0, 0.16);
    color: #ffe9b0;
}

.age-world-city-drawer[data-settlement-tier="village"] .age-world-city-drawer-tier-badge {
    border-color: rgba(180, 170, 150, 0.45);
    background: rgba(120, 110, 95, 0.22);
    color: #d8ccb4;
}

.age-world-city-drawer-close,
.age-world-battle-report-close {
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    color: #c5a059;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
    min-width: 30px;
    min-height: 30px;
    transition: background 0.15s ease, color 0.15s ease;
}

.age-world-city-drawer-close:hover,
.age-world-battle-report-close:hover {
    background: rgba(255, 215, 0, 0.12);
    color: #ffd978;
}

.age-world-city-drawer-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.age-world-city-drawer-stat {
    margin: 0;
    padding: 8px 9px;
    border-radius: 7px;
    border: 1px solid rgba(255, 215, 0, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%),
        rgba(0, 0, 0, 0.28);
}

.age-world-city-drawer-stat--holder,
.age-world-city-drawer-stat--capture {
    grid-column: 1 / -1;
}

.age-world-city-drawer-stat-label {
    margin: 0 0 3px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(168, 144, 96, 0.95);
}

.age-world-city-drawer-stat-value {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.25;
    color: #f0e2c8;
}

.age-world-city-drawer-stat--holder .age-world-city-drawer-stat-value {
    color: #ffe4a0;
    font-weight: 600;
}

.age-world-city-drawer-stat--capture-empty .age-world-city-drawer-stat-value,
.age-world-city-drawer-stat-value--empty {
    color: rgba(168, 144, 96, 0.72);
    font-style: italic;
    font-weight: 400;
}

.age-world-battle-report-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.age-world-battle-report-empty {
    margin: 0;
    font-style: italic;
    color: rgba(232, 220, 200, 0.78);
}

.age-world-city-drawer-actions {
    display: flex;
}

.age-world-city-drawer-movement-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.age-world-city-drawer-movement-status {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(120, 200, 160, 0.34);
    background: rgba(12, 28, 22, 0.82);
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(210, 244, 224, 0.94);
}

.age-world-city-drawer-movement-status[hidden] {
    display: none;
}

.age-world-city-action-btn {
    width: 100%;
    border-radius: 7px;
    padding: 10px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.age-world-city-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.age-world-city-action-btn--travel {
    border: 1px solid rgba(120, 200, 160, 0.5);
    background: linear-gradient(180deg, rgba(120, 200, 160, 0.18) 0%, rgba(80, 140, 110, 0.08) 100%);
    color: #b8f0d0;
}

.age-world-city-action-btn--travel:hover:not(:disabled) {
    background: rgba(120, 200, 160, 0.24);
    border-color: rgba(120, 200, 160, 0.66);
}

.age-world-city-action-btn--assault {
    border: 1px solid rgba(220, 90, 70, 0.52);
    background: linear-gradient(180deg, rgba(220, 90, 70, 0.2) 0%, rgba(120, 40, 30, 0.08) 100%);
    color: #ffb8a8;
}

.age-world-city-action-btn--assault:hover:not(:disabled) {
    background: rgba(220, 90, 70, 0.28);
    border-color: rgba(220, 90, 70, 0.68);
}

.age-world-city-action-btn--transfer {
    border: 1px solid rgba(180, 150, 255, 0.48);
    background: linear-gradient(180deg, rgba(150, 120, 220, 0.18) 0%, rgba(90, 70, 140, 0.08) 100%);
    color: #dcc8ff;
}

.age-world-city-action-btn--transfer:hover:not(:disabled) {
    background: rgba(150, 120, 220, 0.24);
    border-color: rgba(180, 150, 255, 0.64);
}

.age-world-city-action-btn--scout {
    border: 1px solid rgba(255, 200, 96, 0.48);
    background: linear-gradient(180deg, rgba(255, 200, 96, 0.16) 0%, rgba(120, 90, 40, 0.08) 100%);
    color: #ffe4a8;
}

.age-world-city-action-btn--scout:hover:not(:disabled) {
    background: rgba(255, 200, 96, 0.22);
    border-color: rgba(255, 200, 96, 0.64);
}

.age-world-city-drawer-scout-intel {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 200, 96, 0.28);
    border-radius: 6px;
    background: rgba(24, 18, 8, 0.72);
}

.age-world-city-drawer-scout-intel[hidden] {
    display: none;
}

.age-world-city-drawer-scout-intel-title {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd978;
}

.age-world-city-drawer-scout-intel-copy {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(240, 228, 200, 0.88);
}

.age-world-city-drawer-assault-risk {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(220, 96, 72, 0.42);
    border-radius: 6px;
    background: rgba(32, 10, 8, 0.78);
}

.age-world-city-drawer-assault-risk[hidden] {
    display: none;
}

.age-assault-risk-eyebrow {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffb0a0;
}

.age-assault-risk-copy {
    margin: 0 0 8px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 220, 210, 0.9);
}

.age-assault-risk-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: 0 0 8px;
    font-size: 0.68rem;
}

.age-assault-risk-stats dt {
    margin: 0;
    color: rgba(255, 200, 180, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.age-assault-risk-stats dd {
    margin: 0;
    color: #ffe8e0;
    font-weight: 600;
}

.age-assault-risk-note {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.4;
    color: rgba(240, 200, 190, 0.72);
}

.age-army-groups-assault-risk {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(220, 96, 72, 0.35);
    border-radius: 4px;
    background: rgba(24, 8, 6, 0.55);
    font-size: 0.68rem;
    line-height: 1.4;
    color: rgba(255, 220, 210, 0.9);
}

.age-world-city-action-cost {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    opacity: 0.88;
}

.age-world-battle-report-btn {
    width: 100%;
    border: 1px solid rgba(255, 215, 0, 0.42);
    border-radius: 7px;
    padding: 10px 12px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.14) 0%, rgba(255, 215, 0, 0.04) 100%);
    color: #ffd978;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.age-world-battle-report-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.58);
}

.age-world-city-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.age-world-city-drawer-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.age-world-city-drawer-section-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c5a059;
    white-space: nowrap;
}

.age-world-city-drawer-section-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.35), rgba(255, 215, 0, 0));
}

.age-world-city-drawer-structures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.age-world-structure-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 8px 6px;
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, transparent 100%),
        rgba(0, 0, 0, 0.32);
    color: #ffd978;
    cursor: default;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.age-world-structure-card:hover {
    border-color: rgba(255, 215, 0, 0.48);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%),
        rgba(0, 0, 0, 0.38);
}

.age-world-structure-card-glyph {
    font-size: 1.15rem;
    line-height: 1;
}

.age-world-structure-card-label {
    font-size: 0.64rem;
    line-height: 1.25;
    color: #e8dcc8;
}

.age-world-city-drawer-fog {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 11px;
    border-radius: 7px;
    border: 1px dashed rgba(168, 144, 96, 0.45);
    background: rgba(0, 0, 0, 0.24);
    font-size: 0.76rem;
    line-height: 1.35;
    font-style: italic;
    color: rgba(232, 220, 200, 0.82);
}

.age-world-city-drawer-fog-icon {
    flex-shrink: 0;
    font-style: normal;
    opacity: 0.85;
}

.age-world-city-drawer-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px;
    border-radius: 7px;
    border: 1px dashed rgba(255, 215, 0, 0.18);
    font-size: 0.78rem;
    text-align: center;
    color: rgba(232, 220, 200, 0.7);
}

.age-world-battle-report-modal[hidden] {
    display: none !important;
}

.age-world-battle-report-modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.age-world-battle-report-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.age-world-battle-report-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.age-world-battle-report-dialog {
    position: relative;
    width: min(480px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(28, 22, 14, 0.98), rgba(8, 6, 4, 0.99));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.age-world-battle-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.age-world-battle-report-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: #ffd978;
}

.age-world-battle-report-body {
    font-size: 0.86rem;
    color: #e8dcc8;
    line-height: 1.5;
}

.age-world-battle-report-lead {
    font-family: 'Cinzel', serif;
    color: #ffd978;
}

.age-world-battle-report-note {
    margin-top: 12px;
    font-size: 0.78rem;
    color: rgba(232, 220, 200, 0.7);
}

.age-battle-report-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.age-battle-report-outcome {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: #ffd978;
}

.age-battle-report-outcome--attacker,
.age-battle-report-outcome--commander {
    color: #8fe48f;
}

.age-battle-report-outcome--defender,
.age-battle-report-outcome--npc {
    color: #ffb3b3;
}

.age-battle-report-detail,
.age-battle-report-location,
.age-battle-report-opponent {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(232, 220, 200, 0.82);
}

.age-battle-report-section-title,
.age-battle-report-side-title {
    margin: 0 0 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c5a059;
}

.age-battle-report-reward-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.age-battle-report-reward-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.14);
    background: rgba(0, 0, 0, 0.24);
    font-size: 0.76rem;
}

.age-battle-report-unit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}

.age-battle-report-unit-table th,
.age-battle-report-unit-table td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    text-align: left;
}

.age-battle-report-unit-table th {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(197, 160, 89, 0.95);
    font-size: 0.58rem;
}

.age-battle-report-unit-name {
    color: #ffd978;
    font-weight: 600;
}

.age-battle-report-unit-class {
    color: rgba(232, 220, 200, 0.72);
}

.age-battle-report-unit-count,
.age-battle-report-unit-stat {
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.age-battle-report-empty-side {
    margin: 0;
    font-size: 0.74rem;
    color: rgba(232, 220, 200, 0.68);
}

.age-battle-report-promotion-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.76rem;
    color: rgba(232, 220, 200, 0.88);
}

.age-battle-report-promoted-note {
    margin: 0 0 6px;
    font-size: 0.76rem;
    color: #8fe48f;
}

.age-battle-report-unit-row--commander {
    background: rgba(255, 215, 0, 0.06);
}

.age-battle-report-unit-row--commander .age-battle-report-unit-name {
    color: #ffe8a8;
    font-weight: 700;
}

.age-battle-report-commander-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255, 215, 0, 0.42);
    font-family: 'Cinzel', serif;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd978;
    vertical-align: middle;
}

.age-battle-report-commander-notes {
    margin-top: 8px;
    display: grid;
    gap: 4px;
}

.age-battle-report-commander-note {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(232, 220, 200, 0.82);
    line-height: 1.4;
}

.age-battle-report-commander-note--killed {
    color: #ffb3b3;
}

.age-battle-report-commander-note--injured {
    color: #ffd978;
}

.age-battle-report-kill-pressure {
    opacity: 0.78;
    font-size: 0.68rem;
}

.age-battle-report-section--commander-kills {
    border-color: rgba(255, 120, 120, 0.35);
}

.age-battle-report-kill-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.76rem;
    color: #ffb3b3;
}

#age-page-canvas[data-age-view="city"] #age-world-map-svg,
#age-page-canvas[data-age-view="city"] #age-world-map-canvas,
#age-page-canvas[data-age-view="city"] #age-world-map-highlight-canvas,
#age-page-canvas[data-age-view="city"] .age-world-map-labels-host,
#age-page-canvas[data-age-view="city"] .age-world-map-player-pins,
#age-page-canvas[data-age-view="city"] .age-world-map-continent-label,
#age-page-canvas[data-age-view="city"] .age-world-map-terrain-controls,
#age-page-canvas[data-age-view="city"] .age-world-city-drawer,
#age-page-canvas[data-age-view="city"] #age-world-map-region-layer,
#age-page-canvas[data-age-view="city"] #age-world-map-nation-layer {
    display: none !important;
}

/* Age — Chronicles Battle Pass modal */
body.is-age-chronicles-battle-pass-open {
    overflow: hidden;
}

.age-age-center-modal.age-chronicles-battle-pass-modal {
    z-index: 2147483646;
}

.age-age-center-modal.age-chronicles-battle-pass-modal.is-open {
    z-index: 2147483646 !important;
}

.age-chronicles-battle-pass-modal {
    position: fixed;
    inset: 0;
    z-index: 13070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.age-chronicles-battle-pass-modal[hidden]:not(.is-open) {
    display: none !important;
}

.age-chronicles-battle-pass-modal.is-open {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.age-chronicles-battle-pass-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 2, 0.78);
    backdrop-filter: blur(2px);
}

.age-chronicles-battle-pass-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 75vw;
    height: 75vh;
    max-width: 75vw;
    max-height: 75vh;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 10px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 200, 96, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 88% 100%, rgba(120, 90, 220, 0.08) 0%, transparent 38%),
        linear-gradient(180deg, rgba(24, 18, 12, 0.99) 0%, rgba(6, 5, 4, 0.99) 100%);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 215, 0, 0.12);
    overflow: hidden;
}

.age-chronicles-battle-pass-dialog.is-reward-detail-open .age-chronicles-battle-pass-header,
.age-chronicles-battle-pass-dialog.is-reward-detail-open .age-chronicles-battle-pass-body {
    filter: brightness(0.42);
    pointer-events: none;
}

.age-chronicles-battle-pass-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.28);
    flex: 0 0 auto;
}

.age-chronicles-battle-pass-eyebrow {
    margin: 0 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.72);
}

.age-chronicles-battle-pass-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: #ffd978;
}

.age-chronicles-battle-pass-close {
    border: 1px solid rgba(184, 144, 48, 0.35);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #f0e4c8;
    width: 34px;
    height: 34px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.age-chronicles-battle-pass-close:hover,
.age-chronicles-battle-pass-close:focus-visible {
    border-color: rgba(255, 215, 0, 0.55);
    outline: none;
}

.age-chronicles-battle-pass-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px 16px 16px;
    overflow: hidden;
}

.age-chronicles-bp-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(184, 144, 48, 0.32);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 200, 96, 0.08) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(150, 120, 220, 0.08) 100%);
    flex: 0 0 auto;
}

.age-chronicles-bp-hero-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 72px;
    padding: 8px 10px;
    border: 2px solid rgba(255, 215, 0, 0.55);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(48, 36, 18, 0.95) 0%, rgba(12, 10, 6, 0.98) 100%);
    box-shadow:
        0 0 18px rgba(255, 200, 96, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.age-chronicles-bp-hero-badge-label {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.72);
}

.age-chronicles-bp-hero-badge-value {
    font-family: 'Cinzel', serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    color: #ffd978;
    text-shadow: 0 0 12px rgba(255, 200, 96, 0.35);
}

.age-chronicles-bp-hero-copy {
    min-width: 0;
}

.age-chronicles-bp-level-readout {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #f1e0ac;
}

.age-chronicles-bp-xp-readout {
    margin: 4px 0 0;
    font-size: 0.74rem;
    color: rgba(232, 220, 200, 0.82);
}

.age-chronicles-bp-progress-track {
    margin-top: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(184, 144, 48, 0.22);
    overflow: hidden;
}

.age-chronicles-bp-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(120, 200, 160, 0.85) 0%, rgba(255, 217, 120, 0.98) 55%, rgba(255, 180, 80, 1) 100%);
    box-shadow: 0 0 10px rgba(255, 200, 96, 0.35);
}

.age-chronicles-bp-hero-tracks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.age-chronicles-bp-hero-track {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.age-chronicles-bp-hero-track--free {
    border: 1px solid rgba(184, 144, 48, 0.42);
    color: rgba(255, 217, 120, 0.92);
    background: rgba(0, 0, 0, 0.35);
}

.age-chronicles-bp-hero-track--premium {
    border: 1px solid rgba(255, 200, 96, 0.5);
    color: #ffe4a8;
    background: linear-gradient(90deg, rgba(72, 52, 18, 0.72) 0%, rgba(24, 18, 8, 0.92) 100%);
    box-shadow: 0 0 12px rgba(255, 200, 96, 0.14);
}

.age-chronicles-bp-owner-note,
.age-chronicles-bp-premium-note {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgba(184, 144, 48, 0.24);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(240, 228, 200, 0.88);
    flex: 0 0 auto;
}

.age-chronicles-bp-chart {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    flex: 1 1 auto;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.42) 100%);
}

.age-chronicles-bp-lane-labels {
    display: grid;
    grid-template-rows: 72px minmax(100px, 1fr) 3px minmax(100px, 1fr);
    gap: 0;
    border-right: 1px solid rgba(184, 144, 48, 0.24);
    background: rgba(0, 0, 0, 0.38);
}

.age-chronicles-bp-lane-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    text-align: center;
}

.age-chronicles-bp-lane-label--levels {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(184, 144, 48, 0.14);
}

.age-chronicles-bp-lane-label--free {
    background: linear-gradient(180deg, rgba(120, 200, 160, 0.07) 0%, rgba(120, 200, 160, 0.02) 100%);
}

.age-chronicles-bp-lane-label--premium {
    background: linear-gradient(180deg, rgba(255, 200, 96, 0.08) 0%, rgba(255, 200, 96, 0.03) 100%);
}

.age-chronicles-bp-track-divider {
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(184, 144, 48, 0.05) 0%,
        rgba(255, 217, 120, 0.55) 18%,
        rgba(255, 217, 120, 0.75) 50%,
        rgba(255, 217, 120, 0.55) 82%,
        rgba(184, 144, 48, 0.05) 100%
    );
    border-top: 1px solid rgba(255, 215, 0, 0.28);
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 10px rgba(255, 200, 96, 0.12);
}

.age-chronicles-bp-lane-labels .age-chronicles-bp-track-divider {
    width: 100%;
}

.age-chronicles-bp-lane-label-kicker {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(232, 220, 200, 0.55);
}

.age-chronicles-bp-lane-label-title {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.9);
}

.age-chronicles-bp-lane-label--premium .age-chronicles-bp-lane-label-title {
    color: #ffdc98;
}

.age-chronicles-bp-chart-scroll {
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

.age-chronicles-bp-chart-scroll .age-chronicles-bp-chart-canvas {
    flex: 1 1 auto;
    height: 100%;
}

.age-chronicles-bp-chart-scroll::-webkit-scrollbar {
    height: 10px;
}

.age-chronicles-bp-chart-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
}

.age-chronicles-bp-chart-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(184, 144, 48, 0.75) 0%, rgba(255, 217, 120, 0.85) 100%);
}

.age-chronicles-bp-chart-canvas {
    position: relative;
    display: grid;
    grid-template-rows: 72px minmax(100px, 1fr) 3px minmax(100px, 1fr);
    gap: 0;
    min-width: min-content;
    min-height: 100%;
    padding: 0;
}

.age-chronicles-bp-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 0 18px;
    box-sizing: border-box;
}

.age-chronicles-bp-row--levels {
    padding-top: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.12);
}

.age-chronicles-bp-row--free {
    background: linear-gradient(180deg, rgba(120, 200, 160, 0.05) 0%, rgba(120, 200, 160, 0.015) 100%);
}

.age-chronicles-bp-row--premium {
    padding-bottom: 14px;
    background: linear-gradient(180deg, rgba(255, 200, 96, 0.06) 0%, rgba(255, 200, 96, 0.02) 100%);
}

.age-chronicles-bp-chart-canvas .age-chronicles-bp-track-divider {
    margin: 0 18px;
}

.age-chronicles-bp-row-track {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100%;
}

.age-chronicles-bp-progress-spine {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

.age-chronicles-bp-progress-spine-track,
.age-chronicles-bp-progress-spine-fill {
    position: absolute;
    inset: 0;
    border-radius: 999px;
}

.age-chronicles-bp-progress-spine-track {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(184, 144, 48, 0.18);
}

.age-chronicles-bp-progress-spine-fill {
    width: 0;
    background: linear-gradient(90deg, rgba(120, 200, 160, 0.9) 0%, rgba(255, 217, 120, 0.98) 100%);
    box-shadow: 0 0 12px rgba(255, 200, 96, 0.35);
}

.age-chronicles-bp-level-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 76px;
    width: 76px;
    height: 100%;
    padding: 6px 5px;
    box-sizing: border-box;
}

.age-chronicles-bp-level-cell.is-milestone {
    flex-basis: 108px;
    width: 108px;
}

.age-chronicles-bp-level-cell.is-current .age-chronicles-bp-node {
    transform: scale(1.08);
}

.age-chronicles-bp-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 auto;
    transition: transform 0.18s ease;
}

.age-chronicles-bp-node-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(184, 144, 48, 0.45);
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12) 0%, rgba(12, 10, 8, 0.95) 72%);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.08);
}

.age-chronicles-bp-node-num {
    position: relative;
    z-index: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(240, 228, 200, 0.88);
}

.age-chronicles-bp-node.is-milestone-node .age-chronicles-bp-node-ring {
    border-color: rgba(255, 200, 96, 0.62);
    box-shadow:
        0 0 10px rgba(255, 200, 96, 0.18),
        inset 0 0 0 1px rgba(255, 215, 0, 0.12);
}

.age-chronicles-bp-node.is-completed .age-chronicles-bp-node-ring {
    border-color: rgba(120, 200, 160, 0.72);
    background: radial-gradient(circle at 30% 25%, rgba(120, 200, 160, 0.28) 0%, rgba(12, 10, 8, 0.95) 72%);
}

.age-chronicles-bp-node.is-current .age-chronicles-bp-node-ring {
    border-color: rgba(255, 217, 120, 0.95);
    box-shadow:
        0 0 16px rgba(255, 200, 96, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    animation: age-chronicles-bp-node-pulse 1.8s ease-in-out infinite;
}

.age-chronicles-bp-node.is-current .age-chronicles-bp-node-num {
    color: #ffd978;
}

@keyframes age-chronicles-bp-node-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 200, 96, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 22px rgba(255, 200, 96, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
}

.age-chronicles-bp-cell-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 72px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 5px;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(184, 144, 48, 0.28);
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease,
        opacity 0.16s ease;
}

.age-chronicles-bp-level-cell.is-milestone .age-chronicles-bp-cell-slot {
    max-width: 96px;
}

.age-chronicles-bp-cell-slot--premium {
    border-color: rgba(255, 200, 96, 0.32);
    background: linear-gradient(180deg, rgba(48, 36, 16, 0.55) 0%, rgba(10, 8, 5, 0.92) 100%);
}

.age-chronicles-bp-cell-slot.is-milestone {
    border-width: 2px;
}

.age-chronicles-bp-cell-slot.is-compact {
    opacity: 0.78;
}

.age-chronicles-bp-cell-slot.is-pass-start {
    opacity: 1;
    border-style: dashed;
}

.age-chronicles-bp-cell-slot.is-unlocked {
    border-color: rgba(120, 200, 160, 0.55);
    box-shadow: 0 0 12px rgba(120, 200, 160, 0.14);
}

.age-chronicles-bp-cell-slot--premium.is-unlocked {
    border-color: rgba(255, 200, 96, 0.62);
    box-shadow: 0 0 14px rgba(255, 200, 96, 0.18);
}

.age-chronicles-bp-cell-slot.is-premium-locked {
    opacity: 0.66;
}

.age-chronicles-bp-cell-slot:hover,
.age-chronicles-bp-cell-slot:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 215, 0, 0.62);
    box-shadow: 0 0 14px rgba(255, 200, 96, 0.22);
    outline: none;
}

.age-chronicles-bp-cell-slot-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.68rem;
    opacity: 0.72;
    pointer-events: none;
}

.age-chronicles-bp-cell-slot-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 18px;
    height: 18px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.age-chronicles-bp-cell-art-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(184, 144, 48, 0.42);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.28) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.age-chronicles-bp-cell-slot--premium .age-chronicles-bp-cell-art-frame {
    border-color: rgba(255, 200, 96, 0.48);
    background:
        linear-gradient(145deg, rgba(255, 200, 96, 0.12) 0%, rgba(0, 0, 0, 0.32) 100%);
}

.age-chronicles-bp-row-track .age-chronicles-bp-level-cell + .age-chronicles-bp-level-cell {
    border-left: 1px solid rgba(184, 144, 48, 0.08);
}

.age-chronicles-bp-reward-detail {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    box-sizing: border-box;
}

.age-chronicles-bp-reward-detail[hidden] {
    display: none !important;
}

.age-chronicles-bp-reward-detail-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(0, 0, 0, 0.62);
    cursor: pointer;
}

.age-chronicles-bp-reward-detail-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(420px, 100%);
    max-height: calc(100% - 24px);
    padding: 18px 18px 20px;
    border: 1px solid rgba(184, 144, 48, 0.48);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(34, 26, 16, 0.98) 0%, rgba(8, 6, 4, 0.99) 100%);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(255, 200, 96, 0.12);
    overflow: auto;
}

.age-chronicles-bp-reward-detail-panel[data-bp-track="premium"] {
    border-color: rgba(255, 200, 96, 0.55);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(255, 200, 96, 0.18);
}

.age-chronicles-bp-reward-detail-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(184, 144, 48, 0.35);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #f0e4c8;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.age-chronicles-bp-reward-detail-close:hover,
.age-chronicles-bp-reward-detail-close:focus-visible {
    border-color: rgba(255, 215, 0, 0.55);
    outline: none;
}

.age-chronicles-bp-reward-detail-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(280px, 100%);
    aspect-ratio: 1 / 1;
    margin-top: 8px;
}

.age-chronicles-bp-reward-detail-frame,
.age-chronicles-bp-reward-detail-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-sizing: border-box;
}

.age-chronicles-bp-reward-detail-frame {
    border: 2px solid rgba(184, 144, 48, 0.48);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.32) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.35);
}

.age-chronicles-bp-reward-detail-art--premium .age-chronicles-bp-reward-detail-frame {
    border-color: rgba(255, 200, 96, 0.58);
    background:
        linear-gradient(145deg, rgba(255, 200, 96, 0.14) 0%, rgba(0, 0, 0, 0.34) 100%);
}

.age-chronicles-bp-reward-detail-image {
    object-fit: contain;
    border: 2px solid rgba(184, 144, 48, 0.48);
    background: rgba(0, 0, 0, 0.4);
}

.age-chronicles-bp-reward-detail-copy {
    width: 100%;
    text-align: center;
}

.age-chronicles-bp-reward-detail-kicker {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.72);
}

.age-chronicles-bp-reward-detail-title {
    margin: 0 0 8px;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: #ffd978;
}

.age-chronicles-bp-reward-detail-description {
    margin: 0 0 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(240, 228, 200, 0.9);
}

.age-chronicles-bp-reward-detail-status {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(232, 220, 200, 0.82);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(184, 144, 48, 0.22);
}

.age-chronicles-bp-reward-detail-status.is-unlocked {
    color: #b8f0d0;
    border-color: rgba(120, 200, 160, 0.35);
}

.age-chronicles-bp-reward-detail-status.is-premium-locked {
    color: #ffdc98;
    border-color: rgba(255, 200, 96, 0.32);
}

.portal-commander-identity-menu .dropdown-action-item-chronicles-bp {
    color: #ffe4a8;
}

/* RIFT — Discoveries journal workspace */
.rift-discoveries-workspace-modal {
    position: fixed;
    inset: 0;
    z-index: 12060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.rift-discoveries-workspace-modal[hidden] {
    display: none !important;
}

.rift-discoveries-workspace-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 2, 0.8);
    backdrop-filter: blur(2px);
}

.rift-discoveries-workspace-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 92vw);
    height: min(640px, 82vh);
    border: 1px solid rgba(184, 144, 48, 0.52);
    border-radius: 10px;
    background-color: #0a0806;
    background-image:
        linear-gradient(180deg, #221a12 0%, #0a0806 22%),
        radial-gradient(circle at 12% 0%, #2a2014 0%, #0a0806 48%),
        linear-gradient(165deg, #1a1410 0%, #060504 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.1),
        0 24px 64px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    isolation: isolate;
}

.rift-discoveries-workspace-dialog::before,
.rift-discoveries-workspace-dialog::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(255, 215, 0, 0.35);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}

.rift-discoveries-workspace-dialog::before {
    top: 8px;
    left: 8px;
    border-width: 1px 0 0 1px;
}

.rift-discoveries-workspace-dialog::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 1px 1px 0;
}

.rift-discoveries-workspace-header,
.rift-discoveries-workspace-body {
    position: relative;
    z-index: 1;
}

.rift-discoveries-workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.28);
    background-color: #0f0c09;
    flex: 0 0 auto;
}

.rift-discoveries-workspace-eyebrow {
    margin: 0 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.72);
}

.rift-discoveries-workspace-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.28rem;
    letter-spacing: 0.06em;
    color: #ffd978;
}

.rift-discoveries-workspace-close {
    border: 1px solid rgba(184, 144, 48, 0.35);
    border-radius: 4px;
    background: #14100c;
    color: #f0e4c8;
    width: 34px;
    height: 34px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.rift-discoveries-workspace-close:hover,
.rift-discoveries-workspace-close:focus-visible {
    border-color: rgba(255, 215, 0, 0.55);
    outline: none;
}

.rift-discoveries-workspace-body {
    display: grid;
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    background-color: #0a0806;
}

.rift-discoveries-workspace-nav {
    border-right: 1px solid rgba(184, 144, 48, 0.22);
    padding: 12px 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: #080604;
}

.rift-discoveries-workspace-nav-empty {
    padding: 8px 6px 12px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.16);
    margin-bottom: 4px;
}

.rift-discoveries-workspace-local-preview-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(120, 180, 255, 0.35);
    border-radius: 5px;
    background: #142238;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(200, 220, 255, 0.9);
}

.rift-discoveries-workspace-local-preview-banner strong {
    color: rgba(220, 235, 255, 0.98);
    font-weight: 700;
}

.rift-discoveries-workspace-nav-empty p {
    margin: 0 0 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(220, 210, 180, 0.88);
}

.rift-discoveries-workspace-nav-hint {
    font-size: 0.74rem !important;
    color: rgba(200, 190, 160, 0.72) !important;
}

.rift-discoveries-workspace-category-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rift-discoveries-workspace-category-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.rift-discoveries-workspace-category-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: #f0dfae;
}

.rift-discoveries-workspace-tab-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 44px;
}

.rift-discoveries-workspace-tab {
    border: 1px solid transparent;
    border-radius: 3px;
    background: #080604;
    color: rgba(210, 220, 230, 0.9);
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    text-align: left;
    padding: 7px 10px;
    cursor: pointer;
}

.rift-discoveries-workspace-tab:hover,
.rift-discoveries-workspace-tab:focus-visible {
    border-color: rgba(184, 144, 48, 0.3);
    background: #1a1410;
    outline: none;
}

.rift-discoveries-workspace-tab.is-active {
    border-color: rgba(255, 215, 0, 0.45);
    background: #241c12;
    color: #ffe8a8;
}

.rift-discoveries-workspace-category-empty {
    margin: 0;
    padding-left: 44px;
    font-size: 0.74rem;
    color: rgba(180, 170, 150, 0.65);
    font-style: italic;
}

.rift-discoveries-workspace-detail {
    padding: 16px 18px;
    overflow: auto;
    min-height: 0;
    background-color: #0c0a08;
}

.rift-discoveries-workspace-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    text-align: center;
    color: rgba(200, 190, 170, 0.72);
    font-size: 0.88rem;
}

.rift-discoveries-workspace-article-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.2);
}

.rift-discoveries-workspace-article-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

.rift-discoveries-workspace-article-category {
    margin: 0 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.7);
}

.rift-discoveries-workspace-article-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #ffd978;
}

.rift-discoveries-workspace-article-subtitle {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: rgba(200, 190, 170, 0.8);
}

.rift-discoveries-workspace-article-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(232, 226, 210, 0.94);
}

.rift-discoveries-workspace-article-body p {
    margin: 0 0 12px;
}

.rift-discovery-article-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    flex: 1 1 auto;
}

.rift-discovery-article-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rift-discovery-article-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 5px;
    background: #080604;
}

.rift-discovery-article-tab {
    border: 1px solid transparent;
    border-radius: 3px;
    background: #0c0a08;
    color: rgba(210, 200, 175, 0.82);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 14px;
    cursor: pointer;
}

.rift-discovery-article-tab:hover,
.rift-discovery-article-tab:focus-visible {
    color: #ffe8a8;
    border-color: rgba(184, 144, 48, 0.35);
    outline: none;
}

.rift-discovery-article-tab.is-active {
    color: #1a1208;
    background: linear-gradient(180deg, #ffd978 0%, #c5a059 100%);
    border-color: rgba(255, 215, 0, 0.45);
}

.rift-discovery-article-toolbar-spacer {
    flex: 1 1 auto;
}

.rift-discovery-lyrics-translate-btn {
    margin-left: auto;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 4px;
    background: #1a1410;
    color: #ffe8a8;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
    cursor: pointer;
}

.rift-discovery-lyrics-translate-btn:hover,
.rift-discovery-lyrics-translate-btn:focus-visible {
    border-color: rgba(255, 215, 0, 0.65);
    background: rgba(184, 144, 48, 0.22);
    outline: none;
}

.rift-discovery-lyrics-translate-btn[aria-pressed="true"] {
    color: #1a1208;
    background: linear-gradient(180deg, #ffd978 0%, #c5a059 100%);
}

.rift-discovery-article-panel {
    min-height: 200px;
}

.rift-discovery-article-panel.is-hidden {
    display: none !important;
}

.rift-discovery-lyrics-view {
    position: relative;
    min-height: 220px;
}

.rift-discovery-lyrics-parchment,
.rift-discovery-lyrics-english {
    transition: opacity 0.2s ease;
}

.rift-discovery-lyrics-parchment {
    position: relative;
    padding: 22px 24px 26px;
    border-radius: 3px;
    background:
        linear-gradient(165deg, rgba(255, 248, 220, 0.08) 0%, transparent 42%),
        linear-gradient(180deg, #d8c9a0 0%, #c4ad78 38%, #b89d68 100%);
    border: 1px solid rgba(92, 68, 32, 0.45);
    box-shadow:
        inset 0 0 42px rgba(72, 48, 18, 0.22),
        0 8px 22px rgba(0, 0, 0, 0.45),
        2px 3px 0 rgba(40, 28, 10, 0.35);
    transform: rotate(-0.35deg);
}

.rift-discovery-lyrics-parchment::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 27px,
            rgba(92, 68, 32, 0.07) 28px
        );
    opacity: 0.65;
}

.rift-discovery-lyrics-parchment-inner {
    position: relative;
    z-index: 1;
    font-family: 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', 'Apple Chancery', cursive;
    font-size: 1.05rem;
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: rgba(38, 24, 10, 0.82);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
    word-break: break-word;
}

.rift-discovery-lyrics-english {
    padding: 4px 2px;
}

.rift-discovery-lyrics-english-inner {
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(232, 226, 210, 0.94);
}

.rift-discovery-lyrics-view.is-original .rift-discovery-lyrics-english {
    display: none;
}

.rift-discovery-lyrics-view.is-english .rift-discovery-lyrics-parchment {
    display: none;
}

.rift-discoveries-workspace-article {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.rift-discovery-signatory {
    margin-top: 16px !important;
    font-style: italic;
    color: rgba(255, 217, 120, 0.75) !important;
}

/* Discovery unlock — centered cinematic overlay */
.rift-discovery-toast {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 32px);
    box-sizing: border-box;
    pointer-events: none;
}

.rift-discovery-toast[hidden] {
    display: none !important;
}

.rift-discovery-toast:not([hidden]) {
    display: flex !important;
}

.rift-discovery-toast.is-visible,
.rift-discovery-toast.is-exiting {
    pointer-events: auto;
}

.rift-discovery-toast-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 200, 80, 0.07) 0%, transparent 58%),
        rgba(2, 2, 3, 0.78);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.55s ease;
}

.rift-discovery-toast.is-visible .rift-discovery-toast-scrim {
    opacity: 1;
    transition-delay: 0.48s;
}

.rift-discovery-toast.is-exiting .rift-discovery-toast-scrim {
    opacity: 0;
    transition-duration: 0.28s;
}

.rift-discovery-toast-stage {
    position: relative;
    z-index: 1;
    width: min(540px, 100%);
    max-width: 100%;
    transform: scale(0.82) translateY(28px);
    opacity: 0;
    filter: blur(8px);
    will-change: transform, opacity, filter;
}

/* Reveal delay/duration must stay in sync with RIFT discovery toast timing (rift-ui-sfx.js). */
.rift-discovery-toast.is-visible .rift-discovery-toast-stage {
    animation: riftDiscoveryToastReveal 1.1s cubic-bezier(0.2, 1.12, 0.34, 1) 0.48s forwards;
}

.rift-discovery-toast.is-exiting .rift-discovery-toast-stage {
    animation: riftDiscoveryToastHide 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes riftDiscoveryToastReveal {
    0% {
        transform: scale(0.76) translateY(32px);
        opacity: 0;
        filter: blur(10px);
    }
    52% {
        transform: scale(1.05) translateY(-6px);
        opacity: 1;
        filter: blur(0);
    }
    72% {
        transform: scale(0.98) translateY(3px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes riftDiscoveryToastHide {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: scale(0.88) translateY(18px);
        opacity: 0;
        filter: blur(6px);
    }
}

@keyframes riftDiscoveryToastGlowPulse {
    0%, 100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

@keyframes riftDiscoveryToastRaysSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes riftDiscoveryToastIconPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.rift-discovery-toast-panel,
.rift-discovery-toast-panel.bordered-modal-panel {
    position: relative;
    overflow: hidden;
    min-width: min(380px, 100%);
    padding: 22px 26px 20px;
    border: 1px solid rgba(184, 144, 48, 0.52) !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, transparent 20%),
        linear-gradient(165deg, rgba(28, 22, 14, 0.97) 0%, rgba(6, 5, 4, 0.99) 100%) !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.12),
        0 24px 64px rgba(0, 0, 0, 0.82),
        0 0 48px rgba(255, 190, 60, 0.14) !important;
    text-align: center;
}

.rift-discovery-toast-panel::before,
.rift-discovery-toast-panel::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(255, 215, 0, 0.35);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}

.rift-discovery-toast-panel::before {
    top: 8px;
    left: 8px;
    border-width: 1px 0 0 1px;
}

.rift-discovery-toast-panel::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 1px 1px 0;
}

.rift-discovery-toast-glow {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 42% at 50% 38%, rgba(255, 215, 0, 0.22) 0%, transparent 62%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(184, 144, 48, 0.1) 0%, transparent 70%);
    opacity: 0.7;
}

.rift-discovery-toast.is-visible .rift-discovery-toast-glow {
    animation: riftDiscoveryToastGlowPulse 2.6s ease-in-out infinite;
}

.rift-discovery-toast-rays {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 140%;
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 28deg,
        rgba(255, 215, 0, 0.07) 28deg 32deg,
        transparent 32deg 88deg,
        rgba(255, 215, 0, 0.05) 88deg 92deg,
        transparent 92deg 148deg,
        rgba(255, 215, 0, 0.07) 148deg 152deg,
        transparent 152deg 208deg,
        rgba(255, 215, 0, 0.05) 208deg 212deg,
        transparent 212deg 268deg,
        rgba(255, 215, 0, 0.07) 268deg 272deg,
        transparent 272deg 328deg,
        rgba(255, 215, 0, 0.05) 328deg 332deg,
        transparent 332deg 360deg
    );
    transform: translate(-50%, -50%);
}

.rift-discovery-toast.is-visible .rift-discovery-toast-rays {
    opacity: 1;
    animation: riftDiscoveryToastRaysSpin 18s linear infinite;
}

.rift-discovery-toast-dismiss {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    color: #f0e4c8;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.rift-discovery-toast-dismiss:hover,
.rift-discovery-toast-dismiss:focus-visible {
    border-color: rgba(255, 215, 0, 0.7);
    background: rgba(40, 30, 12, 0.65);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
    outline: none;
}

.rift-discovery-toast-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 224, 150, 0.82);
}

.rift-discovery-toast-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.05rem, 2.4vw, 1.28rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;
    color: #ffe9a0;
    text-shadow:
        0 0 24px rgba(255, 200, 60, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.65);
}

.rift-discovery-toast-divider {
    position: relative;
    z-index: 1;
    height: 2px;
    margin: 0 0 16px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 162, 72, 0.25) 12%,
        rgba(255, 230, 140, 0.85) 50%,
        rgba(201, 162, 72, 0.25) 88%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.rift-discovery-toast-icon-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.rift-discovery-toast-icon-btn {
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(36, 28, 16, 0.95) 0%, rgba(8, 6, 4, 0.98) 100%);
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rift-discovery-toast.is-visible .rift-discovery-toast-icon-btn {
    animation: riftDiscoveryToastIconPop 0.5s cubic-bezier(0.22, 1.1, 0.36, 1) backwards;
}

.rift-discovery-toast.is-visible .rift-discovery-toast-icon-btn:nth-child(1) { animation-delay: 0.91s; }
.rift-discovery-toast.is-visible .rift-discovery-toast-icon-btn:nth-child(2) { animation-delay: 1.03s; }
.rift-discovery-toast.is-visible .rift-discovery-toast-icon-btn:nth-child(3) { animation-delay: 1.15s; }
.rift-discovery-toast.is-visible .rift-discovery-toast-icon-btn:nth-child(4) { animation-delay: 1.27s; }
.rift-discovery-toast.is-visible .rift-discovery-toast-icon-btn:nth-child(5) { animation-delay: 1.4s; }

.rift-discovery-toast-icon-btn img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}

.rift-discovery-toast-icon-btn.is-active,
.rift-discovery-toast-icon-btn:hover,
.rift-discovery-toast-icon-btn:focus-visible {
    border-color: rgba(255, 215, 0, 0.85);
    box-shadow:
        0 0 18px rgba(255, 215, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.5);
    outline: none;
    transform: translateY(-2px) scale(1.04);
}

.rift-discovery-toast-category {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 224, 160, 0.9);
}

.rift-discovery-toast-line {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #f8efd8;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.rift-discovery-toast-footnote {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(200, 190, 170, 0.88);
}

.rift-discovery-toast-link {
    display: inline;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
    color: #ffd978;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rift-discovery-toast-link:hover,
.rift-discovery-toast-link:focus-visible {
    color: #fff0c0;
    outline: none;
}

body.is-rift-discovery-toast-open {
    overflow: hidden;
}

body.is-rift-discoveries-workspace-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .rift-discovery-toast-stage,
    .rift-discovery-toast-scrim,
    .rift-discovery-toast-glow,
    .rift-discovery-toast-rays,
    .rift-discovery-toast-icon-btn {
        animation: none !important;
        transition: none !important;
    }

    .rift-discovery-toast.is-visible .rift-discovery-toast-stage {
        transform: none;
        opacity: 1;
        filter: none;
    }

    .rift-discovery-toast.is-visible .rift-discovery-toast-scrim {
        opacity: 1;
    }
}


/* Age Headquarters + dispatch panel styles: see style-age-headquarters.css */


#age-page-canvas[data-age-view="headquarters"] #age-world-map-player-pins,
#age-page-canvas[data-age-view="headquarters"] #age-world-map-terrain-controls,
#age-page-canvas[data-age-view="headquarters"] #age-world-map-continent-label {
    display: none;
}

/* ==========================================================================
   Age — War Room center workspace modal
   ========================================================================== */

.age-war-room-modal[hidden] {
    display: none !important;
}

.age-war-room-modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.age-war-room-modal {
    position: fixed;
    inset: 0;
    z-index: 13060;
    padding: 24px;
    box-sizing: border-box;
}

.age-war-room-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% 42%, rgba(88, 28, 18, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at center, rgba(18, 14, 10, 0.5) 0%, rgba(0, 0, 0, 0.88) 78%);
    backdrop-filter: blur(4px);
}

.age-war-room-stage {
    --age-war-room-players-panel-width: 357px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: min(1737px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    height: min(960px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    box-sizing: border-box;
    pointer-events: auto;
    border: 1px solid rgba(184, 144, 48, 0.62);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.2),
        0 28px 64px rgba(0, 0, 0, 0.78),
        0 0 48px rgba(180, 60, 20, 0.12);
    animation: age-war-room-dialog-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.age-war-room-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: min(1380px, calc(100vw - 405px));
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    border-left: 1px solid rgba(184, 144, 48, 0.38);
    background:
        linear-gradient(90deg, rgba(255, 215, 0, 0.04) 0%, transparent 12%, transparent 88%, rgba(255, 215, 0, 0.04) 100%),
        linear-gradient(180deg, rgba(255, 215, 0, 0.09) 0%, transparent 14%),
        linear-gradient(165deg, rgba(42, 32, 22, 0.99) 0%, rgba(12, 9, 7, 0.99) 52%, rgba(22, 16, 12, 0.98) 100%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.age-war-room-dialog::before,
.age-war-room-dialog::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.age-war-room-dialog::before {
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 215, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
}

.age-war-room-dialog::after {
    inset: 10px;
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 2px;
}

.age-war-room-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 40% at 12% 0%, rgba(255, 120, 40, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 100% 100%, rgba(40, 80, 140, 0.1) 0%, transparent 65%);
}

@keyframes age-war-room-dialog-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.age-war-room-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px 18px;
    flex: 0 0 auto;
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%),
        linear-gradient(90deg, rgba(120, 32, 18, 0.22) 0%, transparent 28%, transparent 72%, rgba(40, 70, 120, 0.18) 100%),
        rgba(0, 0, 0, 0.35);
}

.age-war-room-header-mark {
    width: 4px;
    height: 52px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffd978 0%, #b8860b 45%, #6b2010 100%);
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.35);
}

.age-war-room-header-brand {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.age-war-room-header-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(216, 200, 154, 0.68);
}

.age-war-room-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffe6a0;
    text-shadow:
        0 0 18px rgba(255, 190, 60, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.65);
}

.age-war-room-header-tagline {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(216, 200, 154, 0.58);
}

.age-war-room-header-status {
    display: flex;
    align-items: center;
}

.age-war-room-status-pill {
    padding: 5px 10px;
    border: 1px solid rgba(120, 200, 120, 0.45);
    border-radius: 3px;
    background: rgba(18, 48, 28, 0.65);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9fd4a8;
    box-shadow: inset 0 0 12px rgba(80, 180, 100, 0.12);
}

.age-war-room-close {
    appearance: none;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(236, 220, 180, 0.9);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 0.14s ease,
        color 0.14s ease,
        background 0.14s ease;
}

.age-war-room-close:hover,
.age-war-room-close:focus-visible {
    border-color: rgba(255, 215, 0, 0.55);
    color: #fff6d8;
    background: rgba(48, 36, 20, 0.65);
    outline: none;
}

body.age-war-room-open {
    overflow: hidden;
}

.age-war-room-players-panel[hidden] {
    display: none !important;
}

.age-war-room-players-panel.is-open {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--age-war-room-players-panel-width, 357px);
    width: var(--age-war-room-players-panel-width, 357px);
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 0;
    background:
        radial-gradient(ellipse 55% 40% at 12% 0%, rgba(255, 120, 40, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 100% 100%, rgba(40, 80, 140, 0.1) 0%, transparent 65%),
        linear-gradient(90deg, rgba(255, 215, 0, 0.04) 0%, transparent 12%, transparent 88%, rgba(255, 215, 0, 0.04) 100%),
        linear-gradient(180deg, rgba(255, 215, 0, 0.09) 0%, transparent 14%),
        linear-gradient(165deg, rgba(42, 32, 22, 0.99) 0%, rgba(12, 9, 7, 0.99) 52%, rgba(22, 16, 12, 0.98) 100%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    overflow: hidden;
    isolation: isolate;
}

.age-war-room-players-panel.is-open::before,
.age-war-room-players-panel.is-open::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.age-war-room-players-panel.is-open::before {
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 215, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
}

.age-war-room-players-panel.is-open::after {
    inset: 10px;
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 2px;
}

.age-war-room-workspace-shell {
    position: relative;
    z-index: 2;
    flex: 1 1 0%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.age-war-room-command-deck {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    overflow: hidden;
}

.age-war-room-ops-panel {
    flex: 0 0 188px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px 14px 16px;
    border-right: 1px solid rgba(184, 144, 48, 0.28);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.18) 100%),
        linear-gradient(90deg, rgba(120, 32, 18, 0.12) 0%, transparent 100%);
    min-height: 0;
    overflow: hidden;
}

.age-war-room-ops-panel .age-army-groups-toolbar {
    flex: 0 0 auto;
    min-height: 0;
}

.age-war-room-players-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.age-war-room-players-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px 14px;
    flex: 0 0 auto;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%),
        linear-gradient(90deg, rgba(120, 32, 18, 0.22) 0%, transparent 28%, transparent 72%, rgba(40, 70, 120, 0.18) 100%),
        rgba(0, 0, 0, 0.35);
}

.age-war-room-players-header-mark {
    width: 4px;
    height: 44px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffd978 0%, #b8860b 45%, #6b2010 100%);
    box-shadow: 0 0 12px rgba(255, 190, 60, 0.35);
}

.age-war-room-players-header-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.age-war-room-players-eyebrow {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(216, 200, 154, 0.68);
}

.age-war-room-players-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffe6a0;
    text-shadow:
        0 0 14px rgba(255, 190, 60, 0.2),
        0 2px 5px rgba(0, 0, 0, 0.6);
}

.age-war-room-players-city {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    line-height: 1.35;
    color: rgba(216, 200, 154, 0.58);
}

.age-war-room-players-city[hidden] {
    display: none !important;
}

.age-war-room-players-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 10px 12px 12px;
    overflow: hidden;
}

.age-war-room-players-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.18) 100%),
        linear-gradient(90deg, rgba(120, 32, 18, 0.1) 0%, transparent 100%);
}

.age-war-room-players-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.age-war-room-players-filter-label {
    font-family: 'Cinzel', serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(216, 200, 154, 0.62);
}

.age-war-room-players-filter-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border-radius: 4px;
    border: 1px solid rgba(72, 54, 28, 0.75);
    background: rgba(0, 0, 0, 0.28);
}

.age-war-room-players-filter-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 28px;
    padding: 4px 6px;
    border: 1px solid rgba(72, 54, 28, 0.75);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(36, 28, 16, 0.96) 0%, rgba(12, 8, 4, 0.98) 100%);
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(216, 200, 154, 0.72);
    cursor: pointer;
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 215, 0, 0.08);
    transition: border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.age-war-room-players-filter-btn:hover,
.age-war-room-players-filter-btn:focus-visible {
    border-color: rgba(255, 215, 0, 0.55);
    color: #fff6d8;
    outline: none;
}

.age-war-room-players-filter-btn.is-active {
    border-color: rgba(255, 215, 0, 0.72);
    color: #ffe6a0;
    box-shadow:
        0 0 10px rgba(255, 190, 60, 0.18),
        inset 0 0 0 1px rgba(255, 215, 0, 0.14);
}

.age-war-room-players-summary {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 2px;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
    line-height: 1.4;
    color: rgba(216, 200, 154, 0.58);
}

.age-war-room-players-summary[hidden] {
    display: none !important;
}

.age-war-room-players-list {
    list-style: none;
    margin: 0;
    padding: 2px 4px 2px 2px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 160, 89, 0.45) rgba(0, 0, 0, 0.25);
}

.age-war-room-players-list[hidden] {
    display: none !important;
}

.age-war-room-player-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px 9px 12px;
    border-radius: 3px;
    border: 1px solid rgba(197, 160, 89, 0.26);
    border-left-width: 4px;
    border-left-color: rgba(110, 110, 110, 0.85);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 18%),
        rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.05);
}

.age-war-room-player-row.is-online {
    border-left-color: #5fa86a;
}

.age-war-room-player-row.is-self {
    border-color: rgba(255, 215, 0, 0.42);
    border-left-color: #ffd978;
    background:
        linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, transparent 22%),
        rgba(0, 0, 0, 0.34);
}

.age-war-room-player-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.age-war-room-player-identity {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden;
    white-space: nowrap !important;
}

.age-war-room-player-identity .commander-identity-name-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.age-war-room-player-identity .commander-identity-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f1e0ac !important;
}

.age-war-room-player-identity .commander-rank-pill {
    font-size: 0.48rem !important;
    padding: 1px 5px !important;
    flex-shrink: 0 !important;
}

.age-war-room-player-mp {
    flex: 0 0 auto;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    color: #ffd978;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(255, 190, 60, 0.2);
}

.age-war-room-player-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-left: 0;
    padding-left: 2px;
}

.age-war-room-player-presence {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid rgba(110, 110, 110, 0.45);
    background: rgba(0, 0, 0, 0.32);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(160, 150, 130, 0.82);
}

.age-war-room-player-row.is-online .age-war-room-player-presence {
    border-color: rgba(120, 200, 120, 0.45);
    background: rgba(18, 48, 28, 0.65);
    color: #9fd4a8;
    box-shadow: inset 0 0 10px rgba(80, 180, 100, 0.1);
}

.age-war-room-player-army-focus {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(184, 144, 48, 0.34);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
    white-space: nowrap;
}

.age-war-room-player-army-focus--ranking {
    color: rgba(168, 214, 255, 0.92);
    border-color: rgba(96, 168, 240, 0.42);
    background: rgba(24, 56, 96, 0.42);
}

.age-war-room-player-army-focus--pvp {
    color: rgba(255, 176, 148, 0.94);
    border-color: rgba(220, 96, 72, 0.42);
    background: rgba(96, 24, 16, 0.42);
}

.age-war-room-player-royalty-badge {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    object-fit: contain;
    animation: age-player-royalty-badge-spin3d 6s linear infinite;
    transform-origin: 50% 50%;
    filter: sepia(1) saturate(3.1) hue-rotate(8deg) brightness(1.03) contrast(1.04);
}

.age-war-room-player-report-btn {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(197, 160, 89, 0.45);
    background: rgba(42, 30, 14, 0.9);
    font-family: 'Cinzel', serif;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(216, 200, 154, 0.78);
    cursor: pointer;
}

.age-war-room-player-report-btn:hover,
.age-war-room-player-report-btn:focus-visible {
    border-color: rgba(255, 215, 0, 0.55);
    color: #fff6d8;
    outline: none;
}

.age-war-room-players-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px 10px;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    line-height: 1.45;
    color: rgba(216, 200, 154, 0.52);
    font-style: italic;
}

.age-war-room-players-empty[hidden] {
    display: none !important;
}

.age-army-groups-workspace-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px 14px;
    overflow: hidden;
}

.age-army-groups-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.age-army-groups-tool-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid rgba(72, 54, 28, 0.75);
    border-bottom-width: 3px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(36, 28, 16, 0.96) 0%, rgba(12, 8, 4, 0.98) 100%);
    cursor: pointer;
    text-align: left;
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 215, 0, 0.1);
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease, filter 0.12s ease;
}

.age-army-groups-tool-glyph {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    border: 1px solid rgba(255, 215, 0, 0.18);
    background: rgba(0, 0, 0, 0.35);
    font-size: 1rem;
    line-height: 1;
    color: #ffd978;
}

.age-army-groups-tool-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.age-army-groups-tool-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f1e0ac;
}

.age-army-groups-tool-hint {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    color: rgba(216, 200, 154, 0.55);
}

.age-army-groups-tool-btn--sonar .age-army-groups-tool-glyph {
    color: #9fd4ff;
    border-color: rgba(96, 168, 255, 0.35);
}

.age-army-groups-tool-btn:hover,
.age-army-groups-tool-btn:focus-visible {
    border-color: rgba(255, 215, 0, 0.72);
    filter: brightness(1.06);
}

.age-army-groups-tool-btn:active {
    transform: translateY(2px);
    border-bottom-width: 1px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.age-army-groups-tool-btn.is-active {
    border-color: rgba(120, 200, 255, 0.85);
    box-shadow:
        0 0 12px rgba(96, 168, 255, 0.35),
        inset 0 0 0 1px rgba(160, 210, 255, 0.25);
}

.age-army-groups-tool-btn.is-sonar-active {
    border-color: rgba(96, 200, 255, 0.9);
    background: linear-gradient(180deg, rgba(20, 48, 72, 0.95) 0%, rgba(8, 20, 36, 0.98) 100%);
}

.age-army-groups-body {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: 24px;
    min-height: 0;
    margin-top: 4px;
}

.age-army-groups-roster-column {
    flex: 1 1 58%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.age-army-groups-volunteers-column {
    flex: 0 0 min(34%, 260px);
    min-width: 200px;
    max-width: 40%;
    margin-left: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 4px 0 4px 18px;
    border-left: 1px solid rgba(197, 160, 89, 0.28);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, transparent 100%);
}

.age-army-groups-volunteers-column.is-visible {
    display: flex;
}

.age-army-groups-section-head {
    flex: 0 0 auto;
    margin: 4px 0 0;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.32);
}

.age-army-groups-list-heading {
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8d5a3;
}

.age-army-groups-list-subheading,
.age-army-groups-volunteers-subheading {
    margin: 4px 0 0;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: rgba(216, 200, 154, 0.52);
}

.age-army-groups-volunteers-heading {
    flex: 0 0 auto;
    margin: 4px 0 0;
    padding: 0 0 0;
    border: none;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8d5a3;
    text-align: right;
}

.age-army-groups-volunteers-subheading {
    text-align: right;
}

.age-army-groups-sf-lead-list {
    flex: 1 1 auto;
    list-style: none;
    margin: 12px 0 0;
    padding: 0 4px 4px 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    scrollbar-width: thin;
}

.age-army-groups-sf-lead-item {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.age-army-groups-sf-lead-name {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(236, 220, 180, 0.92);
    text-align: right;
}

.age-army-groups-sf-lead-item.is-self .age-army-groups-sf-lead-name {
    color: #b8dcff;
}

.age-army-groups-sf-lead-empty {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.78rem;
    color: rgba(236, 220, 180, 0.52);
    text-align: right;
    font-style: italic;
}

.age-army-groups-roster {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    margin-top: 4px;
}

.age-army-groups-create-row {
    display: none;
    flex: 0 0 auto;
    align-items: stretch;
    justify-content: flex-start;
    align-self: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px dashed rgba(197, 160, 89, 0.35);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}

.age-army-groups-create-row.is-visible {
    display: flex;
}

.age-army-groups-create-row[hidden] {
    display: none !important;
}

.age-army-groups-type-cycle,
.age-army-groups-type-pill {
    flex: 0 0 auto;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-bottom-width: 2px;
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.age-army-groups-type-cycle {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.12s ease;
}

.age-army-groups-type-pill--cycle {
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform 0.1s ease, filter 0.12s ease;
}

.age-army-groups-type-pill--cycle:hover,
.age-army-groups-type-cycle:hover {
    filter: brightness(1.08);
}

.age-army-groups-type-pill--cycle:active,
.age-army-groups-type-cycle:active {
    transform: translateY(1px);
    border-bottom-width: 1px;
}

.age-army-groups-type-cycle--sf,
.age-army-groups-type-pill.age-army-groups-type-cycle--sf {
    background: linear-gradient(180deg, #b52828 0%, #7a1616 55%, #5c1010 100%);
    border-color: rgba(92, 18, 18, 0.95);
    color: #fff;
}

.age-army-groups-type-cycle--taxi,
.age-army-groups-type-pill.age-army-groups-type-cycle--taxi {
    background: linear-gradient(180deg, #e4c04a 0%, #a88418 55%, #7a6010 100%);
    border-color: rgba(122, 88, 8, 0.95);
    color: #1a1408;
}

.age-army-groups-type-cycle--rally,
.age-army-groups-type-pill.age-army-groups-type-cycle--rally {
    background: linear-gradient(180deg, #5c3a8c 0%, #3a2258 55%, #261438 100%);
    border-color: rgba(30, 14, 48, 0.95);
    color: #f2e8ff;
}

.age-army-groups-type-cycle--hold,
.age-army-groups-type-pill.age-army-groups-type-cycle--hold {
    background: linear-gradient(180deg, #6e6e6e 0%, #444 55%, #2a2a2a 100%);
    border-color: rgba(20, 20, 20, 0.9);
    color: #f5f5f5;
}

.age-army-groups-type-cycle--main,
.age-army-groups-type-pill.age-army-groups-type-cycle--main {
    background: linear-gradient(180deg, #2a62b8 0%, #163d78 55%, #0f2a52 100%);
    border-color: rgba(120, 90, 12, 0.95);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 215, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #fff;
}

.age-army-groups-type-cycle--temp-main,
.age-army-groups-type-pill.age-army-groups-type-cycle--temp-main {
    background: linear-gradient(180deg, #2a62b8 0%, #163d78 55%, #0f2a52 100%);
    border-color: rgba(148, 168, 192, 0.92);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(192, 208, 224, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #fff;
}

.age-army-groups-name-input {
    flex: 1 1 180px;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-top-color: rgba(0, 0, 0, 0.55);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.32) 100%);
    color: #f5ecd4;
    font-size: 13px;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.06);
}

.age-army-groups-name-input:focus {
    outline: none;
    border-color: rgba(197, 160, 89, 0.65);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 215, 0, 0.25);
}

.age-army-groups-create-submit {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid rgba(72, 52, 20, 0.95);
    border-bottom-width: 3px;
    background: linear-gradient(180deg, rgba(96, 72, 36, 0.98) 0%, rgba(52, 36, 16, 1) 100%);
    color: #f1e0ac;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.48),
        0 5px 10px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.age-army-groups-create-submit:hover {
    filter: brightness(1.06);
}

.age-army-groups-create-submit:active {
    transform: translateY(2px);
    border-bottom-width: 1px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.42),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.age-army-groups-create-submit:disabled {
    opacity: 0.62;
    cursor: wait;
    filter: none;
    transform: none;
}

.age-army-groups-feedback {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 8px 0 0;
    font-size: 12px;
    color: #d8c89a;
}

.age-army-groups-feedback.is-error {
    color: #ffb0a8;
}

.age-army-groups-list {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 10px;
    padding: 4px 6px 4px 2px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 160, 89, 0.45) rgba(0, 0, 0, 0.25);
}

.age-army-groups-roster:has(.age-army-groups-create-row.is-visible) .age-army-groups-list {
    margin-top: 14px;
}

.age-army-groups-category-gap {
    height: 8px;
}

.age-army-groups-category-gap--major {
    height: 18px;
}

.age-army-groups-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 10px 14px;
    margin-bottom: 7px;
    border-radius: 3px;
    border: 1px solid rgba(197, 160, 89, 0.26);
    border-left-width: 4px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 18%),
        rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.05);
}

.age-army-groups-row--sf { border-left-color: #b52828; }
.age-army-groups-row--taxi { border-left-color: #c9a227; }
.age-army-groups-row--rally { border-left-color: #5c3a8c; }
.age-army-groups-row--hold { border-left-color: #6e6e6e; }
.age-army-groups-row--main { border-left-color: #ffd978; }
.age-army-groups-row--temp-main { border-left-color: #a8c0dc; }

.age-army-groups-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.age-army-groups-row-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.age-army-groups-row-name-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(197, 160, 89, 0.45);
    background: rgba(0, 0, 0, 0.45);
    color: #f5ecd4;
    font-size: 13px;
}

.age-army-groups-row-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.age-army-groups-icon-btn,
.age-army-groups-expand-btn {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(197, 160, 89, 0.45);
    background: rgba(42, 30, 14, 0.9);
    color: #f1e0ac;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.age-army-groups-expand-btn {
    min-width: 30px;
    padding: 5px 6px;
    font-size: 10px;
    line-height: 1;
}

.age-army-groups-row.is-expanded .age-army-groups-expand-btn {
    transform: rotate(180deg);
}

.age-army-groups-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 0 40px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(216, 200, 154, 0.62);
}

.age-army-groups-row-leader {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    text-transform: none;
    letter-spacing: normal;
}

.age-army-groups-row-leader.is-self .age-army-groups-member-name,
.age-army-groups-row-leader.is-self .commander-identity-name {
    color: #b8dcff;
}

.age-army-groups-row-leader-prefix {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(216, 200, 154, 0.52);
}

.age-army-groups-row-leader-identity {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.age-army-groups-row-leader-identity .commander-identity-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.age-army-groups-row-leader-identity .commander-identity-name,
.age-army-groups-row-leader-identity .age-army-groups-member-name {
    color: rgba(236, 220, 180, 0.92);
}

.age-army-groups-row-leader-identity .commander-rank-pill {
    font-size: 0.5rem !important;
    padding: 1px 5px !important;
}

.age-army-groups-row-count {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(216, 200, 154, 0.62);
}

.age-army-groups-members-panel {
    margin: 4px 0 0 40px;
    padding: 6px 0 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(197, 160, 89, 0.14);
}

.age-army-groups-members-panel[hidden] {
    display: none !important;
}

.age-army-groups-members-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.age-army-groups-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.age-army-groups-member-item.is-self .age-army-groups-member-label {
    color: #b8dcff;
}

.age-army-groups-member-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: rgba(236, 220, 180, 0.92);
}

.age-army-groups-member-identity {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.age-army-groups-member-identity .commander-identity-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.age-army-groups-member-identity .commander-identity-name,
.age-army-groups-member-name {
    color: rgba(236, 220, 180, 0.92);
}

.age-army-groups-member-identity .commander-rank-pill {
    font-size: 0.5rem !important;
    padding: 1px 5px !important;
}

.age-army-groups-member-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.age-army-groups-member-btn {
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid rgba(197, 160, 89, 0.4);
    background: rgba(30, 22, 10, 0.92);
    color: #f1e0ac;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.age-army-groups-member-btn--danger {
    border-color: rgba(180, 70, 70, 0.55);
    color: #ffb0a8;
}

.age-army-groups-attack-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(216, 200, 154, 0.78);
}

.age-army-groups-expanded-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.age-army-groups-expanded-label {
    font-size: 11px;
    color: rgba(216, 200, 154, 0.88);
}

.age-army-groups-inline-select {
    flex: 1 1 140px;
    min-width: 120px;
    height: 28px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid rgba(197, 160, 89, 0.4);
    background: rgba(0, 0, 0, 0.45);
    color: #f5ecd4;
    font-size: 11px;
}

.age-army-groups-inline-btn,
.age-army-groups-disband-btn,
.age-army-groups-merge-btn {
    padding: 5px 9px;
    border-radius: 5px;
    border: 1px solid rgba(197, 160, 89, 0.45);
    background: rgba(42, 30, 14, 0.92);
    color: #f1e0ac;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.age-army-groups-disband-btn {
    border-color: rgba(180, 70, 70, 0.6);
    color: #ffb0a8;
}

.age-army-groups-merge-btn {
    border-color: rgba(120, 170, 220, 0.45);
    background: rgba(18, 36, 62, 0.92);
    color: #d8e8ff;
}

.age-army-groups-army-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000020 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(4px);
}

.age-army-groups-army-modal.main-portal-modal-hidden {
    display: none !important;
}

.age-army-groups-army-bezel {
    width: min(420px, 92vw);
    max-height: 70vh;
    overflow: auto;
    padding: 18px 20px;
}

.age-army-groups-army-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.age-army-groups-army-title {
    margin: 0;
    font-size: 1rem;
    color: #e8d5a3;
}

.age-army-groups-army-close {
    border: none;
    background: transparent;
    color: #f1e0ac;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.age-army-groups-army-summary {
    margin: 0 0 10px;
    font-size: 12px;
    color: rgba(216, 200, 154, 0.85);
}

.age-army-groups-army-stacks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.age-army-groups-army-stacks li {
    font-size: 12px;
    color: #f5ecd4;
}

.age-army-groups-army-empty {
    margin: 0;
    font-size: 12px;
    color: rgba(216, 200, 154, 0.7);
    font-style: italic;
}

.age-army-groups-row--featured-main {
    border: 2px solid rgba(255, 215, 0, 0.82);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.2),
        0 0 18px rgba(255, 190, 60, 0.22);
    background: linear-gradient(135deg, rgba(24, 48, 96, 0.42) 0%, rgba(8, 8, 12, 0.5) 100%);
}

.age-army-groups-row--featured-temp-main {
    border: 2px solid rgba(192, 208, 224, 0.78);
    box-shadow: 0 0 14px rgba(144, 176, 220, 0.2);
    background: linear-gradient(135deg, rgba(24, 48, 96, 0.34) 0%, rgba(8, 8, 12, 0.46) 100%);
}

.age-army-groups-row--taxi {
    border-color: rgba(201, 162, 39, 0.55);
    box-shadow: 0 0 10px rgba(255, 210, 80, 0.12);
}

.age-army-groups-row-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: #f5ecd4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.age-army-groups-join-btn,
.age-army-groups-member-badge {
    font-size: 11px;
    font-weight: 700;
}

.age-army-groups-join-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(197, 160, 89, 0.5);
    background: rgba(42, 30, 14, 0.9);
    color: #f1e0ac;
    cursor: pointer;
}

.age-army-groups-member-badge {
    color: #9fd0ff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.age-army-groups-empty {
    margin: 16px 0 0;
    text-align: left;
    color: rgba(216, 200, 154, 0.75);
    font-size: 13px;
}

.age-army-groups-tool-btn.is-sonar-active {
    border-color: rgba(80, 220, 255, 0.95) !important;
    box-shadow:
        0 0 0 2px rgba(40, 160, 255, 0.45),
        0 0 18px rgba(64, 200, 255, 0.65),
        inset 0 0 12px rgba(96, 220, 255, 0.35) !important;
    animation: age-army-groups-sonar-btn-pulse 1.4s ease-in-out infinite;
}

@keyframes age-army-groups-sonar-btn-pulse {
    0%, 100% {
        filter: brightness(1.05);
    }

    50% {
        filter: brightness(1.35);
    }
}

.age-world-map-frame > .age-army-groups-sonar-layer {
    position: absolute;
    inset: var(--game-region-map-bezel);
    z-index: 48;
    pointer-events: none;
    overflow: hidden;
}

.age-army-groups-sonar-layer.is-active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--sonar-beacon-x, 50%) var(--sonar-beacon-y, 50%),
        rgba(64, 200, 255, 0.14) 0%,
        rgba(32, 120, 220, 0.06) 28%,
        transparent 62%
    );
    animation: age-army-groups-sonar-vignette 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes age-army-groups-sonar-vignette {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

.age-army-groups-sonar-beacon {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}

.age-army-groups-sonar-beacon-core {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #7ee8ff 35%, #1a8fd4 70%, transparent 100%);
    box-shadow:
        0 0 16px rgba(120, 230, 255, 1),
        0 0 36px rgba(64, 180, 255, 0.85);
    animation: age-army-groups-sonar-beacon-core 1.1s ease-in-out infinite;
}

.age-army-groups-sonar-beacon-sweep {
    position: absolute;
    left: 0;
    top: 0;
    width: min(var(--sonar-max-radius, 160px), 220px);
    height: min(var(--sonar-max-radius, 160px), 220px);
    margin: calc(min(var(--sonar-max-radius, 160px), 220px) / -2) 0 0 calc(min(var(--sonar-max-radius, 160px), 220px) / -2);
    border-radius: 50%;
    border: 3px solid rgba(120, 230, 255, 0.55);
    box-shadow: inset 0 0 24px rgba(96, 200, 255, 0.35);
    animation: age-army-groups-sonar-beacon-sweep 2.2s ease-out infinite;
}

.age-army-groups-sonar-beacon-label {
    position: absolute;
    left: 14px;
    top: -10px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(120, 230, 255, 0.75);
    background: rgba(8, 28, 52, 0.92);
    color: #dff7ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(64, 200, 255, 0.5);
    animation: age-army-groups-sonar-label-blink 1.2s step-end infinite;
}

@keyframes age-army-groups-sonar-beacon-core {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

@keyframes age-army-groups-sonar-beacon-sweep {
    0% {
        transform: scale(0.15);
        opacity: 0.95;
    }

    100% {
        transform: scale(1);
        opacity: 0.12;
    }
}

@keyframes age-army-groups-sonar-label-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

.age-army-groups-sonar-ring {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 3px solid rgba(140, 235, 255, 0.95);
    box-shadow:
        0 0 18px rgba(96, 220, 255, 0.9),
        0 0 40px rgba(48, 160, 255, 0.55);
    animation: age-army-groups-sonar-expand 2.2s ease-out forwards;
    z-index: 2;
}

.age-army-groups-sonar-ring--echo {
    border-color: rgba(255, 255, 255, 0.75);
    animation-duration: 2.4s;
    animation-delay: 0.08s;
}

.age-army-groups-sonar-ring--echo-deep {
    border-width: 2px;
    border-color: rgba(64, 180, 255, 0.65);
    animation-duration: 2.6s;
    animation-delay: 0.16s;
}

@keyframes age-army-groups-sonar-expand {
    0% {
        width: 14px;
        height: 14px;
        margin: -7px 0 0 -7px;
        opacity: 1;
    }

    100% {
        width: var(--sonar-max-radius, 160px);
        height: var(--sonar-max-radius, 160px);
        margin: calc(var(--sonar-max-radius, 160px) / -2) 0 0 calc(var(--sonar-max-radius, 160px) / -2);
        opacity: 0;
    }
}

#age-page-canvas[data-age-view="map"] .age-world-map-canvas,
#age-page-canvas[data-age-view="map"] .age-world-map-highlight-shell {
    z-index: 1;
}

@media (max-width: 1100px) {
    .age-war-room-stage {
        flex-direction: column;
        width: min(1380px, calc(100vw - 24px));
        height: auto;
        max-height: calc(100vh - 24px);
    }

    .age-war-room-players-panel.is-open {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 36vh;
    }

    .age-war-room-dialog {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: min(62vh, 720px);
        border-left: none;
        border-top: 1px solid rgba(184, 144, 48, 0.38);
    }
}

@media (max-width: 760px) {
    .age-war-room-header {
        grid-template-columns: auto 1fr auto;
    }

    .age-war-room-command-deck {
        flex-direction: column;
    }

    .age-war-room-ops-panel {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid rgba(184, 144, 48, 0.28);
        padding: 10px 14px;
    }

    .age-war-room-ops-panel .age-army-groups-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .age-war-room-ops-panel .age-army-groups-tool-btn {
        flex: 1 1 140px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .age-war-room-stage {
        animation: none;
    }

    .age-nation-hub-menu.is-menu-position-synced {
        transition-duration: 0.2s;
    }

    .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item {
        transition-duration: 0.15s;
        transition-delay: 0s !important;
    }

    .age-nation-hub.is-open .age-nation-hub-menu.is-menu-position-synced .age-nation-hub-menu-ladder > .age-nation-hub-menu-item {
        opacity: 1;
        transform: none;
    }

    .age-army-groups-sonar-ring {
        animation-duration: 0.5s;
    }

    .age-army-groups-tool-btn.is-sonar-active {
        animation: none;
    }

    .age-army-groups-sonar-layer.is-active::before,
    .age-army-groups-sonar-beacon-core,
    .age-army-groups-sonar-beacon-sweep,
    .age-army-groups-sonar-beacon-label {
        animation: none;
    }
}

/* ==========================================================================
   Age Barracks — unit purchase catalog
   ========================================================================== */

body.age-barracks-open {
    overflow: hidden;
}


.age-barracks-workspace {
    position: fixed;
    inset: 0;
    z-index: 12040;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 72px 48px 48px;
    background: transparent;
}

.age-barracks-workspace[hidden] {
    display: none !important;
}

.age-barracks-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1480px, 100%);
    max-height: 100%;
    border: 1px solid rgba(184, 144, 48, 0.42);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, transparent 18%),
        linear-gradient(165deg, rgba(34, 28, 20, 0.98) 0%, rgba(12, 10, 8, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.12),
        0 18px 48px rgba(0, 0, 0, 0.58);
    overflow: hidden;
}

.age-barracks-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.28);
}

.age-barracks-eyebrow {
    display: block;
    margin: 0 0 6px;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.82);
}

.age-barracks-title {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: 0.06em;
    color: #ffe7b0;
}

.age-barracks-subtitle {
    margin: 8px 0 0;
    max-width: 52ch;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(236, 220, 180, 0.72);
}

.age-barracks-commander-status {
    margin: 6px 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 217, 120, 0.82);
}

.age-barracks-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.age-barracks-wallets {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.age-barracks-wallet {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 108px;
    padding: 10px 14px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
}

.age-barracks-wallet-label {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.78);
}

.age-barracks-wallet-value {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffd978;
}

.age-barracks-close {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 10px 16px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
    color: #ffd978;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.age-barracks-close:hover,
.age-barracks-close:focus-visible {
    border-color: rgba(255, 215, 0, 0.62);
    background: rgba(255, 215, 0, 0.08);
}

.age-barracks-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 0;
    flex: 1 1 auto;
}

.age-barracks-category-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 14px;
    border-right: 1px solid rgba(184, 144, 48, 0.24);
    overflow: auto;
}

.age-barracks-category-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    color: #ecdcb4;
    text-align: left;
    cursor: pointer;
}

.age-barracks-category-btn.is-active,
.age-barracks-category-btn:hover,
.age-barracks-category-btn:focus-visible {
    border-color: rgba(255, 215, 0, 0.48);
    background: rgba(255, 215, 0, 0.08);
}

.age-barracks-category-label {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffd978;
}

.age-barracks-category-path {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.52);
}

.age-barracks-main {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 18px 22px 22px;
    overflow: hidden;
}

.age-barracks-main-head {
    grid-column: 1 / -1;
}

.age-barracks-active-category-label {
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: 0.05em;
    color: #ffe7b0;
}

.age-barracks-main-hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: rgba(236, 220, 180, 0.58);
}

.age-barracks-unit-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    max-height: calc(100vh - 260px);
    overflow: auto;
    padding-right: 4px;
}

.age-barracks-unit-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(184, 144, 48, 0.24);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.age-barracks-unit-card.is-active,
.age-barracks-unit-card:hover,
.age-barracks-unit-card:focus-visible {
    border-color: rgba(255, 215, 0, 0.52);
    background: rgba(255, 215, 0, 0.07);
}

.age-barracks-unit-card.is-locked {
    opacity: 0.76;
}

.age-barracks-unit-card.is-locked .age-barracks-unit-card-portrait {
    filter: grayscale(0.55);
}

.age-barracks-unit-card-portrait-wrap {
    display: block;
    width: 72px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(184, 144, 48, 0.28);
    background: rgba(0, 0, 0, 0.4);
}

.age-barracks-unit-card-portrait,
.age-barracks-detail-portrait {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.age-barracks-unit-card-portrait.is-placeholder,
.age-barracks-detail-portrait.is-placeholder {
    object-fit: contain;
    padding: 8px;
    opacity: 0.88;
}

.age-barracks-unit-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.age-barracks-unit-card-name {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #ffd978;
}

.age-barracks-unit-card-meta,
.age-barracks-unit-card-promos {
    font-size: 0.76rem;
    line-height: 1.35;
    color: rgba(236, 220, 180, 0.68);
}

.age-barracks-unit-card-lock {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(255, 160, 120, 0.9);
}

.age-barracks-unit-detail {
    min-height: 0;
    max-height: calc(100vh - 260px);
    overflow: auto;
}

.age-barracks-detail-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.24);
}

.age-barracks-detail-portrait-wrap {
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(184, 144, 48, 0.32);
    background: rgba(0, 0, 0, 0.42);
}

.age-barracks-detail-portrait-badge {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(8, 6, 4, 0.82);
    border: 1px solid rgba(184, 144, 48, 0.34);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(236, 220, 180, 0.78);
}

.age-barracks-detail-title {
    margin: 0;
    font-size: 1.18rem;
    letter-spacing: 0.05em;
    color: #ffe7b0;
}

.age-barracks-detail-branch,
.age-barracks-detail-special {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(236, 220, 180, 0.72);
}

.age-barracks-detail-special {
    color: #ffb86b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.age-barracks-detail-lock {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 120, 90, 0.28);
    background: rgba(120, 40, 30, 0.22);
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 180, 150, 0.92);
}

.age-barracks-detail-costs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.age-barracks-detail-costs div {
    padding: 10px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
}

.age-barracks-detail-costs dt {
    margin: 0 0 4px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.72);
}

.age-barracks-detail-costs dd {
    margin: 0;
    font-size: 0.92rem;
    color: #fff3c4;
}

.age-barracks-detail-cap-notes {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid rgba(255, 184, 108, 0.72);
    background: rgba(255, 184, 108, 0.06);
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 220, 180, 0.82);
}

.age-barracks-promo-table-wrap {
    overflow: auto;
}

.age-barracks-promo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.age-barracks-promo-table th,
.age-barracks-promo-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.18);
    text-align: left;
}

.age-barracks-promo-table th {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.78);
}

.age-barracks-promo-table td {
    color: #ecdcb4;
}

.age-barracks-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.age-barracks-purchase-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.age-barracks-qty-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.age-barracks-qty-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.78);
}

.age-barracks-qty-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.age-barracks-qty-btn {
    min-width: 52px;
    padding: 8px 12px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    color: #ecdcb4;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.age-barracks-qty-btn.is-active,
.age-barracks-qty-btn:hover:not(:disabled),
.age-barracks-qty-btn:focus-visible:not(:disabled) {
    border-color: rgba(255, 215, 0, 0.52);
    background: rgba(255, 215, 0, 0.08);
    color: #ffd978;
}

.age-barracks-qty-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.age-barracks-qty-summary {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(236, 220, 180, 0.72);
}

.age-barracks-detail-message {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.45;
}

.age-barracks-detail-message.is-success {
    border: 1px solid rgba(120, 200, 120, 0.28);
    background: rgba(30, 80, 40, 0.22);
    color: rgba(180, 240, 180, 0.92);
}

.age-barracks-detail-message.is-error {
    border: 1px solid rgba(255, 120, 90, 0.28);
    background: rgba(120, 40, 30, 0.22);
    color: rgba(255, 180, 150, 0.92);
}

.age-barracks-purchase-btn {
    padding: 12px 16px;
    border: 1px solid rgba(184, 144, 48, 0.42);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.05));
    color: #ffd978;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: not-allowed;
    opacity: 0.72;
}

.age-barracks-purchase-btn.is-ready:not(:disabled) {
    cursor: pointer;
    opacity: 1;
    border-color: rgba(255, 215, 0, 0.62);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.24), rgba(255, 215, 0, 0.08));
}

.age-barracks-detail-footnote,
.age-barracks-empty {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(236, 220, 180, 0.58);
}

.age-barracks-detail-limit {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: rgba(255, 200, 140, 0.88);
}

/* ==========================================================================
   Age Adventurer's Guild — settlement menu jobs + job-page overlays
   ========================================================================== */

.age-guild-workspace {
    position: fixed;
    inset: 0;
    z-index: 13060;
    pointer-events: none;
    box-sizing: border-box;
}

body.age-guild-modal-open .age-guild-workspace:not([hidden]) {
    pointer-events: none;
}

.age-guild-job-arena.age-age-center-modal:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 13061;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: auto;
    background: transparent;
}

body.age-guild-training-open .age-guild-workspace:not([hidden]),
body.age-guild-hub-open .age-guild-workspace:not([hidden]),
body.age-guild-overlay-open .age-guild-workspace:not([hidden]),
body.age-guild-modal-open .age-guild-workspace:not([hidden]) {
    pointer-events: none;
    display: block;
    background: transparent;
}

.age-guild-workspace[hidden] {
    display: none !important;
}

.age-settlement-menu-guild-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}

.age-settlement-menu-garrison-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}

.age-settlement-menu-guild-wrap.is-expanded .age-settlement-menu-item--expandable .age-settlement-menu-item-chevron,
.age-settlement-menu-garrison-wrap.is-expanded .age-settlement-menu-item--expandable .age-settlement-menu-item-chevron {
    transform: rotate(180deg);
}

.age-settlement-menu-item--expandable.is-active,
.age-settlement-menu-guild-wrap.is-expanded .age-settlement-menu-item--expandable,
.age-settlement-menu-garrison-wrap.is-expanded .age-settlement-menu-item--expandable {
    border-color: rgba(255, 215, 120, 0.62);
}

.age-settlement-guild-jobs,
.age-settlement-garrison-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
    padding: 0 0 2px 14px;
    position: relative;
    pointer-events: auto;
}

.age-settlement-guild-jobs[hidden],
.age-settlement-garrison-options[hidden] {
    display: none !important;
}

.age-settlement-guild-job,
.age-settlement-garrison-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    margin: 0;
    padding: 8px 10px 8px 12px;
    border: 1px solid rgba(184, 144, 48, 0.2);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.28);
    color: #f4e8c8;
    font-family: 'Cinzel', serif;
    text-align: left;
    cursor: pointer;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    box-sizing: border-box;
    pointer-events: auto;
}

.age-settlement-guild-job.is-featured:not(.is-locked) {
    border-color: rgba(255, 215, 120, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.14);
}

.age-settlement-guild-job.is-locked,
.age-settlement-guild-job:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.age-settlement-guild-job:not(.is-locked):not(:disabled):hover,
.age-settlement-guild-job:not(.is-locked):not(:disabled):focus-visible,
.age-settlement-garrison-option:hover,
.age-settlement-garrison-option:focus-visible {
    border-color: rgba(255, 215, 120, 0.72);
    color: #ffd978;
    box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.22);
}

.age-settlement-menu-guild-wrap.is-expanded .age-settlement-menu-item--expandable:hover,
.age-settlement-menu-guild-wrap.is-expanded .age-settlement-menu-item--expandable:focus-visible,
.age-settlement-menu-garrison-wrap.is-expanded .age-settlement-menu-item--expandable:hover,
.age-settlement-menu-garrison-wrap.is-expanded .age-settlement-menu-item--expandable:focus-visible {
    transform: none;
}

.age-settlement-menu-list:has(.age-settlement-menu-guild-wrap.is-expanded) .age-settlement-menu-item:not(.age-settlement-menu-item--expandable):hover,
.age-settlement-menu-list:has(.age-settlement-menu-guild-wrap.is-expanded) .age-settlement-menu-item:not(.age-settlement-menu-item--expandable):focus-visible,
.age-settlement-menu-list:has(.age-settlement-menu-garrison-wrap.is-expanded) .age-settlement-menu-item:not(.age-settlement-menu-item--expandable):hover,
.age-settlement-menu-list:has(.age-settlement-menu-garrison-wrap.is-expanded) .age-settlement-menu-item:not(.age-settlement-menu-item--expandable):focus-visible {
    transform: none;
}

.age-settlement-guild-job-label,
.age-settlement-garrison-option-label {
    font-size: 0.86rem;
    font-weight: 600;
}

.age-settlement-guild-job-tag {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 215, 120, 0.82);
}

.age-settlement-guild-job-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.age-settlement-guild-job-difficulty {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(184, 144, 48, 0.34);
    background: rgba(255, 215, 120, 0.08);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 224, 160, 0.82);
}

.age-settlement-guild-job-access {
    display: block;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 208, 128, 0.62);
}

.age-settlement-guild-job-desc,
.age-settlement-guild-job-lock,
.age-settlement-guild-jobs-empty,
.age-settlement-garrison-option-desc {
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(236, 220, 180, 0.66);
}

.age-settlement-guild-job-lock {
    color: rgba(255, 200, 140, 0.82);
}

.age-guild-job-arena {
    box-sizing: border-box;
    pointer-events: none;
    background: transparent;
}

body.age-guild-training-open .age-guild-training-arena:not([hidden]),
body.age-guild-hub-open .age-guild-jobs-hub-arena:not([hidden]),
body.age-guild-overlay-open .age-guild-trade-arena:not([hidden]),
body.age-guild-overlay-open .age-guild-bounties-arena:not([hidden]) {
    pointer-events: auto;
}

.age-guild-job-arena[hidden] {
    display: none !important;
}

.age-guild-training-arena {
    display: block;
}

.age-guild-training-modal-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.age-guild-trade-arena,
.age-guild-bounties-arena,
.age-guild-jobs-hub-arena {
    display: block;
}

.age-guild-trade-modal-dialog,
.age-guild-bounties-modal-dialog,
.age-guild-hub-modal-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.age-guild-training-center {
    position: relative;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 8px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

#age-page-canvas .age-guild-battle-panel {
    position: absolute;
    top: 8px;
    left: 200px;
    width: min(400px, 44vw);
    max-height: min(48vh, 400px);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: auto;
    z-index: 2;
    border-radius: 6px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
    color: #f1e0ac;
}

.age-guild-battle-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    flex: 1 1 auto;
}

#age-page-canvas .age-guild-battle-tabs {
    margin-bottom: 2px;
}

#age-page-canvas .age-guild-battle-tab.is-loot-found {
    border-color: rgba(255, 215, 120, 0.92);
    color: #ffe7a8;
    background:
        linear-gradient(180deg, rgba(255, 215, 120, 0.28) 0%, rgba(72, 52, 18, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 180, 0.35),
        0 0 16px rgba(255, 196, 88, 0.45);
    animation: age-guild-loot-tab-glow 1.6s ease-in-out infinite;
}

@keyframes age-guild-loot-tab-glow {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 235, 180, 0.35),
            0 0 12px rgba(255, 196, 88, 0.32);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 210, 0.5),
            0 0 22px rgba(255, 215, 120, 0.62);
    }
}

#age-page-canvas .age-guild-battle-tabpanel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 2px 0 0;
}

#age-page-canvas .age-guild-battle-tabpanel[hidden] {
    display: none !important;
}

#age-page-canvas .age-guild-commander-loadout-rail {
    position: absolute;
    top: 8px;
    right: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    pointer-events: auto;
    z-index: 2;
}

#age-page-canvas .age-guild-commander-loadout-rail .age-guild-commander-gear-panel {
    position: static;
    right: auto;
    top: auto;
    width: min(400px, 28vw);
    max-height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    overflow: visible;
    pointer-events: auto;
    border-radius: 6px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
    color: #f1e0ac;
    flex: 0 0 auto;
}

#age-page-canvas .age-guild-inventory-panel {
    width: min(220px, 20vw);
    max-height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    overflow: auto;
    pointer-events: auto;
    border-radius: 6px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
    color: #f1e0ac;
    flex: 0 0 auto;
}

.age-guild-inventory-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.22);
}

.age-guild-inventory-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 231, 168, 0.92);
}

.age-guild-inventory-capacity {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: rgba(236, 220, 180, 0.62);
}

.age-guild-inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.age-guild-inventory-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid rgba(184, 144, 48, 0.2);
    background: rgba(6, 8, 12, 0.62);
    color: rgba(236, 220, 180, 0.72);
    box-sizing: border-box;
}

button.age-guild-inventory-slot {
    cursor: pointer;
    font: inherit;
    text-align: center;
}

button.age-guild-inventory-slot:hover,
button.age-guild-inventory-slot:focus-visible {
    border-color: rgba(120, 188, 255, 0.42);
    background:
        linear-gradient(180deg, rgba(120, 188, 255, 0.08) 0%, transparent 40%),
        rgba(10, 14, 22, 0.78);
    color: #e8f4ff;
}

.age-guild-inventory-slot.is-empty {
    opacity: 0.55;
}

.age-guild-inventory-slot.is-locked {
    opacity: 0.38;
    border-style: dashed;
    border-color: rgba(120, 120, 120, 0.28);
    background: rgba(4, 4, 6, 0.72);
}

.age-guild-inventory-slot.is-filled {
    border-color: rgba(255, 217, 120, 0.34);
}

.age-guild-inventory-slot-mark {
    font-size: 1rem;
    line-height: 1;
}

.age-guild-inventory-slot-name {
    font-size: 0.52rem;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.age-guild-inventory-slot-lock,
.age-guild-inventory-slot-empty {
    font-size: 0.82rem;
    opacity: 0.7;
}

#age-page-canvas .age-guild-commander-gear-panel {
    position: absolute;
    top: 8px;
    right: 220px;
    width: min(400px, 44vw);
    max-height: min(85vh, 720px);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    overflow: visible;
    pointer-events: auto;
    z-index: 2;
    border-radius: 6px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
    color: #f1e0ac;
}

.age-guild-commander-gear-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
}

.age-guild-commander-gear-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.22);
}

.age-guild-commander-gear-eyebrow {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.58);
}

.age-guild-commander-gear-name {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.2;
    color: #ffe7a8;
}

.age-guild-commander-gear-class {
    margin: 0;
    font-size: 0.76rem;
    color: rgba(236, 220, 180, 0.72);
}

.age-guild-gear-sheet {
    flex: 0 0 auto;
    overflow: visible;
}

.age-guild-gear-layout {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 74px;
    gap: 8px;
    align-items: start;
}

.age-guild-gear-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.age-guild-gear-col--center {
    align-items: stretch;
}

.age-guild-gear-portrait-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 148px;
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid rgba(184, 144, 48, 0.42);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 215, 120, 0.16) 0%, transparent 58%),
        linear-gradient(180deg, rgba(12, 10, 8, 0.92) 0%, rgba(4, 3, 2, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.12),
        inset 0 -16px 28px rgba(0, 0, 0, 0.42);
}

.age-guild-gear-portrait-wrap::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 120, 0.08);
    pointer-events: none;
}

.age-guild-gear-portrait {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 132px;
    max-height: 132px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.age-guild-gear-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 52px;
    padding: 6px 6px 5px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgba(184, 144, 48, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.06) 0%, transparent 42%),
        rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 215, 120, 0.08);
    color: #f1e0ac;
    text-align: center;
    cursor: default;
}

button.age-guild-gear-slot {
    cursor: help;
    font: inherit;
}

.age-guild-gear-slot.is-empty {
    opacity: 0.72;
}

.age-guild-gear-slot.is-equipped {
    border-color: rgba(255, 215, 120, 0.52);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.12) 0%, transparent 48%),
        rgba(18, 14, 10, 0.72);
}

.age-guild-gear-slot.is-rarity-uncommon {
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 180, 0.16),
        0 0 10px rgba(120, 196, 120, 0.18);
}

.age-guild-gear-slot-label {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.58);
}

.age-guild-gear-slot-item {
    font-size: 0.64rem;
    line-height: 1.25;
    color: #ffe7a8;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.age-guild-gear-slot-empty {
    font-size: 0.64rem;
    color: rgba(236, 220, 180, 0.42);
    font-style: italic;
}

.age-guild-gear-stats {
    padding-top: 8px;
    border-top: 1px solid rgba(184, 144, 48, 0.22);
}

.age-guild-gear-stats-title {
    margin: 0 0 6px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.68);
}

.age-guild-gear-training-scope-note {
    margin: 0 0 8px;
    font-size: 0.68rem;
    line-height: 1.35;
    color: rgba(236, 220, 180, 0.48);
    font-style: italic;
}

.age-guild-gear-stat-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.age-guild-gear-stat-lines li {
    margin: 0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.74rem;
    color: #d8f0c2;
    background: rgba(44, 68, 36, 0.34);
    border-left: 2px solid rgba(143, 208, 118, 0.55);
}

.age-guild-gear-stat-lines li.is-neutral {
    color: rgba(236, 220, 180, 0.62);
    background: rgba(0, 0, 0, 0.22);
    border-left-color: rgba(184, 144, 48, 0.38);
}

#age-page-canvas[data-age-view="guild-training"] .age-guild-job-top-panel,
body.age-guild-training-open .age-guild-training-modal-dialog .age-guild-job-top-panel--training {
    border: 1px solid var(--age-hud-rail-border);
    border-radius: 6px;
    background:
        var(--age-hud-rail-sheen),
        var(--age-hud-rail-bg);
    box-shadow: var(--age-hud-rail-inset), var(--age-hud-rail-shadow);
}

.age-guild-loot-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.age-guild-loot-idle,
.age-guild-loot-entry {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(244, 232, 200, 0.84);
}

.age-guild-loot-entry {
    padding: 8px 10px;
    border-left: 2px solid rgba(255, 215, 120, 0.55);
    background: rgba(0, 0, 0, 0.22);
}

.age-guild-loot-entry-gold {
    color: #ffd978;
    font-weight: 700;
}

.age-guild-battle-controls-dock {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: min(680px, calc(100% - 32px));
    pointer-events: none;
    z-index: 3;
}

.age-guild-battle-controls-dock .age-guild-xp-float-host {
    position: relative;
    min-height: 52px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}

.age-guild-battle-controls-dock .age-guild-battle-progress-stack {
    width: 100%;
    margin: 0;
    padding: 8px 10px 2px;
    box-sizing: border-box;
    gap: 8px;
    pointer-events: auto;
    border-radius: 6px;
    border: 1px solid rgba(108, 78, 36, 0.55);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.05) 0%, transparent 36%),
        linear-gradient(165deg, rgba(22, 16, 10, 0.92) 0%, rgba(8, 6, 4, 0.88) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.1),
        0 6px 18px rgba(0, 0, 0, 0.28);
}

.age-guild-battle-controls-dock .age-guild-xp-row,
.age-guild-battle-controls-dock .age-guild-units-row {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
}

.age-guild-battle-controls-dock .age-guild-bar-meta {
    min-width: 88px;
    font-size: 0.72rem;
}

#age-page-canvas[data-age-view="guild-training"] .age-guild-top-band {
    padding-right: max(16px, env(safe-area-inset-right));
}

#age-page-canvas[data-age-view="guild-training"] .age-guild-job-top-panel--training {
    padding: 10px 16px;
}

#age-page-canvas[data-age-view="guild-training"] .age-guild-job-top-panel--training .age-guild-training-title {
    margin: 0;
}

.age-guild-training-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.age-guild-training-return-btn {
    flex: 0 0 auto;
    margin-left: auto;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 6px;
    padding: 6px 12px;
    background: rgba(12, 10, 8, 0.88);
    color: rgba(255, 215, 120, 0.88);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
}

.age-guild-training-return-btn:hover,
.age-guild-training-return-btn:focus-visible {
    border-color: rgba(255, 215, 120, 0.75);
    color: #ffd978;
}

/* Medieval war-table battle board */
.age-guild-battle-board {
    position: relative;
    pointer-events: auto;
    width: min(620px, 100%);
    padding: 0 0 6px;
    box-sizing: border-box;
}

.age-guild-battle-board-slab {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(108, 78, 36, 0.85);
    background:
        linear-gradient(180deg, rgba(255, 220, 150, 0.14) 0%, transparent 38%),
        linear-gradient(180deg, #5c4528 0%, #3a2a18 52%, #221910 100%);
    box-shadow:
        inset 0 1px 0 rgba(220, 180, 110, 0.28),
        inset 0 -2px 0 rgba(0, 0, 0, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.48);
}

.age-guild-battle-board-slab::before,
.age-guild-battle-board-slab::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(184, 144, 48, 0.55);
    pointer-events: none;
}

.age-guild-battle-board-slab::before {
    left: -5px;
    border-right: none;
    border-bottom: none;
}

.age-guild-battle-board-slab::after {
    right: -5px;
    border-left: none;
    border-bottom: none;
}

.age-guild-battle-board-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 10px;
    padding: 0 6px 16px;
    box-sizing: border-box;
}

.age-guild-battle-board-side {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    z-index: 1;
}

.age-guild-battle-board-side--left {
    justify-content: flex-end;
}

.age-guild-battle-board-side--right {
    justify-content: flex-start;
}

.age-guild-board-pill {
    position: relative;
    min-width: 88px;
    margin: 0;
    padding: 9px 14px;
    border-radius: 5px;
    border: 1px solid var(--age-hud-rail-border);
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.08) 0%, transparent 32%),
        linear-gradient(165deg, rgba(36, 28, 18, 0.96) 0%, rgba(10, 8, 6, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.14),
        0 4px 10px rgba(0, 0, 0, 0.38);
    color: rgba(244, 232, 200, 0.9);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition:
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.age-guild-board-pill:hover:not(:disabled),
.age-guild-board-pill:focus-visible:not(:disabled) {
    border-color: rgba(255, 215, 120, 0.72);
    color: #ffd978;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.22),
        0 6px 14px rgba(0, 0, 0, 0.42);
}

.age-guild-board-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.age-guild-board-pill.is-active {
    color: #1a1208;
    border-color: rgba(255, 220, 140, 0.88);
    background: linear-gradient(180deg, #e8c56a 0%, #c9982f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.age-guild-battle-board-war-hub {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    margin-bottom: 2px;
}

.age-guild-battle-board-war-pedestal {
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 92px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse 100% 100% at 50% 40%, rgba(48, 34, 18, 0.95) 0%, rgba(12, 8, 4, 0.55) 72%, transparent 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.age-guild-battle-board .age-guild-battle-btn-wrap {
    position: relative;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    touch-action: none;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.52));
}

.age-guild-battle-board .age-guild-battle-circle {
    width: 92px;
    height: 92px;
    border-width: 4px;
    font-size: 0.98rem;
    box-shadow:
        inset 0 2px 0 rgba(255, 235, 180, 0.24),
        inset 0 -3px 8px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(255, 215, 120, 0.12),
        0 10px 22px rgba(0, 0, 0, 0.48);
}

.age-guild-battle-board .age-guild-battle-circle.is-ready:not(:disabled) {
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 245, 200, 0.55), transparent 54%),
        linear-gradient(180deg, #f0d070 0%, #c9982f 48%, #8a6520 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 245, 210, 0.55),
        inset 0 -4px 10px rgba(120, 82, 18, 0.45),
        0 0 0 4px rgba(255, 215, 120, 0.2),
        0 0 24px rgba(255, 196, 88, 0.32),
        0 12px 28px rgba(0, 0, 0, 0.5);
}

.age-guild-battle-board .age-guild-charge-ring-track {
    stroke: rgba(184, 144, 48, 0.28);
    stroke-width: 4;
}

.age-guild-battle-board .age-guild-charge-ring-progress {
    stroke: #ffe7a8;
    stroke-width: 5;
    filter: drop-shadow(0 0 6px rgba(255, 215, 120, 0.65));
}

.age-guild-xp-float-host {
    position: relative;
    min-height: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.age-guild-xp-float {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #ffe7a8;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.72),
        0 0 24px rgba(255, 196, 88, 0.42);
    animation: age-guild-xp-float-rise 2.6s ease-out forwards;
    pointer-events: none;
}

@keyframes age-guild-xp-float-rise {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    12% {
        opacity: 1;
        transform: translateY(0);
    }
    72% {
        opacity: 1;
        transform: translateY(-32px);
    }
    100% {
        opacity: 0;
        transform: translateY(-56px);
    }
}

.age-guild-trade-arena,
.age-guild-bounties-arena {
    grid-template-rows: auto minmax(0, 1fr);
}

/* Guild job modals keep settlement/map visible under the backdrop. */

.age-guild-top-band,
.age-guild-bottom-band,
.age-guild-battle-deck,
.age-guild-battle-board,
.age-guild-battle-board-war-hub,
.age-guild-battle-btn-wrap,
.age-guild-job-body,
.age-guild-job-back,
.age-guild-job-close {
    pointer-events: auto;
}

.age-guild-top-band,
.age-guild-bottom-band {
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.age-guild-top-band {
    padding-top: 4px;
    padding-right: calc(max(16px, env(safe-area-inset-right)) + 88px);
}

.age-guild-bottom-band {
    padding-bottom: 6px;
    max-height: min(42vh, 360px);
}

.age-guild-job-body {
    min-height: 0;
    overflow: auto;
    padding: 0 max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
}

.age-guild-job-top-panel {
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 8px;
    padding: 12px 16px;
    background:
        linear-gradient(180deg, rgba(255, 215, 128, 0.07) 0%, transparent 28%),
        linear-gradient(165deg, rgba(28, 22, 14, 0.94) 0%, rgba(8, 6, 4, 0.92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.12),
        0 10px 28px rgba(0, 0, 0, 0.42);
}

.age-guild-job-back {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.age-guild-job-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 6px;
    padding: 7px 12px;
    background: rgba(12, 10, 8, 0.88);
    color: #f4e8c8;
    cursor: pointer;
}

.age-guild-job-close:hover,
.age-guild-job-close:focus-visible {
    border-color: rgba(255, 215, 120, 0.75);
    color: #ffd700;
}

.age-guild-progress-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 0;
    padding-right: 0;
}

.age-guild-xp-row,
.age-guild-units-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.age-guild-bar-label {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(236, 220, 180, 0.72);
}

.age-guild-bar-label strong {
    display: block;
    color: #ffd978;
    font-size: 0.78rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.age-guild-bar-meta {
    min-width: 96px;
    font-size: 0.74rem;
    text-align: right;
    color: rgba(236, 220, 180, 0.62);
    white-space: nowrap;
}

.age-guild-xp-bar-track,
.age-guild-units-bar-track {
    position: relative;
    height: 16px;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(4, 3, 2, 0.72);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}

.age-guild-xp-bar-track {
    height: 18px;
}

.age-guild-xp-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8f6f1f 0%, #e8c56a 45%, #ffd978 100%);
    box-shadow: 0 0 12px rgba(255, 215, 120, 0.35);
    transition: width 0.35s ease;
}

.age-guild-units-bar-track {
    height: 12px;
}

.age-guild-units-bar-fill {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f6b3a 0%, #6fcf7a 55%, #9fd88d 100%);
    box-shadow: 0 0 10px rgba(111, 207, 122, 0.28);
    transition: width 0.35s ease;
}

.age-guild-log {
    max-height: min(36vh, 280px);
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    border-radius: 8px;
    background: rgba(4, 3, 2, 0.55);
}

.age-guild-log-idle,
.age-guild-log-entry {
    color: rgba(236, 220, 180, 0.78);
}

.age-guild-log-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #f4e8c8;
}

.age-guild-log-idle p {
    margin: 0 0 10px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.age-guild-log-head {
    margin-bottom: 10px;
}

.age-guild-log-outcome {
    margin: 0 0 4px;
    font-size: 1.08rem;
    color: #f4e8c8;
}

.age-guild-log-entry.is-victory .age-guild-log-outcome {
    color: #9fd88d;
}

.age-guild-log-entry.is-defeat .age-guild-log-outcome {
    color: #e59a9a;
}

.age-guild-log-meta,
.age-guild-log-promotion {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(236, 220, 180, 0.68);
}

.age-guild-log-promotion {
    margin-top: 4px;
    color: #ffd978;
}

.age-guild-battle-log {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(244, 232, 200, 0.82);
}

.age-guild-battle-report-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(184, 144, 48, 0.18);
    margin-bottom: 8px;
}

.age-guild-battle-log-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(241, 224, 172, 0.82);
}

.age-guild-battle-log-toggle-input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #c8942c;
    cursor: pointer;
}

.age-guild-battle-log-toggle:hover,
.age-guild-battle-log-toggle:focus-within {
    color: #ffd978;
}

#age-guild-battle-tab-details {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#age-guild-battle-tab-details .age-guild-log {
    flex: 1 1 auto;
    min-height: 0;
}

.age-guild-log-summary {
    display: grid;
    gap: 8px;
}

.age-guild-log-summary-row {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(244, 232, 200, 0.9);
}

.age-guild-log-summary-label {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(241, 224, 172, 0.72);
}

.age-guild-log-summary-value {
    font-weight: 600;
    color: #f1e0ac;
    text-align: right;
}

.age-guild-log-summary-section {
    display: grid;
    gap: 6px;
}

.age-guild-log-extended {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(184, 144, 48, 0.22);
    display: grid;
    gap: 8px;
}

.age-guild-log-head--extended {
    display: grid;
    gap: 4px;
}

.age-guild-battle-deck:not(.age-guild-battle-board) {
    position: relative;
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto auto auto 132px;
    grid-template-rows: auto;
    align-items: end;
    justify-items: center;
    gap: 10px 12px;
    width: auto;
    min-height: 0;
    padding-bottom: 0;
}

.age-guild-battle-board.age-guild-battle-deck {
    display: block;
    grid-template-columns: unset;
    gap: 0;
    width: min(620px, 100%);
    padding-bottom: 0;
}

.age-guild-battle-btn-wrap {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    touch-action: none;
}

.age-guild-charge-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.age-guild-charge-ring-track {
    fill: none;
    stroke: rgba(184, 144, 48, 0.22);
    stroke-width: 5;
}

.age-guild-charge-ring-progress {
    fill: none;
    stroke: #ffd978;
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.age-guild-battle-btn-wrap.is-charging .age-guild-charge-ring-progress {
    opacity: 1;
    animation: age-guild-charge-ring var(--age-guild-charge-duration, 0.93s) linear forwards;
}

@keyframes age-guild-charge-ring {
    from {
        stroke-dashoffset: var(--age-guild-charge-circumference, 289);
    }
    to {
        stroke-dashoffset: 0;
    }
}

.age-guild-battle-circle {
    position: relative;
    z-index: 1;
    width: 104px;
    height: 104px;
    border: 5px solid rgba(255, 215, 120, 0.82);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 235, 160, 0.28), transparent 52%),
        linear-gradient(180deg, rgba(36, 28, 16, 0.98) 0%, rgba(12, 10, 8, 0.98) 100%);
    color: #ffd978;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: not-allowed;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.18),
        0 10px 24px rgba(0, 0, 0, 0.45);
    touch-action: none;
    user-select: none;
}

.age-guild-battle-circle.is-ready:not(:disabled) {
    cursor: pointer;
    color: #1a1208;
    border-color: rgba(255, 220, 140, 0.95);
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 248, 220, 0.55), transparent 52%),
        linear-gradient(180deg, #e8c56a 0%, #c9982f 100%);
}

.age-guild-battle-circle.is-ready:not(:disabled):hover,
.age-guild-battle-circle.is-ready:not(:disabled):focus-visible {
    filter: brightness(1.05);
}

.age-guild-battle-circle.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.age-guild-battle-circle.is-busy:not(:disabled) {
    opacity: 0.82;
    cursor: pointer;
}

.age-guild-battle-btn-wrap.is-charging .age-guild-battle-circle.is-ready:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.28),
        0 0 0 4px rgba(255, 215, 120, 0.12),
        0 10px 24px rgba(0, 0, 0, 0.45);
}

.age-guild-satellite-btn:not(.age-guild-board-pill) {
    position: absolute;
    min-width: 92px;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 999px;
    padding: 9px 14px;
    background: rgba(12, 10, 8, 0.92);
    color: #f4e8c8;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
}

.age-guild-satellite-btn:not(.age-guild-board-pill):hover:not(:disabled),
.age-guild-satellite-btn:not(.age-guild-board-pill):focus-visible:not(:disabled) {
    border-color: rgba(255, 215, 120, 0.75);
    color: #ffd978;
}

.age-guild-satellite-btn:not(.age-guild-board-pill):disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.age-guild-satellite-btn:not(.age-guild-board-pill).is-active {
    color: #1a1208;
    border-color: rgba(255, 220, 140, 0.85);
    background: linear-gradient(180deg, #e8c56a 0%, #c9982f 100%);
}

.age-guild-satellite-btn--heal:not(.age-guild-board-pill) {
    left: calc(50% - 210px);
    top: 50%;
    transform: translateY(-50%);
}

.age-guild-satellite-btn--heal-all:not(.age-guild-board-pill) {
    right: calc(50% - 210px);
    top: 50%;
    transform: translateY(-50%);
}

.age-guild-satellite-btn--auto-heal:not(.age-guild-board-pill) {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.age-guild-view {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.age-guild-view.is-active {
    display: flex;
    flex-direction: column;
}

.age-guild-back {
    align-self: flex-start;
    margin: 0 0 10px;
    border: none;
    background: transparent;
    color: rgba(255, 215, 120, 0.82);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
}

.age-guild-back:hover,
.age-guild-back:focus-visible {
    color: #ffd978;
}

.age-guild-job-back {
    margin: 0;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 6px;
    padding: 7px 12px;
    background: rgba(12, 10, 8, 0.88);
    color: #f4e8c8;
}

.age-guild-training-title {
    margin: 0 0 12px;
    font-size: 1.2rem;
    color: #f4e8c8;
}

.age-guild-hub-header {
    margin-bottom: 16px;
    padding-right: 88px;
}

.age-guild-hub-eyebrow {
    margin: 0 0 4px;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 210, 120, 0.72);
}

.age-guild-hub-title {
    margin: 0 0 8px;
    font-size: 1.45rem;
    color: #f4e8c8;
}

.age-guild-hub-subtitle {
    margin: 0;
    max-width: 62ch;
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(236, 220, 180, 0.72);
}

.age-guild-hub-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.age-guild-hub-training-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 8px;
    padding: 8px;
    background: rgba(8, 6, 4, 0.42);
}

.age-guild-hub-training-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 8px;
    padding: 12px 36px 12px 14px;
    background: linear-gradient(165deg, rgba(36, 28, 18, 0.96) 0%, rgba(12, 10, 8, 0.94) 100%);
    color: #f4e8c8;
    cursor: pointer;
    text-align: left;
}

.age-guild-hub-training-toggle::after {
    content: '\25BE';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 215, 120, 0.72);
    transition: transform 0.2s ease;
}

.age-guild-hub-training-group.is-expanded .age-guild-hub-training-toggle::after {
    transform: translateY(-50%) rotate(180deg);
}

.age-guild-hub-training-toggle-label {
    font-size: 0.98rem;
    font-weight: 600;
    color: #ffd978;
}

.age-guild-hub-training-toggle-meta {
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(236, 220, 180, 0.68);
}

.age-guild-hub-training-modes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 8px;
}

.age-guild-hub-training-mode .age-guild-hub-option {
    width: 100%;
}

.age-guild-hub-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    border: 1px solid rgba(184, 144, 48, 0.34);
    border-radius: 10px;
    padding: 14px 16px;
    background: rgba(8, 6, 5, 0.72);
    color: #f4e8c8;
    cursor: pointer;
}

.age-guild-hub-option.is-featured:not(.is-locked) {
    border-color: rgba(255, 215, 120, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.18);
}

.age-guild-hub-option.is-locked,
.age-guild-hub-option:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.age-guild-hub-option:not(.is-locked):not(:disabled):hover,
.age-guild-hub-option:not(.is-locked):not(:disabled):focus-visible {
    border-color: rgba(255, 215, 120, 0.75);
    color: #ffd978;
}

.age-guild-hub-option-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.age-guild-hub-option-label {
    font-size: 1rem;
    font-weight: 600;
}

.age-guild-hub-option-tag {
    border: 1px solid rgba(255, 215, 120, 0.55);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffd978;
}

.age-guild-hub-option-desc,
.age-guild-hub-option-lock,
.age-guild-hub-empty {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(236, 220, 180, 0.68);
}

.age-guild-hub-option-lock {
    color: rgba(229, 154, 154, 0.82);
}

.age-guild-section-title {
    margin: 0 0 10px;
    font-size: 0.92rem;
    color: #f4e8c8;
}

.age-guild-trade-lots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.age-guild-trade-lot {
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(4, 3, 2, 0.55);
}

.age-guild-trade-lot-title {
    margin: 0 0 6px;
    font-size: 0.92rem;
    color: #f4e8c8;
}

.age-guild-trade-lot-meta {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: rgba(236, 220, 180, 0.68);
}

.age-guild-trade-buy-btn,
.age-guild-bounty-accept-btn {
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 999px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #e8c56a 0%, #c9982f 100%);
    color: #1a1208;
    font-size: 0.78rem;
    cursor: pointer;
}

.age-guild-trade-inventory-list {
    display: grid;
    gap: 8px;
}

.age-guild-trade-inventory-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(184, 144, 48, 0.22);
    border-radius: 6px;
    font-size: 0.8rem;
    color: rgba(244, 232, 200, 0.86);
}

.age-guild-trade-empty,
.age-guild-bounty-empty {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(236, 220, 180, 0.68);
}

.age-guild-bounty-active-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 215, 120, 0.35);
    border-radius: 8px;
    background: rgba(255, 215, 120, 0.08);
    color: #ffd978;
    font-size: 0.8rem;
}

.age-guild-bounty-list {
    display: grid;
    gap: 12px;
    overflow: auto;
}

.age-guild-bounty-card {
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(4, 3, 2, 0.55);
}

.age-guild-bounty-card.is-yours {
    border-color: rgba(159, 216, 141, 0.55);
}

.age-guild-bounty-card.is-taken {
    opacity: 0.62;
}

.age-guild-bounty-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.age-guild-bounty-target {
    margin: 0;
    font-size: 0.98rem;
    color: #f4e8c8;
}

.age-guild-bounty-timer {
    font-size: 0.72rem;
    color: rgba(255, 210, 120, 0.72);
}

.age-guild-bounty-nation,
.age-guild-bounty-reward,
.age-guild-bounty-status {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: rgba(236, 220, 180, 0.68);
}

.age-guild-bounty-accept-btn {
    margin-top: 10px;
}

/* ==========================================================================
   CANONICAL TITLE / HEADER TYPOGRAPHY — Royal Family (Metamorphous)
   Overrides scattered Cinzel title rules 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;
}

/* ==========================================================================
   PLAYER REPORT — modal + entry points (portal + Age)
   ========================================================================== */

body.player-report-modal-open {
    overflow: hidden;
}

.player-report-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.player-report-modal[hidden] {
    display: none !important;
}

.player-report-modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

/* Age panel surface — no borderedcontainer_thin image */
.player-report-modal-panel,
.player-report-modal-panel.bordered-modal-panel,
.player-report-modal-panel.portal-deployment-server-panel {
    position: relative;
    z-index: 1;
    width: min(600px, calc(100vw - 32px));
    max-width: 100%;
    max-height: min(90vh, 820px);
    overflow: auto;
    padding: 0;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.72) !important;
}

.player-report-modal-surface {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(184, 144, 48, 0.52);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, transparent 18%),
        linear-gradient(165deg, rgba(28, 22, 14, 0.96) 0%, rgba(6, 5, 4, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.1),
        0 12px 32px rgba(0, 0, 0, 0.45);
}

.player-report-modal-surface::before,
.player-report-modal-surface::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(255, 215, 0, 0.35);
    border-style: solid;
    pointer-events: none;
    z-index: 0;
}

.player-report-modal-surface::before {
    top: 8px;
    left: 8px;
    border-width: 1px 0 0 1px;
}

.player-report-modal-surface::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 1px 1px 0;
}

.player-report-modal-header,
.player-report-modal-body {
    position: relative;
    z-index: 1;
}

.player-report-modal-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 48px 14px 18px;
    border-bottom: 1px solid rgba(180, 48, 32, 0.55);
    border-radius: 9px 9px 0 0;
    background:
        linear-gradient(180deg, rgba(255, 120, 90, 0.12) 0%, transparent 42%),
        linear-gradient(165deg, rgba(108, 24, 24, 0.98) 0%, rgba(42, 10, 10, 0.99) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 180, 150, 0.14);
}

.player-report-modal-eyebrow {
    margin: 0;
    font-family: 'RoyalDetails', serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 196, 168, 0.82);
}

.player-report-modal-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffc4b0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.88), 0 0 12px rgba(220, 72, 48, 0.22);
}

.player-report-modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 160, 130, 0.42);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 220, 200, 0.92);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.player-report-modal-close-btn:hover {
    color: #fff;
    background: rgba(120, 28, 28, 0.55);
    border-color: rgba(255, 180, 150, 0.72);
}

.player-report-modal-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-report-modal-lead {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #e8dcc8;
}

.player-report-modal-lead a {
    color: #ffd978;
}

.player-report-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.player-report-field-label {
    font-family: 'RoyalDetails', serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(241, 224, 172, 0.82);
}

.player-report-category-hint {
    margin: -4px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(232, 220, 200, 0.72);
}

.player-report-select-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 560px) {
    .player-report-select-row {
        grid-template-columns: 1fr;
    }
}

.player-report-select-shell {
    position: relative;
}

.player-report-select-shell::after {
    content: '\25BE';
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-52%);
    pointer-events: none;
    font-size: 0.85rem;
    color: rgba(255, 215, 0, 0.75);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.28);
}

.player-report-field-input,
.player-report-field-select,
.player-report-field-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(184, 144, 48, 0.38);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.42);
    color: #e8dcc8;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.88rem;
    padding: 9px 10px;
}

.player-report-field-select {
    padding-right: 34px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background:
        linear-gradient(180deg, rgba(42, 34, 22, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%);
    color: #fff3d4;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 215, 0, 0.06);
}

.player-report-field-select:hover:not(:disabled) {
    border-color: rgba(255, 215, 0, 0.55);
}

.player-report-field-select:focus {
    outline: 1px solid rgba(255, 217, 120, 0.55);
    border-color: rgba(255, 217, 120, 0.45);
}

.player-report-field-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.player-report-field-select option,
.player-report-field-select optgroup {
    background: #14100c;
    color: #e8dcc8;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
}

.player-report-commander-autocomplete {
    position: relative;
}

.player-report-commander-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(184, 144, 48, 0.45);
    border-radius: 4px;
    background: rgba(12, 10, 8, 0.98);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.player-report-commander-suggest[hidden] {
    display: none !important;
}

.player-report-commander-suggest-item {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: #f1e0ac;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.player-report-commander-suggest-item:hover,
.player-report-commander-suggest-item.is-highlighted {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.1);
    color: #ffd978;
}

.player-report-commander-suggest-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: rgba(201, 181, 130, 0.75);
}

.player-report-field-input {
    opacity: 0.92;
    cursor: default;
}

.player-report-field-input--editable {
    cursor: text;
}

.player-report-field-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.45;
}

.player-report-field-textarea:focus {
    outline: 1px solid rgba(255, 217, 120, 0.55);
    border-color: rgba(255, 217, 120, 0.45);
}

.player-report-screenshot-field {
    gap: 8px;
}

.player-report-screenshot-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.player-report-screenshot-hint {
    margin: 0;
    font-size: 0.74rem;
    color: rgba(232, 220, 200, 0.62);
}

.player-report-screenshot-add-btn,
.player-report-screenshot-clear-btn {
    padding: 8px 12px;
    border-radius: 3px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.player-report-screenshot-add-btn {
    border: 1px solid rgba(184, 144, 48, 0.45);
    background: rgba(0, 0, 0, 0.38);
    color: rgba(241, 224, 172, 0.92);
}

.player-report-screenshot-add-btn:hover {
    border-color: rgba(255, 215, 0, 0.62);
    color: #ffd978;
    background: rgba(184, 144, 48, 0.14);
}

.player-report-screenshot-clear-btn {
    border: 1px solid rgba(220, 96, 72, 0.45);
    background: rgba(48, 16, 12, 0.55);
    color: rgba(255, 176, 148, 0.94);
}

.player-report-screenshot-clear-btn:hover {
    border-color: rgba(240, 112, 88, 0.75);
    color: rgba(255, 210, 188, 1);
}

.player-report-screenshot-preview {
    margin: 4px 0 0;
    padding: 8px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.32);
}

.player-report-screenshot-preview-img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto;
    border-radius: 4px;
    object-fit: contain;
}

.player-report-context-block {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(184, 144, 48, 0.28);
    background: rgba(0, 0, 0, 0.32);
}

.player-report-context-text {
    margin: 4px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(232, 220, 200, 0.88);
    white-space: pre-wrap;
    word-break: break-word;
}

.player-report-details-counter {
    margin: -4px 0 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.72rem;
    color: rgba(160, 150, 130, 0.82);
}

.player-report-details-counter.is-valid {
    color: rgba(120, 196, 140, 0.92);
}

.player-report-details-counter.is-invalid {
    color: rgba(220, 140, 120, 0.92);
}

.player-report-feedback {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.82rem;
    line-height: 1.4;
}

.player-report-feedback.is-error {
    color: rgba(255, 148, 128, 0.95);
}

.player-report-feedback.is-success {
    color: rgba(128, 210, 148, 0.95);
}

.player-report-modal-actions {
    margin-top: 4px;
}

.public-profile-report-btn {
    font-family: 'Cinzel', serif !important;
    font-size: 0.78rem !important;
    font-weight: bold !important;
    padding: 9px 18px !important;
    cursor: pointer !important;
    border-radius: 2px !important;
    border: 1px solid rgba(220, 96, 72, 0.42) !important;
    color: rgba(255, 176, 148, 0.94) !important;
    background: rgba(48, 16, 12, 0.72) !important;
    transition: filter 0.2s ease, transform 0.1s ease !important;
}

.public-profile-report-btn:hover {
    filter: brightness(1.08);
    border-color: rgba(220, 96, 72, 0.62) !important;
}

.chat-message-action-btn--report {
    color: rgba(255, 176, 148, 0.94);
    border-color: rgba(220, 96, 72, 0.38);
}

.chat-message-action-btn--report:hover {
    color: rgba(255, 196, 168, 0.98);
    border-color: rgba(220, 96, 72, 0.58);
}

#age-page-canvas .age-city-info-player-report-btn,
.age-headquarters-players-rail .age-city-info-player-report-btn {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid rgba(220, 96, 72, 0.38);
    background: rgba(48, 16, 12, 0.55);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 176, 148, 0.92);
    cursor: pointer;
    white-space: nowrap;
}

#age-page-canvas .age-city-info-player-report-btn:hover,
.age-headquarters-players-rail .age-city-info-player-report-btn:hover {
    border-color: rgba(220, 96, 72, 0.58);
    color: rgba(255, 196, 168, 0.98);
}

/* --- Commander rank promotion popup (above guild job center modals ~13061) --- */
.age-rank-promotion-overlay {
    position: fixed;
    inset: 0;
    z-index: 13120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 6, 10, 0.78);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

body.age-rank-promotion-open #age-rank-promotion-overlay {
    z-index: 2147483646 !important;
    pointer-events: auto !important;
}

body.age-rank-promotion-open #age-rank-promotion-overlay * {
    pointer-events: auto !important;
}

.age-rank-promotion-overlay[hidden] {
    display: none !important;
}

.age-rank-promotion-card {
    width: min(480px, 100%);
    padding: 28px 32px;
    border: 1px solid rgba(255, 210, 120, 0.45);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(48, 36, 18, 0.98) 0%, rgba(16, 12, 8, 0.98) 100%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    text-align: center;
}

.age-rank-promotion-eyebrow {
    margin: 0 0 8px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 210, 120, 0.82);
}

.age-rank-promotion-title {
    margin: 0 0 12px;
    font-size: 1.65rem;
    color: rgba(255, 232, 180, 0.96);
}

.age-rank-promotion-rank-line {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: rgba(240, 228, 200, 0.92);
}

.age-rank-promotion-detail,
.age-rank-promotion-provisions {
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(210, 198, 170, 0.88);
}

.age-rank-promotion-provisions {
    color: rgba(140, 220, 160, 0.92);
    font-weight: 600;
}

.age-rank-promotion-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 10px;
}

.age-rank-promotion-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.age-rank-promotion-btn {
    min-width: 140px;
    padding: 10px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 210, 120, 0.35);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.age-rank-promotion-btn--primary {
    color: rgba(24, 18, 10, 0.96);
    background: linear-gradient(180deg, rgba(255, 220, 140, 0.96), rgba(210, 160, 70, 0.96));
}

.age-rank-promotion-btn--secondary {
    color: rgba(255, 232, 190, 0.94);
    background: linear-gradient(180deg, rgba(48, 36, 20, 0.96), rgba(28, 20, 12, 0.98));
    border-color: rgba(255, 210, 120, 0.42);
}

.age-rank-promotion-btn--continue {
    width: 100%;
    min-width: 0;
    padding: 12px 18px;
    color: rgba(255, 238, 196, 0.98);
    background: linear-gradient(180deg, rgba(62, 48, 26, 0.98) 0%, rgba(34, 24, 14, 0.98) 100%);
    border: 1px solid rgba(255, 210, 120, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 140, 0.16),
        0 4px 14px rgba(0, 0, 0, 0.38);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.age-rank-promotion-btn:hover,
.age-rank-promotion-btn:focus-visible {
    filter: brightness(1.08);
}

.age-rank-promotion-btn--continue:hover,
.age-rank-promotion-btn--continue:focus-visible {
    filter: brightness(1.12);
    border-color: rgba(255, 228, 150, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 230, 160, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 210, 120, 0.18);
}

.age-rank-promotion-btn:active {
    transform: translateY(1px);
}

/* --- Equipment level-up popup (guild training mastery) --- */
body.age-gear-level-up-open #age-gear-level-up-overlay {
    z-index: 2147483645 !important;
    pointer-events: auto !important;
}

body.age-gear-level-up-open #age-gear-level-up-overlay * {
    pointer-events: auto !important;
}

.age-gear-level-up-item-line {
    margin: 0 0 10px;
    font-size: 1.15rem;
    color: rgba(240, 228, 200, 0.94);
}

.age-gear-level-up-levels-line {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: rgba(255, 224, 168, 0.92);
}

.age-gear-level-up-levels-line strong {
    color: rgba(255, 236, 190, 0.98);
}

/* --- Battle log unit promotion callout --- */
.age-guild-log-unit-promote {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(120, 200, 140, 0.35);
    border-radius: 4px;
    background: rgba(16, 36, 24, 0.55);
}

.age-guild-log-unit-promote-title {
    margin: 0 0 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(160, 230, 175, 0.94);
}

.age-guild-log-unit-promote-list {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 0.82rem;
    color: rgba(210, 230, 215, 0.88);
}

.age-guild-log-workspace-links {
    margin: 8px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(210, 198, 170, 0.82);
}

.age-guild-log-workspace-links-label {
    color: rgba(190, 180, 160, 0.78);
}

.age-guild-log-workspace-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 220, 150, 0.94);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.age-guild-log-workspace-link:hover,
.age-guild-log-workspace-link:focus-visible {
    color: rgba(255, 235, 180, 0.98);
}

.age-guild-log-workspace-sep {
    color: rgba(160, 150, 130, 0.72);
}

.age-guild-open-evolution-btn {
    padding: 7px 12px;
    border-radius: 3px;
    border: 1px solid rgba(120, 200, 140, 0.42);
    background: rgba(24, 48, 32, 0.72);
    color: rgba(170, 240, 185, 0.94);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.age-guild-open-evolution-btn:hover {
    filter: brightness(1.1);
}

/* --- Unit Evolution workspace --- */
.age-unit-evolution-workspace {
    position: fixed;
    inset: 0;
    z-index: 12040;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 32px 40px;
    background: transparent;
}

.age-unit-evolution-workspace[hidden] {
    display: none !important;
}

.age-unit-evolution-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: calc(100vh - 64px);
    border: 1px solid rgba(255, 210, 120, 0.32);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(28, 22, 14, 0.98), rgba(10, 8, 6, 0.98));
    overflow: hidden;
}

.age-unit-evolution-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid rgba(255, 210, 120, 0.18);
}

.age-unit-evolution-eyebrow {
    margin: 0 0 4px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 210, 120, 0.72);
}

.age-unit-evolution-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    color: rgba(255, 232, 190, 0.96);
}

.age-unit-evolution-subtitle,
.age-unit-evolution-ready-count {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: rgba(200, 190, 170, 0.82);
}

.age-unit-evolution-ready-count {
    margin-top: 6px;
    color: rgba(150, 220, 170, 0.9);
}

.age-unit-evolution-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.age-unit-evolution-wallet {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 6px 10px;
    border: 1px solid rgba(255, 210, 120, 0.22);
    border-radius: 4px;
    background: rgba(20, 16, 10, 0.6);
}

.age-unit-evolution-wallet-label {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200, 180, 140, 0.72);
}

.age-unit-evolution-wallet-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 232, 190, 0.94);
}

.age-unit-evolution-link-btn,
.age-unit-evolution-close {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 210, 120, 0.28);
    background: rgba(32, 26, 16, 0.72);
    color: rgba(240, 220, 180, 0.9);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.age-unit-evolution-close {
    min-width: 92px;
    padding: 10px 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.age-unit-evolution-status {
    margin: 0;
    padding: 8px 24px;
    font-size: 0.84rem;
    color: rgba(160, 220, 175, 0.92);
    background: rgba(16, 32, 22, 0.45);
}

.age-unit-evolution-stack-list {
    flex: 1;
    overflow: auto;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.age-unit-evolution-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.age-unit-evolution-category-title {
    margin: 0;
    padding-bottom: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 210, 120, 0.78);
    border-bottom: 1px solid rgba(255, 210, 120, 0.14);
}

.age-unit-evolution-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.age-unit-evolution-group-title {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: rgba(220, 200, 160, 0.88);
}

.age-unit-evolution-group-stacks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.age-unit-evolution-stack-xp {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: rgba(190, 220, 190, 0.92);
}

.age-unit-evolution-qty-picker {
    margin-bottom: 10px;
}

.age-unit-evolution-qty-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(190, 180, 160, 0.72);
}

.age-unit-evolution-qty-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.age-unit-evolution-qty-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.age-unit-evolution-qty-custom.is-custom-active .age-unit-evolution-qty-input {
    border-color: rgba(255, 210, 120, 0.48);
    background: rgba(48, 38, 22, 0.92);
    color: rgba(255, 232, 190, 0.96);
}

.age-unit-evolution-qty-custom-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(190, 180, 160, 0.72);
}

.age-unit-evolution-qty-input {
    width: 88px;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 210, 120, 0.22);
    background: rgba(24, 20, 14, 0.72);
    color: rgba(230, 210, 170, 0.88);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.age-unit-evolution-qty-input:focus-visible {
    outline: none;
    border-color: rgba(255, 210, 120, 0.48);
    box-shadow: 0 0 0 1px rgba(255, 210, 120, 0.24);
}

.age-unit-evolution-qty-input::-webkit-outer-spin-button,
.age-unit-evolution-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.age-unit-evolution-qty-input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.age-unit-evolution-qty-btn {
    min-width: 44px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 210, 120, 0.22);
    background: rgba(24, 20, 14, 0.72);
    color: rgba(230, 210, 170, 0.88);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}

.age-unit-evolution-qty-btn.is-active,
.age-unit-evolution-qty-btn:hover:not(:disabled),
.age-unit-evolution-qty-btn:focus-visible:not(:disabled) {
    border-color: rgba(255, 210, 120, 0.48);
    background: rgba(48, 38, 22, 0.92);
    color: rgba(255, 232, 190, 0.96);
}

.age-unit-evolution-qty-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.age-unit-evolution-qty-summary {
    margin: 0;
    font-size: 0.74rem;
    color: rgba(180, 170, 150, 0.78);
}

.age-unit-evolution-empty {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(190, 180, 160, 0.78);
}

.age-unit-evolution-stack {
    padding: 14px 16px;
    border: 1px solid rgba(255, 210, 120, 0.18);
    border-radius: 5px;
    background: rgba(18, 14, 10, 0.72);
}

.age-unit-evolution-stack.is-ready {
    border-color: rgba(120, 200, 140, 0.42);
    box-shadow: inset 0 0 0 1px rgba(120, 200, 140, 0.12);
}

.age-unit-evolution-stack-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.age-unit-evolution-stack-name {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 232, 190, 0.94);
}

.age-unit-evolution-ready-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(20, 36, 24, 0.96);
    background: rgba(140, 220, 160, 0.92);
}

.age-unit-evolution-stack-meta {
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: rgba(190, 180, 160, 0.78);
}

.age-unit-evolution-xp-bar {
    position: relative;
    height: 22px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: rgba(8, 8, 8, 0.55);
    overflow: hidden;
}

.age-unit-evolution-xp-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(90, 160, 110, 0.85), rgba(140, 210, 150, 0.92));
}

.age-unit-evolution-xp-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(240, 240, 230, 0.92);
}

.age-unit-evolution-stack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.age-unit-evolution-action-btn {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 210, 120, 0.28);
    background: rgba(36, 28, 16, 0.88);
    color: rgba(255, 232, 190, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.age-unit-evolution-action-btn--evolve {
    border-color: rgba(120, 180, 255, 0.35);
    color: rgba(190, 220, 255, 0.94);
    background: rgba(16, 24, 40, 0.72);
}

.age-unit-evolution-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.age-unit-evolution-max-tier {
    font-size: 0.78rem;
    color: rgba(180, 170, 150, 0.72);
    align-self: center;
}