*{margin:0;padding:0;box-sizing:border-box}

:root{
 --bg:#050816;
 --panel:rgba(12,15,28,.82);
 --primary:#b33cff;
 --text:#fff;
 --muted:#c9c9d6;
}

body{
 background:var(--bg);
 color:var(--text);
 font-family:Inter,sans-serif;
}

.characters-page{
 max-width:1700px;
 margin:auto;
 padding:140px clamp(20px,4vw,70px) 70px;
}

.characters-header{
 text-align:center;
 margin-bottom:50px;
}

.spacer{
 width:min(320px,80%);
 margin-bottom:20px;
}

.characters-header h1{
 font-size:clamp(2.5rem,5vw,4rem);
 font-weight:800;
 letter-spacing:2px;
 text-shadow:0 0 20px rgba(179,60,255,.35);
}

.characters-header p{
 color:var(--muted);
 line-height:1.8;
 margin-top:15px;
}

.characters-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;

}

.character-card{
    width:220px;
    flex:0 0 auto;
}

.character-card img{
 width:100%;
 aspect-ratio:3/4;
 object-fit:cover;
 display:block;
 border-radius:20px;
 border:1px solid rgba(179,60,255,.15);
 box-shadow:0 12px 25px rgba(0,0,0,.45);
 transition:.3s;
}

.character-card:hover{
 transform:translateY(-6px) scale(1.03);
}

.character-card:hover img{
 border-color:var(--primary);
 box-shadow:0 0 35px rgba(179,60,255,.35);
}

.character-card.eliminado{
 position:relative;
}

.character-card.eliminado img{
 filter:grayscale(100%) brightness(.45);
}

.character-card.eliminado::after{
 content:"ELIMINADO";
 position:absolute;
 top:14px;
 left:14px;
 background:#d11b1b;
 color:#fff;
 font-weight:700;
 padding:6px 10px;
 border-radius:999px;
 font-size:.75rem;
}

.modal-overlay{
 position:fixed;
 inset:0;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:20px;
 background:rgba(0,0,0,.75);
 backdrop-filter:blur(8px);
 opacity:0;
 visibility:hidden;
 transition:.3s;
 z-index:9999;
}

.modal-overlay.active{
 opacity:1;
 visibility:visible;
}

.modal-card{
 width:min(92vw,520px);
 background:var(--panel);
 border:1px solid rgba(179,60,255,.25);
 border-radius:26px;
 padding:30px;
 text-align:center;
 transform:scale(.9);
 transition:.3s;
 box-shadow:0 0 40px rgba(179,60,255,.18);
}

.modal-overlay.active .modal-card{
 transform:scale(1);
}

.close-modal{
 position:absolute;
 margin-left:420px;
 width:40px;
 height:40px;
 border:none;
 border-radius:50%;
 background:rgba(255,255,255,.08);
 color:#fff;
 cursor:pointer;
}

#modalCard{
 width:min(100%,330px);
 display:block;
 margin:10px auto 20px;
 border-radius:18px;
}

#modalName{
 font-size:2rem;
 margin-bottom:20px;
}

.modal-divider{
 height:1px;
 background:linear-gradient(90deg,transparent,var(--primary),transparent);
 margin:20px 0;
}

.social-links{
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 gap:16px;
}

.social-links a{
 width:58px;
 height:58px;
 display:flex;
 justify-content:center;
 align-items:center;
 border-radius:50%;
 background:rgba(255,255,255,.05);
 border:1px solid rgba(179,60,255,.2);
 transition:.25s;
}

.social-links a:hover{
 transform:translateY(-4px);
 border-color:var(--primary);
 box-shadow:0 0 18px rgba(179,60,255,.3);
}

.social-links img{
 width:28px;
 height:28px;
 object-fit:contain;
}

@media (max-width:760px){
 .characters-page{padding:120px 18px 40px;}
 .characters-grid{grid-template-columns:repeat(2,minmax(140px,1fr));gap:16px;}
 .modal-card{padding:22px;}
 #modalName{font-size:1.6rem;}
 .close-modal{margin-left:0;position:absolute;top:16px;right:16px;}
}

@media (max-width:768px){
 .characters-page{padding:120px 18px 40px;}
 .characters-grid{grid-template-columns:repeat(2,minmax(140px,1fr));gap:16px;}
 .modal-card{padding:22px;}
 #modalName{font-size:1.6rem;}
 .close-modal{margin-left:0;position:absolute;top:16px;right:16px;}
}

@media (max-width:480px){
 .characters-grid{grid-template-columns:1fr 1fr;}
 .modal-card{width:100%;}
}