:root{--bg:#0b0a10;--bg2:#12101a;--card:#17141f;--card2:#1e1a28;--line:#2c2638;--txt:#ece7f2;--mut:#a79fb4;--red:#d6342a;--org:#ff7a1a;--gold:#e6b34a;--green:#3fbf7a;--blue:#4a8ad6;--r:14px;--sh:0 10px 30px rgba(0,0,0,.45)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}a{color:var(--org);text-decoration:none}a:hover{color:#ffa45a}
h1,h2,h3,h4{font-family:"Trebuchet MS","Segoe UI",sans-serif;line-height:1.2;margin:0 0 .5em;letter-spacing:.2px}
h1{font-size:clamp(2rem,5vw,3.4rem)}h2{font-size:clamp(1.5rem,3vw,2.1rem)}h3{font-size:1.2rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}.narrow{max-width:760px}.center{text-align:center}.muted{color:var(--mut)}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px 12px;z-index:99;border-radius:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* topo */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,10,16,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.15rem "Trebuchet MS",sans-serif;color:var(--txt);white-space:nowrap}.brand:hover{color:#fff}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.menu a{color:var(--mut);padding:8px 11px;border-radius:9px;font-size:.93rem;transition:.18s}.menu a:hover,.menu a.on{color:#fff;background:var(--card2)}
.menu a.btn{color:#fff}.menu-sep{width:1px;height:22px;background:var(--line);margin:0 6px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--txt);margin:4px 0;transition:.2s}
/* botoes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;border:1px solid transparent;font-weight:700;cursor:pointer;color:#fff;font-size:1rem;
background:linear-gradient(135deg,var(--org),var(--red));box-shadow:0 6px 18px rgba(214,52,42,.35);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(214,52,42,.5);color:#fff;filter:brightness(1.08)}.btn:active{transform:none}
.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none;color:var(--txt)}.btn.ghost:hover{border-color:var(--org);background:rgba(255,122,26,.08)}
.btn.small{padding:8px 14px;font-size:.9rem}.btn.big{padding:15px 30px;font-size:1.1rem}.btn.danger{background:#7a1d1d}
.btn[disabled],.btn.loading{opacity:.6;cursor:wait;transform:none}
/* hero */
.hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line);background:#12090f url("../img/hero.svg") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,16,.2),rgba(11,10,16,.1) 40%,var(--bg))}
.hero .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:70px}
.hero h1{text-shadow:0 4px 30px rgba(0,0,0,.6);margin-bottom:.3em}.hero h1 span{background:linear-gradient(90deg,var(--gold),var(--org));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:1.2rem;max-width:620px;color:#f3e9ee;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 22px}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(11,10,16,.7);border:1px solid var(--line);font-size:.92rem}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:#777;box-shadow:0 0 0 0 transparent}
.status.online::before{background:var(--green);animation:pulse 2s infinite}.status.offline::before{background:var(--red)}
.status .st-count{color:var(--mut)}.status .st-count:not(:empty)::before{content:"· "}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,191,122,.6)}70%{box-shadow:0 0 0 10px rgba(63,191,122,0)}100%{box-shadow:0 0 0 0 rgba(63,191,122,0)}}
/* secoes */
.page{padding:46px 0 70px}.section{padding:64px 0}.section.alt{background:var(--bg2);border-block:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:26px}.section-head p{margin:0;color:var(--mut)}
.eyebrow{color:var(--org);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.8rem;margin-bottom:6px}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.2s}
a.card:hover,.card.hover:hover{border-color:#5a3a3a;transform:translateY(-3px);box-shadow:var(--sh)}
.icon{font-size:1.8rem;margin-bottom:8px;display:block}
/* ranking */
.rank-card{display:flex;align-items:center;gap:14px;padding:14px 16px;position:relative;overflow:hidden}
.rank-card .pos{font:800 1.6rem "Trebuchet MS";width:42px;text-align:center;color:var(--mut)}
.rank-card.p1 .pos{color:#ffd24a}.rank-card.p2 .pos{color:#cfd6df}.rank-card.p3 .pos{color:#d98a4a}
.rank-card.p1{border-color:#8a6a1e;background:linear-gradient(135deg,#2a2210,var(--card))}
.avatar{width:54px;height:54px;border-radius:12px;object-fit:cover;background:#1a1520;border:1px solid var(--line)}
.rank-card .nm{font-weight:700;color:#fff}.rank-card small{color:var(--mut)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff;background:#444}
.tag.dano{background:#a8342a}.tag.tank{background:#2f6fb3}.tag.suporte,.tag.controlador{background:#7a3fb0}.tag.gold{background:#8a6a1e}
/* tabelas */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;min-width:560px}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--card2);font-size:.82rem;text-transform:uppercase;letter-spacing:1px;color:var(--mut)}tr:last-child td{border-bottom:0}tr:hover td{background:rgba(255,255,255,.02)}
tr.top1 td{background:rgba(255,210,74,.07)}tr.top2 td{background:rgba(207,214,223,.05)}tr.top3 td{background:rgba(217,138,74,.06)}
td.pos{font-weight:800;width:56px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#555;margin-right:6px}.dot.on{background:var(--green)}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:22px}.pager a,.pager span{padding:8px 13px;border-radius:9px;border:1px solid var(--line);color:var(--txt);min-width:40px;text-align:center}.pager a.cur{background:var(--red);border-color:var(--red)}.pager a:hover{border-color:var(--org)}
/* formularios */
.form{max-width:520px}.field{margin-bottom:18px}label{display:block;font-weight:600;margin-bottom:6px}
input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],select,textarea{width:100%;padding:12px 14px;background:#100e17;color:var(--txt);border:1px solid var(--line);border-radius:11px;font:inherit;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--org);box-shadow:0 0 0 3px rgba(255,122,26,.18)}
textarea{min-height:120px;resize:vertical}.hint{font-size:.85rem;color:var(--mut);margin-top:5px}.err{color:#ff7a7a;font-size:.9rem;margin-top:5px}
.check{display:flex;gap:10px;align-items:flex-start}.check input{margin-top:6px}.check label{margin:0;font-weight:400}
.alert{padding:14px 18px;border-radius:12px;margin:18px 0;border:1px solid var(--line);background:var(--card2)}.alert.ok{border-color:#2f7a52;background:#10241a}.alert.error{border-color:#8a2a2a;background:#2a1212}.alert.warn{border-color:#8a6a1e;background:#2a2210}
.searchbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.searchbar input,.searchbar select{flex:1;min-width:160px;width:auto}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tabs a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);color:var(--mut);font-size:.92rem}.tabs a.on,.tabs a:hover{color:#fff;border-color:var(--org);background:rgba(255,122,26,.1)}
/* ficha de personagem */
.sheet{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}.sheet .portrait{background:radial-gradient(circle at 50% 30%,#4a1c20,#17141f 70%);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center}
.sheet .portrait img{width:100%;max-width:220px;border-radius:12px}.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.stat{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.stat b{display:block;font-size:1.25rem}.stat span{color:var(--mut);font-size:.82rem;text-transform:uppercase;letter-spacing:1px}
.bar-line{height:8px;background:#100e17;border-radius:99px;overflow:hidden}.bar-line i{display:block;height:100%;background:linear-gradient(90deg,var(--org),var(--red))}
/* noticias / wiki */
.news-card{padding:0;overflow:hidden;display:flex;flex-direction:column}.news-card .cover{aspect-ratio:16/8;background:#1a1520 center/cover}.news-card .body{padding:18px}
.news-card h3{margin-bottom:6px;color:#fff}.news-card small{color:var(--mut)}
.prose{max-width:780px}.prose h2{margin-top:1.4em}.prose p,.prose li{color:#d9d2e3}.prose img{border-radius:12px}.prose ul{padding-left:1.2em}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;position:relative;padding:0 0 18px 56px}.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--org),var(--red));display:grid;place-items:center;font-weight:800}
.voc-card{text-align:center;padding:14px}.voc-card img{width:100%;border-radius:10px;aspect-ratio:1;object-fit:cover}.voc-card b{display:block;margin:8px 0 4px}
.code{background:#100e17;border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font:13px/1.5 Consolas,monospace}
.soon{border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--mut)}
.footer{background:#08070c;border-top:1px solid var(--line);padding-top:46px;margin-top:40px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot h4{font-size:.9rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--mut)}.foot a{display:block;color:var(--txt);padding:3px 0}.foot a:hover{color:var(--org)}.copy{padding:26px 20px;color:var(--mut);font-size:.88rem}
.admin{display:grid;grid-template-columns:220px 1fr;gap:24px}.admin nav{display:flex;flex-direction:column;gap:6px}.admin nav a{padding:10px 14px;border-radius:10px;color:var(--mut)}.admin nav a.on,.admin nav a:hover{background:var(--card2);color:#fff}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}.inline{display:inline}
/* animacao leve de entrada */
@media(prefers-reduced-motion:no-preference){.card,.rank-card,.hero .wrap>*{animation:rise .5s both}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(max-width:980px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.sheet,.admin{grid-template-columns:1fr}.foot{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.burger{display:block}.menu{display:none;position:absolute;left:0;right:0;top:68px;background:var(--bg2);border-bottom:1px solid var(--line);padding:12px 20px;flex-direction:column;align-items:stretch;margin:0}.menu.open{display:flex}.menu-sep{display:none}.menu a{padding:12px}.bar{position:relative}}
@media(max-width:620px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}.hero{min-height:520px}.foot{grid-template-columns:1fr}.section{padding:44px 0}.btn.big{width:100%}.cta .btn{flex:1 1 100%}}

/* atalho flutuante do Discord */
.dc-float{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:0;height:56px;min-width:56px;padding:0 14px;border-radius:28px;background:#5865f2;color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.08);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.dc-float svg{width:28px;height:28px;flex:none}
.dc-float span{max-width:0;opacity:0;white-space:nowrap;font-weight:700;font-size:.95rem;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
.dc-float:hover,.dc-float:focus-visible{background:#4752c4;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.18);outline:none}
.dc-float:hover span,.dc-float:focus-visible span{max-width:110px;opacity:1;margin-left:10px}
@media (max-width:600px){.dc-float{right:14px;bottom:14px;height:52px;min-width:52px;border-radius:26px}.dc-float:hover span{max-width:0;opacity:0;margin:0}}
@media print{.dc-float{display:none}}