/* Mystical Legends Game Rarity Colors */
.c { color: #494949; }
.un { color: #6aa84f; }
.r { color: #0000ff; }
.sr { color: #9900ff; }
.ssr { color: #ff9900; }
.ur { color: #ff0000; }
.lr { color: #d5a6bd; }

/* Mystical Legends Game Elements */
.light { color: #ffd966; }
.dark { color: #674ea7; }
.fire { color: #cc0000; }
.water { color: #a4c2f4; }
.wind { color: #bf9000; }
.earth { color: #6aa84f; }
.lightning { color: #494949; }
.plant { color: #494949; }



/* ================================
    Character Grid Styles, game-hub.html
================================ */

/* front image overlay */
.position-relative {
  position: relative;
}

.overlay-image {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
}

/* Overlay image styling */
.overlay-image img {
  width: 40%;
  height: auto;
}


/* Character Grid Styles */
.character-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap:18px;
}

.character-card{
    position: relative;
    border-radius:8px;
    padding:5px;
    text-align:center;
    cursor:pointer;
    transition:transform .15s ease;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    height:190px; /* Taller vertical rectangle */
    opacity: 0.9;
}

.character-card:hover{
    transform:scale(1.05);
}

.character-card img.character-avatar{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:2px;
}

.character-name{
    margin-top:8px;
    font-size:0.9rem;
    font-weight:500;
}

.character-event{
    font-size:0.7rem;
    font-weight:400;
    padding: 3px;
    background-color: #c9ab21da; 
    width: 65%;
    align-self: center;
}

/* Role icon */
.character-role{
    position:absolute;
    bottom:38px;
    right:-10px;
    width:60px;
    height:60px;
}

/* RARITY STYLES */
.rarity-c{background:linear-gradient(145deg,#939292d8,#3e3e3ed2);}
.rarity-r{background:linear-gradient(145deg,#2f80ed,#1c4aa3);}
.rarity-sr{background:linear-gradient(145deg,#bf72e0da,#471e62db);}
.rarity-ssr{background:linear-gradient(145deg,#fcc17adc,#a06c16d1);}