@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700;900&family=Marcellus&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --mw-sky: #e5c158;         /* Rich amber gold */
    --mw-cyan: #fff4c4;        /* Soft cream gold */
    --mw-blue: #8e6c4a;        /* Bronze brown */
    --mw-blue-deep: #281d13;   /* Deep charcoal brown */
    --mw-gold: #fff4c4;        /* Cream gold */
    --mw-orange: #d4af37;      /* Burnished gold */
    --mw-bg: #0a0907;          /* Premium charcoal black */
    --mw-panel: rgba(18, 16, 13, 0.95); /* Translucent dark fantasy panel */
    --mw-panel-soft: rgba(142, 108, 74, 0.08); /* Bronze brown soft tint */
    --mw-border: rgba(142, 108, 74, 0.45);     /* Bronze border */
    --mw-text: #e4dfd5;        /* Soft beige-gray text */
    --mw-muted: #a19e95;       /* Muted warm gray text */
    --mw-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
}

html {
    min-height: 100%;
    scroll-padding-top: 92px;
}

body {
    --gold: var(--mw-gold);
    --dark: var(--mw-bg);
    --card: rgba(18, 16, 13, 0.95);
    --card2: rgba(142, 108, 74, 0.45);
    min-height: 100vh;
    color: var(--mw-text) !important;
    background:
        radial-gradient(circle at 50% -10%, rgba(212, 175, 55, 0.12), transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(255, 244, 196, 0.05), transparent 28%),
        linear-gradient(180deg, #12100e 0%, #0a0907 44%, #000000 100%) !important;
    background-attachment: fixed !important;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 9, 7, 0.15), rgba(0, 0, 0, 0.85)),
        url('../img/maps/Map003_Tiles/File0008.jpg') center top / cover no-repeat;
    opacity: .34;
    filter: saturate(0.7) contrast(1.15) brightness(0.85);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 8% 16%, rgba(255,244,196,.12) 0%, rgba(142,108,74,.06) 18%, transparent 44%),
        radial-gradient(ellipse at 28% 24%, rgba(255,255,255,.08) 0%, rgba(212,175,55,.04) 21%, transparent 48%),
        radial-gradient(ellipse at 52% 8%, rgba(142,108,74,.08) 0%, rgba(255,255,255,.04) 20%, transparent 46%),
        radial-gradient(ellipse at 75% 20%, rgba(255,255,255,.08) 0%, rgba(142,108,74,.04) 22%, transparent 48%),
        radial-gradient(ellipse at 96% 13%, rgba(255,244,196,.1) 0%, rgba(212,175,55,.04) 18%, transparent 42%),
        radial-gradient(ellipse at 18% 72%, rgba(142,108,74,.04) 0%, rgba(212,175,55,.03) 24%, transparent 52%),
        radial-gradient(ellipse at 82% 78%, rgba(255,255,255,.04) 0%, rgba(142,108,74,.03) 24%, transparent 54%),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.01) 1px, transparent 1px);
    background-size: 720px 210px, 640px 180px, 860px 230px, 690px 190px, 760px 210px, 780px 240px, 820px 250px, 54px 54px, 54px 54px;
    background-position: -24% 8%, 6% 24%, 44% 2%, 74% 20%, 118% 10%, -18% 80%, 115% 76%, 0 0, 0 0;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 80%);
    filter: blur(1.5px) saturate(0.9);
    opacity: .9;
    mix-blend-mode: screen;
    animation: mwCloudDrift 58s linear infinite, mwCloudGlow 8s ease-in-out infinite;
}

@keyframes mwCloudDrift {
    0% {
        background-position: -24% 8%, 6% 24%, 44% 2%, 74% 20%, 118% 10%, -18% 80%, 115% 76%, 0 0, 0 0;
    }
    50% {
        background-position: 38% 13%, 48% 18%, 82% 0%, 41% 24%, 58% 16%, 30% 73%, 62% 82%, 27px 12px, 12px 27px;
    }
    100% {
        background-position: 124% 8%, 106% 24%, 144% 2%, -26% 20%, -18% 10%, 118% 80%, -16% 76%, 54px 54px, 54px 54px;
    }
}

