/* Camada visual da página Comparar Builds.
   Atua somente na apresentação; não altera dados nem cálculos. */

:root {
  --stat-offense: #f4bf56;
  --stat-defense: #43d5ff;
  --stat-mobility: #a879ff;
  --stat-utility: #45e7a4;
  --stat-health: #ff7185;
}

.stats-panel {
  position: relative;
  overflow: hidden;
}

.stats-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(179,154,255,.55), rgba(67,213,255,.28), transparent);
  pointer-events: none;
}

.stat-row-wrap {
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}

.stat-row-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 0 4px 4px 0;
  background: transparent;
  box-shadow: none;
  transition: .2s ease;
}

.stat-row-wrap:hover::before,
.stat-row-wrap.open::before {
  background: var(--stat-row-accent, var(--purple-light));
  box-shadow: 0 0 16px color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 50%, transparent);
}

.stat-row[data-stat="health"] { --stat-row-accent: var(--stat-health); }
.stat-row[data-stat="armor"],
.stat-row[data-stat="armor_resistance"],
.stat-row[data-stat="penetration_resistance"] { --stat-row-accent: var(--stat-defense); }
.stat-row[data-stat="damage_per_shot"],
.stat-row[data-stat="armor_penetration"],
.stat-row[data-stat="penetration_power"],
.stat-row[data-stat="health_damage_multiplier"],
.stat-row[data-stat="armor_drone_multiplier"],
.stat-row[data-stat="firepower_summary"],
.stat-row[data-stat="armor_break_summary"],
.stat-row[data-stat="fire_rate_summary"] { --stat-row-accent: var(--stat-offense); }
.stat-row[data-stat="max_movement_speed"],
.stat-row[data-stat="aimed_movement_speed"] { --stat-row-accent: var(--stat-mobility); }
.stat-row[data-stat="vision_range"],
.stat-row[data-stat="aimed_range"],
.stat-row[data-stat="hip_fire_range"],
.stat-row[data-stat="reload_time"],
.stat-row[data-stat="magazine_size"],
.stat-row[data-stat="ammo_capacity_summary"],
.stat-row[data-stat="effective_range_summary"],
.stat-row[data-stat="aiming_stability_summary"] { --stat-row-accent: var(--stat-utility); }

.stat-row:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 7%, transparent), rgba(255,255,255,.012) 42%, transparent);
}

.stat-name { min-width: 0; }

.stat-category-icon {
  position: relative;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 28%, transparent) !important;
  border-radius: 12px !important;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 17%, transparent), transparent 60%), rgba(255,255,255,.018) !important;
  color: var(--stat-row-accent, var(--purple-light)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 6px 18px rgba(0,0,0,.12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.stat-row:hover .stat-category-icon,
.stat-row[aria-expanded="true"] .stat-category-icon {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 55%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 18px color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 18%, transparent);
}

.stat-category-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 35%, transparent));
}
.stat-category-icon .stat-icon-detail { opacity: .55; stroke-width: 1.35; }
.stat-name strong { transition: color .2s ease; }
.stat-row:hover .stat-name strong { color: #fff; }
.stat-value strong { letter-spacing: -.025em; }
.stat-value i { overflow: hidden; position: relative; }
.stat-value i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 58%, #5d526e), var(--stat-row-accent, var(--purple-light)));
  opacity: .42;
}
.stat-value.winner i::after { opacity: .8; }
.delta-badge { transition: transform .18s ease, box-shadow .18s ease; }
.stat-row:hover .delta-badge { transform: translateY(-1px); }
.delta-badge.positive { box-shadow: 0 0 18px rgba(69,231,164,.06); }
.delta-badge.negative { box-shadow: 0 0 18px rgba(255,104,124,.05); }
.row-chevron {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.stat-row:hover .row-chevron { border-color: var(--line); background: rgba(255,255,255,.025); color: #d8d3e8; }
.stat-detail { position: relative; }
.stat-detail::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stat-row-accent, var(--purple-light)) 26%, transparent), transparent);
}
.result-summary { position: relative; overflow: hidden; }
.result-summary::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -70px;
  top: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.15), transparent 68%);
  pointer-events: none;
}
.score strong { text-shadow: 0 0 20px currentColor; }
.build-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.build-card:hover { transform: translateY(-2px); border-color: rgba(179,154,255,.28); box-shadow: 0 22px 54px rgba(0,0,0,.24); }
.compact-gears .gear-hex { transition: transform .2s ease, filter .2s ease; }
.compact-gears .gear-item:hover .gear-hex { transform: translateY(-2px) scale(1.035); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--rarity-color, var(--purple-light)) 34%, transparent)); }

@media (max-width: 760px) {
  .stat-category-icon { width: 38px !important; height: 38px !important; flex-basis: 38px; border-radius: 11px !important; }
  .stat-category-icon svg { width: 21px; height: 21px; }
  .build-card:hover { transform: none; }
}