/* DraxPT Premium UI — camada visual global. Não altera regras PHP/API. */
:root {
  --tinta: #0d0d0c;
  --tinta-fundo: #070706;
  --painel: #121211;
  --painel-alto: #1a1815;
  --painel-topo: #0b0b0a;
  --pergaminho: #f3ead5;
  --pergaminho-2: #c8b99d;
  --pergaminho-3: #867b69;
  --brasa: #b52018;
  --brasa-clara: #e0442f;
  --brasa-fraca: rgba(181,32,24,.14);
  --bronze: #ba8b3e;
  --bronze-fraco: rgba(186,139,62,.28);
  --ouro: #e0b85c;
  --jade: #4db47a;
  --sangue: #c43a32;
  --raio: 2px;
  --largura: 1280px;
  --borda: 1px solid var(--bronze-fraco);
}

body {
  background:
    radial-gradient(ellipse 72% 42% at 50% -8%, rgba(120,77,22,.13), transparent 70%),
    linear-gradient(180deg, #090908 0, #050505 100%);
  color: var(--pergaminho);
}

body::before {
  opacity: .72;
  background:
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.009) 1px, transparent 1px),
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(179,119,34,.09), transparent 70%);
  background-size: 64px 64px, 64px 64px, auto;
}

.principal { padding-top: 34px; }
.layout-site.rota-home .principal { padding-top: 0; }

/* Cabeçalho */
.topo {
  background: rgba(6,6,6,.94);
  border-bottom: 1px solid rgba(212,160,71,.36);
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
}
.topo::after {
  content: '';
  position: absolute;
  inset: auto 0 -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(224,184,92,.55) 50%, transparent 95%);
}
.topo__interno { min-height: 74px; gap: 22px; }
.marca {
  font-size: 1.23rem;
  letter-spacing: .16em;
  color: var(--ouro);
  text-shadow: 0 0 20px rgba(224,184,92,.22);
}
.marca span { color: var(--brasa-clara); }
.menu a { font-size: .9rem; letter-spacing: .15em; padding: 10px 11px; }
.menu a.ativo { color: var(--ouro); border-bottom-color: var(--ouro); }
.selo-status {
  border-color: rgba(77,180,122,.36);
  background: rgba(38,105,67,.11);
  color: #8ed6aa;
}

