/*
 * Vamp Wars — Nightfall Authenticated Client
 * Loaded after the legacy and Neopets-inspired stylesheets.
 * This file intentionally uses stronger selectors and !important where the
 * older skin marks light surfaces as !important.
 */

:root {
    color-scheme: dark;
    --vwa-bg-0: #04060a;
    --vwa-bg-1: #070a10;
    --vwa-panel-0: #0d121b;
    --vwa-panel-1: #111824;
    --vwa-panel-2: #172131;
    --vwa-panel-3: #1c283a;
    --vwa-border: rgba(178, 196, 221, .14);
    --vwa-border-strong: rgba(203, 216, 235, .24);
    --vwa-text: #f1f5fb;
    --vwa-text-soft: #c7d1df;
    --vwa-muted: #8f9db0;
    --vwa-faint: #647186;
    --vwa-crimson: #a6213e;
    --vwa-crimson-bright: #df4863;
    --vwa-gold: #d6b36d;
    --vwa-gold-bright: #f0d58f;
    --vwa-blue: #559aca;
    --vwa-green: #4fc489;
    --vwa-danger: #ef6678;
    --vwa-radius-sm: 10px;
    --vwa-radius-md: 16px;
    --vwa-radius-lg: 22px;
    --vwa-shadow: 0 18px 48px rgba(0, 0, 0, .34);
    --vwa-shadow-soft: 0 10px 28px rgba(0, 0, 0, .24);
}

html {
    min-height: 100%;
    background: var(--vwa-bg-0) !important;
}

body.dark-body {
    min-height: 100vh;
    margin: 0;
    color: var(--vwa-text-soft) !important;
    background:
        radial-gradient(circle at 10% -8%, rgba(166, 33, 62, .23), transparent 31rem),
        radial-gradient(circle at 93% 2%, rgba(70, 92, 158, .15), transparent 35rem),
        radial-gradient(circle at 50% 112%, rgba(80, 35, 94, .15), transparent 42rem),
        linear-gradient(180deg, #090b12 0%, #05070b 52%, #030407 100%) fixed !important;
    scrollbar-color: #344259 #080b11;
    scrollbar-width: thin;
}

body.dark-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 84%);
    mask-image: linear-gradient(180deg, #000, transparent 84%);
}

body.dark-body,
body.dark-body td,
body.dark-body th,
body.dark-body input,
body.dark-body select,
body.dark-body textarea,
body.dark-body button {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body.dark-body a {
    color: #86c0e8;
}

body.dark-body a:hover,
body.dark-body a:focus-visible {
    color: #c2e6ff;
}

/* Entire authenticated shell */
body.dark-body .theme-shell,
body.dark-body .dark-theme-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    background: transparent !important;
}

body.dark-body .theme-wrapper,
body.dark-body .dark-theme-wrapper {
    width: min(1380px, calc(100% - 28px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
}

/* Header / HUD */
body.dark-body .theme-header,
body.dark-body .dark-theme-header {
    /* Override the legacy MCCodes .header { width: 1000px; } rule so the
       complete HUD always matches the responsive game-content wrapper. */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 14px 0 16px !important;
    color: var(--vwa-text) !important;
    background:
        radial-gradient(circle at 12% -15%, rgba(223, 72, 99, .30), transparent 35%),
        radial-gradient(circle at 86% 5%, rgba(85, 154, 202, .16), transparent 34%),
        linear-gradient(135deg, #17111b 0%, #101621 52%, #090d14 100%) !important;
    border: 1px solid rgba(223, 72, 99, .25) !important;
    border-radius: var(--vwa-radius-lg) !important;
    box-shadow: var(--vwa-shadow), 0 0 42px rgba(166, 33, 62, .13) !important;
}

body.dark-body .theme-header::before,
body.dark-body .dark-theme-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: .30 !important;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, .06), transparent 36%, rgba(255, 255, 255, .018)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 12px) !important;
}

