/* MONSTERIDLE — janela do Helper, resumo do Helper na coluna esquerda e aba
 * Perfil. Desenho aprovado nos mockups Helper.dc e Perfil.dc; as cores são as
 * variáveis de :root em css/style.css (petróleo e ciano). */

/* ---------- peças comuns às duas janelas ---------- */
.hp-cx{background:rgba(9,25,34,.5);border:1px solid var(--linha);border-radius:12px;padding:14px}
.hp-sec{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt2);margin:0 0 9px}
.hp-livre{color:var(--ok);text-transform:none;letter-spacing:0}
.hp-nota{font-size:11px;color:var(--txt2);line-height:1.45;margin:0}
.hp-nota b{color:var(--txt)}

/* largura própria de cada janela (o #janela é um só, marcado com data-aba) */
.abas.aberto .janela[data-aba="helper"]{width:min(1000px,calc(100vw - 40px))}
.abas.aberto .janela[data-aba="stats"]{width:min(1100px,calc(100vw - 40px))}

/* ================= HELPER — janela ================= */
.hp-topo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hp-topo-tempo{flex:1;min-width:0}
.hp-topo-tempo .hp-sec{margin-bottom:5px}
.hp-barra{height:8px;border-radius:99px;background:rgba(7,19,25,.8);overflow:hidden}
.hp-barra span{display:block;width:0;height:100%;background:var(--acc2);transition:width .4s}
.hp-barra.acabou span{background:var(--warn)}
.hp-topo-rodape{display:flex;gap:10px;margin-top:6px;font-size:11px;color:var(--txt2)}
.hp-topo-rodape span:first-child{flex:1}
.hp-divisor{width:1px;align-self:stretch;background:var(--linha)}
.hp-topo-vip{width:210px;flex-shrink:0}
.hp-topo-vip .hp-nota{margin-bottom:8px}
button.hp-bt-vip{width:100%;padding:9px;border-radius:9px;font-weight:800;font-size:12.5px}

.hp-colunas{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.hp-campo{margin:8px 0 2px}
.hp-linha{display:flex;align-items:center;gap:8px}
.hp-linha label{font-size:11.5px;color:var(--txt2);flex:1}
#painel-helper select{padding:7px 10px;border-radius:8px;border:1px solid var(--linha);min-width:170px;
  background:rgba(7,19,25,.8);color:var(--txt);font-family:inherit;font-size:12px}
.hp-ajuda{font-size:10.5px;color:var(--txt2);margin-top:4px}

/* chave liga/desliga: o input de verdade fica por cima da chave desenhada
   (invisível, mas focável e clicável — leitor de tela e teclado funcionam) */
.hp-sw{display:flex;align-items:flex-start;gap:10px;padding:9px 0;cursor:pointer;position:relative;margin:0}
.hp-sw input{position:absolute;left:0;top:9px;width:34px;height:20px;margin:0;opacity:0;cursor:pointer}
.hp-chave{width:34px;height:19px;border-radius:99px;flex-shrink:0;margin-top:1px;position:relative;
  background:rgba(7,19,25,.8);border:1px solid var(--linha);transition:background .15s,border-color .15s}
.hp-chave::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:99px;
  background:var(--txt2);transition:left .15s,background .15s}