@keyframes mwCloudGlow {
    0%, 100% {
        opacity: .74;
        filter: blur(1px) saturate(1.16);
    }
    50% {
        opacity: .96;
        filter: blur(2.5px) saturate(1.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none;
    }

    .cloud-text::before,
    .cloud-text::after,
    .leader-frame::before,
    .leader-frame::after,
    .leader-frame img,
    .map-card::before,
    .map-card::after,
    .map-card img,
    .npc-card::before,
    .npc-card::after,
    .npc-card img,
    .item-icon::before,
    .item-icon::after,
    .item-icon img,
    .news-card::before,
    .news-card::after,
    .news-card img {
        animation: none !important;
    }
}

nav.navbar.site-navbar,
.navbar.site-navbar,
.site-navbar {
    min-height: 66px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #1c1612 0%, #0e0d0b 100%) !important;
    border-top: 3px solid var(--mw-orange) !important;
    border-bottom: 2px solid #000000 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
    backdrop-filter: none !important;
    z-index: 1030 !important;
}

.site-navbar::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 30px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,244,196,.08), rgba(255,255,255,0));
}

nav.navbar.site-navbar > .container,
.navbar.site-navbar > .container,
.site-navbar > .container {
    max-width: 1150px !important;
    min-height: 66px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

nav.navbar.site-navbar .navbar-brand img,
.navbar.site-navbar .navbar-brand img,
.site-navbar .navbar-brand img {
    height: 34px !important;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .8)) !important;
}

nav.navbar.site-navbar .navbar-nav .nav-link,
.navbar.site-navbar .navbar-nav .nav-link,
.site-navbar .nav-link {
    color: var(--mw-text) !important;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
    border-radius: 6px !important;
    margin: 0 4px !important;
    padding: 11px 15px !important;
    transition: color .25s, background .25s, box-shadow .25s, transform .25s;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

nav.navbar.site-navbar .navbar-nav .nav-link:hover,
nav.navbar.site-navbar .navbar-nav .nav-link.active,
.navbar.site-navbar .navbar-nav .nav-link:hover,
.navbar.site-navbar .navbar-nav .nav-link.active,
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: var(--mw-gold) !important;
    background: rgba(142, 108, 74, 0.15) !important;
    box-shadow: inset 0 0 10px rgba(212,175,55,0.15), 0 3px 6px rgba(0,0,0,0.5) !important;
    border-bottom: 2px solid var(--mw-orange) !important;
    transform: translateY(-1px) scale(1.02) !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6) !important;
}

nav.navbar.site-navbar .dropdown-menu,
.navbar.site-navbar .dropdown-menu,
.site-navbar .dropdown-menu {
    background: linear-gradient(145deg, #181512, #0a0908) !important;
    border: 2px solid var(--mw-orange) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.85) !important;
}

nav.navbar.site-navbar .dropdown-item,
.navbar.site-navbar .dropdown-item,
.site-navbar .dropdown-item {
    color: var(--mw-text) !important;
    font-family: 'Marcellus', serif;
    font-weight: 500 !important;
    border-radius: 4px !important;
    padding: 10px 13px !important;
    transition: background .2s, color .2s, transform .2s !important;
}

nav.navbar.site-navbar .dropdown-item:hover,
nav.navbar.site-navbar .dropdown-item:focus,
.navbar.site-navbar .dropdown-item:hover,
.navbar.site-navbar .dropdown-item:focus,
.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
    background: linear-gradient(180deg, #443224, #281d14) !important;
    color: var(--mw-gold) !important;
    transform: translateX(3px) scale(1.02) !important;
}

