/* =========================================================
   MU Esmeralda - Visual skin
   Built as a non-invasive layer over BlackMountain.
   ========================================================= */
:root {
    --color-crimson: #047857;
    --color-ember: #10b981;
    --color-orange: #22c55e;
    --color-gold: #6ee7b7;
    --color-yellow: #a7f3d0;
    --color-obsidian: #071611;
    --color-void: #0b241c;
    --color-silver: #d8eee6;
    --color-gold-accent: #34d399;
    --emerald: #10b981;
    --emerald-bright: #34d399;
    --emerald-soft: #6ee7b7;
    --emerald-dark: #064e3b;
    --emerald-black: #030b08;
}

html { min-width: 0 !important; }

body {
    background-color: #030806 !important;
    background-image:
        linear-gradient(180deg, rgba(2,10,7,.84), rgba(3,11,8,.94)),
        url('../img/background.jpg') !important;
    background-position: top center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle at 50% 8%, rgba(16,185,129,.12), transparent 34%);
}

#navbar {
    border-bottom: 1px solid rgba(52,211,153,.18) !important;
}

#navbar.scrolled {
    background: rgba(2,10,7,.94) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.38), 0 1px 0 rgba(52,211,153,.12) !important;
}

#navbar ul li a:hover,
#navbar ul li a.active,
.navbar-right a:hover {
    color: var(--emerald-soft) !important;
    text-shadow: 0 0 14px rgba(52,211,153,.35) !important;
}

.navbar-logo:hover { filter: drop-shadow(0 0 10px rgba(52,211,153,.35)) brightness(1.08) !important; }

#header {
    min-height: 100vh !important;
    padding: 105px 20px 48px !important;
    background: #020806 !important;
}

#hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../img/hero-esmeralda.jpg');
    background-size: cover;
    background-position: center center;
    transform: scale(1.015);
}

.hero-overlay {
    z-index: 1 !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(16,185,129,.08), transparent 34%),
        linear-gradient(180deg, rgba(1,7,5,.42) 0%, rgba(1,8,6,.18) 42%, rgba(1,8,6,.80) 100%) !important;
}

.hero-logo-link,
.emerald-hero-copy,
.hero-server-info-grid,
.hero-action-buttons {
    position: relative;
    z-index: 3;
}

.webengine-mu-logo {
    width: 500px !important;
    max-width: 86vw !important;
    transform: none !important;
    margin-bottom: -6px !important;
    filter: drop-shadow(0 12px 34px rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(16,185,129,.16));
}

.emerald-hero-copy {
    width: min(820px, 92vw);
    margin: 4px auto 30px;
    text-align: center;
}

