body {
    touch-action: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    /*纵向自动滑动*/
    overflow-y: hidden;
    /*禁止*/
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/*登录页顶部标题部分的容器*/
.title-welcome-container {
    margin-top: 37px;
    width: 255px;
    height: 60px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/*标题字体*/
.title-welcome-container .title-font {
    /*background-color: #535bf2;*/
    margin-top: -6px;
    font-size: 26px;
    color: #000;
}


.title-right-bubble .bubble-text{
    font-size: 20px;
    color: #fff;
    margin-bottom: 3px;
}

.center-word-arena-logo{
    width: 60px;
    height: 60px;
    margin-top: 133px;
    object-fit: contain;
}

.center-word-text-pic {
    width: 160px;
    height: 44px;
    margin-top: 20px;
    object-fit: contain;
}


.align-left-right-center{
    margin-left: auto;
    margin-right: auto;
}

/*登录按钮*/
.login-button-container {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    margin-top: 144px;
    width: 300px;
    height: 43px;
    border-radius: 5px;
    opacity: 1;
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%);
}

.login-button-container .text {
    font-size: 16px;
    color: white;
}

/*分割线容器*/
.center-line-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-block: 27px;
    width: 100%;
}

.center-line-container .line {
    border-bottom: 1px solid #C8C9CC;
    width: 140px;
    height: 0;
    opacity: 0.5;
}

.center-line-container .text {
    font-size: 14px;
    color: #919499;
    margin-inline: 3px;
}