.site-navbar .dropdown-item i,
.site-navbar .dropdown-item svg,
.online-badge i,
.online-badge svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.site-navbar .navbar-toggler {
    border-color: rgba(142, 108, 74, .65);
    border-radius: 8px;
    background: rgba(142, 108, 74, .12);
}

.site-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .22);
}

.online-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #4a3825, #22170c);
    color: var(--mw-gold);
    font-family: 'Marcellus', serif;
    font-size: .8rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid var(--mw-orange);
    margin-left: 10px;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,.5);
    transition: background .3s, border-color .3s, transform .25s;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.online-badge:hover {
    background: linear-gradient(180deg, #5c4731, #2f2112);
    border-color: var(--mw-gold);
    color: var(--mw-gold-bright);
    transform: translateY(-1px) scale(1.05);
}

.online-badge .online-badge-label {
    font-size: .62rem;
    opacity: .92;
    margin-right: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

#onlineCountUSA,
#onlineCountCAD {
    font-size: .85rem;
    font-weight: 700;
}

a {
    color: var(--mw-cyan);
}

a:hover {
    color: var(--mw-gold);
}

.container,
.container-fluid {
    position: relative;
}

main,
section,
.page-content,
.page-shell,
.wrap {
    position: relative;
}

.hero,
.donate-hero,
.mall-hero,
.login-bg::after,
.register-bg::after {
    background:
        radial-gradient(circle at 50% 0%, rgba(212, 175, 55, .15), transparent 42%),
        linear-gradient(180deg, rgba(22, 18, 14, .95) 0%, rgba(10, 9, 7, .85) 100%) !important;
}

.hero-title,
.section-title,
.mall-hero h1,
.donate-hero h1,
.guide-title,
.title,
h1, h2 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mw-gold) !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.8), 0 0 10px rgba(212, 175, 55, 0.3);
}

.section-divider {
    background: linear-gradient(90deg, transparent, var(--mw-orange), var(--mw-gold), var(--mw-orange), transparent) !important;
    height: 4px !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.cloud-text {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 22px 10px;
    isolation: isolate;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(142,108,74,.1), rgba(212,175,55,.15), rgba(142,108,74,.1));
    border-bottom: 2px solid rgba(212,175,55,.4);
}

.cloud-text::before,
.cloud-text::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cloud-text::before {
    background: linear-gradient(110deg, transparent 0%, transparent 32%, rgba(255,255,255,.3) 45%, rgba(212,175,55,.2) 50%, transparent 64%, transparent 100%);
    transform: translateX(-120%);
    animation: mwTitleShimmer 4.8s ease-in-out infinite;
}

.cloud-text::after {
    inset: auto 10% 2px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--mw-orange), var(--mw-gold), var(--mw-orange), transparent);
    box-shadow: 0 0 14px rgba(212,175,55,.4), 0 0 28px rgba(212,175,55,.15);
    animation: mwTitlePulse 2.8s ease-in-out infinite;
}

@keyframes mwTitleShimmer {
    0%, 100% {
        transform: translateX(-120%);
        opacity: 0;
    }
    18% {
        opacity: .75;
    }
    52% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes mwTitlePulse {
    0%, 100% {
        opacity: .45;
        transform: scaleX(.78);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.leader-gallery {
    gap: 20px !important;
    perspective: 900px;
}

.leader-frame {
    position: relative !important;
    width: 118px !important;
    height: 156px !important;
    padding: 5px;
    border: 2px solid var(--mw-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(40, 29, 19, .8), rgba(22, 18, 14, .95)),
        radial-gradient(circle at 50% 18%, rgba(212,175,55,.12), transparent 48%) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,.05) !important;
    transform-style: preserve-3d;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease !important;
}

.leader-frame::before {
    content: '';
    position: absolute;
    inset: -45% -70%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.3) 48%, rgba(212,175,55,.15) 52%, transparent 64%);
    transform: translateX(-45%) rotate(10deg);
    opacity: 0;
    animation: mwHeroCardShine 5.6s ease-in-out infinite;
}

