/* ===== 新手引导样式 ===== */

/* ★ 导航栏红点脉冲动画 */
@keyframes redDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* 引导遮罩层 */
.guide-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
    opacity: 0;
    animation: guideFadeIn 0.5s ease-out forwards;
    cursor: pointer;
}

@keyframes guideFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes guideFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.guide-overlay.closing {
    animation: guideFadeOut 0.4s ease-in forwards;
}

/* 引导气泡容器 */
.guide-bubble-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 340px;
    animation: guideBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: translateY(-30px);
    opacity: 0;
    animation-delay: 0.2s;
}

@keyframes guideBounceIn {
    from {
        transform: translateY(-30px) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 盔甲猫头像 */
.guide-cat-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    animation: guideAvatarFloat 2.5s ease-in-out infinite;
    background: transparent;
    overflow: hidden;
}

.guide-cat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes guideAvatarFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* 对话气泡 */
.guide-speech-bubble {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 20, 60, 0.95), rgba(20, 40, 80, 0.95));
    border: 2px solid rgba(0, 200, 255, 0.5);
    border-radius: 16px;
    padding: 16px 18px;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 
        0 0 20px rgba(0, 150, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: guideBubblePulse 3s ease-in-out infinite;
}

@keyframes guideBubblePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 150, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 30px rgba(0, 150, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
}

/* 气泡左侧小三角 */
.guide-speech-bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 20px;
    width: 0; height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid rgba(0, 200, 255, 0.5);
}

.guide-speech-bubble::after {
    content: '';
    position: absolute;
    left: -7px;
    top: 21px;
    width: 0; height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid rgba(10, 20, 60, 0.95);
}

/* 引导文字 */
.guide-text-main {
    color: #e0f0ff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ★ 引导文字上方的"土地老儿"名字标签 */
.guide-text-main::before {
    content: '土地老儿';
    display: block;
    color: #FFD700;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(255, 180, 0, 0.4), 0 0 8px rgba(255, 200, 50, 0.15);
}

/* 关闭提示 */
.guide-dismiss-hint {
    color: rgba(255, 215, 0, 0.8);
    font-size: 11px;
    text-align: center;
    margin-top: 20px;
    animation: guideHintBlink 2s ease-in-out infinite;
    letter-spacing: 1px;
}

@keyframes guideHintBlink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 下方箭头指示 */
.guide-arrow-down {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: guideArrowBounce 1.2s ease-in-out infinite;
}

@keyframes guideArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.guide-arrow-down::before {
    content: '';
    width: 3px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255, 215, 0, 0.8));
    border-radius: 2px;
}

.guide-arrow-down::after {
    content: '';
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid rgba(255, 215, 0, 0.8);
    margin-top: 2px;
}

/* 高亮进入游戏按钮的效果 - 使用outline和filter避免影响position/transform */
.guide-highlight-btn {
    z-index: 9991;
}

.guide-highlight-btn .battle-btn {
    animation: guideHighlightPulse 1.5s ease-in-out infinite !important;
}

@keyframes guideHighlightPulse {
    0%, 100% { 
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 180, 0, 0.3));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 180, 0, 0.5));
        transform: scale(1.08);
    }
}

/* ===== 海克斯科技引导样式 ===== */
.guide-hextech-overlay {
    padding-top: 30px;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.guide-hextech-overlay .guide-bubble-container {
    max-width: 320px;
    margin-bottom: 10px;
}

/* 海克斯卡牌高亮效果 */
.guide-hextech-card-highlight {
    position: relative;
    z-index: 101;
    animation: guideHextechCardPulse 1.8s ease-in-out infinite !important;
}

@keyframes guideHextechCardPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 180, 0, 0.4));
        transform: scale(1.03);
    }
}

/* ===== 选择强化引导样式 ===== */
.guide-upgrade-overlay {
    padding-top: 0;
    justify-content: flex-end;
    padding-bottom: 60px;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100;
}

.guide-upgrade-overlay .guide-bubble-container {
    max-width: 320px;
    margin-bottom: 10px;
    pointer-events: none;
}

/* 分身卡高亮效果 */
.guide-upgrade-card-highlight {
    position: relative;
    z-index: 101;
    pointer-events: auto !important;
    animation: guideUpgradeCardPulse 1.5s ease-in-out infinite !important;
}