.guest-container {
    display: flex;
    flex-direction: row;
    height: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/*默认头像的尺寸，登录页有使用到*/
.default-avatar-login{
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.guest-container .avatar {
    /*本地资源的图片*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;

}

.guest-container .guest-text {
    margin-left: 10px;
    font-size: 14px;
    color: #1F1F1F;
}

.privacy-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 30px;
    width: 100%;
}

.privacy-container .privacy-text-container {
    display: flex;
    flex-direction: column;
}

.privacy-container .privacy-text-container .protocol-container {
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
}
.privacy-text-container .margin-left{
    margin-left: 3px;
}

.privacy-container .privacy-text-container .privacy-text {
    font-size: 14px;
    color: #919499;
}

.privacy-container .privacy-text-container .or-text {
    margin-inline: 6px;
}

.privacy-container .privacy-text-container .protocol-text {
    font-size: 14px;
    color: #004CD3;
}
.checked-container-outside{
    height: 35px;
    width: 80px;
    display: flex;
    /*background-color: red;*/
    margin-top: -32px;
    margin-right: -25px;
    margin-left: -30px;
    z-index: 1;
}

.privacy-container .checked-container{
    /*设置背景图的显示方式*/
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    border-radius: 50%;;
    height: 18px;
    width: 18px;
    margin: auto auto 4px;
}

.checked-container-transparent-border{
    /*设置边框*/
    border: 1px solid transparent;
}

.unchecked-container-gray-border{
    /*设置边框*/
    border: 1px solid #E1E3E6;
}

.privacy-container .un-check-container{
    /*本地资源的图片*/
    height: 14px;
    width: 14px;
    margin-right: 2px;
    border-radius: 50%;
    background-color: white;
    margin-bottom: auto;
    /*设置边框*/
    border: 1px solid #E1E3E6;
}

.privacy-warn-container {
    /*设置背景图的显示方式*/
    width: 314px;
    height: 40px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f9d5d3;
    border-radius: 6px;
}

.privacy-warn-container .warn-text{
    font-size: 12px;
    color: #ED5C57;
    margin-left: auto;
    margin-right: auto;
}/* 引入自定义的字体文件.css */
@font-face {
    font-family: 'RobotoBold';
    src: url('./Roboto-Bold-CM98DFac.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoLight';
    src: url('./Roboto-Light-BW8nAIZg.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoMedium';
    src: url('./Roboto-Medium-BJbjO3wX.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoRegular';
    src: url('./Roboto-Regular-Duvu0CAl.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoItalic';
    src: url('./Roboto-Italic-CPH5wpff.ttf') format('truetype');
}

.my-roboto-light {
    font-family: 'RobotoLight',sans-serif;
}

.my-roboto-regular {
    font-family: 'RobotoRegular',sans-serif;
}

.my-roboto-medium {
    font-family: 'RobotoMedium',sans-serif;
}

.my-roboto-bold {
    font-family: 'RobotoBold',sans-serif;
}

.my-roboto-italic {
    font-family: 'RobotoItalic',sans-serif;
}
.custom-toast-container {
    position: absolute;
    height: auto;
    top: 0;
    margin-top: 48px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-toast {
    position: relative;
    width: 280px;
    min-height: 40px;
    /*transform: translateX(50%);*/
    border-radius: 10px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* 定义动画 */
/*从顶部往下滑*/
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.custom-toast-container .custom-toast {
    animation: slideDown 0.3s ease-out;
}
.home-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    min-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    background-color: #F1F4FF;
}

/*左上角的背景点缀图*/
.common-embellish-bg-left-top-page {
    position: fixed;
    height: 280px;
    object-fit: contain;
    left: 0;
    top: 48px;
    z-index: -1;
}

.common-embellish-bg-right-bottom-page {
    position: fixed;
    height: 280px;
    object-fit: contain;
    right: 0;
    bottom: 0;
    z-index: -1;
    /*clip-path: inset(0 10vw 0 0);*/
}


/*左上角的背景点缀图*/
.common-embellish-bg-left-top {
    position: absolute;
    width: 60%;
    height: 60%;
    object-fit: contain;
    left: 0;
    top: 30px;
    z-index: -1;
}

.common-embellish-bg-right-bottom {
    position: fixed;
    width: 60%;
    height: 60%;
    object-fit: contain;
    right: 0;
    bottom: 0;
    z-index: -1;
    /*clip-path: inset(0 10vw 0 0);*/
}

.top-title-container .avatar {
    width: 37px;
    height: 37px;
    margin-left: 11px;
    object-fit: contain;
    border: white solid 1px;
    border-radius: 50%;
}

.top-title-container .download-button {
    width: 30px;
    height: 30px;
    margin-left: auto;
    object-fit: contain;
}

.top-title-container .setting-button {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    object-fit: contain;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-left-8 {
    margin-left: 8px;
}

.home-logo-container {
    width: 53px;
    height: 53px;
    margin-top: 62px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

.home-name-text-container {
    width: 143px;
    height: 32px;
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

.daily-card {
    width: 90%;
    min-width: 300px;
    max-width: 480px;
    height: 120px;
    margin-top: 13px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    opacity: 1;
    background: linear-gradient(180deg, #2684FF 0%, #58B6FC 100%);
}

.icon {
    width: 66px;
    height: 66px;
    border-radius: 14px;
    object-fit: contain;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 14px;
}

.challenge-icon {
    object-fit: contain;
    width: 66px;
    height: 66px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 14px;
}

.daily-icon-color-bg {
    background: linear-gradient(180deg, #EDF0FF 0%, #DBE1FF 100%);
}

.daily-card .daily-content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.daily-card .daily-title {
    font-size: 20px;
    color: #ffffff;
    margin-left: 14px;
    margin-bottom: 4px;
}

.daily-card .daily-content {
    font-size: 16px;
    color: #ffffff;
    margin-left: 14px;
}

.second-container {
    display: flex;
    flex-direction: row;
    /*使内容垂直居中*/
    align-items: center;
    /*使内容左右居中*/
    justify-content: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    min-width: 300px;
    max-width: 480px;
    margin-top: 10px;
}

.challenge-card {
    background: linear-gradient(180deg, #FF59AC 0%, #FF99C7 100%);
    border-radius: 10px;
    width: 70%;
    height: 93px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.challenge-icon-color-bg {
    background: linear-gradient(180deg, #FF59AC 0%, #FF99C7 100%);
}


.challenge-card .challenge-title {
    font-size: 20px;
    color: #ffffff;
    margin-left: 14px;
    margin-bottom: 4px;
}

.challenge-card .challenge-content {
    font-size: 16px;
    color: #ffffff;
    margin-left: 14px;
}

.leaderboard-card {
    background: linear-gradient(180deg, #415DEA 0%, #718AFE 100%);
    border-radius: 10px;
    width: 30%;
    height: 93px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.leaderboard-card .leaderboard-title {
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    margin-top: 6px;
}

.home-leader-board-icon {
    width: 53px;
    height: 53px;
    margin-left: auto;
    margin-right: auto;
}

.vs-player-card {
    width: 90%;
    min-width: 300px;
    max-width: 480px;
    height: 94px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    opacity: 1;
    background: linear-gradient(180deg, #00C8C0 0%, #34D4CD 100%);
}

.vs-player-card .vs-player-content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.word-maker-card {
    width: 90%;
    min-width: 300px;
    max-width: 480px;
    height: 94px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    opacity: 1;
    background: linear-gradient(180deg, #7973FF 0%, #99A2FF 100%);
}

.word-maker-card .word-maker-content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bottom-date-container {
    margin-top: auto;
    text-align: center;
    font-size: 16px;
}
.modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 17px;
    width: 340px;
    height: 340px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.modal-container .modal-title {
    font-size: 18px;
    margin-top: 14px;
    text-align: center;
    position: relative;
}

.modal-title .right-close-button{
    width: 15px;
    height: 15px;
    position: absolute;
    right: 12px;
    top: -2px;
}

.modal-container .modal-option-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 12px;
    background-color: #F5F7F9;
    margin-left: 12px;
    margin-right: 12px;
    height: 55px;
    border-radius: 10px;
}

.modal-container .modal-option-left-text {
    font-size: 16px;
    margin-left: 18px;
}

.modal-container .modal-option-right-how-icon {
    width: 27px;
    height: 27px;
    margin-left: auto;
    margin-right: 18px;
}

.modal-container .modal-option-right-icon {
    width: 50px;
    height: 26px;
    margin-left: auto;
    margin-right: 18px;
}.custom-popup-page{
    position: fixed;
    width: 100%;
}

.custom-popup-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    z-index: 1000;
}

.custom-popup-children{
    position: relative;
    z-index: 1001;
    height: 100%;
    max-height: 100%;
}

.custom-popup-show{
    opacity: 1; /* 完全不透明 */
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
}

.custom-popup-hidden {
    opacity: 0; /* 完全透明 */
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s step-end;;
}.tip-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 10px;
    width: 300px;
    height: 480px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.tip-modal-container .tip-modal-title{
    font-size: 16px;
    margin-top: 14px;
    text-align: center;
    position: relative;
}

.tip-modal-container .tip-modal-close-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.tip-modal-container .tip-modal-content-item{
    width: 273px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    font-size: 13px;
    background-color: #F5F7F9;
    border-radius: 6px;
}

.tip-modal-container .tip-modal-content-item-middle{
    width: 273px;
    height: 66px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;align-content: center;
    font-size: 14px;
    background-color: #F5F7F9;
    border-radius: 6px;
}

.tip-modal-content-item-middle .second-text{
    margin-left: 20px;
    margin-top: 6px;
}

 .margin-top-16{
    margin-top: 16px;
}

.tip-modal-content-item .text-blue-color {
    margin-left: 4px;
    margin-right: 4px;
    color: #004CD3;
}

.tip-modal-container .align-center{
    margin-left: auto;
    margin-right: auto;
}

.tip-modal-container  .examples-text{
    font-size: 14px;
    margin-left: 14px;
    margin-top: 10px;
    margin-bottom: 6px;
}

.tip-modal-container  .left-top{
    position: absolute;
    left: 0;
    top: 0;
    width: 83px;
    height: 77px;
    z-index: -1;
}

.tip-modal-container  .right-bottom-icon{
    position: absolute;
    bottom: 0;
    right: 0;
    object-fit: contain;
    height: 140px;
}

.tip-modal-container  .help-detail-pic{
    width: 273px;
    height: 210px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}.my-profile-page-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: fixed;
    /*align-items: center;*/
    width: 360px;
    height: 591px;
    border-radius: 17px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.profile-background-img {
    position: fixed;
    width: 360px;
    height: 591px;
    object-fit: cover;
    z-index: -2;
    border-radius: 17px;
}

.my-profile-page-container .profile-header {
    display: inline-block;
    margin: 0;
    position: relative;
}

.my-profile-page-container .profile-header .profile-title {
    font-size: 18px;
    margin-top: 17px;
    text-align: center;
    color: white;
}

.my-profile-page-container .profile-header .profile-close-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 19px;
    width: 19px;
}

.my-profile-page-container .profile-avatar {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-self: center;
}

.my-profile-page-container .user-name {
    font-size: 20px;
    text-align: center;
    margin-top: 5px;
}

.my-profile-page-container .logout-btn {
    color: #0F49EA;
    height: 25px;
    text-align: center;
    align-content: center;
    font-size: 14px;
    margin-top: 13px;
    margin-left: auto;
    margin-right: auto;
}

/*.my-profile-page-container .switch-btn-container {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    align-items: center;*/
/*    margin-top: 10px;*/
/*    width: 300px;*/
/*    height: 26px;*/
/*    background-image: url("/public/theme-default/images/home/switch_btn_container_bg.webp");*/
/*    background-position: top;*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/

.switch-btn-container .switch-btn {
    display: flex;
    width: 146px;
    height: 23px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
}

/*.switch-btn-container .selected {*/
/*    background-image: url("/public/theme-default/images/home/profile_switch_btn_selected.webp");*/
/*    background-position: top;*/
/*    background-repeat: no-repeat;*/
/*    background-size: 100% auto;*/
/*    color: white;*/
/*    margin-left: 2px;*/
/*    margin-right: 2px;*/
/*}*/

.my-profile-page-container .stats-text {
    font-size: 16px;
    margin-top: 12px;
    text-align: center;

    /*margin-left: 22px;*/
}

.stats-main-container {
    width: 333px;
    border-radius: 10px;
}

.my-profile-page-container .my-stats-container {
    /*margin-left: 13px;*/
    /*margin-right: 13px;*/
    margin-top: 5px;
    width: 333px;
    height: 143px;
    display: flex;
    flex-wrap: wrap;
}

.my-stats-container > div {
    flex: 1 1 50%; /* 每个部分占据一半的容器大小 */
    box-sizing: border-box; /* 包括边框和内边距在尺寸计算中 */
    display: flex;
    justify-content: center;
    /*align-items: center;*/
}

.my-stats-container > div:nth-child(1) {
    order: 0;
}

.my-stats-container > div:nth-child(2) {
    order: 3;
}

.my-stats-container > div:nth-child(3) {
    order: 2;
}

.my-stats-container > div:nth-child(4) {
    order: 1;
}

.my-profile-page-container .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 66px;
    width: 163px;
    background: #F5F7F9;
}

.grid-item .title {
    font-size: 20px;
}

.grid-item .subtitle {
    font-size: 16px;
    color: #919499;
}

.my-profile-page-container .my-badge-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 22px;
    margin-right: 22px;
    margin-top: 8px;
}


/*勋章*/
.my-badge-title-container .my-badge-text {
    font-size: 16px;
}

.my-badge-title-container .my-badge-details-text {
    font-size: 16px;
    color: #4B79FF;
}

.my-badge-title-container .my-badge-details-icon {
    width: 11px;
    height: 11px;
    margin-left: 5px;
}

.badge-content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 7px;
}

/*.badge-content-container .badge-card-container {*/
/*    background-image: url("/public/theme-default/images/home/badge_container_bg.webp");*/
/*    width: 105px;*/
/*    height: 145px;*/
/*    background-size: cover;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

.badge-card-container .badge-add-icon {
    width: 65px;
    height: 72px;
}

.badge-card-container .badge-grey-text {
    font-size: 14px;
    color: #DEE1ED;
    margin-top: 7px;
}

.badge-card-container .badge-black-text {
    font-size: 14px;
    margin-top: 7px;
}.country-selection-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 17px;
    width: 300px;
    height: 356px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}.avatar-frame-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 10px;
    width: 300px;
    height: 430px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.avatar-frame-modal-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px; /* 可选：定义网格间距 */
}.leader-board-page {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    position: fixed;
    /*align-items: center;*/
    width: 300px;
    height: 585px;
    border-radius: 17px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.leaderboard-background-img {
    position: fixed;
    width: 300px;
    height: 585px;
    object-fit: cover;
    z-index: -2;
    border-radius: 17px;
}

.leader-board-page .leader-board-header {
    display: inline-block;
    margin: 0;
    position: relative;
}

.leader-board-page .leader-board-header .leader-board-title {
    font-size: 20px;
    margin-top: 17px;
    text-align: center;
    color: white;
}

.leader-board-page .leader-board-header .leader-board-close-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 19px;
    width: 19px;
}


.leader-board-page .leader-board-switch-btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 13px;
    width: 273px;
    height: 29px;
    min-height: 29px;
    background: linear-gradient(180deg, #3375FF 0%, #4C96FE 100%);
    backdrop-filter: blur(10px);
    margin-left: auto;
    margin-right: auto;
}

.leader-board-switch-btn-country-rank {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 273px;
    height: 29px;
    min-height: 29px;
    background-color: rgba(255, 255, 255, 0.7);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-left: auto;
    margin-right: auto;
}


.leader-board-switch-btn-container .leader-board-switch-btn {
    display: flex;
    width: 100px;
    height: 23px;
    font-size: 14px;
    align-items: center;
    color: white;
    justify-content: center;
}

.leader-board-switch-btn-container .leader-board-selected {
    width: 100px;
    height: 100%;
    background-color: white;
    /*opacity: 0.8;*/
    /*border-radius: 5px;*/
    color: #004CD3;
}
/*选中的圆圈*/
.leader-board-country-switch-btn-selected {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 4px solid #004CD3;
    background-color: transparent;
}

/*未选中的圆圈*/
.leader-board-country-switch-btn-unselected {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #919499;
    background-color: transparent;
}
.daily-ranking-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 585px;
    margin-top: 6px;
    position: relative;
    /*height: 100%;*/
}

.daily-ranking-page .ranking-top-tree-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: baseline;
    width: 100%;
    height: 250px;
    margin-left: 42px;
    margin-right: 42px;
}

.ranking-top-tree-container .every-item-container{
    display: flex;
    flex-direction: column;
    /*margin-top: auto;*/
    align-items: center;
    width: 80px;
}

.every-item-container .nickname{
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
    overflow: hidden;
}

.text-ellipsis{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.every-item-container .score{
    color: #2F7AFF;
}

.every-item-container .first-img{
    width: 77px;
    height: 52px;
    margin-top: 10px;
}

.every-item-container .first-avatar{
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    /*background-image: url("/public/theme-default/images/leaderboard/first_avatar_bg.webp");*/
    /*background-size: 100% auto;*/
    /*background-position: top;*/
    /*background-repeat: no-repeat;*/
    width: 50px;
    height: 50px;
    margin-bottom: 3px;
}

.every-item-container .second-img{
    position: absolute;
    width: 71px;
    height: 42px;
    top: 30px;
}

.every-item-container .third-img{
    width: 88px;
    height: 104px;
}

.every-item-container .second-avatar{
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    /*background-image: url("/public/theme-default/images/leaderboard/second_avatar_bg.webp");*/
    /*background-size: 100% auto;*/
    /*background-position: top;*/
    /*background-repeat: no-repeat;*/
    width: 50px;
    height: 50px;
    margin-bottom: 3px;
}

.every-item-container .third-avatar{
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    /*background-image: url("/public/theme-default/images/leaderboard/third_avatar_bg.webp");*/
    /*background-size: 100% auto;*/
    /*background-position: top;*/
    /*background-repeat: no-repeat;*/
    width: 50px;
    height: 50px;
    margin-bottom: 3px;
}

/*排名列表*/
.rank-list {
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    /*background: linear-gradient(117deg, #E0F8EA -3%, #E2EEF5 50%, #FCFDFE 100%), linear-gradient(180deg, rgba(0, 92, 255, 0.4) 0%, rgba(0, 92, 255, 0) 39%), #FFFFFF;*/
    /*box-sizing: border-box;*/
    /*border: 6px solid;*/
    /*border-image: linear-gradient(243deg, #3FF2CB 1%, #4CDFEF 50%, #D3F801 100%) 16;*/
}

.list-item-challenge{
    display: grid;
    grid-template-columns: 40px 40px 140px 60px;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 40px;
    /*底部边框线*/
    border-bottom: 1px solid #DEE1ED;
    font-size: 12px;
    text-align: center;
}


.list-item{
    display: grid;
    grid-template-columns: 26px 26px 110px 43px;
    /*设置grid间隙*/
    grid-gap: 13px;
    /*每个gird都居中*/
    align-items: center;
    justify-content: center;
    width: 236px;
    height: 40px;
    min-height: 40px;
    /*底部边框线*/
    border-bottom: 1px solid #DEE1ED;
    font-size: 13px;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 6px;
}

.item-avatar{
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.item-margin{
    margin-right: 5px;
    margin-left: 5px;
}

.self-container-guest{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    font-size: 14px;
    background-color: #0F49EA;
}

/*底部我的排行信息*/
.daily-ranking-page .self-container{
    display: grid;
    grid-template-columns: 40px 40px 80px 100px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    font-size: 14px;
    text-align: center;
}

.self-container-challenge{
    display: grid;
    grid-template-columns: 60px 40px 80px 80px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: auto;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    font-size: 14px;
    text-align: center;
    position: absolute;
    bottom: 0;
}

.self-container .item-avatar{
    width: 36px;
    height: 36px;
    border: 1px solid white;
    border-radius: 50%;
}

.item-avatar-self{
    width: 26px;
    height: 26px;
    border: 1px solid white;
    border-radius: 50%;
}

.self-container .item-margin{
    margin-right: 5px;
    margin-left: 5px;
}


.second-item-position{
    position: absolute;
    top: 20px;
    left: 25px;
}

.first-item-position{
    position: absolute;
    top: 0;
    left: auto;
    right: auto;
}

.third-item-position{
    position: absolute;
    top: 28px;
    right: 25px;
}

.leaderboard-icon-row{
    /*position: absolute;*/
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.rank-pic-second{
    position: absolute;
    width: 100px;
    height: 130px;
    left: 20px;
    top: 100px;
    z-index: -2;
}

.rank-pic-first{
    position: absolute;
    width: 100px;
    height: 150px;
    left: 100px;
    top: 80px;
    z-index: -1;
}

.rank-pic-third {
    position: absolute;
    width: 120px;
    height: 150px;
    left: 160px;
    top: 105px;
    z-index: -2;
}

.rank-title-border{
    border-bottom: 1px solid #e0e0e0;
    width: 90%;
    text-align: center;
}


/* 定义关键帧动画 */
@keyframes slideUpAndBounce {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    50% {
        transform: translateY(-40px);
        opacity: 0.8;
    }
    75% {
        transform: translateY(5px); /* 回弹 */
        opacity: 1;
    }
    90% {
        transform: translateY(-5px); /* 继续回弹 */
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-up {
    z-index: -1;
    animation: slideUpAndBounce 1s ease-in-out forwards;
}


/* 定义动画 */
@keyframes slideFromBottom20 {
    from {
        transform: translateY(20px); /* 从屏幕底部开始 */
        opacity: 0;
    }
    to {
        transform: translateY(0); /* 移动到初始位置 */
        opacity: 1;
    }
}

/* 应用动画到元素 */
.game-slide-up-animation-20 {
    animation: slideFromBottom20 0.3s ease-in forwards; /* 动画名称，持续时间，缓动函数，动画结束是否保持最终状态 */
}


/* 定义关键帧动画 - 排名1的pic*/
@keyframes slideUpAndBounceFirst {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px);
        opacity: 1;
    }
    75% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-up-first {
    animation: slideUpAndBounceFirst 0.5s ease-in forwards;
}


.slide-up-second {
    animation: slideUpAndBounceFirst 0.5s ease-in forwards;
}

.slide-up-third {
    animation: slideUpAndBounceFirst 0.7s ease-in forwards;
}
.leaderboard-record-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    width: 273px;
    height: 472px;
    border-radius: 10px;
    background-position: top;
    background-size: cover;
}

.leaderboard-record-page .daily-record-title {
    font-size: 16px;
    margin-top: 6px;
    margin-bottom: 6px;
    /*margin-top: 5px;*/
}

.leaderboard-record-page .record-item-container {
    display: flex;
    flex-direction: column;
    margin: 4px auto 4px;
    align-content: center;
    justify-content: center;
    width: 233px;
    height: 88px;
    border-radius: 10px;
    background-color: white;
}

.record-item-container .title-text{
    font-size: 26px;
    text-align: center;
}

.record-item-container .description-text{
    font-size: 14px;
    text-align: center;
}.custom-profile-page-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: fixed;
    /*align-items: center;*/
    width: 360px;
    height: 591px;
    border-radius: 17px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.custom-profile-background-img {
    position: fixed;
    width: 360px;
    height: 591px;
    object-fit: cover;
    z-index: -2;
    border-radius: 17px;
}

.custom-profile-page-container .profile-header {
    display: inline-block;
    margin: 0;
    position: relative;
}

.custom-profile-page-container .profile-header .profile-title {
    font-size: 18px;
    margin-top: 17px;
    text-align: center;
    color: white;
}

.custom-profile-page-container .profile-header .profile-close-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 19px;
    width: 19px;
}

.custom-profile-page-container .profile-avatar {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-self: center;
}

.custom-profile-page-container .user-name {
    font-size: 20px;
    text-align: center;
    margin-top: 5px;
}

.custom-profile-page-container .logout-btn {
    color: #0F49EA;
    height: 25px;
    text-align: center;
    align-content: center;
    font-size: 14px;
    margin-top: 13px;
    margin-left: auto;
    margin-right: auto;
}

/*.my-profile-page-container .switch-btn-container {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    align-items: center;*/
/*    margin-top: 10px;*/
/*    width: 300px;*/
/*    height: 26px;*/
/*    background-image: url("/public/theme-default/images/home/switch_btn_container_bg.webp");*/
/*    background-position: top;*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/

.switch-btn-container .switch-btn {
    display: flex;
    width: 146px;
    height: 23px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
}

/*.switch-btn-container .selected {*/
/*    background-image: url("/public/theme-default/images/home/profile_switch_btn_selected.webp");*/
/*    background-position: top;*/
/*    background-repeat: no-repeat;*/
/*    background-size: 100% auto;*/
/*    color: white;*/
/*    margin-left: 2px;*/
/*    margin-right: 2px;*/
/*}*/

.custom-profile-page-container .stats-text {
    font-size: 16px;
    margin-top: 12px;
    text-align: center;

    /*margin-left: 22px;*/
}

.stats-main-container {
    width: 333px;
    border-radius: 10px;
}

.custom-profile-page-container .my-stats-container {
    /*margin-left: 13px;*/
    /*margin-right: 13px;*/
    margin-top: 5px;
    width: 333px;
    height: 143px;
    display: flex;
    flex-wrap: wrap;
}

.custom-stats-container > div {
    flex: 1 1 50%; /* 每个部分占据一半的容器大小 */
    box-sizing: border-box; /* 包括边框和内边距在尺寸计算中 */
    display: flex;
    justify-content: center;
    /*align-items: center;*/
}

.custom-stats-container > div:nth-child(1) {
    order: 0;
}

.custom-stats-container > div:nth-child(2) {
    order: 3;
}

.custom-stats-container > div:nth-child(3) {
    order: 2;
}

.custom-stats-container > div:nth-child(4) {
    order: 1;
}

.custom-profile-page-container .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 66px;
    width: 163px;
    background: #F5F7F9;
}

.grid-item .title {
    font-size: 20px;
}

.grid-item .subtitle {
    font-size: 16px;
    color: #919499;
}

.custom-profile-page-container .my-badge-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 22px;
    margin-right: 22px;
    margin-top: 8px;
}


/*勋章*/
.custom-badge-title-container .my-badge-text {
    font-size: 16px;
}

.custom-badge-title-container .my-badge-details-text {
    font-size: 16px;
    color: #4B79FF;
}

.custom-badge-title-container .my-badge-details-icon {
    width: 11px;
    height: 11px;
    margin-left: 5px;
}

.badge-content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 7px;
}

/*.badge-content-container .badge-card-container {*/
/*    background-image: url("/public/theme-default/images/home/badge_container_bg.webp");*/
/*    width: 105px;*/
/*    height: 145px;*/
/*    background-size: cover;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

.badge-card-container .badge-add-icon {
    width: 65px;
    height: 72px;
}

.badge-card-container .badge-grey-text {
    font-size: 14px;
    color: #DEE1ED;
    margin-top: 7px;
}

.badge-card-container .badge-black-text {
    font-size: 14px;
    margin-top: 7px;
}/*设置所有页面根页面的尺寸*/
.common-page-background-img {
    background-size: 58px 57px;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -2;
}

.global-page-background-img {
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -2;
    /*给背景图的切换增加淡入淡出的效果*/
    transition: background-image 0.5s ease-in-out;
}

/*挑战背景页，带颜色的*/
.challenge-background-color {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(151deg, #0F49EA 0%, #2EBAFB 20%, #BFE7FB 100%);
}

/*挑战背景页，白色遮罩的*/
.challenge-background-color-white {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

/*登录页背景色，带颜色的*/
.login-background-color {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0F49EA 0%, #2EBAFB 20%, white 100%);
}

.login-background-color-white {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, #FFFFFF 100%);
}

.common-dialog-embellish-bg-left-top {
    position: absolute;
    width: 100px;
    height: 100px;
    object-fit: contain;
    z-index: -1;

}

.common-dialog-embellish-bg-right-bottom {
    position: absolute;
    width: 100px;
    height: 100px;
    object-fit: contain;
    z-index: -1;
    bottom: 0;
    right: -15px;
}

.common-dialog-embellish-bg-right-bottom-116 {
    position: absolute;
    width: 116px;
    height: 116px;
    object-fit: contain;
    z-index: -1;
    bottom: 0;
    right: -22px;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}


.position-all-auto {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

.position-all-0 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.position-top-auto {
    top: auto;
}

.position-left-auto {
    left: auto;
}

.position-right-auto {
    left: auto;
}

.position-left-0 {
    left: 0;
}

.left-20 {
    left: 20px;
}

.left-80 {
    left: 80px;
}

.position-left-50-percent {
    left: 50%;
}


.position-top-0 {
    top: 0;
}

.position-top-49{
    top: 49px;
}

.position-top-107 {
    top: 107px;
}

.position-top-420 {
    top: 420px;
}

.position-top-down-2 {
    top: -2px;
}

.position-right-0 {
    right: 0;
}

.position-left-10 {
    left: 10px;
}

.position-left-14 {
    left: 14px;
}

.position-left-73 {
    left: 73px;
}

.position-left-150 {
    left: 150px;
}

.position-right-10 {
    right: 10px;
}

.position-right-14 {
    right: 14px;
}

.position-right-16 {
    right: 16px;
}

.position-top-10 {
    top: 10px;
}

.position-top-13 {
    top: 13px;
}

.position-top-17 {
    top: 17px;
}

.position-top-83 {
    top: 83px;
}

.position-top-83 {
    top: 83px;
}

.position-top-126 {
    top: 126px;
}

.position-bottom-0 {
    bottom: 0;
}

.position-bottom-3 {
    bottom: 3px;
}

.position-bottom-8 {
    bottom: 8px;
}

.position-bottom-10 {
    bottom: 10px;
}

.position-bottom-20 {
    bottom: 20px;
}

.position-bottom-33 {
    bottom: 33px;
}


.position-bottom-36 {
    bottom: 36px;
}

.position-bottom-50 {
    bottom: 50px;
}

.position-bottom-52 {
    bottom: 52px;
}

.position-bottom-53 {
    bottom: 53px;
}

.position-bottom-55 {
    bottom: 55px;
}

.position-bottom-57 {
    bottom: 57px;
}

.position-bottom-70 {
    bottom: 70px;
}

.position-bottom-104 {
    bottom: 104px;
}

.position-bottom-108 {
    bottom: 108px;
}

.position-bottom-115 {
    bottom: 115px;
}

.position-bottom-116 {
    bottom: 116px;
}

.position-bottom-120 {
    bottom: 120px;
}

.position-bottom-122 {
    bottom: 122px;
}

.position-bottom-124 {
    bottom: 124px;
}

.z-index-minus-1 {
    z-index: -1;
}

.z-index-minus-2 {
    z-index: -2;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.z-index-5 {
    z-index: 5;
}



.position-bottom-13 {
    bottom: 13px;
}

.position-bottom-29 {
    bottom: 29px;
}

.position-bottom-40 {
    bottom: 40px;
}

.position-bottom-43 {
    bottom: 43px;
}

.position-bottom-44 {
    bottom: 44px;
}

.position-bottom-46 {
    bottom: 46px;
}

.display-flex-row {
    display: flex;
    flex-direction: row;
}

/*row分居左右*/
.display-flex-space-between {
    justify-content: space-between;
}

.display-flex-column-common {
    display: flex;
    flex-direction: column;
}

.ellipsis-2-line {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 设置显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 超出部分显示为省略号 */
}

.box-size {
    box-sizing: content-box;
}

.ellipsis-2 {
    -webkit-line-clamp: 2; /* 设置显示的行数 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 超出部分显示为省略号 */
}


.ellipsis {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 超出部分显示为省略号 */
}

.display-flex-column {
    /*position: absolute;*/
    /*top: 0;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    display: flex;
    flex-direction: column;
}

.display-flex-align-items-center {
    align-items: center;
}


.display-flex-justify-content-center {
    justify-content: center;
}

.display-flex-align-content {
    align-content: center;
}

.display-flex {
    display: flex;
}

.display-fixed-center {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.display-absolute-center {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

.margin-left-right-auto {
    margin-left: auto;
    margin-right: auto;
}

.margin-top-bottom-auto {
    margin-top: auto;
    margin-bottom: auto;
}


.margin-right-2 {
    margin-right: 2px;
}

.margin-right-3 {
    margin-right: 3px;
}

.margin-right-4 {
    margin-right: 4px;
}

.margin-auto {
    margin: auto;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-right-6 {
    margin-right: 6px;
}

.margin-right-7 {
    margin-right: 7px;
}

.margin-right-8{
    margin-right: 8px;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-11 {
    margin-right: 11px;
}

.margin-right-12 {
    margin-right: 12px;
}

.margin-right-14 {
    margin-right: 14px;
}

.margin-right-16 {
    margin-right: 16px;
}

.margin-right-22 {
    margin-right: 22px;
}

.margin-right-30 {
    margin-right: 30px;
}

.margin-right-40 {
    margin-right: 40px;
}

.margin-right-47 {
    margin-right: 47px;
}



.margin-right-60 {
    margin-right: 60px;
}


.margin-right-auto {
    margin-right: auto;
}

.margin-top-auto {
    margin-top: auto;
}

.margin-bottom-auto {
    margin-bottom: auto;
}

.margin-bottom-3 {
    margin-bottom: 3px;
}

.margin-bottom-4 {
    margin-bottom: 4px;
}

.margin-bottom-6 {
    margin-bottom: 6px;
}

.margin-bottom-8 {
    margin-bottom: 8px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-13 {
    margin-bottom: 13px;
}

.margin-bottom-14 {
    margin-bottom: 14px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-23 {
    margin-bottom: 23px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-bottom-60 {
    margin-bottom: 60px;
}


.margin-left-2 {
    margin-left: 2px;
}

.margin-left-3 {
    margin-left: 3px;
}

.margin-left-4 {
    margin-left: 4px;
}

.margin-left-5 {
    margin-left: 5px;
}

.margin-left-6 {
    margin-left: 6px;
}

.margin-left-7 {
    margin-left: 7px;
}

.margin-left-8 {
    margin-left: 8px;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-left-11 {
    margin-left: 11px;
}

.margin-left-13 {
    margin-left: 13px;
}

.margin-left-14 {
    margin-left: 14px;
}

.margin-left-16 {
    margin-left: 16px;
}

.margin-left-17 {
    margin-left: 17px;
}

.margin-left-18 {
    margin-left: 18px;
}


.margin-left-20 {
    margin-left: 20px;
}

.margin-left-22 {
    margin-left: 22px;
}

.margin-left-26 {
    margin-left: 26px;
}

.margin-left-32 {
    margin-left: 32px;
}

.margin-left-40 {
    margin-left: 40px;
}

.margin-left-47 {
    margin-left: 47px;
}

.margin-top-down-2 {
    margin-top: -2px;
}

.margin-top-2 {
    margin-top: 2px;
}

.margin-top-3 {
    margin-top: 3px;
}


.margin-top-4 {
    margin-top: 4px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-6 {
    margin-top: 6px;
}

.margin-top-7 {
    margin-top: 7px;
}

.margin-top-8 {
    margin-top: 8px;
}

.margin-top-9 {
    margin-top: 9px;
}


.margin-top-10 {
    margin-top: 10px;
}

.margin-top-11 {
    margin-top: 11px;
}

.margin-top-12 {
    margin-top: 12px;
}

.margin-top-13 {
    margin-top: 13px;
}


.margin-top-14 {
    margin-top: 14px;
}

.margin-top-16 {
    margin-top: 16px;
}

.margin-top-17 {
    margin-top: 17px;
}

.margin-top-19 {
    margin-top: 19px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-22 {
    margin-top: 22px;
}

.margin-top-26 {
    margin-top: 26px;
}

.margin-top-27 {
    margin-top: 27px;
}


.margin-top-30 {
    margin-top: 30px;
}

.margin-top-32 {
    margin-top: 32px;
}

.margin-top-43 {
    margin-top: 43px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-55 {
    margin-top: 55px;
}

.margin-top-63 {
    margin-top: 63px;
}

.margin-top-66 {
    margin-top: 66px;
}

.margin-top-75 {
    margin-top: 75px;
}

.margin-top-80 {
    margin-top: 80px;
}

.margin-top-85 {
    margin-top: 85px;
}

.margin-top-100 {
    margin-top: 100px;
}

.margin-top-124 {
    margin-top: 124px;
}


.margin-top-172 {
    margin-top: 172px;
}

.padding-left-6 {
    padding-left: 6px;
}

.padding-right-6 {
    padding-right: 6px;
}

.padding-left-14 {
    padding-left: 14px;
}

.padding-left-22 {
    padding-left: 22px;
}

.padding-right-14 {
    padding-right: 14px;
}

.padding-left-50 {
    padding-right: 50px;
}

.padding-left-45 {
    padding-left: 45px;
}

.padding-left-60 {
    padding-left: 60px;
}


.padding-left-80 {
    padding-right: 80px;
}


.padding-right-10 {
    padding-right: 10px;
}

.padding-right-30 {
    padding-right: 30px;
}

.padding-right-40 {
    padding-right: 40px;
}

.padding-all-2 {
    padding: 2px;
}

.padding-all-3 {
    padding: 3px;
}

.border-white-1 {
    border: 1px solid white;
}

.padding-all-14 {
    padding: 14px;
}

.padding-top-3 {
    padding-top: 3px;
}

.padding-top-6 {
    padding-top: 6px;
}

.padding-top-7 {
    padding-top: 7px;
}

.padding-top-8 {
    padding-top: 8px;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-top-14 {
    padding-top: 14px;
}

.padding-top-20 {
    padding-top: 20px;
}

.padding-bottom-3 {
    padding-bottom: 3px;
}

.padding-bottom-6 {
    padding-bottom: 6px;
}

.padding-bottom-8 {
    padding-bottom: 8px;
}

.padding-bottom-14 {
    padding-bottom: 14px;
}

.padding-bottom-20 {
    padding-bottom: 20px;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

.text-bold-900 {
    font-weight: 900;
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}


.text-baseline {
    vertical-align: baseline;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.exit-close-btn {
    object-fit: contain;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 12px;
    top: 12px;
}

/*通用位置样式*/
.common-position-absolute {
    position: absolute;
}

.right-0 {
    right: 0;
}

.right-3 {
    right: 3px;
}

.right-5 {
    right: 5px;
}

.right-7 {
    right: 7px;
}

.right-20 {
    right: 20px;
}

.right-57 {
    right: 57px;
}

.bottom-8 {
    bottom: 8px;
}

.bottom-5 {
    bottom: 5px;
}

.right-minus-4 {
    right: -4px;
}

.overflow-x-auto {
    overflow-x: auto;
    /*隐藏纵向滚动轴*/
    scrollbar-width: none;
}

.overflow-y-auto {
    overflow-y: auto;
    scrollbar-width: none;
}

.flex-direction-column-reverse {
    flex-direction: column-reverse;
}

.global-avatar-border-white {
    border: 1px solid white;
}

.global-avatar-border {
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.global-avatar-border-2 {
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.modal-close-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.modal-title {
    font-size: 18px;
    margin-top: 14px;
    text-align: center;
    position: relative;
}

.transform-rotate-minus-50 {
    transform: translateX(-50%);
}
.bg-color-white {
    background-color: white;
}

.bg-color-white-70-opacity {
    background-color: rgba(255, 255, 255, 0.7);
}


.bg-color-white-20-percent {
    background-color: rgba(255, 255, 255, 0.2);
}

.bg-color-light-green {
    background: linear-gradient(103deg, rgba(224, 248, 234, 0.8) 0%, rgba(226, 238, 245, 0.8) 100%);
}

.bg-color-grey-input {
    background-color: #F4F7FA;
}

.border-color-grey-input {
    /*设置边框*/
    border: 1px solid #D4D6D9;
    box-sizing: border-box;
}

.border-color-blue-input {
    border: 1px solid #004CD3;
    box-sizing: border-box;
}

.text-area-border {
    border: 1px solid #D4D6D9;
    box-sizing: border-box;
    outline: none;
}

.text-area-border:focus {
    border: 1px solid #004CD3;
    box-sizing: border-box;
    outline: none;
}

.bg-color-grey {
    background-color: #F5F7F9;
}

.bg-color-grey-btn {
    background-color: #C1C5C8;
}

.bg-color-gray {
    background-color: gray;
}

.bg-btn-orange {
    background: linear-gradient(180deg, #FF9A00 0%, #FF7F00 100%);
}

.bg-color-blue {
    background: linear-gradient(180deg, #3375FF 0%, #4C96FE 100%), linear-gradient(180deg, #4AE1EA 0%, #BAF32C 100%);
}

.bg-color-grey-overlay {
    background-color: rgba(0, 0, 0, .5);
}

.bg-grey-custom {
    background: linear-gradient(180deg, #CCCCCC 0%, #B2B2B2 100%);
}

.bg-grey-custom1 {
    background: #26AAADB2;
}

.bg-color-cyan {
    background: linear-gradient(129deg, #E0F8EA 0%, #E2EEF5 50%, #E1F0FF 100%), #F5F7F9;
}


.bg-color-blue-btn {
    background: linear-gradient(180deg, #3375FF 0%, #4C96FE 100%);
}

.bg-btn-blue-color {
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%);
}

.bg-btn-light-blue {
    background: linear-gradient(180deg, rgba(76, 150, 254, 0.2) 0%, rgba(51, 117, 255, 0.2) 100%);
}

.bg-light-green-container {
    background: linear-gradient(118deg, #E0F8EA 0%, #E2EEF5 50%, #E1F0FF 100%), #F5F7F9;
}

.bg-light-blue {
    background: rgba(0, 76, 211, 0.08);
}

.border-grey-1 {
    border: gray 1px solid;
}

/*边框圆角*/

/*圆形*/
.border-radius-round {
    border-radius: 50%;
}

.border-radius-4 {
    border-radius: 4px;
}

.border-radius-5 {
    border-radius: 5px;
}

.border-radius-6 {
    border-radius: 6px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-18 {
    border-radius: 18px;
}

.border-radius-11 {
    border-radius: 11px;
}

.border-radius-34 {
    border-radius: 34px;
}

.border-radius-98 {
    border-radius: 98px;
}

.border-bottom-radius-16 {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/*顶部圆角*/
.border-top-radius-6 {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/*左上角圆角*/
.border-left-top-radius-6 {
    border-top-left-radius: 6px;
}


.border-left-radius-6 {
    /*在左边圆角*/
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.border-right-radius-6 {
    /*在右边圆角*/
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/*右上角圆角*/
.border-right-top-radius-6 {
    border-top-right-radius: 6px;
}

.height-99-percent {
    height: 99%;
}

.height-14 {
    height: 14px;
}

.height-16 {
    height: 16px;
}

.height-10 {
    height: 10px;
}

.height-17 {
    height: 17px;
}

.height-18 {
    height: 18px;
}

.height-20 {
    height: 20px;
}

.height-21 {
    height: 21px;
}

.height-22 {
    height: 22px;
}

.height-23 {
    height: 23px;
}


.height-24 {
    height: 24px;
}

.height-26 {
    height: 26px;
}

.height-27 {
    height: 27px;
}

.height-29 {
    height: 29px;
}

.height-30 {
    height: 30px;
}

.height-31 {
    height: 31px;
}

.height-32 {
    height: 32px;
}


.height-33 {
    height: 33px;
}


.height-36 {
    height: 36px;
}

.height-37 {
    height: 37px;
}

.height-38 {
    height: 38px;
}

.height-40 {
    height: 40px;
}

.height-43 {
    height: 43px;
}

.height-45 {
    height: 45px;
}

.height-46 {
    height: 46px;
}

.height-48 {
    height: 48px;
}

.height-50 {
    height: 50px;
}

.height-52 {
    height: 52px;
}

.height-53 {
    height: 53px;
}

.height-55 {
    height: 55px;
}

.height-56 {
    height: 56px;
}

.height-58 {
    height: 58px;
}

.height-59 {
    height: 59px;
}

.height-60 {
    height: 60px;
}

.height-63 {
    height: 63px;
}

.height-66 {
    height: 66px;
}

.height-68 {
    height: 68px;
}

.height-70 {
    height: 70px;
}

.height-73 {
    height: 73px;
}

.height-76 {
    height: 76px;
}

.height-80 {
    height: 80px;
}

.height-86 {
    height: 86px;
}


.height-90 {
    height: 90px;
}

.height-93 {
    height: 93px;
}

.height-100 {
    height: 100px;
}

.height-103 {
    height: 103px;
}

.height-108 {
    height: 108px;
}

.height-111 {
    height: 111px;
}

.height-117 {
    height: 117px;
}

.height-118 {
    height: 118px;
}


.min-height-118 {
    min-height: 118px;
}

.height-119 {
    height: 119px;
}

.height-124 {
    height: 124px;
}

.height-131 {
    height: 131px;
}

.height-133 {
    height: 133px;
}


.height-135 {
    height: 135px;
}

.height-138 {
    height: 138px;
}

.height-142 {
    height: 142px;
}

.min-height-144 {
    min-height: 144px;
}

.height-145 {
    height: 145px;
}

.height-147 {
    height: 147px;
}

.height-150 {
    height: 150px;
}

.height-157 {
    height: 157px;
}

.height-160 {
    height: 160px;
}

.height-165 {
    height: 165px;
}

.height-169 {
    height: 169px;
}

.height-175 {
    height: 175px;
}

.height-180 {
    height: 180px;
}

.height-192 {
    height: 192px;
}

.height-196 {
    height: 196px;
}


.height-200 {
    height: 200px;
}

.height-205 {
    height: 205px;
}

.height-208 {
    height: 208px;
}

.height-210 {
    height: 210px;
}

.min-height-210 {
    min-height: 210px;
}

.height-213 {
    height: 213px;
}


.height-215 {
    height: 215px;
}

.height-220 {
    height: 220px;
}

.height-223 {
    height: 223px;
}

.height-230 {
    height: 230px;
}

.height-236 {
    height: 236px;
}

.height-240 {
    height: 240px;
}

.height-246 {
    height: 246px;
}

.height-260 {
    height: 260px;
}

.height-276 {
    height: 276px;
}

.height-292 {
    height: 292px;
}

.height-300 {
    height: 300px;
}

.height-325 {
    height: 325px;
}


.height-340 {
    height: 340px;
}

.height-345 {
    height: 345px;
}

.height-350 {
    height: 350px;
}

.height-353 {
    height: 353px;
}

.height-379 {
    height: 379px;
}

.height-395 {
    height: 395px;
}

.height-396 {
    height: 396px;
}

.height-333 {
    height: 333px;
}

.height-334 {
    height: 334px;
}

.height-380 {
    height: 380px;
}

.height-405 {
    height: 405px;
}

.height-420 {
    height: 420px;
}

.height-424 {
    height: 424px;
}

.height-430 {
    height: 430px;
}

.height-440 {
    height: 440px;
}

.height-458 {
    height: 458px;
}

.height-460 {
    height: 460px;
}


.height-472 {
    height: 472px;
}

.height-485 {
    height: 485px;
}

.height-491 {
    height: 491px;
}

.height-500 {
    height: 500px;
}

.height-503 {
    height: 503px;
}

.height-521 {
    height: 521px;
}

.height-545 {
    height: 545px;
}

.height-550 {
    height: 550px;
}


.height-560 {
    height: 560px;
}

.height-591 {
    height: 591px;
}


.width-10 {
    width: 10px;
}

.width-14 {
    width: 14px;
}

.width-16 {
    width: 16px;
}

.width-17 {
    width: 17px;
}

.width-18 {
    width: 18px;
}

.width-20 {
    width: 20px;
}

.width-21 {
    width: 21px;
}

.width-24 {
    width: 24px;
}

.width-26 {
    width: 26px;
}

.width-27 {
    width: 27px;
}


.width-29 {
    width: 29px;
}

.width-30 {
    width: 30px;
}

.width-33 {
    width: 33px;
}

.width-37 {
    width: 37px;
}

.width-38 {
    width: 38px;
}

.width-40 {
    width: 40px;
}


.width-43 {
    width: 43px;
}

.width-46 {
    width: 46px;
}

.width-50 {
    width: 50px;
}

.width-51 {
    width: 51px;
}

.width-53 {
    width: 53px;
}

.width-55 {
    width: 55px;
}

.width-56 {
    width: 56px;
}


.width-57 {
    width: 57px;
}


.width-60 {
    width: 60px;
}

.width-66 {
    width: 66px;
}

.width-73 {
    width: 73px;
}

.min-width-73 {
    min-width: 73px;
}

.width-74 {
    width: 74px;
}


.width-76 {
    width: 76px;
}

.width-77 {
    width: 77px;
}

.width-80 {
    width: 80px;
}

.width-86 {
    width: 86px;
}

.width-93 {
    width: 93px;
}

.width-97 {
    width: 97px;
}

.width-98 {
    width: 98px;
}

.width-100 {
    width: 100px;
}

.width-104 {
    width: 104px;
}

.width-106 {
    width: 106px;
}

.min-width-104 {
    min-width: 104px;
}

.width-113 {
    width: 113px;
}

.width-116 {
    width: 116px;
}

.width-120 {
    width: 120px;
}

.width-123 {
    width: 123px;
}

.width-134 {
    width: 134px;
}

.width-131 {
    width: 133px;
}

.width-133 {
    width: 133px;
}

.width-136 {
    width: 136px;
}

.width-143 {
    width: 143px;
}

.width-145 {
    width: 145px;
}

.width-147 {
    width: 147px;
}


.width-150 {
    width: 150px;
}

.width-153 {
    width: 153px;
}

.width-155 {
    width: 155px;
}

.width-156 {
    width: 156px;
}

.width-160 {
    width: 160px;
}

.width-162 {
    width: 162px;
}

.width-164 {
    width: 164px;
}

.width-165 {
    width: 165px;
}

.width-166 {
    width: 166px;
}

.width-168 {
    width: 168px;
}

.width-170 {
    width: 170px;
}


.width-172 {
    width: 172px;
}

.width-178 {
    width: 178px;
}

.width-180 {
    width: 180px;
}

.width-181 {
    width: 181px;
}

.width-183 {
    width: 183px;
}

.width-190 {
    width: 190px;
}

.width-193 {
    width: 193px;
}

.max-width-193 {
    max-width: 193px;
}

.width-200 {
    width: 200px;
}

.width-206 {
    width: 206px;
}

.max-width-206 {
    max-width: 206px;
}

.width-209 {
    width: 209px;
}


.width-220 {
    width: 220px;
}

.width-222 {
    width: 222px;
}

.width-226 {
    width: 226px;
}

.width-232 {
    width: 232px;
}

.width-233 {
    width: 233px;
}

.width-240 {
    width: 240px;
}

.width-248 {
    width: 248px;
}


.width-273 {
    width: 273px;
}

.width-245 {
    width: 245px;
}

.width-246 {
    width: 246px;
}

.width-254 {
    width: 254px;
}

.width-257 {
    width: 257px;
}

.width-260 {
    width: 260px;
}

.width-267 {
    width: 267px;
}

.width-270 {
    width: 270px;
}


.width-280 {
    width: 280px;
}

.width-283 {
    width: 283px;
}

.width-285 {
    width: 285px;
}

.width-290 {
    width: 290px;
}

.width-300 {
    width: 300px;
}

.width-306 {
    width: 306px;
}

.width-307 {
    width: 307px;
}

.width-310 {
    width: 310px;
}

.width-313 {
    width: 313px;
}

.width-315 {
    width: 315px;
}

.width-319 {
    width: 319px;
}

.width-320 {
    width: 320px;
}

.width-324 {
    width: 324px;
}

.width-328 {
    width: 328px;
}

.width-333 {
    width: 333px;
}

.width-340 {
    width: 340px;
}

.width-346 {
    width: 346px;
}

.width-350 {
    width: 350px;
}

.width-360 {
    width: 360px;
}

.width-400 {
    width: 400px;
}

.width-460 {
    width: 460px;
}


.width-50-percent {
    width: 50%;
}

.width-95-percent {
    width: 95%;
}


.width-100-percent {
    width: 100%;
}

.max-width-100 {
    max-width: 100px;
}

.max-width-290 {
    max-width: 290px;
}

.max-width-310 {
    max-width: 310px;
}

.max-width-326 {
    max-width: 326px;
}

/*文字只能一行，如果超过宽度就使用省略号*/
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*内容左右3等分 grid*/
.grid-3-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/*内容左右4等分 grid*/
.grid-4-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/*内容左右5等分 grid*/
.grid-5-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/*等分内容之间的间隙*/
.grid-gap-3 {
    gap: 3px;
}

.grid-gap-7 {
    gap: 7px;
}

.height-100-percent {
    height: 100%;
}

/*游戏失败弹窗中，正确单词框的配置*/
.game-fail-word-box {
    align-items: center;
    justify-content: space-between;
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    /*background: linear-gradient(117deg, #E0F8EA -3%, #E2EEF5 50%, #FCFDFE 100%), linear-gradient(180deg, rgba(0, 92, 255, 0.4) 0%, rgba(0, 92, 255, 0) 39%), #FFFFFF;*/
    /*box-sizing: border-box;*/
    /*border: 6px solid;*/
    /*border-image: linear-gradient(243deg, #3FF2CB 1%, #4CDFEF 50%, #D3F801 100%) 16;*/
}

/*游戏失败弹窗中，正确单词框内单词card的背景色*/
.bg-color-liner-white-green {
    background: linear-gradient(180deg, #5EE2A7 0%, #00D08E 100%);
}

/*画一条分割线*/
.split-line {
    height: 1px;
    opacity: 0.3;
    background: #D5D7D9;
}

.split-line-1 {
    height: 1px;
    opacity: 0.5;
    background: #D8D8D8;
}

/*设置底部边框*/
.bottom-border-line {
    border-bottom: 1px solid #E1E3E6;
}

/*选中指示器*/
.selected-indicator {
    height: 2px;
    opacity: 1;
    border-radius: 20px;
    background: linear-gradient(90deg, #009DFF 0%, #4DC4DE 100%);
}

/*游戏失败弹窗中分享按钮的背景色*/
.bg-color-liner-green-blue {
    background: linear-gradient(180deg, rgba(76, 150, 254, 0.2) 0%, rgba(51, 117, 255, 0.2) 100%);
}

/*游戏失败弹窗中challenge按钮背景色*/
.bg-color-liner-green-challenge {
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%), linear-gradient(180deg, #789EFF 0%, #3E78FC 100%);
}

/*通用的顶部标题栏容器*/
.top-title-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    min-width: 360px;
    max-width: 600px;
    /*background-color: #0F49EA;*/
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    height: 49px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/*通用背景图设置*/
.bg-img-cover-no-repeat-center {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

/*通用img设置*/
.img-no-repeat-center-contain {
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.img-no-repeat-center-100-height {
    background-position: top;
    background-repeat: no-repeat;
    object-fit: contain; /* 调整图片的填充方式，cover保持宽高比，同时裁剪以适应容器 */
}

.img-100-height {
    background-position: top;
    background-repeat: no-repeat;
    /*图片适应高度百分百*/
    height: 100%;
}


.img-grayscale-100 {
    filter: grayscale(100%);
}

.img-grayscale-50 {
    filter: brightness(1.2) contrast(1) saturate(0%);
}

.img-grayscale-50-white {
    filter: brightness(2) contrast(0.9) saturate(0%);
}

.touch-action-none {
    touch-action: none;
}

.scroll-y-hidden{
    overflow-y: hidden;
}

.object-fit-contain {
    object-fit: contain
}

.line-height-30 {
    line-height: 30px;
}

.line-vertical {
    width: 1px;
    opacity: 0.2;
    border-left: 1px dashed #919499;
}
.download-modal-container {
    display: flex;
    flex-direction: column;
    align-content: center;
    /*圆角*/
    border-radius: 30px;
    width: 300px;
    height: 335px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
    background-size: contain;
}

.modal-title .right-close-button{
    width: 15px;
    height: 15px;
    position: absolute;
    right: 12px;
    top: -2px;
}

.download-button-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 260px;
    height: 43px;
    border-radius: 8px;
    opacity: 1;
    background: linear-gradient(180deg, rgba(76, 150, 254, 0.1) 0%, rgba(51, 117, 255, 0.1) 100%);
}

.phone-icon{
    height: 18px;
    width: 18px;
    margin-top: 4px;
    margin-right: 4px;
}.medal-dialog-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: fixed;
    /*align-items: center;*/
    width: 360px;
    height: 591px;
    border-radius: 17px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


.medal-top-bg-img {
    position: fixed;
    width: 360px;
    height: 276px;
    object-fit: cover;
    z-index: -2;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.medal-pillar-text{
    background: linear-gradient(90deg, #009DFF 0%, #4DC4DE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.join-match-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 17px;
    width: 300px;
    height: 197px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}


/*游戏成功后缩小九宫格界面*/
.daily-game-page .scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.9);
    transition: all 1s ease-in-out;
}

.top-title-container .go-back-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: 13px;
}

.top-title-container .game-center-title {
    font-size: 20pt;
    color: #fff;
    text-align: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.top-title-container .tip-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: auto;
}

.top-title-container .game-setting-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-left: 8px;
}


/*成功后的卡片背景*/
.success-card-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    background: linear-gradient(139deg, #E0F8EA 0%, #E2EEF5 50%, #FCFDFE 100%), linear-gradient(180deg, rgba(0, 92, 255, 0.4) 0%, rgba(0, 92, 255, 0) 39%), #FFFFFF;
    box-sizing: border-box;
    border: 6px solid;
    border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;
    height: 340px;
    width: 310px;
    margin-left: auto;
    margin-right: auto;
}

.success-card-challenge-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    /*background: linear-gradient(180deg, rgba(193, 211, 0, 0.4) 0%, rgba(255, 255, 255, 0) 36%), #FFFFFF;*/
    /*box-sizing: border-box;*/
    /*border: 6px solid;*/
    /*border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;*/
    background-size: contain;
    background-repeat: no-repeat;
    height: 340px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
}

.success-card-answer-apple-container {
    width: 300px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    margin-bottom: 20px;
    margin-top: auto;
}

.success-card-answer-text {
    font-size: 16px;
    color: #919499;
    margin-bottom: 10px;
}

.challenge-success-avatar-container {
    position: relative;
    width: 70px;
    height: 70px;
}

.success-card-you-win-avatar-challenge {
    position: absolute;
    width: 60px;
    height: 60px;
    object-fit: contain;
    padding: 3px;
    box-sizing: content-box;
    background: linear-gradient(180deg, #FF84BB 0%, #FF4B9C 100%);
    border-radius: 50%;
}

/*ai挑战胜利界面头像右下角的裱花*/
.success-card-you-win-avatar-flower-challenge {
    position: absolute;
    width: 46px;
    height: 46px;
    object-fit: contain;
    right: -14px;
    bottom: 0;
}

.success-card-you-win-text {
    width: 180px;
    height: 30px;
    object-fit: contain;
    margin-left: 10px;
}

.success-card-apple-text {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    letter-spacing: 0.15em;
    background: linear-gradient(180deg, #004CD3 0%, #1A72F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.complete-tips-word {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    font-size: 16px;
    color: white;
    line-height: 30px;
    text-align: center;
}

.complete-tips-word-challenge {
    margin-top: 12px;
    margin-left: 30px;
    width: 300px;
    color: white;
    line-height: 30px;
}

.right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 116px;
    height: 116px;
}

.tip-pic {
    width: 285px;
    height: 217px;
    margin-top: -3px;
    margin-left: auto;
    margin-right: auto
}

/*闹钟图标*/
.clock-icon {
    width: 14px;
    height: 14px;
}

.next-daily-puzzle-text {
    font-size: 16px;
    color: white;
    opacity: 0.6;
}

.play-challenge-btn-bg {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F3FF 100%), #FFFFFF;
}
.daily-countdown-bar-container{
    position: fixed;
    top: 49px;
    left: 0;
    right: 0;
    width: 280px;
    height: 26px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin: 6px auto;
}

.countdown-bar-white-color {
    color: #fff;
}

.countdown-bar-red-color {
    color: red;
}

.countdown-bar-red-bg-color{
    background-color: red;
}

/*倒计时进度条*/
.countdown-bar{
    position: absolute;
    height: 25px;
    background-color: #256EED;
    border-radius: 8px;
    z-index: 0;
    left: 0;
    /*宽度变化过渡动画*/
    transition: width .5s ease-in-out;
}

.hide-countdown-bar{
    visibility: hidden;
    /*transition: visibility .5s ease-in-out;*/
}

.countdown-bar-text-container{
    position: absolute;
    left: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    /*位置变化过渡动画*/
    transition: transform .5s ease-in-out, width .5s ease-in-out;
    z-index: 0;
}

.countdown-bar-text {
    font-size: 20px;
    z-index: 2;
    margin-left: 5px;
    margin-right: 5px;
}
.daily-game-grid-letter-card-container {
    position: fixed;
    width: 280px;
    top: 87px;
    left: 0;
    right: 0;
    bottom: 273px;
    min-height: 50px;
    margin-left: auto;
    margin-right: auto;
    /*四周设置阴影*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 17px;
    background-color: #F7F7FF;
    padding: 6px 2px;
}
.daily-game-grid-letter-card-container .in-card-container{
    display: flex;
    align-items: center;
    width: 280px;
    height: 100%;
    overflow-y: auto; /* 纵向可滚动 */
    flex-direction: column-reverse;
}

.daily-game-grid-letter-card-container .word-text{
    height: 53px;
    width: 236px;
    color: #919499;
    font-size: 16px;
    /*设置行距*/
    line-height: 27px
}

/*隐藏y轴滚动条*/
.in-card-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.in-card-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /*overflow: hidden;*/
}

.daily-game-grid-letter-card-container .letter-item {
    /*分开五个grid排列*/
    /*height: 50px;*/
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.grid-item-margin-top{
    margin-top: 9px;
}

.letter-item .letter-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    transition: transform 0.4s ease-in-out, background-image 0.2s ease-in-out ;
}



/* 定义动画 */
@keyframes slideFromBottom {
    from {
        transform: translateY(100%); /* 从屏幕底部开始 */
    }
    to {
        transform: translateY(0); /* 移动到初始位置 */
    }
}

/* 应用动画到元素 */
.slide-up-animation {
    animation: slideFromBottom 1s ease-out forwards; /* 动画名称，持续时间，缓动函数，动画结束是否保持最终状态 */
}


.daily-game-grid-letter-card-container .no-data-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.no-data-container .word-tip-img{
    width: 189px;
    height: 40px;
}

.grid-height-50{
    height: 50%;
}

/*游戏成功后缩小九宫格界面*/
.scale-game-grid {
    /*整体缩小到0.9*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}

.grid-height-after-scale{
    height: 230px;
}

.scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}.flip-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
}

/*.letter-card-bg-correct{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-correct-wrong-position{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_wrong_position_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-wrong{*/
/*    background-image: url("/public/theme-default/images/game/wrong_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
.keyboard-container {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 245px;
    padding-bottom: 20px;
    align-items: center;
    background-color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /*顶部阴影*/
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .1);
    /*固定这个界面在底部*/
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.keyboard-container .keyboard-word-input-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #F0F1F6;
    border-radius: 10px;
    width: 270px;
    height: 45px;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.keyboard-word-input-container .letter-container {
    display: flex;
    width: 48px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

.letter-normal-color {
    color: #717897;
}

.keyboard-key {
    border-style: none; /* 移除所有类型的边框 */
    border-color: transparent; /* 将边框颜色设置为透明 */
    background-color: transparent;
}

.keyboard-key-wrong {
    color: #C0C4CB;
}

.keyboard-key-row-container {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
}

.right-slice-one {
    margin-right: -1px;
}

.keyboard-first-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-second-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 34px;
    height: 42px;
    margin-left: 2px;
    margin-right: 3px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-third-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-remove-btn {
    object-fit: contain;
    width: 101px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
}

.keyboard-hint-btn-container {
    width: 86px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*transition: background-color .5s ease-in-out;*/
}

.keyboard-hint-btn-icon {
    width: 30px;
    height: 30px;
}

.keyboard-hint-btn-container-enable {
    border-radius: 6px;
    opacity: 1;
    background: linear-gradient(180deg, #70E8F9 0%, #21C1F5 100%);
}

.keyboard-hint-btn-container-unable {
    border-radius: 6px;
    opacity: 1;
    background: #E0E3E9;
}

.keyboard-hint-btn-color {
    color: #ED5C57;
}


.keyboard-submit-btn {
    display: flex;
    height: 46px;
    background: linear-gradient(180deg, #789EFF 0%, #3E78FC 100%);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}

.keyboard-submit-btn .submit-text {
    font-size: 20px;
    color: white;
}

/*按键按下去的动态效果*/
.key-pressed {
    transform: scale(0.9); /* 缩小按键大小 */
    transition: transform 0.1s ease, background-color 0.1s ease; /* 平滑过渡效果 */
}.hint-confirm-dialog-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 10px;
    width: 300px;
    height: 252px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.hint-confirm-dialog-container .exit-close-dialog-title{
    font-size: 16px;
    margin-top: 14px;
    text-align: center;
    position: relative;
}

.hint-confirm-dialog-container .exit-close-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.hint-confirm-dialog-container .hint-confirm-dialog-content-container{
    margin-top: 50px;
    height: 80px;
    width: 260px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    margin-left: auto;
    margin-right: auto;
}

.hint-confirm-dialog-container .hint-dialog-confirm-btn{
    width: 260px;
    height:43px;
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%);
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 26px;
    color: white;
    font-size: 16px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.hint-confirm-dialog-container .hint-dialog-cancel-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.hint-confirm-dialog-container .left-top{
    position: absolute;
    left: 0;
    top: 0;
    width: 83px;
    height: 77px;
}

.hint-confirm-dialog-container .right-bottom{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 116px;
    height: 116px;
}
.font-size-9 {
    font-size: 9px;
}
.font-size-10 {
    font-size: 10px;
}

.font-size-11 {
    font-size: 11px;
}


.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-15 {
    font-size: 15px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-17 {
    font-size: 17px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-21 {
    font-size: 21px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-26 {
    font-size: 26px;
}

.font-size-27 {
    font-size: 27px;
}

.font-size-32 {
    font-size: 32px;
}

.font-size-33 {
    font-size: 33px;
}

.font-size-40 {
    font-size: 40px;
}

.font-size-42 {
    font-size: 42px;
}

.font-size-43 {
    font-size: 43px;
}

.font-size-46 {
    font-size: 46px;
}

.font-weight-500 {
    font-weight: 500;
}


/*文字斜体*/
.text-italic {
    font-style: italic;
}

/*文字颜色*/
.color-blue {
    color: #004CD3;
}

.color-blue-dark{
    color: #2F7AFF;
}

.color-grey {
    color: #919499;
}

.color-black-custom {
    color: #101013;
}

.color-gray {
    color: gray;
}

.color-cyan {
    color: #00AFBF;
}

.color-purple {
    color: #7A75FF;
}

.bg-color-half-black {
    color: black;
    opacity: 0.5;
}

.color-white {
    color: white;
}

.color-red {
    color: #D92121;
}

.opacity-60-percent {
    opacity: 0.6;
}

.opacity-70-percent {
    opacity: 0.7;
}.challenge-left-right-container {
    /*position: relative;*/
    width: 100%;
    margin-top: 50px;
    background-color: #ED5C57;
}

.challenge-left-pic {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 1;
    width: calc(50% + 47px);
    /*min-width: 230px;*/
    height: 180px;
    display: flex;
    left: 0;
    /*right: 40vw;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.challenge-left-content-container {
    /*position: absolute;*/
}

.challenge-right-content-container {
    /*position: absolute;*/
    height: 180px;
}

.challenge-right-pic {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    right: 0;
    margin-top: 20px;
    width: calc(50% + 47px);
    height: 180px;
    align-items: center;
    justify-content: center;
}

.challenge-lighting-icon {
    position: absolute;
    width: 56px;
    height: 126px;
    right: 0;
    transform: rotate(3deg); /* 向上和向左移动自身宽度和高度的一半，以完全居中 */
    z-index: 1;
}

.challenge-name {
    /*position: absolute;*/
    font-size: 14px;
    color: white;
}

.challenge-name-left {
    top: 40vw;
    transform: translate(-50%, -50%);
    left: 26vw;
}

.challenge-name-right-1 {
    top: 35vw;
    right: 7vw;
}

.challenge-name-right-2 {
    top: 41vw;
    right: 13vw;
}

.challenge-name-title {
    /*position: absolute;*/
    font-size: 24px;
    color: white;
    /*斜体*/
    font-style: italic;
}

.challenge-name-title-left {
    left: 19vw;
    top: 28vw;
}

.challenge-name-title-right {
    right: 18vw;
    top: 28vw;
}

.challenge-avatar-img {
    /*position: absolute;*/
    height: 55px;
    width: 55px;
    /*top: 30px;*/
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.challenge-avatar-img-left {
    left: 26vw;
}

.challenge-avatar-img-right {
    right: 4vw;
    top: 18vw;
}


.challenge-cancel-btn {
    border-radius: 5px;
    width: 200px;
    height: 42px;
    color: #004CD3;
    z-index: 4;
    margin-top: 300px;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/*动画*/
/* 定义动画 */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        /*opacity: 0;*/
    }
    to {
        transform: translateX(0);
        /*opacity: 1;*/
    }
}

/* 应用于需要从左边滑入的元素 */
.slide-in-element-from-left {
    animation-name: slideInFromLeft; /* 使用定义好的动画 */
    animation-duration: 0.2s; /* 动画持续时间 */
    animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0); /* 动画速度曲线 */
    animation-fill-mode: both; /* 动画在开始和结束时都保持最终状态 */
}

/* 定义从右向左滑入的动画 */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        /*opacity: 0;*/
    }
    to {
        transform: translateX(0);
        /*opacity: 1;*/
    }
}

/* 应用于需要从右边滑入的元素 */
.slide-in-element {
    animation-name: slideInFromRight; /* 使用定义好的动画 */
    animation-duration: 0.2s; /* 动画持续时间 */
    /* 动画速度曲线 先慢后快 */
    animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);
    animation-fill-mode: both; /* 动画在开始和结束时都保持最终状态 */
}

/*淡入淡出动画*/
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in-animation {
    animation: fadeIn 0.5s;
    /* 确保动画结束时的状态保持 */
    animation-fill-mode: forwards;
}
.game-page {
    height: 100%;
    width: 100%;
    touch-action: none;
}

/*游戏成功后缩小九宫格界面*/
.game-page .scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}

.top-title-container .go-back-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: 13px;
}

.top-title-container .game-center-title {
    font-size: 20pt;
    color: #fff;
    text-align: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.top-title-container .tip-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: auto;
}

.top-title-container .game-setting-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-left: 8px;
}


/*成功后的卡片背景*/
.success-card-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    background: linear-gradient(139deg, #E0F8EA 0%, #E2EEF5 50%, #FCFDFE 100%), linear-gradient(180deg, rgba(0, 92, 255, 0.4) 0%, rgba(0, 92, 255, 0) 39%), #FFFFFF;
    box-sizing: border-box;
    border: 6px solid;
    border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;
    height: 340px;
    width: 310px;
    margin-left: auto;
    margin-right: auto;
}

.success-card-challenge-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    /*background: linear-gradient(180deg, rgba(193, 211, 0, 0.4) 0%, rgba(255, 255, 255, 0) 36%), #FFFFFF;*/
    /*box-sizing: border-box;*/
    /*border: 6px solid;*/
    /*border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;*/
    background-size: contain;
    background-repeat: no-repeat;
    height: 340px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
}

.success-card-answer-apple-container {
    width: 300px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    margin-bottom: 20px;
    margin-top: auto;
}

.success-card-answer-text {
    font-size: 16px;
    color: #919499;
    /*letter-spacing: 0.1em;*/
    margin-bottom: 10px;
}

.challenge-success-avatar-container {
    position: relative;
    width: 70px;
    height: 70px;
}

.challenge-win-star-img{
    position: fixed;
    z-index: 0;
    height: 280px;
    top: 55px;
}

.success-card-you-win-avatar-challenge {
    position: absolute;
    width: 60px;
    height: 60px;
    object-fit: contain;
    padding: 3px;
    box-sizing: content-box;
    background: linear-gradient(180deg, #FF84BB 0%, #FF4B9C 100%);
    border-radius: 50%;
}

/*ai挑战胜利界面头像右下角的裱花*/
.success-card-you-win-avatar-flower-challenge {
    position: absolute;
    width: 46px;
    height: 46px;
    object-fit: contain;
    right: -14px;
    bottom: 0;
}

.success-card-you-win-text {
    width: 130px;
    height: 33px;
    object-fit: contain;
    margin-left: 10px;
    z-index: 0;
}

.success-card-apple-text {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    letter-spacing: 0.15em;
    background: linear-gradient(180deg, #004CD3 0%, #1A72F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.complete-tips-word {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    font-size: 16px;
    color: white;
    line-height: 30px;
    text-align: center;
}

.complete-tips-word-challenge {
    margin-top: 12px;
    margin-left: 30px;
    width: 300px;
    color: white;
    line-height: 30px;
}

.right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 116px;
    height: 116px;
}

.tip-pic {
    width: 285px;
    height: 217px;
    margin-top: -3px;
    margin-left: auto;
    margin-right: auto
}

/*闹钟图标*/
.clock-icon {
    width: 14px;
    height: 14px;
}

.next-daily-puzzle-text {
    font-size: 16px;
    color: white;
    opacity: 0.6;
}

.play-challenge-btn-bg {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F3FF 100%), #FFFFFF;
}
.ai-challenge-grid-letter-card-container {
    position: fixed;
    width: 280px;
    top: 85px;
    left: 0;
    right: 0;
    bottom: 271px;
    min-height: 50px;
    margin-left: auto;
    margin-right: auto;
    /*四周设置阴影*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 17px;
    background-color: #F7F7FF;
    padding: 6px 2px;
}
.ai-challenge-grid-letter-card-container .in-card-container{
    display: flex;
    width: 280px;
    height: 99%;
    overflow-y: auto; /* 纵向可滚动 */
    flex-direction: column-reverse;
}

.ai-challenge-grid-letter-card-container .word-text{
    height: 53px;
    width: 236px;
    color: #919499;
    font-size: 16px;
    /*设置行距*/
    line-height: 27px
}

/*隐藏y轴滚动条*/
.in-card-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.in-card-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /*overflow: hidden;*/
}

.ai-letter-item {
    /*分开五个grid排列*/
    /*height: 50px;*/
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.ai-grid-item-margin-top{
    margin-top: 9px;
}

.letter-item .letter-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    transition: transform 0.4s ease-in-out, background-image 0.2s ease-in-out ;
}



/* 定义动画 */
@keyframes slideFromBottom {
    from {
        transform: translateY(100%); /* 从屏幕底部开始 */
    }
    to {
        transform: translateY(0); /* 移动到初始位置 */
    }
}

/* 应用动画到元素 */
.slide-up-animation {
    animation: slideFromBottom 1s ease-out forwards; /* 动画名称，持续时间，缓动函数，动画结束是否保持最终状态 */
}


.ai-challenge-grid-letter-card-container  .no-data-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 220px;
}

.no-data-container .word-tip-img{
    width: 189px;
    height: 40px;
}

.no-data-container .word-text{
    width: 220px;
    margin-top: 13px;
}


.grid-height-50{
    height: 50%;
}

/*游戏成功后缩小九宫格界面*/
.ai-scale-game-grid {
    /*整体缩小到0.8*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}

.ai-grid-height-after-scale{
    height: 230px;
}

.scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}.flip-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
}

/*.letter-card-bg-correct{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-correct-wrong-position{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_wrong_position_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-wrong{*/
/*    background-image: url("/public/theme-default/images/game/wrong_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
.keyboard-container {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 245px;
    align-items: center;
    background-color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /*顶部阴影*/
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .1);
    /*固定这个界面在底部*/
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.keyboard-container .keyboard-word-input-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #F0F1F6;
    border-radius: 10px;
    width: 270px;
    height: 45px;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.keyboard-word-input-container .letter-container {
    display: flex;
    width: 48px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

.letter-normal-color {
    color: #717897;
}

.keyboard-key {
    border-style: none; /* 移除所有类型的边框 */
    border-color: transparent; /* 将边框颜色设置为透明 */
    background-color: transparent;
}

.keyboard-key-wrong {
    color: #C0C4CB;
}

.keyboard-key-row-container {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
}

.right-slice-one {
    margin-right: -1px;
}

.keyboard-first-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-second-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 34px;
    height: 42px;
    margin-left: 2px;
    margin-right: 3px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-third-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-remove-btn {
    object-fit: contain;
    width: 101px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
}

.keyboard-hint-btn-container {
    width: 86px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*transition: background-color .5s ease-in-out;*/
}

.keyboard-hint-btn-icon {
    width: 30px;
    height: 30px;
}

.keyboard-hint-btn-container-enable {
    border-radius: 6px;
    opacity: 1;
    background: linear-gradient(180deg, #70E8F9 0%, #21C1F5 100%);
}

.keyboard-hint-btn-container-unable {
    border-radius: 6px;
    opacity: 1;
    background: #E0E3E9;
}

.keyboard-hint-btn-color {
    color: #ED5C57;
}


.keyboard-submit-btn {
    display: flex;
    height: 46px;
    background: linear-gradient(180deg, #789EFF 0%, #3E78FC 100%);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}

.keyboard-submit-btn .submit-text {
    font-size: 20px;
    color: white;
}

/*按键按下去的动态效果*/
.key-pressed {
    transform: scale(0.9); /* 缩小按键大小 */
    transition: transform 0.1s ease, background-color 0.1s ease; /* 平滑过渡效果 */
}.exit-game-confirm-dialog-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 10px;
    width: 300px;
    height: 252px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.exit-game-confirm-dialog-container .exit-close-dialog-title{
    font-size: 16px;
    margin-top: 14px;
    text-align: center;
    position: relative;
}

.exit-game-confirm-dialog-container .exit-close-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.exit-game-confirm-dialog-container .exit-game-confirm-dialog-content-container{
    margin-top: 16px;
    height: 72px;
    width: 260px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-left: auto;
    margin-right: auto;
}

.exit-game-confirm-dialog-container .exit-game-dialog-confirm-btn{
    width: 260px;
    height:43px;
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%);
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 26px;
    color: white;
    font-size: 16px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.exit-game-confirm-dialog-container .exit-game-dialog-cancel-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.exit-game-confirm-dialog-container .left-top{
    position: absolute;
    left: 0;
    top: 0;
}

.exit-game-confirm-dialog-container .right-bottom{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 116px;
    height: 116px;
}
.ai-top-bar-container {
    position: fixed;
    top: 49px;
    left: 0;
    right: 0;
    width: 312px;
    height: 30px;
    background: #F0F1F6;

    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.18), inset 0 -4px 4px 0 #E8E8F4, inset 0 4px 6px 0 #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
    margin-left: auto;
    margin-right: auto;
}

.ai-top-bar-white-color {
    color: #fff;
}

.ai-top-bar-red-color {
    color: red;
}

/*倒计时进度条*/
.ai-top-bar {
    position: absolute;
    height: 25px;
    background-color: #256EED;
    border-radius: 10px;
    z-index: 0;
    left: 0;
    /*宽度变化过渡动画*/
    transition: width .5s ease-in-out;
}

.hide-ai-top-bar {
    visibility: hidden;
    /*transition: visibility .5s ease-in-out;*/
}

.ai-top-bar-text-container {
    position: absolute;
    left: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    /*位置变化过渡动画*/
    transition: transform .5s ease-in-out, width .5s ease-in-out;
    z-index: 0;
}

.ai-top-bar-text {
    font-size: 20px;
    z-index: 2;
    margin-left: 5px;
    margin-right: 5px;
}.ai-tip-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 10px;
    width: 300px;
    height: 480px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.ai-tip-modal-container .ai-tip-modal-title{
    font-size: 16px;
    margin-top: 14px;
    text-align: center;
    position: relative;
}

.ai-tip-modal-container .ai-tip-modal-close-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.ai-tip-modal-container .ai-tip-modal-content-item{
    width: 273px;
    /*height: 40px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    font-size: 13px;
    background-color: #F5F7F9;
    border-radius: 6px;
}

.ai-tip-modal-container .ai-tip-modal-content-item-middle{
    width: 273px;
    height: 66px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;align-content: center;
    font-size: 14px;
    background-color: #F5F7F9;
    border-radius: 6px;
}

.ai-tip-modal-content-item-middle .ai-second-text{
    margin-left: 20px;
    margin-top: 6px;
}

 .margin-top-16{
    margin-top: 16px;
}

.ai-tip-modal-content-item .text-blue-color {
    margin-left: 4px;
    margin-right: 4px;
    color: #004CD3;
}

.ai-tip-modal-container .align-center{
    margin-left: auto;
    margin-right: auto;
}

.ai-tip-modal-container  .ai-examples-text{
    font-size: 14px;
    margin-left: 14px;
    margin-top: 10px;
    margin-bottom: 6px;
}

.ai-tip-modal-container  .left-top{
    position: absolute;
    left: 0;
    top: 0;
    width: 83px;
    height: 77px;
    z-index: -1;
}

.ai-tip-modal-container  .right-bottom-icon{
    position: absolute;
    bottom: 0;
    right: 0;
    object-fit: contain;
    height: 140px;
}

.ai-tip-modal-container  .ai-help-detail-pic{
    width: 273px;
    height: 210px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}.common-card-item {
    width: 90%;
    min-width: 300px;
    max-width: 480px;
    height: 94px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    opacity: 1;
}

.first-card-bg-color {
    background: linear-gradient(180deg, #2684FF 0%, #58B6FC 100%);
}

.second-card-bg-color {
    background: linear-gradient(180deg, #FF59AC 0%, #FF99C7 100%);
}

.third-card-bg-color {
    background: linear-gradient(180deg, #00C8C0 0%, #34D3CC 100%);
}
.difficulty-selection-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 17px;
    width: 300px;
    height: 261px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.difficulty-first-card-bg-color{
    background: linear-gradient(180deg, #00C8C0 0%, #34D3CC 100%);
}

.difficulty-second-card-bg-color{
    background: linear-gradient(180deg, #2684FF 0%, #58B6FC 100%);
}
.difficulty-third-card-bg-color{
    background: linear-gradient(180deg, #FF59AC 0%, #FF99C7 100%);
}.battle-link-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 17px;
    width: 300px;
    height: 261px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.battle-link-modal-share-bg{
    background: linear-gradient(180deg, #00C8C0 0%, #34D4CD 100%), #D8D8D8;
}

.battle-link-modal-copy-bg{
    background: linear-gradient(180deg, #2684FF 0%, #58B6FC 100%), linear-gradient(180deg, #00C8C0 0%, #34D4CD 100%), #D8D8D8;
}

.battle-link-modal-start-match-bg{
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%), linear-gradient(180deg, #789EFF 0%, #3E78FC 100%);
}.my-puzzles-dialog-container {
    display: flex;
    flex-direction: column;
    /*圆角*/
    border-radius: 16px;
    width: 300px;
    height: 585px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.my-match-dialog-bg {
    position: fixed;
    width: 300px;
    height: 585px;
    object-fit: cover;
    z-index: -2;
    border-radius: 17px;
}

.my-match-dialog-indicator {
    height: 2px;
    opacity: 1;
    border-radius: 20px;
    background: linear-gradient(90deg, #009DFF 0%, #4DC4DE 100%);
}

.my-match-dialog-answer-text-color {
    color: #00AFBF;
}

.my-match-dialog-answer-bg-color {
    background: rgba(88, 218, 254, 0.1);
}

/*竖线虚线*/
.my-match-dialog-vertical-line {
    position: absolute;
    left: 116px;
    top: 13px;
    width: 1px;
    height: 85px;
    opacity: 0.2;
    border-left: 1px dashed #919499;
}

.my-match-dialog-VS-text{
    position: absolute;
    left: 104px;
    width: 30px;
    height: 24px;
    /*斜体*/
    font-style: italic;
    top: 43px;
    background: linear-gradient(180deg, #3375FF 0%, #4C96FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}.vs-player-waiting-bg-color {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(151deg, #0F49EA 0%, #2EBAFB 20%, #BFE7FB 100%);
}

.vs-player-waiting-bg-color-white {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.vs-player-waiting-card-bg{
    background: linear-gradient(180deg, #006EFF 0%, #59BFFF 100%);
}

.vs-player-waiting-light-liner{
    background: rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    border-width: 2px 0 0 0;
    border-style: solid;
    border-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%) 4 0 0 0;
}

.vs-player-waiting-start-btn-bg{
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%), rgba(255, 255, 255, 0.5);
}/*挑战背景页，带颜色的*/
.vs-player-shocking-bg-color {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(151deg, #0F49EA 0%, #2EBAFB 20%, #BFE7FB 100%);
}

/*挑战背景页，白色遮罩的*/
.vs-player-shocking-bg-color-white {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.vs-player-shocking-left-right-container {
    /*position: relative;*/
    width: 100%;
    margin-top: 50px;
    background-color: #ED5C57;
}

.vs-player-shocking-left-pic {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 1;
    width: calc(50% + 47px);
    /*min-width: 230px;*/
    height: 180px;
    display: flex;
    left: 0;
    /*right: 40vw;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.vs-player-shocking-avatar-img {
    /*position: absolute;*/
    height: 55px;
    width: 55px;
    /*top: 30px;*/
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.vs-player-shocking-name-title {
    /*position: absolute;*/
    font-size: 24px;
    color: white;
    /*斜体*/
    font-style: italic;
}

.vs-player-shocking-name {
    /*position: absolute;*/
    font-size: 14px;
    color: white;
}

.vs-player-shocking-right-pic {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    right: 0;
    margin-top: 20px;
    width: calc(50% + 40px);
    height: 180px;
    align-items: center;
    justify-content: center;
}


/*动画*/
/* 定义动画 */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        /*opacity: 0;*/
    }
    to {
        transform: translateX(0);
        /*opacity: 1;*/
    }
}

/* 应用于需要从左边滑入的元素 */
.slide-in-element-from-left {
    animation-name: slideInFromLeft; /* 使用定义好的动画 */
    animation-duration: 0.2s; /* 动画持续时间 */
    animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0); /* 动画速度曲线 */
    animation-fill-mode: both; /* 动画在开始和结束时都保持最终状态 */
}

/* 定义从右向左滑入的动画 */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        /*opacity: 0;*/
    }
    to {
        transform: translateX(0);
        /*opacity: 1;*/
    }
}

/* 应用于需要从右边滑入的元素 */
.slide-in-element {
    animation-name: slideInFromRight; /* 使用定义好的动画 */
    animation-duration: 0.2s; /* 动画持续时间 */
    /* 动画速度曲线 先慢后快 */
    animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);
    animation-fill-mode: both; /* 动画在开始和结束时都保持最终状态 */
}


/*游戏成功后缩小九宫格界面*/
.daily-game-page .scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.9);
    transition: all 1s ease-in-out;
}

.top-title-container .go-back-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: 13px;
}

.top-title-container .game-center-title {
    font-size: 20pt;
    color: #fff;
    text-align: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.top-title-container .tip-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: auto;
}

.top-title-container .game-setting-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-left: 8px;
}


/*成功后的卡片背景*/
.success-card-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    background: linear-gradient(139deg, #E0F8EA 0%, #E2EEF5 50%, #FCFDFE 100%), linear-gradient(180deg, rgba(0, 92, 255, 0.4) 0%, rgba(0, 92, 255, 0) 39%), #FFFFFF;
    box-sizing: border-box;
    border: 6px solid;
    border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;
    height: 340px;
    width: 310px;
    margin-left: auto;
    margin-right: auto;
}

.success-card-challenge-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    /*background: linear-gradient(180deg, rgba(193, 211, 0, 0.4) 0%, rgba(255, 255, 255, 0) 36%), #FFFFFF;*/
    /*box-sizing: border-box;*/
    /*border: 6px solid;*/
    /*border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;*/
    background-size: contain;
    background-repeat: no-repeat;
    height: 340px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
}

.success-card-answer-apple-container {
    width: 300px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    margin-bottom: 20px;
    margin-top: auto;
}

.success-card-answer-text {
    font-size: 16px;
    color: #919499;
    margin-bottom: 10px;
}

.challenge-success-avatar-container {
    position: relative;
    width: 70px;
    height: 70px;
}

.success-card-you-win-avatar-challenge {
    position: absolute;
    width: 60px;
    height: 60px;
    object-fit: contain;
    padding: 3px;
    box-sizing: content-box;
    background: linear-gradient(180deg, #FF84BB 0%, #FF4B9C 100%);
    border-radius: 50%;
}

/*ai挑战胜利界面头像右下角的裱花*/
.success-card-you-win-avatar-flower-challenge {
    position: absolute;
    width: 46px;
    height: 46px;
    object-fit: contain;
    right: -14px;
    bottom: 0;
}

.success-card-you-win-text {
    width: 180px;
    height: 30px;
    object-fit: contain;
    margin-left: 10px;
}

.success-card-apple-text {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    letter-spacing: 0.15em;
    background: linear-gradient(180deg, #004CD3 0%, #1A72F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.complete-tips-word {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    font-size: 16px;
    color: white;
    line-height: 30px;
    text-align: center;
}

.complete-tips-word-challenge {
    margin-top: 12px;
    margin-left: 30px;
    width: 300px;
    color: white;
    line-height: 30px;
}

.right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 116px;
    height: 116px;
}

.tip-pic {
    width: 285px;
    height: 217px;
    margin-top: -3px;
    margin-left: auto;
    margin-right: auto
}

/*闹钟图标*/
.clock-icon {
    width: 14px;
    height: 14px;
}

.next-daily-puzzle-text {
    font-size: 16px;
    color: white;
    opacity: 0.6;
}

.play-challenge-btn-bg {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F3FF 100%), #FFFFFF;
}

.vs-payer-dialog-VS-text{
    position: absolute;
    left: 138px;
    width: 30px;
    height: 24px;
    /*斜体*/
    font-style: italic;
    top: 43px;
    background: linear-gradient(180deg, #3375FF 0%, #4C96FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.countdown-bar-container{
    position: fixed;
    top: 49px;
    left: 0;
    right: 0;
    width: 280px;
    height: 26px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin: 6px auto;
}

.countdown-bar-white-color {
    color: #fff;
}

.countdown-bar-red-color {
    color: red;
}

.countdown-bar-red-bg-color{
    background-color: red;
}

/*倒计时进度条*/
.countdown-bar{
    position: absolute;
    height: 25px;
    background-color: #256EED;
    border-radius: 8px;
    z-index: 0;
    left: 0;
    /*宽度变化过渡动画*/
    transition: width .5s ease-in-out;
}

.hide-countdown-bar{
    visibility: hidden;
    /*transition: visibility .5s ease-in-out;*/
}

.countdown-bar-text-container{
    position: absolute;
    left: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    /*位置变化过渡动画*/
    transition: transform .5s ease-in-out, width .5s ease-in-out;
    z-index: 0;
}

.countdown-bar-text {
    font-size: 20px;
    z-index: 2;
    margin-left: 5px;
    margin-right: 5px;
}
.daily-game-grid-letter-card-container {
    position: fixed;
    width: 280px;
    top: 87px;
    left: 0;
    right: 0;
    bottom: 273px;
    min-height: 50px;
    margin-left: auto;
    margin-right: auto;
    /*四周设置阴影*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 17px;
    background-color: #F7F7FF;
    padding: 6px 2px;
}
.daily-game-grid-letter-card-container .in-card-container{
    display: flex;
    align-items: center;
    width: 280px;
    height: 100%;
    overflow-y: auto; /* 纵向可滚动 */
    flex-direction: column-reverse;
}

.daily-game-grid-letter-card-container .word-text{
    height: 53px;
    width: 236px;
    color: #919499;
    font-size: 16px;
    /*设置行距*/
    line-height: 27px
}

/*隐藏y轴滚动条*/
.in-card-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.in-card-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /*overflow: hidden;*/
}

.daily-game-grid-letter-card-container .letter-item {
    /*分开五个grid排列*/
    /*height: 50px;*/
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.grid-item-margin-top{
    margin-top: 9px;
}

.letter-item .letter-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    transition: transform 0.4s ease-in-out, background-image 0.2s ease-in-out ;
}



/* 定义动画 */
@keyframes slideFromBottom {
    from {
        transform: translateY(100%); /* 从屏幕底部开始 */
    }
    to {
        transform: translateY(0); /* 移动到初始位置 */
    }
}

/* 应用动画到元素 */
.slide-up-animation {
    animation: slideFromBottom 1s ease-out forwards; /* 动画名称，持续时间，缓动函数，动画结束是否保持最终状态 */
}


.daily-game-grid-letter-card-container .no-data-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.no-data-container .word-tip-img{
    width: 189px;
    height: 40px;
}

.grid-height-50{
    height: 50%;
}

/*游戏成功后缩小九宫格界面*/
.scale-game-grid {
    /*整体缩小到0.9*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}

.grid-height-after-scale{
    height: 230px;
}

.scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}.flip-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
}

/*.letter-card-bg-correct{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-correct-wrong-position{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_wrong_position_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-wrong{*/
/*    background-image: url("/public/theme-default/images/game/wrong_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
.keyboard-container {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 245px;
    padding-bottom: 20px;
    align-items: center;
    background-color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /*顶部阴影*/
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .1);
    /*固定这个界面在底部*/
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.keyboard-container .keyboard-word-input-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #F0F1F6;
    border-radius: 10px;
    width: 270px;
    height: 45px;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.keyboard-word-input-container .letter-container {
    display: flex;
    width: 48px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

.letter-normal-color {
    color: #717897;
}

.keyboard-key {
    border-style: none; /* 移除所有类型的边框 */
    border-color: transparent; /* 将边框颜色设置为透明 */
    background-color: transparent;
}

.keyboard-key-wrong {
    color: #C0C4CB;
}

.keyboard-key-row-container {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
}

.right-slice-one {
    margin-right: -1px;
}

.keyboard-first-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-second-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 34px;
    height: 42px;
    margin-left: 2px;
    margin-right: 3px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-third-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-remove-btn {
    object-fit: contain;
    width: 101px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
}

.keyboard-hint-btn-container {
    width: 86px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*transition: background-color .5s ease-in-out;*/
}

.keyboard-hint-btn-icon {
    width: 30px;
    height: 30px;
}

.keyboard-hint-btn-container-enable {
    border-radius: 6px;
    opacity: 1;
    background: linear-gradient(180deg, #70E8F9 0%, #21C1F5 100%);
}

.keyboard-hint-btn-container-unable {
    border-radius: 6px;
    opacity: 1;
    background: #E0E3E9;
}

.keyboard-hint-btn-color {
    color: #ED5C57;
}


.keyboard-submit-btn {
    display: flex;
    height: 46px;
    background: linear-gradient(180deg, #789EFF 0%, #3E78FC 100%);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}

.keyboard-submit-btn .submit-text {
    font-size: 20px;
    color: white;
}

/*按键按下去的动态效果*/
.key-pressed {
    transform: scale(0.9); /* 缩小按键大小 */
    transition: transform 0.1s ease, background-color 0.1s ease; /* 平滑过渡效果 */
}.common-card-item {
    width: 90%;
    min-width: 300px;
    max-width: 480px;
    height: 94px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    opacity: 1;
}

.first-card-bg-color {
    background: linear-gradient(180deg, #2684FF 0%, #58B6FC 100%);
}

.second-card-bg-color {
    background: linear-gradient(180deg, #FF59AC 0%, #FF99C7 100%);
}

.third-card-bg-color {
    background: linear-gradient(180deg, #00C8C0 0%, #34D3CC 100%);
}
.my-match-dialog-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 17px;
    width: 300px;
    height: 585px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.my-puzzles-dialog-bg {
    position: fixed;
    width: 300px;
    height: 585px;
    object-fit: contain;
    z-index: -2;
    border-radius: 17px;
}

.my-match-dialog-indicator {
    height: 2px;
    opacity: 1;
    border-radius: 20px;
    background: linear-gradient(90deg, #009DFF 0%, #4DC4DE 100%);
}

.my-match-dialog-answer-text-color {
    color: #00AFBF;
}

.my-match-dialog-answer-bg-color {
    background: rgba(88, 218, 254, 0.1);
}

/*竖线虚线*/
.my-match-dialog-vertical-line {
    position: absolute;
    left: 116px;
    top: 13px;
    width: 1px;
    height: 85px;
    opacity: 0.2;
    border-left: 1px dashed #919499;
}

.my-match-dialog-VS-text{
    position: absolute;
    left: 104px;
    width: 30px;
    height: 24px;
    /*斜体*/
    font-style: italic;
    top: 43px;
    background: linear-gradient(180deg, #3375FF 0%, #4C96FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.create-word-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 10px;
    width: 300px;
    height: 352px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}
.hint-modal-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    /*圆角*/
    border-radius: 17px;
    width: 300px;
    min-height: 208px;
    left: 0;
    right: 0;
    top: 35%;
    margin: auto;
    position: fixed;
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
}

.hint-content-container {
    display: inline-block;
    box-sizing: border-box; /* 确保填充和边框包含在元素的总宽度和高度中 */
    overflow-wrap: break-word; /* 允许长单词换行 */
}

/*游戏成功后缩小九宫格界面*/
.daily-game-page .scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.9);
    transition: all 1s ease-in-out;
}

.top-title-container .go-back-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: 13px;
}

.top-title-container .game-center-title {
    font-size: 20pt;
    color: #fff;
    text-align: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.top-title-container .tip-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-left: auto;
}

.top-title-container .game-setting-button {
    object-fit: contain;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-left: 8px;
}


/*成功后的卡片背景*/
.success-card-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    background: linear-gradient(139deg, #E0F8EA 0%, #E2EEF5 50%, #FCFDFE 100%), linear-gradient(180deg, rgba(0, 92, 255, 0.4) 0%, rgba(0, 92, 255, 0) 39%), #FFFFFF;
    box-sizing: border-box;
    border: 6px solid;
    border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;
    height: 340px;
    width: 310px;
    margin-left: auto;
    margin-right: auto;
}

.success-card-challenge-background {
    display: flex;
    flex-direction: column;
    border-radius: 11px;
    opacity: 1;
    /*background: linear-gradient(180deg, rgba(193, 211, 0, 0.4) 0%, rgba(255, 255, 255, 0) 36%), #FFFFFF;*/
    /*box-sizing: border-box;*/
    /*border: 6px solid;*/
    /*border-image: linear-gradient(221deg, #3FF2CB 0%, #4CDFEF 50%, #D3F801 100%) 16;*/
    background-size: contain;
    background-repeat: no-repeat;
    height: 340px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
}

.success-card-answer-apple-container {
    width: 300px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    margin-bottom: 20px;
    margin-top: auto;
}

.success-card-answer-text {
    font-size: 16px;
    color: #919499;
    margin-bottom: 10px;
}

.challenge-success-avatar-container {
    position: relative;
    width: 70px;
    height: 70px;
}

.success-card-you-win-avatar-challenge {
    position: absolute;
    width: 60px;
    height: 60px;
    object-fit: contain;
    padding: 3px;
    box-sizing: content-box;
    background: linear-gradient(180deg, #FF84BB 0%, #FF4B9C 100%);
    border-radius: 50%;
}

/*ai挑战胜利界面头像右下角的裱花*/
.success-card-you-win-avatar-flower-challenge {
    position: absolute;
    width: 46px;
    height: 46px;
    object-fit: contain;
    right: -14px;
    bottom: 0;
}

.success-card-you-win-text {
    width: 180px;
    height: 30px;
    object-fit: contain;
    margin-left: 10px;
}

.success-card-apple-text {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    letter-spacing: 0.15em;
    background: linear-gradient(180deg, #004CD3 0%, #1A72F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.complete-tips-word {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    font-size: 16px;
    color: white;
    line-height: 30px;
    text-align: center;
}

.complete-tips-word-challenge {
    margin-top: 12px;
    margin-left: 30px;
    width: 300px;
    color: white;
    line-height: 30px;
}

.right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 116px;
    height: 116px;
}

.tip-pic {
    width: 285px;
    height: 217px;
    margin-top: -3px;
    margin-left: auto;
    margin-right: auto
}

/*闹钟图标*/
.clock-icon {
    width: 14px;
    height: 14px;
}

.next-daily-puzzle-text {
    font-size: 16px;
    color: white;
    opacity: 0.6;
}

.play-challenge-btn-bg {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F3FF 100%), #FFFFFF;
}

.vs-payer-dialog-VS-text{
    position: absolute;
    left: 138px;
    width: 30px;
    height: 24px;
    /*斜体*/
    font-style: italic;
    top: 43px;
    background: linear-gradient(180deg, #3375FF 0%, #4C96FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.countdown-bar-container {
    position: fixed;
    top: 49px;
    left: 0;
    right: 0;
    width: 280px;
    height: 26px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin: 6px auto;
}

.countdown-bar-white-color {
    color: #fff;
}

.countdown-bar-red-color {
    color: red;
}

.countdown-bar-red-bg-color {
    background-color: red;
}

/*倒计时进度条*/
.countdown-bar {
    position: absolute;
    height: 25px;
    background-color: #256EED;
    border-radius: 8px;
    z-index: 0;
    left: 0;
    /*宽度变化过渡动画*/
    transition: width .5s ease-in-out;
}

.hide-countdown-bar {
    visibility: hidden;
    /*transition: visibility .5s ease-in-out;*/
}

.countdown-bar-text-container {
    position: absolute;
    left: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    /*位置变化过渡动画*/
    transition: transform .5s ease-in-out, width .5s ease-in-out;
    z-index: 0;
}

.countdown-bar-text {
    font-size: 20px;
    z-index: 2;
    margin-left: 5px;
    margin-right: 5px;
}
.daily-game-grid-letter-card-container {
    position: fixed;
    width: 280px;
    top: 87px;
    left: 0;
    right: 0;
    bottom: 273px;
    min-height: 50px;
    margin-left: auto;
    margin-right: auto;
    /*四周设置阴影*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 17px;
    background-color: #F7F7FF;
    padding: 6px 2px;
}
.daily-game-grid-letter-card-container .in-card-container{
    display: flex;
    align-items: center;
    width: 280px;
    height: 100%;
    overflow-y: auto; /* 纵向可滚动 */
    flex-direction: column-reverse;
}

.daily-game-grid-letter-card-container .word-text{
    height: 53px;
    width: 236px;
    color: #919499;
    font-size: 16px;
    /*设置行距*/
    line-height: 27px
}

/*隐藏y轴滚动条*/
.in-card-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.in-card-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /*overflow: hidden;*/
}

.daily-game-grid-letter-card-container .letter-item {
    /*分开五个grid排列*/
    /*height: 50px;*/
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.grid-item-margin-top{
    margin-top: 9px;
}

.letter-item .letter-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    transition: transform 0.4s ease-in-out, background-image 0.2s ease-in-out ;
}



/* 定义动画 */
@keyframes slideFromBottom {
    from {
        transform: translateY(100%); /* 从屏幕底部开始 */
    }
    to {
        transform: translateY(0); /* 移动到初始位置 */
    }
}

/* 应用动画到元素 */
.slide-up-animation {
    animation: slideFromBottom 1s ease-out forwards; /* 动画名称，持续时间，缓动函数，动画结束是否保持最终状态 */
}


.daily-game-grid-letter-card-container .no-data-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.no-data-container .word-tip-img{
    width: 189px;
    height: 40px;
}

.grid-height-50{
    height: 50%;
}

/*游戏成功后缩小九宫格界面*/
.scale-game-grid {
    /*整体缩小到0.9*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}

.grid-height-after-scale{
    height: 230px;
}

.scale-game_grid {
    /*整体缩小到0.8*/
    transform: scale(0.8);
    transition: all 1s ease-in-out;
}.flip-card{
    display: flex;
    height: 50px;
    width: 48px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
}

/*.letter-card-bg-correct{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-correct-wrong-position{*/
/*    background-image: url("/public/theme-default/images/game/correct_letter_wrong_position_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
/*.letter-card-bg-wrong{*/
/*    background-image: url("/public/theme-default/images/game/wrong_bg.webp");*/
/*    background-size: 100% auto;*/
/*    background-repeat: no-repeat;*/
/*    background-position: top;*/
/*}*/
.keyboard-container {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 245px;
    padding-bottom: 20px;
    align-items: center;
    background-color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /*顶部阴影*/
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .1);
    /*固定这个界面在底部*/
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.keyboard-container .keyboard-word-input-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #F0F1F6;
    border-radius: 10px;
    width: 270px;
    height: 45px;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.keyboard-word-input-container .letter-container {
    display: flex;
    width: 48px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}

.letter-normal-color {
    color: #717897;
}

.keyboard-key {
    border-style: none; /* 移除所有类型的边框 */
    border-color: transparent; /* 将边框颜色设置为透明 */
    background-color: transparent;
}

.keyboard-key-wrong {
    color: #C0C4CB;
}

.keyboard-key-row-container {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
}

.right-slice-one {
    margin-right: -1px;
}

.keyboard-first-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-second-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 34px;
    height: 42px;
    margin-left: 2px;
    margin-right: 3px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-third-letter-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    width: 31px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
}

.keyboard-remove-btn {
    object-fit: contain;
    width: 101px;
    height: 42px;
    margin-left: 2px;
    margin-right: 2px;
}

.keyboard-hint-btn-container {
    width: 86px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*transition: background-color .5s ease-in-out;*/
}

.keyboard-hint-btn-icon {
    width: 30px;
    height: 30px;
}

.keyboard-hint-btn-container-enable {
    border-radius: 6px;
    opacity: 1;
    background: linear-gradient(180deg, #70E8F9 0%, #21C1F5 100%);
}

.keyboard-hint-btn-container-unable {
    border-radius: 6px;
    opacity: 1;
    background: #E0E3E9;
}

.keyboard-hint-btn-color {
    color: #ED5C57;
}


.keyboard-submit-btn {
    display: flex;
    height: 46px;
    background: linear-gradient(180deg, #789EFF 0%, #3E78FC 100%);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}

.keyboard-submit-btn .submit-text {
    font-size: 20px;
    color: white;
}

/*按键按下去的动态效果*/
.key-pressed {
    transform: scale(0.9); /* 缩小按键大小 */
    transition: transform 0.1s ease, background-color 0.1s ease; /* 平滑过渡效果 */
}.medal-reward-modal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 460px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.medal-reward-modal-card-container {
    display: flex;
    flex-direction: column;
    /*圆角*/
    border-radius: 13px;
    width: 246px;
    height: 246px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
    background-size: contain;
}

.congratulations-text {
    background: linear-gradient(180deg, #FFFFFF 0%, #ADFFFC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.medal-reward-modal-close-container{
    margin-left: 260px;
    margin-top: 6px;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    padding: 5px;
}

.medal-reward-modal-ok-btn{
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%);
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2),inset 0 -17px 15px 0 rgba(0, 200, 255, 0.3);
}

.rotate-image {
    animation: rotate 15s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}.medal-reward-theme-modal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 460px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
}

.medal-reward-theme-modal-card-container {
    display: flex;
    flex-direction: column;
    /*圆角*/
    border-radius: 13px;
    width: 246px;
    height: 246px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
    background-size: contain;
}

.congratulations-text {
    background: linear-gradient(180deg, #FFFFFF 0%, #ADFFFC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.medal-reward-modal-close-container{
    margin-left: 260px;
    margin-top: 6px;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    padding: 5px;
}

.medal-reward-modal-ok-btn{
    background: linear-gradient(180deg, #4C96FE 0%, #3375FF 100%);
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2),inset 0 -17px 15px 0 rgba(0, 200, 255, 0.3);
}

.rotate-image {
    animation: rotate 15s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}.loading-content-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: fixed;
    width: 180px;
    height: 90px;
    background-color: white;
    border-radius: 12px;
    font-size: 16px;
    /*做阴影*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.loading-icon{
    margin-top: 3px;
    margin-bottom: 6px;
    width: 20px;
    height: 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}