body.dark-body .header_bg {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 152px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 24px 26px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.dark-body .vw-game-brand-panel {
    min-width: 250px;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    color: #fff !important;
    text-decoration: none !important;
}

body.dark-body .vw-game-brand-panel .vw-brand-mark {
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 52px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .24), transparent 38%),
        linear-gradient(145deg, #c32e4b, #73162e 60%, #35101f) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(135, 20, 46, .33), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
}

body.dark-body .vw-game-brand-panel strong {
    display: block !important;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(25px, 2.6vw, 34px) !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    text-shadow: 0 5px 20px rgba(0, 0, 0, .34) !important;
}

body.dark-body .vw-game-brand-panel small {
    display: block !important;
    margin-top: 7px !important;
    color: #b9aeba !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

body.dark-body .player_stats {
    position: relative !important;
    inset: auto !important;
    width: min(390px, 100%) !important;
    padding: 15px 16px !important;
    color: var(--vwa-text-soft) !important;
    background: rgba(5, 8, 13, .72) !important;
    border: 1px solid var(--vwa-border-strong) !important;
    border-radius: var(--vwa-radius-md) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(8px) !important;
}

body.dark-body .player_name {
    margin: 0 0 9px !important;
    padding: 0 0 9px !important;
    color: #fff !important;
    border-bottom: 1px solid var(--vwa-border) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

body.dark-body .player_stats table,
body.dark-body .player_stats tbody,
body.dark-body .player_stats tr,
body.dark-body .player_stats td {
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.dark-body .player_stats_lbl {
    color: #9aa7b9 !important;
}

body.dark-body .player_stats_percent_value {
    color: #edf3fa !important;
}

body.dark-body .player_stats_bar {
    background: #080b11 !important;
    border: 1px solid #2a3448 !important;
}

body.dark-body .header_meta_bar {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    background: rgba(5, 8, 13, .87) !important;
    border-top: 1px solid var(--vwa-border) !important;
    border-bottom: 1px solid var(--vwa-border) !important;
}

body.dark-body .player_assets {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
}

body.dark-body .player_assets .asset {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 8px 10px !important;
    color: var(--vwa-text-soft) !important;
    background: linear-gradient(180deg, rgba(31, 42, 59, .88), rgba(19, 26, 39, .88)) !important;
    border: 1px solid var(--vwa-border) !important;
    border-radius: var(--vwa-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

body.dark-body .asset_label {
    flex: 0 0 auto !important;
    color: #8f9caf !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.dark-body .asset_value {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #f0f4fa !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.dark-body .header_nav_bar {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 9px 11px 11px !important;
    background: rgba(7, 10, 16, .97) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
}

body.dark-body .header_quicklinks {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch !important;
}

body.dark-body .header_quicklink {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 61px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 5px !important;
    color: #abb7c7 !important;
    background: linear-gradient(180deg, rgba(29, 39, 55, .90), rgba(19, 26, 38, .90)) !important;
    border: 1px solid transparent !important;
    border-radius: var(--vwa-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

body.dark-body .header_quicklink i {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    color: #d4dde9 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
}

body.dark-body .header_quicklink:hover,
body.dark-body .header_quicklink:focus-visible,
body.dark-body .header_quicklink.is-active,
body.dark-body .header_quicklink.header_quicklink-active {
    color: #fff !important;
    background: linear-gradient(180deg, #2b374b, #1b2433) !important;
    border-color: var(--vwa-border-strong) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    transform: translateY(-1px) !important;
}

body.dark-body .header_quicklink:hover i,
body.dark-body .header_quicklink:focus-visible i,
body.dark-body .header_quicklink.is-active i,
body.dark-body .header_quicklink.header_quicklink-active i {
    color: var(--vwa-crimson-bright) !important;
}

body.dark-body .header_quicklink_count {
    top: 4px !important;
    right: 12% !important;
    min-width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    background: var(--vwa-crimson-bright) !important;
    border: 2px solid #111824 !important;
}

/* Two-column game area */
body.dark-body .content-shell,
body.dark-body .dark-content-shell {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 34px !important;
}

body.dark-body .layout-table,
body.dark-body .dark-layout-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.dark-body .layout-table > tbody,
body.dark-body .layout-table > tbody > tr,
body.dark-body .layout-table > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
}

body.dark-body .layout-left,
body.dark-body .dark-layout-left {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    padding: 0 18px 0 0 !important;
    vertical-align: top !important;
}

body.dark-body .layout-main,
body.dark-body .dark-layout-main {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
}

body.dark-body .theme-sidebar,
body.dark-body .dark-sidebar {
    position: sticky !important;
    top: 14px !important;
    width: 100% !important;
    overflow: hidden !important;
    color: var(--vwa-text-soft) !important;
    background:
        radial-gradient(circle at 0 0, rgba(166, 33, 62, .08), transparent 230px),
        var(--vwa-panel-0) !important;
    border: 1px solid var(--vwa-border) !important;
    border-radius: var(--vwa-radius-md) !important;
    box-shadow: var(--vwa-shadow-soft) !important;
}

body.dark-body .menu-panel,
body.dark-body .dark-panel {
    padding: 8px !important;
    background: transparent !important;
}

body.dark-body .menu-mobile-header {
    color: var(--vwa-text) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--vwa-border) !important;
}

body.dark-body .menu-group {
    overflow: hidden !important;
    margin: 0 0 7px !important;
    background: rgba(18, 25, 37, .88) !important;
    border: 1px solid var(--vwa-border) !important;
    border-radius: var(--vwa-radius-sm) !important;
}

body.dark-body .menu-group:first-child {
    border-top: 1px solid var(--vwa-border) !important;
}

body.dark-body .menu-group > summary,
body.dark-body .menu-group-title {
    min-height: 43px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    color: #e4eaf3 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent) !important;
    border: 0 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
}

body.dark-body .menu-group > summary i,
body.dark-body .menu-group-title i {
    color: var(--vwa-crimson-bright) !important;
}

body.dark-body .menu-group > summary:hover {
    color: #fff !important;
    background: rgba(48, 62, 83, .46) !important;
}

body.dark-body .menu-group-body {
    padding: 3px 5px 7px !important;
    background: transparent !important;
}

body.dark-body .menu-link,
body.dark-body .menu-link-highlight,
body.dark-body .menu-action,
body.dark-body .menu-staff-link,
body.dark-body .sidebar a {
    min-height: 37px !important;
    color: #b3bfce !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
}

body.dark-body .menu-link i,
body.dark-body .menu-link-highlight i,
body.dark-body .menu-action i,
body.dark-body .sidebar a i {
    color: #77879c !important;
}

body.dark-body .menu-link:hover,
body.dark-body .menu-link:focus-visible,
body.dark-body .menu-link.is-active,
body.dark-body .menu-link[aria-current="page"],
body.dark-body .menu-action:hover,
body.dark-body .menu-staff-link:hover,
body.dark-body .sidebar a:hover {
    color: #fff !important;
    background: rgba(54, 69, 92, .48) !important;
}

body.dark-body .menu-link:hover i,
body.dark-body .menu-link.is-active i,
body.dark-body .menu-link[aria-current="page"] i,
body.dark-body .menu-action:hover i {
    color: var(--vwa-crimson-bright) !important;
}

body.dark-body .menu-action-cost,
body.dark-body .menu-link-badge {
    color: var(--vwa-gold-bright) !important;
}

body.dark-body .menu-muted,
body.dark-body .menu-staff-time,
body.dark-body .menu-clock-date {
    color: var(--vwa-muted) !important;
}

body.dark-body .menu-clock-box {
    color: var(--vwa-text-soft) !important;
    background: rgba(7, 10, 16, .78) !important;
    border: 1px solid var(--vwa-border) !important;
    border-radius: var(--vwa-radius-sm) !important;
}

body.dark-body .menu-clock-title {
    color: var(--vwa-gold-bright) !important;
}

/* Main panel and all legacy content */
body.dark-body .theme-content,
body.dark-body .dark-main-content,
body.dark-body .theme-content.main-content,
body.dark-body #content.theme-content {
    min-height: 650px !important;
    overflow: hidden !important;
    color: var(--vwa-text-soft) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(85, 154, 202, .07), transparent 320px),
        radial-gradient(circle at 0 100%, rgba(166, 33, 62, .05), transparent 330px),
        var(--vwa-panel-0) !important;
    border: 1px solid var(--vwa-border) !important;
    border-radius: var(--vwa-radius-md) !important;
    box-shadow: var(--vwa-shadow-soft) !important;
}

body.dark-body .content-inner,
body.dark-body .dark-content-inner,
body.dark-body #content > .content-inner {
    padding: clamp(19px, 2.25vw, 31px) !important;
    color: inherit !important;
    background: transparent !important;
}

body.dark-body .theme-content h1,
body.dark-body .theme-content h2,
body.dark-body .theme-content h3,
body.dark-body .theme-content h4,
body.dark-body .theme-content h5,
body.dark-body #content h1,
body.dark-body #content h2,
body.dark-body #content h3,
body.dark-body #content h4 {
    color: var(--vwa-text) !important;
}

body.dark-body .theme-content > .content-inner > h3:first-child,
body.dark-body .theme-content h3:first-child {
    margin: 0 0 15px !important;
    padding: 0 0 13px !important;
    color: #fff !important;
    border-bottom: 1px solid var(--vwa-border) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(24px, 2.8vw, 34px) !important;
    font-variant: normal !important;
    letter-spacing: -.025em !important;
}

body.dark-body .theme-content p,
body.dark-body .theme-content li,
body.dark-body .theme-content label,
body.dark-body .theme-content div,
body.dark-body #content p,
body.dark-body #content li,
body.dark-body #content label {
    color: inherit;
}

body.dark-body .theme-content b,
body.dark-body .theme-content strong,
body.dark-body #content b,
body.dark-body #content strong {
    color: #edf3fb;
}

