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

:root {
    --u: calc(100vw / 1920);
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    background: #0b0704;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

button,
input {
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Design canvas 1920 x 5380 */
.container {
    width: calc(1920 * var(--u));
    height: calc(5380 * var(--u));
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.section {
    position: absolute;
    left: 0;
    width: calc(1920 * var(--u));
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.section-hero {
    top: 0;
    height: calc(1040 * var(--u));
    z-index: 1;
    background-image: url("../img/pc/hero-bg3.webp");
}

.section-main {
    top: calc(52 * var(--u));
    height: calc(4893 * var(--u));
    z-index: 2;
    background-image: url("../img/pc/main-bg.webp");
    pointer-events: none;
}

.section-footer {
    top: calc(4945 * var(--u));
    height: calc(435 * var(--u));
    z-index: 3;
    background-image: url("../img/pc/footer.webp");
}

.hotspot,
.layer,
.phone-form,
.agreement-row,
.class-stage,
.class-icons,
.milestone-board,
.milestone-user-num,
.feature-stage,
.feature-dots,
.footer-links {
    position: absolute;
    z-index: 10;
}

.hotspot,
.phone-form,
.agreement-row,
.class-icons,
.feature-stage,
.feature-dots,
.footer-links,
button,
input {
    pointer-events: auto;
}

.hotspot {
    z-index: 20;
    cursor: pointer;
    display: block;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.layer {
    display: block;
    pointer-events: none;
}

.pulse-btn {
    animation: pulseScale 1.5s ease-in-out infinite;
}

@keyframes pulseScale {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

/* ===== Hero ===== */
.play-btn {
    left: calc(909 * var(--u));
    top: calc(498 * var(--u));
    width: calc(101 * var(--u));
    height: calc(100 * var(--u));
    background-image: url("../img/pc/play-btn.webp");
}

.hero-book-btn {
    left: calc(565 * var(--u));
    top: calc(584 * var(--u));
    width: calc(788 * var(--u));
    height: calc(209 * var(--u));
    background-image: url("../img/pc/book-btn.webp");
    overflow: hidden;
}

.hero-store-ios {
    left: calc(574 * var(--u));
    top: calc(812 * var(--u));
    width: calc(382 * var(--u));
    height: calc(85 * var(--u));
    background-image: url("../img/pc/apple-btn.webp");
    overflow: hidden;
}

.hero-store-gp {
    left: calc(964 * var(--u));
    top: calc(812 * var(--u));
    width: calc(382 * var(--u));
    height: calc(85 * var(--u));
    background-image: url("../img/pc/google-btn.webp");
    overflow: hidden;
}

/* 共用同一套扫光，保证相位同步 */
.hero-book-btn::after,
.hero-store-ios::after,
.hero-store-gp::after,
.step2-ios-btn::after,
.step2-gp-btn::after,
.step3-fb-btn::after,
.step3-discord-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.15) 46%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.15) 54%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: 120% 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    animation: submitBtnSweep 1.6s linear infinite;
}

.hero-book-btn::after {
    -webkit-mask-image: url("../img/pc/book-btn.webp");
    mask-image: url("../img/pc/book-btn.webp");
}

.hero-store-ios::after {
    -webkit-mask-image: url("../img/pc/apple-btn.webp");
    mask-image: url("../img/pc/apple-btn.webp");
}

.hero-store-gp::after {
    -webkit-mask-image: url("../img/pc/google-btn.webp");
    mask-image: url("../img/pc/google-btn.webp");
}

.step2-ios-btn::after {
    -webkit-mask-image: url("../img/pc/step2-ios.webp");
    mask-image: url("../img/pc/step2-ios.webp");
}

.step2-gp-btn::after {
    -webkit-mask-image: url("../img/pc/step2-gp.webp");
    mask-image: url("../img/pc/step2-gp.webp");
}

.step3-fb-btn::after {
    -webkit-mask-image: url("../img/pc/btn-fb.webp");
    mask-image: url("../img/pc/btn-fb.webp");
}

.step3-discord-btn::after {
    -webkit-mask-image: url("../img/pc/btn-discord.webp");
    mask-image: url("../img/pc/btn-discord.webp");
}

/* ===== Steps ===== */
.step1-panel {
    left: calc(279 * var(--u));
    top: calc(893 * var(--u));
    width: calc(676 * var(--u));
    height: calc(996 * var(--u));
}

.step2-panel {
    left: calc(987 * var(--u));
    top: calc(1001 * var(--u));
    width: calc(654 * var(--u));
    height: calc(434 * var(--u));
}

.step3-panel {
    left: calc(987 * var(--u));
    top: calc(1446 * var(--u));
    width: calc(654 * var(--u));
    height: calc(437 * var(--u));
}

.step1-input-bg {
    left: calc(336 * var(--u));
    top: calc(1369 * var(--u));
    width: calc(551 * var(--u));
    height: calc(66 * var(--u));
    z-index: 18;
}

.step1-zone-bg {
    left: calc(348 * var(--u));
    top: calc(1384 * var(--u));
    width: calc(100 * var(--u));
    height: calc(37 * var(--u));
    z-index: 19;
}

.step1-zone-code {
    left: calc(356 * var(--u));
    top: calc(1395 * var(--u));
    width: calc(82 * var(--u));
    height: calc(20 * var(--u));
    z-index: 20;
}

.step1-phone-hint {
    left: calc(485 * var(--u));
    top: calc(1388 * var(--u));
    width: calc(314 * var(--u));
    height: calc(29 * var(--u));
    z-index: 19;
    transition: opacity 0.15s;
}

.step1-phone-hint.is-hidden {
    opacity: 0;
}

.step1-hat-icon {
    left: calc(817 * var(--u));
    top: calc(1377 * var(--u));
    width: calc(62 * var(--u));
    height: calc(46 * var(--u));
    z-index: 20;
}

.phone-form {
    left: calc(478 * var(--u));
    top: calc(1369 * var(--u));
    width: calc(320 * var(--u));
    height: calc(66 * var(--u));
    z-index: 25;
    display: flex;
    align-items: center;
}

.phone-input {
    width: 100%;
    height: 100%;
    padding: 0 calc(8 * var(--u));
    font-size: calc(22 * var(--u));
    color: #5a2a10;
    caret-color: #c44a18;
}

.phone-input::placeholder {
    color: transparent;
}

.agreement-row {
    left: calc(418 * var(--u));
    top: calc(1460 * var(--u));
    width: calc(440 * var(--u));
    height: calc(50 * var(--u));
    z-index: 25;
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
}

.agreement-check {
    width: calc(39 * var(--u));
    height: calc(40 * var(--u));
    flex-shrink: 0;
    background: url("../img/pc/check-box.webp") center/contain no-repeat;
}

.agreement-check.is-checked {
    background-image: url("../img/pc/check-mark.webp"), url("../img/pc/check-box.webp");
}

.agreement-text {
    width: calc(346 * var(--u));
    height: calc(44 * var(--u));
    object-fit: contain;
    pointer-events: none;
}

.agreement-hit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.submit-btn {
    left: calc(409 * var(--u));
    top: calc(1759 * var(--u));
    width: calc(389 * var(--u));
    height: calc(96 * var(--u));
    background-image: url("../img/pc/submit-btn.webp");
    overflow: hidden;
}

.submit-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.15) 46%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.15) 54%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: 120% 0;
    -webkit-mask-image: url("../img/pc/submit-btn.webp");
    mask-image: url("../img/pc/submit-btn.webp");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    animation: submitBtnSweep 1.6s linear infinite;
}

