/* L2 Bloodfall — estilo compartilhado de todas as páginas */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

:root{
  --blood:#b01212; --blood-2:#7a0b0b; --ember:#e8562a;
  --bg:#0a0708; --bg-2:#120c0d; --card:#160e10;
  --line:#2a1a1c; --ink:#f3e9e6; --mut:#a3908c; --gold:#e0b45b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Barlow",system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.display{font-family:"Cinzel",serif;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(1120px,92vw);margin-inline:auto}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:4px;font-weight:700;font-size:1rem;transition:.18s;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--blood),var(--blood-2));color:#fff;box-shadow:0 6px 24px rgba(176,18,18,.35)}
.btn-primary:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--blood);color:#fff}
.tag{color:var(--ember);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.78rem}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(10,7,8,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
nav .logo{font-family:"Cinzel";font-weight:800;letter-spacing:.12em;font-size:1.15rem;display:flex;align-items:center;gap:.55rem}
nav .logo b{color:var(--blood)}
.logo-mark{height:34px;width:auto;filter:drop-shadow(0 2px 6px rgba(176,18,18,.5))}
.pagehead .logo-mark{height:76px;margin-bottom:.8rem;filter:drop-shadow(0 4px 14px rgba(176,18,18,.55))}
nav ul{display:flex;gap:1.6rem;list-style:none}
nav ul a{color:var(--mut);font-weight:600;font-size:.92rem;transition:.15s}
nav ul a:hover,nav ul a.active{color:#fff}
@media(max-width:820px){nav ul{gap:1rem;font-size:.82rem}}
/* celular: em vez de sumir com o menu, ele vira uma faixa que rola de lado */
@media(max-width:560px){
  nav .wrap{flex-wrap:wrap;gap:.5rem;padding:.7rem 0 .5rem}
  nav ul{order:3;width:100%;gap:1.15rem;overflow-x:auto;scrollbar-width:none;
    padding:.35rem 0 .1rem;border-top:1px solid var(--line);margin-top:.15rem}
  nav ul::-webkit-scrollbar{display:none}
  nav ul a{white-space:nowrap;font-size:.82rem}
  nav ul li.has-sub>a::after{content:""}
  nav .sub{display:none!important}   /* submenu por hover não existe no toque */
}

/* HERO — entrada. Luz quente dourada em cima, sangue embaixo. */
header.hero{position:relative;min-height:92vh;display:flex;align-items:center;text-align:center;
  background:
    radial-gradient(760px 420px at 22% 18%,rgba(224,180,91,.16),transparent 68%),
    linear-gradient(90deg,rgba(10,7,8,.90) 0%,rgba(10,7,8,.66) 34%,rgba(10,7,8,.18) 58%,transparent 74%),
    linear-gradient(180deg,rgba(10,7,8,.30) 0%,transparent 30%,rgba(10,7,8,.72) 80%,#0a0708 100%),
    url('assets/hero.jpg');
  background-size:cover,cover,cover,cover;background-position:center,center,center,center right;
  border-bottom:1px solid var(--line);overflow:hidden}
header.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.10) 3px 4px);mix-blend-mode:multiply;opacity:.42}
/* brilho dourado que pulsa devagar atrás do brasão */
header.hero::before{content:"";position:absolute;left:24%;top:12%;width:520px;height:520px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(224,180,91,.20),transparent 62%);
  filter:blur(12px);animation:brasa 7s ease-in-out infinite}
@keyframes brasa{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.08)}}
/* conteúdo à esquerda: a personagem fica livre no lado direito da arte */
.hero-inner{position:relative;z-index:2;padding:4rem 0;display:flex;flex-direction:column;
  align-items:flex-start;text-align:left}
/* a coluna de texto ocupa só a metade escura — a personagem fica livre */
.hero-inner>*{max-width:min(600px,56%)}
.hero-inner>.ratestrip{max-width:min(600px,56%)}

.hero-emblema{width:clamp(76px,10vw,112px);margin-bottom:.4rem;
  filter:drop-shadow(0 6px 26px rgba(224,180,91,.45)) drop-shadow(0 2px 10px rgba(176,18,18,.5))}
