html,
body {
    margin: 0;
    padding: 0;
    font-family: normal, serif;
}

* {
    box-sizing: border-box;
}

#app {
    margin: 0 auto;
    max-width: 450px;
}

/* header */
header {
    width: 100%;
    height: 2.6285rem;
    padding: 0 .4731rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Poppins 500', sans-serif;
    color: #333333;
    font-size: .8937rem;
    line-height: 1.3668rem;

}

header .back,
header .back img {
    width: 1.0514rem;
    height: 1.0514rem;
}

/* big question */
.question-title {
    padding: 0 .4731rem;
    color: #3075FF;
    font-size: 1.104rem;
    font-family: 'Poppins 400', sans-serif;
    line-height: 1.2617rem;
    margin-bottom: .4206rem;
}

.question-cover {
    object-fit: cover;
    width: 100%;
    height: 11.7231rem;
    margin-bottom: .368rem;
}

.scrollBtn,
.submitBtn {
    width: 95%;
    margin: 0 auto .368rem;
    height: 1.84rem;
    background: #3075FF;
    border-radius: .368rem;
    color: #ffffff;
    font-family: 'Poppins 400', sans-serif;
    font-size: .8411rem;
    line-height: 1.2617rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2629rem;
}

.submitBtn {
    margin-top: .5257rem;
}

.submitBtn.disabled {
    background-color: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}

.scrollBtn {
    animation: scrollBtnShadow 2s infinite;
}