/* Botões e superfícies */
.btn {
  min-height: 40px;
  border-radius: 1px;
  letter-spacing: .13em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.btn--brasa {
  color: #fff4e4;
  border-color: #df4936;
  background: linear-gradient(180deg, #c52d22, #8c1713);
  box-shadow: 0 8px 24px rgba(155,24,19,.22), inset 0 1px rgba(255,255,255,.16);
}
.btn--brasa:hover { background: linear-gradient(180deg, #e14a36, #ac2118); color: #fff; }
.btn--vazado { border-color: rgba(203,157,77,.48); background: rgba(8,8,7,.58); color: var(--ouro); }
.btn--vazado:hover { border-color: var(--ouro); background: rgba(186,139,62,.09); color: #ffe6a8; }

.cartao, .saldo, .lateral {
  position: relative;
  border: 1px solid rgba(186,139,62,.26);
  background: linear-gradient(145deg, rgba(25,23,20,.96), rgba(10,10,9,.98));
  box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
}
.cartao::before, .saldo::before {
  content: '';
  position: absolute;
  top: -1px; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,184,92,.58), transparent);
  pointer-events: none;
}
.cartao__topo {
  background: linear-gradient(180deg, rgba(45,38,27,.62), rgba(20,18,15,.55));
  border-bottom-color: rgba(186,139,62,.22);
}
.cartao__titulo { color: var(--ouro); text-transform: uppercase; letter-spacing: .09em; }
.rotulo { color: var(--bronze); letter-spacing: .34em; }
.cabeca h1, .cabeca h2 { color: #f6eddc; }
.filete { background: linear-gradient(90deg, transparent, rgba(186,139,62,.46) 20%, rgba(186,139,62,.46) 80%, transparent); }

/* Hero */
.home-premium { margin-top: -1px; }
.hero {
  min-height: 600px;
  padding: 108px 0 52px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(186,139,62,.24);
  background:
    radial-gradient(circle at 50% 30%, rgba(126,73,16,.2), transparent 33%),
    linear-gradient(180deg, #11100e, #080807);
}
.hero--arte { min-height: min(720px, 76vh); background-position: center 18%; background-size: cover; }
.hero--arte::before {
  background:
    linear-gradient(90deg, rgba(5,5,5,.82), rgba(5,5,5,.28) 50%, rgba(5,5,5,.82)),
    linear-gradient(180deg, rgba(5,5,5,.18), rgba(5,5,5,.32) 60%, #070706 100%);
}
.hero__conteudo { max-width: 780px; }
.hero h1 {
  font-size: clamp(2.8rem, 7.5vw, 6rem);
  color: #f2d588;
  letter-spacing: .08em;
  line-height: .95;
  text-shadow: 0 3px 0 #5f3812, 0 15px 38px #000;
}
.hero h1 em {
  display: block;
  margin-top: 18px;
  font-size: clamp(.9rem, 2vw, 1.35rem);
  color: var(--brasa-clara);
  font-style: normal;
  letter-spacing: .36em;
  text-shadow: 0 4px 16px #000;
}
.hero__texto { color: #d7cab4; font-size: 1.08rem; max-width: 62ch; }
.hero__acoes { margin-top: 25px; }
.hero__numeros {
  margin-top: 58px;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(186,139,62,.27);
  border-bottom: 1px solid rgba(186,139,62,.13);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.32), transparent);
}
.metrica__valor { color: var(--ouro); font-size: 1.55rem; }
.metrica__rotulo { color: var(--pergaminho-3); text-transform: uppercase; letter-spacing: .11em; }

/* Central de eventos */
.eventos-drax {
  padding: 66px 0 18px;
  background: radial-gradient(ellipse 70% 80% at 50% 0, rgba(87,55,15,.09), transparent 75%);
  scroll-margin-top: 90px;
}
.cabeca--ornamental { padding-bottom: 18px; border-bottom: 1px solid rgba(186,139,62,.24); }
.eventos-drax__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.evento-drax {
  min-height: 245px;
  padding: 25px 23px;
  display: flex;
  flex-direction: column;
  color: var(--pergaminho-2);
  border: 1px solid rgba(186,139,62,.26);
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.8)),
    radial-gradient(circle at 50% 0, rgba(174,118,35,.17), transparent 64%),
    #161411;
  box-shadow: 0 18px 32px rgba(0,0,0,.25);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.evento-drax:hover { transform: translateY(-4px); color: var(--pergaminho); border-color: rgba(224,184,92,.7); box-shadow: 0 22px 45px rgba(0,0,0,.45); }
.evento-drax__icone { color: var(--ouro); font-size: 2.25rem; line-height: 1; text-shadow: 0 0 18px rgba(224,184,92,.3); }
.evento-drax__tipo { margin-top: 19px; color: var(--bronze); font: 600 .72rem/1 var(--dado); letter-spacing: .18em; text-transform: uppercase; }
.evento-drax strong { margin: 7px 0; color: #f7ead0; font: 600 1.18rem/1.3 var(--display); letter-spacing: .06em; }
.evento-drax > span:not(.evento-drax__icone):not(.evento-drax__tipo) { font-size: .92rem; line-height: 1.48; }
.evento-drax em { margin-top: auto; padding-top: 16px; color: var(--ouro); font-style: normal; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; }
.evento-drax--carn { background-color: #17100f; }
.evento-drax--pvp { background-color: #111317; }

/* Rankings e tabelas */
.tabela thead { background: rgba(186,139,62,.075); }
.tabela th { color: #c9a45f; text-transform: uppercase; letter-spacing: .1em; border-bottom-color: rgba(186,139,62,.24); }
.tabela td { border-bottom-color: rgba(255,255,255,.045); }
.tabela tbody tr:hover { background: rgba(186,139,62,.055); }
.posicao { border-color: rgba(186,139,62,.32); background: #12110f; }
.posicao--1 { color: #f7cc63; box-shadow: 0 0 16px rgba(224,184,92,.14); }
.podio-castelo { background: radial-gradient(circle at 50% 0, rgba(179,120,35,.1), transparent 62%); }
.podio-castelo__item { border-color: rgba(186,139,62,.22); background: linear-gradient(180deg, rgba(32,28,22,.9), rgba(11,11,10,.96)); }

/* Notícias, formulários e painéis */
.cartao-noticia { border-color: rgba(186,139,62,.24); background: linear-gradient(145deg, #191714, #0c0c0b); }
.cartao-noticia:hover { border-color: rgba(224,184,92,.56); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
input, textarea, select {
  border-color: rgba(186,139,62,.28) !important;
  background: #0b0b0a !important;
  color: var(--pergaminho) !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--bronze) !important; box-shadow: 0 0 0 3px rgba(186,139,62,.09); }
.painel-grade { gap: 24px; }
.lateral { border-top: 2px solid rgba(186,139,62,.5); }
.lateral__grupo { color: var(--bronze); letter-spacing: .19em; }
.lateral a.ativo { color: #f7e5bd; background: linear-gradient(90deg, rgba(181,32,24,.2), transparent); border-left-color: var(--brasa-clara); }
.saldo__valor { color: var(--ouro); }
.layout-admin .topo { border-bottom-color: rgba(181,32,24,.62); }
.layout-admin .marca { color: #f0d7a2; }
.layout-admin .lateral { border-top-color: rgba(181,32,24,.72); }
.aviso { border-radius: 1px; }

/* Rodapé */
.rodape {
  margin-top: 55px;
  border-top: 1px solid rgba(186,139,62,.28);
  background: #060606;
}
.rodape::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,184,92,.42), transparent); }
.rodape h4 { color: var(--ouro); }

@media (max-width: 1120px) {
  .eventos-drax__grade { grid-template-columns: repeat(2, 1fr); }
  .menu a { padding-inline: 8px; font-size: .82rem; }
}
@media (max-width: 860px) {
  .hero { min-height: 540px; padding-top: 74px; }
  .hero--arte { min-height: 620px; }
  .topo__interno { min-height: 66px; }
}
@media (max-width: 640px) {
  .principal { padding-top: 22px; }
  .hero, .hero--arte { min-height: 560px; padding: 66px 0 36px; }
  .hero h1 { font-size: clamp(2.35rem, 15vw, 4rem); }
  .hero h1 em { letter-spacing: .2em; }
  .hero__numeros { margin-top: 40px; grid-template-columns: repeat(2, 1fr); }
  .eventos-drax { padding-top: 44px; }
  .eventos-drax__grade { grid-template-columns: 1fr; }
  .evento-drax { min-height: 205px; }
  .cabeca--ornamental { align-items: flex-start; }
}