.hp-sw input:checked + .hp-chave{background:var(--acc2);border-color:transparent}
.hp-sw input:checked + .hp-chave::after{left:17px;background:var(--sobre-acc)}
.hp-sw input:focus-visible + .hp-chave{outline:2px solid var(--acc2);outline-offset:2px}
.hp-sw input:disabled{cursor:not-allowed}
.hp-sw.travado{opacity:.55;cursor:not-allowed}
.hp-sw-txt{min-width:0}
.hp-sw-txt b{font-size:12.5px;color:var(--txt)}
.hp-sw-txt small{display:block;font-size:10.5px;color:var(--txt2);line-height:1.4;margin-top:2px}
.hp-sw .selo-vip{font-size:9px;font-weight:800;letter-spacing:.8px;padding:1px 7px;border-radius:99px;
  background:#3b2a00;border:1px solid #f59e0b;color:#fcd34d;margin-left:6px}

.hp-sub{display:flex;align-items:center;gap:8px;margin:2px 0 6px 44px;font-size:11px;color:var(--txt2)}
.hp-sub input{width:64px;padding:6px 9px;border-radius:7px;border:1px solid var(--linha);
  background:rgba(7,19,25,.8);color:var(--txt);font-family:inherit;font-size:12px}
#painel-helper .hp-sub-bloco{margin:0 0 6px 44px}
#painel-helper .curas-grade{grid-template-columns:1fr 1fr}
.hp-separa{height:1px;background:rgba(31,67,86,.6);margin:8px 0 10px}

.hp-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.hp-aviso{border-color:#78350f;background:rgba(245,158,11,.07);display:flex;align-items:center;gap:10px}
.hp-aviso-ico{font-size:16px;color:#fcd34d;line-height:1}
.hp-aviso .hp-nota{flex:1;color:#fcd34d}
.hp-aviso .hp-nota b{color:#fde68a}

/* ================= HELPER — resumo da coluna esquerda ================= */
.hp-resumo-card{
  transition: padding .2s ease, border-color .15s ease;
  user-select: none;
}
.hp-card-cabecalho{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1px 0 6px;
  gap: 8px;
}
.hp-cab-tit{
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.hp-cab-tit h3{
  margin: 0 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--txt2);
}
.hp-cab-ico{
  font-size: 13px;
  line-height: 1;
}
.hp-status-chip{
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 145px;
  display: inline-flex;
  align-items: center;
}
.hp-status-chip.ativo{
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.hp-status-chip.erro{
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.hp-status-chip.aviso{
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.hp-btn-minimizar{
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--linha);
  color: var(--txt2);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition: all .15s ease;
  flex-shrink: 0;
}
.hp-btn-minimizar:hover{
  background: rgba(34, 211, 238, 0.2);
  color: #fff;
  border-color: #22d3ee;
}

.helper-caixa.hp-resumo{
  cursor: pointer;
  transition: max-height .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease, margin .2s ease;
  overflow: hidden;
  max-height: 220px;
  opacity: 1;
}

.hp-resumo-card.minimizado{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.hp-resumo-card.minimizado .hp-card-cabecalho{
  padding-bottom: 0 !important;
}
.hp-resumo-card.minimizado .helper-caixa.hp-resumo{
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.helper-caixa.hp-resumo:hover{border-color:var(--acc2)}
.hp-res-topo{display:flex;align-items:center;gap:6px}
.hp-res-topo b{flex:1}
.hp-res-topo .vip-chip{order:2;float:none}
.hp-resumo .helper-barra{background:rgba(7,19,25,.8)}
.hp-resumo .helper-barra i{background:var(--acc2)}
.hp-resumo.acabou .helper-barra i{background:var(--warn)}
.hp-res-bola{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(31,67,86,.6)}
.hp-res-bola .ico-item{image-rendering:pixelated;flex-shrink:0}
.hp-res-nome{flex:1;min-width:0;font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.hp-res-nome small{display:block;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--txt2)}
.hp-res-nome em{font-style:normal;color:var(--txt2)}
.hp-res-nome small.hp-res-desceu{color:var(--warn)}
.hp-res-bola.sem .hp-res-nome{color:#fca5a5}
.hp-res-x{width:18px;height:18px;flex-shrink:0;border-radius:99px;background:#3a1d22;color:#fca5a5;
  display:grid;place-items:center;font-size:11px;font-weight:800}
button.hp-res-cfg{flex-shrink:0;border:1px solid var(--linha)}
button.hp-res-cfg:hover{border-color:var(--acc2)}

/* ================= PERFIL ================= */
.pf-grade{display:flex;gap:16px;align-items:flex-start}
.pf-principal{flex:1;min-width:0}
.pf-lado{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:11px}

.pf-id{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pf-retrato{width:64px;height:64px;border-radius:14px;background:rgba(7,19,25,.6);border:2px solid var(--acc2);
  flex-shrink:0;display:grid;place-items:center;overflow:hidden}
.pf-retrato img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.pf-id-txt{flex:1;min-width:0}
.pf-id-linha{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pf-nome{font-size:17px}
.pf-vip{font-size:10px;font-weight:800;letter-spacing:.9px;padding:2px 9px;border-radius:99px;
  background:#3b2a00;border:1px solid #f59e0b;color:#fcd34d}
.pf-desde{font-size:10px;color:var(--txt2)}
.pf-nivel{margin-top:5px}
.pf-nivel b{font-size:12px;color:var(--acc2);font-weight:800}
.pf-nivel span{font-size:11px;color:var(--txt2)}
.pf-barra{height:5px;border-radius:99px;background:rgba(7,19,25,.8);overflow:hidden;margin-top:5px}
.pf-barra span{display:block;height:100%;background:var(--acc2)}

.pf-colunas{display:flex;gap:12px}
.pf-colunas + .pf-colunas{margin-top:12px}
.pf-colunas > .hp-cx{flex:1;min-width:0}
.pf-linha{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgba(31,67,86,.5)}
.pf-linha span{flex:1;font-size:11.5px;color:var(--txt2)}
.pf-linha b{font-size:11.5px;text-align:right;min-width:0;overflow-wrap:anywhere}

.pf-rank{display:flex;flex-direction:column;gap:5px;max-height:186px;overflow-y:auto;position:relative;padding-right:2px}
.pf-rank::-webkit-scrollbar{width:6px}
.pf-rank::-webkit-scrollbar-thumb{background:#1f4356;border-radius:99px}
.pf-rank .vazio{margin:0}
.pf-rank-linha{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;flex-shrink:0;
  background:rgba(9,25,34,.5);border:1px solid var(--linha);font-size:12px}
.pf-pos{width:22px;flex-shrink:0;color:var(--txt2)}
.pf-rank-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-rank-linha.eu{background:rgba(79,216,232,.12);border-color:var(--acc2)}
.pf-rank-linha.eu .pf-pos{color:var(--acc2)}
.pf-rank-linha.eu .pf-rank-nome{font-weight:700}
.pf-rank-fora{text-align:center;font-size:10px;color:var(--txt2);padding:2px 0}
.pf-rank-abas{display:flex;gap:6px;margin-top:9px}
.pf-rank-abas button{padding:5px 12px;border-radius:99px;font-size:11px;border:1px solid var(--linha);background:var(--bg3);color:var(--txt)}
.pf-rank-abas button.on{border-color:transparent;color:var(--sobre-acc);background:var(--acc2);font-weight:700}

.pf-conta .hp-nota{margin-bottom:9px}
button.pf-bt{display:block;width:100%;margin-bottom:6px;padding:8px;border:1px solid var(--linha);background:var(--bg3);
  border-radius:8px;font-size:12.5px;color:var(--txt)}
button.pf-bt:hover{border-color:var(--acc2)}
button.pf-sair{border-color:#7f1d1d;color:#fca5a5;margin-bottom:0}
button.pf-sair:hover{background:#3a1d22;border-color:#7f1d1d}
.pf-dobra{margin:0 0 8px}
.pf-dobra .totp-caixa h3{font-size:12px;margin-bottom:2px}
.pf-dobra .totp-sub{font-size:11px}
.pf-cupom-linha{display:flex;gap:6px}
.pf-cupom-linha input{flex:1;min-width:0;padding:7px 9px;border-radius:8px;border:1px solid var(--linha);
  background:rgba(7,19,25,.8);color:var(--txt);font-family:inherit;font-size:12px;text-transform:uppercase}
.pf-msg{font-size:11.5px;margin-top:5px;min-height:1em}
.pf-ok{color:var(--ok)}
.pf-erro{color:#fca5a5}
.pf-save{margin-top:10px;font-size:11.5px;color:var(--txt2)}
.pf-save summary{cursor:pointer}
.pf-save-bts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pf-save-bts button{font-size:12px;padding:7px}

/* ---------- telas estreitas ---------- */
@media (max-width:900px){
  .abas.aberto .janela[data-aba="helper"],
  .abas.aberto .janela[data-aba="stats"]{width:calc(100vw - 16px)}
  .hp-colunas{grid-template-columns:1fr}
  .hp-topo{flex-direction:column;align-items:stretch}
  .hp-divisor{display:none}
  .hp-topo-vip{width:auto}
  .pf-grade{flex-direction:column}
  .pf-lado{width:100%}
}
@media (max-width:600px){
  .pf-colunas{flex-direction:column}
  #painel-helper .curas-grade{grid-template-columns:1fr}
  .hp-linha{flex-wrap:wrap}
  #painel-helper select{min-width:0;width:100%}
  .hp-sub,#painel-helper .hp-sub-bloco{margin-left:0}
}

/* IV mínimo: linha própria logo abaixo de "Duplicados" (o UI.atualizarLinhaIv
   mostra/esconde com display:flex/none) */
.hp-iv{margin:6px 0 2px}
.hp-iv input{width:64px;padding:6px 9px;border-radius:7px;border:1px solid var(--linha);
  background:rgba(7,19,25,.8);color:var(--txt);font-family:inherit;font-size:12px}
.hp-iv span{font-size:11px;color:var(--txt2)}

/* Barra de menus de baixo: com o botão do Helper ela passa da largura em
   telas de ~1360px. "safe center" mantém centralizado quando cabe e, quando
   não cabe, alinha pelo começo — assim o primeiro botão não some para fora
   da tela sem ter como rolar até ele. */
.aba-bar.nav{justify-content:safe center}
@media (max-width:1500px){
  .aba-bar.nav button{min-width:62px;padding:8px 6px 6px;letter-spacing:.6px}
}