/* =================================================================
   DraxMU Web — Tema v5 (canalizando DNA da landing)
   Paleta cyan/purple/pink · Orbitron + Rajdhani · tier-rings · orbs
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;800&display=swap');

/* ============= TOKENS (iguais aos da landing) ============= */
:root {
  --bg-0: #0a0606;
  --bg-1: #120a08;
  --bg-2: #1a0f0b;
  --bg-panel: #170d0a;
  --ink: #ede4df;
  --ink-mute: #b39a8f;
  --ink-dim: #8a6f63;

  --primary: #ff5a1f;
  --primary-glow: #ff5a1f80;
  --secondary: #b01e10;
  --secondary-glow: #b01e1080;
  --accent: #f0c940;
  --accent-glow: #f0c94080;
  --warn: #f0c940;
  --success: #10b981;

  --discord: #5865f2;

  --grad-text: linear-gradient(100deg, #f0c940 0%, #ff6a4d 100%);
  --grad-primary: linear-gradient(135deg, #ff5a1f 0%, #f0c940 100%);
  --grad-accent: linear-gradient(135deg, #b01e10 0%, #ff5a1f 100%);
  --grad-panel: linear-gradient(180deg, rgba(255,90,31,.06), rgba(240,201,64,.03));

  --border-soft: rgba(255, 90, 31, 0.18);
  --border-bright: rgba(240, 201, 64, 0.40);

  --shadow-glow: 0 0 40px rgba(255, 90, 31, 0.18), 0 0 80px rgba(176, 30, 16, 0.12);
  --shadow-hard: 0 20px 60px rgba(0, 0, 0, 0.5);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.2,.8,.2,1);

  /* Legacy aliases pro código existente */
  --text: var(--ink);
  --text-muted: var(--ink-mute);
  --text-dim: var(--ink-dim);
  --text-bright: #fff;
  --gold: var(--warn);
  --cyan: var(--primary);
  --primary-bright: var(--secondary);
  --font-title: 'Cinzel', serif;
  --font-display: 'Cinzel', serif;
  --font-body: 'Rajdhani', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============= RESET ============= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: 'Rajdhani', system-ui, sans-serif;
  background: var(--bg-0);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .2s; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: 'Cinzel', serif; letter-spacing: -0.01em; margin: 0; line-height: 1.1; color: #fff; }
::selection { background: var(--secondary); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--grad-primary); border-radius: 10px; }

/* ============= FX globais ============= */
#dx-particles {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .55;
}
.dx-grid-floor {
  position: fixed; inset: 55% 0 -20% 0;
  background-image:
    linear-gradient(rgba(240,201,64,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,77,.14) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(700px) rotateX(60deg);
  transform-origin: top;
  z-index: 0; pointer-events: none;
  mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 80%);
}
.dx-aurora {
  position: fixed; top: 80px; left: -10%; right: -10%; height: 60vh;
  background:
    radial-gradient(50% 50% at 20% 30%, rgba(240,201,64,.28), transparent 70%),
    radial-gradient(40% 40% at 80% 20%, rgba(255,106,77,.28), transparent 70%),
    radial-gradient(35% 35% at 60% 60%, rgba(255,59,48,.22), transparent 70%);
  filter: blur(60px);
  z-index: 0; pointer-events: none;
  animation: dx-aurora 22s ease-in-out infinite alternate;
}
#dx-particles { top: 60px !important; }
@keyframes dx-aurora { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(5%,-4%) scale(1.08)} }

/* ============= PRELOADER ============= */
.dx-preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: radial-gradient(circle at center, #0a0530 0%, #030014 100%);
  display: grid; place-items: center;
  transition: opacity .6s ease, visibility .6s;
}
.dx-preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.dx-preloader-core { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.dx-preloader-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--primary); animation: dx-spin 1.2s linear infinite; }
.dx-preloader-ring:nth-child(2) { inset: 15%; border-top-color: var(--secondary); animation-duration: 1s; animation-direction: reverse; }
.dx-preloader-ring:nth-child(3) { inset: 30%; border-top-color: var(--accent); animation-duration: .8s; }
.dx-preloader-text {
  position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%);
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 4px;
  color: var(--ink-mute); text-transform: uppercase; white-space: nowrap;
}
@keyframes dx-spin { to { transform: rotate(360deg); } }

/* ============= NAV — floating pill ============= */
body { padding-top: 10px; }
.nav {
  position: sticky !important;
  top: 10px !important; left: 0; right: 0;
  z-index: 1000 !important;
  display: block !important;
  width: 100% !important;
  padding: 0 20px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 0 6px 0;
}
.nav-inner {
  position: relative;
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 8px 12px 8px 22px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  background: rgba(8, 2, 28, .78) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.nav-inner::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(240,201,64,.35), rgba(255,106,77,.35), rgba(255,59,48,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
  z-index: 1;
}
.nav-inner > * { position: relative; z-index: 2; }
.nav-logo {
  display: inline-flex !important; align-items: center !important;
  flex: 0 0 auto !important; text-decoration: none !important;
}
.nav-logo-swap {
  position: relative !important; display: inline-flex !important; align-items: center;
  min-width: 0 !important; height: 28px !important;
}
.nav-logo-swap span {
  position: static;
  display: inline-block;
  transform: none;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  font-size: 1.25rem; font-weight: 900; letter-spacing: 5px;
  text-transform: uppercase;
  background: var(--grad-text);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: dx-logo-grad 4s ease infinite;
  filter: drop-shadow(0 0 12px rgba(255,106,77,.35));
}
/* Esconde segundo span se houver (legacy) */
.nav-logo-swap span:nth-child(2) { display: none !important; }
@keyframes dx-logo-grad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.nav-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 3px !important;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px;
}
.nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .78rem !important; font-weight: 700 !important;
  letter-spacing: 1.2px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
  border-radius: 999px !important;
  transition: color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease) !important;
  background: transparent !important; border: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.nav-link svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; transition: opacity .2s, transform .25s var(--ease); }
.nav-link:hover,
nav.nav .nav-links .nav-link:hover,
body nav.nav .nav-link:hover,
body .nav-link:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  transform: translateY(-1px);
}
.nav-link:hover svg { opacity: 1; transform: scale(1.1) rotate(-4deg); }
.nav-link::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30);
  border-radius: 2px;
  transition: width .22s var(--ease), box-shadow .22s;
  pointer-events: none;
}
.nav-link:hover::before { width: 70%; box-shadow: 0 0 10px rgba(255,106,77,.55); }
.nav-link::after { display: none !important; }
.nav-link.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--grad-accent) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  box-shadow: 0 4px 16px rgba(255,106,77,.4);
}
.nav-link.active svg { opacity: 1; }

.nav-actions {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 10px !important;
  flex: 0 0 auto !important; margin: 0 0 0 auto !important;
}
.nav-online {
  position: relative;
  display: inline-flex !important; align-items: center !important; gap: 8px;
  padding: 8px 16px 8px 14px;
  font-family: 'Cinzel', serif;
  font-size: .7rem; font-weight: 700; color: #fff;
  letter-spacing: 1.2px;
  background: linear-gradient(135deg, rgba(249,115,22,.14), rgba(251,191,36,.08));
  border: 1px solid rgba(249,115,22,.40);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(249,115,22,.22);
  text-transform: uppercase;
}
.nav-online-count { color: #fbbf24; font-weight: 900; letter-spacing: .5px; min-width: 16px; text-align: center; font-family: 'JetBrains Mono', monospace; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.85); animation: dx-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes dx-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.55} }

/* Language switcher — overridea o globe btn criado pelo i18n.js (sem borda dupla) */
#lang-switcher {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-right: 6px !important;
}
#lang-globe-btn {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-family: 'Cinzel', serif !important;
  font-size: .7rem !important; font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: rgba(255,255,255,.8) !important;
  text-transform: uppercase;
  transition: all .2s !important;
}
#lang-globe-btn:hover {
  border-color: var(--border-bright) !important;
  background: rgba(240,201,64,.08) !important;
  color: #fff !important;
}
#lang-dropdown {
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-2)) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.75), 0 0 30px rgba(255,106,77,.15) !important;
  border-radius: 12px !important;
  overflow: hidden;
  padding: 4px !important;
}
#lang-dropdown .lang-opt-btn {
  font-family: 'Rajdhani', sans-serif !important;
  border-radius: 8px !important;
  transition: all .18s !important;
  margin: 0 !important;
}
#lang-dropdown .lang-opt-btn:hover { background: rgba(255,106,77,.18) !important; color: #fff !important; }

.btn-nav-login, .btn-nav-register {
  align-items: center !important; justify-content: center !important;
  padding: 9px 18px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .74rem !important; font-weight: 700 !important;
  letter-spacing: 1.2px !important; text-transform: uppercase !important;
  border-radius: 10px !important; text-decoration: none !important;
  transition: all .2s !important;
}
/* só defineine display se não tem inline style:none */
.btn-nav-login:not([style*="display:none"]):not([style*="display: none"]),
.btn-nav-register:not([style*="display:none"]):not([style*="display: none"]) { display: inline-flex; }
.btn-nav-login { color: #fff !important; background: transparent !important; border: 1px solid rgba(255,255,255,.14) !important; animation: none !important; }
.btn-nav-login:hover { background: rgba(255,255,255,.06) !important; border-color: var(--border-bright) !important; }
.btn-nav-register {
  color: #fff !important;
  background: var(--grad-accent) !important;
  border: 0 !important;
  box-shadow: 0 4px 18px rgba(255,106,77,.38) !important;
  animation: none !important;
}
.btn-nav-register:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,59,48,.5) !important; }

#nav-auth-btn {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #ff6a4d, #f0c940) 0 0 / 300% auto !important;
  animation: dx-logo-grad 4s linear infinite !important;
}
#nav-auth-drop { background: linear-gradient(160deg, var(--bg-panel), var(--bg-2)) !important; border-color: var(--border-soft) !important; }

/* Mobile DraxMU logo — shows only on mobile, animated gradient */
.dx-mobile-logo {
  display: none;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 3px;
  text-decoration: none;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #fbbf24, #ff3b30, #ff6a4d, #f0c940);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loginGrad 5s linear infinite;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .dx-mobile-logo { display: inline-block !important; margin-right: auto; }
}

.nav-hamburger { display: none !important; background: transparent !important; border: 0 !important; width: 40px; height: 40px; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; z-index: 100040; position: relative; }
.nav-hamburger span { display: block; height: 2px; width: 22px; margin: 0 auto; background: #fff; border-radius: 2px; transition: all .25s; }
.nav-hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2){ opacity: 0; }
.nav-hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 14px 24px 22px;
  background: linear-gradient(165deg, #0e0530 0%, #08021e 100%);
  border-top: 1px solid rgba(255,106,77,.3);
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 100050;
  box-shadow: 0 18px 40px rgba(0,0,0,.75), 0 0 40px rgba(255,106,77,.18);
}
.nav-mobile.open { display: flex !important; }
.nav-mobile-divider { height: 1px; background: rgba(255,255,255,.06); margin: 8px 0; }
.nav-mobile-online { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--ink-mute); font-size: .8rem; }
.nav-mobile-auth { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.nav-mobile-auth .mob-auth-btn { text-align: center; padding: 11px; }

@media (max-width: 1280px) {
  .nav-link span { display: none !important; }
  .nav-link { padding: 8px 10px !important; gap: 0 !important; }
  .nav-link svg { width: 16px !important; height: 16px !important; }
}
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .nav-actions > *:not(.nav-online) { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .nav-inner { padding: 8px 10px 8px 18px !important; gap: 20px !important; }
}

/* ============= HERO ============= */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid; place-items: center;
  padding: 80px 24px 140px;
  overflow: hidden;
  isolation: isolate;
}
.hero-animated-bg, .hero-overlay, .hero-runes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-animated-bg {
  background:
    radial-gradient(40vw 50vh at 15% 35%, var(--primary-glow), transparent 60%),
    radial-gradient(45vw 55vh at 85% 25%, var(--secondary-glow), transparent 60%),
    radial-gradient(40vw 45vh at 50% 90%, var(--accent-glow), transparent 65%);
  filter: blur(60px);
  opacity: .55;
  animation: dx-aurora 18s ease-in-out infinite alternate;
}
.hero-overlay { background: linear-gradient(180deg, transparent 0%, transparent 55%, var(--bg-0) 100%); }
.hero-runes {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.02) 2px 4px);
  mix-blend-mode: overlay;
  opacity: .4;
}

.hero-content {
  position: relative; z-index: 3;
  max-width: 1000px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.page-enter { animation: dx-page-enter .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes dx-page-enter { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: rgba(255,106,77,.1);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: #fff;
  margin-bottom: 32px;
  box-shadow: 0 0 30px rgba(255,106,77,.14);
}
.hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: dx-pulse 1.6s ease-in-out infinite; }

.hero-title {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(3.9rem, 11.7vw, 9.75rem) !important;
  font-weight: 900 !important;
  line-height: .92 !important;
  letter-spacing: -2px !important;
  color: #fff;
  margin: 0 0 22px !important;
  text-transform: uppercase;
  text-shadow: 0 0 60px rgba(240,201,64,.3);
}
.hero-title span {
  display: block;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,106,77,.4));
  letter-spacing: -1px;
}
.hero-subtitle { font-size: 1.1rem; color: var(--ink-mute); margin: 0 0 38px; letter-spacing: 1px; font-weight: 500; max-width: 600px; }

/* Countdown segmentado */
.hero-cd {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  margin: 0 0 36px;
}
.hero-cd-label {
  font-family: 'Cinzel', serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hero-cd-blocks {
  display: flex; align-items: flex-end; gap: 6px;
}
.hero-cd-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 20px 12px;
  min-width: 92px;
  background: rgba(8,2,28,.78);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.hero-cd-block::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,59,48,.5), transparent);
}
.hero-cd-block span {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,106,77,.35));
}
.hero-cd-block em {
  font-family: 'Cinzel', serif;
  font-size: .6rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  font-style: normal;
  color: rgba(255,255,255,.55);
}
.hero-cd-sep {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,.18);
  padding-bottom: 32px;
}
@media (max-width: 640px) {
  .hero-cd-block { min-width: 70px; padding: 12px 12px 10px; }
  .hero-cd-block span { font-size: 1.9rem; }
  .hero-cd-sep { font-size: 1.4rem; padding-bottom: 26px; }
  .hero-cd-blocks { gap: 3px; }
}

.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }

/* Hero trust tags */
.hero-tags {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
  max-width: 720px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: .64rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  transition: border-color .2s, color .2s, transform .2s;
}
.hero-tag:hover { border-color: var(--border-bright); color: #fff; transform: translateY(-1px); }
.hero-tag svg { color: var(--accent); flex-shrink: 0; opacity: .9; }

/* Scroll indicator */
.hero-scroll {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
  opacity: .7;
  transition: opacity .25s, transform .25s;
  animation: dx-float-y 2.8s ease-in-out infinite;
}
.hero-scroll:hover { opacity: 1; transform: translateX(-50%) translateY(-3px); }
.hero-scroll-label {
  font-family: 'Cinzel', serif;
  font-size: .58rem; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hero-scroll-mouse {
  width: 22px; height: 36px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 14px;
  position: relative;
}
.hero-scroll-wheel {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 8px;
  background: linear-gradient(180deg, var(--accent), var(--secondary));
  border-radius: 3px;
  animation: dx-scroll-wheel 1.6s ease-in-out infinite;
}
@keyframes dx-scroll-wheel {
  0% { opacity: 1; transform: translate(-50%, 0); }
  60% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}
@keyframes dx-float-y {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

/* Buttons */
.btn, .btn-launcher, .hero-btn-secondary, .hero-btn-discord, .btn-discord {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif; font-size: .84rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.btn-launcher { background: var(--grad-primary) !important; color: #fff !important; box-shadow: 0 8px 26px rgba(240,201,64,.4) !important; }
.btn-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,106,77,.5) !important; filter: none !important; color: #fff !important; }
.hero-btn-secondary { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; }
.hero-btn-secondary:hover { background: rgba(255,106,77,.1) !important; border-color: var(--border-soft) !important; color: #fff !important; }
.hero-btn-discord, .btn-discord { background: linear-gradient(135deg, var(--discord), #7c3aed); color: #fff; box-shadow: 0 8px 26px rgba(88,101,242,.42); }
.hero-btn-discord:hover, .btn-discord:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(88,101,242,.55); }
.btn { background: var(--grad-accent); color: #fff; }
.btn.btn-outline { background: transparent !important; border-color: rgba(255,255,255,.18) !important; color: #fff !important; }
.btn.btn-outline:hover { border-color: var(--border-bright) !important; background: rgba(240,201,64,.08) !important; color: #fff !important; }
.btn.btn-sm { padding: 10px 18px; font-size: .72rem; }
.btn-primary { background: var(--grad-primary); color: #fff; }

/* ============= BASE SECTIONS (padrão landing) ============= */
.home-sections-wrap { position: relative; z-index: 1; display: block !important; }
.section {
  position: relative;
  padding: 120px 40px;
  z-index: 1;
}
.section-dark, .section-alt {
  background:
    linear-gradient(180deg, transparent, rgba(255,106,77,.04), transparent),
    linear-gradient(180deg, var(--bg-0), var(--bg-1), var(--bg-0));
}
.container { max-width: 1300px; margin: 0 auto; position: relative; }

/* Section head — padrão landing: kicker numerado */
.section-header { text-align: center; margin-bottom: 60px; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-kicker {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.section-kicker > span:first-child {
  display: inline-block;
  min-width: 28px;
  padding: 4px 10px;
  background: var(--grad-accent);
  color: #fff;
  border-radius: 6px;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 0 4px 14px rgba(255,106,77,.35);
}
.section-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(240,201,64,.08);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  font-family: 'Cinzel', serif; font-size: .7rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}
.section-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #fff;
  margin: 0 0 14px;
}
.section-title span, .section-title .accent {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-line { display: none; }
.section-desc { color: var(--ink-mute); font-size: 1rem; line-height: 1.7; max-width: 640px; margin: 14px auto 0; }

.text-center { text-align: center; }
.mt-24 { margin-top: 24px; } .mt-16 { margin-top: 16px; }

/* Orbs decorativos (reaproveita prereg-orb) */
.section-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(80px);
}
.section-orb.a { top: 10%; left: -10%; width: 500px; height: 500px; background: var(--primary-glow); opacity: .25; }
.section-orb.b { bottom: 10%; right: -10%; width: 400px; height: 400px; background: var(--accent-glow); opacity: .3; }
.section-orb.c { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 300px; background: var(--secondary-glow); opacity: .2; }

/* ============= LIVE TERMINAL ============= */
#live-terminal { padding: 100px 24px 60px; position: relative; }
.lt-wrap {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  position: relative; z-index: 1;
}
@media (max-width: 960px) { .lt-wrap { grid-template-columns: 1fr; } }
.lt-terminal {
  position: relative;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  min-height: 460px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.lt-terminal::before {
  content: ''; position: absolute; inset: -1px;
  background: var(--grad-text);
  border-radius: var(--radius-lg);
  opacity: 0;
  z-index: -1;
  transition: opacity .4s;
}
.lt-terminal:hover::before { opacity: .3; }

.lt-term-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: rgba(0,0,0,.42);
  border-bottom: 1px solid var(--border-soft);
}
.lt-term-dots { display: inline-flex; gap: 6px; }
.lt-term-dots span { width: 10px; height: 10px; border-radius: 50%; background: #3a2c5a; }
.lt-term-dots span:nth-child(1) { background: var(--accent); }
.lt-term-dots span:nth-child(2) { background: var(--warn); }
.lt-term-dots span:nth-child(3) { background: var(--success); }
.lt-term-title { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--ink-mute); letter-spacing: 1px; margin-left: 6px; }
.lt-term-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: 2.5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(239,68,68,.14); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.32);
  font-weight: 700;
}
.lt-term-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: dx-pulse 1.3s ease-in-out infinite; }
.lt-term-body { position: relative; flex: 1; padding: 20px 26px; min-height: 380px; overflow: hidden; font-family: 'JetBrains Mono', monospace; font-size: 13px; }

#hero-chat-feed {
  position: absolute !important;
  inset: 20px 26px !important;
  width: auto !important; max-width: none !important; min-width: 0 !important;
  top: auto !important; right: auto !important; bottom: 20px !important; left: 26px !important;
  transform: none !important; max-height: none !important;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important; line-height: 1.5 !important;
  pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
.hero-chat-msg { opacity: 0; color: rgba(230,241,255,.88); padding: 2px 0; animation: heroChatFadeIn .4s ease-out forwards; }
.hero-chat-msg.leaving { animation: heroChatFadeOut .35s ease-in forwards; }
.hero-chat-msg .nick { color: var(--secondary); font-weight: 600; }
.hero-chat-msg.nick-vip .nick { color: var(--warn); }
.hero-chat-msg.nick-guild .nick { color: var(--primary); }
.hero-chat-msg.nick-gm .nick { color: var(--success); font-weight: 700; }
.hero-chat-msg.system { color: rgba(251,191,36,.82); font-style: italic; }
.hero-chat-msg.system::before { content: '◆ '; opacity: .7; }
.hero-chat-msg .sep { color: var(--accent); opacity: .6; }
@keyframes heroChatFadeIn { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:.96;transform:translateY(0)} }
@keyframes heroChatFadeOut { 0%{opacity:.96} 100%{opacity:0;transform:translateY(-6px)} }

.lt-side { display: flex; flex-direction: column; gap: 16px; }
.lt-stat {
  position: relative;
  padding: 24px 26px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s;
}
.lt-stat:hover { transform: translateY(-4px); border-color: var(--border-bright); }
.lt-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-accent); }
.lt-stat-lbl { font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; font-weight: 700; }
.lt-stat-val { font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: 1px; }
.lt-stat-val.accent { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lt-stat-sub { margin-top: 8px; font-size: .78rem; color: var(--ink-mute); }

/* ============= RANKING — #1 tier-card + lista ============= */
.rank-wrap { max-width: 1300px; margin: 0 auto; position: relative; z-index: 1; }
.rank-tabs {
  display: inline-flex;
  padding: 5px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  margin: 0 auto 40px;
}
.rank-tabs-wrap { display: flex; justify-content: center; }
.rank-tab {
  padding: 10px 26px;
  font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent; border: 0;
  border-radius: 999px;
  cursor: pointer; transition: all .25s;
}
.rank-tab.active {
  color: #fff;
  background: var(--grad-accent);
  box-shadow: 0 6px 22px rgba(255,106,77,.38);
}

.rank-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  align-items: start;
}
@media (max-width: 960px) { .rank-layout { grid-template-columns: 1fr; } }

/* #1 tier-card — palette accent (pink/purple), não mais gold */
.rank-tier {
  position: relative;
  padding: 48px 40px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  text-align: center;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.rank-tier:hover { transform: translateY(-6px); border-color: var(--border-bright); box-shadow: var(--shadow-glow); }
.rank-tier::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,106,77,.22), transparent 55%),
    radial-gradient(circle at 70% 100%, rgba(255,59,48,.16), transparent 55%);
  pointer-events: none;
}
.rank-tier-ring {
  width: 180px; height: 180px;
  margin: 0 auto 24px;
  position: relative;
  display: grid; place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(240,201,64,.5), transparent, rgba(255,59,48,.5), transparent, rgba(255,106,77,.5), transparent);
  padding: 3px;
  animation: dx-spin 20s linear infinite;
}
.rank-tier-ring::before {
  content: ''; position: absolute; inset: 3px;
  background: var(--bg-panel);
  border-radius: 50%;
}
.rank-tier-crown {
  position: relative; z-index: 1;
  font-size: 4.5rem;
  animation: none;
  filter: drop-shadow(0 0 20px rgba(255,106,77,.6));
}
.rank-tier-label {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255,59,48,.12);
  border: 1px solid var(--border-soft);
  color: var(--accent);
  font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700;
  border-radius: 999px;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.rank-tier-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.05;
  margin-bottom: 14px;
  cursor: pointer;
  position: relative; z-index: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,106,77,.35));
}
.rank-tier-meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  position: relative; z-index: 1;
}
.rank-tier-meta li {
  padding: 6px 14px;
  background: rgba(3,0,20,.55);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: .82rem;
  color: var(--ink);
}
.rank-tier-meta li.gold { color: var(--primary); border-color: var(--border-bright); }
.rank-tier-meta li.accent { color: var(--accent); border-color: rgba(255,59,48,.3); }

