/* =========================================================
   CRIMORA CITY — GLOBAL NAVIGATION
   All selectors are prefixed to avoid leaking into page CSS.
========================================================= */

:root {
    --ec-nav-gold: #e6bd55;
    --ec-nav-gold-bright: #ffd76b;
    --ec-nav-gold-dark: #8d661a;
    --ec-nav-bg: #0b0d11;
    --ec-nav-panel: #14171d;
    --ec-nav-panel-raised: #1a1e25;
    --ec-nav-line: rgba(255, 255, 255, 0.09);
    --ec-nav-text: #f4f6f8;
    --ec-nav-muted: #9299a5;
    --ec-nav-danger: #e35b63;
    --ec-nav-success: #39cf84;
    --ec-nav-blue: #46a7ff;
    --ec-nav-purple: #bd78ff;
    --ec-nav-yellow: #f3ce52;
    --ec-nav-radius: 14px;
    --ec-nav-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

#navbar {
    position: sticky;
    top: 0;
    z-index: 10000;
    width: 100%;
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    will-change: transform;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
   Applied by navbar.js after deliberate downward scrolling.
   The full navigation and resource HUD leave together, then return on
   upward scrolling without removing their sticky layout behaviour.
*/
#navbar.ec-navbar-hidden {
    transform: translate3d(0, calc(-1 * var(--ec-navbar-hide-distance, 180px)), 0);
    opacity: 1;
    pointer-events: none;
}

#navbar:focus-within {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

.ec-nav-shell,
.ec-nav-shell * {
    box-sizing: border-box;
}

.ec-nav-shell {
    position: relative;
    width: 100%;
    color: var(--ec-nav-text);
    font-family: inherit;
    background:
        radial-gradient(circle at 15% -120%, rgba(230, 189, 85, 0.2), transparent 44%),
        linear-gradient(180deg, #11141a 0%, #0b0d11 100%);
    border-bottom: 1px solid rgba(230, 189, 85, 0.22);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.48);
    overflow: visible;
}

/* FIX: removed the persistent gold top-edge line (was always visible
   regardless of the grid-texture fix, and read as an unwanted line). */

.ec-nav-main {
    position: relative;
    display: grid;
    /* FIX: the brand (left) and actions (right) columns are rarely equal
       width — "auto ... auto" let the middle nav-links column sit centered
       within its own track, but that track itself was off-center relative
       to the whole bar whenever the two sides differed. 1fr/1fr on both
       sides (auto only for the content-sized middle) centers it for real,
       regardless of how wide either side's content is. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    min-height: 78px;
    padding: 10px clamp(16px, 2vw, 34px);
    transition: min-height 0.25s ease, padding 0.25s ease;
}

.ec-nav-shell.is-condensed .ec-nav-main {
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.ec-nav-brand-area,
.ec-nav-actions,
.ec-nav-brand,
.ec-nav-player-button,
.ec-summary-item,
.ec-resource-heading,
.ec-resource-foot,
.ec-player-menu-header,
.ec-player-menu-level {
    display: flex;
    align-items: center;
}

.ec-nav-brand-area {
    min-width: 194px;
    gap: 10px;
}

.ec-nav-brand {
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ec-nav-logo {
    display: block;
    width: auto;
    height: 56px;
    max-width: 108px;
    object-fit: contain;
    filter: drop-shadow(0 7px 14px rgba(0, 0, 0, 0.45));
    transition: height 0.25s ease, filter 0.2s ease, transform 0.2s ease;
}

.ec-nav-brand:hover .ec-nav-logo {
    transform: translateY(-1px);
    filter:
        drop-shadow(0 7px 14px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 12px rgba(230, 189, 85, 0.24));
}

.ec-nav-shell.is-condensed .ec-nav-logo {
    height: 46px;
}

.ec-nav-logo.is-missing {
    display: none;
}

.ec-nav-brand-copy {
    display: grid;
    gap: 2px;
    white-space: nowrap;
}

.ec-nav-brand-copy strong {
    color: var(--ec-nav-gold-bright);
    font-family: var(--font-display, inherit);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ec-nav-brand-copy small {
    color: var(--ec-nav-muted);
    font-size: 10px;
    letter-spacing: 0.05em;
}

.ec-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}

.ec-nav-links > a,
.ec-admin-slot > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 11px;
    color: #c8cdd5;
    border: 1px solid transparent;
    border-radius: 11px;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-display, inherit);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.015em;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.ec-nav-links > a::after,
.ec-admin-slot > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: var(--ec-nav-gold-bright);
    opacity: 0;
    transform: scaleX(0.45);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ec-nav-links > a:hover,
.ec-admin-slot > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.ec-nav-links > a:hover::after,
.ec-admin-slot > a:hover::after,
.ec-nav-links > a.active::after,
.ec-admin-slot > a.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.ec-nav-links > a.active,
.ec-admin-slot > a.active {
    color: #17130a;
    background: linear-gradient(180deg, var(--ec-nav-gold-bright), var(--ec-nav-gold));
    border-color: rgba(255, 232, 153, 0.88);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.36),
        0 8px 18px rgba(140, 99, 18, 0.24);
}

.ec-nav-links > a.active::after,
.ec-admin-slot > a.active::after {
    background: #fff3c1;
}

.ec-nav-link-icon {
    font-size: 14px;
    line-height: 1;
    filter: saturate(0.84);
}

.ec-nav-alert-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #11141a, 0 0 10px currentColor;
    animation: ecNavPulse 1.6s ease-in-out infinite;
}

.ec-nav-alert-dot--hospital {
    color: #4ebcff;
    background: currentColor;
}

.ec-nav-alert-dot--prison {
    color: #ff6973;
    background: currentColor;
}

.ec-admin-slot {
    display: contents;
}

.ec-nav-admin-link {
    color: #ff9a9f !important;
}

.ec-nav-admin-link.active {
    color: #fff !important;
    background: linear-gradient(180deg, #d94d55, #8f2028) !important;
    border-color: #ff737b !important;
}

.ec-nav-actions {
    justify-content: flex-end;
    gap: 8px;
    min-width: 250px;
}

/* FIX: the shared button rule below sets width:100%, which made the search
   button and the player card stretch to fill the whole actions column
   (oversized "Search" pill and a very wide profile card). Inside the navbar
   they should size to their own content. */
.ec-nav-actions > .ec-nav-icon-button,
.ec-nav-actions > .ec-nav-player-button {
    width: auto;
    flex: 0 0 auto;
}

.ec-nav-icon-button,
.ec-nav-player-button,
.ec-nav-close-button,
.ec-resource-toggle,
.ec-player-menu-link-button {
    width: 100%;
    text-align: left;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.ec-player-menu-link-button:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.ec-player-menu-link-button.is-enabled {
    color: #78e4ab;
    background: rgba(57, 207, 132, .08);
}

.ec-nav-logout {
    font: inherit;
}

.ec-nav-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 12px;
    color: #d9dde3;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--ec-nav-line);
    border-radius: 11px;
    cursor: pointer;
    transition: 0.18s ease;
}

.ec-nav-icon-button:hover,
.ec-nav-icon-button[aria-expanded="true"] {
    color: var(--ec-nav-gold-bright);
    background: rgba(230, 189, 85, 0.09);
    border-color: rgba(230, 189, 85, 0.42);
    transform: translateY(-1px);
}

.ec-nav-action-label {
    font-size: 11px;
    font-weight: 700;
}

.ec-nav-mobile-toggle {
    display: none;
    min-width: 42px;
    padding: 0;
    font-size: 20px;
}

.ec-nav-player-button {
    gap: 9px;
    /* FIX: was min-width:184px + width:100% (see the .ec-nav-actions
       override above) which made the profile card oversized. */
    min-width: 0;
    height: 44px;
    padding: 4px 8px 4px 5px;
    color: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    border: 1px solid var(--ec-nav-line);
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    transition: 0.18s ease;
}

.ec-nav-player-button:hover,
.ec-nav-player-button[aria-expanded="true"] {
    border-color: rgba(230, 189, 85, 0.45);
    background: rgba(230, 189, 85, 0.07);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.ec-nav-player-button.is-admin {
    border-color: rgba(227, 91, 99, 0.45);
}

.ec-nav-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.ec-nav-avatar {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 2px solid rgba(230, 189, 85, 0.74);
    border-radius: 11px;
    background: #08090c;
}

.ec-nav-presence-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid #14171d;
    border-radius: 50%;
    background: #6f7680;
}

.ec-nav-presence-dot.is-online {
    background: var(--ec-nav-success);
    box-shadow: 0 0 9px rgba(57, 207, 132, 0.68);
}

.ec-nav-player-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.ec-nav-player-copy strong,
.ec-nav-player-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-nav-player-copy strong {
    color: #fff;
    font-size: 12px;
}

.ec-nav-player-copy small {
    color: var(--ec-nav-muted);
    font-size: 10px;
}

.ec-nav-chevron {
    color: var(--ec-nav-muted);
    font-size: 11px;
    transition: transform 0.18s ease;
}

.ec-nav-player-button[aria-expanded="true"] .ec-nav-chevron {
    transform: rotate(180deg);
}

.ec-player-search,
.ec-player-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: clamp(16px, 2vw, 34px);
    z-index: 35;
    color: var(--ec-nav-text);
    background:
        linear-gradient(180deg, rgba(28, 32, 40, 0.985), rgba(13, 15, 20, 0.985));
    border: 1px solid rgba(230, 189, 85, 0.28);
    border-radius: 18px;
    box-shadow: var(--ec-nav-shadow);
    backdrop-filter: blur(18px);
    animation: ecNavDropdownIn 0.18s ease both;
}

