.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.roster-card{border-radius:16px;background:rgba(17,24,39,.7);border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .15s ease, box-shadow .15s ease}
.roster-card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.roster-visual{position:relative;aspect-ratio:4/5;overflow:hidden}
.roster-visual::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);background-size:18px 18px}
.roster-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(30,41,59,.6), rgba(2,6,23,.8))}
.roster-sil{position:absolute;inset:6% 10% 6% 10%;opacity:.3;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.roster-ribbon{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(to top, rgba(2,6,23,.95), rgba(2,6,23,.5), transparent);display:flex;justify-content:space-between;align-items:flex-end}
.roster-ribbon .ign{font-size:22px;font-weight:800;color:#fff;letter-spacing:.2px}
.roster-ribbon .role{font-size:11px;font-weight:800;color:#BAE6FD;text-transform:uppercase;letter-spacing:1.4px}
.roster-meta{padding:14px}
.flag-circle{width:28px;height:28px;border-radius:9999px;border:2px solid rgba(255,255,255,.4);display:grid;place-items:center;overflow:hidden}
.roster-socials{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.roster-socials a{display:grid;place-items:center;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.2);color:#e5e7eb;text-decoration:none}
.roster-socials a:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35)}