/* ===== 详情弹窗「×」关闭按钮的引导高亮（专属，强对比） =====
 * 背景：× 是一个无背景的半透明文字 div（.su-det-close，字号20px，
 *      color: rgba(255,255,255,0.65)），原先复用 guide-levelup5-highlight
 *      只有绿色 drop-shadow 光晕，在深色详情弹窗上几乎看不出高亮。
 *
 * 做法：_guideHighlight 会生成一个与原元素等大的 wrapper 并把 class 加在 wrapper 上，
 *      克隆的 × 放在 wrapper 内部。这里不改动 wrapper 的尺寸和定位
 *      （尺寸是 JS 内联写死的，改了会错位），改用伪元素在其居中位置
 *      画一个更大的金色圆底 + 两圈向外扩散的脉冲环。
 */

.guide-close-detail-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    overflow: visible !important;
    animation: guideCloseDetailPulse 1s ease-in-out infinite !important;
}

/* 金色圆底：居中于 × ，比 × 本身大一圈，压在文字下方 */
.guide-close-detail-highlight::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255, 236, 170, 0.98) 0%,
                rgba(255, 198, 60, 0.95) 65%,
                rgba(255, 170, 20, 0.9) 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95),
                0 0 16px 5px rgba(255, 200, 60, 0.95),
                0 0 38px 14px rgba(255, 160, 0, 0.55);
    z-index: 0;
    pointer-events: none;
}

/* 向外扩散的脉冲环 */
.guide-close-detail-highlight::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 225, 120, 0.95);
    transform-origin: center;
    animation: guideCloseDetailRipple 1.5s ease-out infinite;
    z-index: 0;
    pointer-events: none;
}

/* 让克隆出来的 ✕ 压在金色圆底之上，并改成深色以拉高对比度 */
.guide-close-detail-highlight > * {
    position: relative !important;
    z-index: 2 !important;
    color: #4a2c00 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
}

@keyframes guideCloseDetailPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.16); }
}

@keyframes guideCloseDetailRipple {
    0%   { opacity: 0.95; transform: scale(1); }
    100% { opacity: 0;    transform: scale(2.6); }
}