/* Lista 2-10 */
.rank-side-list {
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}
.rank-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 8px;
  border-radius: 10px;
  transition: background .2s, transform .2s;
}
.rank-row + .rank-row { border-top: 1px solid var(--border-soft); }
.rank-row:hover { background: rgba(255,106,77,.12); transform: translateX(3px); }
.rank-row .r-pos {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem; font-weight: 900;
  color: var(--ink-dim);
  text-align: right;
  letter-spacing: -1px;
}
.rank-row:first-of-type .r-pos { color: #c0c0c0; font-size: 1.7rem; }
.rank-row:nth-of-type(2) .r-pos { color: #cd7f32; font-size: 1.5rem; }
.rank-row .r-name { font-family: 'Cinzel', serif; font-size: 1rem; color: #fff; font-weight: 800; cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .2s; }
.rank-row .r-name:hover { border-bottom-color: var(--accent); }
.rank-row .r-meta { font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--ink-mute); display: flex; gap: 8px; align-items: center; }
.rank-row .r-meta .lv { color: var(--primary); }
.rank-row .r-meta .ml { color: var(--warn); }

/* Home-specific: esconde rank-table e podium apenas na home */
#home-ranking .rank-table, #home-ranking .podium, #home-ranking .ranking-grid { display: none !important; }

/* ============= RANKING PAGE (ranking.html) ============= */
.rank-hero {
  position: relative;
  padding: 80px 24px 60px;
  text-align: center;
  margin-bottom: 20px;
}
.rank-hero h1, .rank-hero h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 10px;
}
.rank-hero p { color: var(--ink-mute); font-size: 1rem; max-width: 640px; margin: 0 auto; }
.ranking-page { max-width: 1300px; margin: 0 auto; padding: 0 20px 60px; }

/* Control bar (tabs + search + refresh) */
.rank-control-bar {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 14px;
  padding: 10px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin-bottom: 26px;
  position: sticky; top: 80px; z-index: 5;
}
.rank-tabs-group {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px;
  flex: 1 1 auto;
}
.rank-tab-new {
  position: relative;
  padding: 8px 14px;
  font-family: 'Cinzel', serif;
  font-size: .7rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: transparent; border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.rank-tab-new:hover { color: #fff; background: rgba(255,106,77,.14); }
.rank-tab-new.active {
  color: #fff;
  background: var(--grad-accent);
  box-shadow: 0 4px 14px rgba(255,106,77,.35);
}
.rank-search-wrap {
  position: relative;
  display: inline-flex; align-items: center;
  min-width: 260px;
}
.rank-search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-dim);
  pointer-events: none;
}
.rank-search-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: rgba(3,0,20,.6);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.rank-search-input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(3,0,20,.85);
  box-shadow: 0 0 0 3px rgba(240,201,64,.15);
}
.rank-search-input::placeholder { color: var(--ink-dim); }
.rank-refresh-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all .2s;
}
.rank-refresh-btn:hover {
  border-color: var(--border-bright);
  background: rgba(240,201,64,.08);
  transform: rotate(90deg);
}

/* Tables */
.rank-table-wrap, .table-wrap {
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 8px;
  overflow-x: auto;
}
.rank-table, .rank-full-table, .rank-panel {
  display: table !important;
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.rank-table thead tr {
  background: rgba(255,106,77,.06);
}
.rank-table th {
  font-family: 'Cinzel', serif;
  font-size: .68rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.rank-table td {
  padding: 12px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
  font-family: 'Rajdhani', sans-serif;
}
.rank-table tbody tr { transition: background .18s; }
.rank-table tbody tr:hover { background: rgba(255,106,77,.08); }
.rank-table tbody tr:last-child td { border-bottom: 0; }
.rank-table tbody tr:nth-child(1) td:first-child { color: #ffd700; font-weight: 900; font-size: 1.05rem; }
.rank-table tbody tr:nth-child(2) td:first-child { color: #c0c0c0; font-weight: 900; font-size: 1rem; }
.rank-table tbody tr:nth-child(3) td:first-child { color: #cd7f32; font-weight: 900; font-size: 1rem; }
.rank-table td:first-child { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--ink-dim); }

@media (max-width: 700px) {
  .col-hide-xs { display: none !important; }
}
@media (max-width: 900px) {
  .col-hide-sm { display: none !important; }
}

/* Force DraxMU colors over ranking inline red/orange legacy styles */
.rank-tab-new::after, .rank-tab-new.active::after { display: none !important; }
.rank-tab-new.active {
  background: var(--grad-accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(255,106,77,.35) !important;
}
.rank-tab-new[data-tab="events"] { color: rgba(255,255,255,.55) !important; }
.rank-tab-new[data-tab="pvp"]:not(.active) { color: rgba(255,255,255,.55) !important; }
.rank-tab-new[data-tab="pvp"]:not(.active) { color: rgba(255,255,255,.55) !important; }
.rank-refresh-btn:hover {
  color: var(--primary) !important;
  background: rgba(240,201,64,.1) !important;
}
.char-popup-close:hover {
  background: rgba(255,106,77,.2) !important;
  border-color: var(--primary) !important;
}
.char-link:hover { color: var(--primary) !important; }

/* Event sub-tabs */
.event-sub-tab {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
  padding: 6px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  justify-content: center;
}
.event-sub-btn {
  padding: 8px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent; border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}
.event-sub-btn {
  border: 1px solid transparent !important;
}
.event-sub-btn:hover {
  color: #fff !important;
  background: rgba(255,106,77,.14) !important;
  border-color: var(--border-soft) !important;
}
.event-sub-btn.active {
  color: #fff !important;
  background: var(--grad-accent) !important;
  box-shadow: 0 4px 14px rgba(255,106,77,.35) !important;
  border-color: transparent !important;
}

/* Race Milestones promo banner — DraxMU colors */
#race-promo-banner > a > div {
  background: linear-gradient(135deg, rgba(240,201,64,.14), rgba(255,106,77,.1) 55%, rgba(255,59,48,.08)) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: 0 10px 40px rgba(255,106,77,.15), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#race-promo-banner > a > div > div:first-child {
  background: radial-gradient(circle, rgba(255,106,77,.32), transparent 60%) !important;
}
#race-banner-badge {
  color: var(--primary) !important;
  background: rgba(240,201,64,.1) !important;
  border: 1px solid var(--border-bright) !important;
}
#race-banner-title {
  font-family: 'Cinzel', serif !important;
}
#race-banner-cta {
  background: var(--grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(255,106,77,.4) !important;
}
/* Race tab highlight */
.rank-tab-new[data-tab="race"] {
  color: rgba(240,201,64,.7) !important;
}
.rank-tab-new[data-tab="race"]:hover { color: var(--primary) !important; }
.rank-tab-new[data-tab="race"].active {
  color: #fff !important;
  background: var(--grad-accent) !important;
}
.rank-tab-new[data-tab="race"] .race-new-badge {
  background: var(--grad-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(255,106,77,.4) !important;
}

/* ============= NEWS — feature + side magazine (landing-like) ============= */
.news-magazine {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 20px;
  max-width: 1300px; margin: 0 auto;
  position: relative; z-index: 1;
}
@media (max-width: 900px) { .news-magazine { grid-template-columns: 1fr; } }
.news-feature {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
}
.news-feature:hover { transform: translateY(-6px); border-color: var(--border-bright); box-shadow: var(--shadow-glow), var(--shadow-hard); }
.news-feature-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s;
  animation: dx-kenburns 22s ease-in-out infinite alternate;
}
.news-feature:hover .news-feature-img { transform: scale(1.06); animation-play-state: paused; }
@keyframes dx-kenburns {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2%, -1.5%); }
}
.news-feature-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(3,0,20,.96) 100%); }
.news-feature-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 36px; z-index: 2; }
.news-feature-cat {
  display: inline-block;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(255,59,48,.22); border: 1px solid rgba(255,59,48,.45);
  font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: #fff; font-weight: 700;
  margin-bottom: 18px;
}
.news-feature-title { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 12px; text-shadow: 0 2px 20px rgba(0,0,0,.75); }
.news-feature-excerpt { color: rgba(230,241,255,.8); font-size: .95rem; line-height: 1.65; max-width: 620px; }
.news-feature-date { margin-top: 14px; font-family: 'Cinzel', serif; font-size: .7rem; color: rgba(255,255,255,.55); letter-spacing: 2px; text-transform: uppercase; }

.news-side { display: grid; gap: 14px; }
.news-side-card {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s;
}
.news-side-card:hover { transform: translateX(4px); border-color: var(--border-bright); }
.news-side-img { width: 92px; height: 92px; border-radius: var(--radius-sm); background-size: cover; background-position: center; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; font-size: 2rem; border: 1px solid var(--border-soft); }
.news-side-body { display: flex; flex-direction: column; justify-content: center; }
.news-side-cat { font-family: 'Cinzel', serif; font-size: .6rem; color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; }
.news-side-title { font-family: 'Cinzel', serif; font-size: .95rem; color: #fff; font-weight: 700; line-height: 1.25; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-side-date { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--ink-dim); }
.news-empty { text-align: center; padding: 60px 20px; color: var(--ink-mute); font-size: .95rem; grid-column: 1/-1; }
/* Home usa magazine layout — esconde o grid legacy só na home */
#home-news > .container > .news-grid { display: none !important; }

/* News page — grid default com news-card padronizado */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  max-width: 1300px; margin: 0 auto;
}
.news-card {
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.news-card:hover { transform: translateY(-5px); border-color: var(--border-bright); box-shadow: var(--shadow-glow); }
.news-card-img { width: 100%; height: 190px; object-fit: cover; display: block; }
.news-card-img-placeholder {
  width: 100%; height: 190px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(160deg, rgba(255,106,77,.12), rgba(255,59,48,.08));
  border-bottom: 1px solid var(--border-soft);
}
.news-card-body { padding: 20px 22px; }
.news-card-cat {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,59,48,.14);
  border: 1px solid var(--border-accent);
  font-family: 'Cinzel', serif;
  font-size: .62rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.news-card-title { font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.news-card-excerpt { font-size: .88rem; color: var(--ink-mute); line-height: 1.55; margin-bottom: 12px; }
.news-card-date { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--ink-dim); letter-spacing: .5px; }

/* ============= EVENTS — ROADMAP TIMELINE (style da landing) ============= */
.events-roadmap {
  position: relative;
  max-width: 960px; margin: 0 auto;
  padding-left: 60px;
}
@media (max-width: 640px) { .events-roadmap { padding-left: 40px; } }
.events-roadmap::before {
  content: '';
  position: absolute;
  left: 24px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary), var(--accent));
  opacity: .4;
}
.ev-rm-item {
  position: relative;
  padding: 22px 26px;
  margin-bottom: 18px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}
.ev-rm-item:hover { transform: translateX(6px); border-color: var(--border-bright); box-shadow: var(--shadow-glow); }
.ev-rm-item::before {
  content: '';
  position: absolute;
  left: -41px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ev-color, var(--accent));
  box-shadow: 0 0 0 4px var(--bg-0), 0 0 20px var(--ev-color, var(--accent));
}
@media (max-width: 640px) { .ev-rm-item::before { left: -29px; } }
.ev-rm-item.imminent::before { animation: dx-pulse-ring 1.6s ease-in-out infinite; }
@keyframes dx-pulse-ring { 0%,100%{box-shadow:0 0 0 4px var(--bg-0),0 0 20px var(--success)} 50%{box-shadow:0 0 0 4px var(--bg-0),0 0 30px var(--success),0 0 0 8px rgba(16,185,129,.3)} }
.ev-rm-icon {
  width: 56px; height: 56px; border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: 1.7rem;
  background: rgba(3,0,20,.55);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.ev-rm-info { min-width: 0; }
.ev-rm-name { font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: .5px; line-height: 1.1; margin-bottom: 4px; }
.ev-rm-meta { font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-mute); }
.ev-rm-cd {
  display: flex; gap: 4px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.ev-rm-cd .cd-val {
  font-size: 1.1rem; font-weight: 800; color: #fff;
  padding: 6px 10px; min-width: 42px; text-align: center;
  background: rgba(3,0,20,.5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.ev-rm-cd .cd-val.imminent { color: var(--success); border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.1); }
.ev-rm-cd .cd-sep { font-size: .88rem; color: var(--ink-dim); }
.ev-rm-cd .cd-now {
  font-family: 'Cinzel', serif;
  padding: 7px 18px;
  background: var(--success);
  color: #fff;
  border-radius: 999px;
  font-size: .7rem; letter-spacing: 2px; font-weight: 800; text-transform: uppercase;
  box-shadow: 0 0 24px rgba(16,185,129,.6);
}
@media (max-width: 640px) {
  .ev-rm-item { grid-template-columns: auto 1fr; gap: 14px; padding: 18px 20px; }
  .ev-rm-cd { grid-column: 1/-1; justify-content: flex-start; margin-top: 4px; }
}

.events-grid-wrap { position: relative; }
.events-grid-wrap.collapsed { max-height: var(--ev-collapsed-h, 540px); overflow: hidden; }
.events-fade { display: none; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(transparent, var(--bg-0)); pointer-events: none; }
.events-grid-wrap.collapsed .events-fade { display: block; }
.events-expand-btn {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--primary);
  font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 11px 34px; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s; font-weight: 700;
}
.events-expand-btn:hover { background: rgba(240,201,64,.1); color: #fff; }
#events-expand-btn.hidden { display: none; }
.events-grid { display: none !important; }

/* ============= STREAMERS — featured + grid ============= */
.streamers-layout {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px;
  position: relative; z-index: 1;
}
@media (max-width: 900px) { .streamers-layout { grid-template-columns: 1fr; } }
.streamer-featured {
  position: relative;
  min-height: 400px;
  padding: 36px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-hard);
}
.streamer-featured::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 90% 0%, rgba(255,106,77,.3), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(255,59,48,.24), transparent 60%);
  pointer-events: none;
}
.streamer-featured-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.42);
  color: #fca5a5;
  font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700;
  width: fit-content; margin-bottom: 14px;
  position: relative; z-index: 1;
}
.streamer-featured-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: dx-pulse 1.3s ease-in-out infinite; }
.streamer-featured-head { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; margin-bottom: 16px; }
.streamer-featured-avatar { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 30px rgba(255,59,48,.6); object-fit: cover; flex-shrink: 0; }
.streamer-featured-name { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: #fff; margin-bottom: 4px; line-height: 1.05; letter-spacing: -1px; }
.streamer-featured-bio { color: rgba(230,241,255,.8); font-size: .94rem; line-height: 1.6; position: relative; z-index: 1; margin-bottom: 20px; }
.streamer-featured-ctas { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }

.streamers-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.streamer-card {
  position: relative;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  text-align: center;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.streamer-card:hover { transform: translateY(-4px); border-color: var(--border-bright); box-shadow: var(--shadow-glow); }
.streamer-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; border: 2px solid var(--border-soft); object-fit: cover; }
.streamer-name { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: -.3px; }
.streamer-bio { font-size: .78rem; color: var(--ink-mute); min-height: 38px; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.streamer-links { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.streamer-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-family: 'Cinzel', serif; font-size: .62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--border-soft); background: rgba(255,255,255,.03); color: #fff; text-decoration: none; transition: all .2s; }
.streamer-btn:hover { background: rgba(255,106,77,.22); border-color: var(--accent); }
.streamer-btn.twitch { background: rgba(145,70,255,.14); border-color: rgba(145,70,255,.42); }
.streamer-btn.youtube { background: rgba(255,0,0,.12); border-color: rgba(255,0,0,.4); }
.streamer-coupon { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(251,191,36,.1); border: 1px dashed var(--warn); color: var(--warn); font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700; letter-spacing: 1px; }

@media (max-width: 500px) { .streamers-grid-4 { grid-template-columns: 1fr; } }

/* ============= GUILD WARS — trophy tier cards ============= */
.wars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1300px; margin: 0 auto;
  position: relative; z-index: 1;
  align-items: stretch;
}
.wars-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.wars-grid.one { grid-template-columns: 1fr; max-width: 520px; }
@media (max-width: 900px) { .wars-grid, .wars-grid.two { grid-template-columns: 1fr; max-width: 560px; } }

.war-card {
  position: relative;
  padding: 40px 30px 32px;
  text-align: center;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
  display: flex; flex-direction: column;
}
.war-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--war-color) 25%, transparent), transparent 70%);
  pointer-events: none;
}
.war-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(30% 30% at 50% 100%, color-mix(in srgb, var(--war-color) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.war-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--war-color) 55%, transparent); box-shadow: var(--shadow-hard), 0 0 50px color-mix(in srgb, var(--war-color) 26%, transparent); }

