/* 首页拆礼物与成绩页体验层：延续白底、橙色点缀的视觉语言 */
body.gift-locked {
    overflow: hidden;
}

/* 紧凑答题布局 */
.quiz-shell{max-width:980px;margin:18px auto;padding:18px 22px}
.quiz-heading{margin-bottom:10px}.quiz-heading h1{font-size:clamp(20px,2.2vw,30px);margin:0}.energy-progress{margin:8px 0 14px}
.quiz-card{padding:22px 26px;margin:0 auto 14px}.quiz-card h2{font-size:clamp(20px,2.4vw,30px);line-height:1.35;margin:8px 0 16px}.quiz-options{gap:10px}.quiz-option{min-height:52px;padding:10px 14px}.feedback{margin-top:12px;padding:12px 16px}.next-btn,.check-btn{margin-top:12px;padding:10px 30px}
@media (max-height:820px) and (min-width:700px){.quiz-shell{margin:8px auto;padding:12px 18px}.quiz-card{padding:16px 22px}.quiz-card h2{margin:4px 0 10px;font-size:23px}.quiz-options{gap:7px}.quiz-option{min-height:44px;padding:7px 12px}.feedback{margin-top:8px;padding:8px 12px}.next-btn,.check-btn{margin-top:8px}}
@media (max-width:700px){.quiz-shell{margin:8px 10px;padding:12px}.quiz-card{padding:16px 14px}.quiz-card h2{font-size:20px}.quiz-option{min-height:48px;padding:9px 10px}.quiz-option span{font-size:15px}.feedback{font-size:14px}}

.gift-intro {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 169, 83, .18), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(255, 111, 28, .12), transparent 32%),
        linear-gradient(145deg, #fffdf9 0%, #fff6ed 100%);
    opacity: 1;
    transition: opacity .46s ease, visibility .46s ease;
}

.gift-intro[aria-hidden="true"] {
    display: none;
}

.gift-intro::before,
.gift-intro::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(255, 122, 24, .1);
    pointer-events: none;
}

.gift-intro::before {
    left: -170px;
    top: -190px;
}

.gift-intro::after {
    right: -190px;
    bottom: -180px;
}

.gift-card {
    position: relative;
    width: min(100%, 720px);
    padding: 58px 36px 52px;
    text-align: center;
    border: 1px solid rgba(255, 138, 51, .12);
    border-radius: 36px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 30px 80px rgba(157, 87, 28, .14);
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    animation: giftCardIn .62s cubic-bezier(.2, .8, .2, 1) both;
}

.gift-box {
    position: relative;
    width: 108px;
    height: 92px;
    margin: 0 auto 30px;
    filter: drop-shadow(0 16px 18px rgba(255, 112, 28, .2));
    transform-origin: center bottom;
}

