/* ==========================================
   🧭 V7.13 GUIDED MISSION BRIEFING (Dynamic Tour)
   ========================================== */

#tour-click-shield {
    position: fixed; inset: 0; z-index: 99990;
    background: transparent; display: none;
}
#tour-click-shield.tour-active { display: block; }

#tour-spotlight {
    position: fixed; z-index: 99991; pointer-events: none;
    border: 2px solid var(--color-neon-blue); border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(3, 7, 18, 0.78), 0 0 25px 4px rgba(56, 189, 248, 0.55);
    transition: top 0.4s cubic-bezier(0.65,0,0.35,1), left 0.4s cubic-bezier(0.65,0,0.35,1),
                width 0.4s cubic-bezier(0.65,0,0.35,1), height 0.4s cubic-bezier(0.65,0,0.35,1);
    display: none;
}
#tour-spotlight.tour-active { display: block; }
#tour-spotlight.no-target { border: none; box-shadow: 0 0 0 9999px rgba(3, 7, 18, 0.78); }

#tour-card {
    position: fixed; z-index: 99992; display: none;
    width: min(340px, calc(100vw - 32px));
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 20px 50px rgba(0,0,0,0.6);
    padding: 22px; font-family: 'Inter', sans-serif;
    transition: top 0.4s cubic-bezier(0.65,0,0.35,1), left 0.4s cubic-bezier(0.65,0,0.35,1);
}
#tour-card.tour-active { display: block; }

#tour-card h3 {
    margin: 0 0 8px 0; font-family: 'Nunito', sans-serif; font-weight: 900;
    color: var(--color-neon-blue); font-size: 1.05rem; display: block;
}
#tour-card p { margin: 0 0 16px 0; font-size: 0.9rem; color: #E2E8F0; line-height: 1.5; }

#tour-progress { display: flex; gap: 6px; margin-bottom: 6px; }
#tour-progress span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.15); }
#tour-progress span.done { background: var(--color-neon-blue); }

#tour-step-count { display: block; font-size: 0.7rem; color: #64748b; font-weight: 700; margin-bottom: 14px; }

#tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#tour-skip {
    background: none; border: none; color: #94a3b8; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; padding: 8px; font-family: 'Nunito', sans-serif;
}
#tour-skip:hover { color: #fff; }
#tour-nav-group { display: flex; gap: 8px; }
#tour-back, #tour-next {
    border: none; border-radius: var(--radius-btn); padding: 10px 20px; font-weight: 800;
    font-family: 'Nunito', sans-serif; cursor: pointer; font-size: 0.85rem;
}
#tour-back { background: rgba(255,255,255,0.1); color: #fff; }
#tour-back:disabled { opacity: 0.3; cursor: default; }
#tour-next {
    background: var(--color-primary); background-image: var(--glass-shine); background-blend-mode: overlay;
    color: #1E1B4B; box-shadow: 0 4px 0 var(--color-primary-shadow);
}
#tour-next:active { box-shadow: none; transform: translateY(4px); }

#btn-replay-tour {
    background: rgba(255, 209, 102, 0.1) !important; color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

@media (max-width: 600px) {
    #tour-card { width: calc(100vw - 32px); padding: 18px; }
}