/* Big trophy ring */
.war-head-icon {
  position: relative;
  width: 150px; height: 150px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}
.war-head-icon::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--war-color) 75%, transparent) 90deg, transparent 180deg, color-mix(in srgb, var(--war-color) 40%, transparent) 270deg, transparent 360deg);
  animation: dx-spin 14s linear infinite;
  z-index: -1;
}
.war-head-icon::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--war-color) 18%, transparent), transparent 65%),
    var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--war-color) 30%, transparent);
}
.war-head-icon > span, .war-head-icon-emoji {
  position: relative; z-index: 1;
  font-size: 3.6rem;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--war-color) 70%, transparent));
  line-height: 1;
}

.war-head-name {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--war-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--war-color) 38%, transparent);
  color: var(--war-color);
  font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.war-guild {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 900; letter-spacing: -.5px;
  line-height: 1.1;
  margin-bottom: 10px;
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #fff 0%, var(--war-color) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.war-middle { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.war-master {
  font-family: 'Rajdhani', sans-serif; font-size: .9rem; color: var(--ink-mute);
  margin-bottom: 18px;
}
.war-right {
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  position: relative; z-index: 1;
  margin-top: auto;
}
.war-head-schedule {
  font-family: 'Cinzel', serif; font-size: .66rem; color: #fff; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.war-head-schedule::before { content: '🕐'; opacity: .7; }
.war-last { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--ink-dim); letter-spacing: 1px; }
.war-crown, .war-body { display: none; }
.war-body-empty { color: var(--ink-mute); text-align: center; padding: 20px 0; }

/* ============= CTA — discord-hero pattern ============= */
#home-cta .container { padding: 0; }
.cta-banner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 80px 60px;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255,106,77,.22), transparent 60%),
    radial-gradient(50% 70% at 50% 100%, rgba(255,59,48,.22), transparent 60%),
    var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-glow), var(--shadow-hard);
}
.cta-banner::before {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent), var(--secondary), var(--primary));
  background-size: 300% 300%;
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: .25;
  animation: dx-logo-grad 8s ease infinite;
}
@media (max-width: 768px) { .cta-banner { padding: 50px 28px; } }

.cta-icon-wrap {
  position: relative;
  width: 130px; height: 130px;
  margin: 0 auto 28px;
  display: grid; place-items: center;
}
.cta-icon-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  animation: dx-spin 20s linear infinite;
}
.cta-icon-ring:nth-child(2) { inset: 15%; border-color: var(--border-bright); animation-duration: 14s; animation-direction: reverse; }
.cta-icon-bg {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-accent);
  color: #fff;
  font-size: 2.2rem;
  box-shadow: 0 0 40px rgba(255,106,77,.5);
  font-family: 'Cinzel', serif; font-weight: 900;
}

.cta-kicker { display: inline-flex; padding: 6px 16px; border-radius: 999px; background: rgba(240,201,64,.08); border: 1px solid var(--border-bright); color: var(--primary); font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; margin-bottom: 22px; }
.cta-split-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: 14px;
}
.cta-split-brand { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cta-split-text { color: var(--ink-mute); font-size: 1.05rem; line-height: 1.7; margin: 0 auto 10px; max-width: 640px; }
.cta-split-hint { font-size: .82rem; color: var(--ink-dim); margin: 0 auto 26px; max-width: 560px; }
.cta-split-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }

/* Stats row abaixo */
.cta-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 720px; margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 640px) { .cta-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.cta-stat { text-align: center; }
.cta-stat-val {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 900;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -.5px;
  margin-bottom: 6px;
}
.cta-stat-lbl { font-family: 'Rajdhani', sans-serif; font-size: .84rem; color: var(--ink-mute); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }

/* Hidden legacy */
.cta-feats, #cta-mig-grid, .cta-bignum, .cta-bignum-sub { display: none !important; }

/* ============= FOOTER ============= */
.footer-simple { position: relative; z-index: 1; padding: 60px 24px 40px; border-top: 1px solid var(--border-soft); background: linear-gradient(180deg, transparent, rgba(3,0,20,.8)); }
.footer-simple-inner { max-width: 1200px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-simple-links { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.footer-simple-links a { font-family: 'Cinzel', serif; font-size: .74rem; color: var(--ink-mute); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: color .2s; }
.footer-simple-links a:hover { color: var(--accent); }
.footer-simple-copy { color: var(--ink-mute); font-size: .82rem; letter-spacing: .4px; }

/* ============= LOADER / MODAL ============= */
.loader { display: inline-block; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--accent); border-radius: 50%; animation: dx-spin .8s linear infinite; }
.modal-overlay, .authm-overlay, .auth-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.76); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open, .authm-overlay.open, .auth-modal-overlay.open { display: flex; }
.modal-content, .authm, .auth-modal { background: linear-gradient(155deg, var(--bg-panel), var(--bg-2)); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 32px; max-width: 480px; width: 100%; position: relative; box-shadow: var(--shadow-hard), 0 0 40px rgba(255,106,77,.14); }
.modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid var(--border-soft); color: var(--ink-mute); border-radius: 50%; cursor: pointer; font-size: .9rem; transition: all .2s; }
.modal-close:hover { background: rgba(255,59,48,.14); color: #fff; border-color: var(--border-accent); }
.modal-title { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 16px; letter-spacing: -.3px; }
#char-popup, #guild-popup { backdrop-filter: blur(12px) !important; background: rgba(3,0,20,.84) !important; }
#char-popup > div, #guild-popup > div { background: linear-gradient(155deg, var(--bg-panel), var(--bg-2)) !important; border-color: var(--border-soft) !important; }


/* ============= Kill stale layout.css animations / classes ============= */
.section .section-header, .section .card, .section .news-card, .section .events-grid > *, .section .rank-table, .section .section-desc, .hero-content > * { opacity: 1 !important; animation-duration: 0s !important; }
.home-sections-wrap > section.hero { order: initial !important; }
.ranking-grid, .card { display: revert !important; }

/* ============= RESPONSIVE ============= */
@media (max-width: 768px) {
  .section { padding: 80px 20px; }
  .hero { min-height: 82vh; padding: 60px 20px 40px; }
  .section-header { margin-bottom: 44px; }
  .rank-tier { padding: 36px 24px; }
}

/* ============= DOWNLOAD PAGE ============= */
.dl-hero-stat {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 10px 20px;
}
.dl-hero-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem; font-weight: 900;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -.5px;
  line-height: 1;
}
.dl-hero-stat-lbl {
  font-family: 'Cinzel', serif;
  font-size: .64rem; color: var(--ink-mute);
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  margin-top: 5px;
}
.dl-section-hdr {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem; font-weight: 800;
  color: #fff;
  margin: 42px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.dl-section-hdr::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 70px; height: 2px;
  background: var(--grad-accent);
}
.dl-warn {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: rgba(251,191,36,.07);
  border: 1px solid rgba(251,191,36,.25);
  border-left: 3px solid var(--warn);
  border-radius: 12px;
  font-size: .88rem; color: var(--ink);
}
.dl-warn-icon { font-size: 1.1rem; flex-shrink: 0; }

/* Steps timeline */
.dl-steps { display: flex; flex-direction: column; gap: 0; margin: 0 0 20px; }
.dl-step {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 18px 0;
  align-items: flex-start;
}
.dl-step-line {
  position: absolute;
  left: 22px; top: 52px; bottom: -10px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary), var(--accent));
  opacity: .4;
}
.dl-step-num {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-accent);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem; font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(255,106,77,.4);
  position: relative; z-index: 1;
}
.dl-step-num.gold { background: linear-gradient(135deg, var(--warn), #f97316); box-shadow: 0 4px 18px rgba(251,191,36,.4); color: #1a0a00; }
.dl-step-body { padding-top: 6px; }
.dl-step-title { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.dl-step-desc { color: var(--ink-mute); font-size: .88rem; line-height: 1.6; }

/* Specs */
.dl-specs {
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 6px;
}
.dl-spec-row {
  display: grid;
  grid-template-columns: 32px 120px 1fr;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background .18s;
}
.dl-spec-row + .dl-spec-row { border-top: 1px solid var(--border-soft); }
.dl-spec-row:hover { background: rgba(255,106,77,.06); }
.dl-spec-icon { font-size: 1.05rem; text-align: center; }
.dl-spec-label { font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-mute); }
.dl-spec-val { color: var(--ink); font-family: 'Rajdhani', sans-serif; font-size: .92rem; }

/* Download list cards (populated via JS) */
#dl-full-list > div, #dl-driver-list > div, #dl-other-list > div {
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: border-color .2s, transform .2s;
}
#dl-full-list > div:hover, #dl-driver-list > div:hover, #dl-other-list > div:hover {
  border-color: var(--border-bright);
  transform: translateX(3px);
}

/* ============= AUTH PAGE (login / register) ============= */
.auth-page {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 180px);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px 80px;
}
.auth-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  background: var(--grad-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard), var(--shadow-glow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.auth-box::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(240,201,64,.35), rgba(255,106,77,.35), rgba(255,59,48,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .5;
}
.auth-logo {
  text-align: center; margin-bottom: 26px;
}
.auth-title {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem; font-weight: 900;
  color: #fff; text-align: center;
  margin: 0 0 8px;
  letter-spacing: -.5px;
}
.auth-sub {
  color: var(--ink-mute);
  text-align: center; font-size: .94rem;
  margin: 0 0 28px;
}
.auth-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 22px 0;
  color: var(--ink-dim); font-size: .78rem;
  font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 2px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

/* Forms */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; margin-bottom: 6px;
  font-family: 'Cinzel', serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-mute);
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(3,0,20,.55);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: #fff; font-family: 'Rajdhani', sans-serif;
  font-size: .95rem; font-weight: 500;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(3,0,20,.75);
  box-shadow: 0 0 0 3px rgba(240,201,64,.15);
}
.form-input::placeholder { color: var(--ink-dim); }

.form-error, .form-success {
  display: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .84rem; font-weight: 600;
  margin-bottom: 16px;
}
.form-error.show, .form-success.show { display: block; }
.form-error {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5;
}
.form-success {
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.35);
  color: #6ee7b7;
}
.field-hint { display: block; margin-top: 4px; font-size: .72rem; color: var(--ink-dim); }

.btn.btn-block { display: flex; width: 100%; }

/* =================================================================
   DASHBOARD SIDEBAR — DraxMU v2 (tiles flutuantes)
   ================================================================= */
/* Remove card container — sidebar vira lista de elementos glass individuais */
.dashboard-grid > aside .sidebar-card,
.sidebar-card {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: fit-content !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.dashboard-grid > aside .sidebar-card::before { display: none !important; }

/* === HEADER DO USER — card destacado no topo === */
.dashboard-grid > aside .sidebar-card > div:first-child {
  position: relative;
  padding: 22px 20px !important;
  margin-bottom: 18px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,59,48,.14), transparent 60%),
    linear-gradient(165deg, rgba(18,4,54,.88), rgba(10,2,28,.88)) !important;
  border: 1px solid rgba(255,106,77,.28) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 28px rgba(255,106,77,.14);
  overflow: hidden;
}
.dashboard-grid > aside .sidebar-card > div:first-child::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30);
}
.dashboard-grid > aside .sidebar-card > div:first-child > * { position: relative; z-index: 1; }

/* User avatar + name */
.user-avatar {
  width: 68px !important; height: 68px !important;
  background: linear-gradient(135deg, #f0c940, #ff6a4d, #ff3b30) !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,106,77,.4) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.5rem !important; font-weight: 900 !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(255,106,77,.5), 0 0 0 1px rgba(255,59,48,.3) !important;
}
.user-name {
  font-family: 'Cinzel', serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.2px !important;
}

/* Currency rows */
.sb-currency-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: rgba(3,0,20,.4);
  border: 1px solid rgba(255,106,77,.14);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  transition: border-color .2s;
}
.sb-currency-row:hover { border-color: rgba(255,106,77,.32); }
.sb-currency-val { font-family: 'Cinzel', serif; font-weight: 800; }

/* Menu groups — separador sutil apenas */
.sidebar-menu { margin-top: 0 !important; padding: 0 !important; }
.sidebar-group { margin-bottom: 14px !important; padding-bottom: 0 !important; }
.sidebar-group + .sidebar-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.sidebar-group-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 4px 10px !important;
  font-family: 'Cinzel', serif !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
}
.sidebar-group-label::before {
  content: '' !important;
  width: 18px !important; height: 2px !important;
  background: currentColor !important;
  opacity: .85 !important;
  border-radius: 2px !important;
}
.sidebar-group-label::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, currentColor, transparent) !important;
  opacity: .2 !important;
}

