/*
 * Eclipse HOLLOW reference theme
 * Loaded after page-local styles so every public surface shares one visual language
 * without changing page markup, form names, endpoints, or JavaScript hooks.
 */

:root {
    --bg-main: #080c0e;
    --bg-secondary: #0d1418;
    --bg-panel: #172128;
    --bg-panel-warm: #211d16;
    --body-text: #eee8dc;
    --text-main: #eee8dc;
    --text-muted: #a29f95;
    --text-soft: #6e746f;
    --primary-accent: #d9a654;
    --hover-state: #efbd69;
    --glow-text: #e6b665;
    --token-accent: #c7c0ae;
    --border-accent: rgba(222, 172, 87, 0.48);
    --grad-primary: linear-gradient(180deg, #e0b261 0%, #9d6c28 100%);
    --grad-dark: linear-gradient(150deg, rgba(35, 43, 45, 0.97), rgba(14, 20, 24, 0.98));
    --grad-glow: linear-gradient(90deg, #f1eadb 0%, #d9a654 55%, #777b75 100%);
    --panel-border: rgba(220, 171, 88, 0.34);
    --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.56);
    --nav-height: 116px;
    --rail-width: 286px;
    --hollow-panel: rgba(26, 35, 41, 0.94);
    --hollow-panel-deep: rgba(12, 18, 22, 0.97);
    --hollow-line: rgba(222, 172, 87, 0.46);
    --hollow-line-soft: rgba(222, 172, 87, 0.18);
    --hollow-bone: #eee7d8;
    --hollow-success: #7ea77c;
    --hollow-danger: #b45d4e;
}

html {
    color-scheme: dark;
    background: #070a0c;
    scrollbar-color: rgba(217, 166, 84, 0.46) #080c0e;
}

body {
    color: var(--hollow-bone);
    background: #080c0e;
    font-family: 'Inter', system-ui, sans-serif;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: rgba(2, 6, 7, 0.34);
}

::selection {
    color: #11130f;
    background: #d9a654;
}

:focus-visible {
    outline: 2px solid #e5b661;
    outline-offset: 3px;
}

.eclipse-atmosphere {
    opacity: 1;
    mask-image: none;
    background:
        linear-gradient(180deg, rgba(5, 9, 11, 0.5) 0%, rgba(5, 10, 12, 0.7) 42%, rgba(5, 9, 11, 0.95) 100%),
        linear-gradient(90deg, rgba(4, 8, 10, 0.36), transparent 48%, rgba(4, 8, 10, 0.52)),
        url('/assets/background.png') center top / cover no-repeat fixed;
    filter: saturate(0.5) sepia(0.1) contrast(1.04) brightness(0.66);
}

/* Two-level masthead inspired by the supplied game portal reference. */
.top-navbar {
    min-height: var(--nav-height);
    padding: 0 24px 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 70px 46px;
    grid-template-areas:
        'account brand'
        'menu menu';
    gap: 0 24px;
    border-bottom: 1px solid #d5a04c;
    background:
        linear-gradient(180deg, rgba(17, 21, 24, 0.82), rgba(28, 27, 24, 0.92)),
        url('/assets/navbar-top_background.png') center 58% / cover no-repeat;
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.55), inset 0 -1px rgba(244, 198, 116, 0.18);
    backdrop-filter: blur(14px) saturate(0.7);
}

.top-navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(8, 12, 14, 0.9), rgba(23, 26, 26, 0.7) 55%, rgba(9, 13, 15, 0.84));
}

.top-navbar::after {
    bottom: 45px;
    background: linear-gradient(90deg, transparent, rgba(217, 166, 84, 0.3), transparent);
}

.nav-brand {
    grid-area: brand;
    width: auto;
    flex: none;
    align-self: center;
    justify-self: end;
    gap: 11px;
}

.brand-logo-frame {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border: 1px solid rgba(224, 174, 88, 0.72);
    border-radius: 50%;
    background: #0a0e10;
    box-shadow: 0 0 0 3px rgba(217, 166, 84, 0.06), 0 0 24px rgba(217, 166, 84, 0.14);
}

.brand-wordmark {
    font-family: 'Cinzel', Georgia, serif;
    letter-spacing: 0.14em;
    line-height: 0.85;
}

.brand-wordmark strong {
    color: #e8e1d1;
    font-size: 21px;
    text-shadow: 0 2px 0 #25231d, 0 0 18px rgba(217, 166, 84, 0.18);
}

