/* ============================================================
   MuSplit — Home (alta fidelidade, fiel ao Figma "Site")
   Paleta: #009BFF (azul arcano) sobre #0C0C0D
   Display: Albertus Nova (fallback Cinzel) · UI: Work Sans
   ============================================================ */

:root {
  --mu-blue: #009BFF;
  --mu-blue-deep: #0024B6;
  --mu-ink: #0C0C0D;
  --mu-black: #0A0A0A;
  --mu-panel: rgba(42, 44, 45, 0.83);
  --mu-line: rgba(24, 24, 26, 0.4);
  --mu-text: #F2F2F2;
  --mu-nav: #BABABF;
  --mu-muted: #8D8D8D;
  --mu-green: #00E32A;
  --mu-green-ring: #007708;
  --font-display: "Albertus Nova", "Cinzel", Georgia, serif;
  --font-ui: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Bahnschrift", "Barlow", "Work Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* transição suave entre páginas (cross-fade nativo; só em navegadores que suportam — progressive enhancement) */
@view-transition { navigation: auto; }

/* perf: não renderiza/anima seções fora da viewport até chegarem perto (LCP/CPU mais leves) */
.mu-faq-section, .mu-footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* Acessibilidade: foco visível na navegação por teclado (não aparece no clique de mouse) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mu-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Skip-link: pular direto pro conteúdo (visível só ao focar com Tab) */
.mu-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--mu-blue); color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: top 0.18s ease;
}
.mu-skip:focus { top: 0; }
/* alvo do skip-link recebe foco mas sem o anel (evita caixa azul na seção toda) */
#conteudo:focus, #conteudo:focus-visible { outline: none; }
body {
  background: var(--mu-ink);
  color: var(--mu-text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.mu-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; }

/* ---------- tipografia ---------- */
.mu-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mu-text);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.mu-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mu-text);
  margin: 0;
}
.mu-kicker {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--mu-nav);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mu-body { font-family: var(--font-body); font-weight: 300; font-size: 17px; color: var(--mu-nav); }