.leader-frame::after {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: 1;
    pointer-events: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 0 15px rgba(142,108,74,.15), 0 0 10px rgba(142,108,74,.05);
}

.leader-frame:hover {
    border-color: var(--mw-orange) !important;
    transform: translateY(-8px) rotateX(4deg) scale(1.06) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(212,175,55,.3), 0 0 15px rgba(255,244,196,.15), inset 0 1px 0 rgba(255,255,255,.15) !important;
    filter: saturate(1.1);
}

.leader-frame:hover::before {
    opacity: 1;
    animation-duration: 1.4s;
}

.leader-frame img {
    position: relative;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px;
    object-fit: contain !important;
    background: radial-gradient(circle at 50% 18%, rgba(212,175,55,.1), rgba(22,18,14,.9) 68%) !important;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.6));
    transform-origin: center bottom;
    transition: transform .35s ease, filter .35s ease;
    animation: mwHeroCardFloat 4.8s ease-in-out infinite;
}

.leader-frame:hover img {
    transform: translateY(-3px) scale(1.06);
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(212,175,55,.2));
}

.leader-frame .leader-label {
    z-index: 3;
    left: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(40, 29, 19, .9), rgba(18, 16, 13, .95)) !important;
    border: 1px solid var(--mw-border);
    color: var(--mw-gold) !important;
    font-family: 'Marcellus', serif;
    font-size: .72rem !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px #000000;
    backdrop-filter: blur(5px);
}

.leader-frame.reborn {
    border-color: var(--mw-orange) !important;
    background:
        linear-gradient(145deg, rgba(80, 50, 30, .8), rgba(22, 18, 14, .95)),
        radial-gradient(circle at 50% 18%, rgba(212,175,55,.2), transparent 50%) !important;
}

.leader-frame.reborn::after {
    box-shadow: inset 0 0 20px rgba(212,175,55,.15), 0 0 15px rgba(212,175,55,.1);
}

.leader-frame.reborn:hover {
    border-color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(212,175,55,.4), 0 0 25px rgba(142,108,74,.25), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

@keyframes mwHeroCardShine {
    0%, 72%, 100% {
        transform: translateX(-45%) rotate(10deg);
        opacity: 0;
    }
    82% {
        opacity: .75;
    }
    94% {
        transform: translateX(45%) rotate(10deg);
        opacity: 0;
    }
}

@keyframes mwHeroCardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.map-card {
    position: relative !important;
    min-height: 206px;
    border: 2px solid var(--mw-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(40, 29, 19, .4), rgba(22, 18, 14, .95)),
        radial-gradient(circle at 50% 0%, rgba(212,175,55,.08), transparent 52%) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease !important;
}

.map-card::before {
    content: '';
    position: absolute;
    inset: -55% -80%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.3) 49%, rgba(212,175,55,.15) 53%, transparent 64%);
    opacity: 0;
    transform: translateX(-42%) rotate(10deg);
    animation: mwMapCardShine 6.2s ease-in-out infinite;
}

.map-card::after {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: 2;
    pointer-events: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 0 15px rgba(142,108,74,.1), 0 0 10px rgba(142,108,74,.05);
}

.map-card:hover {
    border-color: var(--mw-orange) !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212,175,55,.25), 0 0 15px rgba(255,244,196,.15), inset 0 1px 0 rgba(255,255,255,.1) !important;
    filter: saturate(1.1);
}

.map-card:hover::before {
    opacity: 1;
    animation-duration: 1.5s;
}

.map-card img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    border-bottom: 2px solid var(--mw-border);
    filter: saturate(0.8) contrast(1.05) brightness(.85);
    transform: scale(1.02);
    transition: transform .45s ease, filter .35s ease;
    animation: mwMapImageFloat 7s ease-in-out infinite;
}

