/* compare.css — comparison grid, table, controls */


.compare-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.compare-card {
  border-radius: 24px;
  padding: 18px;
}

.compare-card-head {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom: 14px;
}

.compare-stats {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

@media (max-width: 960px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
  .builder-summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.compare-outer-scroll {
  overflow-x: auto;
}

.compare-controls-4 {
  display:grid;
  grid-template-columns: 160px repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 980px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.compare-controls-4 .field {
  padding: 14px 16px;
}

.compare-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1400px) {
  .compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .compare-controls-4 {
    grid-template-columns: 1fr;
    min-width: unset;
  }
  .compare-grid {
    grid-template-columns: 1fr;
  }
  .hero-actions-stacked, .detail-topbar-stacked {
    align-items:stretch;
  }
}

/* V6.2.2 aligned comparison table */
.compare-table-panel {
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  table-layout: fixed;
}

.compare-table thead th:first-child {
  width: 160px;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8,13,22,.98);
  color: #fde68a;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.compare-table tbody th, .compare-table tbody td {
  vertical-align: top;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.compare-table tbody th {
  width: 160px;
  color: var(--muted);
  background: rgba(255,255,255,0.02);
}

.compare-table tbody td {
  width: calc((100% - 160px)/4);
}

.compare-row-head td, .compare-row-head th {
  background: rgba(251,191,36,.05);
}

.compare-name-cell strong {
  font-size: 18px;
  display: block;
}

.compare-table .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Meilleure valeur de la ligne ─────────────────────────────────────────── */
.compare-best {
  background: rgba(251,191,36,.09);
  color: #fbbf24;
  font-weight: 700;
  position: relative;
}
.compare-best::after {
  content: '▲';
  font-size: 9px;
  vertical-align: super;
  margin-left: 3px;
  opacity: .7;
}
.compare-best .tag {
  color: #fbbf24;
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.12);
}

/* ── Section séparateur Buffs ─────────────────────────────────────────────── */
.compare-section-header > th {
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 16px 8px;
  border-top: 2px solid rgba(251,191,36,.18);
}

/* ── Lignes de buffs ──────────────────────────────────────────────────────── */
.compare-buff-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.compare-buff-absent {
  color: var(--muted);
  opacity: .35;
}
.compare-buff-present .tag {
  opacity: .9;
}