@keyframes submitBtnSweep {
    0% {
        background-position: 120% 0;
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    85% {
        background-position: -20% 0;
        opacity: 0;
    }
    100% {
        background-position: -20% 0;
        opacity: 0;
    }
}

.step2-ios-btn {
    left: calc(1032 * var(--u));
    top: calc(1339 * var(--u));
    width: calc(282 * var(--u));
    height: calc(69 * var(--u));
    background-image: url("../img/pc/step2-ios.webp");
    overflow: hidden;
}

.step2-gp-btn {
    left: calc(1321 * var(--u));
    top: calc(1339 * var(--u));
    width: calc(282 * var(--u));
    height: calc(69 * var(--u));
    background-image: url("../img/pc/step2-gp.webp");
    overflow: hidden;
}

.step3-fb-btn {
    left: calc(1032 * var(--u));
    top: calc(1784 * var(--u));
    width: calc(282 * var(--u));
    height: calc(69 * var(--u));
    background-image: url("../img/pc/btn-fb.webp");
    overflow: hidden;
}

.step3-discord-btn {
    left: calc(1321 * var(--u));
    top: calc(1784 * var(--u));
    width: calc(282 * var(--u));
    height: calc(69 * var(--u));
    background-image: url("../img/pc/btn-discord.webp");
    overflow: hidden;
}

/* ===== Milestone ===== */
.title-milestone {
    left: calc(629 * var(--u));
    top: calc(1927 * var(--u));
    width: calc(657 * var(--u));
    height: calc(146 * var(--u));
}

.milestone-user-num {
    left: 50%;
    top: calc(2080 * var(--u));
    transform: translateX(-50%);
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12 * var(--u));
    white-space: nowrap;
    pointer-events: none;
}