@keyframes scrollBtnShadow {
    0% {
        box-shadow: 0 0 0 0 #3075FF;
    }

    50% {
        box-shadow: 0 0 0 .5257rem rgba(48, 117, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 .5257rem rgba(255, 124, 89, 0);
    }
}

.recommendBtn {
    width: 100%;
    height: 2.1028rem;
    background: linear-gradient(90deg, #FF7C59 0%, #FFB332 100%);
    font-family: 'Poppins 500', sans-serif;
    color: #ffffff;
    line-height: 1.2617rem;
    font-size: .9988rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .5257rem;
}

.scrollBtn img {
    width: .736rem;
    height: .8937rem;
}

.recommend-content {
    min-height: calc(100vh - 5.5199rem);
}

.recommend-card {
    display: block;
    width: 96%;
    margin: 1.104rem auto;
}

.recommend-card .title {
    border-radius: 0 0 .2629rem .2629rem;
    padding: .5257rem .8411rem;
    font-family: 'Poppins 500', sans-serif;
    color: #111111;
    line-height: 1.2617rem;
    font-size: 1.0514rem;
    box-shadow: 0 0 2.1028rem 0 rgba(0, 0, 0, 0.2);
}

.recommend-img {
    width: 100%;
    aspect-ratio: 412/215;
    display: block;
    object-fit: cover;
}

/* little questions */
.question-card {
    position: relative;
    transition: all 0.3s ease;
}

.question-card .question-label {
    height: 2.9439rem;
    padding: .8411rem .6308rem;
    /* color: #B7B7B7; */
    color: #ccc;
    font-size: .4731rem;
    font-family: 'Poppins 500', sans-serif;
    line-height: .9463rem;
    vertical-align: baseline;
}

.question-card .question-label span {
    color: #3075FF;
    font-size: .9463rem;
    line-height: 1.2617rem;
}

.question-card .question-img {
    width: 100%;
    aspect-ratio: 428/225;
    display: block;
    object-fit: cover;
}

.option-pannel {
    padding: .2629rem .5783rem;
}

.option-pannel .option-title {
    width: 100%;
    font-family: 'Poppins 500', sans-serif;
    font-size: .8937rem;
    color: #000000;
    line-height: 1.2617rem;
    margin-bottom: .5257rem;
}

.option-pannel .question-options {
    display: grid;
    gap: .4206rem;
    grid-template-columns: 1fr 1fr;
}

.option-pannel .question-options>div {
    width: 100%;
    min-height: 1.6822rem;
    box-shadow: 0px 0px .2103rem 0px rgba(0, 0, 0, 0.25);
    padding: .368rem .7886rem;
    border-radius: .5257rem;
}

.option-pannel .question-options>div>p {
    white-space: normal;
    /* display: flex; */
    /* align-items: center; */
    /* align-items: center;  */
    font-family: 'Poppins 500', sans-serif;
    font-size: .6834rem;
    color: #000000;
    line-height: .8937rem;
    text-align: left;
}

.question-options .option-img {
    width: 100%;
    height: 4.2056rem;
    object-fit: cover;
}

.option-selected {
    background-color: #3075FF;
}

.option-pannel .question-options>.option-selected>p {
    color: #ffffff;
}

.mask {
    opacity: 0.7;
    pointer-events: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 8;
    background-color: #b3b3b3;
}

/* result */
.result-page {
    display: none;
}

.result-title {
    font-size: 1.104rem;
    line-height: 1.2617rem;
    color: #3075FF;
    font-family: 'Poppins 400', sans-serif;
    padding: 0 .4206rem;
}

.result-img {
    width: 100%;
    aspect-ratio: 428/223;
    margin: .6308rem auto;
    object-fit: cover;
}

.result-character {
    padding: 0 .4206rem;
    font-family: 'Poppins 600', sans-serif;
    font-size: 1.2091rem;
    line-height: 1.472rem;
    color: #000000;
    margin-bottom: 1.2091rem;
}

.result-info {
    padding: 0 .4206rem;
    font-family: 'Poppins 500', sans-serif;
    font-size: 1.2091rem;
    line-height: 1.472rem;
    color: #000000;
    margin-bottom: 1.2091rem;

}

.result-desc {
    font-size: 1.1565rem;
    line-height: 1.472rem;
    color: #000000;
    font-family: 'Poppins 400', sans-serif;
    margin-bottom: .5257rem;
    padding: 0 .4206rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.showMore {
    width: 100%;
    color: #999999;
    font-size: .8937rem;
    font-family: 'Poppins 400', sans-serif;
    line-height: 1.3143rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8937rem;
}

.showMore>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.showMore img {
    width: 1.2617rem;
    height: 1.2617rem;
}

.result-btn>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.result-btn {
    padding: 0 .4731rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7886rem;

}

.result-btn>div,
.result-btn>a {
    border-radius: .368rem;
    font-size: .8937rem;
    line-height: 1.3143rem;
    font-family: 'Poppins 400', sans-serif;
    height: 2.0502rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-btn>.tryAgain {
    background: #FFFFFF;
    border: .0526rem solid #D2D2D2;
    color: #999999;
}

.result-btn .goBack {
    background: #3075FF;
    color: #ffffff;
    animation: goBackShadow 2s infinite;
    border: .0526rem solid #3075FF;
}


@keyframes goBackShadow {
    0% {
        box-shadow: 0 0 0 0 #3075FF;
    }

    50% {
        box-shadow: 0 0 0 .5257rem rgba(48, 117, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 .5257rem rgba(255, 124, 89, 0);
    }
}

/* footer */
.footer {
    height: 3.4171rem;
    border-top: .0526rem solid #EAEAEA;
    padding: .5257rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    line-height: 1.0514rem;
    font-size: .5257rem;
    color: #BBBBBB;
    font-family: 'Poppins 400', sans-serif;
}

.privacy-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7886rem;
}

.privacy-info>a {
    color: #BBBBBB;
    line-height: 1.0514rem;
    font-size: .5257rem;
    display: block;
}

/* footer */
#reward-toast {
    display: none;
    padding: 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);

    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 110%;
    text-align: center;

    left: 50%;
    bottom: 16vh;
    z-index: 12;
    position: fixed;
    transform: translateX(-50%);
}

.toast-popup {
    display: none;
    padding: 3vw;
    width: 70.28vw;
    text-align: center;
    border-radius: 1.39vw;
    background: rgba(0, 0, 0, 0.72);
    top: 50%;
    left: 50%;
    z-index: 99;
    color: #FFFFFF;
    position: fixed;
    transform: translate(-50%, -50%);
}

.toast-popup .toast-subtitle {
    font-family: HarmonyOS Sans SC, sans-serif;
    ;
    font-size: 3.61vw;
    font-weight: normal;
    line-height: 5.33vw;
    text-align: center;
    letter-spacing: -0.063894vw;
    color: rgba(255, 255, 255, 0.54);
}