body.dark-body .theme-content hr,
body.dark-body #content hr {
    height: 1px !important;
    margin: 14px 0 !important;
    background: var(--vwa-border) !important;
    border: 0 !important;
}

/* Tables, including old pages with bgcolor attributes */
body.dark-body .theme-content table:not(.layout-table),
body.dark-body #content table:not(.layout-table),
body.dark-body .theme-content .table,
body.dark-body #content .table {
    width: 100% !important;
    overflow: hidden !important;
    color: var(--vwa-text-soft) !important;
    background: #0f1621 !important;
    border: 1px solid var(--vwa-border) !important;
    border-radius: var(--vwa-radius-sm) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
}

body.dark-body .theme-content table:not(.layout-table) th,
body.dark-body #content table:not(.layout-table) th,
body.dark-body .theme-content .table th,
body.dark-body #content .table th {
    padding: 11px 12px !important;
    color: #edf2f8 !important;
    background: #182231 !important;
    border-color: var(--vwa-border) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
}

body.dark-body .theme-content table:not(.layout-table) td,
body.dark-body #content table:not(.layout-table) td,
body.dark-body .theme-content .table td,
body.dark-body #content .table td,
body.dark-body #content td[bgcolor],
body.dark-body #content th[bgcolor] {
    padding: 10px 12px !important;
    color: #c7d1de !important;
    background: transparent !important;
    border-color: var(--vwa-border) !important;
}

