/* ========== 起名结果页全局 ========== */
.naming-page {
    min-height: 100vh;
    background-color: #6a0a0a;
    background-image: url('../images/bg.png');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding-bottom: 60px;
}

/* ========== 页面大标题 ========== */
.naming-page-title {
    text-align: center;
    font-size: 46px;
    font-family: "楷体", "KaiTi", "STKaiti", serif;
    font-weight: 700;
    letter-spacing: 8px;
    color: #e8c060;
    -webkit-text-fill-color: #e8c060;
    text-shadow:
        0 0 12px rgba(232, 180, 60, 0.9),
        0 0 30px rgba(200, 140, 20, 0.4),
        2px 2px 0 rgba(0, 0, 0, 0.85);
    padding: 32px 0 24px;
}

/* ========== 卡片网格 ========== */
.naming-cards-section {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px 0;
}

.naming-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 0;
}

/* ---- 单张卡片 ---- */
.name-card {
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 260px;
    padding: 0;
}

.name-card:hover {
    transform: translateY(-4px);
}

/* 锁定卡片 */
.name-card.locked {
    background: linear-gradient(160deg, #1a1008 0%, #0a0604 100%);
    border: 2px solid #4a3010;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.name-card.locked:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 12px rgba(180, 130, 0, 0.3);
}

/* 解锁卡片 */
.name-card.unlocked {
    background: linear-gradient(170deg, #1c1006 0%, #0e0804 60%, #1a1208 100%);
    border: 2px solid #7a5018;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

.name-card.unlocked:hover {
    border-color: #c9a227;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65), 0 0 16px rgba(200, 160, 0, 0.35);
}

.name-card.unlocked.selected {
    border-color: #f5d878;
    box-shadow: 0 0 22px rgba(200, 160, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* 最高分卡片：金色背景 + 发光 */
.name-card.top-score {
    background: linear-gradient(160deg, #c8960a 0%, #a07008 40%, #b88010 70%, #d4a020 100%);
    border: 2px solid #f5d878;
    box-shadow:
        0 0 0 1px rgba(245, 216, 120, 0.3),
        0 0 30px rgba(255, 200, 60, 0.8),
        0 0 60px rgba(220, 160, 20, 0.5),
        0 0 90px rgba(200, 130, 0, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.7);
    animation: top-card-glow 2.5s ease-in-out infinite;
    overflow: visible;
}

@keyframes top-card-glow {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(245, 216, 120, 0.2),
            0 0 20px rgba(255, 200, 60, 0.6),
            0 0 50px rgba(220, 160, 20, 0.35),
            0 4px 20px rgba(0, 0, 0, 0.7);
    }

    50% {
        box-shadow:
            0 0 0 2px rgba(245, 216, 120, 0.5),
            0 0 40px rgba(255, 220, 80, 0.95),
            0 0 80px rgba(240, 170, 20, 0.7),
            0 0 120px rgba(210, 140, 0, 0.4),
            0 4px 20px rgba(0, 0, 0, 0.7);
    }
}

/* 卡片内框 */
.name-card-inner {
    border-radius: 2px;
    padding: 10px 10px 12px;
    height: 100%;
    min-height: 256px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Inner border to simulate traditional frame */
    box-sizing: border-box;
}

/* 寓意标题 top-score 覆盖 */
.name-card.top-score .card-meaning-label {
    color: #5c2800;
}

/* 寓意摘要 top-score 覆盖 */
.name-card.top-score .card-summary {
    color: #4a2000;
}

/* 分隔线 top-score 覆盖 */
.name-card.top-score .card-divider {
    background: linear-gradient(to right, transparent, rgba(80, 40, 0, 0.5), transparent);
}

/* inner border top-score */
/* Inner decorative border for all cards */
.name-card.locked .name-card-inner {
    border: 1px solid rgba(80, 54, 14, 0.45);
}

.name-card.unlocked .name-card-inner,
.name-card.top-score .name-card-inner {
    border: 1px solid rgba(190, 150, 40, 0.35);
}

/* Gold radial glow behind top card content */
.name-card.top-score .name-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(255, 210, 80, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

/* Corner ornament lines */
.name-card-inner::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid transparent;
    pointer-events: none;
}

.name-card.unlocked .name-card-inner::after,
.name-card.top-score .name-card-inner::after {
    border-color: rgba(190, 150, 40, 0.18);
}

/* Seal icons top corners */
.card-seal-tl,
.card-seal-tr {
    position: absolute;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-family: "STKaiti", serif;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1;
    background: linear-gradient(135deg, #c0281a, #8a0808);
    border: 1px solid rgba(200, 130, 50, 0.6);
    color: #f5d090;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.card-seal-tl {
    left: 6px;
}

.card-seal-tr {
    right: 6px;
}

.name-card.locked .card-seal-tl,
.name-card.locked .card-seal-tr {
    background: linear-gradient(135deg, #4a2010, #2a1008);
    color: rgba(180, 120, 40, 0.5);
    border-color: rgba(120, 80, 20, 0.3);
}

/* 编号标签 */
.card-num-tag {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: rgba(200, 162, 50, 0.65);
    letter-spacing: 1px;
    font-family: "STKaiti", serif;
}

/* 锁图标 — 居中放大 */
.lock-icon {
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 10px rgba(180, 130, 0, 0.6));
    z-index: 2;
    pointer-events: none;
}

/* 虚化层 */
.card-locked-blur {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    filter: blur(5px);
    opacity: 0.5;
    user-select: none;
    pointer-events: none;
}

/* 卡片分隔线 */
.card-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200, 162, 50, 0.5), transparent);
    margin: 4px 0;
    flex-shrink: 0;
}

/* 卡片姓名 */
.card-name-text {
    font-size: 24px;
    font-family: "STKaiti", "KaiTi", serif;
    font-weight: bold;
    letter-spacing: 8px;
    margin: 10px 0 0;
    text-align: center;
}

.name-card.locked .card-name-text {
    color: rgba(180, 130, 30, 0.45);
}

.name-card.unlocked .card-name-text {
    color: #f0d880;
    text-shadow: 0 0 8px rgba(240, 210, 80, 0.4);
}

.name-card.top-score .card-name-text {
    color: #3a1800;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.15);
}

/* 寓意标题 */
.card-meaning-label {
    font-size: 16px;
    letter-spacing: 2px;
    color: rgba(200, 162, 50, 0.7);
    font-family: "STKaiti", serif;
    margin: 6px 0 2px;
}

.name-card.locked .card-meaning-label {
    color: rgba(140, 100, 20, 0.4);
}

/* 分数 */
.card-score-text {
    font-size: 14px;
    letter-spacing: 1px;
    font-family: "STKaiti", serif;
    margin: 0;
}

.name-card.locked .card-score-text {
    color: rgba(150, 110, 20, 0.45);
}

.name-card.unlocked .card-score-text {
    color: #c9a227;
}

.name-card.top-score .card-score-text {
    color: #3a1800;
    font-weight: bold;
}

/* 寓意摘要 */
.card-summary {
    font-size: 13px;
    color: rgba(200, 162, 50, 0.75);
    text-align: center;
    margin-top: 5px;
    line-height: 1.6;
    font-family: "STSong", "SimSun", serif;
    padding: 0 6px;
    flex: 1;
}

.name-card.locked .card-summary {
    color: rgba(120, 90, 20, 0.4);
}

/* 查看解析按钮（第一张） */
.card-view-btn {
    margin-top: 8px;
    padding: 4px 14px;
    background: linear-gradient(to bottom, #c0281a, #8a1008);
    border: 1px solid rgba(212, 150, 60, 0.4);
    border-radius: 14px;
    color: #ffd890;
    font-size: 11px;
    font-family: "STKaiti", serif;
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.card-view-btn:hover {
    opacity: 0.85;
}

/* 最高分角标 */
.top-badge {
    position: absolute;
    top: 6px;
    right: 32px;
    background: linear-gradient(to bottom, #8a1008, #5a0604);
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 9px;
    color: #ffd890;
    font-weight: bold;
    font-family: "STKaiti", serif;
    letter-spacing: 1px;
}

/* ========== 最高分卡片光芒效果 ========== */
.name-card.top-score .card-rays {
    position: absolute;
    inset: -80px;
    background: conic-gradient(from 0deg,
            transparent 0deg, rgba(255, 220, 80, 0.18) 2deg,
            transparent 4deg, transparent 14deg,
            rgba(255, 220, 80, 0.18) 16deg, transparent 18deg,
            transparent 28deg, rgba(255, 220, 80, 0.14) 30deg,
            transparent 32deg, transparent 42deg,
            rgba(255, 220, 80, 0.18) 44deg, transparent 46deg,
            transparent 56deg, rgba(255, 220, 80, 0.14) 58deg,
            transparent 60deg, transparent 70deg,
            rgba(255, 220, 80, 0.18) 72deg, transparent 74deg,
            transparent 84deg, rgba(255, 220, 80, 0.14) 86deg,
            transparent 88deg, transparent 98deg,
            rgba(255, 220, 80, 0.18) 100deg, transparent 102deg,
            transparent 112deg, rgba(255, 220, 80, 0.14) 114deg,
            transparent 116deg, transparent 126deg,
            rgba(255, 220, 80, 0.18) 128deg, transparent 130deg,
            transparent 140deg, rgba(255, 220, 80, 0.14) 142deg,
            transparent 144deg, transparent 154deg,
            rgba(255, 220, 80, 0.18) 156deg, transparent 158deg,
            transparent 168deg, rgba(255, 220, 80, 0.14) 170deg,
            transparent 172deg, transparent 182deg,
            rgba(255, 220, 80, 0.18) 184deg, transparent 186deg,
            transparent 196deg, rgba(255, 220, 80, 0.14) 198deg,
            transparent 200deg, transparent 210deg,
            rgba(255, 220, 80, 0.18) 212deg, transparent 214deg,
            transparent 224deg, rgba(255, 220, 80, 0.14) 226deg,
            transparent 228deg, transparent 238deg,
            rgba(255, 220, 80, 0.18) 240deg, transparent 242deg,
            transparent 252deg, rgba(255, 220, 80, 0.14) 254deg,
            transparent 256deg, transparent 266deg,
            rgba(255, 220, 80, 0.18) 268deg, transparent 270deg,
            transparent 280deg, rgba(255, 220, 80, 0.14) 282deg,
            transparent 284deg, transparent 294deg,
            rgba(255, 220, 80, 0.18) 296deg, transparent 298deg,
            transparent 308deg, rgba(255, 220, 80, 0.14) 310deg,
            transparent 312deg, transparent 322deg,
            rgba(255, 220, 80, 0.18) 324deg, transparent 326deg,
            transparent 336deg, rgba(255, 220, 80, 0.14) 338deg,
            transparent 340deg, transparent 350deg,
            rgba(255, 220, 80, 0.18) 352deg, transparent 354deg,
            transparent 360deg);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: rays-rotate 12s linear infinite;
    opacity: 1;
}

@keyframes rays-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.name-card.top-score .name-card-inner {
    position: relative;
    z-index: 1;
}

/* section-divider inside detail scroll */
.detail-scroll-body .section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0;
}

.detail-scroll-body .section-divider::before,
.detail-scroll-body .section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #b8943a 60%);
}

.detail-scroll-body .section-divider::after {
    background: linear-gradient(to left, transparent, #b8943a 60%);
}

.detail-scroll-body .section-divider span {
    font-size: 22px;
    font-family: "STKaiti", "KaiTi", serif;
    color: #6b1a00;
    letter-spacing: 4px;
    font-weight: bold;
}

.pay-toast {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 400px;
    height: 252px;
    background: url('../images/paywindow.png') center center / 100% 100% no-repeat;
    border: none;
    border-radius: 10px;
    padding: 0;
    z-index: 500;
    box-shadow: none;
    animation: toast-in 0.3s ease;
    overflow: hidden;
}

.pay-toast.active {
    display: block;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pay-toast-inner {
    position: static;
    height: 100%;
    background: transparent;
    padding: 14px 16px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pay-toast-close {
    position: absolute;
    top: 20px;
    right: 50px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #f0c84a, #c09008);
    border: 2px solid #8a6000;
    color: #3a1000;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s;
    line-height: 1;
}

.pay-toast-close:hover {
    opacity: 0.8;
}

.pay-toast h4 {
    font-size: 20px;
    font-family: "STKaiti", serif;
    color: #f0d880;
    letter-spacing: 2px;
    margin: 50px 0 0 85px;
}

.pay-toast p {
    font-size: 14px;
    color: rgba(200, 162, 50, 0.85);
    margin: -10px auto 0;
    padding: 0 40px;
    max-width: 300px;
    line-height: 1.5;
    text-align: center;
    font-family: "STSong", serif;
}

.pay-toast .pay-price {
    font-size: 24px;
    color: #e04030;
    font-weight: 900;
    text-align: center;
    margin: -15px 0 20px;
    font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "Songti SC", Arial, serif;
}

.pay-toast .pay-price span {
    font-size: 13px;
}

/* ========== 英文模式：内容锁进黑色区(0-160px)，按钮落红色区(160-252px) ==========
   背景图 paywindow.png 黑/红分界在弹窗 160px 处。中文版布局不动，仅覆盖英文版。 */
.pay-toast.en .pay-toast-inner {
    justify-content: flex-start;
    /* 不铺满全高，从顶部自然堆叠 */
    padding-top: 0;
}

.pay-toast.en h4 {
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin: 67px 30px 0;
    text-align: center;
    font-family: "Georgia", "Times New Roman", serif;
}

.pay-toast.en p {
    font-size: 12px;
    padding: 0 24px;
    margin: 10px auto 0;
    max-width: 320px;
    font-family: "Georgia", "Times New Roman", serif;
}

/* 英文版价格：清掉为中文精调的负 margin，落在黑色区底部(约130px)，不压红底 */
.pay-toast.en .pay-price {
    margin: 10px 0 0;
}

/* 英文版货币符号 $ 不宜过小（中文 ¥ 的 13px 用在 $ 上偏弱） */
.pay-toast.en .pay-price span {
    font-size: 8px;
}

/* 英文版按钮：推到红色区居中 */
.pay-toast.en .toast-pay-btn {
    margin-top: 25px;
    margin-left: 1px;
    align-self: center;
}

.toast-pay-btn {
    width: 50%;
    padding: 7px 0;
    background: linear-gradient(to bottom, #f0c84a, #c09008);
    border: none;
    border-radius: 16px;
    color: #3a1000;
    font-size: 13px;
    font-weight: bold;
    font-family: "STKaiti", serif;
    letter-spacing: 3px;
    cursor: pointer;
    margin: 0 0 20px 90px;
    transition: opacity 0.2s;
}

.toast-pay-btn:hover {
    opacity: 0.88;
}

/* ========== 支付弹窗（扫码） ========== */
.pay-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.pay-modal-overlay.active {
    display: flex;
}

.pay-modal {
    width: 680px;
    position: relative;
    background: url('../images/paypage2.jpg') center center / 100% 100% no-repeat;
    border: 3px solid #c9a227;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

.pay-modal-top-bar {
    height: 0;
    display: none;
}

.pay-modal-body {
    padding: 10px 40px 30px;
}

.pay-modal-close {
    position: absolute;
    top: 8px;
    right: -30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #f0c84a, #c09008);
    border: 2px solid #8a6000;
    color: #3a1000;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.pay-modal-title {
    text-align: center;
    font-size: 26px;
    font-family: "楷体", "KaiTi", "STKaiti", serif;
    font-weight: 700;
    letter-spacing: 4px;
    color: #e8c060;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
    margin-bottom: 6px;
}

.pay-modal-subtitle {
    text-align: center;
    font-size: 20px;
    color: #f5d878;
    letter-spacing: 2px;
    font-family: "STKaiti", serif;
    margin-top: 110px;
    margin-bottom: 4px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* 产品说明 */
.pay-product-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 14px;
}

.pay-product-item {
    text-align: center;
    font-size: 16px;
    font-family: "STKaiti", serif;
    color: #f5d878;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.pay-product-item::before {
    content: "◆ ";
    color: #f5d878;
    font-size: 12px;
}

.pay-desc-text {
    text-align: center;
    font-size: 18px;
    color: #f5d878;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 1px;
    font-family: "STSong", serif;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* 二维码区 */
.pay-qr-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

.pay-qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pay-qr-box {
    width: 140px;
    height: 140px;
    border: 3px solid #c9a227;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #888;
    position: relative;
    overflow: hidden;
}

.pay-qr-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pay-qr-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pay-qr-label {
    font-size: 15px;
    color: #f5d878;
    font-family: "STKaiti", serif;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* 倒计时提示条 */
.pay-countdown-bar {
    background: transparent;
    border-radius: 24px;
    padding: 10px 0;
    text-align: center;
    color: #fff8dc;
    font-size: 18px;
    font-family: "STKaiti", serif;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

.pay-countdown-bar .diamond {
    color: #f5d878;
    font-size: 10px;
}

.countdown-num {
    color: #fff200;
    font-weight: bold;
    font-size: 22px;
    font-family: serif;
    min-width: 40px;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 220, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 0.9);
}

.pay-modal-bottom-bar {
    height: 0;
    display: none;
}

/* ========== 详细解析区 ========== */
.detail-section {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-top: -60px;
    box-sizing: border-box;
}

.detail-scroll-wrap {
    position: relative;
    background-image: url('../images/scroll.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0;
    overflow: visible;

    /* scroll.png is 2316x902, so keep aspect ratio via padding trick */
    /* We'll use a min-height and let content overflow naturally */
}

.detail-scroll-top {
    height: 0;
    display: none;
}

.detail-scroll-body {
    /* 书卷图整体缩放到 1200px，左右轴辊各约 10%，右侧另有空白 */
    padding: 11% 25% 13% 10%;
    position: relative;
    z-index: 1;
}

/* ========== 命理总述（本命→缺→补），长文本 hover 展开 ========== */
.mingli-intro {
    border: 2px solid #dcb367;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0 16px;
    background: linear-gradient(160deg, #fffbef, #fff6dc);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mingli-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mingli-tag {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid #c9a227;
    border-radius: 14px;
    font-size: 13px;
    color: #6b1a00;
    background: rgba(200, 162, 50, 0.15);
    font-family: "STKaiti", "KaiTi", "FangSong", serif;
    letter-spacing: 1px;
}

.mingli-text {
    font-size: 13px;
    line-height: 1.65;
    color: #3a1a00;
    margin: 0;
    font-family: "STSong", "SimSun", serif;
    /* 默认最多 2 行，超出省略；hover 展开全部 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mingli-intro:hover .mingli-text {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(180, 130, 30, 0.4);
}

.detail-name-big {
    font-size: 48px;
    font-family: "STKaiti", "KaiTi", serif;
    color: #5c1800;
    letter-spacing: 8px;
    padding: 10px 33px;
    text-shadow: 0 1px 3px rgba(180, 130, 30, 0.3);
}

.detail-score-badge {
    padding: 6px 16px;
    background: linear-gradient(to bottom, #c0281a, #8a1008);
    border-radius: 20px;
    color: #ffd890;
    font-size: 14px;
    font-family: "STKaiti", serif;
    letter-spacing: 2px;
    box-shadow: 0 2px 8px rgba(120, 0, 0, 0.4);
}

.detail-columns-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 10px;
}

.detail-block {
    background: transparent;
    border: 2px solid #dcb367;
    border-radius: 8px;
    padding: 14px 12px 16px;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    /* overflow 必须 visible，否则浮层被裁掉 */
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.2s;
}

/* 内容区限高，而非整个卡片 */
.detail-block-content {
    max-height: 168px;
    overflow: hidden;
    flex: 1;
}

/* 悬停浮层：内容完整展示 */
.detail-block:hover .detail-block-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.detail-block-tooltip {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    background: linear-gradient(160deg, #fffbef, #fff8dc);
    border: 2px solid #c9a227;
    border-radius: 8px;
    padding: 14px 12px 16px;
    z-index: 200;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(200, 162, 50, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.detail-block-tooltip h4 {
    font-size: 15px;
    font-family: "STKaiti", "KaiTi", "FangSong", serif;
    color: #6b1a00;
    letter-spacing: 4px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.detail-block-tooltip h4::before {
    content: "◆";
    color: #dcb367;
    font-size: 9px;
    flex-shrink: 0;
}

.detail-block-tooltip h4::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(220, 179, 103, 0.6), transparent);
    margin-left: 4px;
}

.detail-block-tooltip p {
    font-size: 13px;
    line-height: 1.85;
    color: #3a1a00;
    font-family: "Songti SC", "STSong", "SimSun", serif;
    white-space: normal;
}

/* 内框 */
.detail-block-inner {
    border: 1px solid rgba(220, 179, 103, 0.45);
    border-radius: 6px;
    padding: 24px 14px 28px;
    height: 100%;
    min-height: 280px;
}

/* 兼容无 inner 包裹时直接用 detail-block 的 padding */
.detail-block>h4,
.detail-block>p {
    padding-left: 2px;
    padding-right: 2px;
}

.detail-block h4 {
    font-size: 20px;
    font-family: "STKaiti", "KaiTi", "FangSong", serif;
    color: #6b1a00;
    letter-spacing: 4px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    /* 分隔线样式同 card-divider */
    border-bottom: none;
    position: relative;
}

.detail-block h4::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(220, 179, 103, 0.6), transparent);
    margin-left: 4px;
}

.detail-block h4::before {
    content: "◆";
    color: #dcb367;
    font-size: 9px;
    flex-shrink: 0;
}

.detail-block-content p,
.detail-block>p {
    font-size: 13px;
    line-height: 1.75;
    color: #3a1a00;
    font-family: "Songti SC", "STSong", "SimSun", serif;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    flex: 1;
}

.detail-scroll-bottom {
    height: 0;
    display: none;
}

/* ========== 解锁成功动画 ========== */
@keyframes unlock-flash {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.unlock-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 200, 60, 0.25) 0%, transparent 70%);
    pointer-events: none;
    z-index: 999;
    animation: unlock-flash 1s ease forwards;
}

/* ========== 响应式适配 ========== */

/* 覆盖 style.css 的 min-width 限制 */
.naming-page {
    min-width: 0;
}

/* 平板（≤1280px）：卡片区收窄，5列保持但压缩 */
@media (max-width: 1280px) {
    .naming-cards-section {
        width: 100%;
        padding: 0 16px;
    }

    .detail-section {
        width: 100%;
        margin-left: 0;
        padding: 0 16px;
        margin-top: 24px;
    }

    .detail-scroll-wrap {
        background-image: none;
        background: rgba(245, 235, 210, 0.95);
        border: 3px solid #c9a227;
        border-radius: 8px;
    }

    .detail-scroll-body {
        padding: 24px 20px 28px;
    }
}

/* 平板竖屏（≤900px）：卡片改为3列 */
@media (max-width: 900px) {
    .naming-page-title {
        font-size: 28px;
        letter-spacing: 4px;
        padding: 20px 16px 16px;
    }

    .naming-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .name-card {
        min-height: 200px;
    }

    .name-card-inner {
        min-height: 196px;
    }

    .card-name-text {
        font-size: 20px;
        letter-spacing: 6px;
    }

    .detail-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-name-big {
        font-size: 36px;
        letter-spacing: 6px;
        padding: 8px 16px;
    }

    .pay-modal {
        width: 92vw;
    }
}

/* 手机（≤600px）：卡片改为2列 */
@media (max-width: 600px) {
    .naming-page-title {
        font-size: 22px;
        letter-spacing: 3px;
        padding: 16px 12px 12px;
    }

    .naming-cards-section {
        padding: 0 10px;
    }

    .naming-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .name-card {
        min-height: 170px;
    }

    .name-card-inner {
        min-height: 166px;
        padding: 8px 8px 10px;
    }

    .card-name-text {
        font-size: 18px;
        letter-spacing: 4px;
        margin: 6px 0 0;
    }

    .card-score-text {
        font-size: 11px;
    }

    .card-summary {
        font-size: 10px;
    }

    .detail-columns-4 {
        grid-template-columns: 1fr;
    }

    .detail-name-big {
        font-size: 28px;
        letter-spacing: 4px;
        padding: 6px 10px;
    }

    .detail-score-badge {
        font-size: 12px;
        padding: 4px 10px;
    }

    .detail-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pay-modal {
        width: 96vw;
    }

    .pay-modal-body {
        padding: 8px 16px 20px;
    }

    .pay-qr-row {
        gap: 16px;
    }

    .pay-qr-box {
        width: 110px;
        height: 110px;
    }

    .pay-toast {
        width: calc(100vw - 32px);
        right: 16px;
        left: 16px;
    }
}

/* ========== pay-toast 手机端补丁 ========== */
@media (max-width: 600px) {
    .pay-toast {
        height: auto;
        min-height: 0;
    }

    .pay-toast h4 {
        margin: 0 0 4px 0;
        font-size: 12px;
    }

    .toast-pay-btn {
        margin: 0;
        width: 80%;
        align-self: center;
    }

    .pay-toast-inner {
        padding: 12px 14px 10px;
    }
}

/* ========== 英文模式：拼音 + 英义 ========== */
.card-pinyin {
    font-size: 11px;
    color: rgba(200, 162, 50, 0.9);
    letter-spacing: 1px;
    font-family: "Georgia", "Times New Roman", serif;
    margin-top: 3px;
    text-align: center;
}

.name-card.top-score .card-pinyin {
    color: rgba(60, 30, 0, 0.75);
}

.card-meaning-en {
    font-size: 10px;
    color: rgba(200, 162, 50, 0.7);
    font-style: italic;
    font-family: "Georgia", serif;
    text-align: center;
    margin-top: 1px;
}

.name-card.top-score .card-meaning-en {
    color: rgba(60, 30, 0, 0.6);
}

/* ===== 支付渠道选择 ===== */
.pay-channel-row {
    display: flex;
    gap: 1px;
    justify-content: center;
    margin: -20px 0 10px;
}

.pay-channel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(232, 192, 96, .12);
    border: 1.5px solid #e8c060;
    border-radius: 10px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background .2s;
    min-width: 120px;
    color: #e8c060;
}

.pay-channel-btn:hover {
    background: rgba(232, 192, 96, .25);
}

.pay-channel-icon {
    font-size: 28px;
}

.pay-channel-label {
    font-size: 14px;
    font-weight: 600;
}

.pay-channel-sub {
    font-size: 13px;
    opacity: .8;
}

/* 图片式支付按钮 */
.pay-channel-img {
    width: 220px;
    max-width: 42vw;
    height: auto;
    cursor: pointer;
    background: none;
    border: none;
    transition: transform .15s ease;
    display: block;
}

.pay-channel-img:hover {
    transform: scale(1.05);
}

.pay-channel-img:active {
    transform: scale(1.0);
}

.pay-qr-loading {
    color: #e8c060;
    text-align: center;
    padding: 30px 0;
    letter-spacing: 2px;
}

.pay-qr-hint {
    text-align: center;
    color: #e8c060;
    margin-top: 10px;
    font-size: 13px;
}

.pay-back-btn {
    display: block;
    margin: 14px auto 0;
    background: none;
    border: 1px solid #e8c060;
    color: #e8c060;
    border-radius: 6px;
    padding: 6px 18px;
    cursor: pointer;
    font-size: 13px;
}

/* 付款弹窗：永久有效小字 */
.pay-lifetime-note {
    text-align: center;
    font-size: 17px;
    color: #f5d878;
    letter-spacing: 1px;
    margin-top: 4px;
    font-family: "STSong", serif;
}

/* 解锁成功提示浮层 */
.unlock-tip {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(to bottom, #2a7a3a, #1c5a28);
    color: #f5f0d8;
    padding: 12px 26px;
    border-radius: 24px;
    font-size: 15px;
    font-family: "STKaiti", serif;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
}

.unlock-tip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}