.ec-player-search[hidden],
.ec-player-menu[hidden],
.ec-nav-status-banner[hidden],
.ec-nav-alert-dot[hidden],
.ec-nav-mobile-backdrop[hidden] {
    display: none !important;
}

.ec-player-search {
    width: min(410px, calc(100vw - 32px));
    padding: 18px;
}

.ec-dropdown-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.ec-dropdown-eyebrow {
    color: var(--ec-nav-gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ec-dropdown-heading h2 {
    margin: 3px 0 0;
    color: #fff;
    font-size: 18px;
}

.ec-nav-close-button {
    width: 34px;
    height: 34px;
    color: var(--ec-nav-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ec-nav-line);
    border-radius: 10px;
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
}

.ec-nav-close-button:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.ec-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    background: #090b0f;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    transition: 0.18s ease;
}

.ec-search-field:focus-within {
    border-color: var(--ec-nav-gold);
    box-shadow: 0 0 0 3px rgba(230, 189, 85, 0.1);
}

.ec-search-field input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 13px;
}

.ec-search-field input::placeholder {
    color: #737b87;
}

.ec-search-help {
    margin: 8px 2px 12px;
    color: #747c87;
    font-size: 10px;
}

.ec-player-results {
    display: grid;
    gap: 7px;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #4e4430 transparent;
}

.ec-player-search-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 8px 10px;
    color: inherit;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;
    text-decoration: none;
    transition: 0.16s ease;
}

.ec-player-search-result:hover {
    background: rgba(230, 189, 85, 0.08);
    border-color: rgba(230, 189, 85, 0.3);
    transform: translateX(2px);
}

.ec-search-avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid rgba(230, 189, 85, 0.48);
    border-radius: 11px;
    background: #08090c;
}

.ec-search-player-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ec-search-player-copy strong,
.ec-search-player-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-search-player-copy strong {
    color: #fff;
    font-size: 13px;
}

.ec-search-player-copy small {
    color: var(--ec-nav-muted);
    font-size: 10px;
}

.ec-search-arrow {
    color: var(--ec-nav-gold);
    font-size: 24px;
}

.ec-search-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    padding: 18px;
    color: var(--ec-nav-muted);
    text-align: center;
    background: rgba(255, 255, 255, 0.022);
    border: 1px dashed rgba(255, 255, 255, 0.09);
    border-radius: 13px;
}

.ec-search-empty > span {
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    font-size: 26px;
}

.ec-search-status-image {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}

.ec-search-empty p {
    margin: 8px 0 0;
    font-size: 12px;
}

.ec-search-empty.is-loading > span {
    animation: ecNavSpin 1s linear infinite;
}

.ec-player-menu {
    width: min(310px, calc(100vw - 32px));
    padding: 13px;
}

.ec-player-menu-level-up {
    display:flex;
    align-items:center;
    gap:11px;
    margin:0 0 8px;
    padding:11px 12px;
    color:#fff4c5;
    text-decoration:none;
    border:1px solid rgba(240,207,115,.42);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(224,184,76,.2),rgba(138,97,20,.1));
    box-shadow:0 8px 22px rgba(0,0,0,.2);
}

.ec-player-menu-level-up[hidden] { display:none!important; }
.ec-player-menu-level-up:hover { color:#fff; border-color:rgba(240,207,115,.75); background:rgba(224,184,76,.2); }
.ec-player-menu-level-up img { width:34px; height:34px; flex:0 0 34px; object-fit:contain; }
.ec-player-menu-level-up span { min-width:0; display:grid; gap:2px; }
.ec-player-menu-level-up strong { font-size:11px; }
.ec-player-menu-level-up small { color:var(--ec-nav-muted); font-size:9px; }

.ec-player-menu-header {
    gap: 11px;
    padding: 7px;
}

.ec-player-menu-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 2px solid rgba(230, 189, 85, 0.68);
    border-radius: 14px;
    background: #08090c;
}

.ec-player-menu-header > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ec-player-menu-header strong,
.ec-player-menu-header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-player-menu-header strong {
    color: #fff;
    font-size: 14px;
}

.ec-player-menu-header span {
    color: var(--ec-nav-gold);
    font-size: 10px;
}

.ec-player-menu-level {
    justify-content: space-between;
    gap: 10px;
    margin: 7px 0 10px;
    padding: 10px 12px;
    color: var(--ec-nav-muted);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
    font-size: 10px;
}

.ec-player-menu-level strong {
    color: #fff;
}

.ec-player-menu-links {
    display: grid;
    gap: 4px;
    padding: 4px 0 9px;
}

.ec-player-menu-links a,
.ec-player-menu-link-button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 11px;
    color: #cbd0d7;
    border-radius: 10px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 650;
    transition: 0.16s ease;
}

.ec-player-menu-links a:hover,
.ec-player-menu-link-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
}

.ec-nav-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    color: #ffb0b4;
    background: rgba(227, 91, 99, 0.08);
    border: 1px solid rgba(227, 91, 99, 0.24);
    border-radius: 11px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    transition: 0.16s ease;
}

.ec-nav-logout:hover {
    color: #fff;
    background: rgba(227, 91, 99, 0.18);
    border-color: rgba(227, 91, 99, 0.52);
}

.ec-nav-status-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    padding: 2px clamp(16px, 2vw, 34px);
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.ec-nav-status-banner--hospital {
    background: linear-gradient(90deg, rgba(31, 103, 150, 0.28), rgba(16, 37, 52, 0.68));
}

.ec-nav-status-banner--prison {
    background: linear-gradient(90deg, rgba(151, 43, 51, 0.3), rgba(54, 18, 21, 0.68));
}

.ec-nav-gang-chain-banner.is-ramping {
    background: linear-gradient(90deg, rgba(150, 110, 20, 0.32), rgba(43, 32, 8, 0.68));
}

.ec-nav-gang-chain-banner.is-live {
    background: linear-gradient(90deg, rgba(150, 45, 50, 0.32), rgba(48, 16, 18, 0.68));
    animation: nav-gang-chain-pulse 2.4s ease-in-out infinite;
}

@keyframes nav-gang-chain-pulse {
    0%, 100% { box-shadow: inset 0 0 0 rgba(210, 73, 85, 0); }
    50% { box-shadow: inset 0 0 26px rgba(210, 73, 85, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
    .ec-nav-gang-chain-banner.is-live { animation: none; }
}

.ec-nav-status-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 10px;
}

/* Single line: title and reason sit side by side, separated by a dot,
   instead of stacking - matches the compact height of the rolling ticker. */
.ec-nav-status-copy {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.ec-nav-status-copy strong {
    flex: 0 0 auto;
    color: #fff;
    font-size: 10px;
    line-height: 1.3;
}

.ec-nav-status-copy span {
    overflow: hidden;
    color: #c8d0d9;
    font-size: 9px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-nav-status-copy span:not(:empty)::before {
    content: "\2022";
    margin: 0 6px;
    opacity: 0.5;
}

/* The "time remaining" label is kept for screen readers only - visually the
   countdown is just a small chip next to the copy, same language as the
   rolling banner's timer pill. */
.ec-nav-status-time {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-align: right;
}

.ec-nav-status-time > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ec-nav-status-time strong {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    line-height: 15px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ec-nav-status-banner > a {
    min-height: 20px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    text-decoration: none;
    font-size: 8px;
    font-weight: 750;
}

.ec-nav-status-banner > a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ec-resource-strip {
    position: relative;
    /* FIX: was a 4-column grid whose track sizing left ~700px of dead space
       between the summary and the resource cards while simultaneously
       squeezing the summary to its floor (truncating "£65,898" to "£6…").
       Flex is predictable here: summary takes exactly its content width,
       the resource cards absorb ALL remaining width. */
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    padding: 9px clamp(16px, 2vw, 34px) 11px;
    background: rgba(5, 7, 10, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    transition: padding 0.22s ease;
    overflow: visible;
}

.ec-resource-summary {
    display: grid;
    grid-template-columns: repeat(7, auto);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 12px;
    background: linear-gradient(145deg, rgba(230, 189, 85, 0.075), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(230, 189, 85, 0.19);
    border-radius: var(--ec-nav-radius);
}

.ec-summary-item {
    gap: 8px;
    min-width: 0;
}

.ec-summary-item--link {
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    transition: background .16s ease, transform .16s ease;
}

.ec-summary-item--link:hover,
.ec-summary-item--link:focus-visible {
    background: rgba(224, 184, 76, .08);
    transform: translateY(-1px);
}

.ec-summary-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    font-size: 16px;
}

.ec-summary-icon img {
    display: block;
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.ec-summary-icon--currency img {
    width: 33px;
    height: 33px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .48));
}

.ec-summary-icon--progress {
    width: 43px;
    height: 43px;
}

.ec-summary-icon--progress img {
    width: 41px;
    height: 41px;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .58));
}

.ec-summary-icon--level img {
    width: 43px;
    height: 43px;
}

.ec-summary-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ec-summary-copy small {
    color: var(--ec-nav-muted);
    font-family: var(--font-mono, inherit);
    font-size: 8px;
    letter-spacing: 0.04em;
}

.ec-summary-copy strong {
    overflow: hidden;
    color: var(--ec-nav-gold-bright);
    font-family: var(--font-mono, inherit);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-summary-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.075);
}

.ec-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 8px;
    min-width: 0;
}