/* DraxMU group label colors */
.sidebar-group[data-group="personagem"] .sidebar-group-label { color: #f0c940 !important; }
.sidebar-group[data-group="loja"]       .sidebar-group-label { color: #fbbf24 !important; }
.sidebar-group[data-group="mercado"]    .sidebar-group-label { color: #34d399 !important; }
.sidebar-group[data-group="comunidade"] .sidebar-group-label { color: #ff6a4d !important; }
.sidebar-group[data-group="conta"]      .sidebar-group-label { color: #ff3b30 !important; }

/* === MENU ITEMS v3 — chunky pill glass com scale/glow marcante === */
/* High specificity (matches style.css .dashboard-grid > aside ...) + !important */
.dashboard-grid > aside .sidebar-menu-item,
body .sidebar-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 14px 20px !important;
  border-radius: 14px !important;
  margin: 6px 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  cursor: pointer !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s, background .25s, color .2s !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.008)) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  width: 100% !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  padding-left: 20px !important;
  box-shadow: none !important;
}
.dashboard-grid > aside .sidebar-menu-item::before,
body .sidebar-menu-item::before {
  content: '' !important; position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 0 !important;
  background: linear-gradient(180deg, var(--si-a, #ff6a4d), var(--si-b, #ff3b30)) !important;
  transition: width .28s cubic-bezier(.22,1,.36,1), box-shadow .28s !important;
  z-index: 0 !important;
  border-radius: 0 !important;
}
.dashboard-grid > aside .sidebar-menu-item::after,
body .sidebar-menu-item::after {
  content: '›' !important;
  position: absolute !important; right: 18px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.3rem !important; line-height: 1 !important;
  color: currentColor !important; opacity: 0 !important;
  transition: opacity .25s, right .25s !important;
  font-weight: 700 !important;
}
.dashboard-grid > aside .sidebar-menu-item:hover,
body .sidebar-menu-item:hover {
  border-color: color-mix(in srgb, var(--si-a, #ff6a4d) 45%, transparent) !important;
  transform: translateX(4px) scale(1.015) !important;
  color: #fff !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--si-a, #ff6a4d) 10%, rgba(255,255,255,.02)), rgba(255,255,255,.01)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 22px color-mix(in srgb, var(--si-a, #ff6a4d) 22%, transparent) !important;
  padding-left: 20px !important;
}
.dashboard-grid > aside .sidebar-menu-item:hover::before,
body .sidebar-menu-item:hover::before { width: 4px !important; }
.dashboard-grid > aside .sidebar-menu-item:hover::after,
body .sidebar-menu-item:hover::after { opacity: .65 !important; right: 12px !important; }

.dashboard-grid > aside .sidebar-menu-item.active,
body .sidebar-menu-item.active {
  background: linear-gradient(95deg, color-mix(in srgb, var(--si-a, #ff6a4d) 32%, transparent), color-mix(in srgb, var(--si-b, #ff3b30) 18%, transparent)) !important;
  border-color: color-mix(in srgb, var(--si-a, #ff6a4d) 60%, transparent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--si-a, #ff6a4d) 60%, transparent) !important;
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--si-a, #ff6a4d) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
  transform: translateX(4px) !important;
  padding-left: 22px !important;
}
.dashboard-grid > aside .sidebar-menu-item.active::before,
body .sidebar-menu-item.active::before {
  width: 5px !important;
  box-shadow: 0 0 14px var(--si-a, #ff6a4d) !important;
}
.dashboard-grid > aside .sidebar-menu-item.active::after,
body .sidebar-menu-item.active::after { opacity: 1 !important; right: 12px !important; }

.dashboard-grid > aside .sidebar-menu-item > *,
body .sidebar-menu-item > * { position: relative; z-index: 1; }

/* Per-group palette (--si-a primary / --si-b secondary) — high-specificity overrides */
.dashboard-grid > aside .sidebar-group[data-group="personagem"] .sidebar-menu-item { --si-a:#f0c940; --si-b:#ff6a4d; }
.dashboard-grid > aside .sidebar-group[data-group="loja"]       .sidebar-menu-item { --si-a:#fbbf24; --si-b:#f97316; }
.dashboard-grid > aside .sidebar-group[data-group="mercado"]    .sidebar-menu-item { --si-a:#34d399; --si-b:#10b981; }
.dashboard-grid > aside .sidebar-group[data-group="comunidade"] .sidebar-menu-item { --si-a:#ff6a4d; --si-b:#ff3b30; }
.dashboard-grid > aside .sidebar-group[data-group="conta"]      .sidebar-menu-item { --si-a:#ff3b30; --si-b:#ff6a4d; }

/* Nuke old style.css per-group color/background/border-left overrides */
.dashboard-grid > aside .sidebar-group[data-group="personagem"] .sidebar-menu-item.active,
.dashboard-grid > aside .sidebar-group[data-group="loja"]       .sidebar-menu-item.active,
.dashboard-grid > aside .sidebar-group[data-group="mercado"]    .sidebar-menu-item.active,
.dashboard-grid > aside .sidebar-group[data-group="comunidade"] .sidebar-menu-item.active,
.dashboard-grid > aside .sidebar-group[data-group="conta"]      .sidebar-menu-item.active {
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--si-a, #ff6a4d) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
  border-left-color: transparent !important;
}

/* Sidebar group label color override — use group --si-a */
.dashboard-grid > aside .sidebar-group[data-group="personagem"] .sidebar-group-label { color:#f0c940 !important; }
.dashboard-grid > aside .sidebar-group[data-group="loja"]       .sidebar-group-label { color:#fbbf24 !important; }
.dashboard-grid > aside .sidebar-group[data-group="mercado"]    .sidebar-group-label { color:#34d399 !important; }
.dashboard-grid > aside .sidebar-group[data-group="comunidade"] .sidebar-group-label { color:#ff6a4d !important; }
.dashboard-grid > aside .sidebar-group[data-group="conta"]      .sidebar-group-label { color:#ff3b30 !important; }

/* ============= SCROLL REVEAL ============= */
.dx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.dx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.dx-reveal-d1 { transition-delay: .08s; }
.dx-reveal-d2 { transition-delay: .16s; }
.dx-reveal-d3 { transition-delay: .24s; }
.dx-reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .dx-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============= DASHBOARD PAGE-LIKE TAB PANELS ============= */
/* Each tab feels like its own page — fade+slide in, isolated visually */
.tab-panel {
  display: none !important;
}
.tab-panel.active {
  display: block !important;
  animation: dxTabEnter .35s cubic-bezier(.22, 1, .36, 1);
}
@keyframes dxTabEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-panel.active { animation: none !important; }
}

/* Page title chip that appears above each tab */
.dx-page-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(255,106,77,.08), rgba(255,59,48,.04));
  border: 1px solid rgba(255,106,77,.18);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.dx-page-title::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #f0c940, #ff6a4d, #ff3b30);
}
.dx-page-title-icon {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,106,77,.6));
}
.dx-page-title-text {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dx-page-title-sub {
  margin-left: auto;
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .4px;
}
@media (max-width: 720px) {
  .dx-page-title { padding: 11px 16px; }
  .dx-page-title-text { font-size: .9rem; letter-spacing: 1.5px; }
  .dx-page-title-sub { display: none; }
}

/* ============= DASHBOARD TOPNAV LAYOUT — DraxMU skin ============= */
/* Push topnav below site header with breathing room */
body.layout-topnav #dash-topnav {
  top: calc(var(--nav-h, 70px) + 18px) !important;
  height: auto !important;
  min-height: 64px !important;
  background: linear-gradient(180deg, rgba(14,5,48,.92), rgba(8,2,30,.88)) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-top: 1px solid rgba(255,106,77,.25) !important;
  border-bottom: 1px solid rgba(255,106,77,.25) !important;
  box-shadow:
    0 10px 36px rgba(0,0,0,.5),
    0 0 40px rgba(255,106,77,.12),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  padding: 8px 12px !important;
}
body.layout-topnav #dash-topnav::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f0c940 20%, #ff6a4d 50%, #ff3b30 80%, transparent);
  opacity: .75;
  pointer-events: none;
}
body.layout-topnav .dashboard {
  padding-top: calc(var(--nav-h, 70px) + 64px + 46px) !important;
}

/* Scroll arrows */
body.layout-topnav .tn-scroll-btn {
  width: 36px !important;
  background: linear-gradient(135deg, rgba(255,106,77,.15), rgba(240,201,64,.1)) !important;
  border: 1px solid rgba(255,106,77,.3) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin: 6px 6px !important;
  transition: all .2s !important;
}
body.layout-topnav .tn-scroll-btn:hover {
  background: linear-gradient(135deg, #ff6a4d, #ff3b30) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255,106,77,.5) !important;
  transform: translateY(-1px);
}
body.layout-topnav .tn-scroll-btn.hidden { display: none !important; }

/* Inner scrollable button row */
body.layout-topnav #dash-topnav-inner {
  gap: 6px !important;
  padding: 0 10px !important;
  align-items: center !important;
}

/* Profile pill */
body.layout-topnav #dash-topnav-profile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 14px 7px 8px !important;
  background: linear-gradient(135deg, rgba(240,201,64,.12), rgba(255,106,77,.1)) !important;
  border: 1px solid rgba(255,106,77,.3) !important;
  border-radius: 999px !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}
body.layout-topnav #dash-topnav-profile .tn-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f0c940, #ff6a4d, #ff3b30) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Cinzel', serif !important;
  font-size: .9rem !important; font-weight: 800 !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 0 14px rgba(255,106,77,.5) !important;
}
body.layout-topnav #dash-topnav-profile .tn-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .92rem !important; font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
}
body.layout-topnav #dash-topnav-profile .tn-wcoin {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .72rem !important;
  color: #fbbf24 !important;
  line-height: 1 !important;
}

/* Group label separator */
body.layout-topnav .dash-tn-group-label {
  font-family: 'Cinzel', serif !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.4) !important;
  padding: 0 10px 0 6px !important;
  white-space: nowrap !important;
  align-self: center !important;
}

/* The individual tab buttons */
body.layout-topnav .dash-tn-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 16px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.72) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.22,1,.36,1) !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
body.layout-topnav .dash-tn-btn .tn-btn-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 4px rgba(255,106,77,.4));
}
body.layout-topnav .dash-tn-btn:hover {
  background: linear-gradient(135deg, rgba(255,106,77,.18), rgba(240,201,64,.08)) !important;
  border-color: rgba(255,106,77,.45) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(255,106,77,.25) !important;
}
body.layout-topnav .dash-tn-btn.active {
  background: linear-gradient(135deg, #f0c940, #ff6a4d, #ff3b30) !important;
  background-size: 200% auto !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow:
    0 8px 22px rgba(255,106,77,.5),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
  animation: tnActiveGrad 6s linear infinite !important;
}
body.layout-topnav .dash-tn-btn.active .tn-btn-icon {
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}
@keyframes tnActiveGrad {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Mobile: stack things tighter, profile wraps above */
@media (max-width: 860px) {
  body.layout-topnav #dash-topnav { min-height: 56px !important; padding: 6px 0 !important; }
  body.layout-topnav .dashboard { padding-top: calc(var(--nav-h, 70px) + 56px + 34px) !important; }
  body.layout-topnav #dash-topnav-profile { display: none !important; }
  body.layout-topnav .dash-tn-btn { padding: 7px 12px !important; font-size: .82rem !important; }
  body.layout-topnav .dash-tn-group-label { display: none !important; }
}

/* ============= DASHBOARD NAV INTEGRATED INTO SITE HEADER (v2 — compact dropdowns) ============= */
/* Hide the separate floating bar — we render menu inside .nav instead */
body.layout-topnav #dash-topnav { display: none !important; }

/* Site nav expands vertically (no fixed height) */
body.layout-topnav nav.nav {
  height: auto !important;
  min-height: 70px;
  padding-bottom: 0 !important;
}

/* Expanded row = pills (center) + currency chips (right) */
#dx-hnav-expanded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 16px 24px 8px;
  max-width: 1400px;
  margin: 15px auto 0;
  width: 100%;
  border-top: 1px solid rgba(255,106,77,.22);
  position: relative;
}
.dx-hnav-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
#dx-currencies {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dx-currency-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cur-color, #ff6a4d) 14%, rgba(255,255,255,.02)), rgba(255,255,255,.01));
  border: 1px solid color-mix(in srgb, var(--cur-color, #ff6a4d) 32%, transparent);
  border-radius: 999px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  cursor: default;
}
.dx-currency-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cur-color, #ff6a4d) 55%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cur-color, #ff6a4d) 28%, transparent);
}
.dx-currency-chip .dx-currency-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cur-color, #ff6a4d) 22%, rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--cur-color, #ff6a4d) 40%, transparent);
  font-size: .9rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cur-color, #ff6a4d) 55%, transparent));
}
.dx-currency-chip .dx-currency-meta {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 1px;
}
.dx-currency-chip .dx-currency-label {
  font-family: 'Cinzel', serif;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.dx-currency-chip .dx-currency-val {
  font-family: 'JetBrains Mono', 'Rajdhani', monospace;
  font-size: .92rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--cur-color, #ff6a4d) 80%, #fff);
  text-shadow: 0 0 10px color-mix(in srgb, var(--cur-color, #ff6a4d) 40%, transparent);
}
@media (max-width: 980px) {
  #dx-currencies { width: 100%; justify-content: center; order: 2; gap: 8px; }
  .dx-hnav-pills { order: 1; width: 100%; justify-content: center; }
  .dx-currency-chip { padding: 4px 10px 4px 6px; gap: 6px; }
  .dx-currency-chip .dx-currency-icon { width: 22px; height: 22px; font-size: .8rem; }
  .dx-currency-chip .dx-currency-val { font-size: .82rem; }
  .dx-currency-chip .dx-currency-label { font-size: .5rem; letter-spacing: .8px; }
}

/* Tablet-specific: 721-1024px — organize pills + currencies in 2 clean rows */
@media (max-width: 1024px) and (min-width: 721px) {
  body.layout-topnav #dx-hnav-expanded {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 24px 10px !important;
    margin-top: 10px !important;
  }
  .dx-hnav-pills {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dx-hgroup-pill {
    padding: 7px 14px !important;
  }
  .dx-hgroup-pill .dx-hgroup-name {
    font-size: .66rem !important;
    letter-spacing: 1px !important;
  }
  #dx-currencies {
    width: 100% !important;
    justify-content: center !important;
    gap: 10px !important;
    border-top: 1px dashed rgba(255,106,77,.18);
    padding-top: 10px;
  }
  .dx-currency-chip {
    padding: 5px 14px 5px 8px !important;
    gap: 8px !important;
  }
  .dx-currency-chip .dx-currency-icon { width: 26px !important; height: 26px !important; font-size: 1rem !important; }
  .dx-currency-chip .dx-currency-val { font-size: .92rem !important; }
  .dx-currency-chip .dx-currency-label { display: inline !important; font-size: .56rem !important; letter-spacing: 1px !important; }
}
@media (max-width: 520px) {
  .dx-currency-chip .dx-currency-label { display: none; }
  .dx-currency-chip { padding: 4px 10px; }
}
#dx-hnav-expanded::before {
  content: '';
  position: absolute;
  left: 24px; right: 24px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.3) 20%, rgba(255,106,77,.45) 50%, rgba(255,59,48,.3) 80%, transparent);
  pointer-events: none;
}

/* Group wrap = relative anchor for the dropdown */
.dx-hgroup-wrap {
  --hg-a: #ff6a4d;
  --hg-b: #ff3b30;
  position: relative;
}

/* Home pill (returns to welcome) */
.dx-home-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: linear-gradient(135deg, rgba(240,201,64,.15), rgba(255,106,77,.2), rgba(255,59,48,.12));
  border: 1px solid rgba(255,106,77,.5);
  border-radius: 999px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s, background .2s;
}
.dx-home-pill .dx-home-pill-ico { font-size: .95rem; line-height: 1; filter: drop-shadow(0 0 5px rgba(240,201,64,.5)); }
.dx-home-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(255,59,48,.7);
  background: linear-gradient(135deg, rgba(240,201,64,.28), rgba(255,106,77,.32), rgba(255,59,48,.22));
  box-shadow: 0 6px 20px rgba(255,106,77,.4), 0 0 18px rgba(255,59,48,.25);
}
.dx-home-pill.active {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(255,106,77,.5), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.dx-hgroup-wrap[data-group="personagem"] { --hg-a: #f0c940; --hg-b: #ff6a4d; }
.dx-hgroup-wrap[data-group="loja"]       { --hg-a: #fbbf24; --hg-b: #f97316; }
.dx-hgroup-wrap[data-group="mercado"]    { --hg-a: #34d399; --hg-b: #10b981; }
.dx-hgroup-wrap[data-group="comunidade"] { --hg-a: #ff6a4d; --hg-b: #ff3b30; }
.dx-hgroup-wrap[data-group="conta"]      { --hg-a: #ff3b30; --hg-b: #ff6a4d; }

/* Pill trigger */
.dx-hgroup-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.8);
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s, border-color .2s, color .15s;
  position: relative;
}
.dx-hgroup-pill::before {
  content: '';
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hg-a), var(--hg-b));
  box-shadow: 0 0 8px color-mix(in srgb, var(--hg-a) 60%, transparent);
}
.dx-hgroup-pill .dx-hgroup-name {
  padding-left: 12px;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.dx-hgroup-pill .dx-hgroup-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hg-a) 20%, rgba(255,255,255,.05));
  color: color-mix(in srgb, var(--hg-a) 85%, #fff);
  border: 1px solid color-mix(in srgb, var(--hg-a) 35%, transparent);
}
.dx-hgroup-pill .dx-hgroup-chev {
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  transition: transform .25s;
}
.dx-hgroup-pill:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hg-a) 14%, transparent), color-mix(in srgb, var(--hg-b) 6%, transparent));
  border-color: color-mix(in srgb, var(--hg-a) 45%, transparent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--hg-a) 28%, transparent);
}
.dx-hgroup-wrap.has-active .dx-hgroup-pill {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hg-a) 20%, transparent), color-mix(in srgb, var(--hg-b) 10%, transparent));
  border-color: color-mix(in srgb, var(--hg-a) 55%, transparent);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--hg-a) 28%, transparent);
}
.dx-hgroup-wrap.open .dx-hgroup-pill {
  background: linear-gradient(135deg, var(--hg-a), var(--hg-b));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--hg-a) 50%, transparent);
}
.dx-hgroup-wrap.open .dx-hgroup-pill .dx-hgroup-chev { transform: rotate(180deg); color: #fff; }
.dx-hgroup-wrap.open .dx-hgroup-pill .dx-hgroup-count {
  background: rgba(255,255,255,.2);
  border-color: transparent;
  color: #fff;
}

/* Dropdown panel — grid of tile buttons */
.dx-hgroup-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 440px;
  max-width: min(720px, 94vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 6px;
  padding: 10px;
  background: linear-gradient(165deg, #0e0530, #08021e);
  border: 1px solid color-mix(in srgb, var(--hg-a) 40%, rgba(255,106,77,.25));
  border-radius: 14px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.75),
    0 0 60px color-mix(in srgb, var(--hg-a) 20%, transparent);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(.22,1,.36,1), visibility 0s .2s;
  z-index: 1200;
}
.dx-hgroup-dropdown::before {
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: linear-gradient(135deg, #0e0530, #08021e);
  border-left: 1px solid color-mix(in srgb, var(--hg-a) 40%, rgba(255,106,77,.25));
  border-top: 1px solid color-mix(in srgb, var(--hg-a) 40%, rgba(255,106,77,.25));
}
.dx-hgroup-wrap.open .dx-hgroup-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s, transform .2s cubic-bezier(.22,1,.36,1), visibility 0s;
}

/* Tile inside dropdown */
.dx-hgroup-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  color: rgba(255,255,255,.82);
  font-family: 'Rajdhani', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
  transition: transform .2s, background .2s, border-color .2s, color .15s, box-shadow .2s;
}
.dx-hgroup-tile .dx-hgroup-tile-icon {
  font-size: 1.05rem;
  line-height: 1;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hg-a) 15%, rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--hg-a) 25%, transparent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hg-a) 40%, transparent));
}
.dx-hgroup-tile .dx-hgroup-tile-label {
  flex: 1;
  white-space: normal;
  line-height: 1.2;
  word-break: break-word;
}
.dx-hgroup-tile:hover {
  background: color-mix(in srgb, var(--hg-a) 14%, rgba(255,255,255,.03));
  border-color: color-mix(in srgb, var(--hg-a) 40%, transparent);
  color: #fff;
  transform: translateX(2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--hg-a) 25%, transparent);
}
.dx-hgroup-tile.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hg-a) 30%, transparent), color-mix(in srgb, var(--hg-b) 16%, transparent));
  border-color: color-mix(in srgb, var(--hg-a) 55%, transparent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--hg-a) 30%, transparent);
}
.dx-hgroup-tile.active .dx-hgroup-tile-icon {
  background: linear-gradient(135deg, var(--hg-a), var(--hg-b));
  border-color: transparent;
  color: #fff;
}

/* Dashboard content starts close to nav — no giant gap */
body.layout-topnav .dashboard {
  padding-top: calc(var(--nav-h, 120px) - 4px) !important;
  padding-bottom: 40px !important;
}
body.layout-topnav .dashboard-grid { margin-top: 0 !important; }
body.layout-topnav #tab-content { margin-top: 0 !important; padding-top: 0 !important; }
body.layout-topnav .dx-page-title { display: none !important; }
body.layout-topnav .tab-panel { margin-top: 0 !important; padding-top: 0 !important; }
body.layout-topnav .tab-panel.card { padding: 22px 24px !important; margin-top: 0 !important; }
body.layout-topnav .dashboard {
  padding-top: 23px !important;
  padding-bottom: 40px !important;
  max-width: 1600px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
/* Convert hardcoded 2-col (1fr 1fr) inline grids into responsive 3-col when viewport is wide */
@media (min-width: 1100px) {
  body.layout-topnav .tab-panel [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
  body.layout-topnav .tab-panel [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
}

/* Tighten minmax on specific grids so more columns fit */
body.layout-topnav #vip-packages-grid,
body.layout-topnav #vip-money-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
body.layout-topnav #packages-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
}
body.layout-topnav #ach-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
/* Status/balance KPI grids can spread wider */
body.layout-topnav #affc-status,
body.layout-topnav #affc-balance {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}
body.layout-topnav #tab-content > *:first-child { margin-top: 0 !important; }
/* Hide "Minha Conta / Gerencie sua conta DraxMU" title block; keep only right-side action buttons */
body.layout-topnav .dashboard > div:first-child {
  margin-bottom: 14px !important;
  padding: 0 !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
body.layout-topnav .dashboard > div:first-child > div:first-child {
  display: none !important;
}
body.layout-topnav .dashboard-grid { margin-top: 0 !important; }

/* ============= CHAT ENTRE JOGADORES — DraxMU pill button ============= */
#chat-toggle-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 16px !important;
  background: linear-gradient(135deg, rgba(240,201,64,.16), rgba(255,106,77,.18), rgba(255,59,48,.12)) !important;
  border: 1px solid rgba(255,106,77,.5) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  cursor: pointer !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s, background .22s !important;
  white-space: nowrap !important;
  box-shadow:
    0 4px 14px rgba(255,106,77,.28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#chat-toggle-btn #chat-btn-label::before {
  content: '💬 ';
  margin-right: 2px;
}
#chat-toggle-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,59,48,.65) !important;
  background: linear-gradient(135deg, rgba(240,201,64,.22), rgba(255,106,77,.26), rgba(255,59,48,.18)) !important;
  box-shadow:
    0 8px 24px rgba(255,59,48,.4),
    0 0 22px rgba(255,106,77,.35),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#chat-toggle-btn.chat-has-unread {
  border-color: rgba(255,59,48,.85) !important;
  background: linear-gradient(135deg, rgba(255,59,48,.3), rgba(255,106,77,.25)) !important;
  animation: dxChatPulse 1.8s ease-in-out infinite !important;
}
@keyframes dxChatPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,59,48,.35), 0 0 0 0 rgba(255,59,48,.45), inset 0 1px 0 rgba(255,255,255,.08); }
  50%      { box-shadow: 0 6px 22px rgba(255,59,48,.55), 0 0 0 10px rgba(255,59,48,0), inset 0 1px 0 rgba(255,255,255,.12); }
}
@keyframes dxChatBadgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: .85; }
}

/* ============= "Vender" button — gold amber ============= */
.char-item .char-item-footer .btn[onclick*="goSellChar"],
.char-item .btn[onclick*="goSellChar"] {
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.45) !important;
  background: linear-gradient(135deg, rgba(251,191,36,.1), rgba(249,115,22,.06)) !important;
  box-shadow: 0 2px 10px rgba(251,191,36,.12) !important;
}
.char-item .char-item-footer .btn[onclick*="goSellChar"]:hover,
.char-item .btn[onclick*="goSellChar"]:hover {
  color: #fcd34d !important;
  border-color: rgba(251,191,36,.7) !important;
  background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(249,115,22,.14)) !important;
  box-shadow: 0 6px 20px rgba(251,191,36,.35) !important;
}

/* Currency chips as button (clickable) */
button.dx-currency-chip { cursor: pointer !important; }
button.dx-currency-chip:active { transform: translateY(0) !important; }

