/* ═══ Legends page-specific styles ═══ */
.legend-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.legend-card:hover{
  background:var(--surface-h);border-color:rgba(255,184,0,.15);
  box-shadow:0 4px 24px rgba(255,184,0,.04);
}
.legend-card:hover .legend-name{color:var(--gold)}
.legend-card:hover .legend-topline{opacity:1}
.legend-card:hover .legend-ghost{color:rgba(255,184,0,.05)}

.legend-name{transition:color .2s}
.legend-topline{opacity:.3;transition:opacity .3s}
.legend-ghost{transition:color .3s}

.legend-badge{font-family:'Oswald',sans-serif;font-size:10px;font-weight:700;padding:3px 10px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:4px;border-radius:20px;text-transform:uppercase}

/* Card grid layout */
.legend-grid{display:grid;grid-template-columns:200px 1fr;min-height:260px}
@media(max-width:768px){
  .legend-grid{grid-template-columns:1fr!important}
  .legend-portrait{display:none!important}
}

/* Stagger animation */
@keyframes cardReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.legend-card:nth-child(1){animation:cardReveal .5s ease 0s both}
.legend-card:nth-child(2){animation:cardReveal .5s ease .06s both}
.legend-card:nth-child(3){animation:cardReveal .5s ease .12s both}
.legend-card:nth-child(4){animation:cardReveal .5s ease .18s both}
.legend-card:nth-child(5){animation:cardReveal .5s ease .24s both}
.legend-card:nth-child(6){animation:cardReveal .5s ease .3s both}
.legend-card:nth-child(7){animation:cardReveal .5s ease .36s both}
.legend-card:nth-child(8){animation:cardReveal .5s ease .42s both}
.legend-card:nth-child(9){animation:cardReveal .5s ease .48s both}
.legend-card:nth-child(10){animation:cardReveal .5s ease .54s both}
.legend-card:nth-child(n+11){animation:cardReveal .5s ease .6s both}