/* ranking-de-combate.css -- página /pals/combate. Depende de codex.css, pals-list.css (cabeçalho, busca),
   montarias.css (abas), elemento-badge.css e tabela-elementos.css (modal da tabela). */

/* ---------- Ferramentas ---------- */
.rc-ferramentas{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin-bottom:1.25rem;
}
.rc-botao{
  display:inline-flex; align-items:center; gap:.45rem;
  background: var(--panel-2); color: var(--text-bright);
  border:1px solid var(--hairline); border-radius:999px;
  padding:.55rem 1.1rem; font-size:.85rem; font-weight:600;
  transition: border-color .15s, background .15s, color .15s;
}
.rc-botao:hover{ border-color: var(--accent-line); background: var(--accent-soft); }
.rc-botao:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rc-botao i{ color:#4ab3f0; }
.rc-botao--ouro{ border-color: rgba(203,168,106,.45); background: linear-gradient(135deg, rgba(203,168,106,.18), rgba(203,168,106,.04)); color: var(--gold); }
.rc-botao--ouro i{ color: var(--gold); }
.rc-botao--ouro:hover{ background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.rc-busca{ flex:1 1 240px; margin-left:auto; max-width:360px; }

.rc-abas .rc-aba-trofeu{ color: var(--gold); }

/* ---------- Ordenar ---------- */
.rc-ordenar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:-.25rem 0 1.1rem; }
.rc-ordenar-rotulo{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color: var(--text-dim); }
.rc-ordenar-opcoes{ display:inline-flex; padding:3px; gap:3px; background: var(--panel-2); border:1px solid var(--hairline); border-radius:999px; }
.rc-ordenar-opcoes button{
  display:inline-flex; align-items:center; gap:.4rem;
  border:0; border-radius:999px; background:transparent; color: var(--text-dim);
  padding:.4rem .95rem; font-size:.82rem; font-weight:600;
  transition: background .15s, color .15s;
}
.rc-ordenar-opcoes button:hover{ color: var(--text-bright); }
.rc-ordenar-opcoes button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rc-ordenar-opcoes button[data-ordem="poder"].is-active{ background: var(--gold-soft); color: var(--gold); }
.rc-ordenar-opcoes button[data-ordem="dps"].is-active{ background: var(--accent-soft); color: var(--accent); }
/* Ordenado por DPS: o DPS vira o destaque do card; o Poder segue visível, mais discreto. */
.rc-por-dps .rc-card-stats div:first-child{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.rc-por-dps .rc-card-poder b{ font-size:1.5rem; opacity:.75; }
.rc-painel{ display:none; }
.rc-painel.is-active{ display:block; }
.rc-painel-nota{ color: var(--text-dim); font-size:.85rem; margin:-.5rem 0 1rem; }
.rc-busca-vazia{ color: var(--text-dim); text-align:center; padding:2rem 0; }

/* ---------- Lista ---------- */
.rc-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }

.rc-card{
  --podio: var(--hairline);
  display:grid;
  grid-template-columns: 3.4rem minmax(210px, 1.3fr) minmax(150px, .8fr) auto auto;
  grid-template-areas:
    "rank pal poder stats acao"
    "rank build build build build";
  align-items:center;
  gap:.9rem 1.4rem;
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:1rem 1.25rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.rc-card:hover{ border-color: var(--accent-line); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.rc-card[hidden]{ display:none; }

/* Pódio: moldura em degradê e brilho discreto na cor da medalha. */
.rc-card--1{ --podio:#cba86a; }
.rc-card--2{ --podio:#c7cbe0; }
.rc-card--3{ --podio:#cb9b6a; }
.rc-card--podio{
  border-color: color-mix(in srgb, var(--podio) 55%, transparent);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--podio) 13%, transparent) 0%, transparent 45%),
    var(--panel);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--podio) 12%, transparent), 0 12px 32px rgba(0,0,0,.28);
}

.rc-card-rank{
  grid-area:rank; align-self:start;
  font-family: var(--font-display); font-weight:700; font-size:1.55rem; line-height:1;
  color: var(--text-dim); text-align:center; padding-top:.9rem;
  font-variant-numeric: tabular-nums;
}
.rc-card-rank span{ font-size:.9rem; opacity:.55; margin-right:.05rem; }
.rc-card--podio .rc-card-rank{ color: var(--podio); font-size:2rem; text-shadow: 0 0 18px color-mix(in srgb, var(--podio) 40%, transparent); }

.rc-card-pal{ grid-area:pal; display:flex; align-items:center; gap:.85rem; min-width:0; }
.rc-card-retrato{ display:block; line-height:0; flex-shrink:0; }
.rc-card-retrato img{
  width:64px; height:64px; border-radius:14px; object-fit:cover;
  background: var(--panel-2);
  border:1px solid var(--rarity-color, var(--hairline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rarity-color) 14%, transparent);
}
.rc-card-id{ min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.rc-card-nome{ margin:0; font-family: var(--font-display); font-weight:700; font-size:1.25rem; line-height:1.1; }
.rc-card-nome a{ color: var(--text-bright); text-decoration:none; }
.rc-card-nome a:hover{ color: var(--accent); }
.rc-card-elementos{ display:flex; flex-wrap:wrap; gap:.3rem; }
.rc-card-raridade{ font-size:.72rem; color: var(--rarity-color, var(--text-dim)); }
.rc-sem-elemento{
  font-family: var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-dim); border:1px dashed var(--hairline); border-radius:999px; padding:.1rem .55rem; cursor:help;
}

.rc-card-poder{ grid-area:poder; display:flex; flex-direction:column; gap:.2rem; }
.rc-card-poder small, .rc-card-stats dt, .rc-build-rotulo{
  font-family: var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; color: var(--text-dim);
}
.rc-card-poder b{
  font-family: var(--font-display); font-weight:700; font-size:2rem; line-height:1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.rc-barra{ display:block; height:4px; border-radius:4px; background: var(--panel-2); overflow:hidden; margin-top:.3rem; }
.rc-barra span{ display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg, rgba(203,168,106,.35), var(--gold)); }

.rc-card-stats{ grid-area:stats; display:flex; gap:.5rem; margin:0; }
.rc-card-stats div{
  display:flex; flex-direction:column; align-items:flex-end; gap:.15rem;
  min-width:84px; padding:.45rem .7rem;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px;
}
.rc-card-stats dd{ margin:0; font-family: var(--font-mono); font-weight:700; font-size:.95rem; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.rc-card-stats div:first-child{ border-color: var(--accent-line); background: var(--accent-soft); }
.rc-card-stats div:first-child dt, .rc-card-stats div:first-child dd{ color: var(--accent); }

.rc-card-montador{
  grid-area:acao; justify-self:end;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem; border-radius:12px;
  background: var(--accent-soft); border:1px solid var(--accent-line); color: var(--accent);
  font-size:.82rem; font-weight:600; text-decoration:none;
  transition: background .15s, color .15s, border-color .15s;
}
.rc-card-montador:hover{ background: var(--accent); color:#10121a; border-color: var(--accent); }
.rc-card-montador:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Build ---------- */
.rc-card-build{
  grid-area:build;
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap:1rem 1.4rem;
  padding-top:.85rem; border-top:1px solid var(--hairline);
}
.rc-build-grupo{ display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.rc-build-rotulo small{ text-transform:none; letter-spacing:0; opacity:.8; margin-left:.3rem; }
.rc-build-passivas{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.35rem; }
.rc-build-passivas .skill-badge{ text-decoration:none; padding:.4rem .7rem; gap:.5rem; min-width:0; }
.rc-build-passivas .skill-badge__name{ font-size:.88rem; line-height:1.2; }
.rc-build-passivas .skill-badge__icon{ flex-shrink:0; }
.rc-build-ativas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.rc-build-ativas li{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; }
.rc-build-ativas img{ width:18px; height:18px; flex-shrink:0; }
.rc-build-ativas a{ color: var(--text-bright); text-decoration:none; }
.rc-build-ativas a:hover{ color: var(--accent); }
.rc-build-ativas span{
  margin-left:auto; padding-left:.75rem;
  font-family: var(--font-mono); font-size:.78rem; color: var(--text); font-variant-numeric: tabular-nums;
}
.rc-build-filler{ opacity:.7; }
.rc-build-filler em{
  font-style:normal; font-family: var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--hairline); border-radius:999px; padding:0 .4rem; color: var(--text-dim);
}

/* ---------- Modais ---------- */
.rc-modal{ background: var(--panel); color: var(--text); border:1px solid var(--hairline); }
.rc-modal .modal-header{ border-bottom-color: var(--hairline); }
.rc-modal .modal-title{ font-family: var(--font-display); font-weight:700; color: var(--text-bright); }
.rc-modal .modal-title i{ margin-right:.35rem; color: var(--gold); }
.rc-modal.mt-tab .modal-title i{ color:#4ab3f0; }
.rc-modal .modal-body{ font-size:.9rem; line-height:1.6; }
.rc-modal h6{
  margin:1.4rem 0 .5rem; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--accent);
}
.rc-modal a{ color: var(--accent); }
.rc-modal ul, .rc-modal ol{ padding-left:1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.rc-modal-lead{ color: var(--text-bright); }
.rc-modal-conta{
  font-family: var(--font-mono); font-size:.82rem; color: var(--text-bright);
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px; padding:.6rem .85rem;
}
.rc-formula{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem;
  margin-bottom:1.1rem; padding:1.3rem 1rem;
  border-radius:14px; border:1px solid rgba(203,168,106,.35);
  background: radial-gradient(100% 120% at 50% 0%, rgba(203,168,106,.16), transparent 70%), var(--panel-2);
  font-family: var(--font-display); font-size:1.7rem; color: var(--text-bright);
}
.rc-formula-nome{ color: var(--gold); font-weight:700; }
.rc-formula-op{ color: var(--text-dim); }
.rc-formula-raiz{ white-space:nowrap; }
.rc-formula-raiz span{ border-top:2px solid currentColor; padding:0 .3rem; margin-left:.05rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 1199px){
  .rc-card{
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-areas:
      "rank pal poder"
      "rank stats acao"
      "rank build build";
  }
}
@media (max-width: 767px){
  .rc-busca{ max-width:none; margin-left:0; }
  .rc-card{
    grid-template-columns: 2.4rem minmax(0, 1fr);
    grid-template-areas:
      "rank pal"
      "poder poder"
      "stats stats"
      "build build"
      "acao acao";
    padding:.9rem 1rem; gap:.8rem;
  }
  .rc-card-rank{ padding-top:.4rem; font-size:1.3rem; }
  .rc-card--podio .rc-card-rank{ font-size:1.6rem; }
  .rc-card-stats div{ flex:1; min-width:0; }
  .rc-card-build{ grid-template-columns: 1fr; }
  .rc-card-montador{ justify-self:stretch; justify-content:center; }
  .rc-formula{ font-size:1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .rc-card, .rc-botao, .rc-card-montador, .rc-ordenar-opcoes button{ transition:none; }
}