/* ---------- header pill ---------- */
.mu-header-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 24px 8px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: padding 0.3s ease;
}
.mu-header {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 1180px;
  height: 64px;
  padding: 0 12px 0 18px;
  border-radius: 555px;
  background: rgba(12, 12, 13, 0.86);
  box-shadow: inset 0 0 0 1px var(--mu-line), 0 0 12px 4px rgba(0, 0, 0, 0.1), 0 4px 8px 2px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.mu-header.scrolled {
  background: rgba(10, 10, 10, 0.95);
  box-shadow: inset 0 0 0 1px var(--mu-line), 0 8px 28px rgba(0, 0, 0, 0.55);
}
.mu-logo-mark {
  display: block;
  width: 42px; height: 40px;
  background: url(assets/logo-dragon.png) 50% 50% / 331% 192% no-repeat;
  flex: 0 0 auto;
}
.mu-nav-links { display: flex; align-items: center; flex: 1; }
.mu-nav-links a {
  display: flex; align-items: center; gap: 5px;
  font-weight: 500; font-size: 15px; letter-spacing: 0.05em;
  color: var(--mu-nav);
  padding: 10px 13px;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: color 0.18s ease;
  white-space: nowrap;
}
.mu-nav-links a:hover, .mu-nav-links a.on { color: #fff; }
.mu-nav-links a svg { opacity: 0.7; }

/* ---------- dropdown flutuante do menu ---------- */
.mu-nav-item { position: relative; }
.mu-nav-sub {
  display: flex; align-items: center; gap: 6px;
  font-family: inherit; font-weight: 500; font-size: 15px; letter-spacing: 0.05em;
  color: var(--mu-nav);
  background: none; border: none;
  padding: 10px 13px; border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: color 0.18s ease;
  white-space: nowrap;
  cursor: pointer;
}
.mu-nav-sub.on, .mu-nav-item:hover .mu-nav-sub, .mu-nav-sub:focus-visible { color: #fff; }
.mu-nav-sub .car { opacity: 0.6; transition: transform 0.22s ease; }
.mu-nav-item:hover .car, .mu-nav-item:focus-within .car { transform: rotate(180deg); }
.mu-dropdown {
  position: absolute; top: calc(100% + 22px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px;
  display: flex; flex-direction: column;
  padding: 8px;
  border-radius: 16px;
  background: rgba(12, 12, 13, 0.96);
  box-shadow: inset 0 0 0 1px var(--mu-line), 0 18px 44px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 110;
}
.mu-dropdown::before { content: ""; position: absolute; top: -24px; left: 0; right: 0; height: 24px; }
.mu-nav-item:hover .mu-dropdown, .mu-nav-item:focus-within .mu-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mu-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  font-weight: 500; font-size: 14px;
  color: var(--mu-nav);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.mu-dropdown a:hover { color: #fff; background: rgba(0, 155, 255, 0.13); }
.mu-dropdown a small { margin-left: auto; font-size: 11px; color: var(--mu-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.mu-dropdown .sep { height: 1px; background: rgba(118, 118, 126, 0.22); margin: 6px 10px; }
.mu-header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.mu-login-link {
  font-weight: 500; font-size: 15px; letter-spacing: 0.05em;
  color: var(--mu-nav);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  background: none; border: none; padding: 8px 4px;
  transition: color 0.18s ease;
}
.mu-login-link:hover { color: #fff; }

/* botão azul (Cadastre-se / CTAs) */
.mu-btn-blue {
  position: relative;
  border: none;
  border-radius: 100px;
  padding: 4px;
  background: linear-gradient(180deg, var(--mu-blue) 0%, var(--mu-blue-deep) 100%);
  box-shadow: 0 21px 32px rgba(0, 36, 182, 0.12), 0 4px 13px rgba(0, 155, 255, 0.24), 0 1px 0 var(--mu-blue-deep);
  transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.mu-btn-blue > span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 100px;
  padding: 8px 22px;
  background: var(--mu-blue);
  box-shadow:
    inset 0 1.4px 1.4px -1.5px rgba(255, 255, 255, 0.38),
    inset 0 6px 6px -2.3px rgba(255, 255, 255, 0.15),
    inset 0 -1.5px 2px -1.5px rgba(0, 36, 182, 0.88),
    inset 0 -4px 5.5px -2.3px rgba(0, 36, 182, 0.68);
  font-weight: 500; font-size: 16px; color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mu-btn-blue:hover { filter: brightness(1.12); box-shadow: 0 21px 40px rgba(0, 36, 182, 0.2), 0 4px 22px rgba(0, 155, 255, 0.45), 0 1px 0 var(--mu-blue-deep); }
.mu-btn-blue:active { transform: scale(0.97); }
.mu-btn-blue.lg > span { padding: 12px 34px; font-size: 18px; }

/* pill online */
.mu-online-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 14px;
  border-radius: 100px;
  background: rgba(10, 10, 10, 0.78);
  box-shadow: inset 0 0 0 1px rgba(24, 24, 26, 0.9);
  font-family: "Inter", var(--font-ui);
  font-weight: 700; font-size: 14px; color: #fff;
  white-space: nowrap;
}
.mu-online-pill .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mu-green);
  box-shadow: 0 0 0 1px var(--mu-green-ring), 0 0 10px rgba(0, 227, 42, 0.8);
  animation: mu-pulse 1.8s ease-in-out infinite;
}
.mu-online-pill .label { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
@keyframes mu-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--mu-green-ring), 0 0 4px rgba(0, 227, 42, 0.5); }
  50% { box-shadow: 0 0 0 1px var(--mu-green-ring), 0 0 14px rgba(0, 227, 42, 1); }
}

/* ---------- hero ---------- */
.mu-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--mu-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 80px;
}
.mu-hero-bg {
  position: absolute; inset: -40px;
  background: url(assets/hero-bg.jpg) center / cover no-repeat;
  will-change: transform;
}
.mu-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  /* vinheta cinematográfica (escurece as bordas, foco no centro) + véu vertical de leitura */
  background:
    radial-gradient(ellipse 78% 72% at 50% 40%, transparent 52%, rgba(6, 6, 9, 0.6) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.62) 0%, rgba(10, 10, 10, 0.28) 45%, rgba(10, 10, 10, 0.96) 100%);
}
.mu-hero-char {
  position: absolute;
  right: -7%; bottom: -3%;
  width: 72%;
  max-width: 1100px;
  aspect-ratio: 1821 / 1405;
  background: url(assets/hero-character.png) 100% 100% / contain no-repeat;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
  /* brilho azul mais forte ao redor dela (estático = performático) */
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(0, 155, 255, 0.4));
}
/* aura + raios de luz atrás da personagem (animados, leves) */
.mu-hero-aura {
  position: absolute;
  right: 4%; bottom: 6%;
  width: 46%; max-width: 680px; aspect-ratio: 1 / 1;
  pointer-events: none; z-index: 0;
  will-change: transform;
}
.mu-hero-aura::before {     /* glow pulsante */
  content: ""; position: absolute; inset: 4%;
  background: radial-gradient(circle at 50% 46%, rgba(200, 230, 255, 0.55) 0%, rgba(90, 170, 240, 0.16) 42%, transparent 70%);
  filter: blur(26px);
  animation: mu-aura-pulse 4.6s ease-in-out infinite;
}
.mu-hero-aura::after {      /* raios girando, mascarados pra sumir nas bordas */
  content: ""; position: absolute; inset: -6%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(210, 233, 255, 0.20) 3deg, transparent 8deg,
    transparent 42deg, rgba(210, 233, 255, 0.10) 45deg, transparent 50deg,
    transparent 96deg, rgba(210, 233, 255, 0.18) 99deg, transparent 104deg,
    transparent 152deg, rgba(210, 233, 255, 0.10) 155deg, transparent 160deg,
    transparent 208deg, rgba(210, 233, 255, 0.16) 211deg, transparent 216deg,
    transparent 268deg, rgba(210, 233, 255, 0.10) 271deg, transparent 276deg,
    transparent 320deg, rgba(210, 233, 255, 0.18) 323deg, transparent 328deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,0.5) 30%, transparent 60%);
  mask-image: radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,0.5) 30%, transparent 60%);
  animation: mu-rays-spin 28s linear infinite;
}
@keyframes mu-aura-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes mu-rays-spin { to { transform: rotate(360deg); } }
.mu-hero-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
  text-align: center;
  will-change: opacity, filter, transform;
}
.mu-hero-lockup {
  /* a arte real dentro do PNG (1920x997) ocupa 644x512 no centro (margens
     transparentes: 638px laterais, 264px topo). O recorte abaixo é calculado
     desse bbox: size 1920/644 x 997/512, pos-y 264/(997-512). Sem corte e
     sem margem fantasma, em qualquer largura de tela. */
  width: min(545px, 72vw);
  aspect-ratio: 644 / 512;
  background: url(assets/hero-lockup.png) 50% 54.4% / 298.2% 194.8% no-repeat;
  filter: drop-shadow(0 18px 50px rgba(0, 90, 200, 0.35));
}
.mu-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.mu-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(10, 10, 10, 0.66);
  box-shadow: inset 0 0 0 1px rgba(118, 118, 126, 0.35);
  font-family: "Ropa Sans", var(--font-ui);
  font-size: 14px; letter-spacing: 0.06em;
  color: var(--mu-nav);
  text-transform: uppercase;
}
.mu-chip strong { color: #fff; font-weight: 700; }
.mu-scroll-hint {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.62); /* AA: 0.45 falhava (~4.15:1) sobre o hero escuro */
  font-family: "Ropa Sans", var(--font-ui);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  animation: mu-bob 2.4s ease-in-out infinite;
}
@keyframes mu-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }

