/* =========================================================
   MELARK FRONTEND THEMES
   ========================================================= */

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;

    --frontend-bg: #edf3f8;
    --frontend-bg-soft: #f7fafc;
    --frontend-panel: #ffffff;

    --frontend-text: #132434;
    --frontend-text-soft: #3d5669;
    --frontend-text-muted: #708597;

    --frontend-cyan: #087fa4;
    --frontend-cyan-dark: #006d91;
    --frontend-green: #10845f;
    --frontend-purple: #6950c8;
    --frontend-yellow: #9a6508;
    --frontend-red: #bf3b55;

    --frontend-border:
        rgba(28, 79, 107, 0.14);

    --frontend-shadow:
        0 24px 70px
        rgba(43, 71, 91, 0.12);
}

/* =========================================================
   TRANSITIONS
   ========================================================= */

body,
.main-navbar,
.site-footer,
.card,
.dropdown-menu,
input,
select,
textarea,
button,
a {
    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

/* =========================================================
   LIGHT BODY
   ========================================================= */

html[data-theme="light"] body {
    color:
        var(--frontend-text);

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(0, 153, 196, 0.1),
            transparent 28rem
        ),
        radial-gradient(
            circle at 88% 35%,
            rgba(105, 80, 200, 0.08),
            transparent 32rem
        ),
        linear-gradient(
            145deg,
            #f9fbfd 0%,
            #eef4f8 48%,
            #e7eff5 100%
        );
}

html[data-theme="light"]
.background-grid {
    background-image:
        linear-gradient(
            rgba(8, 127, 164, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 127, 164, 0.045) 1px,
            transparent 1px
        );
}

html[data-theme="light"]
.background-glow-left {
    background:
        radial-gradient(
            circle,
            rgba(0, 153, 196, 0.13),
            transparent 68%
        );
}

html[data-theme="light"]
.background-glow-right {
    background:
        radial-gradient(
            circle,
            rgba(105, 80, 200, 0.1),
            transparent 68%
        );
}

/* =========================================================
   GLOBAL TEXT
   ========================================================= */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
    color:
        var(--frontend-text);
}

html[data-theme="light"] p {
    color:
        var(--frontend-text-muted);
}

html[data-theme="light"] small,
html[data-theme="light"] label {
    color:
        var(--frontend-text-muted);
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-light {
    color:
        var(--frontend-text) !important;
}

html[data-theme="light"] .text-muted {
    color:
        var(--frontend-text-muted) !important;
}

/* =========================================================
   NAVBAR
   ========================================================= */

html[data-theme="light"]
.main-navbar {
    background:
        linear-gradient(
            180deg,
            rgba(252, 254, 255, 0.97),
            rgba(244, 249, 252, 0.91)
        );

    border-bottom-color:
        rgba(8, 127, 164, 0.13);

    box-shadow:
        0 14px 42px
        rgba(43, 71, 91, 0.1);
}

html[data-theme="light"]
.brand-content strong {
    color:
        var(--frontend-text);
}

html[data-theme="light"]
.brand-content small {
    color:
        var(--frontend-text-muted);
}

html[data-theme="light"]
.main-navbar .nav-link {
    color:
        var(--frontend-text-soft);
}

html[data-theme="light"]
.main-navbar .nav-link:hover,
html[data-theme="light"]
.main-navbar .nav-link.active {
    color:
        var(--frontend-cyan);
}

html[data-theme="light"]
.navbar-toggler {
    color:
        var(--frontend-text);

    border-color:
        var(--frontend-border);
}

html[data-theme="light"]
.navbar-toggler-icon {
    filter:
        invert(1) grayscale(1);
}

/* =========================================================
   THEME BUTTON
   ========================================================= */

.frontend-theme-item {
    display: flex;
    align-items: center;
}

.frontend-theme-toggle {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: #ffd36a;

    background:
        rgba(255, 211, 106, 0.07);

    border:
        1px solid rgba(255, 211, 106, 0.19);

    border-radius: 12px;

    cursor: pointer;
}

.frontend-theme-toggle:hover {
    color: #ffe59d;

    background:
        rgba(255, 211, 106, 0.13);

    border-color:
        rgba(255, 211, 106, 0.35);

    transform:
        translateY(-1px);
}

html[data-theme="light"]
.frontend-theme-toggle {
    color:
        #644cc0;

    background:
        rgba(105, 80, 200, 0.08);

    border-color:
        rgba(105, 80, 200, 0.21);
}

html[data-theme="light"]
.frontend-theme-toggle:hover {
    color:
        #513ba6;

    background:
        rgba(105, 80, 200, 0.14);

    border-color:
        rgba(105, 80, 200, 0.35);
}

/* =========================================================
   LOGIN AND USER BUTTON
   ========================================================= */

html[data-theme="light"]
.steam-login-button {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #087fa4,
            #006d91
        );

    border-color:
        rgba(8, 127, 164, 0.3);
}

html[data-theme="light"]
.user-dropdown-button {
    color:
        var(--frontend-text);

    background:
        rgba(255, 255, 255, 0.74);

    border-color:
        var(--frontend-border);
}

html[data-theme="light"]
.user-navbar-information strong {
    color:
        var(--frontend-text);
}

html[data-theme="light"]
.user-navbar-information small {
    color:
        var(--frontend-cyan);
}

/* =========================================================
   DROPDOWN
   ========================================================= */

html[data-theme="light"]
.user-dropdown-menu,
html[data-theme="light"]
.dropdown-menu {
    color:
        var(--frontend-text);

    background:
        rgba(255, 255, 255, 0.98);

    border-color:
        rgba(8, 127, 164, 0.16);

    box-shadow:
        var(--frontend-shadow);
}

html[data-theme="light"]
.user-dropdown-header span {
    color:
        var(--frontend-text-muted);
}

html[data-theme="light"]
.user-dropdown-header strong {
    color:
        var(--frontend-text);
}

html[data-theme="light"]
.dropdown-item {
    color:
        var(--frontend-text-soft);
}

html[data-theme="light"]
.dropdown-item:hover,
html[data-theme="light"]
.dropdown-item:focus {
    color:
        var(--frontend-text);

    background:
        rgba(8, 127, 164, 0.07);
}

html[data-theme="light"]
.dropdown-divider {
    border-color:
        rgba(28, 79, 107, 0.12);
}

/* =========================================================
   MAIN CONTENT AND COMMON PANELS
   ========================================================= */

html[data-theme="light"]
.main-content {
    color:
        var(--frontend-text);
}

html[data-theme="light"]
:is(
    .card,
    .hero-card,
    .server-card,
    .map-card,
    .feature-card,
    .stat-card,
    .info-card,
    .content-card,
    .glass-card,
    .panel
) {
    color:
        var(--frontend-text);

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.96),
            rgba(242, 247, 251, 0.92)
        );

    border-color:
        var(--frontend-border);

    box-shadow:
        var(--frontend-shadow);
}

html[data-theme="light"]
:is(
    .card,
    .hero-card,
    .server-card,
    .map-card,
    .feature-card,
    .stat-card,
    .info-card,
    .content-card,
    .glass-card,
    .panel
) strong {
    color:
        var(--frontend-text);
}

