*{box-sizing:border-box;margin:0;padding:0}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body,html{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:none;
    background:#2f0a3e;
    font-family:-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
}

/* ===== Stage ===== */
.stage{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    position:relative;
    overflow-x:hidden;
    overflow-y:auto;
    background:url('../image/bg2.webp') no-repeat center/cover;
    perspective:none;
}
#fast-stage{
    background:transparent !important;
}

/* ===== 背景循环 ===== */
.dynamic-background{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    z-index:0;
    transition:opacity 1s ease;
}
.slide{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    opacity:0;
    background:no-repeat center top/cover;
    background-size:cover;
    animation-duration:32s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.slide:nth-child(1){background-image:url('../image/000.webp');animation-name:anim-1}
.slide:nth-child(2){background-image:url('../image/001.webp');animation-name:anim-2}
.slide:nth-child(3){background-image:url('../image/002.webp');animation-name:anim-3}
.slide:nth-child(4){background-image:url('../image/003.webp');animation-name:anim-4}
.slide:nth-child(5){background-image:url('../image/004.webp');animation-name:anim-5}
.slide:nth-child(6){background-image:url('../image/003.webp');animation-name:anim-6}
.slide:nth-child(7){background-image:url('../image/002.webp');animation-name:anim-7}
.slide:nth-child(8){background-image:url('../image/001.webp');animation-name:anim-8}

@keyframes anim-1{0%,7%{opacity:1}12.5%,93%{opacity:0}100%{opacity:1}}
@keyframes anim-2{0%,5.5%{opacity:0}12.5%,19.5%{opacity:1}25%,100%{opacity:0}}
@keyframes anim-3{0%,18%{opacity:0}25%,32%{opacity:1}37.5%,100%{opacity:0}}
@keyframes anim-4{0%,30.5%{opacity:0}37.5%,44.5%{opacity:1}50%,100%{opacity:0}}
@keyframes anim-5{0%,43%{opacity:0}50%,57%{opacity:1}62.5%,100%{opacity:0}}
@keyframes anim-6{0%,55.5%{opacity:0}62.5%,69.5%{opacity:1}75%,100%{opacity:0}}
@keyframes anim-7{0%,68%{opacity:0}75%,82%{opacity:1}87.5%,100%{opacity:0}}
@keyframes anim-8{0%,80.5%{opacity:0}87.5%,94.5%{opacity:1}100%{opacity:0}}

@media (orientation: landscape) and (min-width: 768px) {
    .slide { background-size: auto 100%; }
}

.ui-overlay{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    z-index:10;
}

/* ===== STEP1 路线选择 ===== */
#step1-ui{
    width:100%;height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    padding-bottom:8dvh;
    transition:opacity 1.5s ease;
}

.button-composite{
    width:75vw;
    max-width:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    position:relative;
    transform-origin:bottom center;
}

@media (max-height: 700px) { .button-composite { transform: scale(0.9); } }
@media (max-height: 600px) { .button-composite { transform: scale(0.82); } }
@media (max-height: 500px) { .button-composite { transform: scale(0.75); } }

.button-composite>img:first-child{
    width:80%;height:auto;
}
.buttons-container{
    width:100%;
    margin-top:10px;
    position:relative;
    height:180px;
}
.image-button{
    cursor:pointer;
    transition:all 0.3s ease;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
    position:absolute;
    width:40%;
}
#btn1 { bottom:0; left:50%; transform:translateX(-50%); }
#btn2 { top:10%; left:15%; transform:translateX(-50%); }
#btn3 { top:10%; right:15%; transform:translateX(50%); }
.image-button:hover { filter:brightness(1.15); }
.image-button:active { filter:brightness(0.9); }

#btn3:hover { filter:brightness(1.15); }
#btn3:active { filter:brightness(0.9); }

