/* =========================================================
   VNZ UNIFIED GAMER TYPOGRAPHY
   Solo diseño visual, sin tocar lógica
   ========================================================= */

:root{
  --vnz-bg:#05070d;
  --vnz-bg2:#0b0f18;
  --vnz-panel:#0c111b;
  --vnz-panel2:#101726;
  --vnz-line:#293248;
  --vnz-line2:#36415b;
  --vnz-text:#f5f7fb;
  --vnz-muted:#adb7cb;
  --vnz-soft:#8f9ab2;
  --vnz-yellow:#ffd53a;
  --vnz-blue:#7da2ff;
}

/* ===== base ===== */
html, body{
  background: var(--vnz-bg) !important;
  color: var(--vnz-text) !important;
  font-family: "Tektur","Oxanium","Orbitron",sans-serif !important;
  letter-spacing: .25px;
}

body,
body button,
body input,
body textarea,
body select,
body label,
body a,
body p,
body span,
body div,
body li,
body td,
body th,
body small,
body strong{
  font-family: "Tektur","Oxanium","Orbitron",sans-serif !important;
}

/* ===== títulos y branding ===== */
h1,h2,h3,h4,h5,h6,
.brand,
.brand-white,
.brand-red,
.site-logo,
.logo,
.logo-title,
.hero-title,
.hero-white,
.hero-red,
.section-head h2,
.section-head h2 span,
.server-name,
.server-title,
.side-map-name,
.info-panel h3,
.card h2,
.card h3,
.summary-title,
[class*="title"]{
  font-family: "Orbitron","Tektur","Oxanium",sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

/* subtítulos pequeños tipo gamer */
.brand-subtitle,
.brand-sub,
.hero-tag,
.section-pill,
.panel-kicker,
.live-strip-label,
.tag-blue,
.tag-gold,
.side-map-label,
.server-meta small,
.stat-label,
.info-label,
.owner-note,
.muted,
small{
  font-family: "Tektur","Oxanium",sans-serif !important;
  letter-spacing: .7px !important;
}

/* ===== navegación ===== */
.main-nav a,
nav a,
header a,
.top-nav a{
  font-family: "Tektur","Oxanium","Orbitron",sans-serif !important;
  font-weight: 700 !important;
  color: var(--vnz-yellow) !important;
  text-transform: none !important;
}

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

/* ===== botones ===== */
button,
.action,
.btn,
.btn-primary,
.btn-secondary,
.panel-btn,
.side-connect,
input[type="submit"],
input[type="button"]{
  font-family: "Tektur","Oxanium","Orbitron",sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg,#121827 0%, #0c1220 100%) !important;
  border: 1px solid var(--vnz-line2) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.2) !important;
}

button:hover,
.action:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.panel-btn:hover,
.side-connect:hover{
  filter: brightness(1.08);
  border-color: #516285 !important;
}

/* ===== inputs/forms ===== */
input,
textarea,
select{
  font-family: "Tektur","Oxanium",sans-serif !important;
  color:#ffffff !important;
  background:#090d16 !important;
  border:1px solid #2c3550 !important;
  border-radius:10px !important;
}

input::placeholder,
textarea::placeholder{
  color:#7f8aa5 !important;
  font-family: "Tektur","Oxanium",sans-serif !important;
}

/* ===== tarjetas/paneles ===== */
.card,
.info-panel,
.server-card,
.stat-card,
.empty-state,
section.card,
aside .card,
.owner-box,
.sidebar-box,
.summary-box,
.panel-box{
  background: linear-gradient(180deg,var(--vnz-panel) 0%, var(--vnz-bg2) 100%) !important;
  border:1px solid var(--vnz-line) !important;
  border-radius:16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(0,0,0,.15) !important;
}

/* ===== textos secundarios ===== */
p,
li,
td,
th,
.server-meta,
.server-status,
.info-panel p,
.card p,
.owner-area p{
  color: var(--vnz-muted) !important;
}

/* ===== números y stats ===== */
.stat-number,
.rank-number,
.server-rank .rank-number,
.score-number,
.metric-number,
.counter,
.hero-number,
.big-number{
  font-family: "Tektur","Orbitron",sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
}

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

/* ===== home hero ===== */
.hero{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.03) 0, transparent 42%),
    linear-gradient(180deg,#060912 0%, #04070d 100%) !important;
}

.hero-tag{
  color: var(--vnz-yellow) !important;
  background:#0b1019 !important;
  border:1px solid #333d57 !important;
  border-radius:999px !important;
  padding:.6rem 1rem !important;
}