/* ============= ACHIEVEMENT UNCLAIMED BADGE ============= */
.dx-ach-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff3b30, #ff6a4d);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255,59,48,.6);
  animation: dxAchBadgePulse 1.6s ease-in-out infinite;
}
@keyframes dxAchBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,.5), 0 0 10px rgba(255,59,48,.6); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(255,59,48,0), 0 0 14px rgba(255,59,48,.7); transform: scale(1.06); }
}
.dx-has-unclaimed.sidebar-menu-item,
.dx-has-unclaimed.mob-drawer-item {
  position: relative;
}
.dx-hgroup-tile.dx-has-unclaimed {
  position: relative;
  border-color: color-mix(in srgb, var(--hg-a, #ff3b30) 60%, transparent) !important;
}
.dx-hgroup-tile.dx-has-unclaimed::before {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b30, #ff6a4d);
  box-shadow: 0 0 8px rgba(255,59,48,.7);
  animation: dxAchBadgePulse 1.4s ease-in-out infinite;
}

/* ============= SHARED CLAIM BUTTON — Reward / Achievement ============= */
#nav-reward-btn, #mob-reward-btn {
  position: relative !important;
}
/* When in achievement mode, swap the gradient to gold→pink so it reads as a trophy */
#nav-reward-btn.mode-achievement,
#mob-reward-btn.mode-achievement {
  background: linear-gradient(90deg, #fbbf24, #ff3b30, #ff6a4d, #ff3b30, #fbbf24) 0 0 / 300% auto !important;
  box-shadow: 0 4px 18px rgba(251,191,36,.4), 0 0 24px rgba(255,59,48,.32) !important;
}
#nav-reward-btn.mode-reward,
#mob-reward-btn.mode-reward {
  box-shadow: 0 4px 18px rgba(255,106,77,.45), 0 0 24px rgba(255,59,48,.32) !important;
}
#nav-reward-btn::after,
#mob-reward-btn::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #08021e;
  animation: dxChatBadgePulse 1.4s ease-in-out infinite;
}
#nav-reward-btn.mode-reward::after,
#mob-reward-btn.mode-reward::after {
  background: linear-gradient(135deg, #f0c940, #ff3b30);
  box-shadow: 0 0 10px rgba(240,201,64,.6);
}
#nav-reward-btn.mode-achievement::after,
#mob-reward-btn.mode-achievement::after {
  background: linear-gradient(135deg, #fbbf24, #ff3b30);
  box-shadow: 0 0 12px rgba(251,191,36,.75);
}

/* ============= CHAR CARD — reset events button ============= */
.char-badges .char-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(240,201,64,.16), rgba(255,106,77,.14));
  border: 1px solid rgba(255,106,77,.4);
  border-radius: 8px;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
  white-space: nowrap;
}
.char-badges .char-reset-btn .crb-ico {
  font-size: .9rem;
  line-height: 1;
  display: inline-block;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.char-badges .char-reset-btn .crb-lbl { line-height: 1; }
.char-badges .char-reset-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,59,48,.6);
  background: linear-gradient(135deg, rgba(240,201,64,.26), rgba(255,59,48,.18));
  box-shadow: 0 4px 14px rgba(255,106,77,.35);
}
.char-badges .char-reset-btn:hover .crb-ico { transform: rotate(180deg); }
.char-badges .char-reset-btn:active { transform: translateY(0); }

/* =================================================================
   DASHBOARD TAB PANELS — broad DraxMU skin for all tabs
   Normalizes legacy red/orange inline colors, polishes cards,
   buttons, badges, quest tiles, etc.
   ================================================================= */

/* Tab panel container (card base) */
body.layout-topnav .tab-panel.card {
  background: linear-gradient(165deg, #0c0428, #070119) !important;
  border: 1px solid rgba(255,106,77,.22) !important;
  border-radius: 18px !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.55),
    0 0 36px rgba(255,106,77,.08),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  position: relative;
}
body.layout-topnav .tab-panel.card::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.45) 20%, rgba(255,106,77,.55) 50%, rgba(255,59,48,.45) 80%, transparent);
  pointer-events: none;
  border-radius: 2px;
}

/* Card titles (e.g. "⚔ Meus Personagens", "🎯 Hunt Quest") */
body.layout-topnav .tab-panel.card > .card-title,
body.layout-topnav .tab-panel.card > div:first-child.card-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,106,77,.16) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Color normalization: old red/orange tokens → DraxMU ── */
body.layout-topnav .tab-panel [style*="rgba(249,115,22"] { /* orange → violet */ }
body.layout-topnav .tab-panel [style*="#e63946"],
body.layout-topnav .tab-panel [style*="#dc2626"] {
  color: #ff3b30 !important;
}
body.layout-topnav .tab-panel [style*="#f97316"],
body.layout-topnav .tab-panel [style*="#ff8a65"],
body.layout-topnav .tab-panel [style*="#ff6b4a"] {
  color: #ff6a4d !important;
}
/* Borders */
body.layout-topnav .tab-panel [style*="border-color:rgba(249,115,22"] { border-color: rgba(255,106,77,.35) !important; }
body.layout-topnav .tab-panel [style*="border-color:rgba(230,57,70"]  { border-color: rgba(255,59,48,.35) !important; }

/* Buttons inside tab panels */
body.layout-topnav .tab-panel .btn-primary,
body.layout-topnav .tab-panel .btn.btn-primary {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #ff6a4d, #f0c940) !important;
  background-size: 300% auto !important;
  animation: loginGrad 5s linear infinite !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(255,106,77,.42) !important;
  font-weight: 700 !important;
}
body.layout-topnav .tab-panel .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(255,59,48,.5) !important;
}
body.layout-topnav .tab-panel .btn-outline,
body.layout-topnav .tab-panel .btn.btn-outline {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,106,77,.35) !important;
  color: #e2e2e8 !important;
  transition: all .2s !important;
}
body.layout-topnav .tab-panel .btn-outline:hover {
  background: linear-gradient(135deg, rgba(240,201,64,.12), rgba(255,106,77,.18)) !important;
  border-color: rgba(255,59,48,.5) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255,106,77,.3) !important;
}

/* Form inputs inside tab panels */
body.layout-topnav .tab-panel .form-input,
body.layout-topnav .tab-panel select.form-input,
body.layout-topnav .tab-panel input[type="text"].form-input,
body.layout-topnav .tab-panel input[type="number"].form-input,
body.layout-topnav .tab-panel textarea.form-input {
  background: rgba(3,0,20,.6) !important;
  border: 1px solid rgba(255,106,77,.25) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
body.layout-topnav .tab-panel .form-input:focus {
  outline: none !important;
  border-color: #f0c940 !important;
  background: rgba(3,0,20,.8) !important;
  box-shadow: 0 0 0 3px rgba(240,201,64,.15) !important;
}
body.layout-topnav .tab-panel .form-label {
  font-family: 'Cinzel', serif !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Status badges (generic) — promote known color patterns */
body.layout-topnav .tab-panel [style*="color:#4ade80"] { color: #34d399 !important; }
body.layout-topnav .tab-panel [style*="color:#f87171"] { color: #fb7185 !important; }

/* Quest/tier cards — any inner "box" style with border and bg */
body.layout-topnav .tab-panel [style*="border:1px solid rgba(255,255,255,.07)"],
body.layout-topnav .tab-panel [style*="border:1px solid rgba(255,255,255,.08)"] {
  border-color: rgba(255,106,77,.2) !important;
}
body.layout-topnav .tab-panel [style*="background:rgba(255,255,255,.02)"] {
  background: linear-gradient(135deg, rgba(255,106,77,.04), rgba(240,201,64,.02)) !important;
}
body.layout-topnav .tab-panel [style*="background:rgba(255,255,255,.04)"] {
  background: linear-gradient(135deg, rgba(255,106,77,.07), rgba(240,201,64,.035)) !important;
}

/* Grids of cards — add gap spacing consistency */
body.layout-topnav .tab-panel [style*="grid-template-columns"] {
  gap: 20px !important;
}

/* Info/warning banners (yellow → DraxMU cyan-purple) */
body.layout-topnav .tab-panel [style*="background:rgba(251,191,36,.08)"],
body.layout-topnav .tab-panel [style*="background:rgba(251,191,36,.06)"] {
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(255,59,48,.08)) !important;
  border-color: rgba(251,191,36,.35) !important;
}

/* Code/command strings (game /commands) */
body.layout-topnav .tab-panel [style*="font-family:monospace"] {
  background: rgba(3,0,20,.7) !important;
  border: 1px solid rgba(240,201,64,.25) !important;
  border-radius: 8px !important;
  color: #a3e635 !important;
  text-shadow: 0 0 8px rgba(163,230,53,.4);
}

/* Hunt Quest specific — buff slot tiles */
body.layout-topnav #tab-huntquest [style*="border-radius:12px"][style*="padding:14px"] {
  background: linear-gradient(165deg, rgba(255,106,77,.08), rgba(240,201,64,.04)) !important;
  border: 1px solid rgba(255,106,77,.22) !important;
  border-radius: 14px !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s;
}
body.layout-topnav #tab-huntquest [style*="border-radius:12px"][style*="padding:14px"]:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,48,.35) !important;
  box-shadow: 0 10px 28px rgba(255,106,77,.3);
}

/* Hunt Quest card header row (char name + stats) */
body.layout-topnav #tab-huntquest [style*="background:rgba(255,255,255,.04)"][style*="padding:12px 16px"] {
  background: linear-gradient(90deg, rgba(240,201,64,.1), rgba(255,106,77,.08), rgba(255,59,48,.06)) !important;
  border-bottom: 1px solid rgba(255,106,77,.22) !important;
}

/* Hunt Quest "Comprado/Concluído" badge → DraxMU green */
body.layout-topnav .tab-panel [style*="background:rgba(74,222,128,.12)"] {
  background: linear-gradient(135deg, rgba(52,211,153,.2), rgba(16,185,129,.1)) !important;
  border-color: rgba(52,211,153,.4) !important;
}

/* Hunt Quest section labels (UPPERCASE titles inside cards) */
body.layout-topnav #tab-huntquest [style*="text-transform:uppercase"][style*="letter-spacing:.07em"] {
  font-family: 'Cinzel', serif !important;
  font-size: .74rem !important;
  letter-spacing: 1.6px !important;
  background: linear-gradient(90deg, #f0c940, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Text-muted normalization */
body.layout-topnav .tab-panel [style*="color:var(--text-muted)"] {
  color: rgba(255,255,255,.55) !important;
}

/* Loader / spinner area */
body.layout-topnav .tab-panel .loader,
body.layout-topnav .tab-panel [class*="loader"] {
  border: 3px solid rgba(255,106,77,.2) !important;
  border-top-color: #ff3b30 !important;
}

/* Tables inside tab panels (history, logs, activity) */
body.layout-topnav .tab-panel table {
  width: 100%;
  border-collapse: collapse;
}
body.layout-topnav .tab-panel table th,
body.layout-topnav .tab-panel table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(255,106,77,.12) !important;
  font-size: .85rem !important;
  color: rgba(255,255,255,.82);
}
body.layout-topnav .tab-panel table th {
  font-family: 'Cinzel', serif !important;
  font-size: .66rem !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  background: rgba(255,106,77,.08) !important;
}
body.layout-topnav .tab-panel table tr:hover td {
  background: rgba(255,106,77,.05) !important;
}

/* Mobile: tighter padding */
@media (max-width: 720px) {
  body.layout-topnav .tab-panel.card { padding: 14px 14px !important; }
  body.layout-topnav .tab-panel.card > .card-title { font-size: .92rem !important; letter-spacing: 1.4px !important; }
}

/* ============= PAGE-SPECIFIC ENHANCEMENTS ============= */

/* VIP packages — fancy tier cards with gradient borders */
body.layout-topnav #tab-vip .pkg-card,
body.layout-topnav #vip-packages-grid > div {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255,106,77,.1), rgba(240,201,64,.05)) !important;
  border: 1px solid rgba(255,106,77,.3) !important;
  border-radius: 14px !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s !important;
}
body.layout-topnav #tab-vip .pkg-card:hover,
body.layout-topnav #vip-packages-grid > div:hover {
  transform: translateY(-3px);
  border-color: rgba(255,59,48,.45) !important;
  box-shadow: 0 12px 32px rgba(255,106,77,.35), 0 0 28px rgba(255,59,48,.22) !important;
}
body.layout-topnav #tab-vip .pkg-card.selected,
body.layout-topnav #vip-packages-grid > div.selected {
  border-color: transparent !important;
  background: linear-gradient(165deg, rgba(240,201,64,.25), rgba(255,106,77,.22), rgba(255,59,48,.18)) !important;
  box-shadow: 0 14px 38px rgba(255,106,77,.5), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Kill Feed — list of recent kills with left color bar */
body.layout-topnav #tab-killfeed .kf-entry,
body.layout-topnav #tab-killfeed > div > div:not(.card-title) {
  position: relative;
  background: linear-gradient(90deg, rgba(255,59,48,.05), rgba(255,106,77,.02)) !important;
  border: 1px solid rgba(255,106,77,.15) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 12px 16px 12px 20px !important;
  transition: background .2s, border-color .2s;
}
body.layout-topnav #tab-killfeed .kf-entry::before,
body.layout-topnav #tab-killfeed > div > div:not(.card-title)::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, #ff3b30, #ff6a4d);
  border-radius: 3px;
}
body.layout-topnav #tab-killfeed .kf-entry:hover {
  background: linear-gradient(90deg, rgba(255,59,48,.12), rgba(255,106,77,.06)) !important;
  border-color: rgba(255,59,48,.35) !important;
}

/* Hunting Stats — KPI numbers big and neon */
body.layout-topnav #tab-hunting [style*="font-size:1.5rem"],
body.layout-topnav #tab-hunting [style*="font-size: 1.5rem"],
body.layout-topnav #tab-hunting [style*="font-size:1.8rem"] {
  font-family: 'JetBrains Mono', 'Rajdhani', monospace !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #f0c940, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* Vote sites — card grid with hover glow */
body.layout-topnav #tab-vote [style*="border-radius:10px"][style*="padding"] {
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
body.layout-topnav #tab-vote [style*="border-radius:10px"]:hover {
  transform: translateY(-2px);
  border-color: rgba(240,201,64,.45) !important;
  box-shadow: 0 8px 24px rgba(240,201,64,.25) !important;
}

/* Discord card, Achievements leaderboard, Events: hover lift on inner panels */
body.layout-topnav #tab-discord .tab-panel,
body.layout-topnav #tab-achievements [style*="border-radius"][style*="padding"],
body.layout-topnav #tab-seasonpass [style*="border-radius:12px"],
body.layout-topnav #tab-eventlimits [style*="border-radius:12px"] {
  transition: transform .22s, box-shadow .22s, border-color .22s;
}

/* Mystery Box: key balance + purchase UI + brighter text */
body.layout-topnav #tab-mysterybox [style*="font-size:2"],
body.layout-topnav #tab-mysterybox [style*="font-size:1.8rem"] {
  font-family: 'JetBrains Mono', monospace !important;
  background: linear-gradient(90deg, #fbbf24, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Brighten washed-out text in Mystery Box */
body.layout-topnav #tab-mysterybox,
body.layout-topnav #tab-mysterybox * {
  color: rgba(255,255,255,.92);
}
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.35)"],
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.4)"],
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.45)"],
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.5)"],
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.55)"],
body.layout-topnav #tab-mysterybox [style*="color:var(--text-muted)"] {
  color: rgba(255,255,255,.75) !important;
}
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.6)"],
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.7)"] {
  color: rgba(255,255,255,.88) !important;
}
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.78)"],
body.layout-topnav #tab-mysterybox [style*="color:rgba(255,255,255,.8)"] {
  color: #fff !important;
}
body.layout-topnav #tab-mysterybox [style*="color:var(--text-bright)"] {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,106,77,.3);
}
/* Headers/section titles in mystery box pop */
body.layout-topnav #tab-mysterybox [style*="font-family:var(--font-title)"] {
  color: #fff !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1.4px !important;
}
/* Item tiles / reward cards — brighter borders and bg */
body.layout-topnav #tab-mysterybox [style*="border:1px solid rgba(255,255,255,.05)"],
body.layout-topnav #tab-mysterybox [style*="border:1px solid rgba(255,255,255,.06)"],
body.layout-topnav #tab-mysterybox [style*="border:1px solid rgba(255,255,255,.07)"],
body.layout-topnav #tab-mysterybox [style*="border:1px solid rgba(255,255,255,.08)"],
body.layout-topnav #tab-mysterybox [style*="border:1px solid rgba(255,255,255,.1)"] {
  border-color: rgba(255,106,77,.3) !important;
}
body.layout-topnav #tab-mysterybox [style*="background:rgba(255,255,255,.02)"],
body.layout-topnav #tab-mysterybox [style*="background:rgba(255,255,255,.03)"],
body.layout-topnav #tab-mysterybox [style*="background:rgba(255,255,255,.04)"] {
  background: linear-gradient(165deg, rgba(255,106,77,.1), rgba(255,59,48,.05)) !important;
}

/* Points store + Ruud market — listing cards */
body.layout-topnav #tab-points [style*="border-radius:12px"],
body.layout-topnav #tab-ruudmarket [style*="border-radius:12px"] {
  background: linear-gradient(165deg, rgba(52,211,153,.08), rgba(255,106,77,.04)) !important;
  border: 1px solid rgba(52,211,153,.22) !important;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
body.layout-topnav #tab-points [style*="border-radius:12px"]:hover,
body.layout-topnav #tab-ruudmarket [style*="border-radius:12px"]:hover {
  transform: translateY(-2px);
  border-color: rgba(52,211,153,.45) !important;
  box-shadow: 0 8px 24px rgba(52,211,153,.25) !important;
}

/* Coupon affiliate — organized hierarchy */
body.layout-topnav #tab-affcoupon #affc-status {
  display: block !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.layout-topnav #tab-affcoupon #affc-status > div {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 4px !important;
}
body.layout-topnav #tab-affcoupon #affc-balance {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr)) !important;
  gap: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.layout-topnav #tab-affcoupon #affc-balance > div[data-balance-card],
body.layout-topnav #tab-affcoupon #affc-balance > div {
  background: #15151c !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
}
body.layout-topnav #tab-affcoupon #affc-coupon-area,
body.layout-topnav #tab-affcoupon #affc-withdraw-area {
  background: #15151c !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
}
body.layout-topnav #tab-affcoupon #affc-benefits-grid {
  display: block !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.layout-topnav #tab-affcoupon #affc-benefits-grid > div {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.layout-topnav #tab-affcoupon #affc-sales-list,
body.layout-topnav #tab-affcoupon #affc-wd-list {
  background: transparent !important;
  border: none !important;
  padding: 8px 4px 0 !important;
}
body.layout-topnav #tab-affcoupon #affc-input {
  background: rgba(0,0,0,.4) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1rem !important;
  letter-spacing: 2px !important;
  color: #cbd5e1 !important;
}
body.layout-topnav #tab-affcoupon #affc-input:focus {
  border-color: #cbd5e1 !important;
  box-shadow: 0 0 0 3px rgba(203,213,225,.15) !important;
}

.dx-affc-btn {
  padding: 10px 18px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  cursor: pointer !important;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s, background .2s !important;
  text-transform: uppercase;
}
.dx-affc-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,59,48,.6) !important;
  background: linear-gradient(135deg, rgba(240,201,64,.3), rgba(255,106,77,.36), rgba(255,59,48,.2)) !important;
  box-shadow: 0 6px 18px rgba(255,106,77,.4), 0 0 18px rgba(255,59,48,.2) !important;
}
.dx-affc-btn-del {
  background: linear-gradient(135deg, rgba(255,59,48,.18), rgba(255,106,77,.1)) !important;
  border-color: rgba(255,59,48,.45) !important;
}
.dx-affc-btn-del:hover {
  background: linear-gradient(135deg, rgba(255,59,48,.35), rgba(255,106,77,.22)) !important;
  border-color: #ff3b30 !important;
  box-shadow: 0 6px 18px rgba(255,59,48,.5) !important;
}

/* "Solicitar saque" + similar affcoupon buttons — inherit DraxMU look */
body.layout-topnav #tab-affcoupon button:not(.dx-affc-btn):not(.btn-outline):not(.btn-primary),
body.layout-topnav #affc-withdraw-area button {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #ff6a4d, #f0c940) !important;
  background-size: 300% auto !important;
  animation: loginGrad 5s linear infinite !important;
  border: none !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .8px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(255,106,77,.45) !important;
  transition: transform .2s, box-shadow .2s !important;
}
body.layout-topnav #tab-affcoupon button:not(.dx-affc-btn):not(.btn-outline):not(.btn-primary):hover,
body.layout-topnav #affc-withdraw-area button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(255,59,48,.55) !important;
}