.gift-box__body {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 68px;
    border-radius: 8px 8px 15px 15px;
    background: linear-gradient(145deg, #ff9b42, #ff6f1c);
}

.gift-box__lid {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 14px;
    width: 108px;
    height: 27px;
    border-radius: 8px;
    background: linear-gradient(145deg, #ffad61, #ff781f);
    transform-origin: 18% 80%;
}

.gift-box__ribbon,
.gift-box__ribbon::before {
    position: absolute;
    z-index: 3;
    content: "";
    background: #fff4dd;
}

.gift-box__ribbon {
    left: 45px;
    top: 14px;
    width: 18px;
    height: 78px;
}

.gift-box__ribbon::before {
    left: -45px;
    top: 15px;
    width: 108px;
    height: 13px;
}

.gift-box__bow {
    position: absolute;
    z-index: 4;
    left: 37px;
    top: -6px;
    width: 34px;
    height: 27px;
}

.gift-box__bow::before,
.gift-box__bow::after {
    content: "";
    position: absolute;
    top: 0;
    width: 25px;
    height: 22px;
    border: 7px solid #ff7721;
    background: #fff9f2;
}

.gift-box__bow::before {
    right: 14px;
    border-radius: 19px 8px 19px 8px;
    transform: rotate(14deg);
}

.gift-box__bow::after {
    left: 14px;
    border-radius: 8px 19px 8px 19px;
    transform: rotate(-14deg);
}

.gift-card__eyebrow {
    margin: 0 0 8px;
    color: #ff751d;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
}

.gift-card h1 {
    margin: 0;
    color: #292724;
    font-size: clamp(27px, 5vw, 38px);
    line-height: 1.25;
}

.gift-card__desc {
    margin: 16px auto 30px;
    color: #77716c;
    font-size: 17px;
    line-height: 1.7;
}

.gift-open-button {
    min-width: 176px;
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ff982f, #ff6818);
    box-shadow: 0 14px 30px rgba(255, 108, 24, .26);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.gift-open-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 34px rgba(255, 108, 24, .32);
}

.gift-open-button:active {
    transform: scale(.97);
}

.gift-intro.is-opening .gift-box {
    animation: giftBounce .58s ease both;
}

.gift-intro.is-opening .gift-box__lid,
.gift-intro.is-opening .gift-box__bow {
    animation: giftLidOpen .72s cubic-bezier(.2, .78, .2, 1) forwards;
}

.gift-intro.is-opening .gift-card::before,
.gift-intro.is-opening .gift-card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 90px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff8a29;
    box-shadow:
        -100px -30px 0 #ffd267,
        -72px 28px 0 #ff6f1c,
        -34px -58px 0 #ffc347,
        36px -54px 0 #ff8629,
        72px 20px 0 #ffd267,
        104px -32px 0 #ff6f1c;
    animation: giftSpark .78s ease-out both;
}

.gift-intro.is-opening .gift-card::after {
    transform: rotate(35deg);
    animation-delay: .05s;
}

.gift-intro.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gift-intro.is-leaving .gift-card {
    transform: translateY(-18px) scale(.96);
    transition: transform .46s ease;
}

/* 成绩勋章页 */
.achievement-page {
    padding-top: clamp(20px, 4vw, 44px);
    padding-bottom: 110px;
}

.achievement-card {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 44px 44px 38px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #f3eee9;
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(82, 55, 34, .09);
}

.achievement-rocket {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 58px;
    line-height: 1;
    filter: drop-shadow(0 10px 12px rgba(255, 117, 29, .16));
    animation: rocketFloat 2.8s ease-in-out infinite;
}

.accuracy-pill {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    min-width: 300px;
    margin: 8px auto 30px;
    padding: 15px 30px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ff9b35, #ff6818);
    box-shadow: 0 15px 30px rgba(255, 105, 24, .22);
}

.accuracy-pill__label {
    font-size: 17px;
    font-weight: 700;
}

.accuracy-pill strong {
    font-size: 42px;
    line-height: 1;
}

.achievement-kicker {
    margin: 0 0 8px;
    color: #9a938c;
    font-size: 16px;
}

.achievement-card h1 {
    margin: 0;
    color: #292724;
    font-size: clamp(29px, 5vw, 42px);
    line-height: 1.25;
}

.achievement-comment {
    max-width: 650px;
    margin: 22px auto 0;
    color: #6c6661;
    font-size: 17px;
    line-height: 1.85;
}

.achievement-quote {
    margin: 34px auto 0;
    padding: 26px 20px 0;
    border: 0;
    border-top: 1px solid #f2ece6;
    color: #ff721c;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.65;
}

.achievement-action {
    margin: 28px 0 0;
    padding: 20px 24px;
    text-align: left;
    border-radius: 22px;
    color: #5f5a55;
    background: #fff7ef;
    font-size: 16px;
    line-height: 1.75;
}

.achievement-action strong {
    color: #e85f0a;
}

.achievement-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.achievement-stat {
    padding: 15px 10px;
    border-radius: 18px;
    background: #faf8f6;
}

.achievement-stat strong,
.achievement-stat span {
    display: block;
}

.achievement-stat strong {
    color: #2f2b28;
    font-size: 24px;
}

.achievement-stat span {
    margin-top: 4px;
    color: #9a938c;
    font-size: 13px;
}

.achievement-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.achievement-actions .button,
.achievement-actions button {
    min-width: 148px;
    justify-content: center;
}

.answer-review {
    width: min(100%, 760px);
    margin: 18px auto 0;
    border: 1px solid #f0ebe6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(82, 55, 34, .06);
}

.answer-review summary {
    padding: 18px 22px;
    color: #4c4743;
    font-weight: 700;
    cursor: pointer;
}

.answer-review__content {
    padding: 0 22px 22px;
}

@keyframes giftCardIn {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes giftBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-12px) scale(1.05); }
}

@keyframes giftLidOpen {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(-22px, -58px) rotate(-24deg); opacity: 0; }
}

@keyframes giftSpark {
    from { opacity: 1; transform: scale(.3); }
    to { opacity: 0; transform: translateY(-38px) scale(1.25); }
}

@keyframes rocketFloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

@media (max-width: 640px) {
    .gift-intro {
        padding: 18px;
    }

    .gift-card {
        padding: 42px 22px 38px;
        border-radius: 28px;
    }

    .gift-box {
        transform: scale(.88);
        margin-bottom: 20px;
    }

    .gift-card__desc {
        margin: 12px auto 24px;
        font-size: 15px;
    }

    .achievement-page {
        padding: 12px 12px 96px;
    }

    .achievement-card {
        padding: 25px 18px 22px;
        border-radius: 26px;
    }

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

    .accuracy-pill {
        min-width: 0;
        width: min(100%, 280px);
        margin-bottom: 22px;
        padding: 13px 20px;
    }

    .accuracy-pill strong {
        font-size: 36px;
    }

    .achievement-comment {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.7;
    }

    .achievement-quote {
        margin-top: 24px;
        padding-top: 20px;
        font-size: 16px;
    }

    .achievement-action {
        margin-top: 20px;
        padding: 16px 17px;
        font-size: 14px;
    }

    .achievement-stats {
        gap: 8px;
        margin-top: 18px;
    }

    .achievement-stat {
        padding: 12px 5px;
    }

    .achievement-stat strong {
        font-size: 20px;
    }

    .achievement-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 20px;
    }

    .achievement-actions .button,
    .achievement-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift-card,
    .gift-box,
    .gift-box__lid,
    .gift-box__bow,
    .gift-card::before,
    .gift-card::after,
    .achievement-rocket {
        animation: none !important;
    }

    .gift-intro,
    .gift-card {
        transition-duration: .01ms !important;
    }
}