/* ===== 快速旋转牌阵 ===== */
.fast-circle-container{
    position:absolute;
    top:55%;left:50%;
    transform:translate(-50%,-50%);
    width:350px;height:350px;
    z-index:10;
    pointer-events:none;
    opacity:0;
    transition:opacity 2s ease;
}
.fast-circle-ring{
    width:100%;height:100%;
    position:relative;
    animation:ringSpin 12s linear infinite;
}
@keyframes ringSpin{
    from{transform:rotateY(0deg) rotateX(45deg)}
    to{transform:rotateY(360deg) rotateX(45deg)}
}
.fast-ring-card{
    position:absolute;
    width:60px;
    top:50%;left:50%;
    transform-origin:0 0;
    opacity:0;
    transition:opacity 0.5s ease;
}
.fast-ring-card.show{
    opacity:0.85;
}
.fast-ring-card img{
    width:100%;display:block;
    border-radius:3px;
    backface-visibility:hidden;
}

/* ===== STEP2 快速抽牌区 ===== */
#step2-ui{
    display:block;
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    background:url('../image/bg2.webp') no-repeat center top/cover;
    opacity:1;
    transition:opacity 2s ease;
}

.desk-layer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url("../image/desk.webp");
    background-size:contain;
    background-position:center bottom;
    background-repeat:no-repeat;
    z-index:1;
    pointer-events:none;
    transition:filter 1.2s ease,opacity 1.2s ease;
}
.desk-layer.dimmed{
    filter:brightness(0.18) saturate(0.5);
}
/* 对话框打开时，背景进一步变暗（只影响desk层及以下） */
.desk-layer.dialog-dimmed{
    filter:brightness(0.06) saturate(0.3) !important;
    transition:filter 1s ease;
}
/* 对话框打开时，星空/宇宙背景也变暗 */
body.dialog-open .universe-bg,
body.dialog-open #galaxy-bg,
body.dialog-open #star-sphere{
    opacity:0.15 !important;
    transition:opacity 1s ease;
}

#star-bg{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    z-index:2;
    pointer-events:none;
}

.fast-text-box{
    position:absolute;
    top:18%;
    left:50%;
    transform:translate(-50%,-50%);
    width:85%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    z-index:20;
}

.fast-line{
    color:#fff;
    font-size:1.1rem;
    font-weight:bold;
    letter-spacing:0.12rem;
    text-align:center;
    text-shadow:0 0 10px rgba(191,149,255,.6);
    opacity:0;
    transform:translateY(8px);
    transition:all 1.5s ease;
}
.fast-line.show{
    opacity:1;
    transform:translateY(0);
}

.fast-card-deck{
    position:absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100px;
    height:auto;
    z-index:10;
    cursor:grab;
    transition:all 0.6s ease;
}
.fast-card-deck:active{
    cursor:grabbing;
}
@keyframes deckShake{
    0%,100%{transform:translate(-50%,-50%) rotate(0deg)}
    25%{transform:translate(-50%,-50%) rotate(-8deg)}
    50%{transform:translate(-50%,-50%) rotate(8deg)}
    75%{transform:translate(-50%,-50%) rotate(-5deg)}
}
.fast-deck-img{
    width:100%;
    display:block;
    pointer-events:none;
}

.card-pick-area{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    z-index:5;
    pointer-events:none;
}

/* 散布的可选牌 */
.pick-card{
    position:absolute;
    width:60px;
    cursor:pointer;
    pointer-events:auto;
    z-index:50;
    opacity:0;
    transition:all 0.8s cubic-bezier(0.22,1,0.36,1);
}
.pick-card.appear{
    opacity:1;
}
.pick-card img{
    width:100%;
    display:block;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.pick-card:hover{
    transform:translate(-50%,-50%) scale(1.15) !important;
    z-index:60;
}
.pick-card.selected{
    transform:translate(-50%,-50%) scale(1.2) !important;
    box-shadow:0 0 20px rgba(191,149,255,0.6);
    filter:brightness(1.3);
}
.pick-card.dim{
    opacity:0.25;
    pointer-events:none;
}

.shuffle-progress-container{
    position:absolute;
    left:50%;
    bottom:22%;
    transform:translateX(-50%);
    width:60%;
    height:4px;
    background:rgba(255,255,255,0.1);
    border-radius:10px;
    overflow:hidden;
    backdrop-filter:blur(5px);
    border:1px solid rgba(255,255,255,0.05);
    opacity:0;
    transition:opacity 1s ease;
    z-index:200;
    pointer-events:none;
}
.shuffle-progress-container.show{
    opacity:1;
}
#shuffle-progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(90deg, rgba(191,149,255,0.2), rgba(191,149,255,0.8));
    box-shadow:0 0 10px rgba(191,149,255,0.5);
    transition:width 0.3s ease-out;
}