.milestone-user-count {
    color: red;
    font-size: calc(35 * var(--u));
    font-weight: 600;
    line-height: 1;
    font-family: "Segoe UI", Tahoma, sans-serif;
    text-shadow: 0 calc(1 * var(--u)) 0 #fff8e8, 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(60, 20, 0, 0.35);
    transform: translateY(calc(-3 * var(--u)));
}

.milestone-user-label {
    height: calc(40 * var(--u));
    width: auto;
    display: block;
}

.milestone-board {
    left: 0;
    top: 0;
    width: calc(1920 * var(--u));
    height: calc(5380 * var(--u));
    z-index: 12;
    pointer-events: none;
}

.milestone-scroll {
    position: absolute;
    left: calc(174 * var(--u));
    top: calc(2088 * var(--u));
    width: calc(1537 * var(--u));
    height: calc(748 * var(--u));
}

.mile-path {
    position: absolute;
    left: calc(517 * var(--u));
    top: calc(2499 * var(--u));
    width: calc(974 * var(--u));
    height: calc(201 * var(--u));
}

.mile-path-done-clip {
    position: absolute;
    left: calc(517 * var(--u));
    top: calc(2499 * var(--u));
    height: calc(201 * var(--u));
    overflow: hidden;
    pointer-events: none;
    z-index: 13;
    width: 0;
}

.mile-path-done {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(974 * var(--u));
    height: calc(201 * var(--u));
    max-width: none;
}

.mile-node,
.mile-text {
    position: absolute;
}

.mile-100 {
    left: calc(1220 * var(--u));
    top: calc(2011 * var(--u));
    width: calc(463 * var(--u));
    height: calc(401 * var(--u));
    z-index: 13;
}

.mile-80 {
    left: calc(1138 * var(--u));
    top: calc(2211 * var(--u));
    width: calc(163 * var(--u));
    height: calc(179 * var(--u));
}

.mile-50 {
    left: calc(955 * var(--u));
    top: calc(2253 * var(--u));
    width: calc(164 * var(--u));
    height: calc(182 * var(--u));
}

.mile-30 {
    left: calc(776 * var(--u));
    top: calc(2311 * var(--u));
    width: calc(163 * var(--u));
    height: calc(181 * var(--u));
}

.mile-10 {
    left: calc(601 * var(--u));
    top: calc(2363 * var(--u));
    width: calc(163 * var(--u));
    height: calc(180 * var(--u));
}