/* Security / Configuration tab — grouped settings look */
body.layout-topnav #tab-seguranca [style*="border-radius"][style*="padding"] {
  background: linear-gradient(165deg, rgba(255,106,77,.04), rgba(240,201,64,.02)) !important;
  border: 1px solid rgba(255,106,77,.18) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  padding: 18px 20px !important;
}

/* ============= EVENT LIMITS PAGE ============= */
body.layout-topnav #tab-eventlimits,
body.layout-topnav #tab-eventlimits * {
  color: rgba(255,255,255,.92);
}
body.layout-topnav #tab-eventlimits [style*="color:rgba(255,255,255,.3"],
body.layout-topnav #tab-eventlimits [style*="color:rgba(255,255,255,.4"],
body.layout-topnav #tab-eventlimits [style*="color:rgba(255,255,255,.5"],
body.layout-topnav #tab-eventlimits [style*="color:var(--text-muted)"] {
  color: rgba(255,255,255,.75) !important;
}
body.layout-topnav #tab-eventlimits [style*="color:var(--text-bright)"] {
  color: #fff !important;
}
/* Character event card container */
body.layout-topnav #el-dash-body > div {
  background: linear-gradient(165deg, rgba(255,106,77,.08), rgba(240,201,64,.04)) !important;
  border: 1px solid rgba(255,106,77,.3) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin-bottom: 18px !important;
  position: relative;
}
body.layout-topnav #el-dash-body > div::before {
  content: '';
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f0c940 30%, #ff6a4d 50%, #ff3b30 70%, transparent);
  border-radius: 2px;
  pointer-events: none;
}
/* Event grid inside eventlimits */
body.layout-topnav #tab-eventlimits [style*="grid-template-columns"] {
  gap: 20px !important;
}
/* Individual event rows — make cards per event */
body.layout-topnav #tab-eventlimits [style*="border-radius:10px"],
body.layout-topnav #tab-eventlimits [style*="border-radius:12px"] {
  background: linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,106,77,.05)) !important;
  border: 1px solid rgba(255,106,77,.22) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  transition: transform .22s, box-shadow .22s, border-color .22s !important;
}
body.layout-topnav #tab-eventlimits [style*="border-radius:10px"]:hover,
body.layout-topnav #tab-eventlimits [style*="border-radius:12px"]:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,48,.45) !important;
  box-shadow: 0 8px 22px rgba(255,106,77,.3), 0 0 16px rgba(255,59,48,.18) !important;
}
/* "Remaining" badge — make green pop */
body.layout-topnav #tab-eventlimits [style*="color:#4ade80"] {
  color: #34d399 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(52,211,153,.4);
}
/* "Esgotado" badge — make pink pop */
body.layout-topnav #tab-eventlimits [style*="color:#ff6a4d"] {
  color: #ff3b30 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(255,59,48,.45);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .78rem;
}
/* Section title "Resetar via checkout" */
body.layout-topnav #tab-eventlimits [style*="text-transform:uppercase"] {
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1.6px !important;
  background: linear-gradient(90deg, #f0c940, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Currency selector + reset button */
body.layout-topnav #tab-eventlimits select.form-input,
body.layout-topnav #tab-eventlimits input.form-input {
  background: rgba(3,0,20,.7) !important;
  border: 1px solid rgba(255,106,77,.4) !important;
}
body.layout-topnav #tab-eventlimits button,
body.layout-topnav #tab-eventlimits .btn {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
}

/* Hide Castle Siege / events countdown when welcome page is active */
#tab-content:has(#tab-welcome.active) #evt-countdown-wrap { display: none !important; }

/* ============= PROFILE KPI CARDS / STATUS / GUILD / PVP — restructured ============= */
.dx-pf-kpi-card {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 12px 14px !important;
  text-align: left !important;
}
.dx-pf-kpi-ico {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240,201,64,.18), rgba(255,106,77,.2));
  border: 1px solid rgba(255,106,77,.35);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 8px rgba(255,106,77,.35));
}
.dx-pf-kpi-body { flex: 1; min-width: 0; }
.dx-pf-kpi-body .stat-val { font-size: 1.35rem !important; line-height: 1.05 !important; margin-bottom: 2px !important; }
.dx-pf-kpi-body .stat-lbl { font-size: .6rem !important; }

/* Status card content */
.dx-pf-status-online {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(52,211,153,.14), rgba(240,201,64,.08));
  border: 1px solid rgba(52,211,153,.35);
  border-radius: 12px;
  margin-bottom: 10px;
}
.dx-pf-status-offline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  margin-bottom: 8px;
}
.dx-pf-status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 14px #34d399, 0 0 0 4px rgba(52,211,153,.2);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.dx-pf-status-dot-off {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}
.dx-pf-status-text { flex: 1; min-width: 0; }
.dx-pf-status-label {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
}
.dx-pf-status-label strong { color: #34d399; text-shadow: 0 0 8px rgba(52,211,153,.5); }
.dx-pf-status-label-off {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.dx-pf-status-meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}
.dx-pf-status-loc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dx-pf-status-coords {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: rgba(255,255,255,.55);
}
.dx-pf-status-lastseen {
  font-family: 'Rajdhani', sans-serif;
  font-size: .8rem;
  color: rgba(255,255,255,.68);
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}
.dx-pf-status-lastseen b { color: #f0c940; }

/* Guild card */
.dx-pf-guild-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dx-pf-guild-emblem {
  width: 54px; height: 54px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(255,59,48,.1));
  border: 1px solid rgba(251,191,36,.4);
  border-radius: 14px;
  font-size: 1.8rem;
  overflow: hidden;
}
.dx-pf-guild-emblem img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
}
.dx-pf-guild-info { flex: 1; min-width: 0; }
.dx-pf-guild-name {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251,191,36,.3);
  margin-bottom: 3px;
}
.dx-pf-guild-ranks {
  font-family: 'Rajdhani', sans-serif;
  font-size: .76rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 6px;
}
.dx-pf-guild-cta {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: #f0c940;
  cursor: pointer;
  transition: color .2s, transform .2s;
}
.dx-pf-guild-cta:hover {
  color: #ff3b30;
  transform: translateX(3px);
}

.dx-pf-empty {
  font-family: 'Rajdhani', sans-serif;
  font-size: .88rem;
  color: rgba(255,255,255,.45);
  text-align: center;
  padding: 20px;
}

/* PvP card grid */
.dx-pf-pvp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dx-pf-pvp-cell {
  background: linear-gradient(165deg, rgba(255,59,48,.1), rgba(255,106,77,.06));
  border: 1px solid rgba(255,59,48,.3);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.dx-pf-pvp-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,48,.55);
  box-shadow: 0 6px 16px rgba(255,59,48,.25);
}
.dx-pf-pvp-ico {
  font-size: 1.5rem;
  line-height: 1;
  color: #ff3b30;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px rgba(255,59,48,.45));
}
.dx-pf-pvp-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
}
.dx-pf-pvp-lbl {
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}
@media (max-width: 480px) {
  .dx-pf-pvp-grid { grid-template-columns: 1fr; }
  .dx-pf-guild-emblem { width: 46px !important; height: 46px !important; }
}

/* ============= PROFILE PAGE v2 — restructured layout ============= */
.dx-pf-hero {
  padding: 90px 0 42px !important;
  position: relative;
}
.dx-pf-hero-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.dx-pf-avatar-wrap {
  position: relative;
}
.dx-pf-hero .profile-avatar {
  width: 120px !important;
  height: 120px !important;
  font-size: 3.4rem !important;
}
.dx-pf-identity { min-width: 0; }
.dx-pf-identity .profile-name {
  font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
  line-height: 1.1;
  margin-bottom: 8px !important;
}
.dx-pf-identity .profile-class {
  margin-bottom: 12px !important;
}
.dx-pf-identity .profile-badges {
  margin-top: 4px;
}
.dx-pf-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
}
.dx-pf-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255,106,77,.4);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(240,201,64,.12), rgba(255,106,77,.14));
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.dx-pf-act-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,59,48,.6);
  background: linear-gradient(135deg, rgba(240,201,64,.22), rgba(255,106,77,.3), rgba(255,59,48,.18));
  box-shadow: 0 6px 18px rgba(255,106,77,.35);
}
.dx-pf-act-buy {
  background: linear-gradient(90deg, #fbbf24, #ff3b30, #ff6a4d) !important;
  background-size: 250% auto !important;
  animation: loginGrad 6s linear infinite !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(251,191,36,.35), 0 0 22px rgba(255,59,48,.2) !important;
}
.dx-pf-act-buy:hover {
  box-shadow: 0 10px 28px rgba(251,191,36,.5), 0 0 32px rgba(255,59,48,.3) !important;
}

/* KPI strip — promoted to prominent row below hero */
.dx-pf-kpi-section { padding-top: 30px !important; padding-bottom: 0 !important; }
.dx-pf-kpi-strip {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 26px !important;
}

.dx-pf-main { padding-top: 8px !important; }
.dx-pf-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}
.dx-pf-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dx-pf-equip-card { margin-top: 0 !important; }
.dx-pf-equip-beta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(251,191,36,.1), rgba(255,59,48,.06));
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: #fcd34d;
}
.dx-pf-equip-beta-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(251,191,36,.5));
}

@media (max-width: 1000px) {
  .dx-pf-hero-inner { grid-template-columns: auto 1fr; }
  .dx-pf-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }
  .dx-pf-act-btn { flex: 1; justify-content: center; }
  .dx-pf-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .dx-pf-hero { padding: 72px 0 26px !important; }
  .dx-pf-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .dx-pf-hero .profile-avatar { width: 88px !important; height: 88px !important; margin: 0 auto; font-size: 2.2rem !important; }
  .dx-pf-identity .profile-badges { justify-content: center; }
  .dx-pf-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .dx-pf-act-btn { font-size: .74rem !important; padding: 9px 14px !important; }
}

/* ============= PROFILE PAGE (perfil.html) — DraxMU makeover ============= */
.profile-hero {
  position: relative;
  background: linear-gradient(135deg, #030014 0%, #0e0530 50%, #08021e 100%) !important;
  border-bottom: 1px solid rgba(255,106,77,.3) !important;
  overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(240,201,64,.16) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(255,59,48,.15) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 50%, rgba(255,106,77,.08) 0%, transparent 70%);
  pointer-events: none;
}
.profile-hero .container { position: relative; z-index: 1; }
.profile-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.45) 20%, rgba(255,106,77,.55) 50%, rgba(255,59,48,.45) 80%, transparent);
  pointer-events: none;
}

.profile-avatar {
  border: 3px solid rgba(255,106,77,.5) !important;
  position: relative;
}
.profile-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #f0c940, #ff6a4d, #ff3b30, #fbbf24);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: loginGrad 6s linear infinite;
  background-size: 300% auto;
}

.profile-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #fbbf24, #ff3b30, #ff6a4d, #f0c940) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: loginGrad 6s linear infinite !important;
}
.profile-class {
  font-family: 'Rajdhani', sans-serif !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 1rem !important;
  letter-spacing: .5px !important;
}

/* Section cards in profile */
.section-card {
  background: linear-gradient(165deg, rgba(14,5,48,.65), rgba(8,2,30,.8)) !important;
  border: 1px solid rgba(255,106,77,.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 24px rgba(255,106,77,.1) !important;
  position: relative;
  overflow: hidden !important;
}
.section-card::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.45) 30%, rgba(255,106,77,.55) 50%, rgba(255,59,48,.45) 70%, transparent);
  pointer-events: none;
}
.section-card-title {
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1.8px !important;
  background: linear-gradient(90deg, #f0c940, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 700 !important;
}
.section-card-title::after {
  background: linear-gradient(90deg, rgba(255,106,77,.3), transparent) !important;
}

/* Stat cards */
.stat-card {
  background: linear-gradient(165deg, rgba(255,106,77,.08), rgba(240,201,64,.04)) !important;
  border: 1px solid rgba(255,106,77,.3) !important;
  border-radius: 14px !important;
  padding: 14px 12px !important;
  transition: transform .22s, box-shadow .22s, border-color .22s !important;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,48,.45) !important;
  box-shadow: 0 8px 20px rgba(255,106,77,.3) !important;
}
.stat-val {
  font-family: 'JetBrains Mono', monospace !important;
  background: linear-gradient(90deg, #f0c940, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
.stat-lbl {
  font-family: 'Cinzel', serif !important;
  color: rgba(255,255,255,.55) !important;
  letter-spacing: 1.3px !important;
}

/* Profile badges */
.profile-badge {
  background: linear-gradient(135deg, rgba(255,106,77,.1), rgba(255,59,48,.08)) !important;
  font-family: 'Rajdhani', sans-serif !important;
}

/* Share button */
.share-btn {
  background: linear-gradient(135deg, rgba(240,201,64,.12), rgba(255,106,77,.14)) !important;
  border: 1px solid rgba(255,106,77,.3) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  transition: all .2s !important;
}
.share-btn:hover {
  background: linear-gradient(135deg, rgba(240,201,64,.24), rgba(255,106,77,.3)) !important;
  border-color: rgba(255,59,48,.5) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,106,77,.35) !important;
}

/* Equipment grid */
.equip-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
}
.equip-slot {
  background: linear-gradient(165deg, rgba(255,106,77,.08), rgba(240,201,64,.04)) !important;
  border: 1px solid rgba(255,106,77,.25) !important;
  border-radius: 14px !important;
  padding: 14px 8px 12px !important;
  min-height: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  position: relative !important;
  transition: all .22s cubic-bezier(.22,1,.36,1) !important;
  overflow: hidden;
}
.equip-slot::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.4) 30%, rgba(255,106,77,.55) 50%, rgba(255,59,48,.4) 70%, transparent);
  opacity: .6;
  pointer-events: none;
}
.equip-slot:not(.empty):hover {
  border-color: rgba(255,59,48,.55) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(255,106,77,.35), 0 0 20px rgba(255,59,48,.2) !important;
  background: linear-gradient(165deg, rgba(255,106,77,.14), rgba(255,59,48,.08)) !important;
}
.equip-slot.empty {
  border-style: dashed !important;
  opacity: .4 !important;
  background: rgba(255,255,255,.015) !important;
}
.equip-slot.empty::before { opacity: .2; }
.equip-slot-icon {
  font-size: 2rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 8px rgba(255,106,77,.35));
  margin-bottom: 2px;
}
.equip-slot-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .72rem !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 0 6px rgba(255,106,77,.3);
}
.equip-slot-label {
  font-family: 'Cinzel', serif !important;
  font-size: .55rem !important;
  color: rgba(255,255,255,.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.equip-slot-lv {
  position: absolute !important;
  top: 6px; right: 8px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .62rem !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 6px rgba(251,191,36,.5);
}
.equip-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  justify-content: center !important;
  margin-top: 3px !important;
}
.equip-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .52rem !important;
  padding: 1px 5px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  line-height: 1.5 !important;
}
.equip-badge-exc {
  background: linear-gradient(135deg, rgba(255,106,77,.25), rgba(255,106,77,.1)) !important;
  color: #ff8a3d !important;
  border: 1px solid rgba(255,106,77,.4) !important;
}
.equip-badge-anc {
  background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(251,191,36,.08)) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251,191,36,.4) !important;
}
.equip-badge-skill {
  background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(52,211,153,.08)) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52,211,153,.4) !important;
}
.equip-badge-sock {
  background: linear-gradient(135deg, rgba(255,59,48,.22), rgba(255,59,48,.08)) !important;
  color: #ff3b30 !important;
  border: 1px solid rgba(255,59,48,.4) !important;
}

/* Guild link */
.guild-link {
  color: #fbbf24 !important;
  border-bottom: 1px dashed rgba(251,191,36,.45) !important;
  transition: color .2s !important;
}
.guild-link:hover { color: #ff3b30 !important; }

/* Map badge */
.map-badge {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
}

/* Mobile perfil */
@media (max-width: 720px) {
  .profile-hero { padding: 74px 0 24px !important; }
  .profile-name { font-size: 1.25rem !important; letter-spacing: 1.5px !important; }
  .profile-avatar { width: 72px !important; height: 72px !important; font-size: 2rem !important; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 10px !important; }
  .stat-val { font-size: 1.15rem !important; }
  .section-card { padding: 14px !important; border-radius: 12px !important; }
}

/* ============= RANKING — FLAGS + SEALS ============= */
.rank-flag {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 18px !important;
  height: 13px !important;
  margin-right: 6px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.35) !important;
  object-fit: cover !important;
}
.rank-seals {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  vertical-align: middle;
  flex-wrap: nowrap;
}
.rank-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(255,59,48,.08));
  border: 1px solid rgba(251,191,36,.4);
  border-radius: 50%;
  cursor: help;
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.rank-seal:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(251,191,36,.5);
}
.rank-seal-more {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff6a4d, #ff3b30) !important;
  border-color: transparent !important;
  text-shadow: 0 0 6px rgba(0,0,0,.4);
  white-space: pre-line;
}
.rank-seal-more:hover {
  box-shadow: 0 0 12px rgba(255,59,48,.6);
  transform: scale(1.15);
}