.pick-hint{
    position:absolute;
    bottom:10%;
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,255,255,0.7);
    font-size:0.9rem;
    text-align:center;
    z-index:200;
    opacity:0;
    transition:opacity 0.8s ease;
    pointer-events:none;
    text-shadow:0 0 8px rgba(191,149,255,0.4);
}
.pick-hint.show{
    opacity:1;
}

/* ===== STEP3 翻牌结果 ===== */
#step3-ui{
    display:none;
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    opacity:0;
    transition:opacity 1s ease;
}

.picked-cards-display{
    position:absolute;
    top:30%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    gap:8px;
    z-index:30;
}
.result-card{
    width:70px;
    cursor:default;
    position:relative;
    perspective:600px;
}
.result-card-inner{
    width:100%;
    height:auto;
    position:relative;
    transition:transform 1s ease;
    transform-style:preserve-3d;
}
.result-card.flipped .result-card-inner{
    transform:rotateY(180deg);
}
.result-card-front,
.result-card-back{
    width:100%;
    backface-visibility:hidden;
}
.result-card-front{
    position:absolute;
    top:0;left:0;
}
.result-card-front img{
    width:100%;
    display:block;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.result-card-back{
    transform:rotateY(180deg);
    background:linear-gradient(135deg, #2a1040, #1a0530);
    border-radius:4px;
    width:100%;
    padding-bottom:140%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(191,149,255,0.3);
}
.result-card-name{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotateY(180deg);
    color:#ffd700;
    font-size:0.7rem;
    text-align:center;
    font-weight:bold;
    text-shadow:0 0 6px rgba(255,215,0,0.4);
}

.result-hint{
    position:absolute;
    bottom:15%;
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,255,255,0.6);
    font-size:0.85rem;
    text-align:center;
    z-index:200;
    opacity:0;
    transition:opacity 0.8s ease;
}

/* ===== 对话框背景遮罩 + 滚动锁定 ===== */
html.dialog-open{
    overflow:hidden !important;
    touch-action:none !important;
    transform:none !important;
    -webkit-transform:none !important;
	overscroll-behavior:none !important;
}
body.dialog-open{
    overflow:hidden !important;
    position:fixed !important;
    width:100% !important;
    height:100% !important;
    touch-action:none !important;
    transform:none !important;
    -webkit-transform:none !important;
	overscroll-behavior:none !important;
}
body.dialog-open .stage{
    overflow:hidden !important;
    touch-action:none !important;
	overscroll-behavior:none !important;
}
body.dialog-open .dialog-panel{
    touch-action:none !important;
	overscroll-behavior:none !important;
}
/* 支付弹窗允许全部触摸交互 */
body.dialog-open .pay-overlay.show,
body.dialog-open .pay-overlay.show *{
    touch-action:auto !important;
}
/* 遮罩层 */
.dialog-overlay{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(8,2,20,0.70);
    z-index:9000;
    display:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:none;
}
.dialog-overlay.show{
    display:block;
}

/* ===== 对话面板 (WhatsApp风格) ===== */
.dialog-panel{
    position:fixed;
    bottom:0;left:0;
    width:100%;
    height:70%;
    background:#efeae2;
    border-radius:20px 20px 0 0;
    z-index:10002;
    opacity:0;
    transform:translateY(100%);
    transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility:hidden;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    overscroll-behavior:contain;
}
.dialog-panel.show{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
}
/* 底部解锁遮罩 */
.dialog-unlock-overlay{
    position:absolute;
    bottom:0;left:0;
    width:100%;
    z-index:100;
    pointer-events:none;
    display:none;
    background:linear-gradient(to bottom, transparent 0, #efeae2 120px);
    padding-top:120px;
}
.dialog-unlock-overlay.show{
    display:block;
}
.dialog-unlock-btn-wrap{
    display:flex;
    justify-content:center;
    padding:0 0 24px;
    pointer-events:none;
}
.dialog-unlock-btn{
    display:block;
    width:auto;
    padding:8px 28px;
    background:transparent;
    color:#4a90d9;
    border:1.5px solid #4a90d9;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    pointer-events:auto;
    touch-action:auto !important;
    transition:background 0.2s, color 0.2s;
}
.dialog-unlock-btn:active{
    background:#4a90d9;
    color:#fff;
}

.dialog-header{
    display:flex;
    align-items:center;
    padding:10px 14px;
    background:#f0f0f0;
    border-bottom:1px solid rgba(0,0,0,0.08);
    border-radius:20px 20px 0 0;
    flex-shrink:0;
}
.dialog-avatar{
    width:32px;height:32px;
    border-radius:50%;
    object-fit:cover;
    margin-right:10px;
}
.dialog-header-name{
    font-size:14px;
    font-weight:600;
    color:#333;
}

.dialog-body{
    flex:1;
    overflow-y:auto;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y !important;
    padding:10px 14px 80px 14px;
	
}
/* 对话框打开时，dialog-body切换为JS手动滚动，禁用原生滚动 */
.dialog-body.js-scroll{
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:auto !important;
	overscroll-behavior:none !important;
}

.dialog-bubble{
    max-width:80%;
    margin-bottom:8px;
    padding:10px 14px;
    border-radius:8px;
    font-size:13px;
    line-height:1.6;
    animation:bubbleIn 0.4s ease-out;
}
@keyframes bubbleIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}
.dialog-bubble.from-guide{
    background:#fff;
    color:#333;
    margin-right:auto;
    border-radius:8px 8px 8px 0;
    border:1px solid rgba(0,0,0,0.06);
}
.dialog-bubble.from-user{
    background:#dcf8c6;
    color:#333;
    margin-left:auto;
    text-align:right;
    border-radius:8px 8px 0 8px;
}
.dialog-bubble.hook{
    background:linear-gradient(135deg, #1a0a2e, #2f0a3e) !important;
    color:#ffd700 !important;
    border:1px solid rgba(255,215,0,0.3) !important;
    border-radius:8px 8px 8px 0 !important;
    margin-right:auto !important;
    box-shadow:0 0 20px rgba(255,215,0,0.2);
    animation:bubbleIn 0.6s ease-out;
}
.dialog-bubble.keyword{
    background:transparent;
    border:none;
    padding:0 14px;
    margin:2px 0;
}
.dialog-bubble.keyword .kw{
    display:inline-block;
    color:#b8860b;
    font-weight:bold;
    font-size:13px;
}
/* Stage 1: 情绪气泡与关键词高亮 */
.dialog-bubble.emotion{
    background:linear-gradient(135deg, #f8f0ff, #f0e6ff);
    color:#2a1a3a;
    border:1px solid rgba(180,150,220,0.25);
    border-radius:8px 8px 8px 0;
    margin-right:auto;
    line-height:1.7;
    font-size:13.5px;
}
.emotion-kw{
    display:inline-block;
    color:#7c3aed;
    font-weight:600;
    background:rgba(124,58,237,0.08);
    padding:1px 6px;
    border-radius:4px;
    border-bottom:2px solid rgba(124,58,237,0.25);
}
/* 牌面解读气泡 */
.dialog-bubble.card-intro{
    background:linear-gradient(135deg, #1a0a2e, #2d1548);
    color:#e8d5ff;
    border:1px solid rgba(180,130,255,0.3);
    border-radius:8px 8px 8px 0;
    margin-right:auto;
    line-height:1.8;
    font-size:13.5px;
    white-space:pre-line;
    box-shadow:0 0 20px rgba(120,50,200,0.2);
}
.dialog-bubble.card-intro .emotion-kw{
    color:#ffd700;
    background:rgba(255,215,0,0.1);
    border-bottom:2px solid rgba(255,215,0,0.3);
}
.dialog-bubble.fragment{
    border-left:2px solid rgba(191,149,255,0.4);
    padding-left:12px !important;
}
.dialog-bubble.hook2{
    background:linear-gradient(135deg, #0a1a30, #1a2a40) !important;
    color:#7eb8ff !important;
    border:1px solid rgba(100,180,255,0.3) !important;
    border-radius:8px 8px 8px 0 !important;
    margin-right:auto !important;
    box-shadow:0 0 20px rgba(100,180,255,0.15);
    animation:bubbleIn 0.8s ease-out;
}

/* Action button inside bubble */
.dialog-bubble .action-btn{
    display:block;
    margin:8px auto 0;
    padding:10px 20px;
    background:linear-gradient(135deg, #ffd700, #ffb700);
    color:#1a0a2e;
    border:none;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    text-align:center;
    letter-spacing:0.5px;
    box-shadow:0 4px 15px rgba(255,215,0,0.3);
    transition:all 0.3s ease;
}
.dialog-bubble .action-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,215,0,0.5);
}

.dialog-input-bar{
    height:40px;
    background:#f0f0f0;
    border-top:1px solid rgba(0,0,0,0.06);
    display:flex;
    align-items:center;
    padding:0 14px;
    flex-shrink:0;
}
.dialog-input-placeholder{
    color:rgba(0,0,0,0.3);
    font-size:12px;
}

.dialog-dots{
    display:flex;
    gap:4px;
    padding:4px 0;
}
.dialog-dots span{
    width:6px;height:6px;
    border-radius:50%;
    background:rgba(0,0,0,0.2);
    animation:dotPulse 1.2s infinite ease-in-out;
}
.dialog-dots span:nth-child(2){animation-delay:0.2s}
.dialog-dots span:nth-child(3){animation-delay:0.4s}
@keyframes dotPulse{
    0%,80%,100%{transform:scale(0.6);opacity:0.3}
    40%{transform:scale(1);opacity:0.8}
}

/* ===== 支付弹窗 ===== */
.pay-overlay{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:radial-gradient(ellipse at center, rgba(8,3,25,0.72) 0%, rgba(0,0,0,0.82) 100%);
    backdrop-filter:blur(16px) saturate(1.2);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    z-index:9999999;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:opacity 0.8s ease;
    pointer-events:none;
    overflow:hidden;
}
.pay-overlay.show{
    opacity:1;
    pointer-events:auto;
    touch-action:auto;
}
.pay-light-beam{
    position:absolute;
    top:-15%;left:50%;
    transform:translateX(-50%);
    width:320px;height:75%;
    background:linear-gradient(180deg,
        rgba(255,215,0,0) 0%,rgba(255,215,0,0.08) 25%,
        rgba(255,215,0,0.25) 50%,rgba(255,215,0,0.08) 75%,
        rgba(255,215,0,0) 100%);
    filter:blur(50px);
    animation:lightPulse 4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes lightPulse{
    0%,100%{opacity:0.5}
    50%{opacity:1}
}

/* 背景浮动光点 */
.pay-bg-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}
.pay-bg-particles span{
    position:absolute;
    display:block;
    width:2px;height:2px;
    background:rgba(255,255,255,0.25);
    border-radius:50%;
    box-shadow:0 0 6px 1px rgba(255,255,255,0.15);
    animation:particleFloat linear infinite;
}
.pay-bg-particles span:nth-child(1){left:10%;top:85%;animation-duration:12s;animation-delay:-2s;width:3px;height:3px;opacity:0.4}
.pay-bg-particles span:nth-child(2){left:25%;top:20%;animation-duration:18s;animation-delay:-5s;width:2px;height:2px;opacity:0.3}
.pay-bg-particles span:nth-child(3){left:40%;top:70%;animation-duration:14s;animation-delay:-8s;width:2.5px;height:2.5px;opacity:0.35}
.pay-bg-particles span:nth-child(4){left:55%;top:15%;animation-duration:20s;animation-delay:-3s;width:2px;height:2px;opacity:0.25}
.pay-bg-particles span:nth-child(5){left:70%;top:60%;animation-duration:16s;animation-delay:-10s;width:3px;height:3px;opacity:0.3}
.pay-bg-particles span:nth-child(6){left:82%;top:30%;animation-duration:22s;animation-delay:-6s;width:2px;height:2px;opacity:0.2}
.pay-bg-particles span:nth-child(7){left:15%;top:45%;animation-duration:15s;animation-delay:-12s;width:2px;height:2px;opacity:0.35}
.pay-bg-particles span:nth-child(8){left:90%;top:75%;animation-duration:19s;animation-delay:-4s;width:2.5px;height:2.5px;opacity:0.3}
.pay-bg-particles span:nth-child(9){left:35%;top:90%;animation-duration:13s;animation-delay:-7s;width:2px;height:2px;opacity:0.25}
.pay-bg-particles span:nth-child(10){left:60%;top:40%;animation-duration:17s;animation-delay:-9s;width:3px;height:3px;opacity:0.35}
.pay-bg-particles span:nth-child(11){left:5%;top:55%;animation-duration:21s;animation-delay:-1s;width:2px;height:2px;opacity:0.2}
.pay-bg-particles span:nth-child(12){left:48%;top:5%;animation-duration:11s;animation-delay:-11s;width:2.5px;height:2.5px;opacity:0.3}
@keyframes particleFloat{
    0%{transform:translateY(0) translateX(0);opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{transform:translateY(-100vh) translateX(20px);opacity:0}
}

.pay-modal{
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(40px) saturate(1.4);
    -webkit-backdrop-filter:blur(40px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:28px;
    padding:32px 28px 26px;
    width:90%;
    max-width:340px;
    text-align:center;
    transform:translateY(30px) scale(0.96);
    transition:all 0.7s cubic-bezier(0.22,1,0.36,1);
    position:relative;
    box-shadow:
        0 30px 70px rgba(0,0,0,0.45),
        inset 0 1px 1px rgba(255,255,255,0.08);
    overflow:hidden;
}
.pay-modal::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:28px;
    padding:1.2px;
    background:linear-gradient(180deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.04) 20%,
        transparent 50%,
        rgba(255,255,255,0.02) 80%,
        rgba(255,255,255,0.08) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.pay-modal::after{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:45%;
    border-radius:28px 28px 0 0;
    background:linear-gradient(180deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.02) 40%,
        transparent 100%);
    pointer-events:none;
}
.pay-overlay.show .pay-modal{
    transform:translateY(0) scale(1);
}

/* 顶部引导标签 */
.pay-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,215,0,0.08);
    border:1px solid rgba(255,215,0,0.15);
    border-radius:20px;
    padding:6px 16px;
    margin-bottom:18px;
    font-size:0.75rem;
    color:rgba(255,215,0,0.85);
    letter-spacing:0.5px;
    animation:badgeSlideIn 0.6s ease 0.2s both;
}
.pay-badge-icon{
    font-size:0.9rem;
    animation:iconSpin 3s linear infinite;
}
@keyframes badgeSlideIn{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes iconSpin{
    0%,100%{transform:rotate(0deg)}
    50%{transform:rotate(180deg)}
}

/* 情感文案区 */
.pay-emotional-text{
    margin-bottom:14px;
    animation:textFadeIn 0.6s ease 0.2s both;
}
@keyframes textFadeIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}


/* 分隔线 */
.pay-divider{
    width:60px;height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,215,0,0.5), transparent);
    margin:18px auto;
    animation:dividerGrow 0.6s ease 0.5s both;
}
@keyframes dividerGrow{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}

/* 价格区 */
.pay-price-container{
    margin:14px 0 40px;
    position:relative;
    animation:textFadeIn 0.6s ease 0.35s both;
}
.pay-price-glow{
    position:absolute;
    top:55%;left:50%;
    transform:translate(-50%,-50%);
    width:160px;height:160px;
    background:radial-gradient(circle, rgba(255,215,0,0.16) 0%, transparent 70%);
    filter:blur(30px);
    animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse{
    0%,100%{opacity:0.35}
    50%{opacity:0.8}
}
.pay-price-card{
    display:flex;
    align-items:stretch;
    justify-content:center;
    transform:skewX(-6deg);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
    animation:tagPop 0.5s ease 0.5s both;
    max-width:260px;
    margin:0 auto;
}
.pay-discount-side{
    background:linear-gradient(180deg, #e8b892, #c98e5e);
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:100px;
}
.pay-discount-label{
    font-size:1rem;
    letter-spacing:1px;
    color:#6b3f1f;
    text-transform:uppercase;
    font-weight:700;
    white-space:nowrap;
}
.pay-discount-value{
    font-size:2rem;
    font-weight:800;
    color:#4a2810;
    text-shadow:0 1px 0 rgba(255,255,255,0.35);
}
.pay-discount-off{
    font-size:0.85rem;
    font-weight:600;
    color:#6b3f1f;
    letter-spacing:2px;
    text-transform:uppercase;
}
.pay-price-side{
    background:linear-gradient(135deg, rgba(255,248,240,0.1), rgba(255,240,225,0.05));
    padding:12px 20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    border-left:1px dashed rgba(180,140,100,0.35);
    flex:1;
}
.pay-price-current{
    font-size:3.4rem;
    font-weight:800;
    color:#ffd700;
    letter-spacing:-1px;
    text-shadow:0 0 20px rgba(255,215,0,0.3);
    line-height:1;
}
.pay-price-original{
    color:rgba(255,255,255,0.35);
    font-size:1.2rem;
    text-decoration:line-through;
    text-decoration-color:rgba(255,107,107,0.5);
    margin-top:13px;
}
@keyframes tagPop{
    from{opacity:0;transform:skewX(-6deg) scale(0.9)}
    to{opacity:1;transform:skewX(-6deg) scale(1)}
}

/* CTA按钮 */
.pay-btn{
    background:linear-gradient(135deg, #ffd700 0%, #ffb700 50%, #ff9500 100%);
    color:#1a0a2e;
    border:none;
    padding:17px 28px;
    font-size:1rem;
    font-weight:600;
    border-radius:14px;
    cursor:pointer;
    width:100%;
    margin:0 0 14px 0;
    transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
    box-shadow:0 4px 20px rgba(255,183,0,0.3), 0 0 0 1px rgba(255,215,0,0.2);
    letter-spacing:0.3px;
    position:relative;
    overflow:hidden;
    animation:btnSlideUp 0.7s ease 0.65s both;
}
.pay-btn::after{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:100%;height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition:left 0.5s ease;
}
.pay-btn:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow:0 8px 30px rgba(255,183,0,0.45), 0 0 0 1px rgba(255,215,0,0.3);
}
.pay-btn:hover::after{
    left:100%;
}
.pay-btn:active{
    transform:translateY(0) scale(0.99);
}
.pay-btn:disabled{
    opacity:0.6;
    cursor:not-allowed;
    transform:none;
}
@keyframes btnSlideUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}

/* 信任背书 */
.pay-security{
    color:rgba(255,255,255,0.35);
    font-size:0.72rem;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    animation:textFadeIn 0.6s ease 0.8s both;
}
.pay-security span{
    display:flex;
    align-items:center;
    gap:4px;
}

/* 社交证明 */
.pay-social-proof{
    color:rgba(255,255,255,0.3);
    font-size:0.7rem;
    margin-bottom:14px;
    font-style:italic;
    animation:textFadeIn 0.6s ease 0.85s both;
}

/* 底部次要操作 */
.pay-later-btn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.4);
    padding:10px 24px;
    font-size:0.82rem;
    border-radius:20px;
    cursor:pointer;
    transition:all 0.3s ease;
    animation:textFadeIn 0.6s ease 0.5s both;
    margin-top:4px;
}
.pay-later-btn:hover{
    border-color:rgba(255,255,255,0.25);
    color:rgba(255,255,255,0.6);
}