.emerald-kicker {
    display: inline-block;
    color: var(--emerald-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.emerald-hero-copy h1 {
    margin: 0;
    color: #f3fff9;
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.13;
    font-weight: 700;
    letter-spacing: .035em;
    text-shadow: 0 3px 20px rgba(0,0,0,.75), 0 0 26px rgba(16,185,129,.12);
}

.emerald-hero-copy p {
    margin: 9px 0 0;
    color: rgba(225,245,237,.76);
    font-size: 15px;
}

.hero-server-info-grid {
    gap: 12px !important;
    margin-top: 0 !important;
}

.hero-stat-card {
    background: linear-gradient(145deg, rgba(3,18,13,.76), rgba(5,27,20,.56)) !important;
    border: 1px solid rgba(52,211,153,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 34px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(8px);
}

.hero-stat-card:hover {
    border-color: rgba(52,211,153,.52) !important;
    box-shadow: 0 0 28px rgba(16,185,129,.12), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.hero-stat-card-overlay {
    background: radial-gradient(circle, rgba(16,185,129,.16) 0%, transparent 70%) !important;
}

.hero-stat-icon,
.val-green { color: var(--emerald-bright) !important; }
.status-dot { background-color: var(--emerald-bright) !important; box-shadow: 0 0 9px rgba(52,211,153,.78) !important; }
.val-beige { color: #e8fff6 !important; }

.hero-btn-download {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
    border-color: rgba(110,231,183,.55) !important;
    box-shadow: 0 10px 28px rgba(5,150,105,.22) !important;
}

.hero-btn-download:hover {
    background: linear-gradient(135deg, #059669 0%, #34d399 100%) !important;
    box-shadow: 0 12px 34px rgba(16,185,129,.32) !important;
}

.hero-btn-discord {
    background: rgba(4,20,15,.78) !important;
    border: 1px solid rgba(110,231,183,.32) !important;
}
.hero-btn-discord:hover { background: rgba(6,78,59,.55) !important; border-color: rgba(110,231,183,.58) !important; }
.hero-btn-discord .hero-btn-icon { color: var(--emerald-soft) !important; }

/* Generic WebEngine components */
.btn-primary,
.btn-success {
    color: var(--emerald-soft) !important;
    border-color: rgba(52,211,153,.65) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    color: #04100c !important;
    background: var(--emerald-bright) !important;
    border-color: var(--emerald-bright) !important;
}

.rankings-card,
.news-card,
.panel,
.well {
    border-color: rgba(52,211,153,.15) !important;
}

.rankings-title,
.news-section-title,
.footer-title {
    background: linear-gradient(135deg, #a7f3d0 0%, #10b981 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.rankings-table tbody tr:hover { background-color: rgba(16,185,129,.07) !important; }
.rankings-table .player-name:hover { color: var(--emerald-soft) !important; }
.rank-n { background: rgba(16,185,129,.12) !important; color: var(--emerald-soft) !important; }

.modern-footer::before,
.footer-modern::before { background: linear-gradient(90deg, transparent, var(--emerald), transparent) !important; }

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
.form-control:focus {
    border-color: rgba(52,211,153,.65) !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,.08) !important;
}

@media (max-width: 768px) {
    #header { min-height: auto !important; padding-top: 105px !important; }
    .webengine-mu-logo { width: 300px !important; max-width: 80vw !important; }
    .emerald-hero-copy { margin-bottom: 22px; }
    .emerald-hero-copy h1 { font-size: clamp(23px, 7vw, 34px); }
    .emerald-hero-copy p { font-size: 14px; }
}

/* MU Esmeralda custom logo */
.navbar-logo {
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
#navbar.scrolled .navbar-logo { max-width: 160px !important; }
@media (max-width: 768px) {
    .navbar-logo { max-width: 132px !important; max-height: 44px !important; }
    .webengine-mu-logo { width: 390px !important; max-width: 92vw !important; }
}

/* ================= MU ESMERALDA V2 HOMEPAGE ================= */
.v2-hero{position:relative!important;min-height:650px!important;height:auto!important;padding:88px 0 0!important;overflow:hidden!important;background:#020806!important;border-bottom:0!important}
.v2-hero #hero-image{background-image:url('../img/hero-esmeralda.jpg')!important;background-size:cover!important;background-position:center 35%!important;transform:none!important;filter:saturate(1.08) contrast(1.04)}
.v2-hero .hero-overlay{background:linear-gradient(180deg,rgba(0,7,5,.12) 0%,rgba(0,7,5,.05) 52%,rgba(1,9,6,.86) 100%)!important}
.v2-hero-inner{position:relative;z-index:3;width:min(1400px,94vw);margin:0 auto;display:flex;flex-direction:column;align-items:center;padding-top:22px}
.v2-hero .webengine-mu-logo{width:460px!important;max-height:285px;object-fit:contain;margin:0 auto -4px!important}
.v2-hero .emerald-hero-copy{margin:0 auto 14px!important}
.v2-hero .emerald-hero-copy h1{font-size:29px!important;line-height:1.2!important;letter-spacing:.06em!important}
.v2-hero .emerald-hero-copy p{font-family:'Cinzel',serif;font-size:12px!important;letter-spacing:.15em;color:#e8eee9!important}
.hero-action-buttons{display:flex;gap:18px;justify-content:center;margin:0 0 18px!important}
.hero-action-buttons a{min-width:235px;height:54px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:'Cinzel',serif;font-size:17px;font-weight:700;text-decoration:none!important;clip-path:polygon(5% 0,95% 0,100% 25%,100% 75%,95% 100%,5% 100%,0 75%,0 25%)}
.v2-server-strip{width:100%;display:grid;grid-template-columns:1.3fr repeat(5,1fr);background:rgba(1,12,9,.9);border:1px solid rgba(52,211,153,.5);box-shadow:0 0 30px rgba(0,0,0,.55);margin-top:auto}
.v2-server-cell{height:82px;display:flex;align-items:center;justify-content:center;gap:14px;border-right:1px solid rgba(52,211,153,.25);background:linear-gradient(180deg,rgba(6,29,22,.76),rgba(2,14,10,.92))}
.v2-server-cell:last-child{border-right:0}.v2-server-cell small{display:block;color:#d8e8e1;font:10px 'Cinzel',serif;letter-spacing:.08em}.v2-server-cell strong{display:block;color:#39e8a3;font:700 22px 'Cinzel',serif;line-height:1.15}.v2-server-cell strong i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#20e68e;box-shadow:0 0 10px #20e68e}.v2-cell-icon{width:42px;height:42px;border:1px solid rgba(52,211,153,.55);border-radius:50%;display:grid;place-items:center;color:#41e7a7;font-weight:700;font-size:18px}
.v2-content-zone{position:relative;background:linear-gradient(180deg,#03100c,#020906);padding:14px 0 18px!important;margin:0!important;min-height:0!important}
.v2-main-grid{width:min(1400px,94vw);margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:14px}
.v2-panel{background:rgba(2,15,11,.94);border:1px solid rgba(65,207,153,.42);box-shadow:inset 0 0 25px rgba(0,0,0,.28);min-height:285px;padding:0 14px 10px}
.v2-panel-head{height:45px;display:flex;align-items:center;border-bottom:1px solid rgba(110,231,183,.2);gap:8px}.v2-panel-head h2{font:700 16px 'Cinzel',serif;color:#f0f6f2;margin:0;flex:1}.v2-panel-head a{font-size:10px;color:#36dc9d;text-decoration:none}.v2-head-icon{color:#e7b84d;font-size:18px}
.v2-rank-row{height:45px;display:grid;grid-template-columns:28px 38px 1fr auto;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.07)}.v2-rank-row:last-child{border-bottom:0}.v2-rank-pos{font-weight:700;text-align:center;color:#dbe7e2}.v2-rank-pos.rank-1{color:#f2c34e}.v2-rank-pos.rank-2{color:#cbd4d2}.v2-rank-pos.rank-3{color:#c98145}.v2-avatar img{width:30px!important;height:30px!important;border-radius:50%;object-fit:cover}.v2-guild-logo img{max-width:30px!important;max-height:30px!important}.v2-rank-name strong{display:block;color:#f4f7f5;font-size:12px}.v2-rank-name span{display:block;color:#8fa49b;font-size:10px}.v2-rank-value{color:#cde2d9;font-size:11px}
.v2-news-row{height:74px;display:grid;grid-template-columns:105px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none!important}.v2-news-row:last-child{border-bottom:0}.v2-news-row img{width:105px;height:60px;object-fit:cover}.v2-news-row strong{display:block;color:#f4f7f5;font-size:12px;margin:2px 0}.v2-news-row p{margin:0;color:#9baaa4;font-size:10px;line-height:1.25}.v2-news-row time{font-size:9px;color:#b8c5c0}.v2-news-tag{font-size:8px;background:#087c58;color:#fff;padding:2px 5px}.v2-empty{padding:30px;color:#8ea198;text-align:center}
.footer{margin:0!important;padding:0!important;border-top:1px solid rgba(52,211,153,.2)!important;background:#020806!important}.v2-footer{padding:14px 0!important}.v2-footer-inner{width:min(1400px,94vw);margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px}.v2-footer-brand{display:flex;align-items:center;gap:14px}.v2-footer-brand img{width:115px;height:65px;object-fit:contain}.v2-footer-brand strong{display:block;font:700 17px 'Cinzel',serif;color:#46dfa7}.v2-footer-brand span{font-size:9px;letter-spacing:.22em;color:#8eb9a8}.v2-footer-social{display:flex;gap:10px}.v2-footer-social a{width:38px;height:38px;border:1px solid #20c98a;border-radius:50%;display:grid;place-items:center;color:#42e5a8;text-decoration:none;font-weight:700}.v2-footer-copy{text-align:right;color:#9aa8a2;font-size:10px;line-height:1.5}.v2-footer-copy span{color:#6f8179}
@media(max-width:900px){.v2-hero{min-height:auto!important}.v2-hero #hero-image{background-position:center top!important}.v2-hero .webengine-mu-logo{width:360px!important}.v2-hero .emerald-hero-copy h1{font-size:22px!important}.v2-server-strip{grid-template-columns:repeat(2,1fr)}.v2-server-cell{height:68px}.v2-main-grid{grid-template-columns:1fr}.v2-panel{min-height:0}.v2-footer-inner{grid-template-columns:1fr;text-align:center}.v2-footer-brand,.v2-footer-social{justify-content:center}.v2-footer-copy{text-align:center}}
@media(max-width:600px){.v2-hero-inner{padding-top:10px}.v2-hero .webengine-mu-logo{width:290px!important}.v2-hero .emerald-hero-copy h1{font-size:18px!important}.v2-hero .emerald-hero-copy p{font-size:9px!important}.hero-action-buttons{flex-direction:column;gap:8px}.hero-action-buttons a{height:46px;min-width:220px;font-size:14px}.v2-server-cell strong{font-size:16px}.v2-news-row{grid-template-columns:78px 1fr;height:70px}.v2-news-row img{width:78px;height:52px}.v2-news-row time{display:none}}