.map-card:hover img {
    transform: scale(1.08);
    filter: saturate(1.05) contrast(1.08) brightness(1);
}

.map-card .card-body {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    padding: 8px 10px !important;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(40, 29, 19, .9), rgba(22, 18, 14, .95));
    border: 1px solid var(--mw-border);
    box-shadow: 0 6px 15px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(5px);
}

.map-card .card-title {
    font-family: 'Cinzel', serif;
    color: var(--mw-gold) !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000000;
}

.map-card .card-text {
    display: inline-flex;
    align-items: center;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(142, 108, 74, .2);
    border: 1px solid rgba(142, 108, 74, .35);
    color: var(--mw-text) !important;
    font-family: 'Inter', sans-serif;
    font-size: .68rem !important;
    font-weight: 500;
}

@keyframes mwMapCardShine {
    0%, 74%, 100% {
        transform: translateX(-42%) rotate(10deg);
        opacity: 0;
    }
    84% {
        opacity: .72;
    }
    96% {
        transform: translateX(42%) rotate(10deg);
        opacity: 0;
    }
}

@keyframes mwMapImageFloat {
    0%, 100% {
        transform: scale(1.02) translateY(0);
    }
    50% {
        transform: scale(1.045) translateY(-3px);
    }
}

.npc-gallery-grid {
    gap: 22px !important;
    perspective: 900px;
}

.npc-card {
    position: relative !important;
    min-height: 188px !important;
    padding: 22px 14px 18px !important;
    border: 2px solid var(--mw-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(40, 29, 19, .4), rgba(22, 18, 14, .95)),
        radial-gradient(circle at 50% 22%, rgba(212,175,55,.08), transparent 48%) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease !important;
}

.npc-card::before {
    content: '' !important;
    position: absolute !important;
    inset: -55% -80% !important;
    z-index: 3 !important;
    pointer-events: none;
    border-radius: 0 !important;
    padding: 0 !important;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.3) 49%, rgba(212,175,55,.15) 53%, transparent 64%) !important;
    opacity: 0;
    -webkit-mask: none !important;
    mask: none !important;
    transform: translateX(-42%) rotate(10deg);
    animation: mwNpcCardShine 6.6s ease-in-out infinite;
}

.npc-card::after {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: 1;
    pointer-events: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 0 15px rgba(142,108,74,.1), 0 0 10px rgba(142,108,74,.05);
}

.npc-card:hover {
    border-color: var(--mw-orange) !important;
    transform: translateY(-8px) rotateX(4deg) scale(1.03) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212,175,55,.25), 0 0 15px rgba(255,244,196,.1), inset 0 1px 0 rgba(255,255,255,.1) !important;
    filter: saturate(1.1);
}

.npc-card:hover::before {
    opacity: 1 !important;
    animation-duration: 1.45s;
}

.npc-card .npc-sprite-wrap {
    position: relative;
    z-index: 2;
    width: 96px !important;
    height: 96px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle, rgba(212,175,55,.12), transparent 54%),
        linear-gradient(145deg, rgba(40, 29, 19, .6), rgba(22, 18, 14, .9)) !important;
    border: 2px solid var(--mw-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 15px rgba(0,0,0,.5);
    transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.npc-card:hover .npc-sprite-wrap {
    transform: translateY(-3px) scale(1.06);
    background:
        radial-gradient(circle, rgba(212,175,55,.2), transparent 58%),
        linear-gradient(145deg, rgba(50, 37, 26, .7), rgba(22, 18, 14, .95)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.6), 0 0 12px rgba(212,175,55,.15);
}

.npc-card img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.6));
    transform-origin: center bottom;
    transition: transform .35s ease, filter .35s ease;
    animation: mwNpcSpriteFloat 4.6s ease-in-out infinite;
}

.npc-card:hover img {
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(212,175,55,.2));
}