/* botão hexagonal JOGUE GRÁTIS (arte do figma) */
.mu-btn-hex {
  position: relative;
  width: 270px; height: 80px;
  border: none; background: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
  transition: filter 0.25s ease, transform 0.15s ease;
}
.mu-btn-hex::before {
  content: "";
  position: absolute; inset: 0;
  background: url(assets/btn-hex.png) 50% 50% / 100% 100% no-repeat;
}
.mu-btn-hex > span {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600; font-size: 24px; letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.mu-btn-hex:hover { filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(0, 155, 255, 0.55)) brightness(1.15); }
.mu-btn-hex:active { transform: scale(0.97); }

/* partículas */
.mu-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mu-particles span {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 210, 255, 0.95) 0%, rgba(0, 155, 255, 0) 70%);
  box-shadow: 0 0 6px rgba(120, 200, 255, 0.8); /* bloom de ember arcano */
  animation: mu-float linear infinite;
  opacity: 0;
}
@keyframes mu-float {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  88% { opacity: 0.5; }
  100% { transform: translateY(-46vh) scale(1.15); opacity: 0; }
}

/* ---------- seções escuras ---------- */
.mu-section { position: relative; padding: 96px 0; background: var(--mu-black); }
.mu-section-edge {
  height: 26px;
  background: url(assets/texture-strip.jpg) top left / 800px 93px repeat;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.8), inset 0 -6px 12px rgba(0, 0, 0, 0.8);
}