body.dark-body .theme-content table:not(.layout-table) tr:nth-child(even) td,
body.dark-body #content table:not(.layout-table) tr:nth-child(even) td {
    background: rgba(255, 255, 255, .014) !important;
}

body.dark-body .theme-content table:not(.layout-table) tr:hover td,
body.dark-body #content table:not(.layout-table) tr:hover td {
    background: rgba(62, 79, 105, .22) !important;
}

/* Forms */
body.dark-body .theme-content input[type="text"],
body.dark-body .theme-content input[type="password"],
body.dark-body .theme-content input[type="email"],
body.dark-body .theme-content input[type="number"],
body.dark-body .theme-content input[type="search"],
body.dark-body .theme-content input[type="url"],
body.dark-body .theme-content select,
body.dark-body .theme-content textarea,
body.dark-body #content input[type="text"],
body.dark-body #content input[type="password"],
body.dark-body #content input[type="email"],
body.dark-body #content input[type="number"],
body.dark-body #content input[type="search"],
body.dark-body #content input[type="url"],
body.dark-body #content select,
body.dark-body #content textarea {
    min-height: 40px !important;
    color: var(--vwa-text) !important;
    background: #090e16 !important;
    border: 1px solid #2b384c !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28) !important;
}

body.dark-body .theme-content textarea,
body.dark-body #content textarea {
    min-height: 110px !important;
}