.npc-card .npc-name {
    position: relative;
    z-index: 2;
    width: calc(100% - 8px);
    padding: 6px 8px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(40, 29, 19, .9), rgba(18, 16, 13, .95));
    border: 1px solid var(--mw-border);
    color: var(--mw-gold) !important;
    font-family: 'Cinzel', serif;
    font-weight: 500 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px #000000;
    backdrop-filter: blur(5px);
}

.npc-card .npc-role-tag {
    position: relative;
    z-index: 2;
    color: var(--mw-gold) !important;
    font-family: 'Marcellus', serif;
    background: linear-gradient(180deg, var(--mw-gold), var(--mw-orange)) !important;
    border: 1px solid var(--mw-orange) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
    text-shadow: 0 1px 2px #000000;
}

@keyframes mwNpcCardShine {
    0%, 75%, 100% {
        transform: translateX(-42%) rotate(10deg);
        opacity: 0;
    }
    85% {
        opacity: .72;
    }
    97% {
        transform: translateX(42%) rotate(10deg);
        opacity: 0;
    }
}

@keyframes mwNpcSpriteFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.item-strip {
    gap: 14px !important;
    padding: 22px 6px 28px !important;
}

.item-icon {
    position: relative !important;
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 70px !important;
    border: 2px solid var(--mw-border) !important;
    border-radius: 8px !important;
    overflow: visible !important;
    background:
        linear-gradient(145deg, rgba(40, 29, 19, .8), rgba(22, 18, 14, .95)),
        radial-gradient(circle at 50% 20%, rgba(212,175,55,.1), transparent 54%) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
    isolation: isolate;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, filter .28s ease !important;
}

.item-icon::before {
    content: '';
    position: absolute;
    inset: -45% -70%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.3) 49%, rgba(212,175,55,.15) 53%, transparent 64%);
    opacity: 0;
    transform: translateX(-42%) rotate(10deg);
    animation: mwItemShine 5.4s ease-in-out infinite;
}

.item-icon::after {
    content: '';
    position: absolute;
    inset: 4px;
    z-index: 1;
    pointer-events: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 0 12px rgba(142,108,74,.1), 0 0 8px rgba(142,108,74,.05);
}

.item-icon:hover {
    border-color: var(--mw-orange) !important;
    transform: translateY(-8px) scale(1.22) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .7), 0 0 20px rgba(212,175,55,.3), 0 0 12px rgba(255,244,196,.15), inset 0 1px 0 rgba(255,255,255,.15) !important;
    filter: saturate(1.1);
}

.item-icon:hover::before {
    opacity: 1;
    animation-duration: 1.2s;
}

.item-icon img {
    position: relative;
    z-index: 2;
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
    transform-origin: center bottom;
    transition: transform .28s ease, filter .28s ease;
    animation: mwItemFloat 4.4s ease-in-out infinite;
}

.item-icon:hover img {
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(212,175,55,.2));
}

.item-tooltip {
    border: 2px solid var(--mw-orange) !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, #1c1510, #0a0907) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .8), 0 0 15px rgba(212,175,55,.2) !important;
}

.item-tooltip .item-tt-name {
    font-family: 'Cinzel', serif;
    color: var(--mw-gold) !important;
    text-shadow: 0 1px 2px #000000;
}

@keyframes mwItemShine {
    0%, 72%, 100% {
        transform: translateX(-42%) rotate(10deg);
        opacity: 0;
    }
    82% {
        opacity: .72;
    }
    94% {
        transform: translateX(42%) rotate(10deg);
        opacity: 0;
    }
}

@keyframes mwItemFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.news-card {
    position: relative !important;
    min-height: 100%;
    border: 2px solid var(--mw-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(40, 29, 19, .4), rgba(22, 18, 14, .95)),
        radial-gradient(circle at 50% 0%, rgba(212,175,55,.08), transparent 52%) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
    isolation: isolate;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease !important;
}

