/* 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:hidden}
.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);gap:26px;width:min(1320px,100% - 36px);height:calc(100vh - 58px);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;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(170px,26vh,260px);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;max-width:520px}
.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:0;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(150px,1fr));gap:12px}
.hx-mon{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:200px;padding:12px 8px;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:82%;max-height:112px;image-rendering:pixelated;filter:drop-shadow(0 6px 8px #000)}
.hx-mon.boss img{max-height:128px}
.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:"BOSS";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:1050px){
  body.hx{overflow:auto}
  .hx-page{grid-template-columns:1fr;height:auto}
  .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}}

/* ---- topo: RANK (em breve) ---- */
.hx-rank{display:flex;flex-direction:column;justify-content:center;align-items:center;height:38px;min-width:78px;padding:0 14px;border:1px dashed var(--hx-line);border-radius:3px;background:linear-gradient(180deg,#140a10,#070408);cursor:default}
.hx-rank b{font:900 12px var(--hx-title);letter-spacing:.18em;color:#fff;line-height:1}
.hx-rank small{margin-top:3px;font-size:7px;font-weight:800;letter-spacing:.2em;color:var(--hx-red);line-height:1}

/* ---- 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}}