.brand-wordmark b {
    margin-top: 7px;
    color: #bca878;
    font-size: 13px;
    letter-spacing: 0.3em;
}

.nav-menu {
    grid-area: menu;
    align-self: end;
    gap: 4px;
}

.nav-menu > li {
    position: relative;
}

.nav-link {
    min-width: 120px;
    min-height: 45px;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid rgba(218, 166, 83, 0.13);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: #c8c3b8;
    background: rgba(68, 62, 53, 0.58);
    font-size: 14px;
    letter-spacing: 0.045em;
    text-shadow: 0 1px 2px #000;
}

.nav-link:hover,
.nav-link.active {
    border-color: rgba(235, 184, 96, 0.55);
    color: #fff9ec;
    background: linear-gradient(180deg, rgba(190, 139, 61, 0.82), rgba(64, 59, 51, 0.94));
    box-shadow: inset 0 1px rgba(255, 232, 183, 0.26), 0 -7px 22px rgba(217, 166, 84, 0.08);
}

.nav-link.active::before {
    display: none;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2px;
    background: #efbd69;
    box-shadow: 0 0 10px rgba(239, 189, 105, 0.65);
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    z-index: 1200;
    width: 210px;
    padding: 7px;
    display: grid;
    gap: 3px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-7px);
    border: 1px solid rgba(217, 166, 84, 0.48);
    border-top: 2px solid #d9a654;
    border-radius: 0 0 8px 8px;
    background: rgba(17, 24, 29, 0.98);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.58);
    transition: 160ms ease;
}