/* ============= RANKING PAGE — DraxMU polish ============= */
.rank-hero {
  padding: 20px 0 30px !important;
  position: relative;
}
.rank-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.35) 20%, rgba(255,106,77,.5) 50%, rgba(255,59,48,.35) 80%, transparent);
  pointer-events: none;
}
.rank-hero h1 {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(1.8rem, 5vw, 2.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #fbbf24, #ff3b30, #ff6a4d, #f0c940) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: loginGrad 6s linear infinite !important;
  margin: 0 0 10px !important;
}

.rank-control-bar {
  background: linear-gradient(165deg, rgba(14,5,48,.75), rgba(8,2,30,.85)) !important;
  border: 1px solid rgba(255,106,77,.28) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 26px rgba(255,106,77,.12) !important;
  backdrop-filter: blur(12px) !important;
}

.rank-tab-new {
  color: rgba(255,255,255,.6) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  transition: color .2s, background .2s !important;
}
.rank-tab-new:hover {
  color: #fff !important;
  background: rgba(255,106,77,.08) !important;
}
.rank-tab-new.active { color: #fff !important; }
.rank-tab-new.active::after {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30) !important;
  box-shadow: 0 0 10px rgba(255,106,77,.55) !important;
}
.rank-tab-new[data-tab="events"] { color: rgba(251,191,36,.7) !important; }
.rank-tab-new[data-tab="events"]:hover,
.rank-tab-new[data-tab="events"].active { color: #fcd34d !important; }
.rank-tab-new[data-tab="events"].active::after {
  background: linear-gradient(90deg, #fbbf24, #f59e0b) !important;
  box-shadow: 0 0 10px rgba(251,191,36,.55) !important;
}
.rank-tab-new[data-tab="pvp"] { color: rgba(255,59,48,.7) !important; }
.rank-tab-new[data-tab="pvp"]:hover,
.rank-tab-new[data-tab="pvp"].active { color: #f9a8d4 !important; }
.rank-tab-new[data-tab="pvp"].active::after {
  background: linear-gradient(90deg, #ff3b30, #ff6a4d) !important;
  box-shadow: 0 0 10px rgba(255,59,48,.55) !important;
}
.rank-tab-new[data-tab="race"] { color: rgba(240,201,64,.7) !important; }
.rank-tab-new[data-tab="race"]:hover,
.rank-tab-new[data-tab="race"].active { color: #f5d97a !important; }
.rank-tab-new[data-tab="race"].active::after {
  background: linear-gradient(90deg, #f0c940, #ff6a4d) !important;
  box-shadow: 0 0 10px rgba(240,201,64,.55) !important;
}

.rank-search-wrap {
  background: rgba(3,0,20,.6) !important;
  border: 1px solid rgba(255,106,77,.25) !important;
  border-radius: 10px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.rank-search-wrap:focus-within {
  border-color: #f0c940 !important;
  box-shadow: 0 0 0 3px rgba(240,201,64,.15) !important;
}
.rank-search-input { color: #fff !important; }
.rank-search-icon { color: rgba(255,106,77,.7) !important; }

.rank-refresh-btn {
  color: rgba(255,255,255,.65) !important;
  transition: all .2s !important;
}
.rank-refresh-btn:hover {
  color: #ff3b30 !important;
  background: rgba(255,59,48,.12) !important;
  transform: rotate(180deg);
}

.event-sub-btn {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,106,77,.22) !important;
  color: rgba(255,255,255,.72) !important;
  font-family: 'Rajdhani', sans-serif !important;
  transition: all .2s !important;
}
.event-sub-btn:hover {
  border-color: rgba(255,59,48,.45) !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(240,201,64,.1), rgba(255,106,77,.14)) !important;
  transform: translateY(-1px);
}
.event-sub-btn.active {
  border-color: transparent !important;
  background: linear-gradient(135deg, #f0c940, #ff6a4d, #ff3b30) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255,106,77,.4) !important;
}

.rank-panel {
  background: linear-gradient(165deg, rgba(14,5,48,.75), rgba(8,2,30,.85)) !important;
  border: 1px solid rgba(255,106,77,.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 28px rgba(255,106,77,.08) !important;
  position: relative;
  overflow: hidden !important;
}
.rank-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.5) 30%, rgba(255,106,77,.6) 50%, rgba(255,59,48,.5) 70%, transparent);
  pointer-events: none;
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
}
.rank-table th {
  font-family: 'Cinzel', serif !important;
  font-size: .68rem !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  background: linear-gradient(90deg, rgba(255,106,77,.12), rgba(240,201,64,.08)) !important;
  border-bottom: 1px solid rgba(255,106,77,.25) !important;
  padding: 12px 10px !important;
  text-align: left;
}
.rank-table td {
  padding: 11px 10px !important;
  border-bottom: 1px solid rgba(255,106,77,.1) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .9rem !important;
  color: rgba(255,255,255,.88) !important;
  vertical-align: middle;
}
.rank-table tr:hover td {
  background: linear-gradient(90deg, rgba(255,106,77,.08), rgba(255,59,48,.04)) !important;
}
/* Top 3 — no colored backgrounds, only the position icon is colored */

.rank-full-table {
  background: transparent !important;
  border: none !important;
}

/* Responsive mobile polish for ranking */
@media (max-width: 720px) {
  .rank-hero { padding: 14px 0 22px !important; }
  .rank-hero h1 { font-size: 1.55rem !important; letter-spacing: 2px !important; }
  .rank-panel { border-radius: 12px !important; }
  .rank-table th { font-size: .58rem !important; letter-spacing: .8px !important; padding: 8px 6px !important; }
  .rank-table td { padding: 8px 6px !important; font-size: .78rem !important; }
  .event-sub-btn { padding: 5px 10px !important; font-size: .72rem !important; }
}

/* ============= DASHBOARD WELCOME LANDING ============= */
#tab-welcome .card-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.1rem !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #fbbf24) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dx-welcome-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1280px) { .dx-welcome-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .dx-welcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .dx-welcome-grid { grid-template-columns: 1fr; } }

.dxw-banner {
  background: linear-gradient(165deg, rgba(14,5,48,.85), rgba(8,2,30,.9));
  border: 1px solid rgba(255,106,77,.28);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
.dxw-banner::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(240,201,64,.5) 30%, rgba(255,106,77,.65) 50%, rgba(255,59,48,.5) 70%, transparent);
  pointer-events: none;
}
.dxw-banner:hover {
  transform: translateY(-3px);
  border-color: rgba(255,59,48,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 32px rgba(255,106,77,.28);
}
.dxw-banner.expanded {
  border-color: rgba(255,59,48,.6);
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 44px rgba(255,59,48,.35);
}
.dxw-banner-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  cursor: pointer;
  user-select: none;
}
.dxw-banner-ico {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(255,106,77,.35), inset 0 1px 0 rgba(255,255,255,.2);
  color: #fff;
  filter: drop-shadow(0 0 12px rgba(255,106,77,.4));
  transition: transform .25s;
}
.dxw-banner:hover .dxw-banner-ico { transform: scale(1.08) rotate(-4deg); }
.dxw-banner.expanded .dxw-banner-ico { transform: scale(1.1); }
.dxw-banner-meta { flex: 1; min-width: 0; }
.dxw-banner-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
  text-shadow: 0 0 14px rgba(255,106,77,.35);
}
.dxw-banner-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  line-height: 1.3;
  margin-bottom: 4px;
}
.dxw-banner-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .5px;
}
.dxw-banner-count b {
  color: #fbbf24;
  font-weight: 800;
  font-size: .8rem;
  margin-right: 4px;
}
.dxw-banner-chev {
  font-size: 1rem;
  color: rgba(255,255,255,.55);
  transition: transform .3s, color .2s;
  flex-shrink: 0;
  margin-left: 4px;
}
.dxw-banner:hover .dxw-banner-chev { color: #ff3b30; }
.dxw-banner.expanded .dxw-banner-chev { transform: rotate(180deg); color: #fff; }

.dxw-banner-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.22,1,.36,1);
  border-top: 1px solid transparent;
}
.dxw-banner.expanded .dxw-banner-body {
  max-height: 800px;
  border-top-color: rgba(255,106,77,.25);
}
.dxw-tiles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 16px;
}
.dxw-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,106,77,.22);
  border-radius: 12px;
  color: rgba(255,255,255,.85);
  font-family: 'Rajdhani', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-align: left;
  cursor: pointer;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s, color .15s;
}
.dxw-tile-ico {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 1rem;
  flex-shrink: 0;
  background: rgba(255,106,77,.14);
  border: 1px solid rgba(255,106,77,.3);
}
.dxw-tile-text { flex: 1; line-height: 1.1; white-space: normal; }
.dxw-tile-arrow {
  font-size: .9rem;
  color: rgba(255,255,255,.35);
  transition: transform .2s, color .2s;
  flex-shrink: 0;
}
.dxw-tile:hover {
  background: linear-gradient(135deg, rgba(240,201,64,.14), rgba(255,106,77,.16));
  border-color: rgba(255,59,48,.5);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 6px 18px rgba(255,106,77,.3);
}
.dxw-tile:hover .dxw-tile-arrow {
  color: #ff3b30;
  transform: translateX(3px);
}

/* Per-group accent colors for tile icons */
.dxw-tile[data-group="personagem"] .dxw-tile-ico { background: linear-gradient(135deg, rgba(240,201,64,.2), rgba(255,106,77,.15)); border-color: rgba(240,201,64,.4); }
.dxw-tile[data-group="loja"]       .dxw-tile-ico { background: linear-gradient(135deg, rgba(251,191,36,.2), rgba(249,115,22,.15)); border-color: rgba(251,191,36,.4); }
.dxw-tile[data-group="mercado"]    .dxw-tile-ico { background: linear-gradient(135deg, rgba(52,211,153,.2), rgba(16,185,129,.15)); border-color: rgba(52,211,153,.4); }
.dxw-tile[data-group="comunidade"] .dxw-tile-ico { background: linear-gradient(135deg, rgba(168,85,247,.2), rgba(255,59,48,.15)); border-color: rgba(168,85,247,.4); }
.dxw-tile[data-group="conta"]      .dxw-tile-ico { background: linear-gradient(135deg, rgba(255,59,48,.2), rgba(255,106,77,.15)); border-color: rgba(255,59,48,.4); }

/* ============= GOBLIN POINTS EARN SECTION (welcome landing) ============= */
.dx-gp-section {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,106,77,.22);
  position: relative;
}
.dx-gp-section::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.55) 30%, rgba(251,191,36,.6) 50%, rgba(255,59,48,.55) 70%, transparent);
  pointer-events: none;
}
.dx-gp-header { margin-bottom: 16px; }
.dx-gp-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #34d399, #fbbf24, #ff3b30);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dx-gp-emoji {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(52,211,153,.6));
  -webkit-text-fill-color: initial;
  background: none;
  animation: dxGpEmojiBob 2.5s ease-in-out infinite;
}
@keyframes dxGpEmojiBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-8deg); }
}
.dx-gp-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: .84rem;
  color: rgba(255,255,255,.68);
  line-height: 1.4;
}
.dx-gp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.dx-gp-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(165deg, rgba(52,211,153,.08), rgba(255,106,77,.05));
  border: 1px solid rgba(52,211,153,.28);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s, background .25s;
}
.dx-gp-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #34d399, #fbbf24, #ff3b30);
  box-shadow: 0 0 10px rgba(52,211,153,.45);
}
.dx-gp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251,191,36,.5);
  background: linear-gradient(165deg, rgba(52,211,153,.16), rgba(251,191,36,.1), rgba(255,59,48,.08));
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 28px rgba(52,211,153,.28);
}
.dx-gp-card-ico {
  width: 50px; height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(251,191,36,.15));
  border: 1px solid rgba(52,211,153,.4);
  border-radius: 12px;
  filter: drop-shadow(0 0 8px rgba(52,211,153,.4));
  transition: transform .25s;
}
.dx-gp-card:hover .dx-gp-card-ico {
  transform: scale(1.08) rotate(-4deg);
  border-color: rgba(251,191,36,.6);
}
.dx-gp-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dx-gp-card-title {
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 3px;
  text-shadow: 0 0 8px rgba(52,211,153,.25);
}
.dx-gp-card-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: .8rem;
  color: rgba(255,255,255,.72);
  line-height: 1.35;
  margin-bottom: 6px;
}
.dx-gp-card-cta {
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fbbf24;
  transition: color .2s, transform .2s;
}
.dx-gp-card:hover .dx-gp-card-cta {
  color: #ff3b30;
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .dx-gp-grid { grid-template-columns: 1fr; }
  .dx-gp-title { font-size: .9rem; letter-spacing: 1.4px; }
}

/* ============= STREAMER BENEFITS SECTION (welcome landing) ============= */
.dx-str-section {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,59,48,.22);
  position: relative;
}
.dx-str-section::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(145,70,255,.6) 30%, rgba(255,59,48,.7) 50%, rgba(240,201,64,.6) 70%, transparent);
  pointer-events: none;
}
.dx-str-header { margin-bottom: 16px; }
.dx-str-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff6a4d, #ff3b30, #f0c940);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dx-str-emoji {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 12px rgba(255,59,48,.6));
  -webkit-text-fill-color: initial;
  background: none;
  animation: dxStrEmojiBob 2.8s ease-in-out infinite;
}
@keyframes dxStrEmojiBob {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15) rotate(6deg); }
}
.dx-str-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: .84rem;
  color: rgba(255,255,255,.68);
  line-height: 1.4;
  max-width: 720px;
}
.dx-str-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dx-str-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px;
  background: linear-gradient(165deg, rgba(168,85,247,.08), rgba(255,59,48,.05));
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s, background .25s;
}
.dx-str-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff6a4d, #ff3b30);
  opacity: .55;
}
.dx-str-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,59,48,.55);
  background: linear-gradient(165deg, rgba(168,85,247,.14), rgba(255,59,48,.1), rgba(240,201,64,.06));
  box-shadow: 0 14px 32px rgba(0,0,0,.5), 0 0 26px rgba(255,59,48,.3);
}
.dx-str-card-ico {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 10px rgba(255,59,48,.45));
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168,85,247,.2), rgba(255,59,48,.15));
  border: 1px solid rgba(168,85,247,.4);
  border-radius: 12px;
  transition: transform .25s;
}
.dx-str-card:hover .dx-str-card-ico {
  transform: scale(1.08) rotate(-4deg);
  border-color: rgba(255,59,48,.6);
}
.dx-str-card-kpi {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 4px;
  background: linear-gradient(90deg, #ff6a4d, #ff3b30, #f0c940);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.dx-str-card-unit {
  font-size: .85rem;
  font-weight: 700;
  margin-left: 2px;
  -webkit-text-fill-color: initial;
  background: none;
  color: rgba(255,255,255,.55);
}
.dx-str-card-name {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  margin-top: 3px;
}
.dx-str-card-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: .8rem;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}
.dx-str-card-desc b { color: #fbbf24; }

.dx-str-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.dx-str-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #fbbf24, #ff3b30, #ff6a4d, #f0c940);
  background-size: 300% auto;
  animation: loginGrad 5s linear infinite;
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,106,77,.45), 0 0 26px rgba(255,59,48,.3), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .2s, box-shadow .2s;
}
.dx-str-cta,
.dx-str-cta:link,
.dx-str-cta:visited,
.dx-str-cta:hover,
.dx-str-cta:active,
.dx-str-cta:focus,
a.dx-str-cta,
a.dx-str-cta:hover,
a.dx-str-cta:visited {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
}
.dx-str-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255,59,48,.55), 0 0 40px rgba(255,106,77,.4), inset 0 1px 0 rgba(255,255,255,.22);
  filter: brightness(1.08);
}

@media (max-width: 720px) {
  .dx-str-grid { grid-template-columns: 1fr; }
  .dx-str-title { font-size: .9rem; letter-spacing: 1.4px; }
  .dx-str-cta { font-size: .74rem; padding: 11px 20px; letter-spacing: 1px; }
}

/* ============================================================
   MOBILE GLOBAL PASS — clean, tight, no clutter (≤720px)
   ============================================================ */
@media (max-width: 720px) {
  /* ── Site nav (top bar) ───────────────────────────── */
  body { padding-top: 6px; }
  nav.nav {
    padding: 0 12px !important;
    top: 6px !important;
  }
  .nav-inner {
    height: auto !important;
    padding: 8px 12px !important;
  }
  .btn-launcher-nav,
  #nav-open-launcher {
    display: none !important; /* launcher CTA too big for mobile, keep in drawer */
  }
  /* Hide the main horizontal nav-links on mobile (use hamburger instead) */
  .nav-links { display: none !important; }
  .nav-actions {
    gap: 4px !important;
    flex: 1 !important;
    justify-content: flex-end !important;
  }
  #affc-tier-badge { display: none !important; }
  #nav-logout-btn {
    padding: 6px 12px !important;
    font-size: .72rem !important;
  }
  #notif-bell {
    width: 34px !important;
    height: 34px !important;
  }

  /* Hide entire dashboard expanded nav on mobile — hamburger menu is enough */
  body.layout-topnav #dx-hnav-expanded { display: none !important; }
  body.layout-topnav nav.nav { min-height: 58px !important; }
  /* Hide the floating VIP discount promo on mobile (too intrusive) */
  #vip-promo-pill, #vip-promo-toast { display: none !important; }
  .dx-hnav-pills {
    width: 100%;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px;
    justify-content: flex-start !important;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .dx-hnav-pills::-webkit-scrollbar { display: none; }
  .dx-hgroup-pill {
    padding: 7px 12px !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
  }
  .dx-hgroup-pill .dx-hgroup-name {
    font-size: .64rem !important;
    letter-spacing: .8px !important;
    padding-left: 10px !important;
  }
  .dx-hgroup-pill .dx-hgroup-count { display: none; }
  .dx-hgroup-pill .dx-hgroup-chev { font-size: .62rem !important; }

  /* Home pill mobile */
  .dx-home-pill {
    padding: 7px 12px !important;
    font-size: .62rem !important;
    letter-spacing: .8px !important;
  }
  .dx-home-pill .dx-home-pill-label { display: none; }
  .dx-home-pill .dx-home-pill-ico { font-size: 1rem; }

  /* Group dropdown: fill viewport under pill */
  .dx-hgroup-dropdown {
    min-width: min(90vw, 340px) !important;
    max-width: 94vw !important;
    grid-template-columns: 1fr !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
  }
  .dx-hgroup-wrap.open .dx-hgroup-dropdown {
    transform: none !important;
  }

  /* Currency chips: full-width row, icons only */
  #dx-currencies {
    width: 100%;
    justify-content: space-around !important;
    gap: 6px;
    order: 2;
  }
  .dx-currency-chip {
    flex: 1;
    justify-content: center;
    padding: 5px 8px !important;
    gap: 6px !important;
  }
  .dx-currency-chip .dx-currency-label { display: none !important; }
  .dx-currency-chip .dx-currency-val { font-size: .78rem !important; }

  /* ── "Minha Conta" header row — hide subtitle, compact ── */
  body.layout-topnav .dashboard {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 14px !important;
  }
  body.layout-topnav .dashboard > div:first-child {
    margin-bottom: 10px !important;
  }
  #dash-page-title + div { display: none !important; }

  /* ── Flash sale + chat banner: stack vertically ── */
  #dx-promo-chat-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #fsb-inner.fsb-animated,
  #cb-inner.cb-animated {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  #fsb-desc,
  #chat-banner [style*="font-size:.95rem"] {
    font-size: .82rem !important;
    white-space: normal !important;
  }
  #chat-banner [style*="font-size:.75rem"] { font-size: .7rem !important; }

  /* ── Welcome landing: banners 1-col, GP 1-col, streamer 1-col ── */
  #tab-welcome { padding: 16px 14px !important; }
  #tab-welcome .card-title { font-size: .9rem !important; letter-spacing: 1.3px !important; }
  .dx-welcome-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .dxw-banner-head { padding: 14px 14px 12px !important; gap: 20px !important; }
  .dxw-banner-ico { width: 48px !important; height: 48px !important; font-size: 1.5rem !important; border-radius: 12px !important; }
  .dxw-banner-title { font-size: .88rem !important; letter-spacing: 1.2px !important; }
  .dxw-banner-sub { font-size: .72rem !important; }
  .dxw-banner-count { font-size: .62rem !important; }
  .dxw-tile { padding: 10px 12px !important; font-size: .82rem !important; }
  .dxw-tile-ico { width: 28px !important; height: 28px !important; }

  .dx-gp-section, .dx-str-section {
    margin-top: 22px !important;
    padding-top: 18px !important;
  }
  .dx-gp-grid, .dx-str-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .dx-gp-card { padding: 12px 14px !important; gap: 10px !important; }
  .dx-gp-card-ico { width: 42px !important; height: 42px !important; font-size: 1.3rem !important; }
  .dx-gp-card-title { font-size: .74rem !important; letter-spacing: 1px !important; }
  .dx-gp-card-desc { font-size: .75rem !important; }
  .dx-str-card { padding: 12px 14px !important; }
  .dx-str-card-ico { width: 38px !important; height: 38px !important; font-size: 1.35rem !important; }
  .dx-str-card-kpi { font-size: 1.2rem !important; }
  .dx-str-card-name { font-size: .72rem !important; letter-spacing: 1px !important; }
  .dx-str-card-desc { font-size: .76rem !important; }

  /* ── Tab panels (cards) compact ── */
  body.layout-topnav .tab-panel.card { padding: 16px 14px !important; border-radius: 14px !important; }
  body.layout-topnav .tab-panel.card > .card-title {
    font-size: .88rem !important;
    letter-spacing: 1.2px !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Char card — compact */
  .char-item { padding: 10px 12px !important; }
  .char-badges { gap: 4px !important; }
  .char-badge { font-size: .66rem !important; padding: 2px 6px !important; }
  .char-badges .char-reset-btn { padding: 3px 8px !important; font-size: .68rem !important; }
  .char-item-footer .btn { padding: 6px 10px !important; font-size: .72rem !important; }

  /* Currency chips in pill header were already handled, double-ensure */
  body.layout-topnav #dx-promo-chat-row { margin-bottom: 10px !important; }

  /* Chat banner shake/bounce softer on mobile */
  #chat-banner.has-unread #cb-inner {
    animation: fsb-gradient 2s ease infinite, cbUnreadPulse 1.3s ease-in-out infinite !important;
  }

  /* Mystery box, VIP, Kill feed, etc. — inline grids collapse to 1 col */
  body.layout-topnav .tab-panel [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.layout-topnav .tab-panel [style*="minmax(140px"],
  body.layout-topnav .tab-panel [style*="minmax(150px"],
  body.layout-topnav .tab-panel [style*="minmax(160px"],
  body.layout-topnav .tab-panel [style*="minmax(180px"],
  body.layout-topnav .tab-panel [style*="minmax(220px"],
  body.layout-topnav .tab-panel [style*="minmax(260px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Reduce KPI font sizes for readability */
  body.layout-topnav .tab-panel [style*="font-size:1.4rem"],
  body.layout-topnav .tab-panel [style*="font-size:1.5rem"],
  body.layout-topnav .tab-panel [style*="font-size:1.6rem"],
  body.layout-topnav .tab-panel [style*="font-size:1.8rem"],
  body.layout-topnav .tab-panel [style*="font-size:2"] {
    font-size: 1.2rem !important;
  }

  /* VIP promo pill floating — shrink */
  #vip-promo-pill { padding: 7px 12px !important; font-size: .7rem !important; bottom: 14px !important; }
  #vip-promo-pill[style*="right"] { right: 12px !important; }
  #vip-promo-pill[style*="left"] { left: 12px !important; }
  #vip-promo-toast { width: calc(100vw - 24px) !important; max-width: 300px !important; bottom: 62px !important; }

  /* Section titles with Orbitron: tighten */
  .dx-gp-title, .dx-str-title { font-size: .88rem !important; letter-spacing: 1.2px !important; }
  .dx-gp-sub, .dx-str-sub { font-size: .78rem !important; }

  /* Modals: full-width with breathing room */
  .auth-modal-inner, #auth-modal > div {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ── Even tighter for very small phones (≤420px) ── */
@media (max-width: 420px) {
  body.layout-topnav #dx-currencies { flex-wrap: wrap; }
  .dx-currency-chip { flex: 1 1 30%; min-width: 0; }
  .dx-hgroup-pill .dx-hgroup-name { font-size: .58rem !important; }
  body.layout-topnav .tab-panel [style*="minmax"] {
    grid-template-columns: 1fr !important;
  }
  .dxw-banner-title { font-size: .8rem !important; }
  #chat-banner [style*="font-size:2rem"] { font-size: 1.5rem !important; }
}

/* Ruud/WCoin/Gold numeric values — unified mono font with neon glow */
body.layout-topnav .tab-panel b[style*="color:#fbbf24"],
body.layout-topnav .tab-panel b[style*="color:#f59e0b"],
body.layout-topnav .tab-panel .char-meta-gold {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(251,191,36,.4);
}

/* ============= STREAMER PAGE — polish ============= */
body.layout-topnav #tab-streamer,
body.layout-topnav #tab-streamer * {
  color: rgba(255,255,255,.92);
}
body.layout-topnav #tab-streamer [style*="color:rgba(255,255,255,.35)"],
body.layout-topnav #tab-streamer [style*="color:rgba(255,255,255,.4)"],
body.layout-topnav #tab-streamer [style*="color:rgba(255,255,255,.45)"],
body.layout-topnav #tab-streamer [style*="color:rgba(255,255,255,.5)"],
body.layout-topnav #tab-streamer [style*="color:rgba(255,255,255,.55)"],
body.layout-topnav #tab-streamer [style*="color:var(--text-muted)"] {
  color: rgba(255,255,255,.78) !important;
}
body.layout-topnav #tab-streamer [style*="color:rgba(255,255,255,.6)"],
body.layout-topnav #tab-streamer [style*="color:rgba(255,255,255,.7)"],
body.layout-topnav #tab-streamer [style*="color:var(--text)"] {
  color: #fff !important;
}
body.layout-topnav #tab-streamer [style*="color:var(--text-bright)"],
body.layout-topnav #tab-streamer .form-label {
  color: #fff !important;
  opacity: 1 !important;
}