.news-card::before {
    content: '';
    position: absolute;
    inset: -55% -80%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.3) 49%, rgba(212,175,55,.15) 53%, transparent 64%);
    opacity: 0;
    transform: translateX(-42%) rotate(10deg);
    animation: mwNewsShine 6.4s ease-in-out infinite;
}

.news-card::after {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: 2;
    pointer-events: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 0 15px rgba(142,108,74,.1), 0 0 10px rgba(142,108,74,.05);
}

.news-card:hover {
    border-color: var(--mw-orange) !important;
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212,175,55,.25), 0 0 15px rgba(255,244,196,.15), inset 0 1px 0 rgba(255,255,255,.1) !important;
    filter: saturate(1.1);
}

.news-card:hover::before {
    opacity: 1;
    animation-duration: 1.5s;
}

.news-card img {
    width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    border-bottom: 2px solid var(--mw-border);
    filter: saturate(0.8) contrast(1.04) brightness(.85);
    transform: scale(1.02);
    transition: transform .45s ease, filter .35s ease;
    animation: mwNewsImageFloat 7.2s ease-in-out infinite;
}

.news-card:hover img {
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.08) brightness(1.02);
}

.news-card-body {
    position: relative;
    z-index: 4;
    margin: -18px 12px 12px;
    padding: 18px !important;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(40, 29, 19, .9), rgba(22, 18, 14, .95));
    border: 1px solid var(--mw-border);
    box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(5px);
}

.news-date {
    color: var(--mw-orange) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.news-title {
    font-family: 'Cinzel', serif;
    color: var(--mw-gold) !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 0 #000000;
}

.news-excerpt {
    color: rgba(255,255,255,.85) !important;
    font-family: 'Inter', sans-serif;
}

@keyframes mwNewsShine {
    0%, 74%, 100% {
        transform: translateX(-42%) rotate(10deg);
        opacity: 0;
    }
    84% {
        opacity: .72;
    }
    96% {
        transform: translateX(42%) rotate(10deg);
        opacity: 0;
    }
}

@keyframes mwNewsImageFloat {
    0%, 100% {
        transform: scale(1.02) translateY(0);
    }
    50% {
        transform: scale(1.045) translateY(-3px);
    }
}

.card,
.retro-card,
.login-wrapper,
.login-guide,
.login-form,
.register-wrapper,
.register-guide,
.register-form,
.donate-card,
.reward-tier-panel,
.perk-card,
.mall-card,
.map-card,
.npc-card,
.news-card,
.guide-card,
.page-wrap,
.profile-card,
.rank-card,
.quest-card,
.wiki-card,
.pet-card,
.game-shell,
.score-panel,
.leaderboard-panel,
.info-box,
.status,
.log {
    background: linear-gradient(145deg, rgba(40, 29, 19, 0.85) 0%, rgba(22, 18, 14, 0.95) 100%) !important;
    border: 2px solid var(--mw-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--mw-shadow), inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: var(--mw-text) !important;
}

.card:hover,
.retro-card:hover,
.donate-card:hover,
.reward-tier-card:hover,
.perk-card:hover,
.mall-card:hover,
.map-card:hover,
.npc-card:hover,
.news-card:hover,
.guide-card:hover,
.quest-card:hover,
.wiki-card:hover,
.pet-card:hover {
    border-color: var(--mw-orange) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(212,175,55, 0.15), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.btn,
button,
.btn-gold,
.amount-btn,
.new-board-btn,
.submit-score-btn,
.claim-prize-btn,
.craft-btn {
    border-radius: 4px !important;
    font-family: 'Marcellus', serif;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: 1px solid var(--mw-orange) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .5), 0 2px 0 var(--mw-orange) !important;
    transition: transform .22s, filter .22s, box-shadow .22s !important;
    background: linear-gradient(180deg, #5c432d 0%, #3a2717 100%) !important;
    color: var(--mw-gold) !important;
    text-shadow: 0 2px 0 #000000;
}

.btn:hover,
button:hover,
.btn-gold:hover,
.amount-btn:hover,
.new-board-btn:hover,
.submit-score-btn:hover:not(:disabled),
.claim-prize-btn:hover:not(:disabled),
.craft-btn:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .6), 0 2px 0 var(--mw-orange), 0 0 10px rgba(212,175,55,0.2) !important;
}