.mile-welcome {
    left: calc(420 * var(--u));
    top: calc(2421 * var(--u));
    width: calc(162 * var(--u));
    height: calc(180 * var(--u));
}

.mile-text-100 {
    left: calc(1327 * var(--u));
    top: calc(2359 * var(--u));
    width: calc(242 * var(--u));
    height: calc(87 * var(--u));
}

.mile-text-80 {
    left: calc(1126 * var(--u));
    top: calc(2390 * var(--u));
    width: calc(158 * var(--u));
    height: calc(76 * var(--u));
}

.mile-text-50 {
    left: calc(955 * var(--u));
    top: calc(2434 * var(--u));
    width: calc(143 * var(--u));
    height: calc(76 * var(--u));
}

.mile-text-30 {
    left: calc(776 * var(--u));
    top: calc(2490 * var(--u));
    width: calc(170 * var(--u));
    height: calc(76 * var(--u));
}

.mile-text-10 {
    left: calc(601 * var(--u));
    top: calc(2540 * var(--u));
    width: calc(166 * var(--u));
    height: calc(61 * var(--u));
}

.mile-text-welcome {
    left: calc(422 * var(--u));
    top: calc(2594 * var(--u));
    width: calc(156 * var(--u));
    height: calc(44 * var(--u));
}