html[data-theme="light"]
:is(
    .card,
    .hero-card,
    .server-card,
    .map-card,
    .feature-card,
    .stat-card,
    .info-card,
    .content-card,
    .glass-card,
    .panel
) p,
html[data-theme="light"]
:is(
    .card,
    .hero-card,
    .server-card,
    .map-card,
    .feature-card,
    .stat-card,
    .info-card,
    .content-card,
    .glass-card,
    .panel
) small {
    color:
        var(--frontend-text-muted);
}

/* =========================================================
   TABLE
   ========================================================= */

html[data-theme="light"] table {
    color:
        var(--frontend-text-soft);
}

html[data-theme="light"] table th {
    color:
        var(--frontend-text-muted);

    background:
        rgba(226, 237, 244, 0.76);

    border-color:
        var(--frontend-border);
}

html[data-theme="light"] table td {
    color:
        var(--frontend-text-soft);

    border-color:
        rgba(28, 79, 107, 0.09);
}

html[data-theme="light"] table td strong {
    color:
        var(--frontend-text);
}

/* =========================================================
   FORMS
   ========================================================= */

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color:
        var(--frontend-text);

    background:
        rgba(255, 255, 255, 0.92);

    border-color:
        var(--frontend-border);

    -webkit-text-fill-color:
        var(--frontend-text);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color:
        #8294a2;

    opacity: 1;
}

html[data-theme="light"] select option {
    color:
        var(--frontend-text);

    background:
        #ffffff;
}

/* =========================================================
   NOTIFICATIONS
   ========================================================= */

html[data-theme="light"]
.auth-notification {
    box-shadow:
        var(--frontend-shadow);
}

html[data-theme="light"]
.auth-notification.success {
    color:
        #087a55;

    background:
        rgba(238, 255, 248, 0.98);

    border-color:
        rgba(16, 132, 95, 0.22);
}

html[data-theme="light"]
.auth-notification.error {
    color:
        #a92e47;

    background:
        rgba(255, 243, 246, 0.98);

    border-color:
        rgba(191, 59, 85, 0.22);
}

html[data-theme="light"]
.auth-notification .btn-close {
    filter:
        none;
}

/* =========================================================
   FOOTER
   ========================================================= */

html[data-theme="light"]
.site-footer {
    color:
        var(--frontend-text-muted);

    background:
        linear-gradient(
            180deg,
            rgba(245, 249, 252, 0.9),
            rgba(238, 244, 248, 0.98)
        );

    border-top-color:
        rgba(8, 127, 164, 0.13);
}

html[data-theme="light"]
.footer-brand strong {
    color:
        var(--frontend-text);
}

html[data-theme="light"]
.footer-brand p,
html[data-theme="light"]
.footer-bottom {
    color:
        var(--frontend-text-muted);
}

html[data-theme="light"]
.footer-links a {
    color:
        var(--frontend-text-soft);
}

html[data-theme="light"]
.footer-links a:hover {
    color:
        var(--frontend-cyan);
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 991.98px) {
    .frontend-theme-item {
        margin-top: 8px;
    }

    .frontend-theme-toggle {
        width: 100%;
        height: 43px;
    }

    html[data-theme="light"]
    .navbar-collapse {
        background:
            rgba(250, 253, 255, 0.98);

        border-color:
            var(--frontend-border);

        box-shadow:
            var(--frontend-shadow);
    }
}

/* =========================================================
   PAGE-SPECIFIC LIGHT THEME
   HOME + MAPS
   ========================================================= */

/* Shared section typography */
html[data-theme="light"] .section-label {
    color: var(--frontend-cyan) !important;
}

html[data-theme="light"] .section-heading h2 {
    color: var(--frontend-text) !important;
}

html[data-theme="light"] .section-heading p {
    color: var(--frontend-text-muted) !important;
}

/* =========================================================
   HOME HERO
   ========================================================= */

html[data-theme="light"] .home-hero {
    color: var(--frontend-text);

    background:
        radial-gradient(
            circle at 76% 28%,
            rgba(8, 127, 164, 0.13),
            transparent 31rem
        ),
        radial-gradient(
            circle at 92% 72%,
            rgba(105, 80, 200, 0.085),
            transparent 29rem
        ),
        linear-gradient(
            135deg,
            #f9fcfe 0%,
            #f1f6f9 48%,
            #e7eff5 100%
        ) !important;
}

html[data-theme="light"] .home-hero::before {
    background:
        linear-gradient(
            120deg,
            rgba(8, 127, 164, 0.035),
            transparent 48%
        ) !important;

    opacity: 1 !important;
}

html[data-theme="light"] .home-hero::after {
    background:
        linear-gradient(
            135deg,
            transparent 55%,
            rgba(105, 80, 200, 0.045)
        ) !important;

    opacity: 1 !important;
}

html[data-theme="light"] .home-hero .hero-badge,
html[data-theme="light"] .maps-hero .hero-badge {
    color: var(--frontend-cyan);

    background:
        rgba(255, 255, 255, 0.68);

    border-color:
        rgba(8, 127, 164, 0.18);

    box-shadow:
        0 12px 32px
        rgba(43, 71, 91, 0.07);
}

html[data-theme="light"] .home-hero .hero-status-dot,
html[data-theme="light"] .maps-hero .hero-status-dot {
    background: #35c995;

    box-shadow:
        0 0 14px
        rgba(53, 201, 149, 0.55);
}

html[data-theme="light"] .hero-title {
    color: var(--frontend-text) !important;

    text-shadow: none !important;
}

html[data-theme="light"] .hero-title span {
    color: var(--frontend-cyan) !important;

    text-shadow:
        0 0 22px
        rgba(8, 127, 164, 0.12) !important;
}

html[data-theme="light"] .hero-description {
    color: #526b7d !important;
}

html[data-theme="light"] .glow-button {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #087fa4,
            #006d91
        );

    border-color:
        rgba(8, 127, 164, 0.28);

    box-shadow:
        0 15px 35px
        rgba(8, 127, 164, 0.18);
}

html[data-theme="light"] .glow-button:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #006d91,
            #075e7b
        );
}

html[data-theme="light"] .outline-button {
    color: var(--frontend-cyan) !important;

    background:
        rgba(255, 255, 255, 0.72);

    border-color:
        rgba(8, 127, 164, 0.23);
}

html[data-theme="light"] .outline-button:hover {
    color: #ffffff !important;

    background: var(--frontend-cyan);

    border-color:
        var(--frontend-cyan);
}

html[data-theme="light"] .hero-statistics {
    background:
        rgba(255, 255, 255, 0.56);

    border-color:
        rgba(28, 79, 107, 0.13) !important;

    box-shadow:
        0 18px 48px
        rgba(43, 71, 91, 0.075);
}

html[data-theme="light"] .hero-stat-item {
    border-color:
        rgba(28, 79, 107, 0.11) !important;
}

html[data-theme="light"] .hero-stat-item strong {
    color: var(--frontend-text) !important;
}

html[data-theme="light"] .hero-stat-item span {
    color: var(--frontend-text-muted) !important;
}

html[data-theme="light"] .hero-stat-item .online-text,
html[data-theme="light"] .online-text {
    color: var(--frontend-green) !important;
}

/* Home visual rings */
html[data-theme="light"] .core-ring {
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color:
        rgba(8, 127, 164, 0.23) !important;

    box-shadow:
        0 0 0 1px
        rgba(255, 255, 255, 0.18) inset,
        0 0 24px
        rgba(8, 127, 164, 0.055) !important;
}

