.champion-depth-card {
  border-width: 1px;
}

.champion-depth-card[data-attack-style="melee"] {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ability-color) 78%, #d9a441), 0 12px 28px rgba(0,0,0,.18);
}

.champion-depth-card[data-attack-style="ranged"] {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ability-color) 78%, #5ecfff), 0 12px 28px rgba(0,0,0,.18);
}

.champion-class-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 3px 0 8px;
}

.combat-chip {
  border: 1px solid rgba(183, 204, 233, .22);
  border-radius: 999px;
  background: rgba(4, 9, 18, .7);
  color: #bdc9db;
  padding: 3px 7px;
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .01em;
}

.combat-chip-melee {
  border-color: rgba(239, 174, 73, .48);
  color: #ffd18a;
  background: rgba(132, 70, 16, .2);
}

.combat-chip-ranged {
  border-color: rgba(89, 203, 255, .48);
  color: #9ee6ff;
  background: rgba(20, 102, 145, .2);
}

.combat-chip-ultralight,
.combat-chip-light { color: #b8f4dc; }
.combat-chip-heavy,
.combat-chip-colossal { color: #ffd1a3; }
.combat-chip-ultimate {
  border-color: rgba(245, 204, 94, .55);
  color: #f8d678;
  background: rgba(183, 124, 23, .18);
}

.skill-pattern {
  margin: 5px 0 0;
  color: color-mix(in srgb, var(--ability-color) 72%, #c7d2e4);
  font-size: .62rem;
  font-weight: 750;
}

.champion-depth-card .fighter-heading-copy h3 {
  max-width: 100%;
  font-size: .82rem;
  line-height: 1.2;
}

.champion-depth-card .fighter-role {
  margin-top: 2px;
}

.champion-depth-card .skill-preview,
.champion-depth-card .ultimate-preview {
  grid-template-columns: 34px minmax(0, 1fr);
}

.champion-depth-card .lol-spell-icon {
  width: 34px;
  height: 34px;
}

.champion-depth-slot .team-slot-copy strong {
  font-size: .67rem;
}

.champion-depth-slot .team-slot-copy small {
  color: color-mix(in srgb, var(--slot-color) 55%, #b8c6da);
}

@media (min-width: 1450px) {
  .champion-depth-card .fighter-heading-copy h3 { font-size: .86rem; }
  .combat-chip { font-size: .61rem; }
}

@media (max-width: 560px) {
  .champion-class-row { gap: 4px; }
  .combat-chip { font-size: .62rem; }
}