.mile-dot {
    position: absolute;
    z-index: 14;
    padding: 0;
    pointer-events: auto;
    cursor: pointer;
    background-color: transparent;
    background-image: url("../img/pc/dot-off.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.mile-dot.is-done {
    background-image: url("../img/pc/dot-done.webp");
}

.mile-dot-100 {
    left: calc(1484 * var(--u));
    top: calc(2500 * var(--u));
    width: calc(80 * var(--u));
    height: calc(81 * var(--u));
    background-image: url("../img/pc/dot-on.webp");
}

.mile-dot-100.is-done {
    background-image: url("../img/pc/dot-on.webp");
}

.mile-dot-80 {
    left: calc(1206 * var(--u));
    top: calc(2497 * var(--u));
    width: calc(44 * var(--u));
    height: calc(45 * var(--u));
}

.mile-dot-80.is-done {
    left: calc(1203 * var(--u));
    top: calc(2494 * var(--u));
    width: calc(50 * var(--u));
    height: calc(51 * var(--u));
}

.mile-dot-50 {
    left: calc(1019 * var(--u));
    top: calc(2521 * var(--u));
    width: calc(44 * var(--u));
    height: calc(45 * var(--u));
}

.mile-dot-50.is-done {
    left: calc(1016 * var(--u));
    top: calc(2518 * var(--u));
    width: calc(50 * var(--u));
    height: calc(51 * var(--u));
}

.mile-dot-30 {
    left: calc(839 * var(--u));
    top: calc(2568 * var(--u));
    width: calc(50 * var(--u));
    height: calc(51 * var(--u));
}

.mile-dot-10 {
    left: calc(659 * var(--u));
    top: calc(2621 * var(--u));
    width: calc(50 * var(--u));
    height: calc(51 * var(--u));
}

.mile-dot-welcome {
    left: calc(493 * var(--u));
    top: calc(2643 * var(--u));
    width: calc(50 * var(--u));
    height: calc(51 * var(--u));
}

/* ===== Class ===== */
.class-tree {
    left: 0;
    top: calc(2619 * var(--u));
    width: calc(419 * var(--u));
    height: calc(583 * var(--u));
    z-index: 11;
}

.title-class {
    left: calc(629 * var(--u));
    top: calc(2837 * var(--u));
    width: calc(657 * var(--u));
    height: calc(146 * var(--u));
}

.class-stage {
    left: 0;
    top: calc(3030 * var(--u));
    width: calc(1920 * var(--u));
    height: calc(720 * var(--u));
    z-index: 15;
    pointer-events: none;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.class-item {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.class-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.class-panel {
    position: absolute;
    left: calc(280 * var(--u));
    top: calc(7 * var(--u));
    width: calc(524 * var(--u));
    height: calc(659 * var(--u));
    object-fit: contain;
    object-position: left top;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.class-char-wrap {
    position: absolute;
    left: calc(765 * var(--u));
    top: calc(38 * var(--u));
    width: calc(500 * var(--u));
    height: calc(671 * var(--u));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: grab;
    touch-action: pan-y;
}

.class-char-wrap:active {
    cursor: grabbing;
}

.class-char {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.class-icons {
    left: calc(1423 * var(--u));
    top: calc(3097 * var(--u));
    width: calc(86 * var(--u));
    height: calc(500 * var(--u));
    z-index: 25;
}

.class-icon {
    position: absolute;
    left: 0;
    width: calc(86 * var(--u));
    height: calc(85 * var(--u));
    padding: 0;
    cursor: pointer;
}

.class-icon-1 {
    top: 0;
}

.class-icon-2 {
    top: calc(102 * var(--u));
}

.class-icon-3 {
    top: calc(203 * var(--u));
}

.class-icon-4 {
    top: calc(305 * var(--u));
}

.class-icon-5 {
    top: calc(405 * var(--u));
}

.class-icon-img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.class-icon-img-on {
    opacity: 0;
}

.class-icon-img-off {
    opacity: 1;
}

.class-icon.is-active .class-icon-img-on {
    opacity: 1;
}

.class-icon.is-active .class-icon-img-off {
    opacity: 0;
}

/* ===== Feature ===== */
.title-feature {
    left: calc(629 * var(--u));
    top: calc(3747 * var(--u));
    width: calc(657 * var(--u));
    height: calc(146 * var(--u));
    z-index: 16;
}

.feature-stage {
    left: calc(497 * var(--u));
    top: calc(4030 * var(--u));
    width: calc(911 * var(--u));
    height: calc(505 * var(--u));
    z-index: 14;
    overflow: hidden;
}

.feature-stage .swiper-wrapper,
.feature-stage .swiper-slide {
    width: 100%;
    height: 100%;
}

.feature-slide {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-dots {
    left: calc(800 * var(--u)) !important;
    top: calc(4566 * var(--u));
    width: calc(320 * var(--u)) !important;
    height: calc(34 * var(--u));
    z-index: 16;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(21 * var(--u));
}

.feature-dot {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    padding: 0;
    margin: 0 !important;
    border-radius: 0;
    opacity: 1;
    background-color: transparent;
    background-image: url("../img/pc/feature-dot-off.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.feature-dot.is-active {
    background-image: url("../img/pc/feature-dot-on.webp");
}

.feature-prev {
    left: calc(327 * var(--u));
    top: calc(4232 * var(--u));
    width: calc(112 * var(--u));
    height: calc(111 * var(--u));
    z-index: 30;
    background-image: url("../img/pc/nav-prev.webp");
}

.feature-next {
    left: calc(1481 * var(--u));
    top: calc(4232 * var(--u));
    width: calc(112 * var(--u));
    height: calc(111 * var(--u));
    z-index: 30;
    background-image: url("../img/pc/nav-next.webp");
}

/* ===== Footer =====
   pc/footer.webp 1920x435；链接在顶部文案行，三链不等宽 */
.footer-links {
    left: calc(654 * var(--u));
    top: calc(34 * var(--u));
    width: calc(618 * var(--u));
    height: calc(32 * var(--u));
    z-index: 25;
    display: flex;
}

.footer-link {
    height: 100%;
    cursor: pointer;
}

.footer-link:nth-child(1) {
    flex: 194;
}

.footer-link:nth-child(2) {
    flex: 272;
}

.footer-link:nth-child(3) {
    flex: 152;
}

/* ===== Dialogs ===== */
.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    padding: calc(24 * var(--u));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.dialog-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dialog-overlay .popup-card,
.dialog-overlay .popup-stack {
    opacity: 0;
    transform: translateY(calc(16 * var(--u))) scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.dialog-overlay.is-visible .popup-card,
.dialog-overlay.is-visible .popup-stack {
    opacity: 1;
    transform: none;
}

#agree-dialog {
    z-index: 10020;
}

/* 站内预告片播放器 — PC 接近全屏 */
#video-dialog {
    z-index: 10030;
    background: rgba(0, 0, 0, 0.92);
    padding: 2vh 1.5vw;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-player-panel {
    position: relative;
    width: min(100%, calc(92vh * 16 / 9));
    max-width: none;
    flex-shrink: 0;
}

.video-player-close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 44px;
    z-index: 2;
    cursor: pointer;
}

.video-player-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    padding-top: 0;
    background: #000;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.video-player-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.popup-card,
.popup-stack {
    position: relative;
    flex-shrink: 0;
}

.popup-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(678 * var(--u));
}

.popup-stack .popup-body {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.popup-img-btn,
.popup-phone-submit,
.popup-phone-close,
.popup-close-btn,
.popup-phone-agree {
    padding: 0;
    cursor: pointer;
}

.popup-img-btn img,
.popup-phone-submit img,
.popup-phone-close img,
.popup-close-btn img {
    display: block;
    width: 100%;
    height: auto;
}

.popup-phone {
    width: calc(750 * var(--u));
    height: calc(1080 * var(--u));
}

.popup-phone-bg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    object-fit: contain;
}

.popup-phone-close {
    position: absolute;
    right: 5.4%;
    top: 8.4%;
    width: 11.3333%;
    z-index: 4;
}

.popup-timer {
    position: absolute;
    left: 32.9333%;
    top: 24.5%;
    width: 34.1333%;
    height: 4.6296%;
    z-index: 3;
    pointer-events: none;
}

.popup-timer-bg {
    width: 100%;
    height: 100%;
    display: block;
}

.popup-timer-digits {
    position: absolute;
    inset: 0;
}

.popup-timer-pair i {
    position: absolute;
    top: 2%;
    width: 11.3281%;
    height: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 800;
    color: #fff4c8;
    font-size: calc(18 * var(--u));
    line-height: 1;
    text-shadow: 0 calc(1 * var(--u)) 0 #4a2208;
}

.popup-timer-pair i[data-digit="0"] { left: 1.5625%; }
.popup-timer-pair i[data-digit="1"] { left: 16.7969%; }
.popup-timer-pair i[data-digit="2"] { left: 36.7188%; }
.popup-timer-pair i[data-digit="3"] { left: 51.9531%; }
.popup-timer-pair i[data-digit="4"] { left: 71.4844%; }
.popup-timer-pair i[data-digit="5"] { left: 86.7188%; }

.popup-phone-form {
    position: absolute;
    left: 26.8667%;
    top: 42.2%;
    width: 47.0667%;
    height: 3.8889%;
    z-index: 3;
}

.popup-phone-input-bg {
    width: 100%;
    height: 100%;
    display: block;
}

.popup-phone-zone {
    position: absolute;
    left: 1.8%;
    top: 50%;
    width: 19.2635%;
    transform: translateY(-50%);
    pointer-events: none;
}

.popup-phone-input {
    position: absolute;
    left: 28%;
    top: 0;
    width: 70%;
    height: 100%;
    z-index: 2;
    font-size: calc(18 * var(--u));
    color: #5a2a10;
    caret-color: #c44a18;
}

.popup-phone-hint {
    position: absolute;
    left: 28%;
    top: 50%;
    width: 64.0227%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.15s;
}

.popup-phone-hint.is-hidden {
    opacity: 0;
}

.popup-phone-agree-row {
    position: absolute;
    left: 26.5%;
    top: 46.7%;
    width: 51%;
    height: 3.4%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.2%;
}

.popup-phone-agree {
    position: relative;
    width: calc(31 * var(--u));
    height: calc(27 * var(--u));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-phone-agree:not(.is-checked) {
    background: #efe0c0;
    border: calc(1 * var(--u)) solid #8b5a20;
    border-radius: calc(2 * var(--u));
}

.popup-phone-agree img {
    width: calc(31 * var(--u));
    height: auto;
    display: none;
}

.popup-phone-agree.is-checked img {
    display: block;
}

.popup-phone-agree-text {
    height: calc(32 * var(--u));
    width: auto;
    max-width: calc(242 * var(--u));
}

.popup-phone-submit {
    position: absolute;
    left: 25.9333%;
    top: 51.6%;
    width: 48.1333%;
    z-index: 3;
}

/* 奖品区域闪光星星 */
.popup-phone-stars {
    position: absolute;
    left: 18%;
    top: 58%;
    width: 64%;
    height: 28%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.popup-star {
    position: absolute;
    width: 8%;
    aspect-ratio: 1;
    background: url("../img/star.webp") center / contain no-repeat;
    opacity: 0;
    animation: popupStarTwinkle 2.4s ease-in-out infinite;
}

.popup-star-1 { left: 70%; top: 18%; width: 10%; animation-delay: 0s; }
.popup-star-2 { left: 22%; top: 8%; width: 7%; animation-delay: 0.35s; }
.popup-star-3 { left: 36%; top: 22%; width: 9%; animation-delay: 0.7s; }
.popup-star-4 { left: 14%; top: 48%; width: 6%; animation-delay: 1.05s; }
.popup-star-5 { left: 42%; top: 42%; width: 8%; animation-delay: 0.2s; }
.popup-star-6 { left: 58%; top: 12%; width: 11%; animation-delay: 0.9s; }
.popup-star-7 { left: 72%; top: 28%; width: 7%; animation-delay: 1.4s; }
.popup-star-8 { left: 68%; top: 52%; width: 9%; animation-delay: 0.55s; }
.popup-star-9 { left: 48%; top: 62%; width: 6%; animation-delay: 1.7s; }
.popup-star-10 { left: 28%; top: 68%; width: 8%; animation-delay: 1.15s; }

@keyframes popupStarTwinkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.35) rotate(0deg);
    }
    35% {
        opacity: 1;
        transform: scale(1) rotate(12deg);
    }
    55% {
        opacity: 0.85;
        transform: scale(0.9) rotate(20deg);
    }
    75% {
        opacity: 0;
        transform: scale(0.4) rotate(28deg);
    }
}

.popup-success-dual {
    display: flex;
}

.popup-success-single {
    display: none;
}

.popup-btn-row {
    display: flex;
    justify-content: center;
    gap: calc(16 * var(--u));
    width: 100%;
    margin-top: calc(8 * var(--u));
}

.popup-img-btn {
    display: block;
    width: calc(311 * var(--u));
    position: relative;
    overflow: hidden;
}

.popup-btn-row .popup-img-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.15) 46%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.15) 54%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: 120% 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    animation: submitBtnSweep 1.6s linear infinite;
}

.popup-btn-row .popup-img-btn[data-store="apple"]::after {
    -webkit-mask-image: url("../img/popup-btn-ios-sm.webp");
    mask-image: url("../img/popup-btn-ios-sm.webp");
}

.popup-btn-row .popup-img-btn[data-store="google"]::after {
    -webkit-mask-image: url("../img/popup-btn-gp-sm.webp");
    mask-image: url("../img/popup-btn-gp-sm.webp");
}

.popup-btn-wide {
    width: calc(444 * var(--u));
    margin-top: calc(8 * var(--u));
}

.popup-community {
    width: calc(678 * var(--u));
}

.popup-fail,
.popup-agree {
    width: calc(658 * var(--u));
}

.popup-close-btn {
    position: absolute;
    right: -7%;
    top: -0.5%;
    width: calc(77 * var(--u));
    z-index: 4;
}

.popup-community .popup-close-btn {
    right: -11%;
    top: 4.5%;
}