/* =============================================================
   广东免费药具 · 2026 世界避孕日有奖闯关活动
   设计稿基准：750 × 1334（@2x） → 1rem = 20px(设计稿) = 10px(375 视口)
   ============================================================= */

:root {
    --pink: #FA4F8F;
    --pink-1: #FF97B2;
    --pink-2: #FD5B87;
    --pink-3: #F7416F;
    --pink-soft: #FD769E;
    --blue: #0061F8;
    --blue-1: #7FB0FE;
    --blue-2: #4583FD;
    --blue-3: #2E6EEE;
    --blue-track: #63A6FC;
    --blue-soft: #6598FB;
    --ink: #1B3F9E;
    --ink-deep: #123A96;
    --green: #52D94B;
    --green-1: #7DEE74;
    --red: #F4574F;
    --card: #FFFFFF;
    --tint: #E5F1FD;
    --tint-2: #EDF4FE;
    --line: #CFE3FD;
    --shadow: 0 8px 24px rgba(31, 87, 190, .16);
    --radius: 2.4rem;
    --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.2 5.1 10.6 12 12-6.9 1.4-11.3 5.8-12 12-.7-6.2-5.1-10.6-12-12C6.9 10.6 11.3 6.2 12 0z' fill='%23fff'/%3E%3C/svg%3E");
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

html {
    font-size: calc(100vw / 37.5);
}
@media (min-width: 480px) {
    html { font-size: 12.8px; }
}

body.yj-body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: #BFE0FE;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 背景层 ------------------------------------------------------- */
.yj-bg {
    position: fixed;
    inset: 0;
    background: url("../img/bg-page.png") no-repeat center / cover;
    z-index: 0;
    background-color: #BFE0FE;
}
.yj-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(120, 190, 255, .18), rgba(255, 255, 255, 0) 40%);
}
.yj-bg.is-dim::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 62, 96, .58);
}

