/* Ravoc Online — tema minimalista do open beta (dark + dourado + fogo). */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap");
:root{
  --fundo:#0a0b10;
  --painel:#14161f;
  --borda:rgba(230,193,90,.22);
  --texto:#e9e6df;
  --suave:#9aa0ad;
  --gold:#e6c15a;
  --gold2:#f7e08a;
  --goldd:#b8860b;
  --red:#b3271e;
  --fire:#ff7a18;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(255,122,24,.08), transparent 60%),
    radial-gradient(700px 450px at 85% 12%, rgba(179,39,30,.10), transparent 55%),
    linear-gradient(180deg,#0a0b10,#0c0e16 45%,#08090d);
  color:var(--texto);
  font:16px/1.6 system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;
}
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;flex-wrap:wrap;background:rgba(15,17,25,.92);
  border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:10;backdrop-filter:blur(8px);
}
.marca{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.marca-nome{
  font-family:"Cinzel",serif;font-size:24px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,var(--goldd));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.marca-tag{
  font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--red);
  border:1px solid var(--red);padding:1px 8px;border-radius:999px;
}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{
  color:var(--suave);text-decoration:none;font-size:14px;padding:7px 13px;border-radius:8px;
  border:1px solid transparent;transition:color .15s,border-color .15s,background .15s;
}
.nav a:hover{color:var(--gold2);border-color:var(--borda);background:rgba(230,193,90,.08)}
.conteudo{width:100%;max-width:860px;margin:0 auto;padding:34px 20px 48px;flex:1}
.titulo{
  font-family:"Cinzel",serif;margin:0 0 20px;font-size:26px;font-weight:700;letter-spacing:.5px;
  padding-bottom:11px;border-bottom:1px solid var(--borda);
  background:linear-gradient(180deg,#fff,#d8d2c4);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.painel{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),var(--painel);
  border:1px solid var(--borda);border-radius:12px;padding:22px;overflow-x:auto;
}
.painel a{color:var(--gold)}
.painel a:hover{color:var(--gold2)}
.painel table{border-collapse:collapse;width:100%}
.painel td,.painel th{padding:8px 10px;border-bottom:1px solid rgba(230,193,90,.14);text-align:left}
.painel th{color:var(--suave);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.painel input[type=text],.painel input[type=password],.painel input[type=email],
.painel select,.painel textarea{
  background:#0e1017;color:var(--texto);border:1px solid var(--borda);border-radius:8px;
  padding:9px 11px;font:inherit;font-size:15px;max-width:100%;
}
.painel input:focus,.painel select:focus,.painel textarea:focus{outline:none;border-color:var(--gold)}
.painel input[type=submit],.painel button,.painel .btn{
  background:linear-gradient(180deg,var(--gold2),var(--goldd));color:#3a2400;border:0;border-radius:8px;
  padding:10px 20px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(230,193,90,.22);
}
.painel input[type=submit]:hover,.painel button:hover{filter:brightness(1.08)}
.painel img{max-width:100%;height:auto}
.rodape{
  border-top:1px solid var(--borda);padding:16px 22px;color:var(--suave);font-size:13px;
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.rodape a{color:var(--gold)}.rodape a:hover{color:var(--gold2)}
.sep{opacity:.5}
@media (max-width:620px){.topo{justify-content:center}.conteudo{padding:22px 14px 36px}.painel{padding:16px}}

/* ---- neutraliza o skin antigo (tibiacom) dentro do painel ---- */
.painel [class*="Table"], .painel [class*="Shadow"], .painel [class*="Corner"]{
  background:transparent !important; background-image:none !important;
  border:0 !important; box-shadow:none !important;
}
.painel .CaptionContainer, .painel .Text, .painel .CaptionInnerContainer{
  color:var(--gold) !important; font-weight:600;
}
.painel .LabelV, .painel td{ color:var(--texto); }
.painel .TableContentContainer{ padding:4px 0 !important; }
.painel .warning, .painel .FormFieldError{ color:#ff8f6b !important; }
/* linha "Create Ravoc Account" e afins */
.painel b, .painel strong{ color:var(--gold2); }
/* mata fundos herdados do skin antigo dentro do painel */
.painel table,.painel td,.painel tr,.painel tbody,.painel thead,.painel div,.painel span{
  background-color:transparent !important; background-image:none !important;
}
/* ---- conteudo rico (regras, paginas de texto) ---- */
.painel h2{font-family:"Cinzel",serif;color:var(--gold);font-size:20px;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--borda)}
.painel h3{color:var(--gold2);font-size:16px;margin:20px 0 8px}
.painel p{margin:9px 0;color:var(--texto)}
.painel blockquote{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--red);background:rgba(179,39,30,.10) !important;border-radius:6px}
.painel hr{border:0;border-top:1px solid var(--borda);margin:22px 0}
.painel ul{margin:8px 0 14px;padding-left:22px}
.painel li{margin:5px 0;color:var(--texto)}
.painel code{background:#0e1017 !important;border:1px solid var(--borda);border-radius:5px;padding:1px 6px;color:var(--gold2);font-size:13px}
.rules-updated{color:var(--suave);font-size:13px}
.painel ol{margin:8px 0 14px;padding-left:22px}
/* form limpo: remove TODAS as linhas de separacao da tabela + inputs consistentes */
.painel td,.painel th,.painel tr,.painel table,.painel tbody,.painel thead{border:0 !important}
.painel input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=image]){
  background:#0e1017 !important;color:var(--texto) !important;border:1px solid var(--borda) !important;
  border-radius:8px !important;padding:9px 11px !important;font-size:15px
}
.painel input:focus{border-color:var(--gold) !important;outline:none}
/* logo no header */
.marca-logo{height:54px;width:auto;display:block}
.marca{align-items:center}