.brand-mark{font-family:"Cinzel",serif;font-size:clamp(.72rem,1.6vw,.95rem);letter-spacing:.5em;
  color:var(--gold);text-transform:uppercase;margin:.3rem 0 .1rem;font-weight:700;
  text-shadow:0 2px 14px rgba(224,180,91,.4)}
.brand-rule{width:min(420px,74vw);height:1px;margin:.7rem 0 1rem;
  background:linear-gradient(90deg,rgba(224,180,91,.75),transparent);position:relative}
.brand-rule::after{content:"◆";position:absolute;top:-.72em;left:0;
  color:var(--gold);font-size:.6rem;background:transparent}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);font-weight:800;line-height:.94;text-transform:uppercase;letter-spacing:.03em;
  background:linear-gradient(180deg,#fff6e2 6%,var(--gold) 42%,#c9852f 62%,var(--blood) 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 20px rgba(224,180,91,.35)) drop-shadow(0 6px 44px rgba(176,18,18,.45))}
.hero .sub{font-size:clamp(1.02rem,2.3vw,1.24rem);color:#d8c6c2;margin:1.3rem 0 2rem;max-width:46ch;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hero .sub b{color:#fff;font-weight:600}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap}

/* selo de servidor — verde pulsando quando o jogo está no ar */
.selo-status{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;
  border:1px solid rgba(60,200,110,.35);background:rgba(60,200,110,.10);
  border-radius:999px;padding:.45rem 1.15rem;font-size:.78rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#5fe08a}
.selo-status .luz{width:9px;height:9px;border-radius:50%;background:#5fe08a;
  box-shadow:0 0 0 0 rgba(95,224,138,.75);animation:pulso 2.1s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(95,224,138,.7)}70%{box-shadow:0 0 0 12px rgba(95,224,138,0)}100%{box-shadow:0 0 0 0 rgba(95,224,138,0)}}
.selo-status.offline{border-color:rgba(176,18,18,.4);background:rgba(176,18,18,.12);color:#ff8a8a}
.selo-status.offline .luz{background:#ff8a8a;animation:none}
.selo-status .quantos{color:#fff;letter-spacing:.05em}

.ratestrip{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);width:100%}

/* no celular a arte não cabe ao lado: tudo volta pro centro */
@media(max-width:860px){
  header.hero{text-align:center;min-height:auto}
  /* no vertical o texto fica POR CIMA da arte: precisa de véu mais forte */
  header.hero{
    background:
      linear-gradient(180deg,rgba(10,7,8,.86) 0%,rgba(10,7,8,.66) 42%,rgba(10,7,8,.90) 80%,#0a0708 100%),
      url('assets/hero.jpg');
    background-size:cover,cover;
    background-position:center,74% center}
  .hero-inner{align-items:center;text-align:center;padding:3.4rem 0}
  .hero-inner>*{max-width:100%}
  .brand-rule{margin-inline:auto;background:linear-gradient(90deg,transparent,rgba(224,180,91,.75),transparent)}
  .brand-rule::after{left:50%;transform:translateX(-50%)}
  .hero .sub{margin-inline:auto}
  .cta-row,.ratestrip{justify-content:center}
}
.ratestrip .n{font-family:"Cinzel";font-size:2rem;font-weight:800;color:#fff;line-height:1}
.ratestrip .l{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:.3rem}

/* PAGE HEADER (subpáginas) */
.pagehead{padding:4rem 0 2rem;text-align:center;border-bottom:1px solid var(--line);
  background:radial-gradient(800px 300px at 50% -40%,rgba(176,18,18,.22),transparent 70%)}
.pagehead h1{font-size:clamp(2.2rem,7vw,3.4rem);text-transform:uppercase}
.pagehead h1 b{color:var(--blood)}
.pagehead p{color:var(--mut);margin-top:.6rem}

section{padding:4.5rem 0}
.eyebrow{text-align:center;margin-bottom:.8rem}
.stitle{text-align:center;font-size:clamp(1.8rem,5vw,2.7rem);text-transform:uppercase;margin-bottom:2.6rem}
.stitle b{color:var(--blood)}
.alt{background:var(--bg-2);border-block:1px solid var(--line)}

.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feat{background:linear-gradient(180deg,var(--card),#0e0809);border:1px solid var(--line);border-radius:8px;padding:1.7rem;transition:.2s}
.feat:hover{border-color:var(--blood);transform:translateY(-4px)}
.feat .ic{font-size:1.7rem;margin-bottom:.8rem}
.feat h3{font-size:1.12rem;margin-bottom:.4rem;color:#fff;font-family:"Barlow";font-weight:700}
.feat p{color:var(--mut);font-size:.95rem}

/* CARDS DE NAVEGAÇÃO (home) */
.navcards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.navcard{display:block;background:linear-gradient(180deg,var(--card),#0e0809);border:1px solid var(--line);border-radius:10px;padding:2rem;transition:.2s}
.navcard:hover{border-color:var(--blood);transform:translateY(-5px)}
.navcard .ic{font-size:2.2rem;margin-bottom:.8rem}
.navcard h3{color:#fff;font-family:"Barlow";font-weight:700;font-size:1.25rem;margin-bottom:.4rem}
.navcard p{color:var(--mut);font-size:.95rem}
.navcard .go{color:var(--ember);font-weight:700;margin-top:1rem;display:inline-block;font-size:.9rem}

/* SHOP */
.shopgrid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.prod{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.4rem;text-align:center;transition:.2s;position:relative}
.prod:hover{border-color:var(--gold);transform:translateY(-3px)}
.prod.hot{border-color:var(--blood)}
.prod .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--blood);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.1em;padding:.25rem .7rem;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.prod .ic{font-size:1.9rem;margin-bottom:.5rem}
.prod h4{font-family:"Barlow";font-weight:700;color:#fff;font-size:1.05rem;margin-bottom:.15rem}
.prod .desc{color:var(--mut);font-size:.82rem;margin-bottom:.8rem;min-height:2.2em}
.prod .price{font-family:"Cinzel";font-weight:800;font-size:1.5rem;color:var(--gold)}
.prod .price small{font-size:.7rem;color:var(--mut);font-weight:400;display:block;letter-spacing:.05em}
.paynote{text-align:center;color:var(--mut);margin-top:2rem;font-size:.95rem}
.paynote b{color:var(--ink)}
.paychips{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.paychip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-size:.85rem;color:var(--mut)}

/* STEPS / DOWNLOAD */
.steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:3rem}
.step{display:flex;gap:1rem;align-items:flex-start}
.step .num{font-family:"Cinzel";font-weight:800;font-size:1.6rem;color:var(--blood);line-height:1}
.step h4{color:#fff;font-family:"Barlow";font-weight:700;margin-bottom:.2rem}
.step p{color:var(--mut);font-size:.9rem}
.dl{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:820px;margin-inline:auto}
.dlcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.8rem;text-align:center}
.dlcard.main{border-color:var(--blood);box-shadow:0 8px 30px rgba(176,18,18,.18)}
.dlcard h3{font-family:"Barlow";font-weight:700;color:#fff;font-size:1.2rem;margin-bottom:.3rem}
.dlcard .sz{color:var(--ember);font-weight:600;font-size:.85rem;margin-bottom:.6rem}
.dlcard p{color:var(--mut);font-size:.9rem;margin-bottom:1.3rem;min-height:2.6em}
.soon{opacity:.55;font-size:.78rem;color:var(--mut);margin-top:.6rem;display:block}

/* REGRAS */
.rules{max-width:760px;margin-inline:auto;display:grid;gap:.8rem}
.rule{display:flex;gap:.9rem;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.3rem}
.rule .ic{color:var(--blood);font-weight:800;font-family:"Cinzel";min-width:1.4em}
.rule p{color:var(--mut);font-size:.95rem}
.rule b{color:var(--ink)}

.infobar{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1.4rem}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.7rem 1.3rem;font-size:.95rem;color:var(--mut)}
.chip b{color:#fff}
.chip code{color:var(--ember);font-family:ui-monospace,monospace}

/* ===== SUBMENU DO NAV (Rankings) ===== */
nav ul li.has-sub{position:relative}
nav ul li.has-sub>a::after{content:"▾";margin-left:.3rem;font-size:.75em;opacity:.8}
nav .sub{position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%);
  background:#140d0f;border:1px solid var(--line);border-radius:8px;padding:.45rem;min-width:196px;
  display:none;flex-direction:column;box-shadow:0 14px 34px rgba(0,0,0,.6)}
nav ul li.has-sub:hover .sub{display:flex}
nav .sub a{display:block;padding:.55rem .8rem;border-radius:5px;font-size:.88rem;color:var(--mut);font-weight:600;white-space:nowrap}
nav .sub a:hover,nav .sub a.active{background:rgba(176,18,18,.18);color:#fff}

/* ===== ABAS DE RANKING ===== */
.subtabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:1.4rem 0 0}
.subtabs a{border:1px solid var(--line);background:var(--card);color:var(--mut);
  border-radius:999px;padding:.5rem 1.1rem;font-size:.88rem;font-weight:600;transition:.16s}
.subtabs a:hover{border-color:var(--blood);color:#fff}
.subtabs a.on{background:linear-gradient(180deg,var(--blood),var(--blood-2));border-color:var(--blood);color:#fff}

/* ===== TABELA DE DADOS AO VIVO ===== */
.tablewrap{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dtable th,.dtable td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable th{background:var(--bg-2);color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem}
.dtable td{background:var(--card);font-size:.94rem}
.dtable tr:last-child td{border-bottom:0}
.dtable tbody tr:hover td{background:#1c1113}
.dtable .pos{font-family:"Cinzel";font-weight:800;color:var(--gold);width:3.6rem}
.dtable .c-nome{color:#fff;font-weight:600}
.dtable .c-cla,.dtable .c-classe{color:var(--mut)}
.dtable .c-pvp,.dtable .c-pts{color:var(--ember);font-weight:700}
.dtable .c-pk{color:#ff8a8a;font-weight:700}
.dtable .c-status{color:#ff8a8a;font-weight:700}
.dtable tbody tr:nth-child(-n+3) .c-nome{color:var(--gold)}

/* estado sem dados — o painel ainda não subiu */
.livebox .tablewrap{display:none}
.livebox.has-data .tablewrap{display:block}
.livebox.has-data .empty{display:none}
.empty{border:1px dashed var(--line);border-radius:10px;background:var(--card);
  padding:2.6rem 1.6rem;text-align:center;color:var(--mut)}
.empty .ic{font-size:2rem;display:block;margin-bottom:.6rem;opacity:.8}
.empty b{color:var(--ink)}
/* linhas de vitrine — sempre marcadas, somem quando chega dado real */
.linha-exemplo td{opacity:.72}
.selo-exemplo{display:inline-block;margin-left:.5rem;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mut);border:1px solid var(--line);border-radius:999px;
  padding:.1rem .5rem;vertical-align:middle;font-weight:700}
.aviso-exemplo{display:none;text-align:center;color:var(--mut);font-size:.86rem;margin-top:1.1rem}
.modo-exemplo .aviso-exemplo{display:block}

.stamp{text-align:center;color:var(--mut);font-size:.84rem;margin-top:1rem}
.lead{color:var(--mut);max-width:62ch;margin:0 auto 1.8rem;text-align:center}
.lead b{color:var(--ink)}

footer{padding:3rem 0;border-top:1px solid var(--line);text-align:center;color:var(--mut);font-size:.85rem}
footer .lg{font-family:"Cinzel";font-weight:800;color:var(--ink);letter-spacing:.1em;font-size:1.1rem;margin-bottom:.5rem}
footer nav a{color:var(--mut);margin:0 .6rem;font-weight:600}
footer nav a:hover{color:#fff}
.placeholder{outline:1px dashed #6a3;outline-offset:2px}

/* seletor de idioma no menu */
.idioma{font-size:.72rem;font-weight:800;letter-spacing:.08em;line-height:1;padding:.35rem .5rem;
  border:1px solid var(--line);border-radius:4px;color:var(--mut);
  opacity:.75;transition:.15s;text-decoration:none}
.idioma:hover{opacity:1;background:rgba(255,255,255,.06)}
.idioma.on{opacity:1;color:#fff;border-color:var(--blood);background:rgba(176,18,18,.18)}
@media(max-width:560px){.idioma{font-size:.95rem}}