html[data-theme="light"] .core-ring-two {
    border-color:
        rgba(105, 80, 200, 0.22) !important;
}

html[data-theme="light"] .core-center {
    color: var(--frontend-cyan);

    background:
        rgba(255, 255, 255, 0.88);

    border-color:
        rgba(8, 127, 164, 0.22);

    box-shadow:
        0 0 55px
        rgba(8, 127, 164, 0.14);
}

html[data-theme="light"] .core-status {
    background:
        rgba(255, 255, 255, 0.88);

    border-color:
        rgba(28, 79, 107, 0.13);

    box-shadow:
        0 18px 45px
        rgba(43, 71, 91, 0.11);
}

html[data-theme="light"] .core-status small {
    color: var(--frontend-text-muted) !important;
}

html[data-theme="light"] .core-status strong {
    color: var(--frontend-green) !important;
}

/* =========================================================
   SERVER OVERVIEW
   ========================================================= */

html[data-theme="light"] .server-overview-section {
    color: var(--frontend-text);

    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #eef4f8 100%
        );
}

html[data-theme="light"] .server-stat-card {
    color: var(--frontend-text);

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 246, 250, 0.94)
        );

    border-color:
        rgba(28, 79, 107, 0.13);

    box-shadow:
        0 20px 55px
        rgba(43, 71, 91, 0.095);
}

html[data-theme="light"] .server-stat-label,
html[data-theme="light"] .server-stat-card small {
    color: var(--frontend-text-muted) !important;
}

html[data-theme="light"] .server-stat-card strong {
    color: var(--frontend-text) !important;
}

html[data-theme="light"] .server-stat-card strong.online-text {
    color: var(--frontend-green) !important;
}

/* =========================================================
   MAPS HERO
   ========================================================= */

html[data-theme="light"] .maps-hero {
    position: relative;

    color: var(--frontend-text);

    background:
        radial-gradient(
            circle at 16% 24%,
            rgba(8, 127, 164, 0.12),
            transparent 30rem
        ),
        radial-gradient(
            circle at 88% 32%,
            rgba(105, 80, 200, 0.085),
            transparent 28rem
        ),
        linear-gradient(
            135deg,
            #f8fbfd 0%,
            #edf4f8 52%,
            #e7eef6 100%
        ) !important;
}

html[data-theme="light"] .maps-hero::before {
    background:
        linear-gradient(
            rgba(8, 127, 164, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 127, 164, 0.035) 1px,
            transparent 1px
        ) !important;

    background-size:
        64px 64px !important;

    opacity: 0.72 !important;
}

html[data-theme="light"] .maps-hero::after {
    background:
        radial-gradient(
            circle,
            rgba(105, 80, 200, 0.08),
            transparent 69%
        ) !important;

    opacity: 0.42 !important;
}

html[data-theme="light"] .maps-hero-content {
    position: relative;
    z-index: 2;
}

html[data-theme="light"] .maps-page-title {
    color: var(--frontend-text) !important;

    text-shadow: none !important;
}

html[data-theme="light"] .maps-page-title span {
    color: var(--frontend-cyan) !important;

    text-shadow:
        0 0 22px
        rgba(8, 127, 164, 0.12) !important;
}

html[data-theme="light"] .maps-page-description {
    color: #526b7d !important;
}

/* =========================================================
   MAPS SUMMARY
   ========================================================= */

html[data-theme="light"] .maps-summary {
    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.7);

    border-color:
        rgba(28, 79, 107, 0.13);

    box-shadow:
        0 20px 55px
        rgba(43, 71, 91, 0.09);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

html[data-theme="light"] .maps-summary-item {
    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.62),
            rgba(235, 244, 249, 0.52)
        );

    border-color:
        rgba(28, 79, 107, 0.1);
}

html[data-theme="light"] .maps-summary-item strong {
    color: var(--frontend-text) !important;
}

html[data-theme="light"] .maps-summary-item span {
    color: var(--frontend-text-muted) !important;
}

/* =========================================================
   MAP LIST + CARDS
   ========================================================= */

html[data-theme="light"] .maps-list-section {
    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #edf4f8 100%
        );
}

html[data-theme="light"] .map-card {
    color: var(--frontend-text);

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.985),
            rgba(240, 246, 250, 0.95)
        );

    border-color:
        rgba(28, 79, 107, 0.13);

    box-shadow:
        0 22px 60px
        rgba(43, 71, 91, 0.105);
}

html[data-theme="light"] .map-card:hover {
    border-color:
        rgba(8, 127, 164, 0.22);

    box-shadow:
        0 28px 70px
        rgba(43, 71, 91, 0.14);
}

html[data-theme="light"] .map-card-body {
    color: var(--frontend-text);

    background: transparent;
}

html[data-theme="light"] .map-card-label {
    color: var(--frontend-cyan) !important;
}

html[data-theme="light"] .map-card-heading h3 {
    color: var(--frontend-text) !important;
}

html[data-theme="light"] .map-card-description {
    color: #637989 !important;
}

/* Keep cover dark so map imagery and badges stay readable */
html[data-theme="light"] .map-card-cover {
    color: #ffffff;
}

html[data-theme="light"] .map-card-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(3, 19, 29, 0.04),
            rgba(3, 19, 29, 0.55)
        );
}

html[data-theme="light"] .map-card-code {
    color: #ffffff !important;

    background:
        rgba(3, 19, 29, 0.7);

    border-color:
        rgba(255, 255, 255, 0.16);
}

html[data-theme="light"] .map-card-status {
    color: #ffffff !important;
}

html[data-theme="light"] .map-player-information {
    border-color:
        rgba(28, 79, 107, 0.11);
}

html[data-theme="light"] .map-player-row span {
    color: var(--frontend-text-muted) !important;
}

html[data-theme="light"] .map-player-row strong {
    color: var(--frontend-text) !important;
}

html[data-theme="light"] .map-player-progress {
    background:
        rgba(28, 79, 107, 0.09);
}

html[data-theme="light"] .map-player-progress-bar {
    background:
        linear-gradient(
            90deg,
            var(--frontend-cyan),
            var(--frontend-green)
        );
}

html[data-theme="light"] .map-server-address {
    background:
        rgba(225, 236, 243, 0.64);

    border-color:
        rgba(28, 79, 107, 0.12);
}

html[data-theme="light"] .map-server-address span {
    color: var(--frontend-text-muted) !important;
}

html[data-theme="light"] .map-server-address strong {
    color: var(--frontend-text) !important;
}

html[data-theme="light"] .map-copy-button {
    color: var(--frontend-cyan);

    background:
        rgba(255, 255, 255, 0.76);

    border-color:
        rgba(8, 127, 164, 0.19);
}

html[data-theme="light"] .map-copy-button:hover {
    color: #ffffff;

    background: var(--frontend-cyan);

    border-color:
        var(--frontend-cyan);
}

html[data-theme="light"] .map-join-button {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #087fa4,
            #006d91
        );

    border-color:
        rgba(8, 127, 164, 0.27);

    box-shadow:
        0 14px 30px
        rgba(8, 127, 164, 0.16);
}

html[data-theme="light"] .map-join-button:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #006d91,
            #075e7b
        );
}

