.rarity-head{
  margin:0 0 12px;
  opacity:.9;
  letter-spacing:.04em;
}

.champ-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:14px;
}

@media (max-width: 1200px){ .champ-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 900px){ .champ-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 520px){ .champ-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.champ-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
  text-decoration:none;
}

.champ-card:hover .champ-portrait{ border-color: #E7ECFF; }

.champ-portrait{
  width: var(--champ-img-w);
  height: var(--champ-img-h);
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid;
  transition: transform .15s ease;
}

.champ-guide-ribbon-mini{
  position:absolute;
  top:7px;
  right:-24px;
  width:86px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:rotate(35deg);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f1320;
  border:1px solid rgba(34,20,4,0.45);
  background:linear-gradient(135deg, #ffd166 0%, #f6a623 58%, #ea8b11 100%);
  box-shadow:0 6px 12px rgba(0,0,0,0.35);
  z-index:3;
  pointer-events:none;
}

.champ-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transition: filter .15s ease;
}

.champ-card:hover .champ-portrait img{
  filter: brightness(1.08);
}

.champ-aff{
  position:absolute;
  left: 5px;
  bottom: 5px;
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.champ-portrait.rarity-mythical{ border-color: var(--rarity-mythical); }
.champ-portrait.rarity-legendary{ border-color: var(--rarity-legendary); }
.champ-portrait.rarity-epic{ border-color: var(--rarity-epic); }
.champ-portrait.rarity-rare{ border-color: var(--rarity-rare); }
.champ-portrait.rarity-uncommon{ border-color: var(--rarity-uncommon); }
.champ-portrait.rarity-common{ border-color: var(--rarity-common); }

.champ-role{
  position:absolute;
  right: 1px;
  bottom: 1px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 7px;
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.champ-name{
  max-width: calc(var(--champ-img-w) + 20px);
  margin: 0 auto;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: var(--name-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  min-height: calc(1.2em * var(--name-lines));
  opacity: 0.95;
}

.champ-guide-list-sub{
  max-width: calc(var(--champ-img-w) + 20px);
  margin: -5px auto 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  color: #ffcc80;
  opacity: 0.95;
}

/* Champions list text default color rollout. */
.rarity-head,
.champ-name{
  color: var(--text-global-primary);
}