@keyframes guideUpgradeCardPulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(0, 255, 100, 0.6));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(0, 255, 100, 0.9)) drop-shadow(0 0 35px rgba(0, 200, 80, 0.5));
        transform: scale(1.05);
    }
}

/* 禁用其他卡牌 */
.guide-upgrade-card-disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    filter: grayscale(0.8) !important;
}

/* ===== 骰子强化引导样式 ===== */
.guide-dice-upgrade-overlay {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    padding-top: 0;
    justify-content: flex-end;
    padding-bottom: 30px;
    cursor: pointer;
}

.guide-dice-upgrade-overlay .guide-bubble-container {
    max-width: 320px;
    margin-bottom: 10px;
    pointer-events: none;
}

/* 骰子高亮效果 */
.guide-dice-highlight {
    position: relative;
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideDiceHighlightPulse 1.2s ease-in-out infinite !important;
}

.guide-dice-highlight .dice-3d-wrap {
    border-color: rgba(0, 255, 100, 0.9) !important;
    box-shadow: 0 0 20px rgba(0, 255, 100, 0.8), 0 0 40px rgba(0, 200, 80, 0.4) !important;
}

@keyframes guideDiceHighlightPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(0, 255, 100, 0.6));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 20px rgba(0, 255, 100, 0.9));
    }
}

/* ===== 宝箱领取引导样式 ===== */
.guide-chest-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-chest-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* 宝箱高亮效果 */
.guide-chest-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideChestPulse 1.2s ease-in-out infinite !important;
}

/* ★ 倍速按钮引导高亮（第4关解锁时）*/
.guide-speed-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    border-radius: 8px;
    animation: guideSpeedPulse 1.2s ease-in-out infinite !important;
}
@keyframes guideSpeedPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(120, 200, 255, 0.65));
    }
    50% {
        transform: scale(1.14);
        filter: drop-shadow(0 0 16px rgba(120, 200, 255, 0.95)) drop-shadow(0 0 30px rgba(60, 160, 255, 0.55));
    }
}

@keyframes guideChestPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 180, 0, 0.5));
    }
}

/* ===== 英雄导航按钮引导样式 ===== */
.guide-hero-nav-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-hero-nav-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* 英雄按钮高亮效果 */
.guide-hero-nav-highlight {
    position: relative;
    z-index: 9996 !important;
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideHeroNavPulse 1.2s ease-in-out infinite !important;
}

@keyframes guideHeroNavPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.6));
    }
    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 16px rgba(0, 200, 255, 0.9)) drop-shadow(0 0 30px rgba(0, 150, 255, 0.5));
    }
}

/* ===== 英雄列表引导样式 ===== */
.guide-hero-list-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-hero-list-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* 英雄卡高亮效果 */
.guide-hero-list-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideHeroListPulse 1.2s ease-in-out infinite !important;
}

@keyframes guideHeroListPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.6));
    }
    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 16px rgba(255, 200, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 150, 0, 0.5));
    }
}

/* ===== 升级按钮引导样式 ===== */
.guide-levelup-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-levelup-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* 升级按钮高亮效果 */
.guide-levelup-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideLevelUpPulse 1.2s ease-in-out infinite !important;
    background: rgba(0, 200, 255, 0.15);
    border-radius: 8px;
}

@keyframes guideLevelUpPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.6));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 16px rgba(0, 200, 255, 0.9)) drop-shadow(0 0 30px rgba(0, 150, 255, 0.5));
    }
}

/* ===== 升5级按钮引导样式 ===== */
.guide-levelup5-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-levelup5-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* 升5级按钮高亮效果 */
.guide-levelup5-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideLevelUp5Pulse 1.2s ease-in-out infinite !important;
}

@keyframes guideLevelUp5Pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(0, 255, 100, 0.6));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 16px rgba(0, 255, 100, 0.9)) drop-shadow(0 0 30px rgba(0, 200, 80, 0.5));
    }
}

/* ===== 返回列表引导样式 ===== */
.guide-back-list-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-back-list-bubble {
    max-width: 320px;
    pointer-events: none;
}

/* 列表按钮高亮效果 */
.guide-back-list-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideBackListPulse 1.2s ease-in-out infinite !important;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 8px;
}