.ec-resource-card {
    position: relative;
    min-width: 0;
    padding: 8px 10px 8px 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018));
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-left: 3px solid var(--resource-colour);
    border-radius: var(--ec-nav-radius);
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.ec-resource-card:hover,
.ec-resource-card:focus-visible {
    z-index: 5;
    border-color: color-mix(in srgb, var(--resource-colour) 55%, transparent);
    background: color-mix(in srgb, var(--resource-colour) 8%, #11141a);
    transform: translateY(-1px);
}

.ec-resource-card--health { --resource-colour: #ff4b55; }
.ec-resource-card--energy { --resource-colour: #ffd83d; }
.ec-resource-card--momentum { --resource-colour: #35cfff; }
.ec-resource-card--courage { --resource-colour: #ff9f2f; }

.ec-resource-heading,
.ec-resource-foot {
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.ec-resource-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    color: #d7dbe1;
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-resource-icon-image {
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    object-fit: contain;
}

.ec-resource-label .ec-resource-icon-image { width: 19px; height: 19px; }

.ec-resource-heading strong {
    color: #fff;
    font-family: var(--font-mono, inherit);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ec-resource-bar {
    position: relative;
    height: 7px;
    margin: 7px 0 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 999px;
}

.ec-resource-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: translateX(-100%);
    animation: ecResourceShimmer 4.8s ease-in-out infinite;
}

.ec-resource-fill {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--resource-colour) 64%, #111), var(--resource-colour));
    box-shadow: 0 0 11px color-mix(in srgb, var(--resource-colour) 42%, transparent);
    transition: width 0.45s ease;
}

.ec-resource-foot {
    color: #777f8a;
    font-size: 8px;
}

.ec-resource-foot span:first-child {
    color: color-mix(in srgb, var(--resource-colour) 80%, white);
    font-weight: 800;
}

.ec-resource-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    z-index: 50;
    display: grid;
    gap: 5px;
    width: 238px;
    padding: 12px;
    color: #c4cad2;
    background: rgba(9, 11, 15, 0.98);
    border: 1px solid color-mix(in srgb, var(--resource-colour) 42%, transparent);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.54);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -7px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.ec-resource-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 9px;
    height: 9px;
    background: rgba(9, 11, 15, 0.98);
    border-left: 1px solid color-mix(in srgb, var(--resource-colour) 42%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--resource-colour) 42%, transparent);
    transform: translate(-50%, 5px) rotate(45deg);
}

.ec-resource-tooltip strong {
    color: #fff;
    font-size: 11px;
}

.ec-resource-tooltip span {
    color: #aab1bb;
    font-size: 9px;
    line-height: 1.45;
}

.ec-resource-card:hover .ec-resource-tooltip,
.ec-resource-card:focus-visible .ec-resource-tooltip,
.ec-resource-card.is-tooltip-open .ec-resource-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ec-resource-toggle {
    align-self: center;
    justify-self: end;
    display: grid;
    place-items: center;
    /* FIX: a shared button rule earlier in this file sets width:100% on this
       selector, which let the toggle stretch into a tall/oversized slab.
       Pin it to a compact circle that matches the chip styling. */
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    text-align: center;
    color: var(--ec-nav-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.16s ease;
}

.ec-resource-toggle:hover {
    color: var(--ec-nav-gold-bright);
    border-color: rgba(230, 189, 85, 0.34);
}

/* FIX: collapsed switches the strip to a right-aligned flex row so the
   chips cluster together on the right (next to the toggle) instead of being
   spread across the full width by the 4-column grid. */
.ec-nav-shell.resources-collapsed .ec-resource-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* The hidden summary/grid still participate in the flex row, so collapse
   their width too (animated, not display:none) or they'd hold empty space
   and push the chips away from the right edge. */
.ec-nav-shell.resources-collapsed .ec-resource-grid,
.ec-nav-shell.resources-collapsed .ec-resource-summary {
    opacity: 0;
    max-height: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    flex: 0 0 0;
    /* Flex items default to min-width:auto, which would keep these at their
       content width and shove the chips/toggle off the right edge. */
    min-width: 0;
}

/* FIX: rebuilt to match the demo exactly — collapsed mode swaps to a
   separate row of small pill chips (.ec-resource-chip-row) instead of trying
   to restyle the full card/summary markup into something smaller. The full
   grid/summary and the chip row cross-fade via opacity+max-height (animated,
   not an instant display:none swap) rather than both being visible or
   neither. */
.ec-resource-grid,
.ec-resource-summary {
    overflow: hidden;
    opacity: 1;
    max-height: 200px;
    max-width: 4000px;
    transition: opacity 0.18s ease, max-height 0.22s ease, max-width 0.22s ease;
}

/* Resource tooltips sit below their cards, so the expanded grid must not clip
   them. Collapsed mode still clips the grid during its closing animation. */
.ec-resource-grid {
    overflow: visible;
}

.ec-nav-shell.resources-collapsed .ec-resource-grid {
    overflow: hidden;
}

/* Flex sizing for the expanded strip: summary keeps its natural width, the
   resource cards absorb every remaining pixel. */
.ec-resource-summary {
    flex: 0 0 auto;
}

.ec-resource-grid {
    flex: 1 1 auto;
    min-width: 0;
}

/* (grid/summary collapse — opacity, max-height, max-width, flex sizing — is
   all defined in the single collapsed block further above.) */

.ec-resource-chip-row {
    display: flex;
    align-items: center;
    /* Chips sit together as a tight group on the LEFT, matching the demo
       (where they started at the left edge under the logo). */
    justify-content: flex-start;
    gap: 7px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    /* When expanded this row is hidden — collapse its WIDTH too, not just
       its height, or it silently eats ~500px of the strip and pushes the
       resource cards into a narrow band on the right. */
    max-width: 0;
    flex: 0 0 0;
    min-width: 0;
    transition: opacity 0.18s ease, max-height 0.22s ease, max-width 0.24s ease;
}

.ec-nav-shell.resources-collapsed .ec-resource-chip-row {
    opacity: 1;
    max-height: 40px;
    max-width: 4000px;
    flex: 1 1 auto;
}

/* Desktop/tablet only: centre the chips. Phones keep responsive.css's
   scrollable, left-aligned row - centring or padding there would push chips
   off-screen. The toggle sits to the right of the row, so matching left
   padding keeps the chips centred on the page, not just the row. */
@media (min-width: 761px) and (min-height: 501px) {
    .ec-nav-shell.resources-collapsed .ec-resource-chip-row {
        justify-content: safe center;
        padding-left: 38px;
    }
}

.ec-summary-chip,
.ec-resource-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
    color: #d7dbe1;
    white-space: nowrap;
}

.ec-summary-chip strong,
.ec-resource-chip strong {
    font-family: var(--font-mono, inherit);
    font-variant-numeric: tabular-nums;
}

.ec-summary-chip img,
.ec-resource-chip img {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    object-fit: contain;
}

.ec-resource-chip.health { color: #ff8388; }
.ec-resource-chip.energy { color: #ffe066; }
.ec-resource-chip.momentum { color: #7fe1ff; }

#navMomentum.is-overflow,
#navMomentumChip.is-overflow {
    color: #ff5964 !important;
    text-shadow: 0 0 12px rgba(255, 71, 86, 0.42);
}
.ec-resource-chip.courage { color: #ffbb70; }

/* The player search button stays visible in both expanded and collapsed
   states. */

/* The player card (avatar + name + level·Kingpin) stays visually identical
   in both expanded and collapsed states — no stripping of its background,
   border or chevron on collapse. */

/* (Removed a stale `resources-collapsed .ec-resource-summary { max-width:
   540px }` rule that sat later in the file than the collapse rules above
   and was overriding their max-width:0, keeping the hidden summary at full
   width and shoving the chips/toggle out of position.) */

/* Keep the navigation and resource bar in one shared collapsed state. */
.ec-nav-links > a span:not(.ec-nav-link-icon):not(.ec-nav-alert-dot) {
    display: inline-block;
    overflow: hidden;
    max-width: 160px;
    opacity: 1;
    white-space: nowrap;
    transition: max-width 0.2s ease, opacity 0.15s ease;
}

.ec-nav-shell.resources-collapsed .ec-nav-links > a span:not(.ec-nav-link-icon):not(.ec-nav-alert-dot) {
    max-width: 0;
    opacity: 0;
}

.ec-nav-shell.resources-collapsed .ec-nav-links > a {
    padding: 0 9px;
    transition: padding 0.2s ease;
}

.ec-nav-shell.is-offline::after {
    content: "Connection interrupted — retrying";
    position: absolute;
    right: 18px;
    bottom: -26px;
    z-index: 90;
    padding: 5px 9px;
    color: #ffd4d7;
    background: #701d24;
    border: 1px solid #c94852;
    border-radius: 0 0 8px 8px;
    font-size: 9px;
    font-weight: 700;
}

.ec-nav-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(3px);
}

.ec-nav-lock-scroll {
    overflow: hidden;
}

.ec-nav-load-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 62px;
    padding: 10px 20px;
    color: #ffd5d8;
    background: #42161a;
    border-bottom: 1px solid #8e3037;
    font-size: 12px;
}

.ec-nav-load-error span {
    color: #c9a4a7;
}

@keyframes ecNavDropdownIn {
    from { opacity: 0; transform: translateY(-7px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ecNavPulse {
    0%, 100% { opacity: 0.72; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.16); }
}

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

@keyframes ecResourceShimmer {
    0%, 74% { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}

/* =========================================================
   LARGE DESKTOP: simplify labels before layout becomes tight
========================================================= */

@media (max-width: 1680px) {
    .ec-nav-main {
        gap: 12px;
    }

    .ec-nav-brand-area {
        min-width: auto;
    }

    .ec-nav-brand-copy {
        display: none;
    }

    .ec-nav-links {
        gap: 3px;
    }

    .ec-nav-links > a,
    .ec-admin-slot > a {
        padding: 0 8px;
        font-size: 11px;
    }

    .ec-nav-actions {
        min-width: auto;
    }

    .ec-nav-action-label {
        display: none;
    }

    .ec-nav-icon-button {
        width: 42px;
        padding: 0;
    }

    .ec-resource-strip {
        grid-template-columns: minmax(240px, 0.72fr) minmax(560px, 2fr) auto;
    }

    .ec-summary-item--level,
    .ec-summary-divider:last-of-type {
        display: none;
    }
}

@media (max-width: 1250px) {
    .ec-nav-player-button {
        min-width: 50px;
        width: 50px;
        padding: 5px;
    }

    .ec-nav-player-copy,
    .ec-nav-chevron {
        display: none;
    }

    .ec-nav-links > a span:not(.ec-nav-link-icon):not(.ec-nav-alert-dot),
    .ec-admin-slot > a span:not(.ec-nav-link-icon) {
        display: none;
    }

    .ec-nav-links > a,
    .ec-admin-slot > a {
        width: 40px;
        padding: 0;
    }

    .ec-nav-link-icon {
        font-size: 16px;
    }

    .ec-resource-strip {
        grid-template-columns: 220px minmax(520px, 1fr) auto;
    }

    .ec-summary-copy small {
        display: none;
    }
}

/* =========================================================
   TABLET / MOBILE DRAWER
========================================================= */

@media (max-width: 1080px) {
    #navbar {
        position: sticky;
    }

    .ec-nav-main {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 68px;
        padding: 8px 14px;
    }

    .ec-nav-brand-area {
        min-width: 0;
    }

    .ec-nav-mobile-toggle {
        display: inline-flex;
    }

    .ec-nav-brand-copy {
        display: grid;
    }

    .ec-nav-logo {
        height: 46px;
        max-width: 86px;
    }

    .ec-nav-actions {
        gap: 6px;
    }

    .ec-nav-action-label {
        display: none;
    }

    .ec-nav-icon-button {
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .ec-nav-player-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 3px;
    }

    .ec-nav-avatar {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .ec-nav-player-copy,
    .ec-nav-chevron {
        display: none;
    }

    .ec-nav-links {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 25;
        display: grid;
        align-content: start;
        justify-items: stretch;
        gap: 5px;
        width: min(340px, 86vw);
        height: 100dvh;
        padding: 86px 16px 22px;
        overflow-y: auto;
        background:
            radial-gradient(circle at 0 0, rgba(230, 189, 85, 0.16), transparent 34%),
            linear-gradient(180deg, #171a20, #0b0d11);
        border-right: 1px solid rgba(230, 189, 85, 0.24);
        box-shadow: 26px 0 54px rgba(0, 0, 0, 0.56);
        transform: translateX(-105%);
        transition: transform 0.24s ease;
    }

    .ec-nav-links.is-mobile-open {
        transform: translateX(0);
    }

    .ec-nav-links::before {
        content: "Crimora City Navigation";
        position: absolute;
        top: 28px;
        left: 20px;
        color: var(--ec-nav-gold-bright);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .ec-nav-links > a,
    .ec-admin-slot > a {
        justify-content: flex-start;
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        font-size: 12px;
        border-color: rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.025);
    }

    .ec-nav-links > a span:not(.ec-nav-alert-dot),
    .ec-admin-slot > a span {
        display: inline;
    }

    .ec-nav-link-icon {
        display: inline-grid !important;
        place-items: center;
        width: 24px;
        font-size: 17px;
    }

    .ec-admin-slot {
        display: block;
    }

    .ec-player-search,
    .ec-player-menu {
        top: calc(100% + 7px);
        right: 12px;
    }

    .ec-nav-status-banner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 2px 14px;
    }

    .ec-nav-status-banner > a {
        display: none;
    }

    .ec-resource-strip {
        grid-template-columns: 1fr auto;
        gap: 7px;
        padding: 7px 12px 9px;
    }

    .ec-resource-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .ec-summary-divider {
        display: none;
    }

    .ec-summary-item--level {
        display: flex;
    }

    .ec-resource-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ec-resource-card {
        padding: 7px 8px;
    }

    .ec-resource-tooltip {
        position: fixed;
        inset: auto 12px 14px;
        display: grid;
        width: auto;
        max-width: 420px;
        margin-inline: auto;
        transform: translateY(8px);
    }
    .ec-resource-tooltip::after { display:none; }
    .ec-resource-toggle { display:none !important; }
    /* Touch devices keep :hover stuck while a finger is held down, which would show the desktop-positioned
       tooltip half off screen. Only the tap-opened panel is allowed to appear here. */
    .ec-resource-card { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
    /* The hover lift (transform) makes the card the containing block of the fixed tooltip, which squashes it to the
       card's width and pushes it off screen. Never apply it on touch layouts. */
    .ec-resource-card:hover,
    .ec-resource-card:focus-visible,
    .ec-resource-card.is-tooltip-open { transform:none; }
    .ec-resource-card:hover .ec-resource-tooltip,
    .ec-resource-card:focus-visible .ec-resource-tooltip { opacity:0; transform:translateY(8px); pointer-events:none; }
    .ec-resource-card.is-tooltip-open { z-index:10030; border-color:color-mix(in srgb,var(--resource-colour) 60%,transparent); }
    .ec-resource-card.is-tooltip-open .ec-resource-tooltip { opacity:1; transform:translateY(0); pointer-events:auto; }

    /* (Collapsed uses a flex row now, so the old grid-template override and
       the `max-width: none` that would un-collapse the hidden summary are
       both removed here.) */
}

@media (max-width: 700px) {
    .ec-nav-brand-copy small {
        display: none;
    }

    .ec-nav-brand-copy strong {
        font-size: 12px;
    }

    .ec-nav-logo {
        height: 39px;
        max-width: 72px;
    }

    .ec-nav-main {
        min-height: 60px;
    }

    .ec-nav-actions {
        gap: 4px;
    }

    .ec-nav-status-banner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 9px;
    }

    .ec-nav-status-time {
        grid-column: 2;
        text-align: left;
    }

    .ec-resource-summary {
        padding: 7px;
    }

    .ec-summary-item {
        justify-content: center;
    }

    .ec-summary-icon {
        width: 32px;
        height: 32px;
    }

    .ec-summary-icon img {
        width: 28px;
        height: 28px;
    }

    .ec-summary-icon--currency img {
        width: 30px;
        height: 30px;
    }

    .ec-summary-icon--progress {
        width: 38px;
        height: 38px;
    }

    .ec-summary-icon--progress img {
        width: 36px;
        height: 36px;
    }

    .ec-summary-icon--level img {
        width: 38px;
        height: 38px;
    }

    .ec-summary-copy small {
        display: none;
    }

    .ec-summary-copy strong {
        font-size: 9px;
    }

    .ec-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ec-resource-label .ec-resource-icon-image {
        width: 18px;
        height: 18px;
    }

.ec-resource-heading strong {
        font-size: 8px;
    }

    .ec-resource-foot {
        font-size: 7px;
    }

    .ec-player-search,
    .ec-player-menu {
        position: fixed;
        top: 68px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100dvh - 82px);
        overflow-y: auto;
    }
}

@media (max-width: 430px) {
    .ec-nav-brand-copy {
        display: none;
    }

    .ec-nav-main {
        gap: 7px;
    }

    .ec-nav-brand {
        gap: 6px;
    }

    .ec-nav-actions {
        margin-left: auto;
    }

    .ec-resource-summary {
        grid-template-columns: repeat(4, 1fr);
    }

    .ec-summary-icon {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-nav-shell *,
    .ec-nav-shell *::before,
    .ec-nav-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* Scroll-away motion accessibility */
@media (prefers-reduced-motion: reduce) {
    #navbar {
        transition-duration: 0.01ms !important;
    }
}


/* =========================
   SUPPORTER / KINGPIN
========================= */
.ec-nav-supporter-link .ec-nav-link-icon { color:#f5d77c; }
.ec-nav-supporter-link:hover { border-color:rgba(245,215,124,.5); box-shadow:inset 0 0 0 1px rgba(245,215,124,.12); }
.ec-nav-player-button.is-kingpin {
    border-color:rgba(245,215,124,.72);
    box-shadow:0 0 0 1px rgba(245,215,124,.14), 0 0 22px rgba(245,177,50,.16);
}
.ec-nav-player-button.is-kingpin .ec-nav-avatar-wrap::after {
    content:"♠";
    position:absolute;
    right:-5px;
    top:-7px;
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:linear-gradient(145deg,#f7df91,#9d6819);
    color:#0c0a07;
    border:2px solid #0c0d0f;
    font-size:10px;
    font-weight:900;
}

.ec-consumable-cooldowns{display:grid;align-content:center;gap:6px;min-width:150px}.ec-consumable-cooldowns[hidden]{display:none}.ec-cooldown-chip{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:7px;min-width:145px;padding:7px 9px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(0,0,0,.24)}.ec-cooldown-chip>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:rgba(255,255,255,.05)}.ec-cooldown-chip>div{display:grid;min-width:0}.ec-cooldown-chip small{color:var(--ec-nav-muted);font-size:7px;text-transform:uppercase;letter-spacing:.05em}.ec-cooldown-chip strong{color:#fff;font-size:9px;font-variant-numeric:tabular-nums}.ec-cooldown-chip--caffeine{border-color:rgba(196,133,71,.32)}.ec-cooldown-chip--momentum{border-color:rgba(243,206,82,.3)}@media(max-width:1180px){.ec-resource-strip{grid-template-columns:1fr auto}.ec-resource-summary{display:none}.ec-consumable-cooldowns{grid-column:1}.ec-resource-grid{grid-column:1}}


/* =========================================================
   CRIMORA CITY NAVBAR — POLISHED NOIR PASS
========================================================= */
.ec-nav-shell {
    overflow: visible;
    background:
        radial-gradient(circle at 12% -90%, rgba(229, 186, 73, .22), transparent 42%),
        radial-gradient(circle at 88% -120%, rgba(70, 167, 255, .09), transparent 38%),
        linear-gradient(180deg, #15171c 0%, #090a0d 100%);
    border-bottom-color: rgba(225, 183, 72, .38);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .58), inset 0 -1px rgba(255, 255, 255, .025);
}
/* FIX: removed the second gold top-edge line too (this override block had
   its own copy layered on top of the base one, above). */
.ec-nav-main {
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.ec-nav-brand {
    padding-right: 14px;
    border-right: 1px solid rgba(225,183,72,.16);
}
.ec-nav-brand-copy strong { text-shadow: 0 0 18px rgba(230,189,85,.18); }
.ec-nav-links { gap: 6px; }
/* FIX: removed the persistent background+border this override gave every
   nav icon regardless of state (looked like a boxed button around each
   icon) — non-active/non-hover icons should be plain, matching the demo. */
.ec-nav-links > a,
.ec-admin-slot > a {
    min-height: 44px;
    border-radius: 10px;
}
.ec-nav-links > a:hover,
.ec-admin-slot > a:hover {
    border-color: rgba(230,189,85,.28);
    background: linear-gradient(180deg, rgba(230,189,85,.11), rgba(230,189,85,.035));
    box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04);
}
.ec-nav-link-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(0,0,0,.25);
    color: var(--ec-nav-gold-bright);
    filter: grayscale(.18) saturate(.8);
}
.ec-nav-link-icon--image {
    overflow: hidden;
    padding: 0;
}
.ec-nav-link-icon--image img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.16)) drop-shadow(0 2px 3px rgba(0,0,0,.48));
}
.ec-nav-status-link {
    gap: 6px !important;
    animation: ecStatusLinkIn .2s ease both;
}
.ec-nav-status-link[hidden] { display: none !important; }
.ec-nav-status-link small {
    color: rgba(255,255,255,.72);
    font-size: 8px;
    font-variant-numeric: tabular-nums;
}
.ec-nav-status-link--hospital {
    border-color: rgba(70,167,255,.36) !important;
    background: linear-gradient(180deg, rgba(70,167,255,.13), rgba(70,167,255,.035)) !important;
}
.ec-nav-status-link--prison {
    border-color: rgba(227,91,99,.4) !important;
    background: linear-gradient(180deg, rgba(227,91,99,.14), rgba(227,91,99,.035)) !important;
}
.ec-nav-status-link--hospital .ec-nav-link-icon { color: #72c8ff; }
.ec-nav-status-link--prison .ec-nav-link-icon { color: #ff7b84; }
.ec-nav-actions { min-width: 190px; }
.ec-nav-icon-button,
.ec-nav-player-button {
    border-color: rgba(230,189,85,.15);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.16));
}
.ec-resource-strip {
    background: linear-gradient(180deg, rgba(7,8,11,.9), rgba(4,5,7,.95));
    border-top-color: rgba(230,189,85,.12);
}
.ec-resource-summary,
.ec-resource-card,
.ec-cooldown-chip {
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.2);
}
.ec-resource-tooltip { z-index: 10020; }
@keyframes ecStatusLinkIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

@media (max-width: 1360px) and (min-width: 1081px) {
    .ec-nav-links > a span:not(.ec-nav-link-icon):not(.ec-nav-alert-dot),
    .ec-admin-slot > a span:not(.ec-nav-link-icon) { display:none; }
    .ec-nav-links > a,
    .ec-admin-slot > a { width:42px; padding:0; }
    .ec-nav-status-link small { display:none; }
    .ec-nav-actions { min-width: 176px; }
}

/* Never render inactive cooldown chips, even when page-specific CSS loads later. */
.ec-consumable-cooldowns[hidden], .ec-cooldown-chip[hidden], .ec-cooldown-chip[aria-hidden="true"]{display:none!important}

.ec-nav-status-banner--travel{border-color:rgba(78,163,199,.34);background:linear-gradient(110deg,rgba(23,64,82,.96),rgba(12,20,28,.98))}.ec-nav-status-banner--travel .ec-nav-status-icon{background:rgba(95,183,219,.15);color:#a5ddf3}.ec-nav-status-banner--travel #navStatusLink{color:#a5ddf3;border-color:rgba(95,183,219,.28);background:rgba(95,183,219,.08)}

.ec-nav-player-button.is-staff {
    border-color: rgba(74, 168, 255, .5);
    box-shadow: 0 0 0 1px rgba(74, 168, 255, .12);
}
.ec-nav-player-button.is-moderator {
    border-color: rgba(172, 112, 255, .5);
    box-shadow: 0 0 0 1px rgba(172, 112, 255, .12);
}


/* Searchable NPC profiles */
.ec-player-search-result.is-npc {
    border-color: rgba(95, 174, 255, 0.22);
    background: linear-gradient(135deg, rgba(95, 174, 255, 0.075), rgba(255, 255, 255, 0.025));
}
.ec-player-search-result.is-npc:hover { border-color: rgba(95, 174, 255, 0.48); }
.ec-search-name-row { display:flex; align-items:center; gap:7px; min-width:0; }
.ec-search-name-row strong { min-width:0; }
.ec-search-entity-badge {
    flex:0 0 auto; padding:2px 6px; border:1px solid rgba(95,174,255,.45); border-radius:999px;
    color:#9fd0ff; background:rgba(95,174,255,.11); font-size:8px; font-style:normal; font-weight:900; letter-spacing:.1em;
}
.ec-search-entity-badge.is-kingpin {
    border-color:rgba(240,202,105,.58); color:#f4d77f; background:rgba(240,202,105,.12);
}

/* Whole-page custody atmosphere */
.ec-status-dim-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;transition:background .35s ease,backdrop-filter .35s ease;-webkit-backdrop-filter:saturate(.6) brightness(.82);backdrop-filter:saturate(.6) brightness(.82)}.ec-status-dim-overlay[hidden]{display:none!important}.ec-status-dim-overlay[data-status="hospital"]{background:repeating-linear-gradient(115deg,rgba(30,104,157,.20) 0 20px,rgba(7,28,43,.28) 20px 40px),linear-gradient(180deg,rgba(22,59,78,.15),rgba(5,17,24,.26));-webkit-backdrop-filter:saturate(.55) brightness(.8) contrast(.94);backdrop-filter:saturate(.55) brightness(.8) contrast(.94)}.ec-status-dim-overlay[data-status="prison"]{background:repeating-linear-gradient(115deg,rgba(48,12,17,.27) 0 20px,rgba(8,4,6,.38) 20px 40px),linear-gradient(180deg,rgba(36,7,12,.16),rgba(3,2,3,.3));-webkit-backdrop-filter:saturate(.38) brightness(.61) sepia(.2);backdrop-filter:saturate(.38) brightness(.61) sepia(.2)}


/* Compact navigation controls and Command Centre activity indicator */
@media (min-width: 1081px) {
    .ec-nav-links { gap: 5px; }
    .ec-nav-links > a,
    .ec-admin-slot > a {
        min-height: 40px;
        padding-left: 9px;
        padding-right: 9px;
        border-radius: 10px;
    }
    .ec-nav-link-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }
    .ec-nav-link-icon--image img {
        width: 25px;
        height: 25px;
    }
}
.ec-nav-alert-dot--command {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border: 2px solid #11151b;
    border-radius: 999px;
    background: #ff5a63;
    box-shadow: 0 0 0 3px rgba(255, 90, 99, .15), 0 0 12px rgba(255, 90, 99, .72);
    animation: ec-command-alert-pulse 1.7s ease-in-out infinite;
}
.ec-nav-links > a.has-command-alert {
    border-color: rgba(255, 90, 99, .38);
}
@keyframes ec-command-alert-pulse {
    0%, 100% { transform: scale(.92); opacity: .78; }
    50% { transform: scale(1.12); opacity: 1; }
}
@media (max-width:1360px) and (min-width:1081px) {
    .ec-nav-links > a,
    .ec-admin-slot > a { width:39px; min-height:39px; padding:0; }
}

.ec-player-menu-server-time {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 8px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:11px;
    background:rgba(255,255,255,.028);
}
.ec-player-menu-server-time img { width:31px; height:31px; object-fit:contain; filter:drop-shadow(0 4px 7px rgba(0,0,0,.45)); }
.ec-player-menu-server-time div { min-width:0; display:grid; gap:2px; }
.ec-player-menu-server-time small { color:var(--ec-nav-muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ec-player-menu-server-time strong { color:#fff; font-size:10px; white-space:nowrap; }


/* VIP Black Card dropdown artwork */
.ec-player-menu-links .ec-nav-menu-image {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 22px;
    flex: 0 0 auto;
}
.ec-player-menu-links .ec-nav-menu-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}


/* Status atmosphere: tint the page background without obscuring playable cards. */
body.ec-page-status-prison,
body.ec-page-status-hospital {
    position: relative;
    isolation: isolate;
}
.ec-status-dim-overlay {
    z-index: 0 !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.ec-page-status-prison > :not(.ec-status-dim-overlay):not(.admin-modal):not(.admin-toast):not(.inventory-modal):not(.inventory-toast),
body.ec-page-status-hospital > :not(.ec-status-dim-overlay):not(.admin-modal):not(.admin-toast):not(.inventory-modal):not(.inventory-toast) {
    position: relative;
    z-index: 1;
}

/* Fixed administrator overlays must stay fixed while the signed-in account is
   hospitalised or imprisoned. The previous broad selector changed these to
   position:relative, placing the confirmation card below the page while its
   invisible backdrop and body scroll lock trapped all pointer input. */
body.ec-page-status-prison > .admin-modal,
body.ec-page-status-hospital > .admin-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
}

body.ec-page-status-prison > .admin-toast,
body.ec-page-status-hospital > .admin-toast {
    position: fixed !important;
    z-index: 2147483001 !important;
}

/* Hospital and prison are precisely where custody-reduction items are used.
   Keep the Inventory item/confirmation dialogs above the status atmosphere. */
body.ec-page-status-prison > .inventory-modal,
body.ec-page-status-hospital > .inventory-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
}

body.ec-page-status-prison > .inventory-toast,
body.ec-page-status-hospital > .inventory-toast {
    position: fixed !important;
    z-index: 2147483001 !important;
}

.ec-cooldown-chip--courage{border-color:rgba(210,82,82,.34)}


/* Subtle illumination for persistent navbar resource and action icons. */
.ec-summary-icon img,
.ec-resource-label .ec-resource-icon-image,
.ec-nav-icon-button > span[aria-hidden="true"] {
    filter: drop-shadow(0 0 5px rgba(255,255,255,.14));
}

.ec-nav-alert-dot--gang{background:#f2c94c;box-shadow:0 0 0 3px rgba(242,201,76,.14),0 0 10px rgba(242,201,76,.8)}.ec-nav-links a.has-gang-alert{border-color:rgba(242,201,76,.36)}


/* Server-wide server and maintenance announcements */
.ec-server-announcement{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:#11161d;color:#dfe5eb;box-shadow:0 8px 24px rgba(0,0,0,.22)}.ec-server-announcement[hidden]{display:none}.ec-server-announcement>span{font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#e4bd68}.ec-server-announcement>strong{font-size:12px;font-weight:700}.ec-server-announcement>button{width:28px;height:28px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}.ec-server-announcement[data-tone=warning]{border-color:rgba(236,184,71,.32);background:#1c160b}.ec-server-announcement[data-tone=danger]{border-color:rgba(255,83,101,.34);background:#200e12}.ec-server-announcement[data-tone=success]{border-color:rgba(62,202,117,.3);background:#0d1d14}@media(max-width:700px){.ec-server-announcement{grid-template-columns:1fr auto}.ec-server-announcement>span{grid-column:1}.ec-server-announcement>strong{grid-column:1}.ec-server-announcement>button{grid-column:2;grid-row:1/3}}

/* Four shared consumable cooldowns stay compact when every timer is active. */
.ec-consumable-cooldowns{
    grid-template-columns:repeat(2,minmax(132px,1fr));
    align-self:center;
    min-width:282px;
    max-width:330px;
}
.ec-cooldown-chip{
    min-width:0;
    padding:6px 8px;
}
.ec-cooldown-chip--medical{border-color:rgba(77,190,126,.34)}
.ec-cooldown-chip--drug{border-color:rgba(168,110,235,.4)}
@media(max-width:1180px){
    .ec-consumable-cooldowns{
        grid-column:1 / -1;
        grid-template-columns:repeat(4,minmax(118px,1fr));
        width:100%;
        min-width:0;
        max-width:none;
    }
}
@media(max-width:700px){
    .ec-consumable-cooldowns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
    .ec-consumable-cooldowns{grid-template-columns:1fr}
}

.nav-travel-vehicle-image{display:block;width:22px;height:19px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.ec-nav-status-banner--travel .ec-nav-status-icon{overflow:hidden;padding:1px}

.ec-nav-city-boost-banner {
    position: relative;
    overflow: hidden;
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.ec-nav-city-boost-banner .ec-nav-status-icon {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    font-size: 10px;
}

.ec-nav-city-boost-banner > a {
    min-height: 22px;
    padding: 0 9px;
    font-size: 8px;
}

/* Diagonal light sweep drifting across the bar - gives the ticker a bit of
   life beyond the scrolling text itself. Skipped entirely in the armed /
   announcement idle look and under reduced-motion. */
.ec-nav-city-boost-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
    background-size: 220% 100%;
    pointer-events: none;
    animation: nav-city-boost-sheen 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ec-nav-city-boost-banner::before { display: none; }
}

@keyframes nav-city-boost-sheen {
    0% { background-position: 140% 0; }
    100% { background-position: -40% 0; }
}

.ec-nav-city-boost-banner.is-armed {
    background: linear-gradient(90deg, rgba(191, 122, 33, 0.34), rgba(48, 30, 8, 0.72));
    border-bottom: 1px solid rgba(224, 184, 76, 0.4);
}

/* Admin custom-message-only state (no pool armed/active): a neutral gold
   announcement style, no pulse - this isn't a live boost, just a notice. */
.ec-nav-city-boost-banner.is-announcement {
    background: linear-gradient(90deg, rgba(224, 184, 76, 0.3), rgba(40, 32, 8, 0.72));
    border-bottom: 1px solid rgba(224, 184, 76, 0.4);
}

.ec-nav-city-boost-banner.is-active {
    background: linear-gradient(90deg, rgba(37, 150, 89, 0.34), rgba(10, 41, 26, 0.72));
    border-bottom: 1px solid rgba(67, 209, 125, 0.45);
    animation: nav-city-boost-pulse 2.4s ease-in-out infinite;
}

@keyframes nav-city-boost-pulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 rgba(67, 209, 125, 0); }
    50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 26px rgba(67, 209, 125, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
    .ec-nav-city-boost-banner.is-active { animation: none; }
}

/* A negative city boost (e.g. Anon's energy debuff) is a warning, not good
   news - red in every state, overriding the amber/green above. */
.ec-nav-city-boost-banner.is-negative.is-armed,
.ec-nav-city-boost-banner.is-negative.is-active {
    background: linear-gradient(90deg, rgba(210, 73, 85, 0.36), rgba(48, 10, 14, 0.72));
    border-bottom: 1px solid rgba(255, 98, 111, 0.45);
    animation: nav-city-boost-negative-pulse 2.4s ease-in-out infinite;
}

@keyframes nav-city-boost-negative-pulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 rgba(255, 98, 111, 0); }
    50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 26px rgba(255, 98, 111, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    .ec-nav-city-boost-banner.is-negative.is-active { animation: none; }
}

/* Icon bubble gets a soft glow that matches whichever state is live. */
.ec-nav-city-boost-banner .ec-nav-status-icon {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: box-shadow 0.3s ease;
}
.ec-nav-city-boost-banner.is-armed .ec-nav-status-icon,
.ec-nav-city-boost-banner.is-announcement .ec-nav-status-icon {
    box-shadow: 0 0 10px rgba(224, 184, 76, 0.45), inset 0 0 6px rgba(224, 184, 76, 0.25);
    border-color: rgba(224, 184, 76, 0.5);
}
.ec-nav-city-boost-banner.is-active .ec-nav-status-icon {
    box-shadow: 0 0 10px rgba(67, 209, 125, 0.5), inset 0 0 6px rgba(67, 209, 125, 0.28);
    border-color: rgba(67, 209, 125, 0.55);
}
.ec-nav-city-boost-banner.is-negative .ec-nav-status-icon {
    box-shadow: 0 0 10px rgba(255, 98, 111, 0.5), inset 0 0 6px rgba(255, 98, 111, 0.28);
    border-color: rgba(255, 98, 111, 0.55);
}

.ec-nav-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.ec-nav-marquee__track {
    display: flex;
    width: max-content;
    animation: nav-marquee-scroll 24s linear infinite;
}

.ec-nav-marquee__track > span {
    display: inline-flex;
    align-items: center;
    padding-right: 44px;
    color: #fff;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.01em;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}

.ec-nav-marquee-badge {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    padding: 0 6px;
    line-height: 13px;
    border-radius: 999px;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: none;
    vertical-align: middle;
}
.ec-nav-marquee-badge--gold {
    background: rgba(224, 184, 76, 0.2);
    border: 1px solid rgba(224, 184, 76, 0.5);
    color: #f3cf6e;
}
.ec-nav-marquee-badge--amber {
    background: rgba(224, 184, 76, 0.2);
    border: 1px solid rgba(224, 184, 76, 0.5);
    color: #f3cf6e;
}
.ec-nav-marquee-badge--green {
    background: rgba(67, 209, 125, 0.18);
    border: 1px solid rgba(67, 209, 125, 0.5);
    color: #86f0ab;
}
.ec-nav-marquee-badge--negative {
    background: rgba(255, 98, 111, 0.18);
    border: 1px solid rgba(255, 98, 111, 0.5);
    color: #ff9aa4;
}

.ec-nav-marquee-timer {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 0 6px;
    line-height: 13px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 9px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ec-nav-marquee-timer::before {
    content: "⏱";
    font-size: 8px;
    opacity: 0.75;
}
.ec-nav-city-boost-banner.is-negative .ec-nav-marquee-timer { border-color: rgba(255, 98, 111, 0.4); }
.ec-nav-city-boost-banner.is-active .ec-nav-marquee-timer { border-color: rgba(67, 209, 125, 0.4); }
.ec-nav-city-boost-banner.is-armed .ec-nav-marquee-timer { border-color: rgba(224, 184, 76, 0.4); }

.ec-nav-marquee:hover .ec-nav-marquee__track {
    animation-play-state: paused;
}

@keyframes nav-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ec-nav-marquee__track { animation: none; }
    .ec-nav-marquee__track > span:nth-child(2) { display: none; }
}

/* "Living City" link: lift and glow to match the active state on hover. */
.ec-nav-city-boost-banner > a {
    position: relative;
    z-index: 1;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.ec-nav-city-boost-banner > a:hover {
    transform: translateY(-1px);
}
.ec-nav-city-boost-banner.is-active > a:hover {
    background: rgba(67, 209, 125, 0.16);
    border-color: rgba(67, 209, 125, 0.4);
    box-shadow: 0 2px 10px rgba(67, 209, 125, 0.25);
}
.ec-nav-city-boost-banner.is-armed > a:hover,
.ec-nav-city-boost-banner.is-announcement > a:hover {
    background: rgba(224, 184, 76, 0.16);
    border-color: rgba(224, 184, 76, 0.4);
    box-shadow: 0 2px 10px rgba(224, 184, 76, 0.25);
}
.ec-nav-city-boost-banner.is-negative > a:hover {
    background: rgba(255, 98, 111, 0.16);
    border-color: rgba(255, 98, 111, 0.4);
    box-shadow: 0 2px 10px rgba(255, 98, 111, 0.25);
}

.ec-resource-tooltip-boost { color: #7ce2a0 !important; }
.ec-resource-tooltip-debuff { color: #ff8b96 !important; }

/* Travel banner: roomier layout, countdown chip and a glowing journey progress track */
.ec-nav-status-banner--travel{position:relative;min-height:26px;padding-top:3px;padding-bottom:5px;
  background:linear-gradient(100deg,rgba(18,58,76,.97),rgba(11,19,27,.98) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px -14px rgba(60,170,220,.55)}
.ec-nav-status-banner--travel .ec-nav-status-icon{box-shadow:inset 0 0 0 1px rgba(95,183,219,.35),0 0 14px -4px rgba(95,183,219,.7)}
.ec-nav-status-banner--travel .ec-nav-status-copy strong{letter-spacing:.01em}
.ec-nav-status-banner--travel .ec-nav-status-time strong{font-variant-numeric:tabular-nums;color:#c9efff}
.ec-nav-status-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.07);overflow:hidden}
.ec-nav-status-progress[hidden]{display:none}
.ec-nav-status-progress i{display:block;height:100%;width:var(--travel-progress,0%);
  background:linear-gradient(90deg,#2b87b3,#7fd4f5 70%,#e4f8ff);border-radius:0 3px 3px 0;
  box-shadow:0 0 10px rgba(127,212,245,.85),0 0 2px rgba(255,255,255,.7);transition:width 1s linear}
@media(prefers-reduced-motion:reduce){.ec-nav-status-progress i{transition:none}}

/* Compact resource summary (cash / coins / experience): smaller icon tiles, tighter rhythm. */
@media (min-width: 761px) {
    .ec-resource-summary { gap: 12px; padding: 6px 14px; }
    .ec-summary-item { align-items: center; gap: 9px; }
    .ec-summary-icon,
    .ec-summary-icon--progress {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
    }
    .ec-summary-icon img,
    .ec-summary-icon--currency img,
    .ec-summary-icon--progress img,
    .ec-summary-icon--level img { width: 20px; height: 20px; }
    .ec-summary-copy { gap: 1px; }
    .ec-summary-copy small { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .85; }
    .ec-summary-copy strong { font-size: 12.5px; letter-spacing: 0.01em; }
    .ec-summary-divider { height: 22px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent); }
}

/* Wide screens: active cooldowns drop into a full-width row under the resource cards, like they do on mobile. */
@media (min-width: 1181px) {
    .ec-resource-strip { flex-wrap: wrap; }
    .ec-consumable-cooldowns:not([hidden]) {
        display: grid;
        flex: 1 0 100%;
        grid-template-columns: repeat(auto-fill, minmax(170px, 230px));
        align-items: stretch;
        gap: 8px;
        width: 100%;
        min-width: 0;
        max-width: none;
        order: 5; /* after the toggle, so the arrow stays on the top row */
    }
    .ec-cooldown-chip { grid-template-columns: 24px minmax(0, 1fr); min-width: 0; padding: 5px 9px; }
    .ec-cooldown-chip > span { width: 24px; height: 24px; }
    .ec-cooldown-chip small { font-size: 8px; }
    .ec-cooldown-chip strong { font-size: 11px; }
}

/* Thinner resource strip on desktop: tighter cards, bars and strip padding. */
@media (min-width: 1081px) {
    .ec-resource-strip { padding-top: 6px; padding-bottom: 7px; }
    .ec-resource-card { padding: 5px 10px 5px 12px; }
    .ec-resource-label .ec-resource-icon-image,
    .ec-resource-icon-image { width: 16px; height: 16px; }
    .ec-resource-bar { height: 6px; margin: 4px 0 3px; }
    .ec-resource-summary { padding-top: 4px; padding-bottom: 4px; }
}

/* Wordmark brand: the text stands in for the old logo image and stays visible at every width. */
.ec-nav-brand-copy { display: grid !important; gap: 3px; }
.ec-nav-brand-copy strong { font-size: 18px; letter-spacing: 0.14em; line-height: 1; }
.ec-nav-brand-copy small { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 700px) {
    .ec-nav-brand-copy strong { font-size: 13px; letter-spacing: 0.1em; }
    .ec-nav-brand-copy small { display: none; }
}
@media (max-width: 430px) {
    .ec-nav-brand-copy strong { font-size: 11px; letter-spacing: 0.06em; }
}

/* Mid-width desktops (1361-1719px): keep every label, but tighten the links, wordmark and search button so the row never
   runs into the search/avatar area. Wider screens use the roomy layout above. */
@media (min-width: 1361px) and (max-width: 1719px) {
    .ec-nav-main { gap: 10px; padding-left: 14px; padding-right: 14px; }
    .ec-nav-brand { padding-right: 8px; gap: 8px; }
    .ec-nav-brand-copy strong { font-size: 16px; letter-spacing: 0.1em; }
    .ec-nav-brand-copy small { font-size: 8.5px; letter-spacing: 0.08em; }
    .ec-nav-links { gap: 0; }
    .ec-nav-links > a,
    .ec-admin-slot > a { gap: 5px; padding: 0 7px; font-size: 11.5px; letter-spacing: 0; }
    .ec-nav-action-label { display: none; }
}

/* Player dropdown: layered depth (raised header card, recessed link tray, bevelled buttons). */
.ec-player-menu {
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(230, 189, 85, 0.11), transparent 60%),
        linear-gradient(180deg, rgba(32, 37, 46, 0.99), rgba(11, 13, 18, 0.995));
    border-color: rgba(230, 189, 85, 0.32);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.05) inset,
        0 -1px 0 rgba(0, 0, 0, 0.5) inset,
        0 6px 14px rgba(0, 0, 0, 0.35),
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.5);
}
.ec-player-menu-header {
    position: relative;
    padding: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 8px 18px rgba(0, 0, 0, 0.35);
}
.ec-player-menu-avatar {
    box-shadow: 0 0 0 3px rgba(230, 189, 85, 0.14), 0 6px 14px rgba(0, 0, 0, 0.55);
}
.ec-player-menu-level {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.18));
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ec-player-menu-links {
    gap: 2px;
    margin: 0 0 9px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5) inset;
}
.ec-player-menu-links a,
.ec-player-menu-link-button { min-height: 36px; border: 1px solid transparent; }
.ec-player-menu-links a + a { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.035); }
.ec-player-menu-links a:hover,
.ec-player-menu-link-button:hover {
    background: linear-gradient(90deg, rgba(230, 189, 85, 0.13), rgba(255, 255, 255, 0.04));
    border-color: rgba(230, 189, 85, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    transform: translateX(2px);
}
.ec-nav-logout {
    background: linear-gradient(180deg, rgba(227, 91, 99, 0.16), rgba(227, 91, 99, 0.07));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Server clock button: a click or tap shows the server time in a pill under the button (hides after 5 seconds or on the next click). */
.ec-nav-actions > .ec-nav-clock-button { position: relative; width: 42px; padding: 0; }
.ec-nav-clock-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10040;
    padding: 6px 12px;
    color: #f2f4f7;
    background: rgba(12, 14, 19, 0.97);
    border: 1px solid rgba(230, 189, 85, 0.34);
    border-radius: 9px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
    font-family: var(--font-mono, inherit);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.ec-nav-clock-button.is-open .ec-nav-clock-popover { opacity: 1; transform: none; }
.ec-nav-actions > .ec-nav-clock-button { z-index: 2147483002; }

/* Player menu: readable push-alerts button (the global gold button gradient was bleeding through) and a slimmer layout. */
.ec-player-menu-links .ec-player-menu-link-button {
    background: rgba(255, 255, 255, 0.04);
    background-image: none;
    color: #d6dbe2;
}
.ec-player-menu-links .ec-player-menu-link-button:disabled {
    opacity: 1;
    color: #9aa3ad;
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    transform: none;
}
.ec-player-menu-links .ec-player-menu-link-button.is-enabled {
    color: #78e4ab;
    background: rgba(57, 207, 132, 0.1);
    border-color: rgba(57, 207, 132, 0.22);
}
.ec-player-menu { width: min(272px, calc(100vw - 32px)); padding: 10px; }
.ec-player-menu-header { padding: 7px 9px; gap: 9px; }
.ec-player-menu-avatar { width: 40px; height: 40px; border-radius: 11px; }
.ec-player-menu-level { margin: 6px 0 8px; padding: 7px 11px; }
.ec-player-menu-links { gap: 1px; margin-bottom: 7px; padding: 4px; }
.ec-player-menu-links a,
.ec-player-menu-link-button { min-height: 30px !important; padding: 0 10px; font-size: 11px; }
.ec-player-menu-server-time { margin-bottom: 6px; }
.ec-nav-logout { min-height: 34px; }

/* Player search: no inner box, the field sits directly on the panel. */
.ec-search-field,
.ec-search-field:focus-within {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 4px;
}

/* Compact player search panel. */
.ec-player-search { width: min(340px, calc(100vw - 32px)); padding: 10px 12px 12px; }
.ec-player-search .ec-dropdown-heading { align-items: center; gap: 10px; margin-bottom: 4px; }
.ec-player-search .ec-dropdown-eyebrow { display: none; }
.ec-player-search .ec-dropdown-heading h2 { margin: 0; font-size: 14px; }
.ec-player-search .ec-nav-close-button { width: 26px; height: 26px; min-height: 0 !important; padding: 0; border-radius: 8px; font-size: 17px; }
.ec-player-search .ec-search-field { min-height: 34px; gap: 8px; padding: 0 2px; }
.ec-player-search .ec-search-field input { height: 32px; font-size: 13px; }
.ec-player-search .ec-search-help { margin: 0 2px 8px; font-size: 10px; }
.ec-player-search .ec-player-results { gap: 4px; max-height: 300px; }
.ec-player-search .ec-search-empty { min-height: 0; padding: 10px 12px; gap: 2px; border-radius: 10px; }
.ec-player-search .ec-search-empty > span { font-size: 16px; }
.ec-player-search .ec-search-empty p { margin: 0; font-size: 11px; }
.ec-player-search .ec-player-search-result { min-height: 46px; gap: 9px; padding: 5px 8px; border-radius: 10px; }
.ec-player-search .ec-search-avatar { width: 34px; height: 34px; border-radius: 9px; }
.ec-player-search .ec-search-player-copy { gap: 1px; }
.ec-player-search .ec-search-player-copy strong { font-size: 12px; }
.ec-player-search .ec-search-player-copy small { font-size: 10px; }
.ec-player-search .ec-search-arrow { font-size: 18px; }

/* Thinner menu rows: the player menu and the phone navigation drawer. */
.ec-player-menu-links a,
.ec-player-menu-link-button { min-height: 25px !important; padding-top: 0; padding-bottom: 0; font-size: 11px; }
.ec-nav-logout { min-height: 30px; }
@media (max-width: 1080px) {
    .ec-nav-links > a,
    .ec-admin-slot > a { min-height: 36px !important; }
}

/* Consumable cooldown chips: compact on desktop */
@media (min-width: 1081px) {
    .ec-consumable-cooldowns { gap: 4px !important; min-width: 0 !important; }
    .ec-cooldown-chip:not([hidden]) { grid-template-columns: 20px minmax(0, 1fr) !important; gap: 6px !important; padding: 3px 8px !important; border-radius: 8px !important; min-height: 0 !important; }
    .ec-cooldown-chip > span { width: 20px !important; height: 20px !important; font-size: .7rem !important; border-radius: 6px !important; }
    .ec-cooldown-chip small { font-size: .5rem !important; line-height: 1.1 !important; }
    .ec-cooldown-chip strong { font-size: .68rem !important; line-height: 1.15 !important; }
    .ec-cooldown-chip .ec-resource-icon-image, .ec-cooldown-chip .ec-ui-icon { width: 13px !important; height: 13px !important; }
}
@media (min-width: 1081px) {
    .ec-consumable-cooldowns { justify-items: start !important; }
    .ec-cooldown-chip:not([hidden]) { width: max-content !important; flex: 0 0 auto !important; max-width: 100%; padding-right: 10px !important; }
}
@media (max-width: 1080px) {
    .ec-cooldown-chip:not([hidden]) { flex: 0 0 auto !important; width: max-content !important; min-width: 0 !important; grid-template-columns: 15px minmax(0, 1fr) !important; gap: 4px !important; padding: 2px 6px !important; border-radius: 6px !important; min-height: 0 !important; }
    .ec-cooldown-chip > span { width: 15px !important; height: 15px !important; font-size: .55rem !important; border-radius: 4px !important; }
    .ec-cooldown-chip small { font-size: .42rem !important; line-height: 1.05 !important; }
    .ec-cooldown-chip strong { font-size: .54rem !important; line-height: 1.1 !important; }
    .ec-cooldown-chip .ec-resource-icon-image, .ec-cooldown-chip .ec-ui-icon { width: 10px !important; height: 10px !important; }
}

/* Cooldown chips: text only, no icons, on every view */
.ec-cooldown-chip > span { display: none !important; }
.ec-cooldown-chip:not([hidden]) { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 1080px) {
    .ec-consumable-cooldowns { gap: 3px !important; }
    .ec-cooldown-chip:not([hidden]) { padding: 1px 5px !important; border-radius: 5px !important; }
    .ec-cooldown-chip small { font-size: .38rem !important; line-height: 1 !important; letter-spacing: 0 !important; }
    .ec-cooldown-chip strong { font-size: .48rem !important; line-height: 1.05 !important; }
}
@media (max-width: 1080px) {
    .ec-cooldown-chip > div { display: flex !important; flex-direction: row !important; align-items: baseline; gap: 5px; white-space: nowrap; }
    .ec-cooldown-chip small, .ec-cooldown-chip strong { display: inline !important; margin: 0 !important; white-space: nowrap !important; }
    .ec-cooldown-chip:not([hidden]) { padding: 2px 7px !important; min-height: 0 !important; }
}
@media (max-width: 1080px) {
    .ec-cooldown-chip > div { flex-direction: column !important; align-items: flex-start; gap: 0; }
    .ec-cooldown-chip small, .ec-cooldown-chip strong { display: block !important; }
    .ec-cooldown-chip:not([hidden]) { padding: 1px 6px !important; }
}