html[data-theme="light"] .map-join-button.unavailable {
    color: var(--frontend-text-muted) !important;

    background:
        rgba(218, 227, 233, 0.84);

    border-color:
        rgba(28, 79, 107, 0.11);

    box-shadow: none;
}

/* Status colors */
html[data-theme="light"] .map-card-status.online {
    background:
        rgba(16, 132, 95, 0.9);
}

html[data-theme="light"] .map-card-status.offline {
    background:
        rgba(191, 59, 85, 0.9);
}

html[data-theme="light"] .map-card-status.maintenance {
    background:
        rgba(154, 101, 8, 0.92);
}

/* =========================================================
   GLOBAL LIGHT GLOW BALANCE
   ========================================================= */

html[data-theme="light"] .background-glow-left {
    opacity: 0.55;
}

html[data-theme="light"] .background-glow-right {
    opacity: 0.38;
}

/* MAP CARD LIGHT INNER FIX START */

/* =========================================================
   MAP CARD BODY
   ========================================================= */

html[data-theme="light"]
.map-card-body {
    color:
        var(--frontend-text) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(241, 247, 251, 0.98)
        ) !important;
}

html[data-theme="light"]
.map-card-label {
    color:
        var(--frontend-cyan) !important;
}

html[data-theme="light"]
.map-card-heading h3 {
    color:
        var(--frontend-text) !important;
}

html[data-theme="light"]
.map-card-description {
    color:
        #60788c !important;
}

/* =========================================================
   PLAYER INFORMATION
   ========================================================= */

html[data-theme="light"]
.map-player-information {
    color:
        var(--frontend-text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(231, 241, 248, 0.98),
            rgba(218, 232, 242, 0.96)
        ) !important;

    border:
        1px solid
        rgba(28, 79, 107, 0.13) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.76),
        0 9px 22px
        rgba(43, 71, 91, 0.055) !important;
}

html[data-theme="light"]
.map-player-row {
    color:
        var(--frontend-text-soft) !important;
}

html[data-theme="light"]
.map-player-row span {
    color:
        #637b8f !important;
}

html[data-theme="light"]
.map-player-row strong {
    color:
        #17344d !important;
}

html[data-theme="light"]
.map-player-progress {
    background:
        rgba(32, 78, 108, 0.13) !important;
}

html[data-theme="light"]
.map-player-progress-bar {
    background:
        linear-gradient(
            90deg,
            #0b9fd4,
            #20b981
        ) !important;

    box-shadow:
        0 0 12px
        rgba(11, 159, 212, 0.18);
}

/* =========================================================
   SERVER ADDRESS
   ========================================================= */

html[data-theme="light"]
.map-server-address {
    color:
        var(--frontend-text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(238, 246, 251, 0.98),
            rgba(226, 238, 246, 0.96)
        ) !important;

    border:
        1px solid
        rgba(28, 79, 107, 0.13) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.75),
        0 8px 20px
        rgba(43, 71, 91, 0.045) !important;
}

html[data-theme="light"]
.map-server-address span {
    color:
        #657d91 !important;
}

html[data-theme="light"]
.map-server-address strong {
    color:
        #17344d !important;
}

html[data-theme="light"]
.map-copy-button {
    color:
        #087fa4 !important;

    background:
        rgba(255, 255, 255, 0.94) !important;

    border:
        1px solid
        rgba(8, 127, 164, 0.18) !important;

    box-shadow:
        0 8px 18px
        rgba(43, 71, 91, 0.065);
}

html[data-theme="light"]
.map-copy-button:hover {
    color:
        #ffffff !important;

    background:
        #087fa4 !important;

    border-color:
        #087fa4 !important;
}

/* =========================================================
   JOIN BUTTON
   ========================================================= */

html[data-theme="light"]
.map-join-button {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #087fa4,
            #0098bd
        ) !important;

    border:
        1px solid
        rgba(8, 127, 164, 0.22) !important;

    box-shadow:
        0 13px 27px
        rgba(8, 127, 164, 0.17) !important;
}

html[data-theme="light"]
.map-join-button:hover {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #006d91,
            #087fa4
        ) !important;
}

html[data-theme="light"]
.map-join-button.unavailable,
html[data-theme="light"]
button.map-join-button.unavailable {
    color:
        #718699 !important;

    background:
        linear-gradient(
            145deg,
            #e4ebf1,
            #d9e3eb
        ) !important;

    border:
        1px solid
        rgba(28, 79, 107, 0.11) !important;

    box-shadow:
        none !important;
}

/* =========================================================
   CARD CONSISTENCY
   ========================================================= */

html[data-theme="light"]
.map-card {
    overflow: hidden;

    background:
        #ffffff !important;
}

html[data-theme="light"]
.map-card-body > * {
    min-width: 0;
}

/* MAP CARD LIGHT INNER FIX END */

/* FRONTEND MOBILE HOME NAV FIX START */

/* =========================================================
   TABLET AND MOBILE NAVBAR
   ========================================================= */

