/* Hype-OT -- tema futurista. As cores vem de variaveis trocadas pelo JS. */
:root{
  --p:#22d3ee; --s:#a855f7;
  --bg1:#040711; --bg2:#0a1633; --bg3:#1b0b2e;
  --txt:#e8eefc; --txt2:#93a3c4; --linha:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.035);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif;
  background:var(--bg1); color:var(--txt); min-height:100vh;
  transition:background 1.2s ease;
}
/* fundo animado */
.fundo{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 800px at 15% -10%, var(--bg2) 0%, transparent 60%),
  radial-gradient(1000px 700px at 85% 110%, var(--bg3) 0%, transparent 60%),
  var(--bg1);
  transition:background 1.2s ease}
.grade{position:fixed;inset:0;z-index:-1;opacity:.25;pointer-events:none;
  background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  animation:desliza 22s linear infinite}
@keyframes desliza{to{background-position:60px 60px}}
.brilho{position:fixed;width:60vw;height:60vw;border-radius:50%;filter:blur(120px);opacity:.16;z-index:-1;
  background:var(--p);top:-20vw;left:-10vw;animation:flutua 18s ease-in-out infinite alternate;transition:background 1.2s}
.brilho.b2{background:var(--s);top:auto;bottom:-25vw;left:auto;right:-15vw;animation-duration:24s}
@keyframes flutua{to{transform:translate(6vw,8vh) scale(1.15)}}

a{color:var(--p);text-decoration:none;transition:.2s}
a:hover{color:var(--s)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* topo */
header.topo{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(6,10,22,.72);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;gap:18px;height:68px}
.logo{font-weight:800;font-size:24px;letter-spacing:1px;
  background:linear-gradient(90deg,var(--p),var(--s));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(255,255,255,.05)}
nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
nav a{padding:9px 14px;border-radius:10px;color:var(--txt2);font-weight:600;font-size:15px;letter-spacing:.3px}
nav a:hover,nav a.on{color:var(--txt);background:var(--card);box-shadow:inset 0 0 0 1px var(--linha)}
.btn{display:inline-block;padding:11px 20px;border-radius:12px;font-weight:700;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--p),var(--s));color:#04070f;
  box-shadow:0 8px 30px -10px var(--p);transition:.2s;font-size:15px}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px var(--p);color:#04070f}
.btn.vazio{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 1px var(--linha)}

/* hero */
.hero{padding:80px 0 50px;text-align:center}
.hero h1{font-size:clamp(38px,7vw,76px);font-weight:800;line-height:1.02;letter-spacing:-1px}
.hero h1 span{background:linear-gradient(90deg,var(--p),var(--s));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--txt2);font-size:19px;margin:18px auto 30px;max-width:640px}
.acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* cards */
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.card{background:var(--card);border:1px solid var(--linha);border-radius:18px;padding:22px;
  backdrop-filter:blur(8px);transition:.25s;position:relative}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--p) 45%,transparent)}
.card h3{font-size:15px;text-transform:uppercase;letter-spacing:2px;color:var(--txt2);margin-bottom:14px;font-weight:700}
.stat{font-size:42px;font-weight:800;line-height:1;
  background:linear-gradient(90deg,var(--p),var(--s));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{display:block;font-size:14px;color:var(--txt2);margin-top:8px;font-weight:600;
  background:none;-webkit-text-fill-color:var(--txt2)}
.selo{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--linha)}
.pulso{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulsa 2s infinite}
.pulso.off{background:#ef4444;animation:none}
@keyframes pulsa{70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* tabelas */
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela th{text-align:left;padding:12px 14px;color:var(--txt2);font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;border-bottom:1px solid var(--linha)}
.tabela td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.tabela tr:hover td{background:rgba(255,255,255,.03)}
.pos{font-weight:800;color:var(--txt2);width:52px}
.pos.top1{color:#f5c518}.pos.top2{color:#cbd5e1}.pos.top3{color:#d97706}
.vazio{padding:40px;text-align:center;color:var(--txt2)}

/* secoes */
section{padding:46px 0}
h2.titulo{font-size:30px;font-weight:800;margin-bottom:6px}
h2.titulo span{background:linear-gradient(90deg,var(--p),var(--s));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--txt2);margin-bottom:24px}

/* formularios */
label{display:block;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--txt2);margin:14px 0 6px;font-weight:700}
input[type=text],input[type=password],input[type=email],select{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--linha);
  background:rgba(0,0,0,.28);color:var(--txt);font-size:16px;font-family:inherit;transition:.2s}