/* ===== Footer ===== */
.site-footer{
    width:100%;
    padding:20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background:#1f072a;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.footer-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}
.footer-link{
    color:rgba(255,255,255,0.4);
    font-size:12px;
    text-decoration:none;
    transition:color 0.3s ease;
    letter-spacing:0.5px;
}
.footer-link:hover{ color:rgba(255,215,0,0.7); }
.footer-divider{
    color:rgba(255,255,255,0.15);
    font-size:12px;
    user-select:none;
}
.footer-company{
    color:rgba(255,255,255,0.2);
    font-size:10px;
    letter-spacing:1px;
    user-select:none;
}

/* 支付弹窗（script.js动态创建）在dialog-open时恢复触摸交互 */
#payment-overlay,
#payment-overlay *{
    touch-action:auto !important;
    pointer-events:auto !important;
}

/* ========== 选牌确认水晶按钮 ========== */
@keyframes fadeInBtns{
    from{opacity:0;transform:translateX(-50%) translateY(12px) scale(0.8);}
    to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
@keyframes crystalPulse{
    0%,100%{box-shadow:0 4px 16px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.1);}
    50%{box-shadow:0 4px 20px rgba(0,0,0,0.2),inset 0 1px 2px rgba(255,255,255,0.45),inset 0 -1px 1px rgba(0,0,0,0.08);}
}
/* 边缘光扫动 */
@keyframes edgeSweep{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
}
.crystal-btn::after{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:50%;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);
    background-size:200% 100%;
    animation:edgeSweep 3s ease-in-out infinite;
    pointer-events:none;
    z-index:-1;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    padding:2px;
}
.card-confirm-btns{
    animation:fadeInBtns 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.crystal-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.5);
    background:linear-gradient(145deg,rgba(255,255,255,0.32) 0%,rgba(255,255,255,0.06) 45%,rgba(255,255,255,0.18) 100%);
    backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    color:#fff;
    font-size:22px;
    font-weight:300;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.1);
    animation:crystalPulse 2.5s ease-in-out infinite;
    transition:all 0.2s ease;
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    padding:0;
    line-height:1;
    outline:none;
}
.crystal-btn:active{
    transform:scale(0.9);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(0,0,0,0.15);
    animation:none;
}
.crystal-ok{
    border-color:rgba(100,230,160,0.55);
    background:linear-gradient(145deg,rgba(100,230,160,0.35) 0%,rgba(60,200,110,0.1) 45%,rgba(100,230,160,0.25) 100%);
    text-shadow:0 0 10px rgba(100,230,160,0.7);
    color:rgba(200,255,220,0.95);
}
.crystal-ok:active{
    background:linear-gradient(145deg,rgba(100,230,160,0.5) 0%,rgba(60,200,110,0.3) 100%);
}
.crystal-cancel{
    border-color:rgba(210,180,240,0.45);
    background:linear-gradient(145deg,rgba(210,180,240,0.3) 0%,rgba(160,130,210,0.06) 45%,rgba(210,180,240,0.2) 100%);
    text-shadow:0 0 10px rgba(210,180,240,0.6);
    color:rgba(230,210,255,0.95);
}
.crystal-cancel:active{
    background:linear-gradient(145deg,rgba(210,180,240,0.45) 0%,rgba(160,130,210,0.25) 100%);
}
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}