:root {
  --color-primary: #00f7ff;
  --color-secondary: #4fca4f;
  --color-accent: #ffffff;
  --color-bg: #0b0b0b;
  --color-surface: #141414;
  --color-surface-alt: #252525;
  --color-text: #ffffff;
  --color-muted: #9facac;
  --color-link: #4fca4f;
  --color-nav-bg: rgba(0,0,0,0.30);
  --color-nav-text: #ffffff;
  --color-border: #333333;

  --btn-base-bg: #333333;
  --btn-text: #ffffff;
  --btn-download-bg: #d6e600;
  --btn-donate-bg: #007bff;
  --btn-vip-bg: #ff0066;
  --btn-register-bg: #0042c7;
  --btn-blue-bg: #0042c7;
  --btn-blue-text: #ffffff;
  --sidebar-active-start: #0042c7;
  --sidebar-active-end: #100606;
  --sidebar-active-text: #ffffff;
  --sidebar-active-opacity: 1;
  --sidebar-active-radius: 15px;
  /* Tab content styles */
  --tab-content-bg: #09193a;
  --tab-content-padding: 2rem;
  --tab-content-radius: 0 0 15px 15px;
  /* Background color for Tailwind-like class bg-[#120606] */
  --bg-120606: #142850;
  --bg-120606-rgb: 20 40 80;
  /* Background color for #bg-image */
  --bg-image-color: #040c1b;
  /* Background color for Tailwind-like class bg-[#1e0909] */
    --bg-1e0909: #09193a;
  --bg-1e0909-rgb: 9 25 58;
  /* Footer variables */
  --footer-bg: #0042c7;
  --footer-border-top: #09193a;
  /* BG-Info (.tab-player-on) gradient */
  --tab-player-on-start: #0042c7;
  --tab-player-on-end: #09193a;
  /* Tab link hover/active gradient */
  --tab-link-start: #0042c7;
  --tab-link-end: #09193a;
  /* Info-Online (.bg-degrade) gradient */
  --bg-degrade-start: #643c20;
  --bg-degrade-end: #100606;
    --bg-degrade-start-rgb: 100 60 32;
  --bg-degrade-end-rgb: 16 6 6;
  --bg-degrade-opacity: 0.00;
  /* Menu Tab gradient variables */
  --menu-tab-start: #09193a;
  --menu-tab-end: #000000;
}

/* Fondo global del sitio con imagen fija */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  background-image: url('/image/hero.png') !important; /* usar hero.png existente */
  background-attachment: fixed !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
a { color: var(--color-link); }

/* Navbar background override */
nav[data-twe-navbar-ref] { background: var(--color-nav-bg) !important; color: var(--color-nav-text) !important; }

/* Cards and surfaces */
.image-tab-content, .card, .panel, .table, .menu-info, .content-box { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; }

/* Base button */
.btn-base { background: var(--btn-base-bg) !important; color: var(--btn-text) !important; border: 1px solid var(--color-border) !important; padding: 6px 12px; border-radius: 8px; text-decoration: none; display:inline-block; }
.btn-download { background: var(--btn-download-bg) !important; }
.btn-donate { background: var(--btn-donate-bg) !important; }
.btn-vip { background: var(--btn-vip-bg) !important; }
/* Override Tailwind-like class dynamically */
.bg-\[\#120606\] { --tw-bg-opacity: 1; background-color: rgb(var(--bg-120606-rgb) / var(--tw-bg-opacity)) !important; }
.bg-\[\#1e0909\] { --tw-bg-opacity: 1; background-color: rgb(var(--bg-1e0909-rgb) / var(--tw-bg-opacity)) !important; }
.btn-register { background: var(--btn-register-bg) !important; color: var(--btn-text) !important; }
.btn-blue { background: var(--btn-blue-bg) !important; color: var(--btn-blue-text) !important; }

/* Background for #bg-image */
#bg-image {
  background-color: var(--bg-image-color) !important;
  /* Mantener la imagen de fondo fija respecto al viewport */
  background-attachment: fixed !important;
  /* Asegurar que cubra toda el área visible */
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Accent for active menu indicator */
.sidebar-link.active::before { background: var(--color-accent) !important; }

/* Public site active menu gradient */
.menu-info.active { background-image: linear-gradient(45deg, var(--sidebar-active-start), var(--sidebar-active-end)) !important; }

/* Menu Tab gradient via theme variables */
.menu-tab {
  background: var(--menu-tab-start, #822e2e) !important;
  background: linear-gradient(180deg, var(--menu-tab-start, #822e2e), var(--menu-tab-end, #000000) 85%) !important;
  border-radius: 15px 15px 0 0 !important;
}

/* Info-Online gradient block */
.bg-degrade {
  background: linear-gradient(
    180deg,
    rgb(var(--bg-degrade-start-rgb) / var(--bg-degrade-opacity)),
    rgb(var(--bg-degrade-end-rgb) / var(--bg-degrade-opacity))
  ) !important;
}

/* Sidebar item active styles */
.item-sidebar.active {
  color: var(--sidebar-active-text) !important;
  opacity: var(--sidebar-active-opacity) !important;
  border-radius: var(--sidebar-active-radius) !important;
  background: linear-gradient(90deg, var(--sidebar-active-start) 9%, var(--sidebar-active-end) 100%) !important;
}

/* Tables */
thead { color: var(--color-primary) !important; }
tbody tr { color: var(--color-muted) !important; }

/* Tab content block */
.tab-content {
  background: var(--tab-content-bg) !important;
  padding: var(--tab-content-padding) !important;
  border-radius: var(--tab-content-radius) !important;
}

/* Footer styling via theme variables */
footer {
  background: var(--footer-bg) !important;
  border-top: 4px solid var(--footer-border-top) !important;
  border-style: solid !important;
  padding: 10px 20px !important;
  color: #fff !important;
  font-size: .9rem !important;
  display: flex !important;
  align-content: center !important;
  justify-content: space-between !important;
}

/* BG-Info block (.tab-player-on) gradient via theme variables */
.tab-player-on {
  /* fallback robusto para asegurar degradado válido */
  background: var(--tab-player-on-start, #331212) !important;
  background: linear-gradient(180deg, var(--tab-player-on-start, #331212), var(--tab-player-on-end, #100606)) !important;
}

/* Tab link hover/active gradient via theme variables */
.tab-link:hover, .tab-link.active, .tab-link-shop:hover, .tab-link-shop.active {
  opacity: 1 !important;
  color: #fff !important;
  transition: all .3s !important;
  background: var(--tab-link-start, #f17d7d) !important;
  background: linear-gradient(180deg, var(--tab-link-start, #f17d7d), var(--tab-link-end, #863333)) !important;
}

/* PvP ranking cards background image override */
.ranking-top, .ranking-top-mini {
  background: url('/image/top.png') center center / cover no-repeat !important;
}

/* PvP winners photos: smaller and rounded corners */
.ranking-top img {
  width: 90% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
}