body.dark-body .theme-content input::placeholder,
body.dark-body .theme-content textarea::placeholder,
body.dark-body #content input::placeholder,
body.dark-body #content textarea::placeholder {
    color: #68768a !important;
}

body.dark-body .theme-content input:focus,
body.dark-body .theme-content select:focus,
body.dark-body .theme-content textarea:focus,
body.dark-body #content input:focus,
body.dark-body #content select:focus,
body.dark-body #content textarea:focus {
    border-color: rgba(85, 154, 202, .72) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(85, 154, 202, .14) !important;
}

body.dark-body .theme-content input[type="submit"],
body.dark-body .theme-content input[type="button"],
body.dark-body .theme-content button,
body.dark-body #content input[type="submit"],
body.dark-body #content input[type="button"],
body.dark-body #content button,
body.dark-body .btn,
body.dark-body .button {
    min-height: 39px !important;
    padding: 9px 15px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #b72b49, #81192f) !important;
    border: 1px solid rgba(235, 97, 121, .42) !important;
    border-radius: 9px !important;
    box-shadow: 0 9px 20px rgba(91, 12, 33, .22), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

body.dark-body .theme-content input[type="submit"]:hover,
body.dark-body .theme-content input[type="button"]:hover,
body.dark-body .theme-content button:hover,
body.dark-body #content input[type="submit"]:hover,
body.dark-body #content input[type="button"]:hover,
body.dark-body #content button:hover,
body.dark-body .btn:hover,
body.dark-body .button:hover {
    background: linear-gradient(180deg, #cf3756, #941d37) !important;
    border-color: rgba(255, 132, 151, .58) !important;
}

/* Messages and legacy blocks */
body.dark-body .info,
body.dark-body .success,
body.dark-body .error,
body.dark-body .alert-box,
body.dark-body .block,
body.dark-body .top-message,
body.dark-body .donate-banner,
body.dark-body .dark-donate-banner {
    color: var(--vwa-text-soft) !important;
    background: var(--vwa-panel-1) !important;
    border: 1px solid var(--vwa-border) !important;
    border-radius: var(--vwa-radius-sm) !important;
    box-shadow: none !important;
}

body.dark-body .info {
    color: #d9ecfb !important;
    background: rgba(48, 105, 147, .17) !important;
    border-color: rgba(85, 154, 202, .34) !important;
}

body.dark-body .success {
    color: #d9f8e7 !important;
    background: rgba(46, 128, 82, .17) !important;
    border-color: rgba(79, 196, 137, .33) !important;
}

body.dark-body .error,
body.dark-body .alert-box {
    color: #ffe1e6 !important;
    background: rgba(151, 32, 57, .20) !important;
    border-color: rgba(239, 102, 120, .37) !important;
}

body.dark-body .donate-banner,
body.dark-body .dark-donate-banner {
    color: #f8e9c5 !important;
    background: linear-gradient(90deg, rgba(108, 72, 24, .28), rgba(54, 37, 18, .18)) !important;
    border-color: rgba(214, 179, 109, .30) !important;
}

/* New home dashboard */
body.dark-body .mmo-home {
    display: grid;
    gap: 16px;
}

body.dark-body .mmo-home-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    padding: clamp(19px, 2.4vw, 28px);
    background:
        radial-gradient(circle at 85% 15%, rgba(223, 72, 99, .16), transparent 260px),
        linear-gradient(135deg, #182131, #101722 62%, #0d131d);
    border: 1px solid var(--vwa-border);
    border-radius: var(--vwa-radius-md);
    box-shadow: var(--vwa-shadow-soft);
}

body.dark-body .mmo-home-kicker {
    margin-bottom: 7px;
    color: var(--vwa-crimson-bright);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
}

body.dark-body .mmo-home-hero h1 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
}

body.dark-body .mmo-home-hero p {
    max-width: 710px;
    margin: 0;
    color: #aeb9c8 !important;
    line-height: 1.65;
}

body.dark-body .mmo-home-badge {
    min-width: 118px;
    padding: 13px 15px;
    text-align: center;
    color: var(--vwa-gold-bright);
    background: rgba(5, 8, 13, .55);
    border: 1px solid rgba(214, 179, 109, .25);
    border-radius: 12px;
}

body.dark-body .mmo-home-badge span,
body.dark-body .mmo-home-badge strong {
    display: block;
}

body.dark-body .mmo-home-badge span {
    color: var(--vwa-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.dark-body .mmo-home-badge strong {
    margin-top: 4px;
    color: var(--vwa-gold-bright) !important;
    font-size: 18px;
}

body.dark-body .mmo-home-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

body.dark-body .mmo-home-stat {
    min-width: 0;
    padding: 14px;
    background: linear-gradient(180deg, rgba(27, 37, 53, .96), rgba(16, 23, 34, .96));
    border: 1px solid var(--vwa-border);
    border-radius: 12px;
}

body.dark-body .mmo-home-stat-label {
    display: block;
    margin-bottom: 7px;
    color: var(--vwa-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.dark-body .mmo-home-stat-value {
    display: block;
    overflow: hidden;
    color: #f0f5fb;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-body .mmo-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 16px;
}

body.dark-body .mmo-panel {
    overflow: hidden;
    color: var(--vwa-text-soft);
    background: #0f1621;
    border: 1px solid var(--vwa-border);
    border-radius: var(--vwa-radius-md);
    box-shadow: var(--vwa-shadow-soft);
}

body.dark-body .mmo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    color: #edf3fa;
    background: #182231;
    border-bottom: 1px solid var(--vwa-border);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.dark-body .mmo-panel-header i {
    color: var(--vwa-crimson-bright);
}

body.dark-body .mmo-panel-body {
    padding: 15px 16px;
}

body.dark-body .mmo-data-list {
    margin: 0;
}

body.dark-body .mmo-data-row {
    display: grid;
    grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr);
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vwa-border);
}

body.dark-body .mmo-data-row:last-child {
    border-bottom: 0;
}

body.dark-body .mmo-data-row dt {
    color: var(--vwa-muted);
    font-weight: 800;
}

body.dark-body .mmo-data-row dd {
    margin: 0;
    color: #edf3fa;
    font-weight: 800;
    text-align: right;
}

body.dark-body .mmo-news-copy {
    color: #b8c3d1 !important;
    line-height: 1.75;
}

body.dark-body .theme-footer,
body.dark-body .dark-theme-footer {
    color: var(--vwa-faint) !important;
    background: transparent !important;
    border: 0 !important;
}

/* Avoid white flashes from browser autofill and old inline colors */
body.dark-body input:-webkit-autofill,
body.dark-body input:-webkit-autofill:hover,
body.dark-body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--vwa-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #090e16 inset !important;
    transition: background-color 9999s ease-out 0s;
}

@media (max-width: 1180px) {
    body.dark-body .player_assets {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.dark-body .header_quicklinks {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    body.dark-body .mmo-home-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    body.dark-body .theme-wrapper,
    body.dark-body .dark-theme-wrapper {
        width: min(100% - 18px, 1380px) !important;
    }

    body.dark-body .header_bg {
        padding: 18px !important;
    }

    body.dark-body .vw-game-brand-panel {
        min-width: 0;
    }

    body.dark-body .layout-table,
    body.dark-body .dark-layout-table,
    body.dark-body .layout-table > tbody,
    body.dark-body .dark-layout-table > tbody,
    body.dark-body .layout-table > tbody > tr,
    body.dark-body .dark-layout-table > tbody > tr {
        display: block !important;
    }

    body.dark-body .layout-left,
    body.dark-body .dark-layout-left,
    body.dark-body .layout-main,
    body.dark-body .dark-layout-main {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }

    body.dark-body .theme-sidebar,
    body.dark-body .dark-sidebar {
        position: fixed !important;
        top: 0 !important;
    }

    body.dark-body .mmo-home-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.dark-body {
        padding-bottom: 74px;
    }

    body.dark-body .theme-header,
    body.dark-body .dark-theme-header {
        margin-top: 72px !important;
        border-radius: 16px !important;
    }

    body.dark-body .header_bg {
        display: block !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    body.dark-body .vw-game-brand-panel {
        display: none !important;
    }

    body.dark-body .player_stats {
        width: 100% !important;
    }

    body.dark-body .player_assets {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.dark-body .header_quicklinks {
        display: flex !important;
        overflow-x: auto !important;
        gap: 7px !important;
        padding-bottom: 2px !important;
        scroll-snap-type: x proximity;
    }

    body.dark-body .header_quicklink {
        min-width: 82px !important;
        flex: 0 0 82px !important;
        scroll-snap-align: start;
    }

    body.dark-body .content-inner,
    body.dark-body .dark-content-inner,
    body.dark-body #content > .content-inner {
        padding: 15px !important;
    }

    body.dark-body .mmo-home-hero {
        grid-template-columns: 1fr;
    }

    body.dark-body .mmo-home-badge {
        width: 100%;
    }

    body.dark-body .mmo-home-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.dark-body .mmo-data-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    body.dark-body .mmo-data-row dd {
        text-align: left;
    }

    body.dark-body .theme-content table:not(.layout-table),
    body.dark-body #content table:not(.layout-table) {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    body.dark-body .theme-wrapper,
    body.dark-body .dark-theme-wrapper {
        width: calc(100% - 12px) !important;
    }

    body.dark-body .player_assets {
        grid-template-columns: 1fr 1fr !important;
    }

    body.dark-body .mmo-home-stats {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* -------------------------------------------------------------------------
   Scrollable MMORPG navigation rail
   ------------------------------------------------------------------------- */
body.dark-body .theme-sidebar,
body.dark-body .dark-sidebar,
body.dark-body #sidebar-left {
    max-height: calc(100vh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(209, 62, 91, .62) rgba(8, 12, 19, .72);
}

body.dark-body .theme-sidebar::-webkit-scrollbar,
body.dark-body .dark-sidebar::-webkit-scrollbar,
body.dark-body #sidebar-left::-webkit-scrollbar {
    width: 8px;
}

body.dark-body .theme-sidebar::-webkit-scrollbar-track,
body.dark-body .dark-sidebar::-webkit-scrollbar-track,
body.dark-body #sidebar-left::-webkit-scrollbar-track {
    background: rgba(8, 12, 19, .72);
}

body.dark-body .theme-sidebar::-webkit-scrollbar-thumb,
body.dark-body .dark-sidebar::-webkit-scrollbar-thumb,
body.dark-body #sidebar-left::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(220, 70, 99, .78), rgba(112, 31, 53, .86));
    border: 2px solid rgba(8, 12, 19, .78);
    border-radius: 999px;
}

body.dark-body .mainmenu-wrap {
    min-height: 0;
}

body.dark-body .menu-clock-box {
    margin-bottom: 4px !important;
}

@media (max-width: 920px) {
    body.dark-body .theme-sidebar,
    body.dark-body .dark-sidebar,
    body.dark-body #sidebar-left {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 18px 18px 0 !important;
    }
}

body.dark-body #content .content-inner.vw-page-enter {
    animation: vw-page-enter .18s ease-out both;
}

@keyframes vw-page-enter {
    from {
        opacity: .45;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}