.yj-app {
    position: relative;
    z-index: 1;
    display: flow-root;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 顶部返回 ----------------------------------------------------- */
.yj-back {
    position: absolute;
    left: 1.4rem;
    top: calc(1.6rem + env(safe-area-inset-top, 0px));
    width: 4.6rem;
    height: 4.6rem;
    background: url("../img/btn-back.png") no-repeat center / contain;
    z-index: 20;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* 按钮 --------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 5.7rem;
    border-radius: 999px;
    border: 0;
    font-family: var(--font);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #fff;
    cursor: pointer;
    padding: 0 3.2rem;
    text-shadow: 0 .15rem .3rem rgba(150, 20, 60, .25);
    transition: transform .12s ease, filter .2s ease;
    user-select: none;
}
.btn::before,
.btn::after {
    content: "";
    position: absolute;
    background: var(--spark) no-repeat center / contain;
    opacity: .95;
    pointer-events: none;
}
.btn::before { left: 1.6rem; top: 1.2rem; width: 1.1rem; height: 1.1rem; }
.btn::after  { right: 1.6rem; bottom: 1.4rem; width: .9rem; height: .9rem; opacity: .8; }

.btn:active { transform: scale(.97); filter: brightness(1.04); }

.btn-pink {
    background: linear-gradient(180deg, #FF9AB4 0%, #FD5B87 36%, #F7416F 70%, #FF7BA1 100%);
    box-shadow: 0 .6rem 1.6rem rgba(247, 65, 111, .38), inset 0 .18rem 0 rgba(255, 255, 255, .55), inset 0 -.3rem .6rem rgba(190, 25, 80, .2);
}
.btn-blue {
    background: linear-gradient(180deg, #8CB8FE 0%, #4A85FB 42%, #2E6EEE 78%, #6D9DFC 100%);
    box-shadow: 0 1.2rem 2rem rgba(46, 110, 238, .35), inset 0 .18rem 0 rgba(255, 255, 255, .5);
}
.btn-ghost {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 .4rem 1.2rem rgba(31, 87, 190, .12);
    color: var(--blue-3);
    height: 4.8rem;
    font-size: 1.7rem;
    border: .15rem solid #BBD8FB;
    text-shadow: none;
}
.btn-ghost::before, .btn-ghost::after { display: none; }
.btn-block { display: flex; width: 100%; }
.is-hidden { display: none !important; }
.btn[disabled], .btn.is-disabled {
    filter: grayscale(.55) opacity(.65);
    pointer-events: none;
}

.btn-arrow {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: .16rem solid rgba(255, 255, 255, .95);
    flex: 0 0 auto;
}
.btn-arrow::after {
    content: "";
    position: absolute;
    left: 42%;
    top: 50%;
    width: .72rem;
    height: .72rem;
    border-top: .17rem solid #fff;
    border-right: .17rem solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 首页 --------------------------------------------------------- */
.home-logo {
    position: absolute;
    left: 1.95rem;
    top: calc(1.8rem + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: .8rem;
    z-index: 6;
}
.home-logo img { width: 3.15rem; height: 3.2rem; display: block; }
.home-logo span {
    font-size: 1.72rem;
    font-weight: 700;
    color: #0B4BD6;
    letter-spacing: .04em;
    text-shadow: 0 .1rem .2rem rgba(255, 255, 255, .8);
}
.home-links {
    position: absolute;
    right: 1.25rem;
    top: calc(1.85rem + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: .8rem;
    z-index: 6;
}
.home-rule,
.home-link {
    height: 3.3rem;
    padding: 0 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    border: .16rem solid #fff;
    background: linear-gradient(180deg, #CDE5FF, #A9D2FD);
    color: #0B4BD6;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 .4rem 1rem rgba(23, 89, 190, .22);
}
.home-link {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 .3rem .8rem rgba(23, 89, 190, .16);
}
.home-rule:active,
.home-link:active { filter: brightness(.96); }
/* 窄屏（≤365px，含 360px 安卓）压缩顶栏与提示条，避免与 logo 重叠 / 文案换行 */
@media (max-width: 365px) {
    .home-links { right: .9rem; gap: .6rem; }
    .home-rule, .home-link { padding: 0 .95rem; font-size: 1.4rem; }
    .home-logo { left: 1.2rem; gap: .5rem; }
    .home-logo span { font-size: 1.5rem; }
    .pending-tip,
    .home-bottom.has-pending .pending-tip {
        max-width: 100%;
        padding: .9rem 1rem;
        gap: .6rem;
        font-size: 1.4rem;
    }
}

.home-wrap {
    padding-top: calc(6.35rem + env(safe-area-inset-top, 0px));
    text-align: center;
}
.home-title {
    display: block;
    width: 34.85rem;
    margin: 0 auto;
    max-width: 94%;
}

.home-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    z-index: 5;
}
.home-start { width: 20.7rem; height: 5.95rem; font-size: 2.3rem; }
.home-mascot {
    position: absolute;
    left: 4.1rem;
    bottom: calc(8.95rem + env(safe-area-inset-bottom, 0px));
    width: 29.95rem;
    z-index: 2;
    pointer-events: none;
}
.home-chance {
    font-size: 1.5rem;
    color: #12509E;
    background: rgba(255, 255, 255, .75);
    border-radius: 999px;
    padding: .5rem 1.6rem;
    font-weight: 600;
    box-shadow: 0 .3rem .8rem rgba(31, 87, 190, .12);
}
.home-chance b { color: var(--pink-3); font-size: 1.8rem; }

/* 页面标题图 --------------------------------------------------- */
.page-title {
    display: block;
    margin: calc(2.4rem + env(safe-area-inset-top, 0px)) auto 0;
    max-width: 76%;
}

/* 卡片 --------------------------------------------------------- */
.card {
    background: rgba(255, 255, 255, .96);
    border-radius: 2.8rem;
    box-shadow: 0 .6rem 2rem rgba(31, 87, 190, .18);
    padding: 2.6rem 2.2rem;
}

/* 规则页 ------------------------------------------------------- */
.rule-wrap {
    padding: 0 2rem;
    margin-top: 1.2rem;
}
.rule-list {
    margin: 0;
    padding: 2.8rem 2.4rem;
    list-style: none;
    counter-reset: rule;
    border-radius: 2.6rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(237, 246, 255, .96));
    box-shadow: 0 .8rem 2.4rem rgba(31, 87, 190, .16), inset 0 0 0 .15rem rgba(255, 255, 255, .9);
    max-height: 68vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.rule-list li {
    position: relative;
    counter-increment: rule;
    padding: .95rem 0 .95rem 3.2rem;
    font-size: 1.62rem;
    line-height: 1.68;
    color: #17408F;
    border-bottom: .1rem dashed #D7E6FB;
}
.rule-list li:last-child { border-bottom: 0; }
.rule-list li::before {
    content: counter(rule) ".";
    position: absolute;
    left: 0;
    top: .95rem;
    width: 2.4rem;
    font-weight: 700;
    color: #5B93E8;
}
.rule-list li b { color: var(--pink-3); }
.rule-actions {
    padding: 2.4rem 2rem calc(4rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: center;
}
.rule-actions .btn { width: 20.7rem; height: 5.95rem; font-size: 2.3rem; }

/* 任务地图 ----------------------------------------------------- */
.map-wrap { padding: 0 0 calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
.map-title { display: block; width: 26.6rem; margin: calc(1.6rem + env(safe-area-inset-top, 0px)) auto 0; }
.map-nodes { position: relative; width: 37.5rem; max-width: 100%; height: 49.55rem; margin: 0 auto; }
.map-illust {
    position: absolute;
    left: 6.05rem;
    top: 17.25rem;
    width: 15.1rem;
    z-index: 0;
    pointer-events: none;
}
.map-node {
    position: absolute;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
    transition: transform .15s ease, filter .25s ease;
}
.map-node img { display: block; width: 100%; height: auto; }
.map-node:active { transform: scale(.975); }
.map-node.n1 { left: 2.95rem; top: 0; width: 30.75rem; }
.map-node.n2 { left: 6.75rem; top: 23.6rem; width: 25.05rem; }
.map-node.n3 { left: 4.1rem; top: 38.45rem; width: 30.9rem; }
.map-node.is-locked { filter: saturate(.42) brightness(1.03); cursor: not-allowed; }
.map-node.is-current.n1 { animation: mapFloat 2.6s ease-in-out infinite; }
.map-tip {
    margin: 1rem auto 0;
    width: 33.5rem;
    max-width: 90%;
    text-align: center;
    font-size: 1.55rem;
    color: #2C5FA8;
    background: rgba(255, 255, 255, .76);
    border-radius: 999px;
    padding: .8rem 1.6rem;
    box-sizing: border-box;
}
@keyframes mapFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-.6rem); }
}

/* 答题页 ------------------------------------------------------- */
.quiz-head {
    padding: calc(2.6rem + env(safe-area-inset-top, 0px)) 2rem 0;
    text-align: center;
}
.stage-pill {
    display: inline-block;
    height: 3.8rem;
    line-height: 3.8rem;
    padding: 0 2.6rem;
    border-radius: 999px;
    background: url("../img/stage-pill.png") no-repeat center / 100% 100%;
    color: #12399A;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}
.quiz-counter {
    margin-top: 1rem;
    font-size: 1.65rem;
    font-weight: 700;
    color: #14459F;
    letter-spacing: .05em;
}
.progress {
    position: relative;
    width: 28.6rem;
    max-width: 84%;
    height: 1.95rem;
    margin: 1.2rem auto 0;
    border-radius: 999px;
    background: url("../img/progress-track.png") no-repeat center / 100% 100%;
    overflow: hidden;
}
.progress i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: url("../img/progress-fill.png") no-repeat left center / auto 100%;
    transition: width .45s cubic-bezier(.22, .8, .3, 1);
    min-width: 1.95rem;
}

.quiz-body { padding: 2.6rem 2rem calc(4rem + env(safe-area-inset-bottom, 0px)); }
.q-card {
    position: relative;
    border-radius: 2.6rem;
    padding: 3.6rem 2.6rem 3rem;
    background: linear-gradient(180deg, #FFFFFF, #F5FAFF);
    box-shadow: 0 1rem 2.6rem rgba(31, 87, 190, .16), inset 0 0 0 .18rem rgba(255, 255, 255, .9);
}
.q-title {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.62;
    color: #0B44C8;
    text-align: center;
    letter-spacing: .02em;
    margin: 0 0 2.6rem;
}
.q-scene {
    display: block;
    width: 100%;
    border-radius: 2rem;
    margin-bottom: 2rem;
}
.q-options { display: flex; flex-direction: column; gap: 1.9rem; }

.opt {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
    min-height: 6.4rem;
    padding: 1.2rem 2rem;
    border: 0;
    border-radius: 1.9rem;
    background: linear-gradient(180deg, #FFFFFF, #F0F7FF);
    box-shadow: inset 0 0 0 .16rem #D7E8FD, 0 .35rem 1rem rgba(31, 87, 190, .09);
    text-align: left;
    font-family: var(--font);
    font-size: 1.85rem;
    font-weight: 600;
    color: #17408F;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease;
}
.opt:active { transform: scale(.985); }
.opt.is-picked {
    box-shadow: inset 0 0 0 .22rem var(--blue-2), 0 .5rem 1.4rem rgba(46, 110, 238, .22);
    background: linear-gradient(180deg, #F2F8FF, #E2EFFF);
}
.opt .opt-key {
    flex: 0 0 auto;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #EAF3FF, #D3E7FE);
    box-shadow: inset 0 0 0 .16rem #CBE1FC;
    color: var(--blue-2);
    font-size: 2.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.opt .opt-text { flex: 1; line-height: 1.5; }
.opt .opt-thumb {
    flex: 0 0 auto;
    width: 11rem;
    border-radius: 1.2rem;
    display: block;
}

/* 判断题按钮 */
.judge-group { display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1rem; }.judge {
    border: 0;
    padding: 0;
    background: no-repeat center / 100% 100%;
    height: 5.75rem;
    width: 80%;
    font-family: var(--font);
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .3em;
    text-indent: .3em;
    text-shadow: 0 .2rem .5rem rgba(120, 20, 60, .3);
    cursor: pointer;
    transition: transform .12s ease;
    margin: 0 auto;
}
.judge:active { transform: scale(.97); }
.judge-false { background-image: url("../img/btn-false.png"); }
.judge-truth { background-image: url("../img/btn-truth.png"); }
.judge.is-picked { filter: brightness(1.08) drop-shadow(0 0 .8rem rgba(69, 131, 253, .7)); }

/* 情景题选项（图 + 文） */
.scene-grid { display: flex; flex-direction: column; gap: 1.8rem; }
.scene-opt {
    display: block;
    width: 100%;
    border: 0;
    padding: 1.2rem;
    border-radius: 2rem;
    background: linear-gradient(180deg, #FFFFFF, #F0F7FF);
    box-shadow: inset 0 0 0 .16rem #D7E8FD, 0 .4rem 1.2rem rgba(31, 87, 190, .1);
    text-align: left;
    font-family: var(--font);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease;
}
.scene-opt:active { transform: scale(.985); }
.scene-opt.is-picked {
    box-shadow: inset 0 0 0 .22rem var(--blue-2), 0 .6rem 1.6rem rgba(46, 110, 238, .24);
    background: linear-gradient(180deg, #F2F8FF, #E2EFFF);
}
.scene-opt img {
    display: block;
    width: 100%;
    border-radius: 1.4rem;
    margin-bottom: 1.1rem;
    background: #EAF3FE;
}
.scene-opt .so-line {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}
.scene-opt .so-key {
    flex: 0 0 auto;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #EAF3FF, #D3E7FE);
    box-shadow: inset 0 0 0 .16rem #CBE1FC;
    color: var(--blue-2);
    font-size: 1.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scene-opt .so-text {
    flex: 1;
    font-size: 1.72rem;
    font-weight: 600;
    line-height: 1.55;
    color: #17408F;
    padding-top: .35rem;
}

/* 答题反馈弹层 ------------------------------------------------- */
.feedback {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}
.feedback.show { display: flex; animation: yjFade .22s ease both; }
.feedback .fb-mask {
    position: absolute;
    inset: 0;
    background: rgba(38, 62, 96, .62);
    backdrop-filter: blur(2px);
}
.fb-card {
    position: relative;
    width: 100%;
    max-width: 34rem;
    border-radius: 2.8rem;
    background: #fff;
    padding: 5.4rem 2.4rem 2.6rem;
    box-shadow: 0 1.6rem 4rem rgba(10, 40, 90, .3);
    animation: yjPop .3s cubic-bezier(.2, .9, .3, 1.2) both;
    max-height: 88vh;
    /* overflow-y: auto; */
}
.fb-badge {
    position: absolute;
    left: 50%;
    top: -5.4rem;
    transform: translateX(-50%);
    width: 10rem;
    height: 10rem;
    background: no-repeat center / contain;
}
.fb-title {
    text-align: center;
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 1.8rem;
}
.fb-title.ok { color: #35C42C; text-shadow: 0 .2rem 0 #CDF3CB; }
.fb-title.no { color: #F2503F; text-shadow: 0 .2rem 0 #FBD9D4; }
.fb-analysis {
    position: relative;
    background: linear-gradient(180deg, #EEF6FF, #E3F0FE);
    border-radius: 1.8rem;
    padding: 3.4rem 1.8rem 1.8rem;
}
.fb-analysis .fb-tag {
    position: absolute;
    top: .9rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.65rem;
    font-weight: 800;
    color: #2F7BF2;
    white-space: nowrap;
}
.fb-analysis .fb-tag::before { content: "\1F4A1"; margin-right: .4rem; }
.fb-analysis p {
    margin: 0;
    font-size: 1.62rem;
    line-height: 1.72;
    color: #1B3F79;
}
.fb-right {
    margin: 0 0 .9rem;
    font-size: 1.62rem;
    font-weight: 800;
    color: #35A62C;
}
.fb-actions { margin-top: 2.2rem; }
.fb-actions .btn { width: 100%; height: 5.6rem; font-size: 2.1rem; }

/* 结果页 ------------------------------------------------------- */
.result-wrap {
    padding: calc(2rem + env(safe-area-inset-top, 0px)) 2rem calc(4rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
}
.result-title { display: block; width: 78%; margin: 0 auto; }
.result-score {
    position: relative;
    margin: 2.4rem auto 0;
    max-width: 25.6rem;
    height: 6.75rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFFFFF, #EAF4FF);
    box-shadow: inset 0 0 0 .18rem #C6E0FD, 0 .6rem 1.6rem rgba(31, 87, 190, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    font-size: 2.2rem;
    font-weight: 800;
    color: #12399A;
}
.result-score b { color: var(--pink-3); font-size: 3.2rem; font-style: normal; }
.result-scene { display: block; width: 78%; margin: 1.6rem auto 0; }
.result-info {
    margin-top: 1.6rem;
    display: inline-flex;
    flex-direction: column;
    gap: .8rem;
    align-items: center;
    font-size: 1.7rem;
    color: #16408F;
    background: rgba(255, 255, 255, .82);
    border-radius: 1.8rem;
    padding: 1.4rem 2.2rem;
    box-shadow: 0 .4rem 1.2rem rgba(31, 87, 190, .12);
}
.result-info .hl { color: var(--pink-3); font-weight: 800; }
.result-actions {
    margin-top: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}
.result-actions .btn { width: 19.7rem; height: 5.7rem; font-size: 2.1rem; }
.result-actions .btn-ghost {
    width: auto;
    max-width: 100%;
    height: 5rem;
    font-size: 1.7rem;
    letter-spacing: .06em;
    padding: 0 2.6rem;
}

/* 抽奖页 ------------------------------------------------------- */
.lottery-wrap {
    padding: 0 2rem calc(4rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
}
.lottery-title { display: block; width: 82%; margin: calc(1.6rem + env(safe-area-inset-top, 0px)) auto 0; }
.lottery-sub {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.4rem;
    padding: .7rem 2rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #7FB6FE, #4B8DF7);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    box-shadow: 0 .4rem 1.2rem rgba(46, 110, 238, .3);
}
.lottery-sub::before, .lottery-sub::after { content: "\2726"; font-size: 1.3rem; opacity: .9; }

.wheel-stage { position: relative; width: 31.55rem; max-width: 88vw; margin: 2.6rem auto 0; aspect-ratio: 1 / 1; }
.wheel-disc {
    position: absolute;
    inset: 0;
    background: url("../img/wheel-disc.png") no-repeat center / contain;
    transition: transform 5.2s cubic-bezier(.15, .85, .2, 1);
    will-change: transform;
}
.wheel-items { position: absolute; inset: 0; }
.wheel-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
}
.wheel-item .wi-inner {
    position: absolute;
    transform: translate(-50%, -50%);
}
.wheel-item img { display: block; width: 100%; }
.wheel-item .wi-text {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #2A55B8;
    letter-spacing: .18em;
    white-space: nowrap;
}
.wheel-item.is-prize .wi-inner { width: 5.6rem; }
.wheel-item.is-none .wi-inner {
    width: 7.2rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #34568F;
    text-align: center;
    line-height: 1.1;
}
.wheel-item.is-none .wi-text { color: #34568F; }
.wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9.05rem;
    transform: translate(-50%, -52%);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 5;
    animation: yjPulse 2.2s ease-in-out infinite;
}
.wheel-center img { display: block; width: 100%; }
.wheel-center[disabled] { animation: none; }

.lottery-actions { margin-top: 3rem; display: flex; justify-content: center; }
.lottery-actions .btn { width: 19.7rem; height: 5.7rem; font-size: 2.1rem; }
.lottery-note {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    color: #2C5FA8;
    background: rgba(255, 255, 255, .75);
    border-radius: 999px;
    padding: .7rem 1.6rem;
    display: inline-block;
}

/* 弹窗（抽奖结果） --------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 2.6rem;
}
.modal.show { display: flex; }
.modal .modal-mask { position: absolute; inset: 0; background: rgba(30, 52, 86, .62); }
.modal-card {
    position: relative;
    width: 100%;
    max-width: 32rem;
    border-radius: 2.8rem;
    background: #fff;
    padding: 3.4rem 2.4rem 2.8rem;
    text-align: center;
    box-shadow: 0 1.6rem 4rem rgba(10, 40, 90, .3);
    animation: yjPop .3s cubic-bezier(.2, .9, .3, 1.2) both;
    max-height: 88vh;
    overflow-y: auto;
}
.modal-close {
    position: absolute;
    right: 1.4rem;
    top: 1.4rem;
    width: 3.2rem;
    height: 3.2rem;
    border: 0;
    background: #EAF1FB;
    border-radius: 50%;
    color: #7A93B8;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
}
.modal-emoji { font-size: 5.4rem; line-height: 1; }
.modal-title { font-size: 2.5rem; font-weight: 900; margin: 1rem 0 .6rem; }
.modal-title.win { color: var(--pink-3); }
.modal-title.lose { color: #5C7BA8; }
.modal-text { font-size: 1.62rem; line-height: 1.7; color: #41618F; }
.modal-prize-img { width: 12rem; margin: 1.2rem auto .4rem; display: block; }
.modal-prize-name { font-size: 1.9rem; font-weight: 800; color: #12399A; }
.modal-actions { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.modal-actions .btn { width: 100%; height: 5.2rem; font-size: 1.9rem; }

/* 表单 --------------------------------------------------------- */
.form-item { text-align: left; margin-bottom: 1.4rem; }
.form-item label { display: block; font-size: 1.5rem; font-weight: 700; color: #41618F; margin-bottom: .6rem; }
.form-item input,
.form-item select,
.form-item textarea {
    width: 100%;
    border: .16rem solid #D7E8FD;
    background: #F6FAFF;
    border-radius: 1.3rem;
    padding: 1.2rem 1.4rem;
    font-size: 1.7rem;
    font-family: var(--font);
    color: #17408F;
    outline: none;
    transition: border-color .18s ease, background .18s ease;
}
.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus { border-color: var(--blue-2); background: #fff; }
.form-item textarea { min-height: 8rem; resize: vertical; }

/* 所在地区：地市 / 区县 两级联动 ------------------------------- */
/* 弹窗表单可用宽仅 274px@375（234px@320），5 字占位 + 9 字区县名放不下，
   因此地市列压到 8.8rem 只容纳 3 字（市名与占位文案），
   剩余宽度全给区县列，保证「连山壮族瑶族自治县」在 320px 屏仍完整可见 */
.region-row { display: flex; gap: 1rem; }
.region-row .region-col { position: relative; min-width: 0; }
.region-row .region-col.is-city { flex: 0 0 45%; }
.region-row .region-col.is-district { flex: 1 1 auto; }
.region-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding-right: 2.3rem;   /* 只留出箭头位置，省下的宽度给文字 */
    text-overflow: ellipsis;
}
.region-row .region-col::after {
    content: '';
    position: absolute;
    right: 1.4rem;
    top: 50%;
    width: .78rem;
    height: .78rem;
    margin-top: -.58rem;
    border-right: .2rem solid #7C9EC9;
    border-bottom: .2rem solid #7C9EC9;
    transform: rotate(45deg);
    pointer-events: none;
}
.region-row select.is-empty,
.region-row select:disabled { color: #8FA9CC; }

/* 收货信息弹窗：压缩纵向高度，主流机型（≥667px）可一屏提交 */
#yjAddrModal .modal-card { padding: 2.6rem 2.2rem 2.2rem; }
#yjAddrModal .modal-title { font-size: 2.25rem; margin: .8rem 0 .4rem; }
#yjAddrModal .modal-text { font-size: 1.5rem; }
#yjAddrModal .form-item { margin-bottom: 1rem; }
#yjAddrModal .form-item input,
#yjAddrModal .form-item select,
#yjAddrModal .form-item textarea { padding: 1rem 1.3rem; font-size: 1.6rem; }
#yjAddrModal .region-row select { padding: 1rem 2.3rem 1rem 1.3rem; font-size: 1.5rem; }
#yjAddrModal .form-item textarea { min-height: 5.6rem; }
#yjAddrModal .modal-actions { margin-top: 1.4rem; }
#yjAddrModal .modal-actions .btn { height: 4.8rem; font-size: 1.8rem; }

/* 奖品列表 ----------------------------------------------------- */
.prize-list { padding: 0 2rem calc(4rem + env(safe-area-inset-bottom, 0px)); margin-top: 1.6rem; }
.prize-item {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    background: rgba(255, 255, 255, .95);
    border-radius: 2rem;
    padding: 1.6rem;
    box-shadow: 0 .5rem 1.6rem rgba(31, 87, 190, .14);
    margin-bottom: 1.4rem;
}
.prize-item img { width: 9rem; height: 9rem; object-fit: contain; flex: 0 0 auto; }
.prize-item .pi-name { font-size: 1.95rem; font-weight: 800; color: #12399A; }
.prize-item .pi-meta { font-size: 1.45rem; color: #6B87AC; margin-top: .5rem; line-height: 1.6; }
.prize-item .pi-status {
    display: inline-block;
    margin-top: .7rem;
    font-size: 1.4rem;
    padding: .25rem 1rem;
    border-radius: 999px;
    background: #E8F1FE;
    color: #3A7BE0;
    font-weight: 700;
}
.prize-item .pi-status.wait { background: #FFF0E4; color: #E47B18; }
.prize-item .pi-status.done { background: #E4F7E3; color: #2FA326; }
.prize-item .pi-actions { margin-top: 1.1rem; }
.prize-item .pi-btn {
    width: auto;
    min-width: 13.6rem;
    height: 4.2rem;
    padding: 0 1.8rem;
    font-size: 1.6rem;
}
.prize-empty { text-align: center; color: #51749F; font-size: 1.65rem; padding: 6rem 0; }

/* 「待填写收货信息」常驻入口 ----------------------------------- */
/* 中奖后若误关填写弹窗，用户可从这里随时重新打开 */
.pending-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100%;
    max-width: 32rem;
    margin: 2rem auto 0;
    padding: 1.2rem 1.4rem;
    border: .16rem solid #FFD8A3;
    border-radius: 1.6rem;
    background: linear-gradient(180deg, #FFFAF0, #FFEDD2);
    color: #A85C12;
    font-family: inherit;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 .6rem 1.6rem rgba(198, 118, 20, .18);
    animation: yjPulseSoft 2.4s ease-in-out infinite;
}
.pending-tip .pt-icon { font-size: 1.9rem; line-height: 1; }
.pending-tip .pt-text { flex: 1 1 auto; white-space: nowrap; }
.pending-tip .pt-go {
    flex: 0 0 auto;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: #FF9C2E;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
}
.pending-tip:active { transform: scale(.98); }
/* 首页出现该入口时，整体下移，避免过度遮挡吉祥物 */
.home-bottom.has-pending { bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
.home-bottom.has-pending .pending-tip { max-width: 30rem; padding: 1rem 1.2rem; font-size: 1.5rem; }
.home-bottom.has-pending .home-start { height: 5.4rem; font-size: 2.1rem; }
@keyframes yjPulseSoft {
    0%, 100% { box-shadow: 0 .6rem 1.6rem rgba(198, 118, 20, .18); }
    50% { box-shadow: 0 .6rem 2.1rem rgba(255, 156, 46, .42); }
}

/* 提示 --------------------------------------------------------- */
.yj-toast {
    position: fixed;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 120;
    max-width: 76vw;
    padding: 1.4rem 2.2rem;
    border-radius: 1.4rem;
    background: rgba(24, 42, 70, .88);
    color: #fff;
    font-size: 1.65rem;
    line-height: 1.55;
    text-align: center;
    display: none;
    animation: yjFade .2s ease both;
}
.yj-toast.show { display: block; }

.yj-loading {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(20, 40, 70, .28);
}
.yj-loading.show { display: flex; }
.yj-loading .spin {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    border: .5rem solid rgba(255, 255, 255, .55);
    border-top-color: var(--pink-2);
    animation: yjSpin .8s linear infinite;
}

/* 说明弹层（活动规则弹窗 / 通用） ------------------------------ */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
}
.sheet.show { display: block; }
.sheet .sheet-mask { position: absolute; inset: 0; background: rgba(30, 52, 86, .55); }
.sheet-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 34rem);
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 2.6rem;
    padding: 2.8rem 2.2rem;
    animation: yjPop .28s cubic-bezier(.2, .9, .3, 1.2) both;
}
.sheet-title { font-size: 2.3rem; font-weight: 900; color: #12399A; text-align: center; margin: 0 0 1.6rem; }

/* 状态页 ------------------------------------------------------- */
.state-page {
    min-height: 76vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
    padding: 0 3rem;
    text-align: center;
}
.state-page img { width: 40%; max-width: 18rem; }
.state-page h2 { font-size: 2.4rem; color: #12399A; margin: 0; }
.state-page p { font-size: 1.7rem; color: #2F5A9B; line-height: 1.7; margin: 0; }

/* 动画 --------------------------------------------------------- */
@keyframes yjFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yjPop { from { opacity: 0; transform: translateY(2rem) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes yjSpin { to { transform: rotate(360deg); } }
@keyframes yjPulse { 0%, 100% { transform: translate(-50%, -52%) scale(1); } 50% { transform: translate(-50%, -52%) scale(1.045); } }
@keyframes yjShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.5rem); } 75% { transform: translateX(.5rem); } }
.shake { animation: yjShake .3s ease 2; }

/* 弹层内的居中修正 */
.feedback .fb-card, .modal .modal-card { position: relative; }

/* 小屏适配 */
@media (max-height: 640px) {
    .rule-list { max-height: 60vh; }
    .fb-card { max-height: 84vh; }
}