/* ============================================================
   INVASOR.CSS — Design escuro com 3 colunas
   ============================================================ */

.inv-body { background: var(--page-bg) !important; min-height: 100vh; }

.inv-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ── CABEÇALHO ───────────────────────────────────────────────── */
.inv-page-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EDE9DE;
}
.inv-page-header-left { display: flex; align-items: center; gap: 14px; }
.inv-alert-icon { font-size: 1.8rem; }
.inv-page-titulo  { font-family:'Nunito',sans-serif; font-size:1.6rem; font-weight:900; color:#20232A; margin:0 0 3px; text-transform:uppercase; letter-spacing:0.5px; }
.inv-page-subtitulo { font-size:0.82rem; color:#74777F; margin:0; }

/* ── LAYOUT 3 COLUNAS ────────────────────────────────────────── */
.inv-layout {
  display: grid;
  grid-template-columns: 280px 1fr 200px;
  gap: 16px;
  align-items: start;
  margin-top: 20px;
}

/* ── COLUNA ESQUERDA: PERFIL ─────────────────────────────────── */
.inv-perfil-card {
  background: #F4F2ED;
  border: 1px solid #D8D2C7;
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 5px 18px rgba(91,62,10,.13);}
.inv-perfil-header { display:flex; align-items:center; gap:6px; width:100%; margin-bottom:4px; }
.inv-perfil-icon   { font-size:0.85rem; color:#74777F; }
.inv-perfil-titulo { font-size:0.65rem; font-weight:800; color:#74777F; letter-spacing:1.5px; text-transform:uppercase; }

/* Avatar com moldura */
.inv-avatar-wrap {
  position: relative;
  width: 110px; height: 110px;
  margin: 4px 0;
  overflow: visible;
}
.inv-avatar-foto {
  width: 90px; height: 90px;
  border-radius: 12px;
  object-fit: cover;
  position: absolute;
  top: 10px; left: 10px;
}
.inv-avatar-emoji {
  position: absolute;
  top: 10px; left: 10px;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  background: #EDE9DE;
  border-radius: 12px;
  border: 2px solid #D9D5CC;
}
.inv-avatar-moldura {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  display: block;
}

.inv-perfil-nome { font-family:'Bangers',cursive; font-size:1.2rem; color:#20232A; letter-spacing:1px; text-align:center; }

/* Grad + rank badge em linha */
.inv-perfil-grad-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.inv-perfil-grad     { font-size:0.78rem; font-weight:800; text-align:center; }
.inv-rank-badge-perfil {
  font-size:0.62rem; font-weight:800; background:#e74c3c; color:#fff;
  padding:2px 7px; border-radius:5px; letter-spacing:0.5px; white-space:nowrap;
}

.inv-perfil-nivel       { font-size:0.8rem; color:#74777F; font-weight:700; }
.inv-perfil-nivel strong{ color:#74777F; }

.inv-perfil-bars { width:100%; display:flex; flex-direction:column; gap:6px; margin:4px 0; }
.inv-bar-row     { display:flex; align-items:center; gap:6px; }
.inv-bar-label   { font-size:0.6rem; font-weight:800; color:#74777F; min-width:50px; }
.inv-bar-bg      { flex:1; height:6px; background:#EDE9DE; border-radius:99px; overflow:hidden; }
.inv-bar-fill    { height:100%; border-radius:99px; transition:width 0.4s; }
.inv-bar-hp      { background:linear-gradient(90deg,#c0392b,#e74c3c); }
.inv-bar-ck      { background:linear-gradient(90deg,#1a6a9a,#3498db); }
.inv-bar-val     { font-size:0.64rem; color:#74777F; min-width:68px; text-align:right; }

.inv-poder-row {
  width:100%;
  background:#EDE9DE;
  border:1px solid #D9D5CC;
  border-radius:8px;
  padding:9px 12px;
  display:flex; align-items:center; justify-content:space-between;
  margin-top:4px;
}
.inv-poder-label { font-size:0.6rem; font-weight:800; color:#74777F; letter-spacing:1px; text-transform:uppercase; }
.inv-poder-val   { font-size:0.95rem; font-weight:900; color:#e67e22; font-family:'Nunito',sans-serif; }

/* ── COLUNA CENTRAL: CARD DO INVASOR ────────────────────────── */
.invasor-card-single {
  background: #F4F2ED;
  border: 2px solid #e74c3c44;
  border-radius: 14px;
  overflow: hidden;
}

/* Topo */
.inv-card-topo {
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  border-bottom:1px solid #DDD8CF;
  background:#EDE9DE;
  overflow:hidden;
}
.inv-card-topo-info {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px 12px;
}
.inv-card-foto-wrap {
  width:100%; height:220px;
  background:#EDE9DE; border-radius:10px 10px 0 0;
  display:flex; align-items:center; justify-content:center;
  font-size:5rem; overflow:hidden;
  border-bottom:1px solid #DDD8CF;
}
.inv-card-nome { font-family:'Bangers',cursive; font-size:1.4rem; color:#20232A; letter-spacing:1px; margin-bottom:3px; }
.inv-card-desc { font-size:0.76rem; color:#74777F; line-height:1.4; }

/* HP do invasor */
.inv-card-hp { padding:12px 18px; border-bottom:1px solid #DDD8CF; }
.inv-hp-label {
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.72rem; color:#74777F; margin-bottom:7px; font-weight:700;
}
.inv-hp-label span:first-child { color:#e67e22; }
.inv-hp-label span:last-child  { color:#74777F; font-weight:800; }
.inv-hp-bar-bg  { height:8px; background:#EDE9DE; border-radius:99px; overflow:hidden; }
.inv-hp-bar-fill{ height:100%; background:linear-gradient(90deg,#c0392b,#e74c3c); border-radius:99px; transition:width 0.4s; }

/* Arena VS */
.inv-arena {
  padding:18px 20px;
  background:radial-gradient(ellipse at center,#F4F2ED 0%,#E8E4D7 100%);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  border-bottom:1px solid #DDD8CF;
}
.inv-fighter { display:flex; flex-direction:column; align-items:center; gap:7px; }
.inv-fighter-hp { font-size:0.7rem; color:#74777F; font-weight:700; }
.inv-fighter-avatar {
  width:100px; height:100px;
  background:#EDE9DE; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem;
  border:2px solid #e74c3c44;
  position:relative;
  overflow:visible;
}
.inv-fighter-avatar img { width:100%; height:100%; object-fit:cover; border-radius:10px; position:absolute; inset:0; }
.inv-fighter-moldura-arena {
  position:absolute; inset:-4px;
  width:calc(100% + 8px); height:calc(100% + 8px);
  object-fit:contain; pointer-events:none; z-index:2;
}
.inv-fighter-hp-bar-bg { width:100%; height:5px; background:#EDE9DE; border-radius:99px; overflow:hidden; }
.inv-fighter-hp-bar    { height:100%; background:linear-gradient(90deg,#c0392b,#e74c3c); border-radius:99px; transition:width 0.4s; }
.inv-fighter-nome      { font-size:0.76rem; font-weight:800; color:#74777F; }
.inv-vs { font-family:'Bangers',cursive; font-size:2rem; color:#e74c3c; opacity:0.7; letter-spacing:2px; }

/* Botões: apenas 2 */
.inv-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.inv-action-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:18px 12px;
  border:none; border-right:1px solid #D9D5CC;
  background:transparent; color:#74777F;
  font-family:'Nunito',sans-serif; font-size:0.78rem; font-weight:800;
  letter-spacing:0.5px; cursor:pointer; transition:background 0.15s;
}
.inv-action-btn:last-child { border-right:none; }
.inv-btn-icon { font-size:1.4rem; }
.inv-action-btn.btn-atacar { background:#e67e22; color:#fff; }
.inv-action-btn.btn-atacar:hover { background:#d35400; }
.inv-action-btn.btn-jutsu  { background:#3498db; color:#fff; }
.inv-action-btn.btn-jutsu:hover  { background:#2980b9; }
.inv-action-btn:disabled   { opacity:0.4; cursor:not-allowed; }

/* Painel jutsu select */
.inv-jutsu-panel { background:#FFFFFF; border-top:1px solid #DDD8CF; overflow:hidden; }
.inv-jutsu-panel.hidden { display:none; }
.inv-jutsu-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:rgba(155,89,182,0.1); border-bottom:1px solid #DDD8CF; font-size:0.85rem; color:#9b59b6; font-weight:600; }
.inv-jutsu-header button { background:none; border:none; color:#74777F; font-size:1.1rem; cursor:pointer; }
.jutsu-select-list { max-height:320px; overflow-y:auto; }
.jutsu-select-item { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,0.04); font-size:0.84rem; color:#74777F; transition:background .15s; }
.jutsu-select-item:hover { background:rgba(155,89,182,0.15); }
.jutsu-select-item:last-child { border:none; }
.jutsu-select-item strong { color:#20232A; display:block; font-size:.85rem; }
.jutsu-select-item p { color:#74777F; font-size:0.75rem; margin:2px 0 0; }

/* Waiting */
.invasor-waiting { background:#F4F2ED; border:1px solid #D9D5CC; border-radius:14px; padding:60px 20px; text-align:center; color:#74777F; }
.waiting-icon    { font-size:2.5rem; margin-bottom:12px; }
.invasor-waiting h3 { color:#74777F; margin:0 0 6px; font-family:'Nunito',sans-serif; }

/* ── COLUNA DIREITA: RECOMPENSAS ─────────────────────────────── */
.inv-col-direita { position:sticky; top:72px; }
.inv-recomp-card {
  background:#F4F2ED; border:1px solid #D8D2C7; border-radius:14px;
  padding:16px 14px; display:flex; flex-direction:column; gap:10px;
  box-shadow: 0 5px 18px rgba(91,62,10,.13);}
.inv-recomp-titulo { font-size:0.62rem; font-weight:800; color:#74777F; letter-spacing:1.2px; text-transform:uppercase; padding-bottom:10px; border-bottom:1px solid #DDD8CF; }
.inv-recomp-item   { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid #EDE9DE; }
.inv-recomp-item:last-child { border-bottom:none; }
.inv-recomp-icon   { font-size:0.9rem; }
.inv-recomp-nome   { font-size:0.78rem; color:#74777F; flex:1; font-weight:600; }
.inv-recomp-val    { font-size:0.95rem; font-weight:900; color:#74777F; font-family:'Nunito',sans-serif; }
.inv-recomp-item.exp .inv-recomp-nome,
.inv-recomp-item.exp .inv-recomp-val  { color:#3498db; }
.inv-recomp-item.ryo .inv-recomp-nome,
.inv-recomp-item.ryo .inv-recomp-val  { color:#e67e22; }

/* ── LOG DE COMBATE ──────────────────────────────────────────── */
.inv-log-section { background:#F4F2ED; border:1px solid #D9D5CC; border-radius:14px; margin-top:20px; overflow:hidden; }
.inv-log-section.hidden { display:none; }
.inv-log-header { display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid #DDD8CF; background:#EDE9DE; }
.inv-log-titulo { font-size:0.72rem; font-weight:800; color:#74777F; letter-spacing:1.2px; text-transform:uppercase; }
.inv-log-lista  { max-height:320px; overflow-y:auto; }
.inv-log-item   { display:flex; align-items:center; gap:10px; padding:12px 20px; border-bottom:1px solid #DDD8CF; font-size:0.8rem; flex-wrap:wrap; }
.inv-log-item:last-child { border-bottom:none; }
.inv-log-hora   { color:#74777F; font-size:0.7rem; min-width:60px; font-family:monospace; flex-shrink:0; }
.inv-log-texto  { color:#74777F; flex:1; min-width:200px; }
.inv-log-dano   { color:#e67e22; font-weight:800; white-space:nowrap; }
.inv-log-neg    { color:#e74c3c; font-weight:800; white-space:nowrap; }
.inv-log-xp     { background:rgba(52,152,219,0.2); color:#3498db; border-radius:5px; padding:2px 7px; font-size:0.7rem; font-weight:800; }
.inv-log-ryo    { background:rgba(230,126,34,0.15); color:#e67e22; border-radius:5px; padding:2px 7px; font-size:0.7rem; font-weight:800; }

/* ── MSG BOX ─────────────────────────────────────────────────── */
.msg-box { border-radius:8px; padding:0; margin-bottom:0; max-height:0; overflow:hidden; transition:max-height 0.3s,padding 0.3s,margin 0.3s; font-size:0.88rem; }
.msg-box.show    { max-height:60px; padding:10px 16px; margin-bottom:16px; }
.msg-box.success { background:rgba(46,204,113,0.12); border:1px solid #2ecc71; color:#2ecc71; }
.msg-box.error   { background:rgba(231,76,60,0.12);  border:1px solid #e74c3c; color:#e74c3c; }
.msg-box.info    { background:rgba(52,152,219,0.12); border:1px solid #3498db; color:#7fb3d3; }

/* Compat invasor.js (barras no modal oculto) */
.bar-row { display:flex; align-items:center; gap:8px; font-size:0.78rem; color:#74777F; }
.bar-bg  { flex:1; height:7px; background:#EDE9DE; border-radius:99px; overflow:hidden; }
.bar-bg.large { height:10px; }
.bar-fill      { height:100%; border-radius:99px; transition:width 0.4s; }
.bar-fill.red  { background:linear-gradient(90deg,#c0392b,#e74c3c); }
.bar-fill.blue { background:linear-gradient(90deg,#1a6a9a,#3498db); }
.btn-close { background:none; border:none; color:#74777F; font-size:1.1rem; cursor:pointer; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .inv-layout { grid-template-columns: 200px 1fr; }
  .inv-col-direita { display:none !important; }
}
@media (max-width: 640px) {
  .inv-layout { grid-template-columns: 1fr; }
}

/* ── RANKING DE DANO ─────────────────────────────────────────── */
.inv-dano-rank-card {
  background: #F4F2ED;
  border: 1px solid #D8D2C7;
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 5px 18px rgba(91,62,10,.13);}
.inv-dano-rank-empty {
  font-size: 0.75rem;
  color: #74777F;
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}
.inv-dano-rank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-bottom: 1px solid #EDE9DE;
  border-radius: 6px;
  transition: background 0.15s;
}
.inv-dano-rank-item:last-child { border-bottom: none; }
.inv-dano-rank-item:hover { background: rgba(0,0,0,0.03); }
.inv-dano-rank-num {
  font-family: 'Bangers', cursive;
  font-size: 0.9rem;
  min-width: 24px;
  text-align: center;
  color: #74777F;
}
.inv-dano-rank-num.top1 { color: #f1c40f; font-size: 1rem; }
.inv-dano-rank-num.top2 { color: #74777F; }
.inv-dano-rank-num.top3 { color: #cd7f32; }
.inv-dano-rank-nome {
  font-size: 0.78rem;
  font-weight: 700;
  color: #74777F;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-dano-rank-me { color: #e67e22; }
.inv-dano-rank-val {
  font-size: 0.75rem;
  font-weight: 800;
  color: #e74c3c;
  white-space: nowrap;
  font-family: 'Nunito', sans-serif;
}

/* ── DECK RÁPIDO ─────────────────────────────────────────────── */
.inv-deck-section {
  background: #FFFFFF;
  border-top: 1px solid #DDD8CF;
  padding: 12px 14px;
}
.inv-deck-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.inv-deck-title {
  font-size: .72rem; font-weight: 900; color: #74777F;
  text-transform: uppercase; letter-spacing: 1px;
}
.inv-deck-reset {
  background: rgba(231,76,60,.12); border: 1px solid rgba(231,76,60,.3);
  color: #e74c3c; font-size: .7rem; font-weight: 800;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-family: 'Nunito', sans-serif; transition: all .15s;
}
.inv-deck-reset:hover { background: rgba(231,76,60,.25); }
.inv-deck-slots {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.inv-deck-slot {
  aspect-ratio: 1; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  transition: all .15s; position: relative; overflow: hidden;
}
.inv-deck-slot.empty {
  background: #F4F2ED; border: 2px dashed #D9D5CC;
}
.inv-deck-slot.empty:hover { border-color: #e67e22; }
.inv-deck-slot.filled {
  background: #EDE9DE; border: 2px solid #3498db44;
}
.inv-deck-slot.filled:hover { border-color: #3498db; transform: scale(1.05); }
.inv-deck-slot.filled:hover::after {
  content: "✓ Usar"; position: absolute; top: 3px; right: 4px;
  font-size: .5rem; font-weight: 900; color: #2ecc71;
  background: rgba(0,0,0,.7); border-radius: 4px; padding: 1px 4px;
}
.inv-deck-slot-nome {
  font-size: .52rem; font-weight: 800; color: #74777F;
  text-align: center; line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 0 3px;
  position: absolute; bottom: 3px; left: 0; right: 0;
  background: rgba(0,0,0,.6); border-radius: 0 0 8px 8px;
}

/* Dano estimado no slot do deck */
.inv-deck-slot-dano {
  position: absolute; top: 3px; left: 4px;
  font-size: .52rem; font-weight: 900; color: #e74c3c;
  background: rgba(0,0,0,.75); border-radius: 4px; padding: 1px 4px;
  white-space: nowrap;
}

/* Cores do log de combate */
.inv-log-dano-txt  { color: #e67e22 !important; }
.inv-log-neg-txt   { color: #e74c3c !important; }
.inv-log-bonus-txt { color: #2ecc71 !important; }

/* Ajustes para o perfil np- dentro do invasor (coluna mais estreita) */
.inv-col-perfil .np-poder-row {
  flex-wrap: wrap;
  gap: 4px;
}
.inv-col-perfil .np-grad-badge {
  font-size: 0.62rem;
  padding: 2px 7px;
  white-space: nowrap;
}
.inv-col-perfil .np-poder-val {
  font-size: 1.3rem;
}
.inv-col-perfil .np-bar-val {
  font-size: 0.62rem;
  min-width: 0;
}
.inv-col-perfil .np-attr-val {
  font-size: 0.82rem;
}
.inv-col-perfil .np-liga-row-perfil {
  margin: 2px 0 4px;
}

/* Barra de chakra igual às outras páginas */
.inv-col-perfil .np-bar-ck {
  background: linear-gradient(90deg, #2980b9, #3498db) !important;
}

/* Retirar ícones dos atributos para dar espaço ao bónus */
.inv-col-perfil .np-attr-icon {
  display: none;
}
.inv-col-perfil .np-attr-name {
  flex: 1;
}
.inv-col-perfil .np-attr-val {
  font-size: 0.78rem;
  white-space: nowrap;
}