/* ---------- novidades / carrossel ---------- */
.mu-news-stage {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: #101012;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(24, 24, 26, 0.8);
}
.mu-news-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity 0.5s ease;
}
.mu-news-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.55) 52%, rgba(8, 8, 8, 0.15) 100%);
}
.mu-news-content {
  position: relative;
  padding: 56px;
  max-width: 660px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.mu-news-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.09;
  text-transform: uppercase;
  color: var(--mu-text);
  margin: 0;
}
.mu-news-sub { font-family: var(--font-body); font-weight: 300; font-size: 17px; color: var(--mu-nav); margin: 0; }
.mu-btn-ghost {
  border: none;
  background: #fff;
  color: #0A0A0A;
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 2px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.mu-btn-ghost:hover { background: var(--mu-blue); color: #fff; box-shadow: 0 4px 22px rgba(0, 155, 255, 0.45); }
.mu-btn-ghost:active { transform: scale(0.97); }

/* novidades — card único + barra de controle embaixo (setas + dots; não sobrepõe nada) */
.mu-news-carousel { position: relative; }
.mu-news-cat {
  font-family: "Ropa Sans", var(--font-ui);
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mu-blue);
}
.mu-news-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.mu-news-nav {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  border: none; cursor: pointer;
  background: rgba(20, 20, 22, 0.92); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  display: grid; place-items: center;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.mu-news-nav:hover { background: var(--mu-blue); box-shadow: 0 4px 18px rgba(0, 155, 255, 0.4); }
.mu-news-nav:active { transform: scale(0.92); }
.mu-news-dots { display: flex; justify-content: center; gap: 8px; }
.mu-news-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: none; cursor: pointer;
  background: rgba(118, 118, 126, 0.5);
  transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.mu-news-dot.on { background: var(--mu-blue); width: 22px; border-radius: 5px; }

/* ---------- faixa BAIXE AGORA ---------- */
.mu-cta-strip {
  position: relative;
  background: var(--mu-black);
  box-shadow: inset 0 14px 30px rgba(0, 0, 0, 0.85), inset 0 -14px 30px rgba(0, 0, 0, 0.85);
  padding: 44px 0;
  overflow: hidden;
}
.mu-cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background: url(assets/cta-strip-bg.jpg) center 38% / cover no-repeat;
  /* dessaturado + escuro: vira textura de fundo sem competir com o texto/CTA */
  filter: grayscale(0.7) brightness(0.45);
  opacity: 0.85;
}
.mu-cta-strip::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 14px 30px rgba(0, 0, 0, 0.85), inset 0 -14px 30px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.mu-cta-strip > * { position: relative; z-index: 1; }
.mu-cta-strip .inner {
  display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap;
}
.mu-cta-strip .bora {
  font-family: var(--font-display);
  font-weight: 700; font-size: 30px; line-height: 1.15;
  text-transform: uppercase;
  color: var(--mu-text);
  margin: 0;
}
.mu-cta-strip .bora strong {
  display: block;
  color: var(--mu-blue);
  font-size: 38px;
  text-shadow: 0 0 26px rgba(0, 155, 255, 0.45);
}

/* ---------- criar conta ---------- */
.mu-account-banner {
  position: relative;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  height: 130px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: url(assets/banner-conta.jpg) center 30% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 155, 255, 0.35);
}
.mu-account-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 10, 20, 0.88) 0%, rgba(5, 10, 20, 0.45) 60%, rgba(5, 10, 20, 0.2) 100%);
}
.mu-account-banner .mu-h2 { position: relative; font-size: clamp(26px, 2.6vw, 38px); }
.mu-account-banner .mu-btn-ghost { position: relative; }