@media (max-width: 991.98px) {
    .main-navbar {
        min-height: 82px;
        padding: 10px 0;
    }

    .main-navbar > .container {
        position: relative;

        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .melark-brand {
        min-width: 0;
        max-width:
            calc(100% - 70px);

        gap: 11px;
    }

    .brand-logo {
        flex: 0 0 auto;

        width: 54px;
        height: 54px;

        border-radius: 15px;
    }

    .brand-content {
        min-width: 0;
    }

    .brand-content strong {
        display: block;

        overflow: hidden;

        font-size: 0.92rem;
        letter-spacing: 0.12em;
        line-height: 1.25;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-content small {
        display: block;

        margin-top: 4px;

        overflow: hidden;

        font-size: 0.64rem;
        letter-spacing: 0.12em;
        line-height: 1.3;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-toggle {
        flex: 0 0 auto;

        width: 54px;
        height: 54px;

        margin: 0;
        padding: 12px;

        border-radius: 15px;
    }

    /*
     * Collapse dibuat sebagai floating menu.
     * Tidak lagi mendorong hero ke bawah.
     */
    .main-navbar .navbar-collapse {
        position: absolute;
        top: calc(100% + 11px);
        right: 12px;
        left: 12px;
        z-index: 1050;

        max-height:
            calc(100dvh - 105px);

        margin: 0;
        padding: 12px;

        overflow-x: hidden;
        overflow-y: auto;

        border:
            1px solid
            rgba(84, 233, 255, 0.14);

        border-radius: 18px;

        box-shadow:
            0 24px 55px
            rgba(0, 0, 0, 0.28);

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html[data-theme="dark"]
    .main-navbar .navbar-collapse {
        background:
            linear-gradient(
                155deg,
                rgba(7, 23, 36, 0.985),
                rgba(3, 13, 23, 0.985)
            );
    }

    html[data-theme="light"]
    .main-navbar .navbar-collapse {
        background:
            linear-gradient(
                155deg,
                rgba(255, 255, 255, 0.985),
                rgba(241, 247, 251, 0.985)
            );

        border-color:
            rgba(28, 79, 107, 0.14);

        box-shadow:
            0 24px 55px
            rgba(43, 71, 91, 0.18);
    }

    .main-navbar .navbar-nav {
        align-items: stretch !important;

        gap: 5px;
    }

    .main-navbar .nav-item {
        width: 100%;
        margin: 0 !important;
    }

    .main-navbar .nav-link {
        display: flex;
        align-items: center;

        gap: 11px;

        width: 100%;
        min-height: 46px;
        padding: 0 13px !important;

        border-radius: 11px;

        font-size: 0.84rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .main-navbar .nav-link i {
        display: grid;
        flex: 0 0 auto;
        place-items: center;

        width: 20px;

        font-size: 0.88rem;
    }

    html[data-theme="dark"]
    .main-navbar .nav-link.active {
        background:
            rgba(84, 233, 255, 0.08);
    }

    html[data-theme="light"]
    .main-navbar .nav-link.active {
        background:
            rgba(8, 127, 164, 0.075);

        box-shadow:
            inset 0 -1px 0
            rgba(8, 127, 164, 0.15);
    }

    .frontend-theme-item {
        margin: 5px 0 0 !important;
    }

    .frontend-theme-toggle {
        width: 100%;
        height: 46px;

        border-radius: 11px;

        font-size: 0.95rem;
    }

    .steam-login-button,
    .user-dropdown-button {
        width: 100%;
    }

    .steam-login-button {
        min-height: 48px;

        border-radius: 11px;

        font-size: 0.82rem;
    }

    .user-dropdown-button {
        justify-content: flex-start;

        min-height: 62px;
        padding: 7px 10px;

        border-radius: 13px;
    }

    .user-navbar-avatar,
    .user-navbar-avatar-fallback {
        flex: 0 0 auto;

        width: 44px;
        height: 44px;
    }

    .user-navbar-information {
        flex: 1;

        min-width: 0;

        text-align: left;
    }

    .user-navbar-information strong {
        font-size: 0.82rem;
    }

    .user-navbar-information small {
        font-size: 0.65rem;
    }

    .user-dropdown-menu {
        width: 100%;
        min-width: 0;

        margin-top: 6px !important;
    }
}

/* =========================================================
   HOME MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
    /*
     * Menghilangkan tinggi 100vh yang menghasilkan
     * ruang kosong panjang di bawah statistik.
     */
    .home-hero {
        min-height: 0 !important;

        padding: 0 !important;
    }

    .home-hero .container {
        max-width: 100%;

        padding-right: 15px;
        padding-left: 15px;
    }

    .home-hero
    .row.min-vh-100 {
        min-height: 0 !important;

        margin: 0;

        padding-top: 130px;
        padding-bottom: 48px;
    }

    .home-hero
    .row.min-vh-100
    > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;

        max-width: 100%;
        min-height: 42px;
        padding: 0 15px;

        overflow: hidden;

        border-radius: 999px;

        font-size: 0.72rem;
        letter-spacing: 0.08em;
        line-height: 1.3;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-title {
        margin:
            26px 0 22px;

        font-size:
            clamp(
                2.65rem,
                12.5vw,
                3.55rem
            ) !important;

        line-height: 0.98;
        letter-spacing: -0.035em;
    }

    .hero-description {
        margin: 0;

        font-size: 0.92rem;
        line-height: 1.72;
    }

    /*
     * Kedua tombol satu baris.
     * Lebih ringkas daripada dua tombol raksasa bertumpuk.
     */
    .hero-actions {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 9px;

        width: 100%;
        margin-top: 27px;
    }

    .glow-button,
    .outline-button {
        width: 100%;
        min-height: 50px;
        padding: 0 10px;

        border-radius: 12px;

        font-size: 0.8rem;
        line-height: 1.3;
        text-align: center;
    }

    /*
     * Statistik selalu tiga kolom.
     * Tidak lagi dua kolom lalu ONLINE sendirian.
     */
    .hero-statistics {
        display: grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap: 0 !important;

        width: 100%;
        margin-top: 28px;

        overflow: hidden;

        border:
            1px solid
            rgba(84, 233, 255, 0.12);

        border-radius: 15px;
    }

    .hero-stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        min-width: 0;
        min-height: 98px;
        padding: 13px 7px;

        text-align: center;

        border-right:
            1px solid
            rgba(84, 233, 255, 0.1);

        border-bottom: 0 !important;
    }

    .hero-stat-item:last-child {
        border-right: 0;
    }

    .hero-stat-item strong {
        display: block;

        max-width: 100%;

        overflow: hidden;

        font-size: 1.08rem;
        line-height: 1.25;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-stat-item span {
        display: block;

        margin-top: 5px;

        font-size: 0.69rem;
        line-height: 1.35;
    }

    /*
     * SERVER OVERVIEW
     */

    .server-overview-section {
        min-height: 0 !important;

        padding:
            54px 0 !important;
    }

    .server-overview-section
    .container {
        max-width: 100%;

        padding-right: 15px;
        padding-left: 15px;
    }

    .server-overview-section
    .section-heading {
        margin-bottom: 25px;
    }

    .section-label {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
    }

    .section-heading h2 {
        margin-top: 7px;

        font-size: 1.45rem;
    }

    .section-heading p {
        margin-top: 7px;

        font-size: 0.82rem;
        line-height: 1.55;
    }

    .server-overview-section
    .row {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .server-stat-card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        width: 100%;
        min-height: 124px;
        padding: 15px 9px;

        overflow: hidden;

        border-radius: 14px;

        text-align: center;
    }

    .server-stat-label {
        max-width: 100%;

        overflow: hidden;

        font-size: 0.72rem;
        line-height: 1.3;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .server-stat-card strong {
        display: block;

        max-width: 100%;
        margin-top: 8px;

        overflow: hidden;

        font-size: 1.2rem;
        line-height: 1.2;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .server-stat-card small {
        display: block;

        margin-top: 6px;

        font-size: 0.69rem;
        line-height: 1.35;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {
    .brand-logo {
        width: 49px;
        height: 49px;
    }

    .brand-content strong {
        font-size: 0.84rem;
    }

    .brand-content small {
        font-size: 0.58rem;
    }

    .navbar-toggle {
        width: 49px;
        height: 49px;
    }

    .home-hero
    .row.min-vh-100 {
        padding-top: 118px;
        padding-bottom: 42px;
    }

    .hero-title {
        font-size:
            clamp(
                2.35rem,
                12vw,
                3rem
            ) !important;
    }

    .hero-description {
        font-size: 0.86rem;
    }

    .glow-button,
    .outline-button {
        min-height: 47px;

        font-size: 0.73rem;
    }

    .hero-stat-item {
        min-height: 91px;
        padding: 11px 5px;
    }

    .hero-stat-item strong {
        font-size: 0.95rem;
    }

    .hero-stat-item span {
        font-size: 0.62rem;
    }

    .server-stat-card {
        min-height: 116px;
    }
}

/* FRONTEND MOBILE HOME NAV FIX END */

/* MAPS MOBILE COMPACT PATCH START */

/* =========================================================
   MAP CARD GRID SUPPORT
   ========================================================= */

.maps-card-column {
    display: flex;

    min-width: 0;
}

.maps-card-column .map-card {
    width: 100%;
    height: 100%;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
    /*
     * Hero tidak lagi memakai tinggi hampir satu layar.
     */
    .maps-hero {
        min-height: 0 !important;

        padding:
            122px 0 38px !important;
    }

    .maps-hero .container,
    .maps-list-section .container {
        max-width: 100%;

        padding-right: 15px;
        padding-left: 15px;
    }

    .maps-hero-content {
        width: 100%;
        max-width: none;
    }

    .maps-hero .hero-badge {
        min-height: 38px;
        padding: 0 13px;

        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }

    .maps-page-title {
        margin:
            22px 0 16px;

        font-size:
            clamp(
                2.25rem,
                10.5vw,
                3.05rem
            ) !important;

        line-height: 0.98;
    }

    .maps-page-description {
        margin: 0;

        font-size: 0.88rem;
        line-height: 1.65;
    }

    /*
     * Summary selalu tiga kolom kecil.
     */
    .maps-summary {
        display: grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap: 8px !important;

        width: 100%;
        margin-top: 24px;
        padding: 0 !important;

        overflow: visible;

        background:
            transparent !important;

        border: 0 !important;

        box-shadow:
            none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .maps-summary-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        min-width: 0;
        min-height: 82px;
        padding: 11px 7px !important;

        overflow: hidden;

        border-radius: 13px !important;

        text-align: center;
    }

    .maps-summary-item strong {
        display: block;

        max-width: 100%;

        overflow: hidden;

        font-size: 1.05rem;
        line-height: 1.2;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .maps-summary-item span {
        display: block;

        margin-top: 5px;

        font-size: 0.69rem;
        line-height: 1.3;
    }

    /*
     * Cluster Maps section.
     */
    .maps-list-section {
        min-height: 0 !important;

        padding:
            42px 0 52px !important;
    }

    .maps-list-section
    .section-heading {
        margin-bottom: 24px;
    }

    .maps-list-section
    .section-label {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .maps-list-section
    .section-heading h2 {
        margin-top: 7px;

        font-size: 1.45rem;
    }

    .maps-list-section
    .section-heading p {
        margin-top: 7px;

        font-size: 0.8rem;
        line-height: 1.5;
    }

    /*
     * Dua map card per baris.
     */
    .maps-card-grid {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .maps-card-column {
        display: flex;

        min-width: 0;
    }

    .map-card {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;
        height: 100%;

        overflow: hidden;

        border-radius: 15px;
    }

    .map-card-cover {
        flex: 0 0 auto;

        height: 145px !important;
        min-height: 145px !important;
    }

    .map-card-code {
        padding: 4px 7px;

        font-size: 1.3rem;
        line-height: 1;
    }

    .map-card-status {
        gap: 5px;

        padding: 6px 8px;

        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .map-card-status span {
        width: 7px;
        height: 7px;
    }

    .map-card-body {
        display: flex;
        flex: 1;
        flex-direction: column;

        min-width: 0;
        padding: 13px 11px !important;
    }

    .map-card-heading,
    .map-card-heading > div {
        min-width: 0;
    }

    .map-card-label {
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }

    .map-card-heading h3 {
        margin-top: 4px;

        overflow: hidden;

        font-size: 0.92rem;
        line-height: 1.3;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .map-card-description {
        display: -webkit-box;

        min-height: 3em;
        margin:
            9px 0 11px;

        overflow: hidden;

        font-size: 0.75rem;
        line-height: 1.5;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /*
     * Player information.
     */
    .map-player-information {
        margin-top: auto;
        margin-bottom: 10px;
        padding: 10px 9px !important;

        border-radius: 11px;
    }

    .map-player-row {
        gap: 6px;
    }

    .map-player-row span,
    .map-player-row strong {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .map-player-row strong {
        flex: 0 0 auto;
    }

    .map-player-progress {
        height: 5px;
        margin-top: 8px;
    }

    /*
     * Server address.
     */
    .map-server-address {
        gap: 7px;

        margin-bottom: 10px;
        padding: 9px !important;

        border-radius: 11px;
    }

    .map-server-address > div {
        min-width: 0;
    }

    .map-server-address span {
        font-size: 0.64rem;
    }

    .map-server-address strong {
        display: block;

        margin-top: 3px;

        overflow: hidden;

        font-size: 0.68rem;
        line-height: 1.35;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .map-copy-button {
        flex: 0 0 auto;

        width: 32px;
        height: 32px;

        border-radius: 9px;

        font-size: 0.72rem;
    }

    /*
     * Join button.
     */
    .map-join-button {
        min-height: 39px;
        margin-top: 0;
        padding: 0 6px;

        border-radius: 10px;

        font-size: 0.72rem;
        line-height: 1.25;
    }
}

/* =========================================================
   MOBILE KECIL
   ========================================================= */

@media (max-width: 420px) {
    .maps-hero {
        padding:
            112px 0 34px !important;
    }

    .maps-page-title {
        font-size:
            clamp(
                2rem,
                10vw,
                2.65rem
            ) !important;
    }

    .maps-page-description {
        font-size: 0.82rem;
    }

    .maps-summary {
        gap: 6px !important;
    }

    .maps-summary-item {
        min-height: 74px;
        padding: 9px 5px !important;
    }

    .maps-summary-item strong {
        font-size: 0.92rem;
    }

    .maps-summary-item span {
        font-size: 0.62rem;
    }

    .maps-card-grid {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
    }

    .map-card-cover {
        height: 122px !important;
        min-height: 122px !important;
    }

    .map-card-code {
        font-size: 1.08rem;
    }

    .map-card-status {
        padding: 5px 6px;

        font-size: 0.55rem;
    }

    .map-card-body {
        padding: 11px 8px !important;
    }

    .map-card-label {
        font-size: 0.61rem;
    }

    .map-card-heading h3 {
        font-size: 0.84rem;
    }

    .map-card-description {
        font-size: 0.69rem;
    }

    .map-player-information,
    .map-server-address {
        padding: 8px 7px !important;
    }

    .map-player-row span,
    .map-player-row strong,
    .map-server-address strong {
        font-size: 0.64rem;
    }

    .map-server-address span {
        font-size: 0.59rem;
    }

    .map-copy-button {
        width: 29px;
        height: 29px;
    }

    .map-join-button {
        min-height: 36px;

        font-size: 0.66rem;
    }
}

/*
 * Pada layar sangat sempit, dua card sudah terlalu padat.
 * Kembali satu kolom hanya di bawah 360px.
 */
@media (max-width: 359.98px) {
    .maps-card-column {
        width: 100% !important;
    }

    .map-card-cover {
        height: 150px !important;
        min-height: 150px !important;
    }
}

/* MAPS MOBILE COMPACT PATCH END */

/* =========================================================
   LIGHT THEME SHADOW CLEANUP
   ========================================================= */

body.theme-light,
[data-theme="light"],
html[data-theme="light"] body {
    --light-card-shadow: 0 10px 28px rgba(118, 138, 160, 0.12);
    --light-soft-shadow: 0 6px 18px rgba(118, 138, 160, 0.08);
    --light-border: rgba(120, 150, 180, 0.18);
    --light-bg-panel: rgba(255, 255, 255, 0.72);
    --light-bg-soft: rgba(245, 250, 255, 0.92);
}

body.theme-light .maps-hero,
[data-theme="light"] .maps-hero,
html[data-theme="light"] body .maps-hero {
    box-shadow: none !important;
}

body.theme-light .maps-summary-item,
[data-theme="light"] .maps-summary-item,
html[data-theme="light"] body .maps-summary-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,249,253,0.88) 100%) !important;
    border: 1px solid var(--light-border) !important;
    box-shadow: var(--light-card-shadow) !important;
    filter: none !important;
}

body.theme-light .maps-summary-item::before,
body.theme-light .maps-summary-item::after,
[data-theme="light"] .maps-summary-item::before,
[data-theme="light"] .maps-summary-item::after,
html[data-theme="light"] body .maps-summary-item::before,
html[data-theme="light"] body .maps-summary-item::after {
    display: none !important;
    content: none !important;
}

body.theme-light .map-card,
[data-theme="light"] .map-card,
html[data-theme="light"] body .map-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,250,254,0.93) 100%) !important;
    border: 1px solid var(--light-border) !important;
    box-shadow: var(--light-card-shadow) !important;
    filter: none !important;
}

body.theme-light .map-card::before,
body.theme-light .map-card::after,
[data-theme="light"] .map-card::before,
[data-theme="light"] .map-card::after,
html[data-theme="light"] body .map-card::before,
html[data-theme="light"] body .map-card::after {
    display: none !important;
    content: none !important;
}

body.theme-light .map-card-cover,
[data-theme="light"] .map-card-cover,
html[data-theme="light"] body .map-card-cover {
    box-shadow: none !important;
    filter: none !important;
}

body.theme-light .map-card-body,
[data-theme="light"] .map-card-body,
html[data-theme="light"] body .map-card-body {
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: none !important;
}

body.theme-light .map-player-information,
body.theme-light .map-server-address,
[data-theme="light"] .map-player-information,
[data-theme="light"] .map-server-address,
html[data-theme="light"] body .map-player-information,
html[data-theme="light"] body .map-server-address {
    background: rgba(237, 245, 251, 0.95) !important;
    border: 1px solid rgba(120, 150, 180, 0.18) !important;
    box-shadow: none !important;
    filter: none !important;
}

body.theme-light .map-player-information::before,
body.theme-light .map-player-information::after,
body.theme-light .map-server-address::before,
body.theme-light .map-server-address::after,
[data-theme="light"] .map-player-information::before,
[data-theme="light"] .map-player-information::after,
[data-theme="light"] .map-server-address::before,
[data-theme="light"] .map-server-address::after,
html[data-theme="light"] body .map-player-information::before,
html[data-theme="light"] body .map-player-information::after,
html[data-theme="light"] body .map-server-address::before,
html[data-theme="light"] body .map-server-address::after {
    display: none !important;
    content: none !important;
}

body.theme-light .map-copy-button,
[data-theme="light"] .map-copy-button,
html[data-theme="light"] body .map-copy-button {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(120, 150, 180, 0.2) !important;
    box-shadow: var(--light-soft-shadow) !important;
}

body.theme-light .map-join-button,
[data-theme="light"] .map-join-button,
html[data-theme="light"] body .map-join-button {
    box-shadow: none !important;
}

body.theme-light .map-card-heading h3,
body.theme-light .map-card-description,
body.theme-light .map-server-address strong,
body.theme-light .map-player-row strong,
[data-theme="light"] .map-card-heading h3,
[data-theme="light"] .map-card-description,
[data-theme="light"] .map-server-address strong,
[data-theme="light"] .map-player-row strong,
html[data-theme="light"] body .map-card-heading h3,
html[data-theme="light"] body .map-card-description,
html[data-theme="light"] body .map-server-address strong,
html[data-theme="light"] body .map-player-row strong {
    text-shadow: none !important;
}

body.theme-light .maps-list-section,
[data-theme="light"] .maps-list-section,
html[data-theme="light"] body .maps-list-section {
    box-shadow: none !important;
}

/* kalau masih ada glow hitam dari utility umum */
body.theme-light .shadow-dark,
body.theme-light .dark-shadow,
body.theme-light .card-shadow-dark,
[data-theme="light"] .shadow-dark,
[data-theme="light"] .dark-shadow,
[data-theme="light"] .card-shadow-dark,
html[data-theme="light"] body .shadow-dark,
html[data-theme="light"] body .dark-shadow,
html[data-theme="light"] body .card-shadow-dark {
    box-shadow: none !important;
}

/* =========================================
   LIGHT THEME FIX - MAP CODE BADGE
   ========================================= */

body.theme-light .map-code,
body.theme-light .map-short-code,
body.theme-light .map-card-code,
body.theme-light .map-cover-code,
body.theme-light .map-card-cover-code,
body.theme-light .map-card-initial,
body.theme-light .cluster-map-code,
body.theme-light .cluster-map-shortcode,
[data-theme="light"] .map-code,
[data-theme="light"] .map-short-code,
[data-theme="light"] .map-card-code,
[data-theme="light"] .map-cover-code,
[data-theme="light"] .map-card-cover-code,
[data-theme="light"] .map-card-initial,
[data-theme="light"] .cluster-map-code,
[data-theme="light"] .cluster-map-shortcode {
    color: #ffffff !important;
    background: linear-gradient(180deg, #173247 0%, #0e2233 100%) !important;
    border: 1px solid rgba(84, 164, 214, 0.18) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

body.theme-light .map-code *,
body.theme-light .map-short-code *,
body.theme-light .map-card-code *,
body.theme-light .map-cover-code *,
body.theme-light .map-card-cover-code *,
body.theme-light .map-card-initial *,
body.theme-light .cluster-map-code *,
body.theme-light .cluster-map-shortcode *,
[data-theme="light"] .map-code *,
[data-theme="light"] .map-short-code *,
[data-theme="light"] .map-card-code *,
[data-theme="light"] .map-cover-code *,
[data-theme="light"] .map-card-cover-code *,
[data-theme="light"] .map-card-initial *,
[data-theme="light"] .cluster-map-code *,
[data-theme="light"] .cluster-map-shortcode * {
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* kalau bayangan ternyata datang dari wrapper badge */
body.theme-light .map-card-cover .map-code,
body.theme-light .map-card-cover .map-short-code,
body.theme-light .map-card-cover .map-card-code,
body.theme-light .map-card-cover .map-cover-code,
body.theme-light .map-card-cover .map-card-cover-code,
[data-theme="light"] .map-card-cover .map-code,
[data-theme="light"] .map-card-cover .map-short-code,
[data-theme="light"] .map-card-cover .map-card-code,
[data-theme="light"] .map-card-cover .map-cover-code,
[data-theme="light"] .map-card-cover .map-card-cover-code {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* =========================================================
   HOME METRICS AND OVERVIEW
   ========================================================= */

/* ---------------------------------------------------------
   HERO METRICS
   --------------------------------------------------------- */

.home-hero-metrics {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;

    width: 100%;
    margin-top: 30px;
}

.home-hero-metric {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
    min-height: 82px;
    padding: 14px;

    overflow: hidden;

    color: var(--frontend-text);

    background:
        linear-gradient(
            145deg,
            rgba(8, 28, 45, 0.88),
            rgba(4, 17, 31, 0.9)
        );

    border:
        1px solid
        rgba(84, 233, 255, 0.1);

    border-radius: 15px;

    box-shadow:
        0 15px 36px
        rgba(0, 0, 0, 0.14);
}

.home-hero-metric-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--frontend-cyan);

    background:
        rgba(84, 233, 255, 0.075);

    border:
        1px solid
        rgba(84, 233, 255, 0.15);

    border-radius: 11px;

    font-size: 0.88rem;
}

.home-hero-metric > div {
    min-width: 0;
}

.home-hero-metric strong,
.home-hero-metric span {
    display: block;
}

.home-hero-metric strong {
    overflow: hidden;

    color: var(--frontend-text);

    font-family:
        var(--frontend-heading-font);

    font-size: 1rem;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-hero-metric > div > span {
    margin-top: 4px;

    color: var(--frontend-text-muted);

    font-size: 0.68rem;
    line-height: 1.3;
}

.home-hero-metric-status.is-online
.home-hero-metric-icon,
.home-hero-metric-status.is-online
strong {
    color: var(--frontend-green);
}

.home-hero-metric-status.is-maintenance
.home-hero-metric-icon,
.home-hero-metric-status.is-maintenance
strong {
    color: var(--frontend-yellow);
}

/* ---------------------------------------------------------
   OVERVIEW GRID
   --------------------------------------------------------- */

.home-overview-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
}

.home-overview-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 180px;
    padding: 20px;

    overflow: hidden;

    background:
        linear-gradient(
            155deg,
            rgba(9, 29, 47, 0.94),
            rgba(4, 16, 29, 0.92)
        );

    border:
        1px solid
        rgba(84, 233, 255, 0.1);

    border-radius: 18px;

    box-shadow:
        0 18px 48px
        rgba(0, 0, 0, 0.17);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.home-overview-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(84, 233, 255, 0.22);

    box-shadow:
        0 24px 58px
        rgba(0, 0, 0, 0.23);
}

.home-overview-card-header {
    display: flex;
    align-items: center;

    gap: 10px;
}

.home-overview-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;

    width: 39px;
    height: 39px;

    border-radius: 11px;

    font-size: 0.9rem;
}

.home-overview-icon.cyan {
    color: var(--frontend-cyan);

    background:
        rgba(84, 233, 255, 0.075);

    border:
        1px solid
        rgba(84, 233, 255, 0.15);
}

.home-overview-icon.purple {
    color: var(--frontend-purple);

    background:
        rgba(141, 108, 255, 0.075);

    border:
        1px solid
        rgba(141, 108, 255, 0.15);
}

.home-overview-icon.green {
    color: var(--frontend-green);

    background:
        rgba(104, 255, 186, 0.075);

    border:
        1px solid
        rgba(104, 255, 186, 0.15);
}

.home-overview-icon.yellow {
    color: var(--frontend-yellow);

    background:
        rgba(255, 211, 106, 0.075);

    border:
        1px solid
        rgba(255, 211, 106, 0.15);
}

.home-overview-label {
    color: var(--frontend-text-muted);

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.home-overview-value {
    display: block;

    margin-top: 24px;

    overflow: hidden;

    color: var(--frontend-text);

    font-family:
        var(--frontend-heading-font);

    font-size: 1.75rem;
    line-height: 1.1;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-overview-value.status {
    color: var(--frontend-green);

    font-size: 1.35rem;
}

.home-overview-status.is-maintenance
.home-overview-value.status {
    color: var(--frontend-yellow);
}

.home-overview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: auto;
    padding-top: 18px;

    color: var(--frontend-text-muted);

    font-size: 0.68rem;
    line-height: 1.35;
}

.home-overview-footer i {
    color: var(--frontend-cyan);
}

.home-status-indicator {
    display: inline-flex;
    align-items: center;

    gap: 6px;
}

.home-status-indicator i {
    width: 7px;
    height: 7px;

    background:
        var(--frontend-green);

    border-radius: 50%;

    box-shadow:
        0 0 10px
        rgba(104, 255, 186, 0.52);
}

.home-overview-status.is-maintenance
.home-status-indicator i {
    background:
        var(--frontend-yellow);

    box-shadow:
        0 0 10px
        rgba(255, 211, 106, 0.45);
}

/* =========================================================
   LIGHT THEME
   ========================================================= */

html[data-theme="light"]
.home-hero-metric,
html[data-theme="light"]
.home-overview-card {
    color:
        var(--frontend-text);

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.96),
            rgba(240, 247, 252, 0.94)
        );

    border-color:
        rgba(28, 79, 107, 0.13);

    box-shadow:
        0 12px 32px
        rgba(43, 71, 91, 0.09);
}

html[data-theme="light"]
.home-overview-card:hover {
    border-color:
        rgba(8, 127, 164, 0.22);

    box-shadow:
        0 18px 42px
        rgba(43, 71, 91, 0.13);
}

html[data-theme="light"]
.home-hero-metric strong,
html[data-theme="light"]
.home-overview-value {
    color:
        var(--frontend-text);
}

html[data-theme="light"]
.home-hero-metric > div > span,
html[data-theme="light"]
.home-overview-label,
html[data-theme="light"]
.home-overview-footer {
    color:
        var(--frontend-text-muted);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {
    .home-overview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {
    .home-hero-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 24px;
    }

    .home-hero-metric {
        align-items: center;
        flex-direction: column;

        gap: 7px;

        min-height: 112px;
        padding: 12px 7px;

        text-align: center;
    }

    .home-hero-metric-status {
        grid-column:
            1 / -1;

        align-items: center;
        flex-direction: row;

        min-height: 68px;
        padding:
            11px 14px;

        text-align: left;
    }

    .home-hero-metric-icon {
        width: 33px;
        height: 33px;

        border-radius: 9px;

        font-size: 0.74rem;
    }

    .home-hero-metric strong {
        font-size: 0.9rem;
    }

    .home-hero-metric > div > span {
        font-size: 0.68rem;
    }

    .home-overview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }

    .home-overview-card {
        min-height: 145px;
        padding: 13px 11px;

        border-radius: 14px;
    }

    .home-overview-card-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }

    .home-overview-icon {
        width: 33px;
        height: 33px;

        border-radius: 9px;

        font-size: 0.72rem;
    }

    .home-overview-label {
        font-size: 0.68rem;
    }

    .home-overview-value {
        margin-top: 14px;

        font-size: 1.3rem;
    }

    .home-overview-value.status {
        font-size: 1rem;
    }

    .home-overview-footer {
        align-items: flex-start;

        padding-top: 11px;

        font-size: 0.64rem;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
    .home-overview-card {
        min-height: 137px;
        padding: 11px 9px;
    }

    .home-overview-label {
        font-size: 0.64rem;
    }

    .home-overview-value {
        font-size: 1.15rem;
    }

    .home-overview-footer {
        font-size: 0.6rem;
    }
}

/* =========================================================
   HOME STAT ICON ALIGNMENT FIX
   Desktop + Mobile
   ========================================================= */

.home-hero-metric-icon,
.home-overview-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    line-height: 1 !important;
    text-align: center;
}

.home-hero-metric-icon > i,
.home-overview-icon > i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;

    transform: none !important;
}

.home-hero-metric-icon > i::before,
.home-overview-icon > i::before {
    display: block !important;

    width: auto;
    height: auto;
    margin: 0 !important;

    line-height: 1 !important;

    vertical-align: middle !important;

    transform: translateY(0.5px);
}

/*
 * Status card memakai layout horizontal.
 * Pastikan icon tidak ikut tertarik oleh tinggi teks.
 */
.home-hero-metric-status
.home-hero-metric-icon {
    align-self: center;
}

/* Mobile */
@media (max-width: 575.98px) {
    .home-hero-metric-icon,
    .home-overview-icon {
        flex-shrink: 0;
    }

    .home-hero-metric-icon > i::before,
    .home-overview-icon > i::before {
        transform: translateY(0);
    }
}