/* ==========================================================
   Vulk Fire/Gold Theme - aplicado por ChatGPT
   Paleta solicitada: fuego + oro + fondo oscuro
   ========================================================== */
:root {
  --bg-main: #050201;
  --bg-panel: rgba(0,0,0,.72);
  --bg-card: rgba(0,0,0,.55);
  --bg-soft: rgba(255,255,255,.06);

  --fire-main: #07e7fb;
  --fire-strong: #00dcff;
  --fire-red: #ff3c00;
  --fire-soft: #ff8a00;

  --gold-main: #00f6ff;
  --gold-strong: #ffd700;
  --gold-soft: #ffb347;
  --gold-dark: #c8a95c;

  --text-main: #ffffff;
  --text-soft: #fff2df;
  --text-muted: #c8a95c;

  --success: #00ff00;
  --success-soft: #4aff4a;

  --border-fire: rgb(7 251 251 / 30%);
  --glow-fire: rgba(251,133,7,.2);
  --glow-gold: rgba(255,179,0,.6);

  /* Compatibilidad con variables viejas del template */
  --bg-color: var(--bg-main);
  --bg-gradient: radial-gradient(circle at 50% 0%, rgba(255,60,0,.18) 0%, rgba(5,2,1,.96) 45%, #050201 100%);
  --base-blue: var(--fire-main);
  --magic-glow: var(--fire-main);
  --soft-glow: var(--gold-soft);
  --turquoise: var(--fire-strong);
  --accent-glow: 0 0 18px var(--glow-gold);
  --panel-glow: 0 12px 45px rgba(0,0,0,.85), 0 0 25px var(--glow-fire);
  --text-glow: 0 0 12px rgba(251,133,7,.75);
  --glass-bg: var(--bg-panel);
  --glass-border: 1px solid var(--border-fire);
  --glass-border-hover: 1px solid var(--gold-main);
  --btn-gradient: linear-gradient(135deg, var(--fire-red), var(--fire-main) 55%, var(--gold-soft));
  --btn-hover-gradient: linear-gradient(135deg, var(--gold-strong), var(--fire-strong));
  --surface-gradient: linear-gradient(180deg, rgb(0 10 20 / 92%) 0%, rgba(0, 0, 0, .94) 100%);
  --gold: var(--gold-strong);
  --neon-cyan: var(--fire-main);
}

html, body {
  min-height: 100%;
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(rgb(30 24 22 / 0%), rgb(255 0 0 / 0%)), var(--bg-main) url(../img/background.jpg) no-repeat center center fixed !important;
  background-size: cover !important;
}

body > :not(script):not(style):not(link):not(meta):not(title) { flex-shrink: 0; }
.main-content, .content, .page-content, .container.main, .wrapper, #wrapper { flex: 1 0 auto; }
.footer, footer.footer {
  margin-top: auto !important;
  width: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(5,2,1,.96)) !important;
  border-top: 1px solid var(--border-fire) !important;
  box-shadow: 0 -12px 35px rgba(0,0,0,.65), 0 -2px 22px var(--glow-fire) !important;
}

::-webkit-scrollbar-track { background: var(--bg-main) !important; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--fire-red), var(--fire-main), var(--gold-soft)) !important; border-color: var(--bg-main) !important; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, var(--gold-strong), var(--fire-strong)) !important; }

a, .text-neon { color: var(--fire-main) !important; text-shadow: var(--text-glow); }
a:hover { color: var(--gold-main) !important; text-shadow: 0 0 16px var(--glow-gold) !important; }
.text-gold, h1, h2, h3, h4, h5, h6, .panel-title { color: var(--gold-main) !important; text-shadow: 0 0 18px rgba(255,106,0,.45) !important; }

.navbar, .navbar-default, .topbar, .header, .menu,
.panel, .card, .widget, .rankings-widget, .donation-card, .market-card,
.castle-siege-widget, .butcher-widget, .status-box, .stat-box-account,.stat-box-char,


.btn, button, input[type="submit"], .btn-hero-large, .btn-primary,
.btn-hero-register, .btn-hero-download, .rankings-widget-menu a,
.donation-btn, .market-btn,.stat-box-char {
  /* background: var(--btn-gradient) !important; */
  border: 1px solid rgb(0 221 254) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgb(6 237 255 / 20%), inset 0 0 10px rgba(255, 255, 255, .08) !important;
}


.btn:hover, button:hover, input[type="submit"]:hover, .btn-hero-large:hover,
.rankings-widget-menu a:hover, .donation-btn:hover, .market-btn:hover {
  background: var(--btn-hover-gradient) !important;
  color: #120500 !important;
  box-shadow: 0 0 25px var(--glow-gold) !important;
}

.stat-box-account, .stat-box-char{
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(251,133,7,.25);
    box-shadow: inset 0 0 20px rgba(251,133,7,0.1);
    padding: 10px 20px;
    border-radius: 8px;
    min-width: 120px;
    backdrop-filter: blur(8px);
    transform: scale(0.9);
}

.value, .count, .online-count, .server-online, .success, .text-success {
  color: var(--success) !important;
  text-shadow: 0 0 12px rgba(0,255,0,.55) !important;
}