.btn-gold,
.amount-btn.selected,
.mall-tabs .nav-link.active {
    background: linear-gradient(180deg, #8c6a3b 0%, #523b1e 100%) !important;
    color: #ffffff !important;
    border-color: var(--mw-gold) !important;
}

.btn-primary,
.btn-info,
.btn-outline-primary:hover,
.mall-tabs .nav-link:hover {
    background: linear-gradient(180deg, #443224 0%, #2e2016 100%) !important;
    color: var(--mw-gold) !important;
    border-color: var(--mw-border) !important;
    text-shadow: 0 2px 0 #000000;
}

.form-control,
.form-select,
input,
select,
textarea {
    background-color: rgba(18, 16, 13, 0.95) !important;
    border: 1.5px solid var(--mw-border) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.5) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mw-orange) !important;
    box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .15), 0 0 10px rgba(212, 175, 55, .2) !important;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--mw-muted) !important;
}

.table,
.table-dark {
    --bs-table-bg: rgba(18, 16, 13, 0.85);
    --bs-table-striped-bg: rgba(142, 108, 74, 0.05);
    --bs-table-hover-bg: rgba(212, 175, 55, 0.08);
    --bs-table-border-color: rgba(142, 108, 74, 0.2);
    color: var(--mw-text) !important;
    border-color: rgba(142, 108, 74, 0.2) !important;
    font-family: 'Inter', sans-serif;
}

.modal-content,
.hero-modal .modal-content,
.map-modal .modal-content,
.npc-modal .modal-content {
    background: linear-gradient(145deg, #181512, #0a0908) !important;
    border: 2px solid var(--mw-orange) !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .85) !important;
    color: var(--mw-text) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(142, 108, 74, 0.2) !important;
}

.alert {
    border-radius: 6px !important;
    border-width: 1.5px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.alert-info {
    background: rgba(142, 108, 74, 0.1) !important;
    border-color: rgba(142, 108, 74, 0.4) !important;
    color: var(--mw-gold) !important;
}

.alert-warning {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: var(--mw-orange) !important;
    color: var(--mw-gold) !important;
}

.alert-success {
    background: rgba(40, 100, 40, 0.15) !important;
    border-color: #3d8b3d !important;
    color: #a3e8a3 !important;
}

.alert-danger {
    background: rgba(100, 30, 30, 0.15) !important;
    border-color: #8b3d3d !important;
    color: #e8a3a3 !important;
}

.badge,
.mini-pill,
.event-chip,
.launcher-version,
.quest-level,
.npc-role-tag,
.map-badge,
.npc-badge,
.hero-badge {
    border-radius: 4px !important;
    border: 1px solid var(--mw-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    background-color: rgba(142, 108, 74, 0.15) !important;
    color: var(--mw-gold) !important;
}

footer {
    background: linear-gradient(180deg, #100e0c, #050403) !important;
    border-top: 2px solid var(--mw-border);
    color: var(--mw-muted) !important;
    font-family: 'Inter', sans-serif;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0a0907;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--mw-orange), #5c432d);
    border-radius: 999px;
    border: 2px solid #0a0907;
}

@media (max-width: 991.98px) {
    .site-navbar .container {
        row-gap: 10px;
    }

    .online-badge {
        order: 3;
        margin-left: 0;
        margin-right: 8px;
    }

    .site-navbar .nav-link {
        margin: 4px 0;
    }
}

@media (max-width: 575.98px) {
    .online-badge {
        font-size: .72rem;
        padding: 4px 10px;
    }
}