@keyframes guideBackListPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 30px rgba(255, 180, 0, 0.5));
    }
}

/* ===== 关卡导航按钮引导样式 ===== */
.guide-stage-nav-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-stage-nav-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* 关卡按钮高亮效果 */
.guide-stage-nav-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideStageNavPulse 1.2s ease-in-out infinite !important;
    background: rgba(0, 200, 255, 0.15);
    border-radius: 8px;
}

@keyframes guideStageNavPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.6));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 16px rgba(0, 200, 255, 0.9)) drop-shadow(0 0 30px rgba(0, 150, 255, 0.5));
    }
}

/* ===== 进入游戏引导样式 ===== */
.guide-enter-game-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-enter-game-bubble {
    max-width: 320px;
    pointer-events: none;
}

/* 进入游戏按钮高亮效果 */
.guide-enter-game-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideEnterGamePulse 1.2s ease-in-out infinite !important;
}

@keyframes guideEnterGamePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    }
    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 35px rgba(255, 180, 0, 0.5));
    }
}

/* ===== 编辑阵容引导样式 ===== */
.guide-edit-formation-overlay {
    padding-top: 0;
    justify-content: flex-start;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9990;
}

.guide-edit-formation-bubble {
    max-width: 320px;
    pointer-events: none;
}

/* 编辑按钮高亮效果 */
.guide-edit-formation-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideEditFormationPulse 1.2s ease-in-out infinite !important;
    background: rgba(0, 255, 100, 0.15);
    border-radius: 8px;
}

@keyframes guideEditFormationPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(0, 255, 100, 0.6));
    }
    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 16px rgba(0, 255, 100, 0.9)) drop-shadow(0 0 30px rgba(0, 200, 80, 0.5));
    }
}

/* ===== 幸运骰（额外骰库）引导样式 =====
   引导时骰子图标高亮，气泡文字居中，点击任意处关闭 */
.guide-bonus-dice-overlay {
    padding-top: 0;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.62);
    z-index: 9990;
}

.guide-bonus-dice-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* 幸运骰图标高亮：金色呼吸光 + 轻微放大（跟就绷态的绿光区分开）*/
.guide-bonus-dice-highlight {
    pointer-events: auto !important;
    cursor: pointer;
    animation: guideBonusDicePulse 1.2s ease-in-out infinite !important;
}

@keyframes guideBonusDicePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.75));
    }
    50% {
        transform: scale(1.14);
        filter: drop-shadow(0 0 20px rgba(255, 225, 90, 1))
                drop-shadow(0 0 34px rgba(255, 180, 40, 0.6));
    }
}

/* ===== ★ Lucky 时刻引导样式 =====
   第一关 40 秒后首次触发 Lucky 时弹出：LUCKY! 字样常驻高亮 + 气泡说明 */
.guide-lucky-overlay {
    padding-top: 0;
    justify-content: flex-start;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.62);
    z-index: 9990;
}

/* 关闭提示放屏幕上部（下方要留给 LUCKY 字样和骰子）*/
.guide-lucky-overlay .guide-dismiss-hint {
    position: absolute;
    top: 12%;
    left: 0; right: 0;
    margin: 0;
}

.guide-lucky-bubble {
    max-width: 300px;
    pointer-events: none;
}

/* LUCKY 字样的高亮副本：按原字样中心点定位，金光呼吸 + 放大常驻 */
.guide-lucky-badge-holder {
    position: absolute;
    z-index: 9996;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.2);
    animation: guideLuckyBadgePulse 1.2s ease-in-out infinite;
}

/* 克隆体：取消原有的绝对定位/飘走动画，常驻显示 */
.guide-lucky-badge-holder .dice-lucky-badge,
.dice-lucky-badge.guide-hold {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
}

@keyframes guideLuckyBadgePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.2);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }
    50% {
        transform: translate(-50%, -50%) scale(1.38);
        filter: drop-shadow(0 0 22px rgba(255, 228, 100, 1))
                drop-shadow(0 0 38px rgba(255, 180, 40, 0.6));
    }
}

/* ===== 试试新阵容引导样式 ===== */
.guide-try-new-team-overlay {
    padding-top: 0;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9990;
}