/* Página inicial (layout de portal): coluna lateral + painel central por abas. */
:root{--hx-line:#721329;--hx-line2:#8e1830;--hx-red:#ff4961;--hx-red2:#cf2944;--hx-text:#e9dfe4;--hx-muted:#b9adb4;--hx-title:"Cinzel",Georgia,serif;--hx-body:"Manrope","Segoe UI",sans-serif}
body.hx{margin:0;min-height:100vh;background:#050408;color:var(--hx-text);font-family:var(--hx-body);letter-spacing:.01em;overflow-x:hidden;overflow-y:auto}
.hx *{box-sizing:border-box}
.hx-bg{position:fixed;inset:0;z-index:-2;background:url("assets/arena-ruptura.jpg") center top/cover no-repeat;filter:saturate(.8) brightness(.55)}
.hx-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0,#0000 0,#050408cc 70%),linear-gradient(180deg,#05040800 0,#050408 92%)}

.hx-topbar{position:relative;z-index:50;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:58px;padding:0 max(18px,calc((100vw - 1320px)/2));background:linear-gradient(180deg,#050407fa,#09060bf2 72%,#16070df2);box-shadow:0 8px 28px #000b,0 1px #8e1830}
.hx-online{margin-right:auto;font-size:12px;font-weight:800;letter-spacing:.06em;color:#5ee08a}
.hx-online i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5ee08a;box-shadow:0 0 8px #5ee08a;margin-right:8px}
.hx-discord{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border:1px solid var(--hx-line);border-radius:3px;background:linear-gradient(180deg,#1b0910,#0a0508);color:#fff;text-decoration:none;box-shadow:inset 0 0 12px #000}
.hx-discord:hover{border-color:var(--hx-red);filter:drop-shadow(0 0 8px #ff304855)}
.hx-discord svg{width:22px;height:22px;fill:#ff4961}
.hx-discord span{display:flex;flex-direction:column;line-height:1}
.hx-discord small{font-size:7px;letter-spacing:.2em;color:var(--hx-muted);font-weight:800}
.hx-discord b{font-size:12px;letter-spacing:.12em}
.hx-lang{display:flex;gap:6px}
.hx-lang button{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--hx-line);border-radius:3px;background:linear-gradient(180deg,#1b0910,#0a0508);color:var(--hx-muted);font:800 11px var(--hx-body);letter-spacing:.1em;cursor:pointer}
.hx-lang button.is-active{color:#fff;border-color:var(--hx-red);box-shadow:0 0 10px #ff304844}
.hx-lang img{width:20px;height:14px;object-fit:cover;border-radius:2px}
.hx-acct{border:0;background:none;color:var(--hx-muted);font:600 12px var(--hx-body);padding:0 8px;cursor:pointer}
.hx-acct:hover{color:#fff}

.hx-page{display:grid;grid-template-columns:270px minmax(0,1fr) 250px;gap:26px;width:min(1620px,100% - 36px);min-height:calc(100vh - 58px);min-height:calc(100dvh - 58px);margin:0 auto;padding:22px 0 22px}
.hx-side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:visible}
.hx-brand{display:block;padding:4px 6px;text-align:center}
.hx-brand img{width:100%;max-width:236px;height:auto;filter:drop-shadow(0 0 14px #ba173966)}
.hx-play{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:96px;border:0;cursor:pointer;overflow:hidden;isolation:isolate;background:url("assets/button-frame-crimson.png") center/100% 100% no-repeat;color:#fff;font:900 21px var(--hx-title);letter-spacing:.14em;text-shadow:0 2px 3px #000;animation:hx-pulso 2.6s ease-in-out infinite}
.hx-play:before{content:"";position:absolute;inset:18px 30px;z-index:-1;background:linear-gradient(90deg,#08060a,#4d0a1c 60%,#08060a)}
.hx-play:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 0,#ffffff00 8%,#ffffffcc 50%,#ffffff00 92%,transparent);transform:skewX(-18deg);animation:hx-varredura 2.8s ease-in-out infinite}
.hx-play span{position:relative;z-index:2}
.hx-play:hover{filter:brightness(1.2) drop-shadow(0 0 14px #ffffff66)}
@keyframes hx-varredura{0%{left:-60%}55%,100%{left:130%}}
@keyframes hx-pulso{0%,100%{filter:drop-shadow(0 0 6px #ff304844)}50%{filter:drop-shadow(0 0 16px #ffffff77)}}
.hx .hx-menu{display:flex;flex-direction:column;gap:9px;margin:6px 0 0;width:100%}
.hx-menu button{width:100%;position:relative;display:flex;align-items:center;justify-content:center;height:50px;border:1px solid #2a0d16;border-radius:3px;color:#f1e6ea;font:800 12px var(--hx-title);letter-spacing:.16em;background:linear-gradient(180deg,#140a10,#070408);box-shadow:inset 0 0 14px #000,0 3px 10px #0008;transition:.2s;cursor:pointer}
.hx-menu button:hover,.hx-menu button.on{border-color:var(--hx-line2);color:#fff;background:linear-gradient(180deg,#2a0c17,#0b0508);box-shadow:inset 0 0 14px #000,0 0 14px #8e183055}
.hx-menu button i{position:absolute;left:14px;color:var(--hx-red2);font-style:normal;font-size:9px}

.hx-main{display:flex;flex-direction:column;gap:22px;min-width:0;min-height:0}
.hx-framed{position:relative;border:1px solid var(--hx-line);border-radius:3px;background:linear-gradient(180deg,#0d080cf2,#07050af2);box-shadow:inset 0 0 40px #000,0 18px 45px #000a}
.hx-corners{position:absolute;inset:0;pointer-events:none;z-index:4}
.hx-corners i{position:absolute;width:86px;height:86px;background:url("assets/arena-corner-crimson.png") left top/contain no-repeat;filter:drop-shadow(0 0 6px #e11d3f66)}
.hx-corners .tl{left:-13px;top:-13px}.hx-corners .tr{right:-13px;top:-13px;transform:rotate(90deg)}
.hx-corners .br{right:-13px;bottom:-13px;transform:rotate(180deg)}.hx-corners .bl{left:-13px;bottom:-13px;transform:rotate(270deg)}

.hx-hero{flex:0 0 clamp(250px,30vh,320px);overflow:hidden}
.hx-hero>img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.hx-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050408ee 0,#0504089a 42%,#0000 78%)}
.hx-hero-copy{position:absolute;left:36px;top:50%;transform:translateY(-50%);z-index:3;width:min(520px,calc(100% - 72px))}
.hx-hero-copy small{font-size:10px;font-weight:800;letter-spacing:.24em;color:var(--hx-red)}
.hx-hero-copy h1{margin:8px 0 10px;font:900 clamp(26px,3.3vw,42px)/.98 var(--hx-title);text-transform:uppercase;letter-spacing:-.03em;font-style:normal;text-shadow:0 4px 0 #26040c,0 0 24px #000}
.hx-hero-copy h1 em{font-style:normal;color:var(--hx-red);-webkit-text-stroke:0;filter:none}
.hx-hero-copy p{color:#d7cbd1;font-size:13.5px;line-height:1.5;max-width:430px;margin:0}

.hx-panel{flex:1 1 auto;min-height:500px;display:flex;flex-direction:column;padding:22px 8px 22px 26px}
.hx-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 18px 14px 0;flex:none}
.hx-sec-head h2{font:900 22px var(--hx-title);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 3px 0 #26060c;margin:0;font-style:normal}
.hx-sec-head h2 i{color:var(--hx-red2);font-style:normal;font-size:12px;margin-right:10px;vertical-align:middle}
.hx-sec-head span{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--hx-red)}
.hx-view{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:18px;scrollbar-color:#8e1830 #12080d}
.hx-view.on{display:block}
.hx-view::-webkit-scrollbar{width:9px}.hx-view::-webkit-scrollbar-track{background:#12080d}.hx-view::-webkit-scrollbar-thumb{background:#8e1830;border-radius:5px}

.hx-updates{display:flex;flex-direction:column;gap:10px}
.hx-upd{border:1px solid #2a0d16;border-radius:3px;background:linear-gradient(180deg,#140a10,#08050a);overflow:hidden}
.hx-upd summary{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;list-style:none;font-weight:800;font-size:14px}
.hx-upd summary::-webkit-details-marker{display:none}
.hx-upd summary .h{color:var(--hx-muted);font-weight:600}
.hx-upd summary .tag{margin-left:auto;font-size:9px;letter-spacing:.14em;padding:4px 9px;border:1px solid var(--hx-line2);border-radius:2px;color:var(--hx-red)}
.hx-upd summary:after{content:"⌄";color:var(--hx-muted);font-size:18px}
.hx-upd[open] summary:after{transform:rotate(180deg)}
.hx-upd[open]{border-color:var(--hx-line2)}
.hx-upd ul{padding:2px 22px 18px 38px;color:#d7cbd1;font-size:13.5px;line-height:1.75;margin:0}
.hx-upd li::marker{color:var(--hx-red2)}
.hx-upd b{color:#fff}

.hx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.hx-chips button{height:32px;padding:0 13px;border:1px solid #2a0d16;border-radius:3px;background:linear-gradient(180deg,#140a10,#070408);color:var(--hx-muted);font:800 10px var(--hx-body);letter-spacing:.12em;cursor:pointer}
.hx-chips button.on,.hx-chips button:hover{color:#fff;border-color:var(--hx-red)}
.hx-bestiary{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.hx-mon{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:150px;padding:10px 8px;font-family:inherit;color:inherit;cursor:pointer;border:1px solid #2a0d16;border-radius:3px;text-align:center;background:radial-gradient(90% 60% at 50% 42%,#3a0c1a88,transparent 70%),linear-gradient(180deg,#140a10,#07050a);transition:.2s;overflow:hidden}
.hx-mon:hover{border-color:var(--hx-red);transform:translateY(-3px);box-shadow:0 10px 24px #000a,0 0 16px #ff304833}
.hx-mon .art{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
.hx-mon img{max-width:70%;max-height:58px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 8px #000)}
.hx-mon.boss img{max-height:70px}
.hx-mon .art{overflow:hidden}
.hx-mon b{font:800 12px var(--hx-title);letter-spacing:.06em;margin-top:8px}
.hx-mon small{margin-top:3px;font-size:10px;color:var(--hx-muted);letter-spacing:.08em}
.hx-mon.boss{border-color:#7a1a30}
.hx-mon.boss:before{content:"★";position:absolute;top:8px;right:8px;font-size:8px;font-weight:800;letter-spacing:.14em;color:#fff;background:#8e1830;padding:3px 6px;border-radius:2px}

.hx-foot{flex:none;text-align:center;color:var(--hx-muted);font-size:10px;letter-spacing:.14em;padding-top:8px}

@media (max-width:1400px){
  .hx-page{grid-template-columns:1fr}
  .hx-menu{flex-direction:row;flex-wrap:wrap}.hx-menu button{flex:1 1 140px}
  .hx-panel{min-height:70vh}
}
@media (max-width:620px){.hx-online{display:none}.hx-hero-copy h1{font-size:24px}.hx-hero-copy p{display:none}}


/* ---- menu: Market desativado e Loja com submenu ---- */
.hx-menu button.hx-disabled{cursor:not-allowed;opacity:.5}
.hx-menu button.hx-disabled:hover{border-color:#2a0d16;box-shadow:inset 0 0 14px #000,0 3px 10px #0008;background:linear-gradient(180deg,#140a10,#070408)}
.hx-menu button em{position:absolute;right:12px;font-style:normal;font-size:8px;letter-spacing:.14em;color:var(--hx-red)}
.hx-sub{display:flex;flex-direction:column;gap:4px;margin:-3px 0 0;padding:8px;border:1px solid #2a0d16;border-radius:3px;background:#0a0508}
.hx-sub[hidden]{display:none}
.hx-menu .hx-sub button{height:38px;font:700 12px var(--hx-body);letter-spacing:.04em;justify-content:flex-start;padding:0 12px;background:none;box-shadow:none;border-color:transparent;color:var(--hx-muted)}
.hx-menu .hx-sub button.on,.hx-menu .hx-sub button:hover{color:#fff;border-color:var(--hx-line2);background:#1c0b13;box-shadow:none}

/* ---- Minha conta / Loja ---- */
.hx-dica{color:#d7cbd1;font-size:13.5px;line-height:1.55;margin:0 0 12px}.hx-dica.big{font-size:15px}
.hx-status{min-height:18px;margin:8px 0;font-size:13px;color:#ff8093}.hx-status.ok{color:#5ee08a}
.hx-vazio{padding:30px 6px}.hx-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hx-btn{height:38px;padding:0 16px;border:1px solid #3a1620;border-radius:3px;background:linear-gradient(180deg,#1c0d14,#0b0508);color:#f1e6ea;font:800 12px var(--hx-body);letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.hx-btn:hover:not(:disabled){border-color:var(--hx-red);color:#fff}.hx-btn:disabled{opacity:.5;cursor:not-allowed}
.hx-btn-gold{background:linear-gradient(180deg,#e0b84b,#b48a22);border-color:#f1d27a;color:#1a1204}
.hx-btn-gold:hover:not(:disabled){filter:brightness(1.12);color:#000}
.hx-resumo{display:grid;grid-template-columns:auto 1fr auto;gap:8px 22px;align-items:center;padding:16px 18px;margin-bottom:6px;border:1px solid #2a0d16;border-radius:3px;background:linear-gradient(180deg,#140a10,#08050a)}
.hx-nota b{display:block;font:900 32px var(--hx-title);color:#f1d27a;line-height:1}.hx-nota small,.hx-cp small{font-size:9px;letter-spacing:.16em;color:var(--hx-muted)}
.hx-barras{display:flex;gap:6px;grid-column:2}.hx-barras i{flex:1;height:6px;border-radius:3px;background:#2a1a20}.hx-barras i.on{background:linear-gradient(90deg,#b48a22,#f1d27a)}
.hx-mail{grid-column:2;color:var(--hx-muted);font-size:13px}.hx-olho{margin-left:8px;border:0;background:none;cursor:pointer;font-size:14px}
.hx-cp{grid-column:3;grid-row:1/3;text-align:right}.hx-cp b{display:block;font:900 20px var(--hx-title);color:#f1d27a}
.hx-grupo{margin:20px 0 6px;font:800 11px var(--hx-title);letter-spacing:.24em;color:var(--hx-muted);border-bottom:1px solid #2a0d16;padding-bottom:6px}
.hx-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 12px;border-bottom:1px solid #1c0d14}
.hx-row.alerta{border-left:3px solid #e0b84b;background:linear-gradient(90deg,#e0b84b0d,transparent)}
.hx-row-t{font-weight:800;font-size:15px;color:#fff}.hx-row-txt p{margin:4px 0 0;font-size:13px;color:#c9bcc3;line-height:1.5}
.hx-selo{margin-left:10px;padding:3px 8px;border-radius:9px;font-size:9px;letter-spacing:.1em;background:#2a2a2e;color:#cfc7cc}
.hx-selo.ok{background:#12351f;color:#5ee08a}.hx-selo.warn{background:#3d2c0a;color:#f1c04a}
.hx-modal{width:min(420px,92vw);max-height:90vh;overflow:auto;padding:22px;border:1px solid var(--hx-line);border-radius:4px;background:#0c0709;color:var(--hx-text);box-shadow:0 30px 80px #000}
.hx-modal::backdrop{background:#000a}
.hx-modal h3{margin:0 0 14px;font:900 17px var(--hx-title);letter-spacing:.12em;text-transform:uppercase;color:#f1d27a}
.hx-modal-x{position:absolute;right:12px;top:8px;border:0;background:none;color:var(--hx-muted);font-size:22px;cursor:pointer}
.hx-form{display:flex;flex-direction:column;gap:10px}
.hx-input{width:100%;height:40px;padding:0 12px;border:1px solid #3a1620;border-radius:3px;background:#0a0508;color:#fff;font:600 14px var(--hx-body);outline:none}
.hx-input:focus{border-color:var(--hx-red)}
.hx-regras{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.7;color:#ff7a8b}.hx-regras li.ok{color:#5ee08a}
.hx-key{margin:12px 0;padding:14px;border:1px dashed #e0b84b;border-radius:3px;text-align:center;font:800 18px ui-monospace,Consolas,monospace;letter-spacing:.12em;color:#f1d27a;user-select:all}
.hx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:14px 0 18px}
.hx-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #2a0d16;border-radius:3px;background:linear-gradient(180deg,#140a10,#07050a)}
.hx-card b{font:800 14px var(--hx-title);color:#fff}.hx-card span{font-size:12px;color:var(--hx-muted)}.hx-card em{font-style:normal;font-size:12px;font-weight:800;color:#f1d27a}
.hx-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:14px}
.hx-pack{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;border:1px solid #2a0d16;border-radius:6px;background:linear-gradient(180deg,#140a10,#07050a);text-align:center}
.hx-pack b{font:900 30px var(--hx-body);color:#6fd3ff}.hx-pack small{font-size:9px;letter-spacing:.16em;color:var(--hx-muted)}
.hx-pack em{font-style:normal;font-size:12px;font-weight:800;color:#5ee08a;min-height:16px}.hx-pack p{margin:0;font-size:12px;font-weight:700;color:#fff;min-height:16px}
.hx-pack strong{margin:6px 0;font:900 20px var(--hx-body);color:#f1d27a}.hx-pack .hx-btn{width:100%}
.hx-tabela{display:flex;flex-direction:column}.hx-trow{display:grid;grid-template-columns:180px 1fr auto;gap:12px;padding:11px 8px;border-bottom:1px solid #1c0d14;font-size:13px;color:#d7cbd1}
.hx-trow b.neg{color:#ff8093}.hx-trow b.pos{color:#5ee08a}
@media (max-width:620px){.hx-resumo{grid-template-columns:1fr}.hx-barras,.hx-mail,.hx-cp{grid-column:1;grid-row:auto;text-align:left}.hx-row{flex-direction:column;align-items:flex-start}.hx-trow{grid-template-columns:1fr}}

/* ---- coluna direita: RANK ---- */
.hx-rankcol{min-width:0;min-height:0;padding-top:16px}
.hx-rank{display:flex;flex-direction:column;gap:12px;padding:20px 16px;height:100%}
.hx-rank-head{text-align:center}
.hx-rank-head h2{margin:0;font:900 20px var(--hx-title);letter-spacing:.24em;color:#fff;text-shadow:0 3px 0 #26060c}
.hx-rank-head small{display:inline-block;margin-top:6px;font-size:8px;font-weight:800;letter-spacing:.2em;color:var(--hx-red);border:1px dashed var(--hx-line2);padding:3px 8px}
.hx-rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.hx-rank-list li{display:flex;align-items:center;gap:12px;flex:1;max-height:64px;min-height:34px;padding:0 12px;border:1px solid #2a0d16;border-radius:3px;background:linear-gradient(180deg,#140a10,#070408);color:#5b4b53}
.hx-rank-list b{font:900 13px var(--hx-title);color:var(--hx-red2);width:16px}
.hx-rank>p{margin:0;text-align:center;font-size:11px;color:var(--hx-muted);line-height:1.5}

/* ---- Bestiário: detalhes ---- */
.hx-modal:has(.hx-mon-top){width:min(520px,94vw)}
.hx-mon-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.hx-mon-top img{width:84px;height:84px;object-fit:contain;image-rendering:pixelated;padding:6px;border:1px solid #2a0d16;border-radius:3px;background:radial-gradient(circle,#3a0c1a88,#07050a)}
.hx-mon-top h3{margin:0 0 4px}
.hx-mon-top small{font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--hx-red)}
.hx-stats{display:grid;grid-template-columns:120px 1fr;margin:0}
.hx-stats dt,.hx-stats dd{margin:0;padding:8px 4px;border-bottom:1px solid #1c0d14;font-size:13px}
.hx-stats dt{color:var(--hx-muted);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hx-stats dd{color:#fff}
.hx-rank-list li .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1e6ea;font-weight:700;font-size:13px}
.hx-rank-list li em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--hx-muted)}
.hx-rank-list li.vazio{justify-content:center;flex:none;color:var(--hx-muted);font-size:12px}
.hx-rank-list li.top1{border-color:#b48a22;box-shadow:inset 0 0 14px #b48a2226}.hx-rank-list li.top1 b,.hx-rank-list li.top1 em{color:#f1d27a}
.hx-rank-list li.top2 b{color:#d5d9e0}.hx-rank-list li.top3 b{color:#d08a4e}

/* ---- selo BETA TEST (acima do Jogar Agora) ---- */
.hx-beta{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:96px;flex:none;overflow:hidden;isolation:isolate;background:url("assets/button-frame-crimson.png") center/100% 100% no-repeat;color:#fff;font:900 26px var(--hx-title);letter-spacing:.16em;text-shadow:0 2px 3px #000,0 0 14px #ff3048;animation:hx-beta-pulso .9s ease-in-out infinite;user-select:none}
.hx-beta:before{content:"";position:absolute;inset:18px 30px;z-index:-1;background:linear-gradient(90deg,#1a0208,#7a0f26 50%,#1a0208)}
.hx-beta:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 0,#ffffff00 8%,#ffffffdd 50%,#ffffff00 92%,transparent);transform:skewX(-18deg);animation:hx-varredura 1.3s ease-in-out infinite}
.hx-beta span{position:relative;z-index:2;animation:hx-beta-texto .9s ease-in-out infinite}
@keyframes hx-beta-pulso{0%,100%{filter:drop-shadow(0 0 8px #ff304866) brightness(1)}50%{filter:drop-shadow(0 0 24px #ff8090) brightness(1.3)}}
@keyframes hx-beta-texto{0%,100%{opacity:.85}50%{opacity:1}}
.hx-menu button.hx-vipbtn{border-color:#8a6a1c;color:#f1d27a}
.hx-menu button.hx-vipbtn i{color:#f1d27a}
.hx-menu button.hx-vipbtn:hover,.hx-menu button.hx-vipbtn.on{border-color:#f1d27a;box-shadow:inset 0 0 14px #000,0 0 14px #b48a2255}

/* ---- Vantagens VIP ---- */
.hx-vip{display:flex;flex-direction:column;margin:14px 0 18px;border:1px solid #2a0d16;border-radius:3px;overflow:hidden}
.hx-vip-row{display:grid;grid-template-columns:1fr 150px 150px;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid #1c0d14;font-size:14px;color:#d7cbd1;background:linear-gradient(180deg,#140a10,#08050a)}
.hx-vip-row:last-child{border-bottom:0}
.hx-vip-row span:not(:first-child){text-align:center;font-weight:700}
.hx-vip-row .v{color:#f1d27a;font-weight:900}
.hx-vip-head{font:800 11px var(--hx-title);letter-spacing:.2em;color:var(--hx-muted)}
.hx-vip-head .v{color:#f1d27a}
@media (max-width:620px){.hx-vip-row{grid-template-columns:1fr 84px 84px;padding:11px 10px;font-size:12px}}

/* ---- celular: botão no topo abre o menu lateral (gaveta) ---- */
.hx-burger,.hx-toplogo,.hx-top-play,.hx-side-close,.hx-scrim{display:none}
@media (max-width:1400px){
  .hx-rankcol{display:none}
  .hx-topbar{height:auto;min-height:58px;flex-wrap:wrap;gap:8px;padding:8px 12px;justify-content:flex-start}
  .hx-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 10px;border:1px solid var(--hx-line);border-radius:6px;background:linear-gradient(180deg,#1b0910,#0a0508);cursor:pointer}
  .hx-burger i{display:block;height:2px;border-radius:2px;background:#ff4961}
  .hx-toplogo{display:block}.hx-toplogo img{height:34px;width:auto;display:block}
  .hx-online{display:block;margin:0 auto 0 4px;font-size:11px}
  .hx-top-play{display:block;height:38px;padding:0 16px;border:1px solid #f1d27a;border-radius:6px;background:linear-gradient(180deg,#3a2a08,#150e03);color:#f1d27a;font:900 12px var(--hx-title);letter-spacing:.12em;cursor:pointer}
  .hx-lang button{height:38px;padding:0 8px}.hx-lang button span{display:none}
  .hx-discord{padding:0 10px}.hx-discord span{display:none}
  .hx-side{position:fixed;top:0;left:0;bottom:0;z-index:200;width:min(320px,86vw);height:100dvh;padding:16px 14px 24px;overflow-y:auto;background:linear-gradient(180deg,#0b0609,#050408);border-right:1px solid var(--hx-line);box-shadow:12px 0 40px #000c;transform:translateX(-105%);transition:transform .25s ease}
  .hx-menu-open .hx-side{transform:none}
  .hx-side-close{display:block;position:absolute;top:8px;right:10px;border:0;background:none;color:var(--hx-muted);font-size:26px;line-height:1;cursor:pointer;z-index:2}
  .hx-scrim{display:block;position:fixed;inset:0;z-index:150;background:#000a;opacity:0;pointer-events:none;transition:opacity .25s}
  .hx-menu-open .hx-scrim{opacity:1;pointer-events:auto}
  .hx-menu-open{overflow:hidden}
  .hx .hx-menu{flex-direction:column;flex-wrap:nowrap}.hx-menu button{flex:none}
  .hx-brand img{max-width:200px}
  .hx-page{padding-top:14px}
}
@media (max-width:560px){.hx-online{display:none}.hx-top-play{margin-left:auto}}

/* ---- aba Rank (lista completa) e coluna lateral só no computador ---- */
.hx-rank-full{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hx-rank-full li{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;border:1px solid #2a0d16;border-radius:3px;background:linear-gradient(180deg,#140a10,#070408);color:#5b4b53}
.hx-rank-full li b{font:900 14px var(--hx-title);color:var(--hx-red2);width:26px}
.hx-rank-full li .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1e6ea;font-weight:700;font-size:14px}
.hx-rank-full li em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--hx-muted)}
.hx-rank-full li.vazio{justify-content:center;color:var(--hx-muted);font-size:13px}
.hx-rank-full li.top1{border-color:#b48a22;box-shadow:inset 0 0 14px #b48a2226}.hx-rank-full li.top1 b,.hx-rank-full li.top1 em{color:#f1d27a}
.hx-rank-full li.top2 b{color:#d5d9e0}.hx-rank-full li.top3 b{color:#d08a4e}

/* ---------- Suporte (tickets) ---------- */
.hx-menu button .hx-badge{right:12px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hx-red2);color:#fff;font:800 10px var(--hx-body);letter-spacing:0;display:flex;align-items:center;justify-content:center}
.sp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sp-head h3{margin:0 0 4px;font:900 22px var(--hx-body);color:#fff;letter-spacing:0}
.sp-head .hx-dica{margin:0}.sp-tit{min-width:0;flex:1 1 260px}.sp-tit h3{overflow-wrap:anywhere}
.sp-card{padding:18px;border:1px solid #2a0d16;border-radius:6px;background:#0b0709cc;margin-top:14px}
.sp-card h4{margin:0 0 14px;font:800 16px var(--hx-body);color:#fff}
.sp-form{display:flex;flex-direction:column;gap:12px}
.sp-form label{display:flex;flex-direction:column;gap:6px;font:800 10px var(--hx-body);letter-spacing:.1em;color:var(--hx-muted)}
.sp-form select.hx-input{height:42px}
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-text{height:auto;min-height:120px;padding:10px 12px;resize:vertical;line-height:1.5}
.sp-select{height:38px;width:auto;min-width:170px}
.sp-attach-box{border:1px dashed transparent;border-radius:4px;padding:2px}.sp-attach-box.over{border-color:var(--hx-red);background:#ff49610d}
.sp-attach-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-attach{height:38px;padding:0 14px;border:1px dashed #3a1620;border-radius:4px;background:#0a0508;color:#d7cbd1;font:800 11px var(--hx-body);letter-spacing:.06em;cursor:pointer}.sp-attach:hover{border-color:var(--hx-red);color:#fff}
.sp-hint{color:var(--hx-muted);font-size:12px}
.sp-files{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sp-files li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;border:1px solid #2a0d16;border-radius:3px;font-size:12.5px;color:#d7cbd1}
.sp-files button{border:0;background:none;color:var(--hx-muted);font-size:18px;cursor:pointer}.sp-files button:hover{color:#ff8093}
.sp-check{flex-direction:row!important;align-items:center;gap:8px!important;font:700 12px var(--hx-body)!important;letter-spacing:0!important;color:#d7cbd1!important}
.sp-filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.sp-filtros .hx-input{width:auto;min-width:200px}
.sp-list{display:flex;flex-direction:column;gap:8px}
.sp-item{text-align:left;padding:12px 14px;border:1px solid #2a0d16;border-radius:4px;background:linear-gradient(180deg,#140a10,#070408);color:#f1e6ea;cursor:pointer;font-family:var(--hx-body)}
.sp-item:hover{border-color:var(--hx-red)}.sp-item.novo{border-left:3px solid #e0b84b}
.sp-item-t{display:flex;align-items:center;gap:8px;font-size:15px}.sp-item-t b{overflow-wrap:anywhere}
.sp-dot{width:8px;height:8px;border-radius:50%;background:#e0b84b;flex:none}
.sp-item-m,.sp-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;font-size:12px;color:var(--hx-muted)}.sp-when{margin-left:auto}
.sp-status{padding:2px 8px;border-radius:10px;font:800 10px var(--hx-body);letter-spacing:.08em;text-transform:uppercase;border:1px solid #3a1620;color:#d7cbd1}
.sp-status.s-open{color:#f1d27a;border-color:#8a6a1c}.sp-status.s-answered{color:#5ee08a;border-color:#1f6b3a}.sp-status.s-closed{color:var(--hx-muted)}
.sp-player{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 12px;margin-bottom:12px;border:1px solid #2a0d16;border-radius:4px;background:#0a0508;font-size:12.5px;color:#d7cbd1}.sp-player b{color:#fff}.sp-uid{opacity:.6;font-size:11px}
.sp-thread{display:flex;flex-direction:column;gap:12px}
.sp-msg{padding:12px 14px;border:1px solid #2a0d16;border-radius:6px;background:#0b0709cc;max-width:92%}
.sp-msg.staff{align-self:flex-end;border-color:#721329;background:linear-gradient(180deg,#1c0b13,#0b0508)}
.sp-msg.nota{border-style:dashed;border-color:#8a6a1c;background:#e0b84b0d}
.sp-msg-h{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--hx-muted)}.sp-msg-h b{color:#fff}
.sp-msg p{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:#e9dfe4}
.sp-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sp-att{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #3a1620;border-radius:3px;background:#0a0508;color:#d7cbd1;font:600 12px var(--hx-body);cursor:pointer}.sp-att:hover{border-color:var(--hx-red)}.sp-att img{width:44px;height:44px;object-fit:cover;border-radius:2px}
@media (max-width:700px){.sp-two{grid-template-columns:1fr}.sp-msg{max-width:100%}.sp-when{margin-left:0}}