/*CHARA PAGE CONTAINER*/
.container {
    max-width: 900px;
    min-width: 600px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    padding: 25px;
    overflow: hidden;
    margin-top:2%;
    margin-bottom: 7%
}


/*SMALL GRADIENT BARS*/
.namebar {
    border-radius: 10px;
    width: 100%;
    height: 80px;
    background: linear-gradient(90deg, #8ecaff 0%, #cff2ff 50%, #e1f8ff 100%);
    padding-top:px;
}

.title-bars {
    border-radius: 10px;
    width: 100%;
    height: 30px;
    background: linear-gradient(90deg, #8ecaff 0%, #cff2ff 50%, #e1f8ff 100%);
    margin-bottom:8px;
}

/*subtitle above name*/
.subtitle {
    color:#6a6a6a90;
    text-align: right;
}

/*about character text, scrolls*/
.description {
    margin-top: 20px;
    line-height: 1.6;
    box-shadow: 0 5px 15px rgba(185, 147, 231, 0.05);
    color: white;
    text-shadow: -1px -1px 0 #268bc2, 1px -1px 0 #268bc2, -1px 1px 0 #268bc2, 1px 1px 0 #268bc2;
    min-width: 500px;
    width: 100%;
    z-index: 20; /* Above everything */
    padding-left: 13%; /* Make space for overlapping image */
    margin-left: -25%; /* Pull container left */
    box-sizing: border-box;
    max-height: 600px;
}

.description-text {
    height: 80%;
    overflow-y: scroll;

}

/*CHARACTER QUOTE*/
.character-subtitle {
    top: 0;
    height:30%;
    width: 100vw;
    color: white;
}

/*expression2*/
.secondary-image {
    top: 0;
    height:30%;
    width: 100vw;
    width:auto;
    filter: blur(1px) sepia(0.5);
    opacity: 0.4;
    z-index: 5; /* Between main image (10) and description (20) */
    transition: all 0.3s;
    border-radius: 12px;
    margin-top: 5px;
}

.info-title {
    font-size: 20px;
    color: #6b3b8f;
    margin-bottom: 20px;
    font-weight: normal;
    display: flex;
    align-items: center;
    text-shadow: -1px -1px 0 #268bc2, 1px -1px 0 #268bc2, -1px 1px 0 #268bc2, 1px 1px 0 #268bc2;

}


/*FULL BODY IMAGE CONTAINER*/
.character-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
    min-height: 680px; /* Match your main image height */
    position: relative; /* Add this */
}

.character-main {
    position: relative;
    width: 60%;
    text-align: center;
    max-height:900px;
}
    .main-image {
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
        position: relative; 
        z-index: 10; 
    }

.main-image:hover {
    transform: scale(1.02);
}

/*TABLE AND BOTTOM IMAGE*/

.bottom-section {
    display: flex;
    height: 250px;
}

/*expression2*/
.tridary-image {
    width: 30%;
    filter: blur(1px) sepia(0.5);
    opacity: 0.4;
    z-index: 5; /* Between main image (10) and description (20) */
    border-radius: 12px;
    margin-top: 5px;
    float:right;
}

.stats-table {
    width: 70%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 25px;
    color: rgb(52, 26, 67);
}

.stats-table th {
    background: linear-gradient(to right, #d2bdee 0%, #ffffff 100%);
    color: white;
    padding: 10px;
    text-align: left;
    font-weight: normal;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}

.stats-table td {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}