/* Streamer cards — bigger padding and clearer hierarchy */
body.layout-topnav #tab-streamer > #str-my-container > div {
  background: linear-gradient(165deg, rgba(255,106,77,.1), rgba(240,201,64,.05)) !important;
  border: 1px solid rgba(255,106,77,.3) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  margin-bottom: 18px !important;
}

/* Coupon card — prominent and well-spaced */
body.layout-topnav #tab-streamer [id*="coupon"],
body.layout-topnav #tab-streamer [class*="coupon"],
body.layout-topnav #tab-streamer [style*="couponCode"],
body.layout-topnav #tab-streamer [style*="ff6b4a"] + div,
body.layout-topnav #tab-streamer div:has(> code),
body.layout-topnav #tab-streamer code {
  background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(255,59,48,.12), rgba(255,106,77,.08)) !important;
  border: 1.5px solid rgba(251,191,36,.5) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251,191,36,.5) !important;
  display: inline-block;
  margin: 12px 0 !important;
}
/* Heading "Meu Cupom" etc */
body.layout-topnav #tab-streamer h3,
body.layout-topnav #tab-streamer h4 {
  font-family: 'Cinzel', serif !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #fbbf24, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 0 0 14px !important;
}

/* Stats KPIs inside streamer cards */
body.layout-topnav #tab-streamer [style*="font-size:1.4rem"],
body.layout-topnav #tab-streamer [style*="font-size:1.6rem"],
body.layout-topnav #tab-streamer [style*="font-size:1.8rem"],
body.layout-topnav #tab-streamer [style*="font-size:2"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  line-height: 1.1 !important;
}
/* Status badge chip */
body.layout-topnav #tab-streamer [style*="border-radius:999px"],
body.layout-topnav #tab-streamer [style*="border-radius:20px"] {
  padding: 6px 14px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
}
/* Buttons inside streamer card */
body.layout-topnav #tab-streamer .btn {
  padding: 10px 18px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
}

/* ============= LANG SWITCHER — solid button + escape stacking via fixed ============= */
#lang-switcher { position: relative !important; z-index: 100001 !important; }
#lang-globe-btn {
  background-color: #0f0730 !important;
  background-image: linear-gradient(135deg, rgba(240,201,64,.35), rgba(255,106,77,.45)) !important;
  border: 1.5px solid #ff6a4d !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: all .2s !important;
  box-shadow:
    0 2px 10px rgba(255,106,77,.4),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#lang-globe-btn:hover {
  background-image: linear-gradient(135deg, rgba(240,201,64,.55), rgba(255,106,77,.65)) !important;
  border-color: #ff3b30 !important;
  box-shadow: 0 6px 18px rgba(255,106,77,.55), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transform: translateY(-1px);
}
/* Dropdown — fully opaque solid bg, max z-index, always on top */
html body #lang-dropdown,
#lang-dropdown {
  background: #0a0225 !important;
  background-color: #0a0225 !important;
  background-image: linear-gradient(165deg, #140838, #08021e) !important;
  border: 1.5px solid #ff6a4d !important;
  border-radius: 14px !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.95),
    0 0 60px rgba(255,106,77,.45),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding: 6px !important;
  z-index: 2147483647 !important;
  min-width: 180px !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
/* Notif panel — same treatment */
html body #notif-panel,
#notif-panel {
  background: #0a0225 !important;
  background-color: #0a0225 !important;
  background-image: linear-gradient(165deg, #140838, #08021e) !important;
  border: 1.5px solid #ff6a4d !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.95), 0 0 48px rgba(255,106,77,.4), inset 0 1px 0 rgba(255,255,255,.06) !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
/* Force nav-actions parents to not clip; lift switcher/bell stack */
nav.nav, .nav-inner, .nav-actions, #lang-switcher, #notif-bell-wrap {
  overflow: visible !important;
}
/* Raise the entire nav-inner + nav-actions above the pill row (#dx-hnav-expanded) */
.nav-inner { position: relative !important; z-index: 100020 !important; }
.nav-actions { position: relative !important; z-index: 100025 !important; }
#lang-switcher, #notif-bell-wrap {
  position: relative !important;
  z-index: 100030 !important;
  pointer-events: auto !important;
}
#lang-globe-btn, #notif-bell, #notif-bell-wrap button {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Keep currency chips below dropdowns (no stacking context) */
#dx-currencies, .dx-currency-chip { z-index: auto !important; }
#lang-dropdown .lang-opt-btn {
  background: transparent !important;
  color: #fff !important;
  border-radius: 10px !important;
  transition: all .15s !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .9rem !important;
}
#lang-dropdown .lang-opt-btn:hover {
  background: linear-gradient(135deg, rgba(240,201,64,.2), rgba(255,106,77,.22)) !important;
  color: #fff !important;
}
#lang-dropdown .lang-opt-btn[data-lang][style*="rgba(249,115,22,.18)"],
#lang-dropdown .lang-opt-btn.active-lang,
#lang-dropdown .lang-opt-btn[style*="#ff8a65"] {
  background: linear-gradient(135deg, #ff6a4d, #ff3b30) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

@media (max-width: 860px) {
  #dx-hnav-expanded { padding: 6px 12px 8px; gap: 6px; }
  .dx-hgroup-pill { padding: 7px 12px; gap: 7px; }
  .dx-hgroup-pill .dx-hgroup-name { font-size: .64rem; letter-spacing: 1px; padding-left: 10px; }
  .dx-hgroup-pill .dx-hgroup-count { font-size: .56rem; padding: 1px 6px; }
  .dx-hgroup-dropdown { grid-template-columns: 1fr; min-width: 260px; }
  .dx-hgroup-tile { padding: 8px 10px; font-size: .82rem; }
}
@media (max-width: 520px) {
  #dx-hnav-expanded { padding: 6px 8px 8px; gap: 4px; }
  .dx-hgroup-pill .dx-hgroup-name { font-size: .6rem; letter-spacing: .6px; }
}

/* Old chat button moved to banner — hide permanently */
body.layout-topnav #chat-btn-wrap,
#chat-btn-wrap { display: none !important; }

/* ============= LAUNCHER BUTTON — DraxMU animated gradient ============= */
.btn-launcher-nav,
#nav-open-launcher,
a.btn-launcher-nav {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30, #fbbf24, #ff3b30, #ff6a4d, #f0c940) !important;
  background-size: 300% auto !important;
  animation: loginGrad 5s linear infinite !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  box-shadow:
    0 4px 18px rgba(255,106,77,.45),
    0 0 26px rgba(255,59,48,.3),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, filter .2s !important;
}
.btn-launcher-nav:hover,
#nav-open-launcher:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 8px 24px rgba(255,106,77,.6),
    0 0 36px rgba(255,59,48,.45),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.btn-launcher-nav:active,
#nav-open-launcher:active {
  transform: translateY(0) !important;
  filter: brightness(.95) !important;
}
.btn-launcher-nav svg,
#nav-open-launcher svg {
  filter: drop-shadow(0 0 4px rgba(255,255,255,.5));
}

/* ============= PROMO + CHAT 2-COL ROW ============= */
#dx-promo-chat-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
/* When flash-sale is hidden, chat banner takes full width */
#dx-promo-chat-row:has(#flash-sale-banner[style*="display:none"]),
#dx-promo-chat-row:has(#flash-sale-banner[style*="display: none"]) {
  grid-template-columns: 1fr !important;
}
#dx-promo-chat-row:has(#flash-sale-banner[style*="display:none"]) #flash-sale-banner,
#dx-promo-chat-row:has(#flash-sale-banner[style*="display: none"]) #flash-sale-banner {
  display: none !important;
}
@media (max-width: 860px) {
  #dx-promo-chat-row { grid-template-columns: 1fr !important; }
}

/* Chat banner — mirrors .fsb-animated but tuned for chat context */
#chat-banner { cursor: pointer; }
#cb-inner.cb-animated {
  background: linear-gradient(270deg, #040015, #0a032a, #1a0a4a, #1f3f7d, #0f6fb8, #f0c940, #ff6a4d, #ff3b30, #1a0a4a, #040015) !important;
  background-size: 400% 400% !important;
  animation: fsb-gradient 7s ease infinite !important;
  border: 1px solid rgba(240,201,64,.55) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 0 36px rgba(240,201,64,.32),
    0 0 60px rgba(255,106,77,.16),
    0 2px 14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .22s;
}
#chat-banner:hover #cb-inner {
  transform: translateY(-2px);
  box-shadow:
    0 0 50px rgba(240,201,64,.5),
    0 0 80px rgba(255,59,48,.25),
    0 8px 24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#chat-banner.has-unread #cb-inner {
  border: 2px solid #ff3b30 !important;
  animation: fsb-gradient 2s ease infinite, cbUnreadPulse 1.1s ease-in-out infinite, cbUnreadShake 3.2s ease-in-out infinite !important;
}
#chat-banner.has-unread { animation: cbWrapBounce .9s ease-in-out infinite; }
@keyframes cbUnreadPulse {
  0%, 100% { box-shadow: 0 0 36px rgba(255,59,48,.6), 0 0 0 0 rgba(255,59,48,.7), inset 0 1px 0 rgba(255,255,255,.1); }
  50%      { box-shadow: 0 0 64px rgba(255,59,48,.9), 0 0 0 14px rgba(255,59,48,0), inset 0 1px 0 rgba(255,255,255,.18); }
}
@keyframes cbWrapBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
@keyframes cbUnreadShake {
  0%, 90%, 100% { transform: translateX(0); }
  92%           { transform: translateX(-3px); }
  94%           { transform: translateX(3px); }
  96%           { transform: translateX(-2px); }
  98%           { transform: translateX(2px); }
}
#chat-banner.has-unread #cb-inner > div:first-child + div + div {
  /* shake the 💬 icon a bit */
  animation: cbIconWiggle 1.4s ease-in-out infinite;
}
@keyframes cbIconWiggle {
  0%, 70%, 100% { transform: rotate(0deg); }
  80%           { transform: rotate(-12deg) scale(1.15); }
  90%           { transform: rotate(12deg) scale(1.15); }
}
#chat-banner.has-unread #cb-unread {
  animation: cbBadgeBounce .7s ease-in-out infinite !important;
}
@keyframes cbBadgeBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* ============= FLASH SALE — DraxMU palette ============= */
#fsb-inner.fsb-animated,
.fsb-animated {
  background: linear-gradient(270deg, #040015, #0a032a, #1a0a4a, #3a1278, #6f1fb8, #ff6a4d, #ff3b30, #f0c940, #ff6a4d, #040015) !important;
  background-size: 400% 400% !important;
  border: 1px solid rgba(255,106,77,.55) !important;
  box-shadow:
    0 0 36px rgba(255,106,77,.35),
    0 0 60px rgba(255,59,48,.18),
    0 2px 14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#fsb-inner .fsb-shimmer,
.fsb-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,59,48,.35), rgba(240,201,64,.28), transparent) !important;
  width: 100px !important;
}
#fsb-desc, #flash-sale-banner #fsb-desc { color: #fff !important; text-shadow: 0 0 12px rgba(255,106,77,.6) !important; }
#flash-sale-banner [data-i18n="promo.label"] {
  color: #f0c940 !important;
  text-shadow: 0 0 10px rgba(240,201,64,.5) !important;
  font-weight: 700 !important;
}
#fsb-claim-btn {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30) !important;
  background-size: 200% auto !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(255,106,77,.55) !important;
  animation: loginGrad 4s linear infinite !important;
  font-weight: 700 !important;
}
#fsb-claim-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(255,59,48,.6) !important;
}

/* ============= NOTIFICATIONS — DraxMU palette ============= */
#notif-bell, nav #notif-bell {
  color: rgba(255,255,255,.78) !important;
  transition: color .2s, transform .2s, filter .2s !important;
}
#notif-bell:hover, nav #notif-bell:hover {
  color: #ff3b30 !important;
  filter: drop-shadow(0 0 8px rgba(255,59,48,.55));
  transform: scale(1.08);
}
#notif-badge, nav #notif-badge {
  background: linear-gradient(135deg, #ff6a4d, #ff3b30) !important;
  box-shadow: 0 0 10px rgba(255,59,48,.6), 0 0 0 2px rgba(8,2,30,.9) !important;
  color: #fff !important;
  border: none !important;
}

/* Notifications panel */
#notif-panel {
  background: linear-gradient(165deg, #0e0530, #08021e) !important;
  border: 1px solid rgba(255,106,77,.35) !important;
  border-radius: 14px !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.75),
    0 0 50px rgba(255,106,77,.18) !important;
  backdrop-filter: blur(14px) !important;
}
#notif-panel > div:first-child {
  border-bottom: 1px solid rgba(255,106,77,.22) !important;
  background: linear-gradient(90deg, rgba(240,201,64,.06), rgba(255,59,48,.04)) !important;
}
#notif-panel > div:first-child > span {
  background: linear-gradient(90deg, #f0c940, #ff6a4d, #ff3b30) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1.3px !important;
}
#notif-list .notif-item,
#notif-list > div {
  border-bottom: 1px solid rgba(255,106,77,.1) !important;
}
#notif-list .notif-unread,
#notif-list .notif-item.unread {
  background: linear-gradient(90deg, rgba(255,106,77,.12), transparent) !important;
  border-left: 3px solid #ff3b30 !important;
}


/* === Mobile fixes (logo dup + hero-scroll overlap) === */
@media (max-width: 960px) {
  .nav-logo { display: none !important; }
}
@media (max-width: 720px) {
  .hero-scroll { display: none !important; }
}


/* ── Twitch Widget ─────────────────────────────── */
#twitch-widget {
  position:fixed; bottom:20px; right:20px; z-index:9998;
  width:210px; max-height:260px;
  background:rgba(10,5,15,.96);
  border:1px solid rgba(145,71,255,.22);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(145,71,255,.08);
  backdrop-filter:blur(20px);
  overflow:hidden;
  font-family:var(--font-body);
  animation:slideUpIn .3s ease;
}
@keyframes slideUpIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.tw-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px;
  background:linear-gradient(135deg,rgba(100,65,165,.6),rgba(145,71,255,.3));
  cursor:pointer; user-select:none;
}
.tw-header-left { display:flex; align-items:center; gap:8px; }
.tw-live-dot { width:8px; height:8px; border-radius:50%; background:#ff4444; box-shadow:0 0 8px #ff4444; animation:pulse-dot 1.5s infinite; }
.tw-title { font-size:.76rem; font-weight:600; color:#e2d8ff; }
.tw-toggle-btn { background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; font-size:.75rem; padding:2px 6px; }
.tw-body { max-height:195px; overflow-y:auto; }
.tw-streamer {
  display:flex; gap:8px; align-items:flex-start;
  padding:7px 10px; text-decoration:none; color:inherit;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s;
}
.tw-streamer:hover { background:rgba(145,71,255,.1); }
.tw-streamer:last-child { border-bottom:none; }
.tw-streamer-live { background:rgba(255,68,68,.04); }
.tw-thumb { width:60px; height:34px; border-radius:4px; object-fit:cover; flex-shrink:0; border:1px solid rgba(255,255,255,.1); }
.tw-thumb-placeholder { width:60px; height:34px; border-radius:4px; background:rgba(145,71,255,.2); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.tw-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid rgba(145,71,255,.4); }
.tw-avatar-placeholder { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#ff3b30,#c026d3); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:.75rem; flex-shrink:0; }
.tw-info { flex:1; min-width:0; }
.tw-name { font-size:.75rem; font-weight:700; color:#e2d8ff; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tw-game { font-size:.72rem; color:rgba(255,255,255,.5); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tw-meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tw-live-badge { font-size:.62rem; color:#ff6b6b; font-weight:700; letter-spacing:.5px; }
.tw-offline-badge { font-size:.62rem; color:rgba(255,255,255,.35); }
.tw-viewers { font-size:.68rem; color:rgba(255,255,255,.5); }
.tw-duration { font-size:.65rem; color:rgba(255,255,255,.35); }
.tw-coupon { font-size:.68rem; color:#f0c940; margin-top:3px; }



/* Hero title: split MAX 50 (white) + RESETS (gradient) on first line */
.hero-title .ht-row { display: block; }
.hero-title .ht-row > i {
  display: inline;
  font-style: normal;
}
.hero-title .ht-white {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  background: none !important;
  filter: none !important;
  letter-spacing: -2px;
}
.hero-title .ht-row > i[data-i18n='hero.title.suffix'] {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,106,77,.4));
}