.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.nav-submenu a {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(217, 166, 84, 0.1);
    color: #c8c3b7;
    text-decoration: none;
    font: 700 12px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.nav-submenu a:last-child { border-bottom: 0; }
.nav-submenu a:hover { color: #17150f; background: #d9a654; }

.nav-right {
    grid-area: account;
    margin-left: auto;
    justify-self: end;
    gap: 12px;
}

.header-wallet {
    display: grid;
    gap: 5px;
}

.header-coin {
    min-width: 144px;
    height: 26px;
    padding: 0 12px 0 5px;
    border-radius: 999px;
    border-color: rgba(217, 166, 84, 0.38);
    background: linear-gradient(90deg, rgba(62, 73, 77, 0.8), rgba(48, 46, 41, 0.84));
    box-shadow: inset 0 1px rgba(255,255,255,0.05);
    font-size: 10px;
}

.header-coin img {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
}

.redeem-launch-btn,
.guest-steam-btn {
    height: 38px;
    border-radius: 999px;
    border-color: rgba(217, 166, 84, 0.68);
    color: #f2ead9;
    background: linear-gradient(180deg, rgba(190, 139, 61, 0.58), rgba(98, 72, 35, 0.76));
    box-shadow: inset 0 1px rgba(255, 237, 199, 0.15);
}

.guest-steam-btn {
    grid-area: account;
    align-self: center;
    justify-self: end;
    margin-left: 0;
}

.user-profile-btn {
    min-width: 178px;
    padding: 4px 8px 4px 4px;
    border-color: rgba(217, 166, 84, 0.25);
    border-radius: 4px;
    background: rgba(13, 20, 24, 0.68);
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border-color: #d9a654;
}

.user-info strong { color: #e7b765; font-size: 13px; }
.user-info small { color: #aaa69c; }
.system-status { color: #9f9c91; }

.user-dropdown-menu,
.redeem-modal,
.friends-panel {
    border-color: rgba(217, 166, 84, 0.5);
    border-radius: 4px 4px 10px 10px;
    background: linear-gradient(160deg, rgba(34, 43, 48, 0.99), rgba(13, 20, 24, 0.99));
}

.user-dropdown-menu a:hover { color: #17150f; background: #d9a654; }

/* Right-hand telemetry rail. */
.layout-wrapper {
    min-height: calc(100vh - var(--nav-height));
    margin: 0 var(--rail-width) 0 0;
}

.layout-wrapper.guest-layout { margin-right: 0; }

.storage-rail {
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--rail-width);
    border-right: 0;
    border-left: 1px solid #d09b47;
    background:
        linear-gradient(180deg, rgba(38, 48, 54, 0.93), rgba(15, 23, 28, 0.98)),
        url('/assets/live-feed_background.png') center / cover no-repeat;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.28), inset 1px 0 rgba(255, 224, 166, 0.06);
}

.rail-status-line {
    height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(217, 166, 84, 0.3);
    color: #e8e1d3;
    font: 800 11px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rail-status-line span { display: inline-flex; align-items: center; gap: 8px; }
.rail-status-line b { color: #d9a654; font-size: 9px; }

.rail-brand-art {
    height: 118px;
    border-bottom-color: rgba(217, 166, 84, 0.2);
    background: radial-gradient(circle at 50% 48%, rgba(217, 166, 84, 0.14), transparent 56%);
}

.rail-brand-art img {
    width: 132px;
    height: 132px;
    transform: translateY(6px);
    filter: grayscale(0.65) sepia(0.25) drop-shadow(0 12px 24px #000);
}

.rail-capacity {
    padding: 17px 16px 19px;
    border-bottom-color: rgba(217, 166, 84, 0.22);
}

.rail-section-heading { color: #e9e1d1; }
.rail-section-heading b { color: #d9a654; }
.rail-capacity-track { height: 8px; border-radius: 2px; background: rgba(0,0,0,0.34); }
.rail-capacity-track i { border-radius: 1px; background: linear-gradient(90deg, #8b6c38, #e3b863); }
.rail-capacity p { color: #8d918b; }

.rail-quick-nav {
    padding: 17px 14px 80px;
}

.rail-quick-nav .rail-section-heading { margin-bottom: 9px; }

.rail-quick-nav a {
    min-height: 45px;
    padding: 0 9px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(217, 166, 84, 0.15);
    color: #c8c4b9;
    text-decoration: none;
}

.rail-quick-nav a:hover {
    color: #fff8e9;
    background: linear-gradient(90deg, rgba(217,166,84,0.12), transparent);
}

.rail-quick-nav a span { color: #7f8078; font: 700 9px/1 'Inter', sans-serif; }
.rail-quick-nav a strong { font: 700 12px/1 'Barlow Condensed', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.rail-quick-nav a i { color: #d9a654; font-style: normal; font-size: 18px; }

.layout-wrapper > .main-content {
    min-height: calc(100vh - var(--nav-height));
    padding: clamp(18px, 2.2vw, 34px);
    background: transparent;
}

.layout-wrapper > .main-content > .main-content {
    min-height: auto;
    padding: 0;
}

#content-preloader {
    inset: var(--nav-height) var(--rail-width) 0 0;
    background: rgba(9, 14, 17, 0.95);
}

.site-footer {
    margin: 0 var(--rail-width) 0 0;
    border-top-color: rgba(217, 166, 84, 0.22);
    color: #68706e;
    background: #0b1013;
}

.guest-layout + .site-footer { margin-right: 0; }

/* Shared panel and type language. */
h1, h2, h3, .modal-title-wrap, .section-title {
    text-wrap: balance;
}

:where(
    .command-card, .auth-panel, .inventory-storage-panel, .inv-card,
    .store-title-panel, .store-rules-panel, .tier-section, .dino-card,
    .skin-title-panel, .skin-info-panel, .skin-toolbar, .skin-card,
    .lootbox-title-card, .lootbox-info-card, .lootbox-card, .lootbox-modal-card,
    .dino-storage-panel, .dino-showcase, .prime-card, .respawn-wait-card,
    .ex-panel, .ex-board, .ex-side, .ex-card, .ex-feature, .ex-modal-panel,
    .tr-panel, .tr-card, .tr-offer, .tr-modal-panel,
    .population-title-panel, .population-status-panel, .population-chart-panel,
    .population-ranking-panel, .population-card, .population-rank-item,
    .leaderboard-hero, .lb-panel, .lb-row, .status-card, .timer-panel,
    .redeem-card, .spawn-header-card, .mutations-block, .action-bar, .modal-window,
    .community-panel
) {
    border: 1px solid var(--hollow-line) !important;
    border-radius: 4px 4px 12px 12px !important;
    background:
        linear-gradient(145deg, rgba(46, 55, 58, 0.94), rgba(19, 28, 34, 0.97)) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 239, 203, 0.04) !important;
    backdrop-filter: blur(12px) saturate(0.8);
}

:where(
    .command-card, .auth-panel, .inventory-storage-panel, .inv-card,
    .store-title-panel, .store-rules-panel, .tier-section, .dino-card,
    .skin-title-panel, .skin-info-panel, .skin-toolbar, .skin-card,
    .lootbox-title-card, .lootbox-info-card, .lootbox-card,
    .ex-panel, .ex-board, .ex-side, .ex-card,
    .tr-panel, .tr-card, .tr-offer,
    .population-title-panel, .population-status-panel, .population-chart-panel,
    .population-ranking-panel, .leaderboard-hero, .lb-panel,
    .status-card, .timer-panel, .redeem-card, .mutations-block, .community-panel
)::before {
    background: linear-gradient(90deg, #e2b25f, rgba(226, 178, 95, 0.16) 72%, transparent) !important;
}

:where(
    .command-copy h1, .inventory-title h1, .store-title-panel h1,
    .skin-title-panel h1, .lootbox-title-card h1, .dino-title h1,
    .ex-title, .tr-title, .population-title-panel h1,
    .leaderboard-hero h1, .discipline-title h1, .redeem-card h1,
    .header-details h1
) {
    color: var(--hollow-bone) !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.035em !important;
    text-shadow: 0 2px 0 rgba(0,0,0,0.75), 0 0 26px rgba(217,166,84,0.1) !important;
}

:where(
    .command-overline, .inventory-title p, .store-title-panel .hero-chip,
    .skin-kicker, .lootbox-kicker, .ex-kicker, .tr-kicker,
    .population-kicker, .lb-kicker, .redeem-kicker, .card-label,
    .block-title, .panel-heading
) {
    color: #ddb066 !important;
}

:where(p, .dino-summary, .skin-desc, .tr-sub, .ex-sub, .panel-copy) {
    color: #b6b3aa;
}

:where(input, select, textarea, .ex-input, .ex-select, .tr-input, .tr-select, .redeem-input) {
    border-color: rgba(217, 166, 84, 0.3) !important;
    border-radius: 3px !important;
    color: #f1eadc !important;
    background: rgba(6, 12, 15, 0.72) !important;
}

:where(input, select, textarea, .ex-input, .ex-select, .tr-input, .tr-select, .redeem-input):focus {
    border-color: #d9a654 !important;
    box-shadow: 0 0 0 3px rgba(217, 166, 84, 0.11) !important;
}

:where(
    .command-btn, .btn-primary, .btn-purchase, .purchase-btn, .open-crate-btn,
    .view-open-btn, .btn-park-active, .btn-init, .population-refresh,
    .ex-btn, .ex-icon, .tr-btn, .tr-icon, .btn-redeem, .note-save,
    .modal-close, .filter-btn, .skin-filter, .lb-tab
) {
    border-radius: 3px !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    letter-spacing: 0.075em !important;
}

:where(
    .command-btn.primary, .btn-primary, .btn-purchase, .purchase-btn,
    .open-crate-btn, .view-open-btn, .btn-init,
    .ex-btn.primary, .ex-icon, .tr-btn.primary, .tr-icon, .tr-btn.gold,
    .btn-redeem.ready-prime, .btn-redeem.ready-normal, .redeem-form .btn-redeem
) {
    border-color: #e0ae59 !important;
    color: #17140e !important;
    background: var(--grad-primary) !important;
    box-shadow: inset 0 1px rgba(255, 241, 207, 0.25), 0 8px 22px rgba(82, 55, 18, 0.34) !important;
}

:where(.filter-btn.active, .skin-filter.active, .lb-tab.active, .ex-segment input:checked + span) {
    border-color: #d9a654 !important;
    color: #17140e !important;
    background: #d9a654 !important;
}

.page-inventory .filter-bar .filter-btn.active,
.page-inventory .filter-bar .filter-btn.active:hover {
    border-color: #efc273 !important;
    color: #11171a !important;
    background: linear-gradient(180deg, #e7bb69, #b78339) !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px rgba(255,247,224,0.3), 0 7px 18px rgba(0,0,0,0.28) !important;
}

.page-inventory .filter-bar .filter-btn.active .filter-count {
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #f4ead5 !important;
    background: rgba(10,17,20,0.72) !important;
}

:where(.btn-delete-skin, .ex-btn.danger, .tr-btn.danger) {
    border-color: rgba(180, 93, 78, 0.55) !important;
    color: #e6b0a7 !important;
    background: rgba(132, 55, 45, 0.2) !important;
}

/* Home command center. */
.page-index .layout-wrapper > .main-content {
    background: transparent !important;
}

.command-shell { width: min(1360px, 100%); }
.command-hero { min-height: 470px; gap: clamp(28px, 4vw, 66px); }
.command-copy h1 { font-size: clamp(46px, 6.4vw, 86px) !important; line-height: 0.94 !important; }
.command-copy h1 span { color: transparent !important; -webkit-text-stroke: 1px rgba(235, 226, 207, 0.66); }
.command-copy p { color: #c4c0b5; }
.vault-orbit::before { border-color: rgba(217,166,84,0.52); }
.vault-orbit::after { border-color: rgba(217,166,84,0.22); }
.vault-emblem { border-color: rgba(217,166,84,0.7); border-radius: 50%; }
.vault-emblem img { filter: grayscale(0.58) sepia(0.2); }
.orbit-chip { border-color: rgba(217,166,84,0.46); border-radius: 3px; background: rgba(25,33,37,0.94); }
.orbit-chip strong { color: #e2b25f; }
.command-grid { gap: 14px; }
.command-card { border-top: 2px solid #d9a654 !important; }
.capacity-track { border-radius: 2px; background: #10171a; }
.capacity-track i { background: linear-gradient(90deg, #7c6138, #e3b761); }

.command-community-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.community-panel {
    position: relative;
    min-width: 0;
    min-height: 330px;
    overflow: hidden;
    border-top: 2px solid #d9a654 !important;
}

.community-panel-head {
    min-height: 76px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(217,166,84,0.26);
    background: linear-gradient(90deg, rgba(217,166,84,0.1), transparent 62%);
}
.community-panel-head div { min-width: 0; }
.community-panel-head small {
    display: block;
    margin-bottom: 5px;
    color: #9c998f;
    font: 800 9px/1 'Inter', sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.community-panel-head h2 {
    margin: 0;
    color: #eee7d8;
    font: 700 24px/1 'Cinzel', Georgia, serif;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}
.community-panel-head > span {
    padding: 5px 8px;
    border: 1px solid rgba(217,166,84,0.34);
    border-radius: 2px;
    color: #dfb365;
    background: rgba(217,166,84,0.08);
    font: 800 9px/1 'Inter', sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.news-feed-list { padding: 8px 18px 18px; display: grid; }
.news-feed-item {
    min-width: 0;
    padding: 13px 2px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    border-bottom: 1px solid rgba(217,166,84,0.13);
}
.news-feed-item:last-child { border-bottom: 0; }
.news-feed-item time {
    padding-top: 2px;
    color: #8d8f88;
    font: 800 9px/1.4 'Inter', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.news-feed-item p { margin: 0; color: #ddd6c9; font-size: 12px; line-height: 1.55; }

.event-promo {
    min-height: 253px;
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
}
.event-art {
    position: relative;
    min-height: 253px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid rgba(217,166,84,0.2);
    background: radial-gradient(circle, rgba(217,166,84,0.18), transparent 62%), rgba(5,10,13,0.34);
}
.event-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(3,7,9,0.48));
    pointer-events: none;
}
.event-art img {
    width: 88%;
    height: 220px;
    object-fit: contain;
    filter: grayscale(0.62) sepia(0.18) contrast(1.08) drop-shadow(0 22px 16px rgba(0,0,0,0.72));
}
.event-copy {
    min-width: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.event-schedule {
    margin-bottom: 9px;
    color: #b18e55;
    font: 800 9px/1.4 'Inter', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.event-copy h3 {
    margin: 0 0 12px;
    color: #f0e8d9;
    font: 700 clamp(22px, 2.1vw, 31px)/1.05 'Cinzel', Georgia, serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.event-copy p { margin: 0; color: #aaa9a2; font-size: 11px; line-height: 1.65; }
.event-cta {
    min-height: 38px;
    margin-top: 18px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #d9a654;
    border-radius: 2px;
    color: #17140e;
    background: linear-gradient(180deg, #e1b360, #a47531);
    text-decoration: none;
    font: 800 11px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.event-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.event-cta span { font-size: 16px; }
.community-empty { padding: 28px 20px; color: #8d908a; font-size: 12px; text-align: center; }

/* Inventory, dinosaur shop, cosmetics and crates. */
.inventory-bg-container,
.dino-shop-bg,
.leaderboard-bg,
.punishment-bg,
.ex-bg,
.tr-bg {
    background:
        linear-gradient(180deg, rgba(8,13,16,0.66), rgba(8,13,16,0.9) 62%, #080d10),
        url('/assets/background.png') center top / cover no-repeat !important;
    filter: saturate(0.55) sepia(0.08);
}

.inventory-page,
.skin-store-page,
.lootbox-page,
.ex-page,
.tr-page {
    background: transparent !important;
}

.skin-store-page::before,
.lootbox-page::before {
    background:
        linear-gradient(180deg, rgba(8,13,16,0.63), rgba(8,13,16,0.94)),
        url('/assets/background.png') center top / cover no-repeat !important;
    filter: saturate(0.5) sepia(0.1);
}

.skin-store-page::after,
.lootbox-page::after { background: linear-gradient(120deg, rgba(217,166,84,0.06), transparent 45%, rgba(2,5,7,0.3)) !important; }
.store-shell, .skin-store-wrap, .lootbox-wrap, .ex-shell, .tr-shell { max-width: 1480px; }
.inventory-grid, .dino-grid, .skins-grid, .lootbox-grid, .ex-grid { gap: 16px; }

.inv-card,
.dino-card,
.skin-card,
.lootbox-card,
.ex-card {
    border-top-width: 2px !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

:where(.inv-card, .dino-card, .skin-card, .lootbox-card, .ex-card):hover {
    transform: translateY(-4px) !important;
    border-color: rgba(236, 190, 109, 0.78) !important;
    box-shadow: 0 27px 62px rgba(0,0,0,0.52), 0 0 24px rgba(217,166,84,0.1) !important;
}

.card-image-container,
.dino-image-wrap,
.skin-image-container,
.crate-art,
.ex-card-media {
    border-color: rgba(217, 166, 84, 0.16) !important;
    border-radius: 2px !important;
    background: radial-gradient(circle, rgba(217,166,84,0.13), transparent 65%), rgba(5,10,13,0.36) !important;
}

.card-image-container img,
.dino-image-wrap img,
.skin-image-container img,
.crate-art img,
.ex-card-media img {
    filter: grayscale(0.18) sepia(0.08) drop-shadow(0 18px 14px rgba(0,0,0,0.78)) !important;
}

.dino-name, .skin-title, .crate-name, .ex-card h3 { color: #f1eadc !important; font-family: 'Cinzel', Georgia, serif; }
.tier-badge, .diet-badge, .rarity-badge, .skin-kind-badge, .crate-currency-badge, .ex-badge, .tr-badge { border-radius: 2px !important; }
.tier-heading, .lootbox-section-title h2, .dino-storage-title { font-family: 'Cinzel', Georgia, serif; color: #e7dfcf !important; }
.inventory-storage-track, .dino-storage-track { border-radius: 2px !important; background: rgba(5,10,13,0.65) !important; }
.inventory-storage-fill, .dino-storage-fill { border-radius: 1px !important; background: linear-gradient(90deg, #79613b, #e0af5d) !important; }

/* Live dinosaur and restore flow. */
.dino-showcase { border-top: 2px solid #d9a654 !important; }
.dino-portrait-wrap { border-color: rgba(217,166,84,0.42) !important; background: radial-gradient(circle, rgba(217,166,84,0.14), transparent 64%) !important; }
.stat-box, .info-box, .feature-pill, .rule-row, .summary-box, .mutation-slot, .mut-card {
    border-color: rgba(217,166,84,0.2) !important;
    border-radius: 3px !important;
    background: rgba(7,13,16,0.46) !important;
}
.stat-value, .summary-value, .status-value span { color: #e0b260 !important; }
.prime-card.ready, .mutation-slot.filled { border-color: rgba(126,167,124,0.52) !important; background: rgba(69,104,69,0.12) !important; }
.mode-tabs { padding: 5px !important; border-color: rgba(217,166,84,0.3) !important; border-radius: 4px !important; background: rgba(5,10,13,0.62) !important; }
.mode-tab { border-radius: 2px !important; }
.mode-tab.active-normal, .mode-tab.active-prime { color: #17140e !important; background: #d9a654 !important; box-shadow: none !important; }
.action-bar { border-top: 2px solid #d9a654 !important; }
.modal-backdrop { background: rgba(2,6,8,0.86) !important; }
.modal-top { border-bottom-color: rgba(217,166,84,0.35) !important; }
.mut-card:hover:not(.locked-mut) { border-color: #d9a654 !important; background: rgba(217,166,84,0.1) !important; }

/* Market and direct trading. */
.ex-title, .tr-title { font-size: clamp(34px, 4vw, 58px) !important; }
.ex-top, .tr-top { gap: 14px; }
.ex-stats, .tr-stats { gap: 7px; }
.ex-stat, .tr-stat, .ex-balance, .tr-balance, .ex-price, .tr-mini,
.ex-meta div, .tr-user, .tr-row, .tr-item, .ex-feature {
    border-color: rgba(217,166,84,0.2) !important;
    border-radius: 3px !important;
    background: rgba(7,13,16,0.47) !important;
}
.ex-stat strong, .tr-stat strong, .tr-mini strong { color: #e1b460 !important; }
.ex-nav button { border-radius: 3px !important; }
.ex-nav button.active, .ex-nav button:hover, .tr-list button.active, .tr-user:hover, .tr-row:hover {
    border-color: rgba(217,166,84,0.5) !important;
    color: #f2eadc !important;
    background: linear-gradient(90deg, rgba(217,166,84,0.18), transparent) !important;
    box-shadow: inset 3px 0 0 #d9a654 !important;
}
.ex-chip, .ex-pill { color: #e3bd79 !important; border-color: rgba(217,166,84,0.32) !important; background: rgba(217,166,84,0.09) !important; }
.ex-btn.aqua { color: #e7e3d8 !important; border-color: rgba(126,167,124,0.48) !important; background: rgba(70,105,72,0.5) !important; }
.tr-badge.locked { color: #a9c6a7 !important; border-color: rgba(126,167,124,0.42) !important; background: rgba(69,104,69,0.14) !important; }
.tr-badge.confirmed { color: #e3bd79 !important; border-color: rgba(217,166,84,0.36) !important; background: rgba(217,166,84,0.11) !important; }

/* World data surfaces. */
.population-page, .leaderboard-shell, .punishment-shell { max-width: 1480px; margin-inline: auto; }
.population-title-panel h1, .leaderboard-hero h1, .discipline-title h1 { font-size: clamp(36px, 4vw, 58px) !important; }
.population-total-ring {
    border-color: #d9a654 !important;
    background: radial-gradient(circle, rgba(217,166,84,0.13), rgba(7,13,16,0.5)) !important;
    box-shadow: 0 0 0 7px rgba(217,166,84,0.05), 0 0 24px rgba(217,166,84,0.12) !important;
}
.population-total-ring strong, .population-rank-count { color: #dfb15f !important; }
.population-bar-track { border-radius: 2px !important; background: rgba(5,10,13,0.65) !important; }
.population-bar-fill { border-radius: 1px !important; background: linear-gradient(90deg, #8a6b38, #e2b55f) !important; }
.lb-tabs { border-color: rgba(217,166,84,0.28) !important; border-radius: 4px !important; background: rgba(5,10,13,0.54) !important; }
.lb-row.header { border-color: rgba(217,166,84,0.32) !important; background: rgba(217,166,84,0.08) !important; }
.lb-rank.primary { color: #e2b35f !important; }
.timer-badge, .privacy-pill { border-radius: 2px !important; }

/* Redeem and modal surfaces. */
.redeem-page { max-width: 820px !important; }
.redeem-card { border-top: 2px solid #d9a654 !important; }
.redeem-card h1 { color: #eee7d8 !important; }
.redeem-result.success { border-color: rgba(126,167,124,0.5) !important; color: #bdd1b9 !important; background: rgba(69,104,69,0.13) !important; }
.redeem-result.error { border-color: rgba(180,93,78,0.5) !important; color: #e2aaa0 !important; background: rgba(132,55,45,0.13) !important; }
.redeem-modal-head, .friends-panel-head { border-bottom-color: rgba(217,166,84,0.34); background: linear-gradient(90deg, rgba(217,166,84,0.13), transparent); }
.redeem-modal-head small, .friends-panel-head small { color: #d9a654; }
.redeem-modal-submit { color: #17140e; background: var(--grad-primary); }
.site-toast.success { border-color: rgba(126,167,124,0.52); }
.site-toast.error { border-color: rgba(180,93,78,0.55); }

.friends-launch {
    position: fixed !important;
    left: 22px;
    right: auto;
    bottom: 22px;
    z-index: 3400;
    width: 56px;
    height: 56px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #e0ad57;
    border-radius: 50%;
    color: #17140e;
    background: linear-gradient(145deg, #e3b762, #9d6b28);
    box-shadow: inset 0 1px rgba(255,241,207,0.3), 0 12px 32px rgba(0,0,0,0.55), 0 0 0 5px rgba(217,166,84,0.07);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.friends-launch:hover {
    transform: translateY(-3px);
    filter: brightness(1.09);
    box-shadow: inset 0 1px rgba(255,241,207,0.35), 0 17px 38px rgba(0,0,0,0.6), 0 0 0 7px rgba(217,166,84,0.09);
}
.friends-launch svg { display: block; fill: currentColor; }
.friends-launch > i { display: none; }
.friends-launch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.friends-launch b {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border: 2px solid #11191d;
    color: #17140e;
    background: #f0c575;
}
.friends-panel {
    right: auto;
    left: 22px;
    bottom: 92px;
}

/* Map keeps its full interactive geometry; only its chrome is re-skinned. */
.lm-wrapper {
    --lm-bg: #090f12 !important;
    --lm-glass: rgba(20, 29, 34, 0.88) !important;
    --lm-border: rgba(217, 166, 84, 0.4) !important;
    --lm-accent: #d9a654 !important;
    --lm-success: #7ea77c !important;
    --lm-warning: #c29048 !important;
    --lm-danger: #b45d4e !important;
    --lm-text-main: #eee7d8 !important;
    --lm-text-sub: #aaa89f !important;
    margin-top: 0 !important;
}
.lm-viewport { border-radius: 4px 4px 12px 12px !important; border-top: 2px solid #d9a654 !important; box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important; }
.lm-btn, .lm-zone-controls, .lm-hud-bottom-left, .lm-friends-panel, .lm-prime-box, .lm-privacy-list {
    border-color: rgba(217,166,84,0.42) !important;
    border-radius: 3px !important;
    background: rgba(18,27,32,0.92) !important;
}
.lm-btn:hover, .lm-zone-toggle.active { border-color: #d9a654 !important; color: #17140e !important; background: #d9a654 !important; }

/* Responsive collapse preserves all navigation through the account menu and rail links. */
@media (max-width: 1320px) {
    :root { --rail-width: 258px; }
    .nav-link { min-width: 104px; padding-inline: 14px; }
    .system-status { display: none; }
}

@media (max-width: 1080px) {
    :root { --rail-width: 0px; }
    .storage-rail { display: none; }
    .layout-wrapper, .site-footer { margin-right: 0; }
    #content-preloader { right: 0; }
    .top-navbar { padding-inline: 18px; }
    .nav-link { min-width: 98px; }
}

@media (max-width: 820px) {
    :root { --nav-height: 106px; }
    .top-navbar { grid-template-rows: 62px 44px; padding-inline: 12px; }
    .brand-wordmark { display: grid; }
    .brand-logo-frame { width: 43px; height: 43px; flex-basis: 43px; }
    .nav-right { gap: 7px; }
    .header-coin { min-width: 106px; }
    .redeem-launch-btn, .system-status { display: none; }
    .nav-menu { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .nav-menu::-webkit-scrollbar { display: none; }
    .nav-link { min-width: max-content; padding-inline: 17px; }
    .nav-submenu { display: none; }
    .layout-wrapper > .main-content { padding: 18px 14px 34px; }
    .command-hero { min-height: 390px; }
    .command-community-grid { grid-template-columns: 1fr; }
}

@media (max-width: 590px) {
    :root { --nav-height: 100px; }
    .top-navbar { grid-template-rows: 58px 42px; }
    .brand-wordmark { display: none; }
    .header-wallet { display: flex; }
    .header-coin { min-width: 77px; height: 25px; padding-right: 7px; }
    .header-coin img { width: 19px; height: 19px; flex-basis: 19px; }
    .user-profile-btn { min-width: auto; border: 0; background: transparent; }
    .user-info { display: none; }
    .nav-menu { display: flex; }
    .nav-link { min-height: 41px; font-size: 12px; }
    .site-footer { padding: 12px 14px; }
    .site-footer > span:nth-child(2) { display: none; }
    .command-copy h1 { font-size: 47px !important; }
    .event-promo { grid-template-columns: 1fr; }
    .event-art { min-height: 190px; border-right: 0; border-bottom: 1px solid rgba(217,166,84,0.2); }
    .event-art img { height: 170px; }
    .friends-launch { left: 14px; bottom: 14px; width: 52px; height: 52px; }
    .friends-panel { left: 14px; right: 14px; bottom: 78px; width: auto; }
}

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