input:focus,select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 18%,transparent)}
.aviso{padding:13px 16px;border-radius:12px;margin:14px 0;font-weight:600}
.aviso.ok{background:rgba(34,197,94,.12);color:#86efac;box-shadow:inset 0 0 0 1px rgba(34,197,94,.3)}
.aviso.erro{background:rgba(239,68,68,.12);color:#fca5a5;box-shadow:inset 0 0 0 1px rgba(239,68,68,.3)}

/* seletor de tema */
.temas{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bolinha{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.2s}
.bolinha:hover,.bolinha.on{transform:scale(1.18);border-color:#fff}

footer{border-top:1px solid var(--linha);margin-top:50px;padding:30px 0;color:var(--txt2);font-size:14px}
footer .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}

@media(max-width:760px){
  .topo .wrap{height:auto;padding:12px 20px;flex-wrap:wrap}
  nav{margin-left:0;width:100%;justify-content:center}
  .hero{padding:46px 0 30px}
  .tabela th:nth-child(4),.tabela td:nth-child(4){display:none}
}

/* ---- layout de 3 colunas, no estilo do site de referencia ---- */
.painel{display:grid;grid-template-columns:230px 1fr 300px;gap:20px;align-items:start;padding-top:24px}
.menu{display:flex;flex-direction:column;gap:8px;position:sticky;top:88px}
.menu a{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:12px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--linha);color:var(--txt);font-weight:700;letter-spacing:.5px}
.menu a:hover{background:color-mix(in srgb,var(--p) 12%,transparent);color:var(--txt);transform:translateX(3px)}
.menu a.destaque{background:linear-gradient(135deg,var(--p),var(--s));color:#04070f;box-shadow:0 8px 26px -10px var(--p);justify-content:center;font-size:17px}
.menu a .mais{color:var(--txt2);font-weight:400}
.tag{font-size:10px;padding:2px 8px;border-radius:999px;background:var(--s);color:#04070f;font-weight:800;letter-spacing:1px}

.barraip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.barraip .ip{flex:1;min-width:240px;background:var(--card);box-shadow:inset 0 0 0 1px var(--linha);
  border-radius:12px;padding:13px 18px;font-weight:700;letter-spacing:.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.barraip .ip small{color:var(--txt2);font-weight:600}
.barraip .onbox{background:linear-gradient(135deg,var(--p),var(--s));color:#04070f;border-radius:12px;
  padding:10px 20px;text-align:center;font-weight:800;line-height:1.1}
.barraip .onbox span{display:block;font-size:26px}
.barraip .onbox small{font-size:10px;letter-spacing:1.4px;opacity:.85}

.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.mini div{background:var(--card);box-shadow:inset 0 0 0 1px var(--linha);border-radius:12px;padding:14px 16px}
.mini b{display:block;font-size:22px;font-weight:800}
.mini small{color:var(--txt2);font-size:11px;letter-spacing:1.4px;text-transform:uppercase}

.lado{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px}
.box{background:var(--card);border:1px solid var(--linha);border-radius:16px;padding:16px;backdrop-filter:blur(8px)}
.box h4{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--txt2);margin-bottom:12px;font-weight:800}
.box .linha{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.box .linha:last-child{border:0}
.relogio{font-size:30px;font-weight:800;letter-spacing:2px;text-align:center;padding:6px 0;
  background:linear-gradient(90deg,var(--p),var(--s));-webkit-background-clip:text;background-clip:text;color:transparent}
.dono{text-align:center;font-weight:800;font-size:17px;padding:8px;border-radius:10px;
  background:color-mix(in srgb,var(--p) 14%,transparent);box-shadow:inset 0 0 0 1px var(--linha)}

.podio{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.podio .p{background:rgba(0,0,0,.25);border-radius:14px;padding:16px 10px;text-align:center;
  box-shadow:inset 0 0 0 1px var(--linha);transition:.2s}
.podio .p:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--p)}
.podio .med{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--linha);margin-bottom:10px}
.podio .p1 .med{background:linear-gradient(135deg,#f5c518,#ff9d00);color:#1a1200}
.podio .p2 .med{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#0f172a}
.podio .p3 .med{background:linear-gradient(135deg,#d97706,#92400e);color:#1a0e00}
.podio .nome{font-weight:800;font-size:14px;margin-bottom:6px;word-break:break-word}
.podio .val{font-size:22px;font-weight:800;
  background:linear-gradient(90deg,var(--p),var(--s));-webkit-background-clip:text;background-clip:text;color:transparent}
.podio .val small{display:block;font-size:10px;letter-spacing:1.4px;color:var(--txt2);-webkit-text-fill-color:var(--txt2)}

@media(max-width:1100px){.painel{grid-template-columns:1fr}.menu,.lado{position:static}}

/* acordeao do menu lateral */
.acord{background:var(--card);box-shadow:inset 0 0 0 1px var(--linha);border-radius:12px;overflow:hidden}
.acord .cab{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:13px 16px;background:none;border:0;color:var(--txt);font:inherit;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;font-size:13px;cursor:pointer;transition:.2s}
.acord .cab:hover{color:var(--p)}
.acord .itens{display:none;padding:0 6px 8px}
.acord.aberto .itens{display:block}
.acord.aberto .cab .mais{transform:rotate(45deg)}
.acord .cab .mais{transition:.2s;display:inline-block;font-weight:400;color:var(--txt2)}
.acord .itens a{display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:9px 12px;border-radius:8px;color:var(--txt2);font-weight:600;font-size:14px;
  background:none;box-shadow:none;letter-spacing:0}
.acord .itens a:hover{background:rgba(255,255,255,.05);color:var(--txt);transform:none}

/* ---- pagina de personagem ---- */
.busca{display:flex;gap:10px;flex-wrap:wrap}
.busca input{flex:1;min-width:220px}
.fichatopo{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.outfit{width:132px;height:132px;flex:0 0 auto;position:relative;overflow:hidden;
  border-radius:16px;background:rgba(0,0,0,.25)}
.outfit img{position:absolute;left:-54px;top:-38px;width:161px;height:161px;max-width:none;
  image-rendering:pixelated;image-rendering:crisp-edges}
.fichatopo .nome{font-size:32px;font-weight:800;line-height:1.1}
.fichatopo .voc{color:var(--txt2);font-weight:600}
.selos{margin-left:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.abas{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.abas a{padding:10px 18px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--linha);
  color:var(--txt2);font-weight:700;letter-spacing:.5px;font-size:14px}
.abas a.on{background:linear-gradient(135deg,var(--p),var(--s));color:#04070f;box-shadow:0 8px 26px -12px var(--p)}
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.tres .b{background:rgba(0,0,0,.25);border-radius:14px;padding:16px;box-shadow:inset 0 0 0 1px var(--linha)}
.tres .b .n{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--txt2);font-weight:800}
.tres .b .v{font-size:30px;font-weight:800;margin-top:6px}
.bonus{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;
  border-radius:12px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--linha);margin-bottom:10px}
.bonus b{color:var(--p)}
.pill{padding:8px 16px;border-radius:999px;font-weight:800;
  background:linear-gradient(135deg,var(--p),var(--s));color:#04070f}

/* equipamento */
.equip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:420px;margin:0 auto}
.slot{aspect-ratio:1;border-radius:14px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--linha);
  display:grid;place-items:center;position:relative;transition:.2s;padding:6px}
.slot:hover{box-shadow:inset 0 0 0 1px var(--p);transform:translateY(-2px)}
.slot img{max-width:44px;max-height:44px;image-rendering:pixelated}
.slot .rot{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;
  letter-spacing:1px;color:var(--txt2);text-transform:uppercase}
.slot .qtd{position:absolute;top:5px;right:7px;font-size:11px;font-weight:800;color:var(--p)}
.slot.vazioSlot{opacity:.45}
.itemnome{font-size:12px;color:var(--txt2);text-align:center;margin-top:6px;line-height:1.3}
.lista-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px}
.lista-itens .it{background:rgba(0,0,0,.25);border-radius:12px;padding:10px 6px;text-align:center;
  box-shadow:inset 0 0 0 1px var(--linha)}
.lista-itens .it img{max-width:40px;max-height:40px;image-rendering:pixelated}
.lista-itens .it div{font-size:11px;color:var(--txt2);margin-top:5px;line-height:1.25;word-break:break-word}

/* tooltip de item */
.temtt{position:relative}
.temtt .tt{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  white-space:normal;
  min-width:210px;max-width:280px;padding:12px 14px;border-radius:14px;z-index:80;
  background:rgba(8,12,24,.97);box-shadow:0 20px 50px -12px #000, inset 0 0 0 1px var(--linha);
  opacity:0;visibility:hidden;transition:.18s;pointer-events:none;text-align:left}
.temtt:hover .tt{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.tt-nome{font-weight:800;font-size:15px;margin-bottom:8px;color:var(--txt)}
.tt-up{background:linear-gradient(135deg,var(--p),var(--s));color:#04070f;padding:1px 8px;border-radius:999px;font-size:12px}
.tt-l{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0;color:var(--txt2)}
.tt-l b{color:var(--txt)}
.tt-d{margin-top:8px;padding-top:8px;border-top:1px solid var(--linha);font-size:12px;
  color:var(--txt2);font-style:italic;line-height:1.5}
.tt-id{margin-top:6px;font-size:10px;color:var(--txt2);opacity:.6;letter-spacing:1px}

/* top level com outfit, no estilo do painel antigo */
.toplista{display:flex;flex-direction:column;gap:6px}
.toplista .r{display:flex;align-items:center;gap:4px;padding:6px 12px 6px 4px;border-radius:12px;
  background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--linha);transition:.2s}
.toplista .r:hover{box-shadow:inset 0 0 0 1px var(--p);transform:translateX(2px)}
/* Medi o sprite: o boneco ocupa 33x33 px no CANTO INFERIOR DIREITO do quadro
   de 64x64. Amplio e desloco para enquadrar so esse pedaco. A caixa e um pouco
   maior que o necessario de proposito: sobra folga para outfits com montaria
   ou sprites maiores, que ocupam mais que os 33px medidos. O deslocamento ja
   inclui a centralizacao. O topo vem um pouco mais folgado de proposito: outfits
   com chapeu alto (mago) passam da area medida e cortariam em cima. */
.toplista .out{width:66px;height:66px;flex:0 0 auto;position:relative;overflow:hidden}
/* sprite no tamanho nativo (64x64), sem moldura e sem corte. Ampliar mais que
   isso so cabe se a linha crescer junto, senao o boneco fica cortado. */
.toplista .out img{position:absolute;left:-27px;top:-19px;width:80px;height:80px;
  max-width:none;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.toplista .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.toplista .nm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toplista .sub2{font-size:11px;color:var(--txt2);letter-spacing:.3px}
.toplista .sub2 b{color:var(--p)}
/* so um envelope para a medalha SVG: nada de circulo por baixo */
.toplista .med2{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;line-height:0}


/* medalhas svg */
.medalha{flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.chip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-size:13px;font-weight:800;color:var(--txt2);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--linha)}


/* o tooltip dos itens da primeira linha abre para baixo, senao sai do card */
.equip .slot:nth-child(-n+3) .tt,
.lista-itens .it:nth-child(-n+8) .tt{bottom:auto;top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-6px)}
.equip .slot:nth-child(-n+3):hover .tt,
.lista-itens .it:nth-child(-n+8):hover .tt{transform:translateX(-50%) translateY(0)}

/* tooltip rico, no estilo do painel de item do jogo */
.temtt .tt{min-width:250px;max-width:320px;padding:0;overflow:hidden}
.tt-cab{display:flex;gap:12px;align-items:center;padding:12px 14px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),transparent);
  border-bottom:1px solid var(--linha)}
.tt-cab img{width:38px;height:38px;image-rendering:pixelated;flex:0 0 auto}
.tt-tipo{font-size:10px;letter-spacing:1.6px;color:var(--p);font-weight:800;margin-bottom:3px}
.tt-nome{font-weight:800;font-size:16px;color:#ffd76a;line-height:1.15}
.tt-l{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:4px 14px}
.tt-l:first-of-type{padding-top:10px}
.tt-l b{font-weight:700}
.tt-l.branco b{color:#e8eefc}
.tt-l.verde  b{color:#7CFF5A}
.tt-l.azul   b{color:#7dd3fc}
.tt-l.ciano  b{color:#22d3ee}
.tt-l.laranja b{color:#ff9d3c}
.tt-l.cinza  span,.tt-l.cinza b{color:var(--txt2)}
.tt-l span{color:var(--txt2)}
.tt-d{margin:8px 14px 0;padding:8px 0 0;border-top:1px solid var(--linha);font-size:12px;
  color:var(--txt2);font-style:italic;line-height:1.5}
.tt-id{padding:8px 14px 10px;font-size:10px;color:var(--txt2);opacity:.55;letter-spacing:1px}

/* slots customizados do servidor (brinco, voider, artifice) */
.equip .slot.extra{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s) 55%,transparent)}
.equip .slot.extra .rot{color:var(--s)}

/* O backdrop-filter do card cria contexto de empilhamento e prende o tooltip
   dentro dele. Subir o card inteiro no hover resolve, sem quebrar o efeito. */
.card{z-index:1}
.card:hover{z-index:60}
.temtt{position:relative;z-index:1}
.temtt:hover{z-index:70}
.temtt .tt{z-index:200}