.page-title, .section-title, .ranking-title, .donation-title {
  /* background: linear-gradient(180deg, rgba(251,133,7,.16), transparent) !important; */
  border-bottom: 1px solid var(--border-fire) !important;
}

input, select, textarea, .form-control, table, .table {
  background-color: rgba(0,0,0,.58) !important;
  color: var(--text-soft) !important;
  border-color: var(--border-fire) !important;
}
th, .table thead th {color: var(--gold-main) !important;background: rgb(0 159 255 / 13%) !important;}
td { border-color: rgb(7 157 251 / 16%) !important; }

.kill-log-widget, .kill-log-title, .kill-log-body { display: none !important; visibility: hidden !important; }


/* ==========================================================
   Limpieza final Vulk Fire: sin azules, sin nubes, partículas fuego
   ========================================================== */
.cloud, .cloud span, [class*="cloud"] {
  display: none !important;
  animation: none !important;
  background: none !important;
}

#particles-js {
  z-index: 0 !important;
  opacity: .85 !important;
  mix-blend-mode: screen;
}
#particles-js canvas {
  opacity: .82 !important;
  filter: drop-shadow(0 0 8px rgba(251,133,7,.45));
}

* {
  scrollbar-color: var(--fire-main) var(--bg-main);
}

/* Reemplazo visual de cualquier componente que haya quedado con estilo azul/cyan */
.info-item, .info-item:hover,
.server-info-bar .info-item,
.rankings-widget-menu a,
.ranking-button, .ranking-btn,
.download-box, .guide-box,
.quick-link, .quick-links a,
.status-card, .server-card,
[class*="blue"], [class*="cyan"], [class*="aqua"] {
  background: linear-gradient(135deg, rgba(0, 0, 0, .72), rgb(0 29 70 / 52%)) !important;
  border-color: var(--border-fire) !important;
  color: var(--text-soft) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 18px var(--glow-fire) !important;
}

.info-item:hover, .quick-link:hover, .quick-links a:hover,
.rankings-widget-menu a:hover, .ranking-button:hover, .ranking-btn:hover {
  background: linear-gradient(135deg, rgba(255,60,0,.24), rgba(255,179,0,.18)) !important;
  border-color: rgb(106 255 245 / 55%) !important;
  box-shadow: 0 12px 26px rgb(7 251 202 / 28%), 0 0 20px var(--glow-gold) !important;
}

.info-label, .info-value,
[class*="cyan"], [class*="turquoise"], .text-info {
  /* color: var(--gold-main) !important; */
  text-shadow: 0 0 12px rgba(251,133,7,.58) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body > *:not(#particles-js) {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   Vulk Fire v3 - contador circular + ranking buscador + sin tonos fríos
   ========================================================== */
:root {
  --text-muted: #c8a95c;
}

.stat-box-middle {
  width: 190px !important;
  height: 190px !important;
  margin: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-online-btn {
  width: 170px !important;
  height: 170px !important;
  min-width: 170px !important;
  min-height: 170px !important;
  max-width: 170px !important;
  max-height: 170px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 50% !important;
  border: 2px solid var(--border-fire) !important;
  background: radial-gradient(circle at 50% 38%, rgba(255,211,106,.20), rgba(251,133,7,.18) 34%, rgba(0,0,0,.78) 70%) !important;
  box-shadow: 0 0 25px var(--glow-fire), 0 0 45px rgba(255,60,0,.25), inset 0 0 30px rgba(255,106,0,.15) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  text-align: center !important;
}

.hero-online-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  background: conic-gradient(var(--fire-main), var(--gold-main), var(--fire-red), var(--fire-main)) !important;
  animation: vulkSpin 4s linear infinite !important;
  z-index: -1 !important;
  opacity: .95 !important;
  border: 0 !important;
}

.hero-online-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,179,0,.16), transparent 62%) !important;
  box-shadow: inset 0 0 32px rgba(255,60,0,.28), 0 0 24px rgba(251,133,7,.35) !important;
  animation: pulseGlow 2.8s infinite ease-in-out !important;
  pointer-events: none !important;
}

@keyframes vulkSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero-online-btn .count {
  font-size: 42px !important;
  font-weight: 900 !important;
  color: var(--gold-strong) !important;
  line-height: 1 !important;
  text-shadow: 0 0 16px var(--glow-gold), 0 0 24px rgba(255,60,0,.55) !important;
  z-index: 3 !important;
}