.mu-account-body {
  position: relative;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  background: rgba(8, 8, 8, 0.92);
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 0 0 1px rgba(24, 24, 26, 0.8);
  padding: 48px 40px;
  overflow: hidden;
}
.mu-account-art {
  position: absolute;
  right: 0; bottom: 0; top: 8%;
  width: 74%;
  background: url(assets/archer.png) right bottom / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.7));
}
.mu-form { display: flex; flex-direction: column; gap: 14px; position: relative; }
.mu-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid rgba(118, 118, 126, 0.4);
  background: rgba(18, 18, 18, 0.92);
  color: var(--mu-text);
  font-family: var(--font-ui);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mu-input::placeholder { color: var(--mu-muted); }
.mu-input:focus { border-color: var(--mu-blue); box-shadow: 0 0 0 3px rgba(0, 155, 255, 0.18); }
.mu-input.err { border-color: #E04444; box-shadow: 0 0 0 3px rgba(224, 68, 68, 0.15); }
.mu-form .vip-note { font-family: "Ropa Sans", var(--font-ui); font-size: 14px; color: var(--mu-blue); letter-spacing: 0.04em; }
.mu-form .forgot { font-size: 13.5px; color: var(--mu-muted); text-align: center; text-decoration: underline; text-underline-offset: 3px; background: none; border: none; }
.mu-form .forgot:hover { color: var(--mu-nav); }
.mu-field-msg { font-size: 12.5px; color: #E04444; margin: -8px 0 0 2px; }

/* ---------- atalhos (guia/eventos/vip/discord) ---------- */
.mu-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mu-quicklink {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px 18px;
  border: none; border-radius: 4px;
  background: url(assets/texture-dark.jpg) center / cover;
  box-shadow: inset 0 0 0 1px rgba(24, 24, 26, 0.9), inset 0 0 30px rgba(0, 0, 0, 0.8);
  color: var(--mu-nav);
  font-family: "Ropa Sans", var(--font-ui);
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.mu-quicklink::after { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 8, 0.5); transition: background 0.2s ease; }
.mu-quicklink > * { position: relative; z-index: 1; }
.mu-quicklink svg { width: 26px; height: 26px; }
.mu-quicklink:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--mu-blue), 0 8px 26px rgba(0, 155, 255, 0.25);
}

/* ---------- FAQ ---------- */
.mu-faq-section {
  position: relative;
  background: #060608;
  overflow: hidden;
}
/* textura de fundo (cover): fica sempre completa; ao abrir o accordion a seção
   cresce mas a textura só cobre mais — sem "crescer" visível como um subject */
.mu-faq-section::before {
  content: "";
  position: absolute; inset: 0;
  background: url(assets/faq-bg.jpg) center / cover no-repeat;
  filter: grayscale(0.85) brightness(0.4);
  opacity: 0.5;
  pointer-events: none;
}
/* véu p/ leitura — mais escuro à direita, deixando o texto à esquerda nítido */
.mu-faq-section::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 6, 8, 0.55) 0%, rgba(6, 6, 8, 0.86) 72%);
  pointer-events: none;
}
.mu-faq-section .mu-container { position: relative; z-index: 1; }
.mu-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; position: relative; }
.mu-faq-item { display: flex; gap: 14px; align-items: flex-start; }
.mu-faq-num {
  font-family: var(--font-display);
  font-weight: 700; font-size: 22px;
  color: var(--mu-blue);
  width: 40px; flex: 0 0 auto;
  text-align: right;
  padding-top: 11px;
  text-shadow: 0 0 14px rgba(0, 155, 255, 0.5);
}
.mu-faq-q { flex: 1; }
.mu-faq-q > button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: none;
  background: linear-gradient(90deg, rgba(28, 29, 31, 0.4) 0%, rgba(28, 29, 31, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(24, 24, 26, 0.8);
  border-radius: 3px;
  padding: 14px 18px;
  font-family: var(--font-ui);
  font-weight: 600; font-size: 14.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mu-text);
  text-align: right;
  transition: box-shadow 0.2s ease;
}
.mu-faq-q > button:hover { box-shadow: inset 0 0 0 1px rgba(0, 155, 255, 0.5); }
.mu-faq-q > button .chev { color: var(--mu-muted); transition: transform 0.25s ease; flex: 0 0 auto; }
.mu-faq-item.open .chev { transform: rotate(180deg); color: var(--mu-blue); }
.mu-faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.mu-faq-item.open .mu-faq-a { max-height: 220px; }
.mu-faq-a > div {
  margin-top: 6px;
  padding: 14px 18px;
  border-radius: 3px;
  background: rgba(16, 16, 18, 0.92);
  box-shadow: inset 0 0 0 1px rgba(24, 24, 26, 0.8), inset 3px 0 0 var(--mu-blue);
  font-family: var(--font-body);
  font-weight: 300; font-size: 15.5px;
  color: var(--mu-nav);
}

