@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
img, video {
    max-width: auto !important;
    height: auto;
}
        body { font-family: 'Kanit', sans-serif; background-color: #F4EAD6}
#characterName{
    color: #867151;
}
        .tw-ct-team-indicator {
            padding: 4px 12px;
            /* border-radius: 16px; */
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
            font-size: 20px;
        }
        .tw-ct-team-active {
            background: rgb(128 3 20 / 20%);
            border: 1px solid #790000;
        }
        .tw-ct-team-inactive {
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #b8b18c;
        }
        .slide-enter {
            animation: slideIn 0.5s ease-out;
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .tw-ct-main-cha-button{
            width: 162px;
            height: 49px;
            /* background-color: #4d8eb842; */
            position: relative;
            font-size: 20px;
        }
.tw-ct-main-cha-button.tw-ct-inactive{
           color: #5e513a !important;
           /* font-size: 20px; */
        }
 .tw-ct-main-cha-button.tw-ct-inactive::after {
            background-image: url('https://aow.playpark.com/sect/image/Frame46.png');
            color: #726e5a;
            position: absolute;
            content:'';
            width: 193px;
            height: 94px;
            /* background-color: #ff000052; */
            top: -22px;
            left: -13px;
            z-index:-1
        }
 .tw-ct-main-cha-button.tw-ct-active::after {
            background-image: url('https://aow.playpark.com/sect/image/Frame45.png');
            color: #726e5a;
            position: absolute;
            content:'';
            width: 193px;
            height: 94px;
            /* background-color: #ff000052; */
            top: -22px;
            left: -13px;
            z-index:-1
        }
        .tw-ct-tab-button {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            min-width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .tw-ct-tab-button.tw-ct-active {
            background-image: url('https://aow.playpark.com/sect/image/Frame45.png');
        }
        .tw-ct-tab-button.tw-ct-inactive {
            background-image: url('https://aow.playpark.com/sect/image/Frame46.png');
            color: #726e5a;
            position: relative;
        }
   .tw-ct-tab-button.tw-ct-inactive::after {
            background-image: url('https://aow.playpark.com/sect/image/Frame46.png');
            color: #726e5a;
            position: absolute;
            content:'';
            width: 190px;
            height: 90px;
            background-color: #ff000052;
        }
        /*.tab-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.6s;
        }*/
        .tw-ct-tab-button:hover::before {
            left: 100%;
        }
        .text-red{color:yellow}
        
        .tw-ct-ability-wp{
            background: linear-gradient(90deg, #FBF9F3 0%, rgba(251, 249, 243, 0.00) 100%);
            display: flex;
padding: 5px 9px;
align-items: center;
gap: 7px;
align-self: stretch;
        }
        .tw-ct-ability-title{
            color: #77735F;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
        }
        .tw-ct-ability-desc{
            color: #000;
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
        }

/* .app-container {
    overflow-x: hidden;
} */

.content-wrapper {
    margin-top: -97px;
    position: relative;
    z-index: 2;
}

.character-info {
    position: relative;
    z-index: 2;
}

.carousel-outer-wrapper {
    display: flex;
    justify-content: center;
}

.main-tabs-wrapper {
    display: flex;
    justify-content: center;
    max-width: 520px;
}

.main-tabs-inner {
    display: flex;
    justify-content: center;
    margin-right: auto;
}

/* Main Tabs Container */
.main-tabs-container {
    position: relative;
    z-index: 2;
    width: 520px;
    min-width: 520px;
    margin: 0 auto;
    transform-origin: center top;
}

/* Character Image Container */
.character-image-container {
    position: relative;
    display: inline-block;
}

.character-main-image {
    position: absolute;
    top: -26%;
    left: -47%;
    width: 231%;
    max-width: none;
    pointer-events: none;
    mask-image: url('https://aow.playpark.com/sect/image/Frame47.png');
    mask-size: 1200% 100%;  /* 11 frames */
    -webkit-mask-image: url('https://aow.playpark.com/sect/image/Frame47.png');
    -webkit-mask-size: 1200% 100%;  /* 11 frames */
    animation: sprite-mask 0.6s steps(11) forwards;  /* 11-1 steps for smooth transition */
}

@keyframes sprite-mask {
    from {
        mask-position: 0% 0%;
        -webkit-mask-position: 0% 0%;
    }
    to {
        mask-position: 100% 0%;
        -webkit-mask-position: 100% 0%;
    }
}

.character-placeholder-image {
    visibility: hidden;
}

/* Character Carousel Container */
.character-carousel-container {
    position: relative;
    z-index: 2;
    width: 680px;
    min-width: 680px;
    margin: 0 auto;
    transform-origin: center top;
}

.carousel-viewport {
    width: 480px;
    min-width: 480px;
}