.hero-online-btn .label {
  margin-top: 6px !important;
  width: 120px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  color: var(--text-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  z-index: 3 !important;
}

.panel-heading,
.ranking-module-header,
.table>thead>tr>th,
.general-rank thead th,
.content-rankings table.table thead th {
  /* background: linear-gradient(180deg, rgba(251,133,7,.14), rgba(0,0,0,.35)) !important; */
  border-bottom: 1px solid rgb(7 251 195 / 28%) !important;
  color: var(--gold-main) !important;
}

.content-rankings table.table tbody tr td,
.dataTableChar tbody tr td,
.general-rank tbody tr td {
  background: rgb(4 16 30 / 82%) !important;
  border: 1px solid rgb(7 163 251 / 14%) !important;
  color: var(--text-soft) !important;
  box-shadow: inset 0 0 12px rgb(7 195 251 / 4%) !important;
}

.content-rankings table.table tbody tr:nth-child(even) td,
.general-rank tbody tr:nth-child(even) td {
  background: rgba(16 38 72 / 42%) !important;
}

.content-rankings table.table tbody tr:hover td,
.dataTableChar tbody tr:hover td,
.general-rank tbody tr:hover td {
  background: linear-gradient(135deg, rgb(0 231 255 / 18%), rgba(255, 179, 0, .10)) !important;
  border-color: rgb(106 255 223 / 52%) !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgb(7 251 226 / 20%), inset 0 0 16px rgba(255, 106, 0, .12) !important;
}

.general-rank tbody tr td a,
.content-rankings table.table tbody tr td a {
  color: var(--gold-main) !important;
  text-shadow: 0 0 10px rgba(251,133,7,.45) !important;
}

.ranking-search-box {
  max-width: 520px;
  margin: 0 auto 25px auto;
  padding: 14px;
  border: 1px solid var(--border-fire);
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  box-shadow: var(--panel-glow);
}

.ranking-search-box input {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgb(7 220 251 / 34%) !important;
  background: rgba(5,2,1,.88) !important;
  color: var(--gold-main) !important;
  text-align: center;
  font-weight: 700;
  letter-spacing: .5px;
  outline: none;
  box-shadow: inset 0 0 16px rgba(251,133,7,.10), 0 0 18px rgba(7 159 251 / 12%) !important;
}

.ranking-search-box input::placeholder { color: rgba(255,211,106,.62); }
.ranking-search-empty { color: var(--gold-soft); text-align: center; padding: 18px; display: none; }

.hero-logo { animation: none !important; }


/* ==========================================================
   Vulk Fire v4 - limpieza final sin azules + Online negro
   ========================================================== */

/* Deshabilita el bloque viejo que pintaba stat-box y hero-online-btn */
.stat-box-middle,
.hero-online-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.stat-box-middle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Botón central ONLINE: fondo negro, circular y font más fuerte */
.hero-online-btn {
  width: 178px !important;
  height: 178px !important;
  min-width: 178px !important;
  min-height: 178px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,211,106,.10) 0%, rgba(0,0,0,.96) 48%, #000 100%) !important;
  border: 2px solid rgba(255,211,106,.55) !important;
  box-shadow:
    0 0 28px rgba(251,133,7,.38),
    0 0 55px rgba(255,60,0,.22),
    inset 0 0 34px rgba(255,106,0,.13),
    inset 0 0 4px rgba(255,211,106,.45) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  text-align: center !important;
}

.hero-online-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg, var(--fire-red), var(--fire-main), var(--gold-strong), var(--fire-strong), var(--fire-red)) !important;
  animation: vulkSpin 4s linear infinite !important;
  z-index: -1 !important;
  opacity: .95 !important;
}

.hero-online-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,179,0,.14), transparent 66%) !important;
  box-shadow: inset 0 0 36px rgba(255,60,0,.24), 0 0 24px rgba(251,133,7,.25) !important;
  pointer-events: none !important;
}

.hero-online-btn .count {
  font-family: var(--font-head, 'Cinzel', 'Trajan Pro', Georgia, serif) !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  color: var(--gold-strong) !important;
  text-shadow:
    0 2px 0 #5b1b00,
    0 0 16px rgba(255,211,106,.9),
    0 0 28px rgba(255,60,0,.65) !important;
  letter-spacing: 1px !important;
  z-index: 3 !important;
}

.hero-online-btn .label {
  margin-top: 10px !important;
  width: auto !important;
  font-family: var(--font-head, 'Cinzel', 'Trajan Pro', Georgia, serif) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #fff2df !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 10px rgba(255,211,106,.75), 0 0 22px rgba(251,133,7,.65) !important;
  z-index: 3 !important;
}

/* Footer full ancho real, sin límite visual del contenedor */
.footer,
footer.footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: auto !important;
  padding: 52px 0 34px !important;
  background: radial-gradient(circle at 50% 0%, rgb(7 240 251 / 18%), transparent 38%), linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(5, 2, 1, .98) 70%, #000 100%) !important;
  border-top: 1px solid rgba(0 135 255 / 34%) !important;
  box-shadow:
    0 -18px 50px rgba(0,0,0,.75),
    0 -2px 24px rgba(251,133,7,.28),
    inset 0 1px 0 rgba(255,211,106,.18) !important;
  text-align: center !important;
  left: auto !important;
  right: auto !important;
}

.footer .footer-container,
footer.footer .container,
footer.footer .footer-container {
  width: min(1200px, calc(100% - 32px)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Última capa anti azul/celeste */
[style*="0, 102, 255"],
[style*="#337ab7"],
[style*="#0066cc"],
[style*="#8cb0ea"],
[style*="#9aadd5"] {
  color: var(--gold-main) !important;
  border-color: var(--border-fire) !important;
  box-shadow: var(--panel-glow) !important;
}