.hero-title{
  color:#f6f7fb !important;
  text-shadow: 0 0 18px rgba(255,255,255,.05);
}

.hero-text{
  font-family: "Tektur","Oxanium",sans-serif !important;
  color:#e0e5f0 !important;
}

/* ===== franja de servidores live ===== */
.live-strip-area{
  background:#060a11 !important;
  border-top:1px solid rgba(255,255,255,.04) !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
}

.live-strip-label{
  color:var(--vnz-yellow) !important;
  font-size:14px !important;
  text-transform:uppercase !important;
}

.live-pill{
  background:linear-gradient(180deg,#0d131f 0%, #090d16 100%) !important;
  border:1px solid #2b3550 !important;
  border-radius:14px !important;
}

.live-pill-name,
.live-pill-players,
.live-pill-map,
.live-pill-tag{
  font-family: "Tektur","Oxanium",sans-serif !important;
}

.live-pill-name{ color:#ffffff !important; }
.live-pill-map{ color:#8fe27d !important; }
.live-pill-tag{ color:#ffffff !important; }
.live-pill-players{ color:#dfe5f3 !important; }

/* ===== listados / ranking ===== */
.server-rank{
  background:linear-gradient(180deg,#101724 0%, #0b111b 100%) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
}

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

.server-side{
  background:linear-gradient(180deg,#0c111b 0%, #090d15 100%) !important;
  border-left:1px solid rgba(255,255,255,.05) !important;
}

.side-map-label{
  color:#9ba6bb !important;
  text-transform:uppercase !important;
}

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

.tag-blue,
.tag-gold{
  background:#141b29 !important;
  border:1px solid #303a54 !important;
  color:#ffffff !important;
  border-radius:8px !important;
  padding:.25rem .45rem !important;
}

/* ===== server detail / tabs ===== */
.tabs button,
.tab button,
.server-tabs button,
.subtabs button{
  font-family: "Tektur","Oxanium","Orbitron",sans-serif !important;
  color:#ffffff !important;
  background:#101625 !important;
  border:1px solid #313a54 !important;
  border-radius:10px !important;
}

.tabs button.active,
.tab button.active,
.server-tabs button.active,
.subtabs button.active{
  border-color:#6b7ca7 !important;
  box-shadow: 0 0 0 1px rgba(255,213,58,.18), inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

/* ===== gráficos / labels ===== */
.chart-title,
.chart-subtitle,
.graph-title,
.graph-label,
.canvas-title{
  font-family: "Tektur","Oxanium","Orbitron",sans-serif !important;
  color:#dbe1ef !important;
}

/* ===== sidebars ===== */
.sidebar h3,
.sidebar h4,
.rightbar h3,
.rightbar h4{
  font-family: "Orbitron","Tektur",sans-serif !important;
  color:#ffffff !important;
  text-transform: uppercase !important;
}

.sidebar a,
.rightbar a{
  font-family: "Tektur","Oxanium",sans-serif !important;
}

/* ===== tablas/listados ===== */
table,
table *{
  font-family: "Tektur","Oxanium",sans-serif !important;
}

/* ===== links ===== */
a{
  text-decoration:none;
  transition:all .15s ease;
}

/* ===== modo claro ===== */
body.vnz-light{
  background:#f2f4fa !important;
  color:#202536 !important;
}

body.vnz-light,
body.vnz-light button,
body.vnz-light input,
body.vnz-light textarea,
body.vnz-light select,
body.vnz-light label,
body.vnz-light a,
body.vnz-light p,
body.vnz-light span,
body.vnz-light div,
body.vnz-light li{
  color:#1d2332 !important;
}

body.vnz-light .card,
body.vnz-light .info-panel,
body.vnz-light .server-card,
body.vnz-light .stat-card{
  background:linear-gradient(180deg,#ffffff 0%, #eef2f8 100%) !important;
  border:1px solid #ced6e6 !important;
}

body.vnz-light .live-pill,
body.vnz-light button,
body.vnz-light .action,
body.vnz-light .btn,
body.vnz-light .panel-btn{
  background:linear-gradient(180deg,#ffffff 0%, #edf2f9 100%) !important;
  border:1px solid #cbd4e6 !important;
  color:#202536 !important;
}

body.vnz-light .main-nav a{
  color:#364e89 !important;
}

/* ===== responsive ===== */
@media (max-width: 900px){
  h1,h2,h3,h4,h5,h6,
  .hero-title,
  .brand-white,
  .brand-red,
  .server-name{
    letter-spacing:.25px !important;
  }

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

  .live-strip-label,
  .hero-tag,
  .section-pill{
    font-size:11px !important;
  }
}