:root{
  --bg:#05070f;
  --bg2:#0a0d18;
  --panel:#111522;
  --panel2:#151a29;
  --line:#232941;
  --line2:#303855;
  --text:#f2f4fb;
  --muted:#97a0bf;
  --red:#ff3557;
  --red2:#ff4b6a;
  --gold:#ffcc38;
  --blue:#7487ff;
  --purple:#9a4dff;
  --green:#45d37f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top center, rgba(255,58,95,.13) 0, transparent 28%),
    linear-gradient(180deg,#05070f 0%, #070a13 100%);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
a{text-decoration:none;color:inherit}
.wrap{
  width:min(1180px, calc(100% - 32px));
  margin:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(5,7,15,.88);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-wrap{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  font-size:26px;
  font-weight:900;
  letter-spacing:-.7px;
}
.brand-white{color:#fff}
.brand-red{color:var(--red)}
.main-nav{
  display:flex;
  gap:26px;
  align-items:center;
}
.main-nav a{
  color:#eef1fb;
  font-size:16px;
  opacity:.92;
}
.main-nav a:hover{
  color:var(--red2);
}
.panel-btn{
  background:linear-gradient(180deg,var(--red2),var(--red));
  color:#fff;
  padding:14px 22px;
  border-radius:10px;
  font-weight:800;
  box-shadow:0 12px 24px rgba(255,53,87,.22);
}

.live-strip-area{
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(8,10,20,.72);
}
.live-strip-area .wrap{
  display:flex;
  gap:14px;
  align-items:center;
  padding:10px 0;
}
.live-strip-label{
  color:var(--gold);
  font-weight:900;
  letter-spacing:.6px;
  white-space:nowrap;
}
.live-strip-track{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  flex:1;
}
.live-pill{
  flex:0 0 auto;
  min-width:250px;
  background:linear-gradient(180deg,#151a28 0,#101420 100%);
  border:1px solid #252d43;
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.live-pill img{
  width:54px;
  height:32px;
  object-fit:cover;
  border-radius:7px;
  border:1px solid #39415b;
  background:#0d1019;
}
.live-pill-top{
  display:flex;
  gap:7px;
  align-items:center;
  font-size:11px;
  margin-bottom:4px;
}
.live-pill-tag{
  color:#fff;
  background:#242c47;
  border-radius:6px;
  padding:3px 6px;
  font-weight:700;
}
.live-pill-map{
  color:#7ef58d;
  font-weight:700;
}
.live-pill-name{
  font-size:13px;
  font-weight:800;
  color:#eef1fa;
  max-width:140px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-pill-players{
  margin-left:auto;
  font-weight:900;
  color:#fff;
}

.hero{
  position:relative;
  overflow:hidden;
  padding:82px 0 74px;
}
.hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
}
.hero-glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.22;
}
.hero-glow-left{
  background:#ff3355;
  left:18%;
  top:30px;
}
.hero-glow-right{
  background:#7e3cff;
  right:18%;
  top:40px;
}
.hero-tag{
  display:inline-block;
  margin-bottom:18px;
  color:#ff7c8f;
  border:1px solid rgba(255,75,106,.34);
  border-radius:999px;
  padding:9px 18px;
  font-size:13px;
  font-weight:800;
  background:rgba(255,75,106,.06);
}
.hero-title{
  margin:0;
  font-size:76px;
  line-height:1;
  font-weight:900;
  letter-spacing:-2px;
}
.hero-white{color:#f4f5fb}
.hero-red{color:var(--red)}
.hero-text{
  margin:20px auto 0;
  max-width:760px;
  color:#d6dbef;
  font-size:29px;
  line-height:1.55;
}
.hero-actions{
  margin-top:30px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-primary,
.btn-secondary{
  padding:16px 28px;
  border-radius:12px;
  font-weight:900;
  font-size:16px;
}
.btn-primary{
  background:linear-gradient(180deg,var(--red2),var(--red));
  color:#fff;
  box-shadow:0 12px 24px rgba(255,53,87,.22);
}
.btn-secondary{
  background:linear-gradient(180deg,#20263a 0,#161b29 100%);
  border:1px solid #38405d;
  color:#fff;
}

.stats-block{
  padding:22px 0 6px;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.stat-card{
  background:linear-gradient(180deg,#141927 0,#101522 100%);
  border:1px solid #262c42;
  border-radius:18px;
  min-height:116px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.stat-number{
  font-size:46px;
  font-weight:900;
  color:var(--red);
  line-height:1;
}
.stat-label{
  margin-top:8px;
  color:#c6cee7;
  font-size:17px;
}
.stat-card-highlight .stat-title{
  font-size:22px;
  font-weight:900;
  color:var(--red);
}

.featured-section{
  padding:34px 0 28px;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}
.section-head h2{
  margin:0;
  font-size:45px;
  font-weight:900;
}
.section-head h2 span{color:var(--red)}
.section-head p{
  margin:8px 0 0;
  color:#c6cee7;
  font-size:17px;
}
.section-pill{
  background:rgba(255,75,106,.08);
  border:1px solid rgba(255,75,106,.25);
  color:#ff6f84;
  border-radius:999px;
  padding:10px 16px;
  font-size:13px;
  font-weight:900;
}

.featured-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.server-card{
  display:grid;
  grid-template-columns:70px minmax(0,1.65fr) 270px;
  gap:0;
  background:linear-gradient(180deg,#121724 0,#101521 100%);
  border:1px solid #262d43;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.server-rank{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg,rgba(255,204,56,.16),rgba(255,204,56,.05));
  border-right:1px solid rgba(255,255,255,.06);
  padding:16px 10px;
  text-align:center;
}
.server-rank .crown{
  font-size:24px;
  margin-bottom:8px;
}
.server-rank .rank-number{
  font-size:21px;
  font-weight:900;
  color:#fff;
}

.server-main{
  padding:18px 20px;
  background:
    linear-gradient(90deg,rgba(255,204,56,.20),rgba(255,204,56,.06) 58%, transparent 100%);
}
.server-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border-radius:7px;
  font-size:11px;
  font-weight:900;
}
.tag-blue{
  background:#243052;
  color:#fff;
}
.tag-gold{
  background:#ffcd34;
  color:#1d1600;
}
.server-name{
  font-size:34px;
  font-weight:900;
  color:#fff;
  margin-bottom:10px;
}
.server-meta{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:#d3d9ee;
  font-size:15px;
  margin-bottom:10px;
}
.meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.server-status{
  color:#59e488;
  font-weight:900;
}

.server-side{
  background:linear-gradient(180deg,#161b28 0,#121722 100%);
  border-left:1px solid rgba(255,255,255,.06);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:12px;
}
.side-map-label{
  font-size:12px;
  color:#acb6d6;
  font-weight:800;
}
.side-map-name{
  font-size:28px;
  font-weight:900;
  color:#ffcd38;
  text-align:right;
}
.side-connect{
  background:linear-gradient(180deg,var(--red2),var(--red));
  color:#fff;
  font-weight:900;
  padding:11px 18px;
  border-radius:10px;
}

.info-panels{
  padding:22px 0 60px;
}
.panels-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.info-panel{
  background:linear-gradient(180deg,#141927 0,#0f1420 100%);
  border:1px solid #262d43;
  border-radius:18px;
  padding:24px;
}
.panel-kicker{
  color:#ff7388;
  font-weight:900;
  font-size:12px;
  letter-spacing:.8px;
  margin-bottom:10px;
}
.info-panel h3{
  margin:0 0 12px;
  font-size:28px;
}
.info-panel p{
  margin:0;
  color:#c9d1e9;
  line-height:1.7;
  font-size:16px;
}

.empty-state{
  background:linear-gradient(180deg,#141927 0,#101521 100%);
  border:1px solid #262d43;
  border-radius:18px;
  padding:30px;
  text-align:center;
  color:#a9b2cf;
}

@media (max-width: 1100px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panels-grid{grid-template-columns:1fr}
  .server-card{grid-template-columns:70px 1fr}
  .server-side{
    grid-column:1 / -1;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.06);
    align-items:flex-start;
  }
  .side-map-name{text-align:left}
}

@media (max-width: 860px){
  .main-nav{display:none}
  .hero-title{font-size:52px}
  .hero-text{font-size:17px}
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .nav-wrap{
    min-height:78px;
    flex-wrap:wrap;
    padding:10px 0;
  }
  .panel-btn{
    width:100%;
    text-align:center;
  }
  .hero{padding:56px 0 50px}
  .hero-title{font-size:40px}
  .stats-grid{grid-template-columns:1fr}
  .server-card{grid-template-columns:1fr}
  .server-rank{
    flex-direction:row;
    gap:10px;
    justify-content:flex-start;
    padding:14px 16px;
  }
  .server-main{
    padding:16px;
  }
  .server-name{font-size:24px}
  .side-map-name{font-size:22px}
}



/* VenezuelaServers - Menu gaming inspirado en VARQ */

.main-nav {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
}

.main-nav a {
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    font-weight:900;
    letter-spacing:-0.35px;
    color:#ffdc32;
    text-decoration:none;
    opacity:1;
    text-shadow:0 1px 0 rgba(0,0,0,.7);
    transition:color .2s ease, transform .2s ease;
}

.main-nav a:hover {
    color:#fff;
    transform:translateY(-2px);
}

@media(max-width:860px) {
    .main-nav {
        display:flex;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav a {
        font-size:13px;
    }
}




/* VNZ MENU PRO v2 */
.nav-wrap {
    position:relative;
    gap:18px;
}

.main-nav {
    display:flex!important;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:19px;
}

.main-nav a {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    font-weight:900;
    color:#ffdc32;
    white-space:nowrap;
    opacity:1;
    transition:color .18s,transform .18s;
}

.main-nav a svg {
    width:17px;
    height:17px;
    flex-shrink:0;
}

.main-nav a:hover {
    color:white;
    transform:translateY(-1px);
}

.vnz-controls {
    display:flex;
    align-items:center;
    gap:5px;
    order:4;
    margin-left:auto;
}

.vnz-controls button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:6px;
    padding:7px 8px;
    background:transparent;
    color:#a4aac0;
    font:700 12px Arial,sans-serif;
    cursor:pointer;
    white-space:nowrap;
}

.vnz-controls button:hover {
    background:#1e2434;
    color:#ffffff;
}

.vnz-divider {
    width:1px;
    height:18px;
    background:#313748;
}

.vnz-controls svg {
    width:15px;
    height:15px;
}

.vnz-lang-flag {
    display:block;
    width:20px;
    height:14px;
    object-fit:cover;
    border-radius:2px;
}

.panel-btn {
    order:5;
}

body.vnz-light {
    --bg:#f4f5fc;
    --bg2:#ffffff;
    --panel:#ffffff;
    --panel2:#f4f5fd;
    --line:#dfe3f2;
    --line2:#d2d9ee;
    --text:#1c2031;
    --muted:#606782;
    background:#f3f5fc;
    color:#1c2031;
}

body.vnz-light .site-header {
    background:#090a10;
}

body.vnz-light .main-nav a {
    color:#ffdc32;
}

body.vnz-light .hero {
    background:#f0f2fa;
}

body.vnz-light .hero-white {
    color:#222536;
}

body.vnz-light .hero-text,
body.vnz-light .section-head p,
body.vnz-light .info-panel p {
    color:#555d77;
}

body.vnz-light .stat-card,
body.vnz-light .info-panel,
body.vnz-light .server-card,
body.vnz-light .empty-state {
    background:#ffffff;
    border-color:#dbe0ef;
    color:#1b2135;
}

body.vnz-light .stat-label,
body.vnz-light .server-meta {
    color:#505975;
}

body.vnz-light .server-name {
    color:#171c2c;
}

body.vnz-light .server-main {
    background:linear-gradient(
        90deg,
        #fff3c7,
        #ffffff
    );
}

body.vnz-light .server-side {
    background:#f0f2fb;
}

body.vnz-light .side-map-label {
    color:#505b74;
}

body.vnz-light .live-strip-area {
    background:#e9ecf7;
}

body.vnz-light .live-pill {
    background:#ffffff;
}

body.vnz-light .live-pill-name,
body.vnz-light .live-pill-players {
    color:#22283b;
}

body.vnz-light .live-pill-tag {
    color:#ffffff;
}

body.vnz-light .hero-tag {
    background:#ffe8ec;
}

body.vnz-light .btn-secondary {
    color:#ffffff;
}

body.vnz-light .stat-card-highlight .stat-title {
    color:#ff3557;
}

@media(max-width:1100px) {
    .nav-wrap {
        justify-content:center;
    }
    .vnz-controls {
        margin-left:0;
    }
}

@media(max-width:640px) {
    .main-nav {
        width:100%;
        gap:12px;
        justify-content:center;
    }
    .main-nav a {
        font-size:12px;
    }
    .main-nav a svg {
        width:14px;
        height:14px;
    }
    .vnz-controls {
        order:3;
    }
    .panel-btn {
        order:4;
        width:auto;
    }
}


/* VNZ DARK GAMER OVERRIDE */

:root{
  --red:#ffffff;
  --red2:#f5f5f5;
  --gold:#ffd53a;
  --text:#f4f4f4;
  --muted:#a8afc2;
  --panel:#090b12;
  --panel2:#0d1018;
  --line:#232838;
  --line2:#2f3548;
}

body{
  background:
    linear-gradient(180deg,#03050a 0%, #070a11 100%) !important;
  color:#f4f4f4 !important;
}

.site-header{
  background:rgba(3,5,10,.96) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}

.brand-white,
.brand-red,
.hero-white,
.hero-red{
  color:#ffffff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}

.main-nav a{
  color:#ffd53a !important;
}

.main-nav a:hover{
  color:#ffffff !important;
}

.main-nav a svg{
  color:#ffd53a !important;
}

.panel-btn{
  background:linear-gradient(180deg,#12151e,#0b0e15) !important;
  color:#ffffff !important;
  border:1px solid #30364a !important;
  box-shadow:none !important;
}

.vnz-controls button{
  color:#d2d7e6 !important;
}

.vnz-controls button:hover{
  background:#111521 !important;
  color:#ffffff !important;
}

.vnz-divider{
  background:#2f3445 !important;
}

.live-strip-area{
  background:#06090f !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}

.live-strip-label{
  color:#ffd53a !important;
}

.live-pill{
  background:linear-gradient(180deg,#0d1018,#090c13) !important;
  border:1px solid #2a3144 !important;
  box-shadow:none !important;
}

.live-pill img{
  border:1px solid #384055 !important;
}

.live-pill-tag{
  background:#171d2a !important;
  color:#ffffff !important;
}

.live-pill-map{
  color:#95e87c !important;
}

.live-pill-name,
.live-pill-players{
  color:#ffffff !important;
}

.hero{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.04) 0, transparent 40%),
    linear-gradient(180deg,#05070d 0%, #04060b 100%) !important;
}

.hero-glow-left,
.hero-glow-right{
  background:#1b1f2a !important;
  opacity:.28 !important;
  filter:blur(90px) !important;
}

.hero-tag{
  color:#ffd53a !important;
  background:#0f121a !important;
  border:1px solid #343b4e !important;
}

.hero-title{
  color:#ffffff !important;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}

.hero-text{
  color:#d9deea !important;
}

.btn-primary,
.btn-secondary{
  background:linear-gradient(180deg,#11151d,#090c12) !important;
  color:#ffffff !important;
  border:1px solid #343b4c !important;
  box-shadow:none !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.panel-btn:hover,
.side-connect:hover{
  filter:brightness(1.08);
}

.stats-grid .stat-card,
.info-panel,
.server-card,
.empty-state{
  background:linear-gradient(180deg,#0d1018 0,#090c13 100%) !important;
  border:1px solid #2c3346 !important;
  box-shadow:none !important;
}

.stat-number,
.stat-card-highlight .stat-title{
  color:#ffffff !important;
}

.stat-label{
  color:#c4cad9 !important;
}

.section-head h2,
.section-head h2 span{
  color:#ffffff !important;
}

.section-head p{
  color:#b7bed0 !important;
}

.section-pill{
  background:#0f121a !important;
  border:1px solid #343b4e !important;
  color:#ffd53a !important;
}

.server-rank{
  background:linear-gradient(180deg,#11151d,#0b0e15) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
}

.server-rank .rank-number{
  color:#ffffff !important;
}

.server-main{
  background:linear-gradient(90deg,#0d1018 0,#0a0d14 100%) !important;
}

.server-name{
  color:#ffffff !important;
}

.server-meta{
  color:#c7cede !important;
}

.server-status{
  color:#83e77b !important;
}

.tag-blue{
  background:#171d2a !important;
  color:#ffffff !important;
}

.tag-gold{
  background:#16120a !important;
  border:1px solid #564624 !important;
  color:#ffd53a !important;
}

.server-side{
  background:linear-gradient(180deg,#0c1017,#080b12) !important;
  border-left:1px solid rgba(255,255,255,.06) !important;
}

.side-map-label{
  color:#aab3c6 !important;
}

.side-map-name{
  color:#ffffff !important;
}

.side-connect{
  background:linear-gradient(180deg,#11151d,#090c12) !important;
  color:#ffffff !important;
  border:1px solid #32394b !important;
  box-shadow:none !important;
}

.panel-kicker{
  color:#ffd53a !important;
}

.info-panel h3{
  color:#ffffff !important;
}

.info-panel p{
  color:#c7cede !important;
}

a{
  transition:all .18s ease;
}

body.vnz-light{
  background:#f3f5fc !important;
}

body.vnz-light .panel-btn{
  background:linear-gradient(180deg,#f7f8fc,#e8ebf5) !important;
  color:#202534 !important;
  border:1px solid #ccd3e6 !important;
}

body.vnz-light .btn-primary,
body.vnz-light .btn-secondary,
body.vnz-light .side-connect{
  background:linear-gradient(180deg,#f7f8fc,#e9edf6) !important;
  color:#202534 !important;
  border:1px solid #cfd6e8 !important;
}

body.vnz-light .hero-tag,
body.vnz-light .section-pill{
  background:#ffffff !important;
  color:#2b3143 !important;
  border:1px solid #d3d9eb !important;
}


/* VNZ PIXEL GAMER PREVIEW */

/* ===== fuentes ===== */
:root{
  --vnz-font-logo: "Orbitron", Arial, sans-serif;
  --vnz-font-pixel: "Silkscreen", "Press Start 2P", monospace;
  --vnz-font-ui: "Orbitron", Arial, sans-serif;
}

/* ===== logo / marca ===== */
.brand,
.brand-logo,
.brand-title,
.logo-title,
.site-logo,
.site-brand{
  font-family: var(--vnz-font-logo) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  text-transform: uppercase !important;
}

.brand-white,
.brand-red{
  font-family: var(--vnz-font-logo) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
}

.brand-white{
  color:#f7f7fb !important;
}

.brand-red{
  color:#ffffff !important;
}

/* subtitulo bajo logo */
.brand-subtitle,
.brand-sub,
.brand small,
.brand .sub,
.brand .tagline{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color:#9098ad !important;
}

/* ===== menú principal ===== */
.main-nav a{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: -.2px !important;
  text-transform: none !important;
}

.main-nav a span{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
}

/* ===== botones top / controles ===== */
.panel-btn,
.vnz-controls button{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
}

/* ===== franja EN VIVO ===== */
.live-strip-label{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  color:#ffd53a !important;
}

.live-pill-name{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 700 !important;
}

.live-pill-map,
.live-pill-tag,
.live-pill-players{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 10px !important;
  letter-spacing: .4px !important;
}

/* ===== hero ===== */
.hero-tag{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.hero-title,
.hero-white,
.hero-red{
  font-family: var(--vnz-font-logo) !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  text-transform: uppercase !important;
}

.hero-title{
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(255,255,255,.04);
}

.hero-text{
  font-family: Arial, Helvetica, sans-serif !important;
  color:#dde2ed !important;
}

.btn-primary,
.btn-secondary{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
}

/* ===== stats ===== */
.stat-number{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 44px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  color:#ffffff !important;
}

.stat-label{
  font-family: var(--vnz-font-ui) !important;
  font-size: 14px !important;
  color:#d6dbea !important;
}

.stat-card-highlight .stat-title{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 900 !important;
  color:#ffffff !important;
}

/* ===== secciones ===== */
.section-head h2,
.section-head h2 span{
  font-family: var(--vnz-font-logo) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  text-transform: uppercase !important;
}

.section-head p{
  color:#adb5c8 !important;
}

.section-pill{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 11px !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
}

/* ===== tarjetas servers ===== */
.server-name{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: -.2px !important;
  color:#ffffff !important;
}

.server-meta,
.server-status{
  font-family: Arial, Helvetica, sans-serif !important;
}

.server-rank .rank-number{
  font-family: var(--vnz-font-pixel) !important;
  letter-spacing: 1px !important;
}

.tag-blue,
.tag-gold{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 10px !important;
  letter-spacing: .5px !important;
}

.side-map-label{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

.side-map-name{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
}

.side-connect{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
}

/* ===== paneles abajo ===== */
.panel-kicker{
  font-family: var(--vnz-font-pixel) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.info-panel h3{
  font-family: var(--vnz-font-ui) !important;
  font-weight: 800 !important;
  color:#ffffff !important;
}

.info-panel p{
  font-family: Arial, Helvetica, sans-serif !important;
  color:#c7cede !important;
}

/* ===== tablitas oscuras ===== */
.stat-card,
.info-panel,
.server-card,
.empty-state{
  background:
    linear-gradient(180deg, #0b0e15 0%, #080b11 100%) !important;
  border:1px solid #2b3244 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 0 0 1px rgba(0,0,0,.18) !important;
}

.live-pill,
.panel-btn,
.btn-primary,
.btn-secondary,
.side-connect{
  border-radius: 12px !important;
}

/* ===== responsivo ===== */
@media (max-width: 900px){
  .hero-title,
  .hero-white,
  .hero-red{
    letter-spacing: -1px !important;
  }

  .stat-number{
    font-size: 34px !important;
  }

  .hero-tag,
  .section-pill,
  .panel-kicker{
    font-size: 10px !important;
  }
}


/* VNZ LOGIN BAR VISIBLE */

.vnz-login-bar {
    width:100%;
    background:#090c14;
    border-bottom:1px solid #2e3549;
    padding:10px 16px;
}

.vnz-login-inner {
    max-width:1180px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.vnz-login-description {
    display:flex;
    align-items:center;
    gap:9px;
    color:#c4cbdd;
    font-size:12px;
    font-weight:700;
}

.vnz-login-icon {
    color:#ffd53a;
    font-size:17px;
}

.vnz-login-visible-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 18px;
    border:1px solid #b9952b;
    border-radius:7px;
    background:#16140c;
    color:#ffdc48 !important;
    font-weight:900;
    font-size:12px;
    text-decoration:none;
    white-space:nowrap;
}

.vnz-login-visible-button:hover {
    background:#29220d;
    border-color:#ffda45;
    color:#ffffff !important;
}

@media(max-width:650px) {
    .vnz-login-inner {
        flex-direction:column;
        align-items:stretch;
    }

    .vnz-login-description {
        justify-content:center;
        text-align:center;
    }

    .vnz-login-visible-button {
        width:100%;
    }
}