/* ---------- top players ---------- */
.mu-rank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mu-rank-card {
  border-radius: 4px;
  background: var(--mu-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 6px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(24, 24, 26, 0.6);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.mu-rank-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(0, 155, 255, 0.5), 0 0 24px rgba(0, 155, 255, 0.16);
}
.mu-rank-card > header {
  background: var(--mu-black);
  padding: 10px 16px;
  text-align: center;
}
.mu-rank-card > header .mu-h3 { font-size: 18px; letter-spacing: 0.04em; line-height: 30px; }
.mu-rank-rows { padding: 14px 26px 20px; }
.mu-rank-head, .mu-rank-row {
  display: grid;
  grid-template-columns: 34px 1fr 70px;
  gap: 10px;
  align-items: center;
}
.mu-rank-head {
  font-family: "Ropa Sans", var(--font-ui);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mu-muted);
  padding: 4px 8px 10px;
  border-bottom: 1px solid rgba(118, 118, 126, 0.25);
  margin-bottom: 6px;
}
.mu-rank-row {
  padding: 7.5px 8px;
  border-radius: 3px;
  font-size: 14.5px;
  color: var(--mu-text);
  transition: background 0.15s ease;
}
.mu-rank-row:hover { background: rgba(0, 155, 255, 0.08); }
.mu-rank-row .pos { font-family: "Inter", var(--font-ui); font-weight: 700; color: var(--mu-muted); font-variant-numeric: tabular-nums; }
.mu-rank-row:nth-child(-n+4) .pos { color: var(--mu-blue); }
.mu-rank-row .nick { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.mu-rank-row .nick .st { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: rgba(118, 118, 126, 0.5); }
.mu-rank-row .nick .st.on { background: var(--mu-green); box-shadow: 0 0 6px rgba(0, 227, 42, 0.8); }
.mu-rank-row .nick small { color: var(--mu-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-rank-row .score { text-align: right; font-family: "Inter", var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mu-nav); }
.mu-viewall {
  border: none;
  border-radius: 100px;
  padding: 9px 22px;
  background: rgba(42, 44, 45, 0.83);
  box-shadow: inset 0 0 0 1px rgba(24, 24, 26, 0.9);
  font-weight: 700; font-size: 14px; letter-spacing: 0.08em;
  color: rgba(118, 118, 126, 0.95);
  text-transform: uppercase;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
.mu-viewall:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 155, 255, 0.6); }

/* skeleton (estado de carregamento SQL) */
.mu-skel { height: 13px; border-radius: 3px; background: linear-gradient(90deg, rgba(60,62,64,0.4) 25%, rgba(90,92,94,0.5) 50%, rgba(60,62,64,0.4) 75%); background-size: 200% 100%; animation: mu-shimmer 1.4s linear infinite; }
@keyframes mu-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- footer ---------- */
.mu-footer { background: #DBDBDB; color: #111113; }
.mu-footer .top {
  display: flex; gap: 70px; align-items: flex-start; justify-content: center;
  padding: 50px 24px;
  max-width: 1180px; margin: 0 auto;
  flex-wrap: wrap;
}
.mu-footer .logo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mu-footer .mark { width: 96px; height: 92px; background: url(assets/logo-dragon.png) 50% 50% / 331% 192% no-repeat; }
.mu-footer h4 {
  font-family: var(--font-ui);
  font-weight: 600; font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #2C2C30;
  margin: 0 0 14px;
}
.mu-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mu-footer ul a { font-size: 14.5px; color: #5a5a60; transition: color 0.18s ease; }
.mu-footer ul a:hover { color: var(--mu-blue-deep); }
.mu-footer .social { display: flex; gap: 8px; }
.mu-footer .social a {
  width: 38px; height: 38px;
  border-radius: 6px;
  background: #2C2C30;
  color: #DBDBDB;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mu-footer .social a:hover { background: var(--mu-blue); transform: translateY(-2px); }
.mu-footer .bottom {
  background: #1D1D20;
  color: rgba(242, 242, 242, 0.55);
  text-align: center;
  font-family: "Ropa Sans", var(--font-ui);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 16px 24px;
}

/* ---------- reveal on scroll ---------- */
.mu-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.mu-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mu-reveal { opacity: 1; transform: none; transition: none; }
  .mu-particles, .mu-scroll-hint { display: none; }
  .mu-hero-aura::before, .mu-hero-aura::after { animation: none; }
  @view-transition { navigation: none; }
}

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .mu-nav-links a, .mu-nav-sub { padding: 10px 8px; font-size: 14px; }
  .mu-online-pill .label { display: none; }
  .mu-header-actions { gap: 8px; }
  .mu-rank-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .mu-quicklinks { grid-template-columns: repeat(2, 1fr); }
  .mu-account-body { grid-template-columns: 1fr; }
  .mu-account-art {
    position: relative; inset: auto; width: 100%; height: 400px; margin-top: -10px;
    background-position: center top; background-size: cover; transform: none;
    /* desvanece a base na seção (sem corte seco na espada/pernas) */
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}
/* ---------- menu mobile (hambúrguer — injetado pelo auth-header.js) ---------- */
.mu-menu-btn {
  display: none;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: none; background: none; padding: 9px 8px;
  flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer;
}
.mu-menu-btn span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.25s ease, opacity 0.2s ease; }
.mu-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mu-menu-btn.open span:nth-child(2) { opacity: 0; }
.mu-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mu-mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(8, 8, 9, 0.98);
  padding: 100px 28px 36px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.mu-mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mu-mobile-menu a {
  font-family: var(--font-ui); font-size: 17px; font-weight: 500;
  color: var(--mu-nav); padding: 13px 6px;
  border-bottom: 1px solid rgba(24, 24, 26, 0.9);
}
.mu-mobile-menu a:hover, .mu-mobile-menu a:active { color: #fff; }
.mu-mobile-menu .grp { font-family: "Ropa Sans", var(--font-ui); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mu-muted); margin: 20px 0 4px; }
.mu-mobile-menu .acct { display: flex; gap: 10px; margin-top: 26px; }
.mu-mobile-menu .acct a { flex: 1; text-align: center; border-bottom: none; border-radius: 100px; padding: 13px 10px; font-size: 15.5px; }
.mu-mobile-menu .acct .ghost { box-shadow: inset 0 0 0 1px rgba(118, 118, 126, 0.5); color: #fff; }
.mu-mobile-menu .acct .blue { background: linear-gradient(180deg, var(--mu-blue) 0%, var(--mu-blue-deep) 100%); color: #fff; font-weight: 600; }
body.mu-mm-lock { overflow: hidden; }

@media (max-width: 760px) {
  .mu-nav-links { display: none; }
  .mu-header { height: 56px; justify-content: space-between; }
  .mu-menu-btn { display: flex; }
  /* login/cadastro migram pra gaveta; a pílula de online permanece */
  .mu-header-actions .mu-login-link, .mu-header-actions .mu-btn-blue { display: none; }
  /* hero: ELF + aura escondidas no mobile (cobriam o texto e ficava ruim) */
  .mu-hero { padding: 100px 20px 72px; min-height: 88vh; }
  .mu-hero-char, .mu-hero-aura { display: none; }
  .mu-hero-lockup { width: min(440px, 84vw); }
  .mu-hero-chips { margin-top: 12px; }
  .mu-news-content { padding: 32px 22px; }
  .mu-quicklinks { grid-template-columns: 1fr 1fr; }
  .mu-faq-num { display: none; }
  .mu-cta-strip { padding: 36px 0; }
  .mu-cta-strip .inner { gap: 20px; }
  .mu-cta-strip .bora { font-size: 24px; text-align: center; }
  .mu-cta-strip .bora strong { font-size: 30px; }
  /* footer: grid 2 colunas, logo full-width no topo, links alinhados à esquerda */
  .mu-footer .top { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; padding: 40px 28px; }
  .mu-footer .logo-col { grid-column: 1 / -1; align-items: center; }
  .mu-footer .social { justify-content: flex-start; }
}
@media (max-width: 460px) {
  .mu-btn-hex { transform: scale(0.9); }
  .mu-chip { font-size: 12px; padding: 5px 11px; }
  .mu-quicklinks { grid-template-columns: 1fr; }
}